@shijiu/jsview-vue-samples 1.9.747

package/BasicFocusControl/App.vue

@@ -0,0 +1,104 @@
+<!--
+ * 【界面概述】
+ * 用于展示FDiv控件来进行按键响应区块划分的样例。
+ * 界面分为主界面(main)和副界面(sideBar)，当主界面右边缘再按下右键时，焦点跳到SiderBar区域，
+ * 同理，焦点在SiderBar中，按下左键时，焦点调回main区域。
+ * 除此外，为区域内焦点移动。
+ *
+ * 【控件介绍】
+ * Fdiv：焦点控制节点，可由继承自FdivWrapper或者enableFocusable(基础类)生成衍生类两种方式获得
+ *      属性(props):
+ *          style {Object} 同div的style设置
+ *          branchName {string} 焦点名称，用于changeFocus()函数进行焦点切换的id
+ *
+ *      FdivWrapper方式的类接口列表:
+ *          onKeyDown(ev)  ev的结构为{keyCode:按键值, repeat:是否是重复按键}，响应按键按下事件，
+ *                          返回值为true时，父节点的onKeyDown不会再被触发
+ *          onKeyUp(ev)  ev的结构同上，响应按键抬起事件
+ *          onDispatchKeyDown(ev) ev的结构同上，响应按键按下事件，返回值为true时，子节点的onDispatchKeyDown不会被触发
+ *          onDispatchKeyUp(ev) ev的结构同上，响应按键抬起事件
+ *          onFocus()   当被changeFocus改变焦点后，该节点获焦时被调用
+ *          onBlur()    当被changeFocus改变焦点后，该节点丢失焦点时被调用
+ *          renderContent()     替代render()函数，返回控件描绘内容
+ *          changeFocus(branchName, keepChildFocus) 主动进行焦点切换
+ *
+ *      enableFocusable(基础类)生成衍生类时的节点列表：
+ *          onKeyDown(ev) 同上
+ *          onKeyUp(ev) 同上
+ *          onDispatchKeyDown(ev) 同上
+ *          onDispatchKeyUp(ev) 同上
+ *          onFocus(ev) 同上
+ *          onBlur(ev) 同上
+ *          setControl(control_ref) 接受control对象，control对象含有changeFocus接口
+ *          changeFocus(branchName) 同上
+ *          注意: render()函数没有被renderContent()函数替代
+ *
+ * 【技巧说明】
+ * Q: 如何进行按键响应？
+ * A: 重载函数onKeyDown/onKeyUp/onDispatchKeyDown/onDispatchKeyUp中任何一个关心的按键事件响应函数，
+ *    处理ev.keyCode判断按键值，通过返回值控制消息传递链是否中止
+ *
+ * Q: 如何进行焦点切换？
+ * A: 首先为子焦点设置branchName属性，当需要进行焦点切换的时候，调用FDiv类中的this.changeFocus()接口，
+ *    传入目标的branchName，即可进行焦点切换。在同一个FdivRouter节点的所有Fdiv，只要指定对方的branchName，就可以进行切换。
+ *    不限制切换目标是自己的子节点、兄弟节点或者是父几点。一般一个场景定义一个FdivRouter。
+ *    在enableFocusable的场景，通过重载setControl接口，获得control对象，通过该对象的 changeFocus()接口来进行焦点切换。
+ *
+ * Q: changeFocus的第二个参数keepChildFocus的作用是什么？
+ * A: 使用场景举例：
+ *    场景1：changeFocus的目标是一个当前获焦节点的父节点时，若keepChildFocus为true，则不会发生任何改变；
+ *    若keepChildFocus为false或者不设置，则该焦点会失焦，焦点退回到父节点中。
+ *    场景2：changeFocus的目标为一个曾经获得过焦但目前处于非焦状态的节点的父节点时，若keepChildFocus为true时，
+ *    焦点会沿着该父节点的最后获焦状态记录，寻找到最末尾的落焦节点进行获焦；若keepChildFocus为false或者不设置，
+ *    则只会对该父节点进行获焦，不会根据最后获焦状态寻找最末尾节点。
+ *    （例如，进行场景回退时，返回上一个场景过程中，不需要该场景去记录最后的焦点位置，只要changeFocus设置
+ *    为该场景的根Fdiv，并且keepChildFocus设置为true，则Fdiv系统会自动将焦点落在此场景失焦时的最后获焦位置。）
+ *
+-->
+
+<script setup>
+import { useRouter } from "vue-router";
+import MainArea from "./components/MainArea.vue";
+import SideBar from "./components/SideBar.vue";
+
+const router = useRouter();
+const onKeyDown = (ev) => {
+  // 有router时，是从DemoHomepage进入，回退，和本demo功能无关
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+    return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <!-- 这里的jsv-focus-block只是为了获取到一个base focus节点，并不是必须的 -->
+  <jsv-focus-block :onKeyDown="onKeyDown">
+    <div class="title">可上下左右切换焦点</div>
+    <div class="body">
+      <MainArea :style="{ left: 0 }" />
+      <SideBar :style="{ left: 300 }" />
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.title {
+  text-align: center;
+  font-size: 30px;
+  line-height: 50px;
+  color: #ffffff;
+  left: 100;
+  top: 50;
+  width: 400;
+  height: 50;
+  background-color: rgba(27, 38, 151, 0.8);
+}
+
+.body {
+  left: 100;
+  top: 120;
+}
+</style>

package/BasicFocusControl/components/BaseBlock.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref, shallowRef, onMounted } from "vue";
+const props = defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  onKeyDown: Function,
+});
+
+const fullName = ref("");
+const blockRef = shallowRef(null);
+const hasFocused = ref(false);
+
+onMounted(() => {
+  fullName.value = blockRef.value.getName();
+});
+const onFocus = () => {
+  hasFocused.value = true;
+};
+const onBlur = () => {
+  hasFocused.value = false;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="blockRef"
+    :name="name"
+    :onAction="{
+      onKeyDown,
+      onFocus,
+      onBlur,
+    }"
+  >
+    <div
+      :style="{
+        ...$props.style,
+        width: 100,
+        height: 100,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
+      {{ fullName }}
+    </div>
+  </jsv-focus-block>
+</template>

