陳天偉，彭凌西

(1.四川城市職業(yè)學(xué)院 汽車與信息工程學(xué)院，四川 成都 610110；2.廣州大學(xué) 機械與電氣工程學(xué)院,廣東 廣州 510006)

互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，對用戶體驗要求越來越高，移動終端用戶交互頁面?zhèn)€性化需求越來越強烈。一般情況下，由于用戶數(shù)量巨大，交互場景眾多，在移動終端的個性設(shè)置、布局修改等方面涉及開發(fā)的工作量較大，開發(fā)成本較高，影響了應(yīng)用的擴展性和靈活性。本文闡述了一種基于HTML5(標準通過標記語言5.0)的移動終端動態(tài)布局功能設(shè)計思路，并通過在移動終端(Android)上開發(fā)設(shè)計，在某高校手機在線績效考評系統(tǒng)項目中測試驗證，具有較好的擴展性和靈活性，大大減少了工作量，提升了代碼復(fù)用率。

1 設(shè)計思路

主流移動終端的頁面布局一般是通過HTML5方式[1]展示。用戶交互信息通常直接以HTML5代碼方式保存在頁面文件中，頁面文件通過與程序語言結(jié)合成動態(tài)頁面編程語言，再通過數(shù)據(jù)庫連接，在數(shù)據(jù)庫與Web服務(wù)器之間完成數(shù)據(jù)連接，實現(xiàn)用戶數(shù)據(jù)的信息展示，如圖1所示。

在業(yè)務(wù)功能增加時，一般移動終端的用戶交互需求也會需要變更，這樣交互界面也會要求改變，由于頁面文件是由程序語言合成的動態(tài)頁面編程語言，故需要開發(fā)人員才可以完成，工作量相對比較大。本文提出了基于Android的移動終端布局的設(shè)計和實現(xiàn)。經(jīng)過應(yīng)用實踐，可實現(xiàn)非專業(yè)開發(fā)人員也能靈活進行布局設(shè)計和頁面操作的工作。

圖1 移動終端頁面布局結(jié)構(gòu)圖

標識適配文件[2]是標記的內(nèi)容和標記構(gòu)成的文本文件。標識適配可靈活處理頁面布局、相關(guān)屬性和功能數(shù)據(jù)等信息[3]。在實際工作中，采用標識適配方式進行頁面相關(guān)信息的存儲是一種可行的方式[4]。

布局文件由欄目和模板組成[5-6]。模板定義了樣式，包括頂部導(dǎo)航(top)、中間內(nèi)容(content)和下部信息(footer)。

具體步驟是：1)把在模板中的內(nèi)容保存在標識適配文件中；2)編輯器對界面進行操作和修改；3)輸出客戶端，通過瀏覽器解析。布局功能結(jié)構(gòu)圖如圖2所示。

圖2 移動終端布局功能結(jié)構(gòu)圖

圖中，編輯器對功能數(shù)據(jù)進行操作[6]。解析器主要實現(xiàn)兩個功能：1)對標識適配文件進行解析，通過標識適配文件中的標記，解析其中的用戶數(shù)據(jù)，組裝成所需的信息；2)根據(jù)布局的要求，將組裝成所需的信息生成頁面代碼，通過移動終端(Android)的方式與用戶進行交互。

2 關(guān)鍵流程

在設(shè)計布局解析器時，關(guān)鍵流程包括標記化和樹構(gòu)建[7]兩部分。在設(shè)計過程中，對流程進行改進，提升流程處理效率。當遇到多用戶大數(shù)據(jù)量時，引入了定時預(yù)先和排序優(yōu)先的機制，應(yīng)對可能會產(chǎn)生內(nèi)存溢出和性能低下的情況，保障系統(tǒng)的穩(wěn)定可靠運行。

2.1 標記化

標記化是詞法分析過程，將輸入內(nèi)容解析成多個標記。HTML5 標記包括起始標記、結(jié)束標記、屬性名稱和屬性值。標記生成器識別標記，傳遞給樹構(gòu)造器，然后接受下一個字符以識別下一個標記；如此反復(fù)，直到輸入的結(jié)束。

在算法中加入定時函數(shù)，對經(jīng)常操作和多次出現(xiàn)的標記塊進行跟蹤和記錄。算法使用狀態(tài)機來表示。每一個狀態(tài)接收來自輸入信息流的一個或多個字符，并根據(jù)這些字符更新下一個狀態(tài)。當前的標記化狀態(tài)和樹結(jié)構(gòu)狀態(tài)會影響進入下一狀態(tài)的決定。這意味著，即使接收的字符相同，對于下一個正確的狀態(tài)也會產(chǎn)生不同的結(jié)果，具體取決于當前的狀態(tài)，如圖3所示。

圖3 對示例輸入進行標記化

2.2 樹構(gòu)建

