基于web的互聯(lián)網(wǎng)電視機(jī)頂盒屏幕編排系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

盧義美++廖建新

摘要：近年來(lái)，互聯(lián)網(wǎng)電視得到了蓬勃發(fā)展。為了方便互聯(lián)網(wǎng)電視的運(yùn)營(yíng)以及提供豐富多樣的內(nèi)容，需要對(duì)互聯(lián)網(wǎng)電視機(jī)頂盒屏幕進(jìn)行編排。目前市面上并沒(méi)有成熟的互聯(lián)網(wǎng)電視機(jī)頂盒屏幕編排系統(tǒng)。本文介紹了一款基于web的互聯(lián)網(wǎng)電視機(jī)頂盒屏幕編排系統(tǒng)，對(duì)系統(tǒng)的架構(gòu)設(shè)計(jì)及實(shí)現(xiàn)進(jìn)行了詳細(xì)描述，最終高效地解決了互聯(lián)網(wǎng)電視機(jī)頂盒屏幕的編排問(wèn)題。同時(shí)，本系統(tǒng)所使用的設(shè)計(jì)方法對(duì)其它類似的編排系統(tǒng)也具有參考意義。

關(guān)鍵詞：軟件工程；屏幕編排；互聯(lián)網(wǎng)電視；機(jī)頂盒

中圖分類號(hào)：TP311.5

文獻(xiàn)標(biāo)識(shí)碼：B

DOI： 10.3969/j.issn.1003-6970.2016.01.013

O 引言

傳統(tǒng)電視在家庭中擁有核心地位，不僅僅是客廳中顯示和娛樂(lè)的中心，而且是家庭用戶使用時(shí)間最多的終端。隨著寬帶移動(dòng)網(wǎng)絡(luò)不斷普及和智能機(jī)頂盒的快速發(fā)展，面向電視終端的互聯(lián)網(wǎng)電視（NTV，Network Television）業(yè)務(wù)取得了蓬勃發(fā)展，互聯(lián)網(wǎng)電視已經(jīng)成為互聯(lián)網(wǎng)的新入口。

互聯(lián)網(wǎng)電視是一種利用寬帶有線電視網(wǎng)，集互聯(lián)網(wǎng)、多媒體、通訊等多種技術(shù)于一體，向家庭互聯(lián)網(wǎng)電視用戶提供包括數(shù)字電視在內(nèi)的多種交互式服務(wù)的嶄新技術(shù)。對(duì)于互聯(lián)網(wǎng)電視，用戶不僅僅是“看”，而且在“用”，通過(guò)安裝各種應(yīng)用軟件，電視可以提供面向家庭日常生活的應(yīng)用服務(wù)，包括信息服務(wù)、娛樂(lè)、購(gòu)物、繳費(fèi)、理財(cái)、安防等日常生活的方方面面。

互聯(lián)網(wǎng)電視目前一般有兩種模式，一種是“智能機(jī)頂盒+電視機(jī)”，即智能機(jī)頂盒（STB，Set Top Box）和電視機(jī)是兩個(gè)獨(dú)立設(shè)備，機(jī)頂盒通過(guò)VGA或HDMI接口連接到電視機(jī)，電視機(jī)只作為顯示終端；另外一種是“互聯(lián)網(wǎng)電視一體機(jī)”，即電視機(jī)被集成了智能機(jī)頂盒，這兩種模式雖然形式上不同，但是本質(zhì)上沒(méi)有區(qū)別。

互聯(lián)網(wǎng)電視機(jī)頂盒展現(xiàn)給用戶的屏幕多為卡片布局的圖形用戶界面（GUI，Graphical User Interface），卡片布局的內(nèi)容可以是多種屏幕展現(xiàn)元素，包括視頻、游戲、應(yīng)用等。定制互聯(lián)網(wǎng)電視機(jī)頂盒屏幕需要對(duì)屏幕布局、屏幕內(nèi)容等進(jìn)行編排。屏幕編排系統(tǒng)可以采用基于web或者基于桌面應(yīng)用的形式?？紤]到基于web形式的系統(tǒng)在跨平臺(tái)及可維護(hù)性等方面上的優(yōu)勢(shì)，本文介紹的互聯(lián)網(wǎng)電視機(jī)頂盒屏幕編排系統(tǒng)采用了基于web的形式。

