收稿日期：2014－04－30

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

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

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

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

中圖分類號：TP308文獻(xiàn)標(biāo)識碼：A文章編號：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引言

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

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

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

1.1代碼示例

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

1.2標(biāo)簽的屬性

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

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

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

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

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

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

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

2.1整體思路

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

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

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

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

圖1MARQUEE頁面圖

Fig.1MARQUEE page figure

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

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

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)置子頁面的生成原理同上。MARQUEE 豎直方向的內(nèi)置子頁面示意圖則如圖2所示。

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

Fig.2Schematic diagram of built-subpages

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

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

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

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

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

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

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

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

(2) 滾動速度

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

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

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

/* 以頁面解析的速度值乘以單位長度作為滾動的步長*/

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)容已滾動至尾，則重置子頁面至初始狀態(tài)*/

{ MGD_scroll_to_x(viewport， 0); return; }

(3)滾動方式選擇

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

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

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

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

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

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

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

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

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

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

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

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

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

3結(jié)束語

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

參考文獻(xiàn)：

［1］陳凱. HTML的創(chuàng)意(續(xù))［J］. 中國信息技術(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)頁滾動字幕［J］. 長春工業(yè)大學(xué)學(xué)報(bào)(自然科學(xué)版)，2012(2):165-170.

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

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

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

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