在樹構(gòu)建階段，以 Document為根節(jié)點的標識適配樹也會不斷進行修改，向其中添加各種元素。標記生成器發(fā)送的每個節(jié)點都會由樹構(gòu)建器進行處理。規(guī)范中定義了每個標記所對應(yīng)的標識適配元素，這些元素會在接收到相應(yīng)的標記時創(chuàng)建。這些元素不僅會添加到標識適配樹中，還會添加到開放元素的堆棧中。在樹構(gòu)建時采用排序優(yōu)先的方法，解決糾正嵌套錯誤和處理未關(guān)閉的標記。

當遇到多用戶大數(shù)據(jù)量時,可能會產(chǎn)生內(nèi)存溢出和性能低下的情況，這在處理過程中引入定時預(yù)先和排序優(yōu)先機制解決。

3 實現(xiàn)

3.1 標識適配文件

由標識適配元素和屬性節(jié)點構(gòu)成的樹結(jié)構(gòu)，它是 HTML5文檔的對象表示[8]，同時也是外部內(nèi)容與 HTML5 元素之間的接口。解析器的根節(jié)點是“Document”對象。標識適配與標記之間是一一對應(yīng)的關(guān)系，如圖4所示。

圖4 標識適配樹

通過標識定義內(nèi)容，設(shè)計一個節(jié)點如下：

其中，ID表示與底層數(shù)據(jù)對應(yīng)；TEXT表示內(nèi)容、圖文、專題、時間、長度和空間等信息。

3.2 解析器

解析器主要有通過標識適配開源框架，先解析文件，再獲取數(shù)據(jù)庫數(shù)據(jù)，組裝數(shù)據(jù)信息，按照標記實現(xiàn)頁面代碼的輸出功能。解析流程如圖5所示。

圖5 解析流程圖

標識適配的原理是把XML文檔作為一種樹結(jié)構(gòu)，稱為節(jié)點樹，通過節(jié)點樹訪問所有的元素。以XML文件為例，標識適配將終端布局的導(dǎo)航和欄目解析為節(jié)點樹[8-9]，如圖6所示。

圖6 節(jié)點樹

開發(fā)工具以J2EE[10]為例，通過JAXP(java API for XML processing)實現(xiàn)，其原理是根據(jù)獲得節(jié)點內(nèi)容構(gòu)建頁面布局[11]，組裝成TEXT返回，并輸出到客戶端，實現(xiàn)頁面布局[12]操作。

4 驗證

以某高校手機在線績效考評系統(tǒng)為例，測試移動終端用戶有500人。

測試環(huán)境[13]：雙核CPU 4G內(nèi)存服務(wù)器，5M獨立帶寬，Windows 7操作系統(tǒng)，My SQL 數(shù)據(jù)庫。

移動終端：Android2.2，My SQL 數(shù)據(jù)庫。

測試場景：模擬用戶進行并發(fā)訪問功能點模塊，完成流程，并記錄成功次數(shù)[14]和平均響應(yīng)時間[15]。選用手機在線績效考評系統(tǒng)的主要模塊，包括問卷設(shè)計、名單導(dǎo)入、答卷邀請、答卷跟蹤、自動閱卷、報告生成和結(jié)果導(dǎo)出等模塊。測試工具分別模擬30,60,100,150,200,300用戶進行訪問和操作，記錄下啟用解析器前后服務(wù)端響應(yīng)時間和成功次數(shù)，通過匯總樣本數(shù)據(jù)，得到平均響應(yīng)時間表，如表1所示。

表1 平均響應(yīng)時間統(tǒng)計表

通過模擬用戶進行訪問功能模塊，完成相關(guān)流程，統(tǒng)計平均響應(yīng)時間，啟用解析器后，平均響應(yīng)時間減小45%，成功率提升30%。

表2 工作量統(tǒng)計表

在項目結(jié)束時，對項目度量數(shù)據(jù)進行分析，按照(人·天)進行匯總，工作量統(tǒng)計如表2所示，并計算減少率。對比啟用解析器前后工作量的變化，通過分析發(fā)現(xiàn)，啟用解析器后，代碼工作量大幅減少，原來10萬行左右的代碼，目前只有6萬行左右，相對原來，整體工作量平均減少了57%，提高了代碼復(fù)用率，如圖7所示。

圖7 開發(fā)階段工作量對比圖

在Android移動終端進行測試，通過布局解析器，在以某高校手機在線績效考評系統(tǒng)中，針對不同角色，院領(lǐng)導(dǎo)、中干、專任教師三種角色用戶，進入移動終端Android系統(tǒng)中考評打分，個性化自適應(yīng)布局[16]，提高了代碼復(fù)用率。

5 結(jié)束語

經(jīng)過實踐測試，通過布局解析器可較好地實現(xiàn)移動終端布局，為移動終端的動態(tài)設(shè)置提供了一種解決方法，平均減少了57%的工作量，提高了代碼復(fù)用率。下一步將加強對系統(tǒng)的集成、頁面兼容等問題的細化，以及易用性方面的改進。