盧義美++廖建新

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

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

中圖分類號：TP311.5

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

DOI： 10.3969/j.issn.1003-6970.2016.01.013

O 引言

傳統(tǒ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ù)。對于互聯(lián)網(wǎng)電視，用戶不僅僅是“看”，而且在“用”，通過安裝各種應(yīng)用軟件，電視可以提供面向家庭日常生活的應(yīng)用服務(wù)，包括信息服務(wù)、娛樂、購物、繳費、理財、安防等日常生活的方方面面。

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

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

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

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

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

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

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

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

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

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

1.1.3 校驗?zāi)K

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

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

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

1.1.5 視圖模塊

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

1.1.6 渲染模塊

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

1.1.7 編排模塊

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

1.1.8 控制器模塊

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

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

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

1.2.1 開發(fā)語言的選擇

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

1.2.2 屏幕編排布局的計算

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

1.2.3 拖拽編排的原理

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

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

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

2 結(jié)束語

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