@shijiu/jsview-vue 0.0.1-beta.0

package/samples/SimpleWidgetDemo/App.vue

@@ -0,0 +1,204 @@
+<!--
+ * 【界面概述】
+ * 展示SimpleWidget控件的用法
+ *
+ * 【控件介绍】
+ * SimpleWidget:
+ *      top {int} 控件的y，默认为0
+ *      left {int} 控件的x， 默认为0
+ *      width {int} (必选)控件的宽
+ *      height {int} (必选)控件的高
+ *
+ *      name {string} (必选)用于设置焦点的名称
+ *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
+ *      direction {enum} (必选)控件方向 HROIZONTAL/VERTICAL
+ *      loopFocus {boolean} 焦点到边界后自动转到下一行，默认false
+ *      initFocusId {int} 初始焦点，默认为0
+ *      slideStyle {SlideStyle} 页面滑动类型 seamless/wholepage
+ *      slideSpeed {float} 页面滑动速度，默认为1.5
+ *      slideEasing {string} 页面滑动动画easing
+
+ *      data {array} (必选)数据列表
+ *      dispatcher {SWidgetDispatcher} 用于设置SimpleWidget控件内部的状态，默认为null
+ *      measures {function} (必选)返回item的模板信息的回调,
+ *                              @params item {object} data中的数据
+ *                              @return 模板信息，
+                                        {
+                                          width: item的宽,
+                                          height: item的高,
+                                          focusable: item是否可以获得焦点,
+                                        }
+ *
+ *      onClick {function} item点击回调
+ *                @params item data中的数据
+ *      onFocus {function} 控件获取焦点的回调
+ *      onBlur {function} 控件失去焦点的回调
+ *      onEdge {function} 焦点移动到边缘时的回调
+ *              @params {"direction": {EdgeDirection}边缘方向, "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}}
+ *
+ *      enableTouch {boolean} 支持触控
+ *      loadAll {boolean} 加载不显示的view，触控场景使用
+ *
+ * 【技巧说明】
+ * Q: 插槽props如何使用？
+ * A: data: 当前item的数据
+ *    query: 获取一些额外信息的对象
+                { 
+                  id: {int} item的id,
+                  position: {Function} 获取item坐标的函数
+                                            @params id {int} item的id
+                                            @return {object} item的位置 {xPos, yPos, width, height}
+                }
+ *    onEdge: 若单元格内另有可接管按键的控件（如SimpleWidget），该控件到达边缘需要通知SimpleWidget时的回调
+ *    onAction: 单元格内控件需要通过onAction.register方法向SimpleWidget注册onFocus， onBlur， onClick
+ * 
+ * Q: 如何进行布局，定制每个格的尺寸？
+ * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
+ *    然后将单元格尺寸反馈器(函数)设置到measures中，进行布局时，组件会回调measures函数获得每个单元格的尺寸，
+ *    当一列放满单元格后(如果是纵向布局，则是一行放满后)，自动换列去布局下一列。
+ *
+ * Q: 单元格的普通状态，焦点状态，失焦状态如何渲染？
+ * A: 在单元的控件中通过往onAction注册的onFocus，onBlur控制显示
+ *
+ * Q: 控件中的导航处理(上下左右，OK键)需要什么响应的开发？
+ * A: 上下左右键已经由控件接管，不需要开发者额外处理，上下左右键会触发翻页时间，翻页的形式由属性slideStyle来定制。
+ *    另外，通过OnClick属性可以注册按键回调函数，来处理用户的OK键动作。
+ *
+ * Q: 边缘格获取焦点放大后显示不全？
+ * A: 设置padding，注意item的排布范围是控件的宽高减去对应的padding
+ *
+ * Q: 焦点怎么移出控件？
+ * A: 当焦点移动到控件边缘时，会调用onEdge回调。在回调中通过参数传递的值来决定焦点转移的行为
+-->
+
+<script>
+import { Options, Vue } from "vue-class-component";
+import { data1, data2 } from "./data";
+import {
+  VERTICAL,
+  SimpleWidget,
+  EdgeDirection,
+} from "jsview/utils/JsViewEngineWidget";
+import JsvNinePatch from "jsview/utils/JsViewVueWidget/JsvNinePatch";
+import borderImgPath from "./border.png";
+import Item from "./components/ContentItem.vue";
+import MyTab from "./components/MyTab.vue";
+
+@Options({
+  components: {
+    SimpleWidget,
+    Item,
+    JsvNinePatch,
+    MyTab,
+  },
+})
+class App extends Vue {
+  constructor(props) {
+    super(props);
+    this.focusNode = null;
+    this.direction = VERTICAL;
+    this.contentData = data1;
+    this.focusImgPath = borderImgPath;
+    this.focusStyle = {};
+    console.log("image path " + this.focusImgPath);
+  }
+
+  onKeyDown(ev) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      return true;
+    }
+    return false;
+  }
+
+  getMeasures() {
+    return {
+      width: 227,
+      height: 351,
+      focusable: true,
+    };
+  }
+  onFocus() {
+    console.log("App onFocus", this.$refs.rootNode);
+    this.$refs.rootNode.findBlockByName("simpleWidget").requestFocus();
+  }
+  onWidgetEdge(edge) {
+    if (edge.direction === EdgeDirection.top) {
+      this.$refs.rootNode.findBlockByName("tab").requestFocus();
+    }
+  }
+  onTabEdge() {
+    this.$refs.rootNode.findBlockByName("simpleWidget").requestFocus();
+  }
+  onItemFocus(id) {
+    this.contentData = id == 0 ? data1 : data2;
+  }
+  mounted() {}
+}
+
+export default App;
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="rootNode"
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :onFocus="onFocus"
+  >
+    <div class="rootSize">
+      <div :style="{ left: 50, top: 50 }">
+        <my-tab name="tab" :onEdgeDown="onTabEdge" :onItemFocus="onItemFocus" />
+      </div>
+
+      <div class="widgetPos">
+        <simple-widget
+          name="simpleWidget"
+          :data="contentData"
+          :width="1253"
+          :height="600"
+          :padding="{ left: 26, top: 36, right: 26, bottom: 36 }"
+          :direction="direction"
+          :measures="getMeasures"
+          :onEdge="onWidgetEdge"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <Item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            />
+          </template>
+        </simple-widget>
+        <div class="focusPos">
+          <JsvNinePatch
+            :style="focusStyle"
+            :imageUrl="focusImgPath"
+            :imageWidth="81"
+            :contentWidth="25"
+            :borderOutset="14"
+            :animTime="0.2"
+          />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.rootSize {
+  top: 0px;
+}
+
+.widgetPos {
+  top: 120;
+  left: 50;
+}
+
+.focusPos {
+  top: 10;
+  left: 10;
+}
+</style>

