【文章內(nèi)容簡(jiǎn)介】 emo 版。 開(kāi)發(fā)的前期工作 1）市場(chǎng)調(diào)研和資料收集 在本項(xiàng)目開(kāi)發(fā)前期，作者進(jìn)行了大量的市場(chǎng)調(diào)研，和資料的搜集與整理工作；為 后面的設(shè)計(jì)開(kāi)發(fā)奠定了良好的基礎(chǔ)。 嵌入式瀏覽器主要應(yīng)用于手持終端和信息家電，例如掌上電腦、 3G 手機(jī)、機(jī)頂 盒、具有網(wǎng)絡(luò)功能的其它家電，如可上網(wǎng)的電冰箱等，另外，在軍事等領(lǐng)域也有一定 的應(yīng)用需求。由此看來(lái)，本課題是一個(gè)比較有意義的課題，具有比較大的潛在市場(chǎng)和 較好的發(fā)展前景。 開(kāi)發(fā)嵌 入式瀏覽器，是一項(xiàng)復(fù)雜的工程，涉及到很多技術(shù)，像 HTML,CSS 和 JavaScript 等，這些在第三章有專(zhuān)門(mén)介紹，此處不予贅述。 2）開(kāi)發(fā)平臺(tái)選取 目前的商業(yè)化嵌入式操作系統(tǒng)功能完善，但使用費(fèi)用高昂，使用 Linux 內(nèi)核的嵌 入式操作系統(tǒng)不僅功能強(qiáng)大，便于開(kāi)發(fā)移植，而且費(fèi)用低廉，基于 Linux 的嵌入式系 統(tǒng)已日漸成熟，也有相應(yīng)的窗口系統(tǒng)可以使用，作者使用 PC 上的 Linux 來(lái)進(jìn)行瀏覽 器開(kāi)發(fā)，是再好不過(guò)的了，軟件從 PC 移植到嵌入式設(shè)備只需重新編譯一下就可以了 （前提是使用的函 數(shù)庫(kù)、開(kāi)發(fā)包同時(shí)具有 PC 和嵌入式的版本）。 3） GUI 選取 GUI 的選取是頗費(fèi)腦筋的問(wèn)題，一方面要考慮嵌入式系統(tǒng)是否有對(duì)應(yīng)的版本，一 方面要考慮該 GUI 的功能是否足夠?qū)嵱?。目前常?jiàn)的基于 Linux 的 GUI 開(kāi)發(fā)包主要 有 GTK、 FLTK、 QT、 KDE 等，其中 FLTK 有 Micro Window 的版本，是比較好的選 擇，但使用 FLTK 開(kāi)發(fā)的軟件還比較少，對(duì)于初學(xué)者進(jìn)入的難度更大，而且目前 BUG 較多，而 GTK 比較成熟，使用 GTK 的軟件比比皆是，資料也很豐富?？紤]到 GUI 是可以成為獨(dú)立模塊的，如瀏覽器 ZEN 的設(shè)計(jì)，作者決定使用 GTK，待時(shí)機(jī)成熟再 換用其它平臺(tái)。 Easy Embedded Browser 各功能部件簡(jiǎn)介 下面簡(jiǎn)要介紹一下該瀏覽器的主要組成部份，其設(shè)計(jì)原理后面將進(jìn)行專(zhuān)門(mén)論述。 1） HTML 解析 主要是針對(duì) HTML 進(jìn)行分析，該解析器實(shí)際是通用的，還可用于 XML、 WML 的分析，只需替換元素名稱(chēng)即可。 HTML 解析是瀏覽器設(shè)計(jì)的基礎(chǔ)環(huán)節(jié)之一，也是整 個(gè)設(shè)計(jì)過(guò)程中重要的前端工作，其數(shù)據(jù)結(jié)構(gòu)的擬定與接下來(lái)的布局算法密切相關(guān)，解 9 析的效率與準(zhǔn)確性、容錯(cuò)性也關(guān)系到整個(gè)瀏覽器設(shè)計(jì)的質(zhì)量。 2）布局 本文中的布局應(yīng)理解為界面輸出前的預(yù)演和處理位置等信息的算法，而不是具體 的畫(huà)圖和界面輸出。布局算法的好壞直接關(guān)系到界面的輸出效果，但布局算法也是要 根據(jù) GUI 所能實(shí)現(xiàn)的輸出效果來(lái)設(shè)計(jì)的。所以， GUI 往往是系統(tǒng)的瓶頸。 3） GUI 及軟件界面 GUI 是指圖形用戶界面，瀏覽器無(wú)疑是一個(gè)圖形函數(shù)庫(kù)的大需求者，選擇好的 GUI 環(huán)境實(shí)屬不易，為了能夠?qū)崿F(xiàn)專(zhuān)有的功能，瀏覽器開(kāi)發(fā)者往往還要對(duì)基礎(chǔ)的 GUI 庫(kù)進(jìn)行包裝、改 寫(xiě)，甚至寫(xiě)自己的控件。 GUI 的功勞第一在于軟件的操作界面，如窗 口、菜單、工具條、滾動(dòng)條等。第二在于主瀏覽窗體中的圖形元素的輸出（通常以自 畫(huà)控件的方式）。前者通常直接使用 GUI 庫(kù)中的已有控件，編程難度很小，后者主要 利用基本的點(diǎn)線函數(shù)，編程難度比較大。本課題主要采用 GTK 編程輔以 PIXMAP 畫(huà) 圖的方式，實(shí)現(xiàn)用戶界面。 4） JavaScript 支持 實(shí)際上 JavaScript 的編譯器是開(kāi)放源碼的，而且全世界通用，包括 IE、 Mozilla、 Netscape 等瀏覽器都使用相同的 JavaScript 的編譯器，但為何其對(duì) JavaScript 的支持 不盡相同呢，這是因?yàn)? JavaScript 在瀏覽器里主要是用于操縱界面元素和與瀏覽器內(nèi) 部命令進(jìn)行結(jié)合。這實(shí)際上是程序員努力的結(jié)果，而不是 JavaScript 編譯器的功勞。 這其中的機(jī)制將在后面專(zhuān)門(mén)介紹。 5） IO 主要是指通過(guò) HTTP 協(xié)議或文件系統(tǒng)來(lái)讀取網(wǎng)頁(yè)內(nèi)容，網(wǎng)絡(luò)部份超出了本論文的 討論范圍，不予詳述。 Easy Embedded Browser 所支持的功能 1）界面：包括窗口，菜單，輸入框，工具條，滾動(dòng)條等的支 持。 2）詞法分析：必須實(shí)現(xiàn)實(shí)用的 HTML 詞法分析，支持 全部元素。 3）實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)的布局：實(shí)現(xiàn)對(duì)簡(jiǎn)單網(wǎng)頁(yè)的查看。 4）支持基本 IO，支持采用線程的網(wǎng)絡(luò)傳輸。 本章小結(jié) 本章先從總體上介紹了作者在本課題設(shè)計(jì)前期所作的工作，包括資料搜集，開(kāi)發(fā) 平臺(tái)和 GUI 的選取，然后對(duì)作者設(shè)計(jì)的瀏覽器 ——Easy Embedded Browser 各功能部 件進(jìn)行簡(jiǎn)介，最后指出了 Easy Embedded Browser 所支持的功能。 10 3 嵌入式瀏覽器設(shè)計(jì)要素 瀏覽器相關(guān)技術(shù)和標(biāo)準(zhǔn) 文檔結(jié)構(gòu)及相關(guān)概念 一個(gè) HTML4 文檔通常包括如下三大部分 [36] ： 1）一個(gè)包含 HTML 文檔版本信息的行 2）文檔頭部分，由元素 HEAD 表示 3）文檔體部分，由元素 BODY 表示 下面即為一個(gè)簡(jiǎn)單的 HTML 文檔示例： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML ” HTML HEAD TITLEMy first HTML document/TITLE/ /HEAD BODY PHello World! /BODY /HTML 包含 HTML 文檔版本信息的行定義了此 HTML 文檔正在使用的 DTD（ Document Type Definition）。 DTD 是一個(gè)文本文件，里面用形式化的方法給出了此 HTML 文檔 各個(gè)元素、屬性的定義。 中規(guī)定了三種 DTD 文件， HTML 文檔必須具體 指定其中一種。三種 DTD 文件不同之處在于它 們所支持的 HTML 元素?cái)?shù)量不同，這 三種 DTD 文件分別是： 1） HTML Strict DTD，這種 DTD 文件支持的 HTML 元素中排除了如下兩類(lèi) 元素：那些用于顯示 1 功能的、 W3C 希望由樣式表 (Style Sheet)來(lái)代替的 HTML 元素 和屬性（ Presentation Elements and Attributes）； Frameset 文檔中出現(xiàn)的元素。如果 HTML 文檔使用的是這種 DTD，則必須在文檔中包含類(lèi)似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML ” “ 2） HTML Transitional DTD, 這種 DTD 包含 Strict DTD 支持的所 有元素外加 HTML Strict DTD 排除的第一類(lèi)元素（即用于顯示功能的元素）。如 果 HTML 文檔使用的是這種 DTD,則必須在文檔中包含類(lèi)似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML Transitional//EN” 11 “ 3） HTML Frameset DTD,這種 DTD 文件包含 HTML Strict DTD 支持的 所有元素外加它所排除的兩類(lèi)元素。如果 HTML 文檔使用的是這種 DTD，則必須在 文檔中包含類(lèi)似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML ” “ HTML 文檔余下部分由 HTML 元素組合而成。一個(gè) HTML 元素通常由三部分組 成：開(kāi)始標(biāo)簽（ Start tag），形如 elementname；內(nèi)容（ content）；結(jié)束標(biāo)簽（ end tag）， 形如 /elementname。當(dāng)然，并不是每個(gè)元素都必須具備這三部分，具體情況詳見(jiàn) HTML 文檔對(duì)應(yīng)的 DTD 文件。元素同時(shí)還可以具有若干屬性，這些屬性一般具有 name/value 對(duì)的形式，并且位于元 素開(kāi)始標(biāo)簽的隔開(kāi)。 字符集、字符編碼及引用的概念 字符集定義了 HTML 文檔中可以出現(xiàn)的所有字符，通常 HTML 文檔使用 ISO10646 定義的通用字符集 UCS（ Universal Character Set）；字符編碼則定義了計(jì)算 機(jī)系統(tǒng)如何對(duì)字符集中定義的每個(gè)字符編碼。瀏覽器可通過(guò)如下途徑知道所解析的 HTML 文檔使用的編碼格式： 1）通過(guò) HTML 頭部申明 2）通過(guò) Meta 定義，如： META HTTPEQUIV=”ContentType” CONTENT=”text/html” CHARSET=”gb2312” 3）通過(guò)指定元素的 charset 屬性 有時(shí)候，一個(gè)指定的字符編碼可能不能對(duì)字符集中所有的字符進(jìn)行編碼，或者由 于硬件、軟件的原因不能輸入字符集中的某個(gè)字符進(jìn)入計(jì)算機(jī)系統(tǒng)，這兩種情況下均 要使用字符引用（ Charater Reference）。字符引用分為兩種類(lèi)型，一種為數(shù)字字符引 用（ Numerical Character Reference） ,另一種則為字符實(shí)體引用（ Character Entity Reference）。 下面分別簡(jiǎn)要介紹： 數(shù) 字字符引用：數(shù)字字符引用通過(guò)使用一個(gè)字符在字符集中的碼位（ Code Position）來(lái)表示一個(gè)字符，它又可以分為 “amp。D； ”，和 “amp。xH； ”形式，兩種形式 都以 “amp?！遍_(kāi)頭，以 ”； ”結(jié)尾，其中 ”D”代表一個(gè)十進(jìn)制數(shù)，而 ”H”代表一個(gè)十六進(jìn)制 數(shù)。 字符實(shí)體引用：由于數(shù)字字符引用中使用一個(gè)整數(shù)來(lái)表示一個(gè)字符，不易記憶， 12“ 因而可以采取替代方式，即字符引用的方式。這種方式使用符號(hào)（而不是數(shù)字）來(lái)引 用一個(gè)字符，形式如下： amp。Characters； ”值得注意的是，字符引用 是獨(dú)立于特定的字 符編碼；另外，字符集中每個(gè)字符都會(huì)對(duì)應(yīng)一個(gè)數(shù)字字符引用，卻不是每個(gè)字符都對(duì) 應(yīng)一個(gè)字符實(shí)體引用。 的語(yǔ)法構(gòu)成 HTML 語(yǔ)法的兩個(gè)基本組成部分： TAG 和數(shù)據(jù) 1） TAG 是 ?,?和 ??之間的部分。由 TAG 名和屬性組成。比如 img src=“” height=30IMG 是 TAG 名， src， height 是屬性名， ， 30 則是屬性值。 TAG 名和 屬性是大小寫(xiě)無(wú)關(guān)的。 HTML 最常用的 TAG 大概有 150 多個(gè)。 HTML 元素按功 能來(lái)分可以分為三類(lèi)： 用于表示 HTML 文檔結(jié)構(gòu)的元素如 list、 table、 test； 用于表示 HTML 文檔顯示樣式的元素如 font、 color、 style sheet； 用來(lái)提供 HTML 文檔交互功能的元素如 form、 script。 2）數(shù)字部分是 HTML 文檔中 TAG 以外的部分，在 HTML 一般解釋這些數(shù)據(jù)成 為文字。這些數(shù)據(jù)并非直接輸出到瀏覽器上，也需要進(jìn)行必要的分析解釋?zhuān)饕轻? 對(duì)于轉(zhuǎn)義字符，回車(chē)換行，空格的處理。 的語(yǔ)法樹(shù) HTML 文本經(jīng)過(guò)語(yǔ)法分析生 成語(yǔ)法樹(shù)是瀏覽器的一項(xiàng)重要工作。語(yǔ)法分析生成的 這棵樹(shù)貫穿了整個(gè)頁(yè)面的排版和顯示的過(guò)程中，它直到網(wǎng)頁(yè)被刪除時(shí)，才同時(shí)被刪除 掉，所有的瀏覽器雖然組織形式和生成方法不同，但都要生成這種樹(shù)型結(jié)構(gòu)。語(yǔ)法樹(shù) 將所有的 HTML 頁(yè)面對(duì)象連接起來(lái)的二叉樹(shù)，語(yǔ)法數(shù)由先后順序和語(yǔ)義包含關(guān)系兩 方面來(lái)決定的。 HTML 瀏覽器時(shí)根據(jù) HTML 的規(guī)范來(lái)確定語(yǔ)義包含關(guān)系。 HEAD TITLE META /TITLE /HEAD BODY TEXT IMG … TABLE TR 13 TD text img … /TD /TR /TABLE /BODY CSS 介紹 一個(gè)樣式表由樣式規(guī)則組成，以告訴瀏覽器怎樣去呈現(xiàn)一個(gè)文檔。 HTML有很多 將樣式規(guī)則加入到你的 HTML文檔中的方法。最簡(jiǎn)單的啟動(dòng)方法是使用 HTML的 STYLE組建。這個(gè)元素放置于文檔的 HEAD部分，包含網(wǎng)頁(yè)的樣式規(guī)則。每個(gè)規(guī)則的 組成包括一個(gè)選擇符 ——通常是一個(gè) HTML的元素，例如 BODY,P或 EM——和該選擇 符所接受的樣式。有很多的屬性可以用于定義一個(gè)元素 。每個(gè)屬性帶一個(gè)值，共同的 描述選擇符應(yīng)該如何呈現(xiàn) [19]。 樣式規(guī)則組成如下： 選擇符 {屬性：值 } 單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開(kāi)： 選擇符 {屬性 1：值 1；屬性 2：值 2} 以下是一段定義了 H1 和 H2 元素的顏色和字體大小屬性： HEAD TITLECSS 例子 /TITLE STYLE TYPE=“text/css” H1{fontsize:xlarge； color： red} H2{fontsize:large。color:blue}