l 屏幕編排系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

1.1 系統(tǒng)架構(gòu)

本文介紹的互聯(lián)網(wǎng)電視機(jī)預(yù)盒屏幕編排系統(tǒng)包括數(shù)據(jù)庫(kù)模塊、數(shù)據(jù)解析模塊、數(shù)據(jù)對(duì)象模塊、視圖模塊及控制器模塊等5大模塊。數(shù)據(jù)解析模塊中包含校驗(yàn)子模塊，視圖模塊中包含渲染子模塊及編排子模塊。數(shù)據(jù)對(duì)象模塊、視圖模塊和控制器模塊共同構(gòu)成了MVC模式的三大組成部分。

機(jī)頂盒屏幕由多種屏幕對(duì)象組合而成，包括主屏、Logo、快捷入口、分屏、屏幕元素、導(dǎo)航等。在web頁(yè)面中，這些屏幕對(duì)象可以抽象為JavaScript的對(duì)象，這些JavaScript對(duì)象的屬性及接口定義等結(jié)合在一起構(gòu)成了數(shù)據(jù)對(duì)象模塊。數(shù)據(jù)對(duì)象模塊中存儲(chǔ)的JavaScript對(duì)象所代表的屏幕需要由視圖模塊在web頁(yè)面上渲染出來(lái)，同時(shí)還需要支持用戶對(duì)屏幕對(duì)象進(jìn)行操作，包括修改屏幕對(duì)象的位置、修改屏幕布局等，這些工作分別由渲染模塊和編排模塊完成。控制器模塊溝通了視圖模塊和數(shù)據(jù)對(duì)象模塊，將視圖模塊中的用戶操作傳遞到數(shù)據(jù)對(duì)象模塊，保證數(shù)據(jù)對(duì)象模塊中數(shù)據(jù)的狀態(tài)與視圖模塊中屏幕對(duì)象的展現(xiàn)效果保持同步。數(shù)據(jù)對(duì)象模塊中存儲(chǔ)的屏幕對(duì)象數(shù)據(jù)在web頁(yè)面斷開(kāi)連接后將丟失，而數(shù)據(jù)庫(kù)模塊則負(fù)責(zé)對(duì)這些數(shù)據(jù)進(jìn)行永久存儲(chǔ)。數(shù)據(jù)對(duì)象模塊中存儲(chǔ)的數(shù)據(jù)為JavaScript的對(duì)象，而數(shù)據(jù)庫(kù)中存儲(chǔ)的數(shù)據(jù)則是JSON格式的字符串等，在這兩種不同格式的數(shù)據(jù)進(jìn)行相互轉(zhuǎn)換則由數(shù)據(jù)解析模塊完成。數(shù)據(jù)解析模塊在解析數(shù)據(jù)的過(guò)程中，需要保證所解析數(shù)據(jù)的完整性和正確性，這就是校驗(yàn)?zāi)K所要完成的工作。互聯(lián)網(wǎng)電視機(jī)頂盒屏幕編排系統(tǒng)的總體架構(gòu)圖如圖1所示。

1.1.1 數(shù)據(jù)庫(kù)

在實(shí)際系統(tǒng)的運(yùn)營(yíng)中，屏幕編排系統(tǒng)編排屏幕的過(guò)程不是一蹴而就的，可能會(huì)經(jīng)歷多次編排。同時(shí)，實(shí)際系統(tǒng)還應(yīng)該支持對(duì)屏幕進(jìn)行管理及復(fù)用屏幕數(shù)據(jù)。這就需要有一個(gè)與屏幕編排系統(tǒng)相對(duì)應(yīng)的屏幕編排后臺(tái)管理系統(tǒng)，用于對(duì)屏幕進(jìn)行管理及存儲(chǔ)屏幕數(shù)據(jù)。由于本文僅討論屏幕編排系統(tǒng)，故此將屏幕編排后臺(tái)管理系統(tǒng)與數(shù)據(jù)庫(kù)抽象為了數(shù)據(jù)庫(kù)。

1.1.2 數(shù)據(jù)解析模塊

