@shijiu/jsview-vue 0.0.1-beta.0

package/samples/HashHistory/App.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { router, routeList } from './router.js'
+import { useRouter, useRoute, Router } from 'vue-router'
+
+@Options({
+  props: {
+    routePath: String
+  },
+})
+class App extends Vue {
+  constructor(props: any) {
+    super(props)
+
+    let currentRouter: Router;
+
+    // props.routePath在DemoHomepage中被设置, 此处作为内嵌router使用.
+    // 此时已经有router, 则作为children动态添加到当前route
+    if(props.routePath) {
+      const currentRoute = useRoute()
+      currentRouter = useRouter()
+
+      let redirectPath; // 自动跳转路径
+      for(const route of routeList) {
+        if(route.path === "/") { // 不需要添加home
+          redirectPath = route.redirect;
+          continue;
+        }
+
+        const subRoute = {...route, path: route.path.substring(1)} // 去掉字符'/'
+        currentRouter.addRoute(currentRoute.name as string, subRoute)
+      }
+
+      currentRouter.replace(props.routePath + redirectPath) // 自动跳转到redirectPath
+    } else { // 作为全局router使用
+      currentRouter = App.Router;
+    }
+
+    this.watchRouterChanged(currentRouter);
+  }
+
+  // Override
+  mounted() {
+    // 调试接口，对接JSCenter平台去掉启动图的处理
+    jJsvRuntimeBridge.notifyPageLoaded();
+  }
+
+  private onRequestFocus(branchName: string) {
+    this.topRef.findBlockByname(branchName)?.requestFocus();
+  }
+
+  private watchRouterChanged(route: Router) {
+    route.afterEach(() => {
+      this.displayUrl = window.location.href;
+    })
+  }
+
+  private onKeyDown(event: any) {
+    return this.routePage?.onKeyDown(event);
+  }
+
+  private topRef!: any;
+  private displayUrl: string = "";
+  private routePage: any = null;
+
+  static Router: Router = router;
+}
+
+export default App;
+</script>
+
+<template>
+<div class="root">
+  <div class="address">
+      当前URL: {{ displayUrl }}
+  </div>
+  <div class="split" />
+    <jsv-focus-block ref="topRef">
+      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
+      <router-view v-slot="{ Component }">
+        <component :is="Component"
+            ref="routePage"
+            class="router"
+            @requestFocus="onRequestFocus"
+        />
+      </router-view>
+    </jsv-focus-block>
+</div>
+</template>
+
+<style scoped>
+.root {
+  left: 0;
+  top: 0;
+  width: 1280;
+  height: 1080;
+  background-color: rgb(222,211,140)
+}
+
+.address {
+  left: 40;
+  top: 40;
+  width: 1200;
+  height: 200;
+  font-size: 20;
+}
+
+.split {
+  left: 40;
+  top: 150;
+  width: 1200;
+  height: 3;
+  background-color: #00F000;
+}
+
+.router {
+  left:0;
+  top:150;
+  width: 1920;
+  height: 930;
+  overflow: hidden;
+}
+</style>

