基于Qt Web瀏覽器設(shè)計與實現(xiàn)
嵌入式GU I的概況
嵌入式系統(tǒng)的迅速發(fā)展, 使得字符界面和簡單的圖形界面不能再滿足一些嵌入式系統(tǒng)的要求。隨著硬件條件和用戶需求的提高, 嵌入式系統(tǒng)對圖形用戶界面(GraphicU ser Interface) 的需求會越來越迫切。由于GU I是嵌入式軟件系統(tǒng)中的基礎(chǔ)軟件, 獨立開發(fā)需要投入大量的人力物力, 因此, 一批基于嵌入式Linux 的GU I系統(tǒng)就應(yīng)運而生, 目前發(fā)展比較成熟的主要有:
(1)M icrow indow s[ 1] 系統(tǒng)提供了相對完善的圖形功能和一些高級的特性, 如A lpha混合、三維支持和TrueType字體支持等。M icrow indow s也有一些通用的窗口控件, 但其圖形引擎存在許多問題: 無任何硬件加速能力; 圖形引擎中存在許多低效算法; 該項目缺乏一個強有力的核心代碼維護人員。
(2)M iniGU I[ 2] 是由北京飛漫軟件技術(shù)有限公司創(chuàng)辦的開源L inux 圖形用戶界面支持系統(tǒng), 主要目標是為基于L inux 的實時嵌入式系統(tǒng)提供一個輕量級的圖形用戶界面支持系統(tǒng)。M iniGU I有些遺憾的地方就是對輸入法的支持不是很好。
( 3)Q t /Embedded[ 3] : Q t是一個功能全面、可開發(fā)高性能的、跨平臺的、C ++ 圖形用戶界面應(yīng)用程序框架[ 4] 。Qt由挪威Tro llTech公司出品。它提供給應(yīng)用程序開發(fā)者建立藝術(shù)級的圖形用戶界面所需的所有功能。Q t是完全面向?qū)ο蟮? 很容易擴展, 并且允許真正的組件編程。Qt的良好封裝機制使得Q t的模塊化程度非常高, 可重用性較好, 對于用戶開發(fā)來說是非常方便的。Qt 提供了一種稱為signals/ slo ts ( 信號/槽) [ 57] 的安全類型來替代callback(回調(diào)函數(shù)) , 這使得各個元件之間的協(xié)同工作變得十分簡單。
2、 Q t平臺的搭建
在Q t的官方網(wǎng)站上下載最新的安裝包, 注意在安裝Q t的時候需要具備root用戶的安裝權(quán)限。下載安裝包后, 解壓包, 然后歸檔管理包。解壓完成后, 進入解壓的相應(yīng)目錄。用. /configure 文件找到機器的
類型以方便在編譯的時候獲得很好的支持, 并且根據(jù)后面的選項來建立一個目錄, 可以使用prefix來定制目錄[ 11] 。具體代碼如下:
- # ta razxv faqtx11opensourcedesktop4. 3. 2. ta r. gz
- # cd qtx11opensourcedesktop4. 3. 2
- #. / con figure pre fix= /usr / lo ca l
- #m ake
以上命令是建立有關(guān)的庫文件、編譯文件、幫助文檔、所需要的數(shù)據(jù)及指南等。
- #m ake insta ll
執(zhí)行完命令后Q t就安裝在Linux 系統(tǒng)上了, 源代碼的編譯需要很長的時間, 安裝完成之后需要對它進行配置。修改環(huán)境變量:
- # v i /etc / pro file
- # Add qt4. 3. 2 PATH
- PATH = /usr / local/qt4. 3. 2 /bin: $ PATH
- export PATH USER LOGNAME MA IL HOSTNAME H IST
- SIZE INPUTRC
為了使重新設(shè)置的環(huán)境變量生效, 運行$ source/etc /prof ile, 上面的步驟是設(shè)置全局的環(huán)境變量, 也可以在$ home /. bash _pro fle進行相應(yīng)設(shè)置, 然后用source ~ /. bash_pro fle使系統(tǒng)的環(huán)境變量重新生效。為了節(jié)省時間, 可以重新注銷一次讓環(huán)境變量生效。這時在終端上輸入$ assistan,t qt4. 3的幫助信息顯示出來, 說明安裝成功了。用$ echo $ PATH 可以查看qt4. 3. 2環(huán)境變量是否加載成功。
3、嵌入式瀏覽器的設(shè)計原則
3. 1 設(shè)計原則
嵌入式系統(tǒng)CPU 處理能力一般比較弱, 更重要的一點是內(nèi)存很有限, 因此嵌入在這些設(shè)備中的微型瀏覽器不可能像IE、F irefox、Max thon等瀏覽器一樣提供豐富多姿的多媒體服務(wù), 需要對Internet內(nèi)容做當?shù)娜∩? 以降低其復(fù)雜性和代碼大小。瀏覽器的設(shè)計原則[ 12] 包括: 限制圖形化內(nèi)容; 限制文本、用戶鏈接導(dǎo)航; ! 限制文本大小、利用空余空間; ∀限制(或消除)小部件的使用等。嵌入式瀏覽器的體系結(jié)構(gòu)如圖1所示。
3. 2 瀏覽器模塊
由圖1瀏覽器的體系結(jié)構(gòu)[ 8] 可知, 大致可歸納為7個模塊組成:
( 1) User向She ll發(fā)出頁面請求后, 頁面的URL或本地文件名被發(fā)送到Shel;l
( 2) Shell調(diào)用IO 組件, 把URL傳達到IO 組件;
( 3) IO 組件使用HTTP協(xié)議或再調(diào)用本地IO 獲取HTML /XHTML源數(shù)據(jù), 返回She l;l
( 4) Shell把IO 返回的HTML /XHTML source提交HTML /XHTML分析器;
( 5)根據(jù)源碼構(gòu)建一棵DOM 樹;
( 6)對DOM 樹描述的可視元素進行布局, 安排位置、大小;
( 7)創(chuàng)建各類GU I控件。
4、應(yīng)用程序的實現(xiàn)
本文實現(xiàn)的是一個簡易的嵌入式W eb 瀏覽器,此應(yīng)用程序可以移植到不同的微處理器上。該瀏覽器可以實現(xiàn)根據(jù)地址訪問網(wǎng)站, 進行頁面的瀏覽并可以保存最近瀏覽過的網(wǎng)址等功能。
#p#
4. 1 界面設(shè)計
主要介紹瀏覽器的界面設(shè)計。根據(jù)設(shè)計的原則,界面設(shè)計簡潔方便, Q t Designer[ 911 ] 是設(shè)計窗口組件(W idget)的應(yīng)用程序, 包含很多Q t組件的可視化界面。在界面的上端設(shè)計了兩個Too l Button用來選擇頁面的后退與前進, 一個L ine E dit用來輸入所需訪問頁面的地址, 在L ine Ed it的下面添加一個S tackedW idget用來顯示網(wǎng)頁的內(nèi)容, 同時在界面底部添加還包括一個Progress Bar顯示頁面加載的進度。主界面如圖2所示。
4. 2 具體功能的實現(xiàn)
在Q t /Embeded的應(yīng)用程序中, QM ainW indow 聲明Ma inW indow 類來作為用戶的界面, 窗口界面使用Q t設(shè)計器來完成, 在這里使用一些信號與槽來操作事件, 并提供了用戶界面的元素[ 13-14] 。在構(gòu)造函數(shù)當中提供了用戶的界面、進度對話框和類似于狀態(tài)欄的幾個按鈕。下面具體介紹各功能槽函數(shù)的實現(xiàn)。具體實現(xiàn)過程如下:
使用goPrev ious( )函數(shù)來實現(xiàn)頁面的后退功能:
- vo idM a inW indow: : goPrev ious( )
- {
- QW ebV iew a* v iew = dynam ic_cast< QW ebV iew* > ( _tab
- Stack> currenWt idget( ) );
- if ( v iew )
- v iew> back( );
- }
使用goNext( )函數(shù)來實現(xiàn)頁面的前進功能:
- vo idM a inW indow: : goNex t( )
- {
- QW ebV iew a* v iew = dynam ic_cast< QW ebV iew* > ( _tab
- Stack> currenWt idget( ) );
- if ( v iew )
- v iew> forw ard( ) ;
- }
使用showHom e( )函數(shù)實現(xiàn)顯示主頁的功能、removeTab( )函數(shù)實現(xiàn)關(guān)閉當前的頁面窗口:
- vo idM a inW indow: : rem oveTab( )
- {
- QW ebV iew a* v iew = dynam ic_cast< QW ebV iew* > ( _tab
- Stack> currenWt idget( ) );
- if ( v iew )
- {
- _carouse l> rem oveItem ( view) ;
- _tabStack> rem oveW idget( v iew );
- de le te v iew;
- }
- }
【編輯推薦】