數(shù)據(jù)解析模塊用于對(duì)接數(shù)據(jù)庫(kù)及數(shù)據(jù)對(duì)象模塊。在本系統(tǒng)的設(shè)計(jì)中，數(shù)據(jù)庫(kù)中存儲(chǔ)的數(shù)據(jù)為代表屏幕信息的JSON格式數(shù)據(jù)，而數(shù)據(jù)對(duì)象模塊中存儲(chǔ)的則是JavaScript對(duì)象數(shù)據(jù)。屏幕編排完成后，需要經(jīng)過(guò)數(shù)據(jù)解析模塊將數(shù)據(jù)對(duì)象模塊中的JavaScript對(duì)象數(shù)據(jù)解析為JSON格式數(shù)據(jù)，然后存入數(shù)據(jù)庫(kù)。而在多次編排屏幕的場(chǎng)景下，數(shù)據(jù)庫(kù)中存儲(chǔ)的JSON格式數(shù)據(jù)經(jīng)過(guò)數(shù)據(jù)解析模塊，構(gòu)造數(shù)據(jù)對(duì)象模塊中的JavaScript對(duì)象，然后數(shù)據(jù)對(duì)象模塊通知視圖模塊渲染屏幕。

1.1.3 校驗(yàn)?zāi)K

校驗(yàn)?zāi)K是數(shù)據(jù)解析模塊的子模塊。為了保證數(shù)據(jù)解析模塊的正常工作，需要確保數(shù)據(jù)庫(kù)及數(shù)據(jù)對(duì)象模塊中數(shù)據(jù)的正確性和完整性，這就是校驗(yàn)?zāi)K需要完成的工作。在由數(shù)據(jù)庫(kù)中存儲(chǔ)的JSON格式數(shù)據(jù)構(gòu)建數(shù)據(jù)對(duì)象模塊中JavaScript對(duì)象數(shù)據(jù)的過(guò)程中，校驗(yàn)?zāi)K對(duì)數(shù)據(jù)庫(kù)中存儲(chǔ)的JSON格式數(shù)據(jù)進(jìn)行校驗(yàn)。在由數(shù)據(jù)對(duì)象模塊中的JavaScript對(duì)象數(shù)據(jù)解析為適合數(shù)據(jù)庫(kù)存儲(chǔ)的JSON格式數(shù)據(jù)的過(guò)程中，校驗(yàn)?zāi)K對(duì)數(shù)據(jù)對(duì)象模塊中的JavaScript對(duì)象數(shù)據(jù)進(jìn)行校驗(yàn)。校驗(yàn)分為合法性校驗(yàn)和完整性校驗(yàn)這兩種校驗(yàn)形式，合法性校驗(yàn)對(duì)應(yīng)于數(shù)據(jù)的正確性，完整性校驗(yàn)對(duì)應(yīng)于數(shù)據(jù)的完整性。合法性校驗(yàn)必須全部校驗(yàn)通過(guò)才能繼續(xù)進(jìn)行數(shù)據(jù)解析。完整性校驗(yàn)不通過(guò)則會(huì)產(chǎn)生警告，告警用戶當(dāng)前屏幕數(shù)據(jù)是不完整的，需要繼續(xù)編排完成，但不影響數(shù)據(jù)解析。合法性校驗(yàn)優(yōu)先于完整性校驗(yàn)，合法性校驗(yàn)不通過(guò)則無(wú)需對(duì)數(shù)據(jù)進(jìn)行完整性校驗(yàn)，而會(huì)中斷數(shù)據(jù)解析過(guò)程。

1.1.4 數(shù)據(jù)對(duì)象模塊