package/samples/HashHistory/components/HorizontalButtonList.vue

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
+import { Options, Vue } from "vue-class-component";
+import Item from "./Item.vue";
+
+@Options({
+  props: {
+    style: Object,
+    buttonConfig: Object,
+    onButtonClick: Function,
+    onBack: Function,
+  },
+  components: {
+    Item,
+  }
+})
+
+
+class HorizontalButtonList extends Vue {
+  constructor(props: object) {
+    super(props);
+
+    this.listSize = this.computeSize(props);
+  }
+
+  private computeSize(props: any) : object {
+    let listLeft = 0;
+    const listWidth = (this.buttonWidth + this.buttonGap) * props.buttonConfig.length;
+
+    // 根据maxWidth，计算buttons的左边位置
+    const widthCenter = listWidth - this.buttonGap; // 减去最后一个元素的gap
+    if (widthCenter < this.maxWidth) {
+      listLeft = Math.floor((this.maxWidth - widthCenter) / 2);
+    }
+
+    let listSize = {
+      left: listLeft,
+      width: listWidth,
+      height: this.buttonHeight,
+    };
+
+    return listSize;
+  }
+
+  private onKeyDown(ev: JsvFocusEvent) {
+    if(ev.keyCode === 13) { // Enter
+      this.onButtonClick?.(this.focusedItemIndex);
+      return true;
+    } else if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) { // 8:Backspace, 27:Escape, 10000:盒子返回键
+      this.onBack?.();
+      return true;
+    }
+
+    let changeFocusTo = -1;
+    switch (ev.keyCode) {
+      case 37: // Left
+        changeFocusTo = (this.focusedItemIndex - 1 + this.buttonConfig.length) % this.buttonConfig.length;
+        break;
+      case 39: // Right
+        changeFocusTo = (this.focusedItemIndex + 1) % this.buttonConfig.length;
+        break;
+      default:
+        break;
+    }
+    if (changeFocusTo >= 0) {
+      ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
+      this.focusedItemIndex = changeFocusTo;
+      return true;
+    }
+
+    return false;
+  }
+
+  private listSize: object;
+
+  private focusedItemIndex = 0;
+
+  private readonly buttonConfig!: any;
+  private readonly onButtonClick?: Function;
+  private readonly onBack?: Function;
+
+  private readonly maxWidth: number = 1280;
+  private readonly listPadding: number = 10;
+  private readonly buttonWidth: number = 400;
+  private readonly buttonHeight: number = 80;
+  private readonly buttonGap: number = 50;
+}
+
+export default HorizontalButtonList;
+</script>
+
+<template>
+<div :style="style">
+  <jsv-focus-block
+      :style="{
+        left: listSize.left,
+        width: listSize.width + listPadding * 2,
+        height: listSize.height + listPadding * 2,
+      }"
+      :onKeyDown="onKeyDown"
+  >
+    <Item v-for="(item,index) in buttonConfig" :key="index"
+        :style="{ left: (buttonWidth+10)*index, width:buttonWidth, height:buttonHeight }"
+        :name="index.toString()"
+        :autoFocus="index === 0"
+    >
+      {{ item.name }}
+    </Item>
+  </jsv-focus-block>
+</div>
+</template>
+
+<style>
+</style>

package/samples/HashHistory/components/Item.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    style: Object,
+    name: String,
+    autoFocus: Boolean
+  },
+})
+
+class Item extends Vue {
+  constructor(props: object) {
+    super(props);
+  }
+
+  onFocus() {
+    this.hasFocused = true;
+  }
+
+  onBlur() {
+    this.hasFocused = false;
+  }
+
+  getFocusStyle() {
+    return {
+      width: this.style.width + 10,
+      height: this.style.height + 10,
+    }
+  }
+
+  getItemStyle() {
+    return {
+      width: this.style.width,
+      height: this.style.height,
+      backgroundColor: '#0FF000',
+      lineHeight: this.style.height,
+      fontSize: `${Math.floor(this.style.height * 0.55)}px`,
+    }
+  }
+
+  private hasFocused: boolean = false;
+  private style!: any;
+}
+
+export default Item;
+</script>
+
+<template>
+<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
+  :onFocus="onFocus" :onBlur="onBlur"
+>
+  <div :style="style">
+    <div class="focus" :style="getFocusStyle()" v-if="hasFocused" />
+    <div class="item" :style="getItemStyle()">
+      <slot/>
+    </div>
+  </div>
+</jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000FF;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+  color: #000000;
+  white-space: nowrap;
+}
+</style>

package/samples/HashHistory/router.js

@@ -0,0 +1,30 @@
+import { createRouter }  from "vue-router";
+import { createJsvHashHistory }  from "jsview/utils/JsViewVueTools/JsvHashHistory";
+
+const routeList = [
+  // 功能实例
+  { 
+    name: "Home",
+    path: "/",
+    redirect: "/__MainJsvApp/MainPage", 
+  }, { 
+    name: "MainPage",
+    path: "/__MainJsvApp/MainPage",
+    component: () => import('./views/MainPage')
+  }, { 
+    name: "SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst",
+    component: () => import('./views/SubPageFirst')
+  }, { 
+    name: "SubPageSecond",
+    path: "/__MainJsvApp/SubPageSecond",
+    component: () => import('./views/SubPageSecond')
+  },
+];
+
+const router = createRouter({
+  history: createJsvHashHistory(),
+  routes: routeList,
+})
+
+export { router, routeList }

package/samples/HashHistory/views/BasePage.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class BasePage extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  mounted() {
+    // this.$emit('requestFocus', this.branchName);
+  }
+
+  onBack() {
+    this.$router?.go(-1); // 有router时，回退
+  }
+
+  protected branchName?: string;
+}
+</script>

package/samples/HashHistory/views/MainPage.vue

