TV HTML5 应用开发框架 mtv

1. 介绍

a) 框架简介

  • moretv html framework(以下简称mtv)是一款旨在服务开发者快速开发智能电视应用,提供光标移动响应解决方案的html web框架。开发者只需按照开发文档流程,即可快速开发出属于自己的智能电视应用。
  • mtv 主要针对接收到的遥控器及键盘按键事件,提供光标移动方案;同时还支持鼠标悬浮及单击事件,开发者可自由开启或关闭鼠标支持。

b) 框架思想

  • mtv 只有一个html页面,不做多页面跳转,所有Page以div形式存在于html文件内。这样可以有效避免页面切换过程中的黑屏现象。
  • mtv Page概述:一个指定id的div即为一个Page,例如:
   <div id="info" class="page">
        <div class="contentBox">
            <fieldset>
                <legend class="legText">&nbsp;infoZone1&nbsp;</legend>
                <div class="itemBox" id="infoZone1">
                    <div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div>
                    <div class="item defItem" id="info_infoZone1_item_1"><span class="text">2</span></div>
                    <div class="item defItem" id="info_infoZone1_item_2"><span class="text">3</span></div>
                    <div class="item defItem" id="info_infoZone1_item_3"><span class="text">4</span></div>
                    <div class="item defItem" id="info_infoZone1_item_4"><span class="text">5</span></div>
                    <div class="item defItem" id="info_infoZone1_item_5"><span class="text">6</span></div>
                </div>
            </fieldset>
        </div>
    </div>

其中id=“info”的div即为一个Page.(id必须全文唯一)

  • mtv Zone概述:一个Page下指定id的div即为一个Zone,例如:
   <div class="itemBox" id="infoZone1">
        <div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div>
        <div class="item defItem" id="info_infoZone1_item_1"><span class="text">2</span></div>
        <div class="item defItem" id="info_infoZone1_item_2"><span class="text">3</span></div>
        <div class="item defItem" id="info_infoZone1_item_3"><span class="text">4</span></div>
        <div class="item defItem" id="info_infoZone1_item_4"><span class="text">5</span></div>
        <div class="item defItem" id="info_infoZone1_item_5"><span class="text">6</span></div>
    </div>

其中id=“infoZone1”的div即为一个info Page的一个Zone.(id必须全文唯一)

  • mtv Item概述:一个Zone下指定id的div即为一个Item,例如:
   <div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div>

其中id=“info_infoZone1_item_0”的div即为一个infoZone1 Zone的一个Item。(id必须全文唯一)

  • mtv Page Zone Item 对应关系:

一个Page允许有多个不重复Zone,一个Zone允许有多个不重复Item。

  • Item id规则:

Item id以英文字母开头,数字结束,_分隔,规则为:pageId_zoneId_itemName_index(eg: info_infoZone1_item_5),itemName为创建Item时的itemName属性,index从0开始依次累加。

c) 使用注意

  • 创建Page、Zone、及Item前需先有dom结构存在,否则不起作用,动态添加或删除Item的dom后需重新创建Item,重新为每一个Item绑定value。及时没有也许插入空数组,需保证value值的length与dom的Item个数相等。所有id不可重复出现。

2. 开始

a) 相关JS引入

    <script type="text/javascript" src="js/vendor/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/mtvcore.js"></script>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script type="text/javascript" src="js/initial.js"></script>
    <script type="text/javascript" src="js/key.js"></script>
    <script type="text/javascript" src="js/keyevent.js"></script>
    <script type="text/javascript" src="js/uianimate.js"></script>
    <script type="text/javascript" src="js/animate.js"></script>

b) 创建一个Page

    <script type="text/javascript" language="JavaScript">
        var pageParams = {
            id : 'homePage'
        };
        frw.createPage(pageParams);
    </script>

c) 为Page创建Zone区域

   <script type="text/javascript" language="JavaScript">
        var zoneParams = {
            id : 'homeZone1',// zone id
            row : 2,// zone的行数
            column : 3,// zone的列数,应设置最大列数
            values : [],// zone的每一个Item的value
            right : 'homeZone2',// zone移动到最右端后切换至哪个zone,值为要切换到的 zone id,若无,可不设置该属性
            down : 'homeZone3',// zone移动到最下端后切换至哪个zone,值为要切换到的 zone id,若无,可不设置该属性
            left : '',// zone移动到最左端后切换至哪个zone,值为要切换到的 zone id,若无,可不设置该属性
            up : ''// zone移动到最上方后切换至哪个zone,值为要切换到的 zone id,若无,可不设置该属性
        };
    </script>
  • 为Zone绑定values
   <script type="text/javascript" language="JavaScript">
        for(var i=0;i<6;i++){
            zoneParams.values.push({Action:'Function',Function:homeZone2Fun,Value:i});
        }
    </script>
  • 目前value只能是Object对象,支持两种对象:
    1.{Action:'Function',Function:yourFunction,Value:ObjectValue}回车或按ok键执行开发者自定义function
    2.{Action:'Page',Page:pageId}回车或按ok键跳转到指定的pageId Page
  • 为info Page创建Zone
    <script type="text/javascript" language="JavaScript">
        frw.createZone('info',zoneParams);
    </script>