機(jī)預(yù)盒屏幕可以抽象為多種屏幕對(duì)象的組合，包括主屏、Logo、快捷入口、分屏、屏幕元素、導(dǎo)航等多種屏幕對(duì)象。屏幕對(duì)象之間存在著包含關(guān)系，如主屏對(duì)象包含Logo對(duì)象、快捷入口對(duì)象、多個(gè)分屏對(duì)象以及導(dǎo)航對(duì)象，而分屏對(duì)象又包含多個(gè)屏幕元素對(duì)象等。數(shù)據(jù)對(duì)象模塊中定義了不同屏幕對(duì)象的內(nèi)容和接口，負(fù)責(zé)構(gòu)建屏幕對(duì)象存儲(chǔ)當(dāng)前屏幕數(shù)據(jù)，同時(shí)提供與其它模塊的通信接口。通過(guò)數(shù)據(jù)對(duì)象模塊提供的接口方法，控制器模塊可以改變屏幕對(duì)象的狀態(tài)，視圖模塊可以查詢屏幕對(duì)象的狀態(tài)，數(shù)據(jù)解析模塊可以傳入解析后的屏幕數(shù)據(jù)并構(gòu)建屏幕對(duì)象。通過(guò)數(shù)據(jù)對(duì)象模塊中定義的事件機(jī)制，當(dāng)屏幕對(duì)象狀態(tài)變化的時(shí)候，數(shù)據(jù)對(duì)象模塊會(huì)通知視圖模塊調(diào)用渲染模塊更新視圖。

1.1.5 視圖模塊

視圖模塊是本系統(tǒng)的表示部分，用于展現(xiàn)數(shù)據(jù)對(duì)象模塊中屏幕對(duì)象數(shù)據(jù)的內(nèi)容。視圖模塊提供預(yù)覽模式和編排模式兩種不同的模式。預(yù)覽模式下，視圖模塊提供屏幕效果的預(yù)覽。編排模式下，視圖模塊向用戶提供一個(gè)友好的編排界面，用戶可以通過(guò)所見(jiàn)即所得（WYSIWYG，what you see is what you get）的方式方便地編排機(jī)頂盒屏幕。視圖模塊的編排界面包括工具區(qū)和編輯區(qū)，工具區(qū)中包含了多種屏幕對(duì)象圖標(biāo)和輔助按鈕，編輯區(qū)中實(shí)時(shí)地展示了當(dāng)前所編排屏幕的效果。用戶可以通過(guò)拖拽的方式操作屏幕對(duì)象圖標(biāo)，將不同的屏幕對(duì)象添加到編輯區(qū)中。不同的輔助按鈕提供了不同的功能，用戶可以通過(guò)點(diǎn)擊按鈕來(lái)設(shè)置不同的屏幕屬性。視圖模塊接收用戶的編排操作和屬性設(shè)置操作，對(duì)這些操作進(jìn)行數(shù)據(jù)驗(yàn)證，發(fā)送操作請(qǐng)求到控制器模塊。視圖模塊可以向數(shù)據(jù)對(duì)象模塊查詢屏幕對(duì)象狀態(tài)，獲取屏幕對(duì)象狀態(tài)信息。通過(guò)視圖模塊提供的方法，控制器模塊可以選擇不同的視圖。視圖模塊監(jiān)聽(tīng)數(shù)據(jù)對(duì)象模塊的屏幕對(duì)象數(shù)據(jù)改變事件，調(diào)用渲染模塊更新視圖。

1.1.6 渲染模塊

渲染模塊是視圖模塊的子模塊。數(shù)據(jù)庫(kù)以及數(shù)據(jù)對(duì)象模塊中存儲(chǔ)的屏幕對(duì)象信息都是一些冰冷的數(shù)據(jù)，這些數(shù)據(jù)對(duì)于用戶來(lái)說(shuō)是不直觀的。渲染模塊根據(jù)屏幕對(duì)象信息渲染視圖，讓用戶能直觀地了解數(shù)據(jù)所代表的意義。根據(jù)不同的適用場(chǎng)景，渲染模塊可以渲染整個(gè)視圖或者部分視圖。渲染模塊有三個(gè)適用場(chǎng)景。系統(tǒng)初次加載時(shí)，此時(shí)還不存在視圖，渲染模塊根據(jù)數(shù)據(jù)對(duì)象模塊傳遞過(guò)來(lái)的屏幕對(duì)象信息渲染生成整個(gè)視圖。當(dāng)屏幕對(duì)象狀態(tài)變化時(shí)，數(shù)據(jù)對(duì)象模塊通知視圖模塊屏幕對(duì)象狀態(tài)變化信息，渲染模根據(jù)這些信息更新相應(yīng)部分視圖，保持視圖和屏幕對(duì)象狀態(tài)的同步。在編排屏幕的過(guò)程中，編排操作首先影響的是視圖，渲染模塊根據(jù)編排操作更新相應(yīng)部分視圖，然后發(fā)送操作請(qǐng)求到控制器模塊，控制器模塊通知數(shù)據(jù)對(duì)象模塊屏幕對(duì)象狀態(tài)變化信息，數(shù)據(jù)對(duì)象模塊存儲(chǔ)屏幕對(duì)象狀態(tài)變化，保持視圖和屏幕對(duì)象狀態(tài)的同步。