@@ -0,0 +1,68 @@
+<script lang="ts">
+import { Options } from "vue-class-component";
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+import BasePage from "./BasePage.vue"
+
+@Options({
+  components: {
+    HorizontalButtonList
+  }
+})
+export default class MainPage extends BasePage {
+  constructor(props: any) {
+    super(props);
+
+    this.branchName = "./MainPage.ButtonList"
+  }
+
+  private getButtonListConfig() {
+    const buttonListConfig = [{
+      name: "启动子界面-First",
+      route: {
+        path: "SubPageFirst",
+        query: { from: 'main' },
+      }
+    }, {
+      name: "启动子界面-Second",
+      route: {
+        path: "SubPageSecond",
+        query: { from: 'main' },
+      }
+    }];
+
+    return buttonListConfig;
+  }
+
+  private onButtonClick(idx: number) {
+    const buttonListConfig = this.getButtonListConfig();
+    const config = buttonListConfig[idx];
+    console.log("Jump page to: " + config.name)
+    this.$router.push(config.route);
+  }
+}
+</script>
+
+<template>
+<div>
+  <div class="title">
+      这是主界面
+  </div>
+  <HorizontalButtonList
+      :style="{top: 330}"
+      :buttonConfig="getButtonListConfig()"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+  />
+</div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
+</style>

package/samples/HashHistory/views/SubPage.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+import { Options } from "vue-class-component";
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+import BasePage from "./BasePage.vue"
+
+@Options({
+  components: {
+    HorizontalButtonList
+  }
+})
+export default class SubPage extends BasePage {
+  constructor(props: any, name: string, jumpTo: string) {
+    super(props);
+
+    this.name = name;
+    this.jumpTo = jumpTo;
+    this.branchName = "./ButtonList/SubPage" + this.name;
+  }
+
+  private getButtonListConfig() {
+    const buttonListConfig = [{
+      name: "跳转子界面-" + this.jumpTo,
+      route: {
+        path: "SubPage" + this.jumpTo,
+        query: { from: 'sub' + this.name },
+      }
+    }];
+
+    return buttonListConfig;
+  }
+
+  private onButtonClick(idx: number) {
+    const buttonListConfig = this.getButtonListConfig();
+    const config = buttonListConfig[idx];
+    console.log("Jump page to: " + config.name)
+    this.$router.push(config.route);
+  }
+
+  private readonly name: string;
+  private readonly jumpTo: string;
+}
+</script>
+
+<template>
+<div>
+  <div class="title">
+    这是子界面{{name}}
+  </div>
+  <HorizontalButtonList
+      :style="{top: 230}"
+      :buttonConfig="getButtonListConfig()"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+  />
+  <div class="tip">
+    按返回键返回前一页
+  </div>
+</div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
+
+.tip {
+  top: 330;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 30;
+}
+</style>

package/samples/HashHistory/views/SubPageFirst.vue

@@ -0,0 +1,10 @@
+<script lang="ts">
+import SubPage from "./SubPage.vue";
+
+export default class SubPageFirst extends SubPage {
+  constructor(props: any) {
+    super(props, 'First', 'Second');
+  }
+}
+
+</script>

package/samples/HashHistory/views/SubPageSecond.vue

@@ -0,0 +1,10 @@
+<script lang="ts">
+import SubPage from "./SubPage.vue";
+
+export default class SubPageSecond extends SubPage {
+  constructor(props: any) {
+    super(props, 'Second', 'First');
+  }
+}
+
+</script>

package/samples/LongImage/App.vue

@@ -0,0 +1,96 @@
+<!--
+ *
+ * 【界面概述】
+ * 带下拉条的长图片展示样例
+ *
+ * 【控件介绍】
+ * SimpleWidget：见simpleMetrowidget
+ *
+ * 【技巧说明】
+ * Q: 如何让图片的高度自适应？
+ * A: 使用img元素，并且style中高度不设置即可
+ *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 如何知道图片加载完成？
+ * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
+ *
+ -->
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import LongImageScroll from "./LongImageScroll.vue";
+import Button from "./Button.vue";
+import LongImageSource from "./assets/1280x7200.jpg";
+
+interface KeyEvent {
+  keyCode: Number;
+}
+
+@Options({
+  components: {
+    LongImageScroll,
+    Button,
+  },
+})
+class App extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+  private LongImageSource: String = LongImageSource;
+
+  onKeyDown(ev: KeyEvent): Boolean {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    }
+    return true;
+  }
+}
+export default App;
+</script>
+
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      可加载长或宽超过2048px的图片
+    </div>
+    <div :style="{ left: 100, top: 100 }">
+      <LongImageScroll
+        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+        :imageSrc="LongImageSource"
+        :scrollBlockStyle="{
+          width: 10,
+          height: 30,
+          backgroundColor: '#555555',
+        }"
+        :scrollStyle="{
+          left: 1005,
+          width: 10,
+          height: 500,
+          backgroundColor: '#DDDDDD',
+        }"
+        :step="60"
+      />
+      <div :style="{ left: 400, top: 550 }">
+        <Button />
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>