d) 为Zone创建Item

   <script type="text/javascript" language="JavaScript">
        var itemParam = {
            idPrefix : 'info_infoZone1_item_',// Item id前缀
            itemName : 'item',// Item 公共className,永远不会被替换
            defaultClassName:  'defItem',// Item 默认非聚焦时的className
            hoverClassName:  'focItem',// Item 聚焦时的className
            mouseSupport : true // Item 支持鼠标悬浮及单击,不填或false为不支持鼠标
        };
        frw.createItems('info','infoZone1',itemParam); // 为Zone批量创建Item(第一个参数为pageId,第二个参数为zoneId),需确保该zone属于该page;
    </script>

3. 全局属性方法调用

a) frw 对象

  • Web Console日志输出控制 控制台日志输出开关。
    frw.console = false;//控制台不输出日志,默认输出,输出格式为:[2013-11-18 11:44:53:610]  Key Arrow: down;
    frw.consoleLog('Key Arrow: down');//方法调用,输出日志
  • 创建Page
    frw.createPage(pageParams);
  • 创建Zone
    frw.createZone(pageId,zoneParams);
  • 创建Item
    frw.createItems(pageId,zoneId,itemParam);
  • 查询Page
    frw.findPageById(pageId);//返回Page对象
  • 删除Page
    frw.deletePageById(pageId);//返回被删除的Page对象

b) 索引元素

   mtv.frw.Page[pageId]//返回Page对象
   mtv.frw.Page[pageId].Zone[zoneId]//返回Zone对象
   mtv.frw.Page[pageId].Zone[zoneId].items//返回Zone的items Item对象集合
   mtv.frw.Page[pageId].Zone[zoneId].items[itemIndex]//返回Zone的Item对象
   mtv.frw.Page[pageId].Zone[zoneId].values[itemIndex]//返回Zone的value

4. Zone滚动

a) 创建滚动对象

  • 创建Zone时创建滚动对象及方法实现
   zoneParams = {
        id : 'scrollZone',
        row : 1,
        values : [],
        column : 12,
        up : 'homeZone4',
        down : 'scrollZone2',
        scrollObj : new mtv.frw.scrollControl({speed:500,scrollModel:1}),// 滚动对象创建
        scrollFunc : testScrollZone//滚动方法调用
    };
  • 滚动对象scrollObj包含两个属性:滚动速度speed,单位ms;滚动方式scrollModel,目前支持三种方式:
    mtv.frw.scrollControl.prototype.scrollModel = {
        oneByOne : 1,//一个一个滚动
        screenByScreen : 2,//一屏一屏滚动
        rowByRow : 3//一行一行滚动
    };
  • 滚动方法调用
   function testScrollZone(){
        if(CurrentZone.scrollObj){
            Loading = true;
            CurrentZone.scrollObj.horizontalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;});
        }
    }

b) 框架滚动方法

  • 垂直滚动方法:verticalScrollRow(item,finishedAction) 调用
   CurrentZone.scrollObj.verticalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;});
  • 水平滚动方法:horizontalScrollRow(item,finishedAction) 调用
   CurrentZone.scrollObj.horizontalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;});

5. Item切换策略

自定义实现方法在keyevent.js内完成

  • 收到按键后Item还未改变时调用方法:OnArrowItem(Arrow),参数Arrow代表按键方向:left、right、up、down
    function OnArrowItem(Arrow){
 
    }
  • Item在自身Zone内切换,且未越界调用方法:OnChangeItem(Arrow),参数Arrow代表按键方向:left、right、up、down
    function OnChangeItem(Arrow){
 
    }
  • Item在自身Zone内越界调用方法:OnScrollItem(Arrow),参数Arrow代表按键方向:left、right、up、down
    function OnScrollItem(Arrow){
 
    }
  • 切换到另一个Zone时调用方法:OnChangeZone(Arrow),参数Arrow代表按键方向:left、right、up、down
    function OnChangeZone(Arrow){
 
    }
  • 响应回车或OK键调用方法:OnEvtEnter()
    function OnEvtEnter(){
        var value = mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].values[CurrentZone.item];
        if(value){
            switch(value.Action){
                case 'Page':
                    var page = value.Page;
                    switch(page){
                        case 'info':
                            keyController.showPage('info','down',true,500);
                            CurrentZone = mtv.frw.Page['info'].Zone['infoZone1'];
                            mtv.frw.Page['info'].currentZoneId = CurrentZone.id;
                            keyController.defaultChangeItem(PrevPage,PrevZone,CurrentPage,CurrentZone);
                            break;
                    };
                    break;
                case 'Function':
                    value.Function(value.Value);
                    break;
                default:
                    break;
            }
        }
    }
  • 响应Esc或返回按键时调用方法:OnEvtAlt()
    function OnEvtAlt(){
        keyController.hidePage('down',true,500);
    }

6. Page显示隐藏

a) Page显示

    showPage(pageId, direction, animate, speed, fun);
 
    keyController.showPage('info','down',true,500);

pageId:要显示的pageId;direction:从哪个方向显示出来(up,down,left,right);animate:是否以动画的形式显示;speed:动画显示的速度,单位ms,fun:显示完页面后执行的回调方法.

b) Page隐藏

    hidePage(direction, animate, speed, fun);
 
    keyController.hidePage('down',true,500);

隐藏当前页面:CurrentPage。direction:从哪个方向开始隐藏页面(up,down,left,right);animate:是否以动画的形式显示;speed:动画显示的速度,单位ms,fun:隐藏完页面后执行的回调方法.

c) ReturnPage

    keyController.returnPage