目录
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"> infoZone1 </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