package/samples/SimpleWidgetDemo/Item.vue

@@ -0,0 +1,83 @@
+<script>
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  methods: {
+    onFocus() {
+      this.focus = true;
+      this.anim = "focusScale 0.3s";
+    },
+    onBlur() {
+      this.focus = false;
+      this.anim = "blurScale 0.3s";
+    },
+    onClick() {
+      console.log("item click");
+    },
+    getStyle() {
+      const width = this.focus
+        ? (this.data.blocks.w - 10) * (1 / 0.8)
+        : this.data.blocks.w - 10;
+      const height = this.focus
+        ? (this.data.blocks.h - 10) * (1 / 0.8)
+        : this.data.blocks.h - 10;
+      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
+      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
+      return {
+        left: posx,
+        top: posy,
+        width: width,
+        height: height,
+        color: "#FFFFFF",
+        backgroundColor: this.focus ? "#FF0000" : this.data.color,
+        animation: this.anim,
+      };
+    },
+  },
+  data() {
+    return {
+      focus: false,
+      anim: null,
+    };
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div :style="{ ...getStyle() }">
+    {{ data.content }}
+  </div>
+</template>
+
+<style scoped>
+@keyframes focusScale {
+  from {
+    transform: scale3d(0.8, 0.8, 1);
+    transform-origin: center center;
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+    transform-origin: center center;
+  }
+}
+
+@keyframes blurScale {
+  from {
+    transform: scale3d(1.25, 1.25, 1);
+    transform-origin: center center;
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+    transform-origin: center center;
+  }
+}
+</style>