在嵌入式瀏覽器中基于HTML的滾動(dòng)顯示效果實(shí)現(xiàn)方法研究

收稿日期：2014－04－30

基金項(xiàng)目：阿壩師專(zhuān)校級(jí)規(guī)劃課題(ABS13-19)。

作者簡(jiǎn)介：趙勇軍(1978-)，男，四川南充人，碩士，助理研究員，主要研究方向：計(jì)算機(jī)應(yīng)用技術(shù)、智能信息處理。

摘要：一種滾動(dòng)內(nèi)容顯示效果在嵌入式頁(yè)面中的應(yīng)用非常廣泛。實(shí)現(xiàn)滾動(dòng)顯示的效果有多種方式，其中MARQUEE 標(biāo)簽方式是使用最方便，頁(yè)面編碼最快捷的一種。當(dāng)然，頁(yè)面制作者的快捷來(lái)源于瀏覽器對(duì)該標(biāo)簽的全面支持，同時(shí)也是區(qū)分嵌入式瀏覽器功能是否完善的重要屬性之一。本文提供了一種如何在嵌入式瀏覽器中簡(jiǎn)單實(shí)現(xiàn)滾動(dòng)效果的方法。

關(guān)鍵詞：嵌入式瀏覽器； MARQUEE； 滾動(dòng)顯示

中圖分類(lèi)號(hào)：TP308文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2095-2163（2014）03-0100-03

Study on Implementation of Scrolling Display based on HTML in Embedded Browser

ZHAO Yongjun， FU Hongxia

(Network Management Center， Aba Teachers College， Wenchuan Sichuan623002， China)

Abstract：Scrolling display is extensively used in embedded page. There is a variety of ways to achieve scrolling display， where， MARQUEE tag is the most convenient and most efficient page-coding way. Obviously， this efficiency of page creators is from full support of browser to the tag， which is also one of the important properties to evaluate whether the functions of embedded browser are completed. This essay provides a simple way of how to achieve scrolling display in embedded browser.

Key words：Embedded Browser; MARQUEE; Scrolling Display

0引言

在程序編寫(xiě)中，滾動(dòng)內(nèi)容顯示通常指用一個(gè)矩形區(qū)域顯示用戶(hù)特別關(guān)心的少量信息，這條信息串首尾相連，并且向一個(gè)方向循環(huán)滾動(dòng)。證券業(yè)中常用滾動(dòng)顯示來(lái)呈現(xiàn)不斷變化的股票行情，網(wǎng)頁(yè)中常用滾動(dòng)顯示提供瀏覽者一些重要信息等等。在滾動(dòng)顯示的多種實(shí)現(xiàn)方式中，HTML 語(yǔ)言的MARQUEE 標(biāo)簽以其編碼簡(jiǎn)單，使用方便和功能全面成為最受網(wǎng)頁(yè)制作者青睞的一種方式，因而也是目前倍受關(guān)注的研究課題。

MARQUEE 標(biāo)簽中，滾動(dòng)內(nèi)容并不只是局限于文本，圖片、表格，甚至一段HTML 代碼段都可以用來(lái)滾動(dòng)（瀏覽器會(huì)將其代碼段解析為用戶(hù)可以觀看的內(nèi)容）。而滾動(dòng)的速度、方向、循環(huán)方向、循環(huán)次數(shù)等等都可以自由設(shè)置［1］。在此，對(duì)其具體實(shí)現(xiàn)開(kāi)展分析研究。

1MARQUEE 標(biāo)簽的使用方法

1.1代碼示例

阿壩師范高等專(zhuān)科學(xué)校， 以上代碼可實(shí)現(xiàn)“阿壩師范高等專(zhuān)科學(xué)?！睅讉€(gè)字在以紅色為背景色的560x30 范圍的矩形區(qū)域內(nèi)自右向左以8檔速度循環(huán)滾動(dòng)。

1.2標(biāo)簽的屬性

(1)滾動(dòng)方向(direction) ，包括left/right/up/down。缺省值為left，即自右向左滾動(dòng)。

(2)滾動(dòng)速度(scrollamount)，實(shí)際上是設(shè)定滾動(dòng)字幕滾動(dòng)一次的距離，其單位長(zhǎng)度由瀏覽器決定。缺省值為6。值越大，速度越快。

(3)滾動(dòng)方式(bihavior)，包括scroll/slide/alternate，分別表示反復(fù)地由一端滾動(dòng)至另一端；只滾動(dòng)一次，由一端滾動(dòng)至另一端；在兩端反復(fù)來(lái)回滾動(dòng)。缺省值為scroll。

