基于linux嵌入式浏览器设计与实现

基于linux嵌入式浏览器设计与实现内容摘要：

emo 版。 开发的前期工作 1）市场调研和资料收集 在本项目开发前期，作者进行了大量的市场调研，和资料的搜集与整理工作；为 后面的设计开发奠定了良好的基础。 嵌入式浏览器主要应用于手持终端和信息家电，例如掌上电脑、 3G 手机、机顶 盒、具有网络功能的其它家电，如可上网的电冰箱等，另外，在军事等领域也有一定 的应用需求。 由此看来，本课题是一个比较有意义的课题，具有比较大的潜在市场和 较好的发展前景。 开发嵌 入式浏览器，是一项复杂的工程，涉及到很多技术，像 HTML,CSS 和 JavaScript 等，这些在第三章有专门介绍，此处不予赘述。 2）开发平台选取 目前的商业化嵌入式操作系统功能完善，但使用费用高昂，使用 Linux 内核的嵌 入式操作系统不仅功能强大，便于开发移植，而且费用低廉，基于 Linux 的嵌入式系 统已日渐成熟，也有相应的窗口系统可以使用，作者使用 PC 上的 Linux 来进行浏览 器开发，是再好不过的了，软件从 PC 移植到嵌入式设备只需重新编译一下就可以了 （前提是使用的函 数库、开发包同时具有 PC 和嵌入式的版本）。 3） GUI 选取 GUI 的选取是颇费脑筋的问题，一方面要考虑嵌入式系统是否有对应的版本，一 方面要考虑该 GUI 的功能是否足够实用。 目前常见的基于 Linux 的 GUI 开发包主要 有 GTK、 FLTK、 QT、 KDE 等，其中 FLTK 有 Micro Window 的版本，是比较好的选 择，但使用 FLTK 开发的软件还比较少，对于初学者进入的难度更大，而且目前 BUG 较多，而 GTK 比较成熟，使用 GTK 的软件比比皆是，资料也很丰富。 考虑到 GUI 是可以成为独立模块的，如浏览器 ZEN 的设计，作者决定使用 GTK，待时机成熟再 换用其它平台。 Easy Embedded Browser 各功能部件简介 下面简要介绍一下该浏览器的主要组成部份，其设计原理后面将进行专门论述。 1） HTML 解析 主要是针对 HTML 进行分析，该解析器实际是通用的，还可用于 XML、 WML 的分析，只需替换元素名称即可。 HTML 解析是浏览器设计的基础环节之一，也是整 个设计过程中重要的前端工作，其数据结构的拟定与接下来的布局算法密切相关，解 9 析的效率与准确性、容错性也关系到整个浏览器设计的质量。 2）布局 本文中的布局应理解为界面输出前的预演和处理位置等信息的算法，而不是具体 的画图和界面输出。 布局算法的好坏直接关系到界面的输出效果，但布局算法也是要 根据 GUI 所能实现的输出效果来设计的。 所以， GUI 往往是系统的瓶颈。 3） GUI 及软件界面 GUI 是指图形用户界面，浏览器无疑是一个图形函数库的大需求者，选择好的 GUI 环境实属不易，为了能够实现专有的功能，浏览器开发者往往还要对基础的 GUI 库进行包装、改 写，甚至写自己的控件。 GUI 的功劳第一在于软件的操作界面，如窗 口、菜单、工具条、滚动条等。 第二在于主浏览窗体中的图形元素的输出（通常以自 画控件的方式）。 前者通常直接使用 GUI 库中的已有控件，编程难度很小，后者主要 利用基本的点线函数，编程难度比较大。 本课题主要采用 GTK 编程辅以 PIXMAP 画 图的方式，实现用户界面。 4） JavaScript 支持 实际上 JavaScript 的编译器是开放源码的，而且全世界通用，包括 IE、 Mozilla、 Netscape 等浏览器都使用相同的 JavaScript 的编译器，但为何其对 JavaScript 的支持 不尽相同呢，这是因为 JavaScript 在浏览器里主要是用于操纵界面元素和与浏览器内 部命令进行结合。 这实际上是程序员努力的结果，而不是 JavaScript 编译器的功劳。 这其中的机制将在后面专门介绍。 5） IO 主要是指通过 HTTP 协议或文件系统来读取网页内容，网络部份超出了本论文的 讨论范围，不予详述。 Easy Embedded Browser 所支持的功能 1）界面：包括窗口，菜单，输入框，工具条，滚动条等的支 持。 2）词法分析：必须实现实用的 HTML 词法分析，支持 全部元素。 3）实现简单网页的布局：实现对简单网页的查看。 4）支持基本 IO，支持采用线程的网络传输。 本章小结 本章先从总体上介绍了作者在本课题设计前期所作的工作，包括资料搜集，开发 平台和 GUI 的选取，然后对作者设计的浏览器 ——Easy Embedded Browser 各功能部 件进行简介，最后指出了 Easy Embedded Browser 所支持的功能。 10 3 嵌入式浏览器设计要素 浏览器相关技术和标准 文档结构及相关概念 一个 HTML4 文档通常包括如下三大部分 [36] ： 1）一个包含 HTML 文档版本信息的行 2）文档头部分，由元素 HEAD 表示 3）文档体部分，由元素 BODY 表示 下面即为一个简单的 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 是一个文本文件，里面用形式化的方法给出了此 HTML 文档 各个元素、属性的定义。 中规定了三种 DTD 文件， HTML 文档必须具体 指定其中一种。 三种 DTD 文件不同之处在于它 们所支持的 HTML 元素数量不同，这 三种 DTD 文件分别是： 1） HTML Strict DTD，这种 DTD 文件支持的 HTML 元素中排除了如下两类 元素：那些用于显示 1 功能的、 W3C 希望由样式表 (Style Sheet)来代替的 HTML 元素 和属性（ Presentation Elements and Attributes）； Frameset 文档中出现的元素。 如果 HTML 文档使用的是这种 DTD，则必须在文档中包含类似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML ” “ 2） HTML Transitional DTD, 这种 DTD 包含 Strict DTD 支持的所 有元素外加 HTML Strict DTD 排除的第一类元素（即用于显示功能的元素）。 如 果 HTML 文档使用的是这种 DTD,则必须在文档中包含类似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML Transitional//EN” 11 “ 3） HTML Frameset DTD,这种 DTD 文件包含 HTML Strict DTD 支持的 所有元素外加它所排除的两类元素。 如果 HTML 文档使用的是这种 DTD，则必须在 文档中包含类似如下的行： !DOCTYPE HTML PUBLIC “//W3C//DTD HTML ” “ HTML 文档余下部分由 HTML 元素组合而成。 一个 HTML 元素通常由三部分组 成：开始标签（ Start tag），形如 elementname；内容（ content）；结束标签（ end tag）， 形如 /elementname。 当然，并不是每个元素都必须具备这三部分，具体情况详见 HTML 文档对应的 DTD 文件。 元素同时还可以具有若干属性，这些属性一般具有 name/value 对的形式，并且位于元 素开始标签的隔开。 字符集、字符编码及引用的概念 字符集定义了 HTML 文档中可以出现的所有字符，通常 HTML 文档使用 ISO10646 定义的通用字符集 UCS（ Universal Character Set）；字符编码则定义了计算 机系统如何对字符集中定义的每个字符编码。 浏览器可通过如下途径知道所解析的 HTML 文档使用的编码格式： 1）通过 HTML 头部申明 2）通过 Meta 定义，如： META HTTPEQUIV=”ContentType” CONTENT=”text/html” CHARSET=”gb2312” 3）通过指定元素的 charset 属性 有时候，一个指定的字符编码可能不能对字符集中所有的字符进行编码，或者由 于硬件、软件的原因不能输入字符集中的某个字符进入计算机系统，这两种情况下均 要使用字符引用（ Charater Reference）。 字符引用分为两种类型，一种为数字字符引 用（ Numerical Character Reference） ,另一种则为字符实体引用（ Character Entity Reference）。 下面分别简要介绍： 数 字字符引用：数字字符引用通过使用一个字符在字符集中的码位（ Code Position）来表示一个字符，它又可以分为 “amp。 D； ”，和 “amp。 xH； ”形式，两种形式 都以 “amp。 ”开头，以 ”； ”结尾，其中 ”D”代表一个十进制数，而 ”H”代表一个十六进制 数。 字符实体引用：由于数字字符引用中使用一个整数来表示一个字符，不易记忆， 12“ 因而可以采取替代方式，即字符引用的方式。 这种方式使用符号（而不是数字）来引 用一个字符，形式如下： amp。 Characters； ”值得注意的是，字符引用 是独立于特定的字 符编码；另外，字符集中每个字符都会对应一个数字字符引用，却不是每个字符都对 应一个字符实体引用。 的语法构成 HTML 语法的两个基本组成部分： TAG 和数据 1） TAG 是 „,‟和 „‟之间的部分。 由 TAG 名和属性组成。 比如 img src=“” height=30IMG 是 TAG 名， src， height 是属性名， ， 30 则是属性值。 TAG 名和 属性是大小写无关的。 HTML 最常用的 TAG 大概有 150 多个。 HTML 元素按功 能来分可以分为三类： 用于表示 HTML 文档结构的元素如 list、 table、 test； 用于表示 HTML 文档显示样式的元素如 font、 color、 style sheet； 用来提供 HTML 文档交互功能的元素如 form、 script。 2）数字部分是 HTML 文档中 TAG 以外的部分，在 HTML 一般解释这些数据成 为文字。 这些数据并非直接输出到浏览器上，也需要进行必要的分析解释，主要是针 对于转义字符，回车换行，空格的处理。 的语法树 HTML 文本经过语法分析生 成语法树是浏览器的一项重要工作。 语法分析生成的 这棵树贯穿了整个页面的排版和显示的过程中，它直到网页被删除时，才同时被删除 掉，所有的浏览器虽然组织形式和生成方法不同，但都要生成这种树型结构。 语法树 将所有的 HTML 页面对象连接起来的二叉树，语法数由先后顺序和语义包含关系两 方面来决定的。 HTML 浏览器时根据 HTML 的规范来确定语义包含关系。 HEAD TITLE META /TITLE /HEAD BODY TEXT IMG … TABLE TR 13 TD text img … /TD /TR /TABLE /BODY CSS 介绍 一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档。 HTML有很多 将样式规则加入到你的 HTML文档中的方法。 最简单的启动方法是使用 HTML的 STYLE组建。 这个元素放置于文档的 HEAD部分，包含网页的样式规则。 每个规则的 组成包括一个选择符 ——通常是一个 HTML的元素，例如 BODY,P或 EM——和该选择 符所接受的样式。 有很多的属性可以用于定义一个元素。 每个属性带一个值，共同的 描述选择符应该如何呈现 [19]。 样式规则组成如下： 选择符 {属性：值 } 单一选择符的复合样式声明应该用分号隔开： 选择符 {属性 1：值 1；属性 2：值 2} 以下是一段定义了 H1 和 H2 元素的颜色和字体大小属性： HEAD TITLECSS 例子 /TITLE STYLE TYPE=“text/css” H1{fontsize:xlarge； color： red} H2{fontsize:large。 color:blue}。