1.1.7 編排模塊

編排模塊是視圖模塊的子模塊。編排模塊提供了鼠標(biāo)拖拽的操作形式，用戶僅僅使用鼠標(biāo)就能完成全部編排操作。通過(guò)編排模塊，用戶可以完成添加屏幕對(duì)象、刪除屏幕對(duì)象、修改屏幕對(duì)象大小、修改屏幕對(duì)象位置等操作。編排模塊的實(shí)現(xiàn)符合所見(jiàn)即所得的原則，用戶在進(jìn)行編排操作的時(shí)候，可以即時(shí)地看到當(dāng)前編排的效果，保證最終編排所得效果與所需效果一致。

1.1.8 控制器模塊

控制器模塊負(fù)責(zé)處理用戶與web之間的交互?？刂破髂K接收從視圖模塊傳遞過(guò)來(lái)的用戶操作，將操作轉(zhuǎn)發(fā)給數(shù)據(jù)對(duì)象模塊，從而完成修改數(shù)據(jù)對(duì)象狀態(tài)等操作。用戶通過(guò)編排模塊編排屏幕，視圖模塊完成屏幕渲染并將編排操作傳遞給控制器模塊，控制器模塊通知數(shù)據(jù)對(duì)象模塊存儲(chǔ)相應(yīng)的數(shù)據(jù)對(duì)象狀態(tài)變化。用戶通過(guò)屬性設(shè)置操作設(shè)置屏幕屬性，視圖模塊將屬性設(shè)置操作傳遞給控制器模塊，控制器模塊通知數(shù)據(jù)對(duì)象模塊存儲(chǔ)相應(yīng)的數(shù)據(jù)對(duì)象狀態(tài)變化，然后數(shù)據(jù)對(duì)象模塊通知視圖模塊根據(jù)數(shù)據(jù)對(duì)象狀態(tài)變化渲染屏幕。用戶通過(guò)視圖模塊可以選擇當(dāng)前視圖模式為編排模式或者預(yù)覽模式，視圖模塊將模式選擇操作傳遞給控制器模塊，控制器模塊調(diào)用視圖模塊提供的接口方法完成相應(yīng)視圖的渲染?？刂破髂K還支持心跳機(jī)制，控制器模塊定期向服務(wù)器發(fā)送心跳請(qǐng)求，保證web與服務(wù)器之間的連接不會(huì)因?yàn)槌瑫r(shí)而斷開(kāi)。

1.2 系統(tǒng)實(shí)現(xiàn)

由于本系統(tǒng)比較復(fù)雜，所以本文只對(duì)開(kāi)發(fā)語(yǔ)言的選擇、屏幕編排布局的計(jì)算、拖拽編排的原理以及校驗(yàn)?zāi)K的實(shí)現(xiàn)等進(jìn)行介紹，其余部分則不贅余。

1.2.1 開(kāi)發(fā)語(yǔ)言的選擇

在本系統(tǒng)的開(kāi)發(fā)語(yǔ)言選擇上，考慮到JavaScript對(duì)面向?qū)ο筇卣鞯闹С植⒉粔蛴押?，?jīng)過(guò)對(duì)比Script#以及Typescript這兩種JavaScript的超集語(yǔ)言，最終本系統(tǒng)選擇了Typescript作為開(kāi)發(fā)語(yǔ)言。Typescript是為大型應(yīng)用開(kāi)發(fā)而設(shè)計(jì)的語(yǔ)言，它是JavaScript的一個(gè)超集，Typescript向JavaScript添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊烫卣?，Typescript最終會(huì)編譯成為JavaScript。Script#同樣是JavaScript的一個(gè)超集，它使用C#的語(yǔ)法來(lái)開(kāi)發(fā)JavaScript，Script#最終也會(huì)編譯成為JavaScript。相比Script#. Typescript有更完善的文檔等優(yōu)勢(shì)。除了Typescript語(yǔ)言外，本系統(tǒng)還使用了HTML及CSS語(yǔ)言。