(4)滾動(dòng)循環(huán)次數(shù)(loop)，包括infinite/num。infinite 或loop= -1，都表示無(wú)限次滾動(dòng)；num 等于幾，就表示循環(huán)幾次。缺省值為infinite。

(5)動(dòng)作延時(shí)(scrolldelay)，設(shè)定兩次滾動(dòng)之間的延遲時(shí)間。缺省值為0，表示每次滾動(dòng)結(jié)束后立即開(kāi)始下一次滾動(dòng)。

(6)滾動(dòng)區(qū)域背景色(bgcolor) ，設(shè)定滾動(dòng)區(qū)域的背景顏色。缺省值為透明；滾動(dòng)區(qū)域高度(height) 設(shè)定滾動(dòng)區(qū)域的高度；滾動(dòng)區(qū)域?qū)挾?width) 設(shè)定滾動(dòng)區(qū)域的寬度；空白( hspace/ vspace) 設(shè)定滾動(dòng)內(nèi)容左右邊框和上下邊框的寬度［2］。

2MARQUEE 標(biāo)簽的實(shí)現(xiàn)方法

2.1整體思路

在圖形引擎中將MARQUEE 處理為窗口控件，在瀏覽器中將其作為一個(gè)頁(yè)面元素參與排版。將待滾動(dòng)的內(nèi)容形成一個(gè)內(nèi)置子頁(yè)面，保存在本地，并呈現(xiàn)在該窗口控件中。同時(shí)注冊(cè)回調(diào)函數(shù)，并通過(guò)定時(shí)器，定時(shí)向該窗口控件發(fā)送滾動(dòng)消息，實(shí)現(xiàn)自動(dòng)滾屏［3］。而MARQUEE 的各種屬性，則通過(guò)窗口控件和內(nèi)置子頁(yè)面的渲染得到相應(yīng)的體現(xiàn)。

生成內(nèi)置子頁(yè)面的實(shí)現(xiàn)方式，使得滾動(dòng)內(nèi)容不再受到限制，既可以是文字、表格、圖片，也可以是任何一段HTML 代碼所呈現(xiàn)出來(lái)的效果。當(dāng)滾動(dòng)內(nèi)容是待解析的HTML代碼段時(shí)，代碼段可以和內(nèi)置子頁(yè)面一起送入瀏覽器解析流程完成解析［4］。

2.2內(nèi)置子頁(yè)面生成方式根據(jù)滾動(dòng)方向不同進(jìn)行設(shè)定

內(nèi)置子頁(yè)面的生成方式可分為兩類(lèi)，首先將水平方向作為實(shí)例進(jìn)行設(shè)定：以MARQUEE窗口的高度為高度，以MARQUEE 窗口的寬度為寬度，形成左右兩個(gè)空白邊距區(qū)域，拼接在滾動(dòng)內(nèi)容左右。在窗口呈現(xiàn)的初始狀態(tài)，即為頁(yè)面左空白邊距。當(dāng)可視區(qū)域窗口收到消息開(kāi)始滾動(dòng)時(shí)，內(nèi)容從可視窗口右側(cè)進(jìn)入，向左滾動(dòng)，即形成預(yù)期的滾動(dòng)效果。當(dāng)滾動(dòng)到末尾的時(shí)候，呈現(xiàn)給用戶(hù)的依然是空白區(qū)域，此時(shí)滾動(dòng)結(jié)束，如果將內(nèi)置頁(yè)面重新定位到最初位置，重新開(kāi)始一輪滾動(dòng)，即獲得了循環(huán)滾動(dòng)的效果［5］。MARQUEE頁(yè)面如圖1所示。第3期趙勇軍，等：在嵌入式瀏覽器中基于HTML的滾動(dòng)顯示效果實(shí)現(xiàn)方法研究智能計(jì)算機(jī)與應(yīng)用第4卷

圖1MARQUEE頁(yè)面圖

Fig.1MARQUEE page figure

將待滾動(dòng)的內(nèi)容添加到內(nèi)置子頁(yè)面之后，該頁(yè)面將會(huì)送入瀏覽器的解析流程，并和其它從網(wǎng)絡(luò)上獲得的頁(yè)面文件一樣，經(jīng)過(guò)瀏覽器的后續(xù)排版、渲染等流程，最終顯示給用戶(hù)。

創(chuàng)建內(nèi)置子頁(yè)面的代碼示例如下：

int marquee_htm_new(char *textcolor，char *bgcolor， int type，int width， int height， char* file_name， char* marquee_str)

