基于Qt Web浏览器设计与实现-qt嵌入web页面

嵌入式GU I的概况

嵌入式系统的迅速发展, 使得字符界面和简单的图形界面不能再满足一些嵌入式系统的要求。随着硬件条件和用户需求的提高, 嵌入式系统对图形用户界面(GraphicU ser Interface) 的需求会越来越迫切。由于GU I是嵌入式软件系统中的基础软件, 独立开发需要投入大量的人力物力, 因此, 一批基于嵌入式Linux 的GU I系统就应运而生, 目前发展比较成熟的主要有:

(1)M icrow indow s[ 1] 系统提供了相对完善的图形功能和一些高级的特性, 如A lpha混合、三维支持和TrueType字体支持等。M icrow indow s也有一些通用的窗口控件, 但其图形引擎存在许多问题: 无任何硬件加速能力; 图形引擎中存在许多低效算法; 该项目缺乏一个强有力的核心代码维护人员。

(2)M iniGU I[ 2] 是由北京飞漫软件技术有限公司创办的开源L inux 图形用户界面支持系统, 主要目标是为基于L inux 的实时嵌入式系统提供一个轻量级的图形用户界面支持系统。M iniGU I有些遗憾的地方就是对输入法的支持不是很好。

( 3)Q t /Embedded[ 3] : Q t是一个功能全面、可开发高性能的、跨平台的、C ++ 图形用户界面应用程序框架[ 4] 。Qt由挪威Tro llTech公司出品。它提供给应用程序开发者建立艺术级的图形用户界面所需的所有功能。Q t是完全面向对象的, 很容易扩展, 并且允许真正的组件编程。Qt的良好封装机制使得Q t的模块化程度非常高, 可重用性较好, 对于用户开发来说是非常方便的。Qt 提供了一种称为signals/ slo ts ( 信号/槽) [ 5􀀁7] 的安全类型来替代callback(回调函数) , 这使得各个元件之间的协同工作变得十分简单。

2、 Q t平台的搭建

在Q t的官方网站上下载最新的安装包, 注意在安装Q t的时候需要具备root用户的安装权限。下载安装包后, 解压包, 然后归档管理包。解压完成后, 进入解压的相应目录。用. /configure 文件找到机器的

类型以方便在编译的时候获得很好的支持, 并且根据后面的选项来建立一个目录, 可以使用􀀁prefix来定制目录[ 11] 。具体代码如下:

# ta ra􀀁zxv faqt􀀁x11􀀁opensource􀀁desktop􀀁4. 3. 2. ta r. gz  
# cd qt􀀁x11􀀁opensource􀀁desktop􀀁4. 3. 2  
#. / con figure 􀀁pre fix= /usr / lo ca l  
#m ake

以上命令是建立有关的库文件、编译文件、帮助文档、所需要的数据及指南等。

#m ake insta ll

执行完命令后Q t就安装在Linux 系统上了, 源代码的编译需要很长的时间, 安装完成之后需要对它进行配置。修改环境变量:

# 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

为了使重新设置的环境变量生效, 运行$ source/etc /prof ile, 上面的步骤是设置全局的环境变量, 也可以在$ home /. bash _pro fle进行相应设置, 然后用source ~ /. bash_pro fle使系统的环境变量重新生效。为了节省时间, 可以重新注销一次让环境变量生效。这时在终端上输入$ assistan,t qt4. 3的帮助信息显示出来, 说明安装成功了。用$ echo $ PATH 可以查看qt4. 3. 2环境变量是否加载成功。

3、嵌入式浏览器的设计原则

3. 1 设计原则

嵌入式系统CPU 处理能力一般比较弱, 更重要的一点是内存很有限, 因此嵌入在这些设备中的微型浏览器不可能像IE、F irefox、Max thon等浏览器一样提供丰富多姿的多媒体服务, 需要对Internet内容做当的取舍, 以降低其复杂性和代码大小。浏览器的设计原则[ 12] 包括: 􀀂 限制图形化内容; 限制文本、用户链接导航; ! 限制文本大小、利用空余空间; ∀限制(或消除)小部件的使用等。嵌入式浏览器的体系结构如图1所示。

3. 2 浏览器模块
由图1浏览器的体系结构[ 8] 可知, 大致可归纳为7个模块组成:

( 1) User向She ll发出页面请求后, 页面的URL或本地文件名被发送到Shel;l

( 2) Shell调用IO 组件, 把URL传达到IO 组件;

( 3) IO 组件使用HTTP协议或再调用本地IO 获取HTML /XHTML源数据, 返回She l;l

( 4) Shell把IO 返回的HTML /XHTML source提交HTML /XHTML分析器;

( 5)根据源码构建一棵DOM 树;

( 6)对DOM 树描述的可视元素进行布局, 安排位置、大小;

( 7)创建各类GU I控件。

4、应用程序的实现

本文实现的是一个简易的嵌入式W eb 浏览器,此应用程序可以移植到不同的微处理器上。该浏览器可以实现根据地址访问网站, 进行页面的浏览并可以保存最近浏览过的网址等功能。

#p#

4. 1 界面设计

主要介绍浏览器的界面设计。根据设计的原则,界面设计简洁方便, Q t Designer[ 9􀀁11 ] 是设计窗口组件(W idget)的应用程序, 包含很多Q t组件的可视化界面。在界面的上端设计了两个Too l Button用来选择页面的后退与前进, 一个L ine E dit用来输入所需访问页面的地址, 在L ine Ed it的下面添加一个S tackedW idget用来显示网页的内容, 同时在界面底部添加还包括一个Progress Bar显示页面加载的进度。主界面如图2所示。

4. 2 具体功能的实现

在Q t /Embeded的应用程序中, QM ainW indow 声明Ma inW indow 类来作为用户的界面, 窗口界面使用Q t设计器来完成, 在这里使用一些信号与槽来操作事件, 并提供了用户界面的元素[ 13-14] 。在构造函数当中提供了用户的界面、进度对话框和类似于状态栏的几个按钮。下面具体介绍各功能槽函数的实现。具体实现过程如下:

使用goPrev ious( )函数来实现页面的后退功能:

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( )函数来实现页面的前进功能:

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( )函数实现显示主页的功能、removeTab( )函数实现关闭当前的页面窗口:

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;  
}  
}

【编辑推荐】

五大主流浏览器CSS3和HTML5兼容性大比拼