1.2.2 屏幕編排布局的計(jì)算

屏幕編排布局的計(jì)算是渲染模塊中一個(gè)非常重要的功能。屏幕編排布局計(jì)算的準(zhǔn)確與否直接影響了渲染模塊的正常工作與否。在web頁(yè)面中，假設(shè)屏幕的寬為W，高為H，屏幕由M行N列格子組成，格子之間的橫向間隔為Wi，格子的縱向間隔為Hi。則從第m行第n列格子開(kāi)始，橫向跨越w個(gè)格子，縱向跨越h個(gè)格子的屏幕對(duì)象的位置屬性計(jì)算如下：

1.2.3 拖拽編排的原理

瀏覽器JavaScript引擎的事件機(jī)制為實(shí)現(xiàn)鼠標(biāo)拖拽編排的操作方式提供了可能。鼠標(biāo)按下的時(shí)候會(huì)觸發(fā)瀏覽器mousedown事件，鼠標(biāo)移動(dòng)的時(shí)候會(huì)觸發(fā)瀏覽器mousemove事件，鼠標(biāo)松開(kāi)的時(shí)候會(huì)觸發(fā)瀏覽器mouseup事件。通過(guò)給瀏覽器的mousedown、mousemove和mouseup事件分別綁定事件處理函數(shù)，在這些事件觸發(fā)的時(shí)候，執(zhí)行事件處理函數(shù)，根據(jù)事件攜帶的鼠標(biāo)位置參數(shù)相應(yīng)地改變被拖拽屏幕對(duì)象的位置，從而達(dá)到拖拽編排的視覺(jué)效果。拖拽編排的流程圖如圖2所示。

1.2.4 校驗(yàn)?zāi)K的實(shí)現(xiàn)

校驗(yàn)?zāi)K是數(shù)據(jù)解析模塊的一個(gè)子模塊。校驗(yàn)?zāi)K同時(shí)適用于數(shù)據(jù)對(duì)象模塊端到數(shù)據(jù)庫(kù)端數(shù)據(jù)解析和數(shù)據(jù)庫(kù)端到數(shù)據(jù)對(duì)象模塊端數(shù)據(jù)解析。本課題提出了兩種校驗(yàn)類型，第一種是合法性校驗(yàn)，這類校驗(yàn)判斷的是會(huì)引起程序錯(cuò)誤的內(nèi)容，對(duì)于這類校驗(yàn)，必須全部通過(guò)才能進(jìn)行數(shù)據(jù)解析。第二種是完整性校驗(yàn)，這類校驗(yàn)判斷的是會(huì)導(dǎo)致屏幕信息不完整的內(nèi)容，考慮到存在多次編排的場(chǎng)景，這類校驗(yàn)不管有沒(méi)有通過(guò)都可以繼續(xù)進(jìn)行數(shù)據(jù)解析，但是在完整性校驗(yàn)沒(méi)有通過(guò)的情況下會(huì)警告用戶。合法性校驗(yàn)優(yōu)先于完整性校驗(yàn)，合法性校驗(yàn)不通過(guò)則無(wú)需對(duì)數(shù)據(jù)進(jìn)行完整性校驗(yàn)，而會(huì)中斷數(shù)據(jù)解析過(guò)程。校驗(yàn)?zāi)K的流程圖如圖3所示。

2 結(jié)束語(yǔ)

近年來(lái)，智能家居等概念火熱興起，作為互聯(lián)網(wǎng)和傳統(tǒng)電視的結(jié)合產(chǎn)物，互聯(lián)網(wǎng)電視正逐漸地進(jìn)入千家萬(wàn)戶。本文介紹的基于web的互聯(lián)網(wǎng)電視機(jī)預(yù)盒屏幕編排系統(tǒng)解決了互聯(lián)網(wǎng)電視機(jī)頂盒屏幕的編排問(wèn)題，具有很強(qiáng)的應(yīng)用場(chǎng)景，也很好地適應(yīng)了時(shí)代潮流。