{ FILE* fp = fopen(file_name， \"w+\");

if( fp == NULL )

return -1;

if(type == 0)

{/*direction is up or down*/fprintf(fp， \"＼n＼n

fprintf(fp， \" bgcolor=＼\"%s＼\"\"， bgcolor); fprintf(fp， \" text=＼\"%s＼\"\"， textcolor); fprintf(fp， \" style=＼\"font-size:%dpx＼\">＼n\"， style->font->size); fprintf(fp， \"

fprintf(fp，＼n

Else

{ fprintf(fp， \"＼n＼n

fprintf(fp， \" bgcolor=＼\"%s＼\"\"， bgcolor); fprintf(fp， \" text=＼\"%s＼\"\"， textcolor); fprintf(fp， \" style=＼\"font-size:%dpx＼\">＼n\"， style->font->size); fprintf(fp， \"

fclose(fp);return 0;

}

豎直方向內(nèi)置子頁(yè)面的生成原理同上。MARQUEE 豎直方向的內(nèi)置子頁(yè)面示意圖則如圖2所示。

圖2內(nèi)置子頁(yè)面示意圖

Fig.2Schematic diagram of built-subpages

特別指出的是，內(nèi)置子頁(yè)面生成的時(shí)間點(diǎn)很重要，必須在子頁(yè)面寬度和高度都明確之后才可調(diào)用函數(shù)生成此內(nèi)置頁(yè)面。

2.3內(nèi)置子頁(yè)面管理方式頁(yè)面中可以同時(shí)使用多個(gè)MARQUEE

研究使用函數(shù)生成隨機(jī)名稱(chēng)的內(nèi)置子頁(yè)面，并使其和各個(gè)MARQUEE 形成一一對(duì)應(yīng)關(guān)系［6］。在頁(yè)面退出的時(shí)候，也就隨之而需要清理當(dāng)前頁(yè)面內(nèi)所有MARQUEE 相關(guān)的資源，當(dāng)然也包括相應(yīng)的內(nèi)置子頁(yè)面。

2.4重要屬性的實(shí)現(xiàn)

(1) 滾動(dòng)窗口的高度和寬度

使用MARQUEE 標(biāo)簽時(shí)，可以明確定義其寬度和高度，也可不做定義。在未做定義的情況下，將遵循如下處理辦法：

在瀏覽器解析模塊中，MARQUEE 窗口建立之初，若網(wǎng)頁(yè)代碼中沒(méi)有定義其寬度、高度，可建立一個(gè)寬度和高度都為1 的窗口。在程序運(yùn)行至排版模塊時(shí)，根據(jù)瀏覽器內(nèi)部維護(hù)的元素棧查看其若干級(jí)父元素的寬度和高度，并按照繼承性算法計(jì)算得來(lái)，再基于此數(shù)據(jù)調(diào)整滾動(dòng)窗口大小，進(jìn)而創(chuàng)建其對(duì)應(yīng)的內(nèi)置頁(yè)面，設(shè)定定時(shí)器，而且注冊(cè)其回調(diào)函數(shù)［7］。通常，使用圖形引擎中的函數(shù)來(lái)更改MARQUEE窗口大小。具體函數(shù)的形式為：

BOOL GUIAPI MoveWindow (HWND hWnd， int x， int y， int w， int h，BOOL fPaint);

(2) 滾動(dòng)速度

通過(guò)定時(shí)器，發(fā)出滾動(dòng)消息的頻率是固定的，可通過(guò)采用更改滾動(dòng)步長(zhǎng)的方式來(lái)實(shí)現(xiàn)該屬性。代碼示例如下：

/*如果內(nèi)容未滾動(dòng)至尾，則繼續(xù)滾動(dòng)*/

if (viewport->world_x + viewport->allocation.width < world_width) {

/* 以頁(yè)面解析的速度值乘以單位長(zhǎng)度作為滾動(dòng)的步長(zhǎng)*/

scroll = scrollamount * unit;

if (scroll) {

SetScrollPos (viewport->hwnd， SB_HORZ， x);

ScrollWindow (viewport->hwnd， -scroll， 0， NULL， NULL);

}

scroll = widget->marquee->m_movespeed; }

else

/* 如果內(nèi)容已滾動(dòng)至尾，則重置子頁(yè)面至初始狀態(tài)*/

{ MGD_scroll_to_x(viewport， 0); return; }

(3)滾動(dòng)方式選擇

向滾動(dòng)窗口發(fā)送“向左滾動(dòng)”和“向右滾動(dòng)”的消息，可實(shí)現(xiàn)不同的滾動(dòng)方式。 scroll 方式表示反復(fù)地由一端滾動(dòng)至另一端。具體遵循以下流程（以自右向左滾動(dòng)為例）：

(a) 判斷滾動(dòng)內(nèi)容的右邊緣是否已經(jīng)到達(dá)滾動(dòng)窗口的左邊緣，是則跳至（c）；

(b) 程序向滾動(dòng)窗口定時(shí)發(fā)送“向左滾動(dòng)”消息；

(c)調(diào)整子頁(yè)面位置至初始狀態(tài)，跳至(a)。

alternate 方式表示在兩端反復(fù)來(lái)回滾動(dòng)。運(yùn)行流程如下：

(a) 判斷滾動(dòng)內(nèi)容的左邊緣是否已經(jīng)到達(dá)滾動(dòng)窗口的左邊緣，是則跳至（c）；

(b) 程序向滾動(dòng)窗口定時(shí)發(fā)送“向左滾動(dòng)”消息；

(c) 程序向滾動(dòng)窗口定時(shí)發(fā)送“向右滾動(dòng)”消息；

(d) 判斷滾動(dòng)內(nèi)容的右邊緣是否已經(jīng)到達(dá)滾動(dòng)窗口的右邊緣，是則跳至（a）。2.5排版環(huán)節(jié)的處理

當(dāng)MARQUEE 的滾動(dòng)方向?yàn)樗椒较蚯覞L動(dòng)內(nèi)容為文字時(shí)，MARQUEE 的排版算法和瀏覽器通用排版算法并不一致，此時(shí)需要排版流程進(jìn)行特別處理。MARQUEE 要求該段文字在內(nèi)置頁(yè)面中排列為一行，而不需受到頁(yè)面最大寬度的限制，其寬度即為所有文字的寬度之和，其高度則是此行最高文字的高度。

2.6多滾動(dòng)窗口的優(yōu)化

頁(yè)面中同時(shí)存在多個(gè)MARQUEE 標(biāo)簽，即會(huì)對(duì)嵌入式設(shè)備的CPU處理能力提出挑戰(zhàn)，此時(shí)顯示則變得閃爍。本文創(chuàng)建了MARQUEE 管理器，等待頁(yè)面中所有MARQUEE 控件的顯示狀態(tài)都準(zhǔn)備妥當(dāng)才開(kāi)始繪圖顯示，以解決此問(wèn)題。

在創(chuàng)建MARQUEE 控件時(shí)，將當(dāng)前控件的相關(guān)信息加載到MARQUEE 管理器；在銷(xiāo)毀MARQUEE 空間時(shí)，則將當(dāng)前控件的相關(guān)信息從MARQUEE 管理器中卸載［8］。

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

滾動(dòng)內(nèi)容顯示效果在嵌入式瀏覽器中的實(shí)現(xiàn)，也存在著其它方式。比如通過(guò)圖形顯示控制，將待滾動(dòng)內(nèi)容的一部分在頁(yè)面指定區(qū)域顯示，下一次顯示另外一部分的內(nèi)容。但是這樣做也存在著無(wú)法支持滾動(dòng)內(nèi)容包含HTML 代碼段等問(wèn)題。綜合比較，本文所提供的方法，具有支持完整和高效率等特點(diǎn)，是目前比較科學(xué)的實(shí)現(xiàn)方法。

參考文獻(xiàn)：

［1］陳凱. HTML的創(chuàng)意(續(xù))［J］. 中國(guó)信息技術(shù)教育，2008(4):29+36.

［2］鐘蜜，方勇，鄧赟. 基于XML/HTML標(biāo)簽屬性的信息隱藏模型［J］.通信技術(shù)，2010(5):106-108.

［3］楊留慧，雷航，郭文生. 嵌入式瀏覽器解析排版并行化研究與設(shè)計(jì)［J］. 計(jì)算機(jī)應(yīng)用，2011(12):3331-3333.

［4］張紅琴，陳煥英. 基于CSS和JavaScript的網(wǎng)頁(yè)滾動(dòng)字幕［J］. 長(zhǎng)春工業(yè)大學(xué)學(xué)報(bào)(自然科學(xué)版)，2012(2):165-170.

［5］劉愛(ài)民，王凌燕. 基于ASP技術(shù)的滾動(dòng)公告欄的動(dòng)態(tài)更新［J］. 電腦開(kāi)發(fā)與應(yīng)用，2006(6):39-40.

［6］謝富平. 用Java/Script、Fireworks制作連續(xù)滾動(dòng)圖片的方法［J］. 電腦開(kāi)發(fā)與應(yīng)用，2005(6):64.

［7］孫瑋. 嵌入式瀏覽器解析與排版布局引擎的研究?jī)?yōu)化［D］. 成都:電子科技大學(xué)，2012（3）:34.

［8］邢文華. 基于緩存策略的嵌入式瀏覽器解析器的實(shí)現(xiàn)［D］. 沈陽(yáng):東北大學(xué)，2008（4）:23-25.