package/BasicFocusControl/components/MainArea.vue

@@ -0,0 +1,83 @@
+<script setup>
+import MainAreaLeftBlock from "./MainAreaLeftBlock.vue";
+import MainAreaRightBlock from "./MainAreaRightBlock.vue";
+import { useFocusHub } from "jsview";
+
+const focusHub = useFocusHub();
+window.focusHub = focusHub
+let focusRow = 0;
+let focusColumn = 0;
+const onKeyDown = (ev) => {
+  // 子节点未处理的按键事件会流向此节点
+  let keyUsed = true;
+  switch (ev.keyCode) {
+    case 38: // Up
+      focusRow = 0;
+      break;
+    case 40: // Down
+      focusRow = 1;
+      break;
+    case 37: // Left
+      focusColumn = 0;
+      break;
+    case 39: // Right
+      focusColumn = 1;
+      break;
+    default:
+      keyUsed = false;
+  }
+
+  if (keyUsed) {
+    // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+    const name = `main.R${focusRow}C${focusColumn}`;
+    focusHub.setFocus(name);
+  }
+
+  return keyUsed;
+};
+
+const onFocus = () => {
+  const name = `main.R${focusRow}C${focusColumn}`;
+  focusHub.setFocus(name);
+};
+</script>
+
+<template>
+  <!--jsv-focus-block是不可描画节点，所以如果想接收style等属性，不要放在顶级-->
+  <div>
+    <!-- 这里的jsv-focus-block只是一个namesapce的样例，并不是必须的，
+       如果你App中的焦点在一个命名空间下，这里可以用name，参考SideBar。 -->
+    <jsv-focus-block
+      namespace="main"
+      autoFocus
+      :onAction="{
+        onKeyDown,
+        onFocus,
+      }"
+    >
+      <MainAreaLeftBlock name="R0C0" :style="{ left: 0, top: 0 }" />
+      <MainAreaLeftBlock name="R1C0" :style="{ left: 0, top: 120 }" />
+      <MainAreaRightBlock name="R0C1" :style="{ left: 120, top: 0 }" />
+      <MainAreaRightBlock name="R1C1" :style="{ left: 120, top: 120 }" />
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  text-align: center;
+  font-size: 30px;
+  line-height: 50px;
+  color: #ffffff;
+  left: 100;
+  top: 50;
+  width: 400;
+  height: 50;
+  background-color: rgba(27, 38, 151, 0.8);
+}
+
+.body {
+  left: 100;
+  top: 120;
+}
+</style>

package/BasicFocusControl/components/MainAreaLeftBlock.vue

@@ -0,0 +1,17 @@
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+</script>
+
+<template>
+  <BaseBlock :name="name" :style="style" />
+</template>

package/BasicFocusControl/components/MainAreaRightBlock.vue

@@ -0,0 +1,27 @@
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 39) {
+    // Right key
+    focusHub.setFocus("sideBarR0C0");
+    return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
+</template>

package/BasicFocusControl/components/SideBar.vue

@@ -0,0 +1,58 @@
+<script setup>
+import SideBarBlock from "./SideBarBlock.vue";
+import { useFocusHub } from "jsview";
+let focusRow = 0;
+const focusHub = useFocusHub();
+
+const onKeyDown = (ev) => {
+  // 子节点未处理的按键事件会流向此节点
+  let keyUsed = true;
+  switch (ev.keyCode) {
+    case 38: // Up
+      focusRow = 0;
+      break;
+    case 40: // Down
+      focusRow = 1;
+      break;
+    default:
+      keyUsed = false;
+  }
+
+  if (keyUsed) {
+    // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+    const name = `sideBarR${focusRow}C0`;
+    focusHub.setFocus(name);
+  }
+
+  return keyUsed;
+};
+</script>
+
+<template>
+  <div>
+    <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
+    <jsv-focus-block :onKeyDown="onKeyDown">
+      <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
+      <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  text-align: center;
+  font-size: 30px;
+  line-height: 50px;
+  color: #ffffff;
+  left: 100;
+  top: 50;
+  width: 400;
+  height: 50;
+  background-color: rgba(27, 38, 151, 0.8);
+}
+
+.body {
+  left: 100;
+  top: 120;
+}
+</style>

package/BasicFocusControl/components/SideBarBlock.vue

@@ -0,0 +1,27 @@
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
+
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 37) {
+    // Right key
+    focusHub.setFocus("main");
+    return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
+</template>