基于嵌入式系统的浏览器开发

基于嵌入式系统的浏览器设计与实现学生：xx 指导老师：xx摘要：随着计算机、网络技术的迅猛发展，新型的高科技含量的电子产品层出不穷，遍及家电、生产、军事等各个领域。嵌入式系统因其体积小，速度快而受到重视。在掌上电脑、PDA、手机、导航设备、信息家电领域嵌入式系统被广泛采用，这也是近期产品研发的热点。嵌入式浏览器作为重要的嵌入式系统应用软件，是不可或缺的。本文主要论述了嵌入式浏览器开发所涉及到的技术，对HTML词法分析、浏览器JavaScript支持、linux和gtk编程等做了详细的分析和介绍，并对Netbit浏览器的开发进行了介绍，分析了主要的模块的功能和组成，并给出了主要算法。介绍了目前嵌入式浏览器产品的发展现状，嵌入式浏览器的组成和各部份功能说明。HTML词法分析是着重讨论的技术问题，给出了详尽的数据结构，程序流程。Netbit浏览器的开发，是本论文的重点，分模块进行了分析，提出了需要改进的地方，并给出了改进措施。关键词：嵌入式浏览器，HTML词法分析，Javascript，linux，gtkThedesignandimplementationofbrowserBasedonembeddedsystemStudent:xxguideInstructor:xxSummary:withthecomputer,therapiddevelopmentofInternettechnology,thenewhigh-techelectronicproductemergeinendlessly,throughoutthehomeappliance,production,militaryandotherfields.Theembeddedsystembecauseofitssmallvolume,fasterandmoreattention.InaPDA,PDA,mobilephones,navigationequipment,informationhomeappliancesfieldembeddedsystemtobeusedextensively,thisisthehotspotintheresearchofproducts.Embeddedbrowserasanimportantmeansofembeddedsystemsoftwareapplication,isindispensable.Thispaperdiscussestheembeddedbrowserdevelopmentinvolvedintechnology,toHTMLbrowserJavaScriptmorphologyanalysis,supportandLinuxandGTKprogrammingetctodoadetailedanalysisandintroduced,andthedevelopmentofNetbitbrowsersareintroduced,analyzedthemainmodulefunctionandcomposition,andgivesthemainalgorithms.Introducesthepresentembeddedbrowserproductdevelopmentpresentsituation,embeddedbrowsercompositionanddifferentpartsoffunctionalspecification.HTMLlexicalanalysisarediscussedemphaticallythetechnicalproblems,andgivesthedetaileddatastructure,processes.Netbitbrowserdevelopment,isthekey,thisthesispointsmoduleareanalyzedandsomeareasinneedofimprovement,andgivesthemeasurestoimprove.Keywords:embeddedHTMLbrowsers,lexicalanalysis,Javascript,Linux,GTK目录1引言 71.1目前嵌入式浏览器产品的发展现状 71.2课程设计任务和主要内容 82HTML词法分析器的设计及其应用 92.1 BitToken的组成及其功能 92.2 数据结构 92.3 算法 102.4HTML词法分析的应用 113浏览器JavaScript支持的实现 123.1JavaScriptEngine 123.2JavaScript与浏览器接合 133.3浏览器的响应 134Netbit浏览器开发与分析 154.1NetbitBrowser浏览器各部份的功能 154.2各模块的实现 154.3Netbit实际应用效果及比较 234.4NetbitBrowser的缺点分析及改进办法 275总结 29致谢 30参考文献 31 1引言随着计算机、网络技术的迅猛发展，新型的高科技含量的电子产品层出不穷，遍及家电、生产、军事等各个领域。嵌入式系统因其体积小，速度快而受到重视。在掌上电脑、PDA、手机、导航设备、信息家电领域嵌入式系统被广泛采用，这也是近期产品研发的热点。嵌入式浏览器作为重要的嵌入式系统应用软件，是不可或缺的。但目前，嵌入式浏览器产品的市场被少数国外大公司垄断，众多的小型嵌入式浏览器也尚处于发展期，而国内的自主技术的嵌入式浏览器更屈指可数，刚刚进入实用阶段。迫切需要更多的人来关注嵌入式浏览器技术，开发中国自主知识产权的浏览器产品。本文阐述了嵌入式浏览器开发的关键技术，并详细说明NetbitBrowser的实际开发过程，技术细节。初步实现了预期目标，经改善后可投入使用。1.1目前嵌入式浏览器产品的发展现状常见的桌面浏览器有微软的InternetExplorer，网景的Netscape，开放源码的Mozilla，以及opera，mosaic，Hotjava，字符模式的lynx等。其中IE，Opera已有嵌入式版本，以上的大多数浏览器均有跨多平台的版本。这些桌面型浏览器功能参差不齐，但大多能实现基本的浏览功能。其中IE与Netscape对HTML页面的显示效果均堪称完美（对于XML，WML等标准的网页浏览，本文不予讨论）。与完美的浏览效果，功能丰富，支持多种媒体格式和视音频插件等优点形成对立的是，这些浏览器庞大的体积和对机器配置的高要求。这也是桌面浏览器和嵌入式浏览器最大的区别。另外，桌面型浏览器通常是基于通用的操作系统，用于桌面电脑如PC机、MAC机等。而嵌入式浏览器通常基于专用系统。需要指出的是，我们在网上常看到的一些所谓的优秀浏览器，如Netcaptor，腾讯，飓风，Fantasia，金山WPSoffice的浏览器等等，均为使用IE内核的浏览器，使用了多页面多线程的方式，降低了系统资源的耗费，方便了浏览，但软件本身没有多少技术可言，可以用Delphi，VB等工具轻易开发出来（如果不要求完善的功能，只需简单到拖一个IE控件过去就行了），这也体现了微软的COM+及ActiveX技术的强大。嵌入式浏览器主要应用于手持终端和信息家电，例如掌上电脑、3G手机、网络机顶盒、具有网络功能的其它家电，如可上网的电冰箱等，另外，在军事等领域也有一定的应用需求。目前的商业化嵌入式操作系统功能完善，但使用费用高昂，使用Linux内核的嵌入式操作系统不仅功能强大，便于开发移植，而且费用低廉，基于Linux的嵌入式系统已日渐成熟，也有相应的窗口系统可以使用，我们使用PC上的Linux来进行浏览器开发，是再好不过的了，软件从PC移植到嵌入式设备只需重新编译一下就可以了（前提是使用的函数库、开发包同时具有PC和嵌入式的版本）。1.2课程设计任务和主要内容需要实现的包括：(1) 界面：包括窗口，菜单，输入框，工具条，滚动条等的支持。(2) 词法分析：必须实现实用的HTML词法分析，支持HTML4.0全部元素。(3) 实现简单网页的布局：实现对简单网页的查看。(4) 支持基本IO，支持采用线程的网络传输。需要考虑的功能：(1) JavaScript支持(2) 汉字支持(3) 图片格式支持(4) 表单支持(5) 页面元素的消息响应2HTML词法分析器的设计及其应用HTML词法分析是浏览器设计的基础环节之一，也是整个设计过程中重要的前端工作，其数据结构的拟定与接下来的语法分析和布局算法密切相关，词法分析的效率与准确性、容错性也关系到整个浏览器设计的质量。2.1 BitToken的组成及其功能BitToken作为NetbitBrowser的词法分析部份，负责对接收的HTML代码进行词法分析，主要的目的是提取网页中元素的名称及其属性，并以恰当的形式（即按一定的数据结构）加以保存，也就是完成了将数据流离散化、结构化的过程。主要由以下几个部分组成：（1）初始化：完成对数据结构的初始化，主要是分配内存，变量赋初值。（2）主体的数据流分析：逐字符的进行判断，确定数据的归属类型。（3）元素的分析：提取元素的名称、属性和值域。（4）释放：主要是对内存的释放。2.2 数据结构typedefstructBitTokenContext{char*strBuffer; //当前正在处理的HTML代码intbufferLength;intcurPosition;char*global_strBuffer; //全局HTML代码intglobal_bufferLength;intglobal_curPosition;BitTokenList*tokenList; //元素节点链表BitTokenList*tokenList_tail;BitPTagList pTagList; //元素名称表，指向静态数据}BitTokenContext,*BitPTokenContext;BitTokenContext是用于存储当前待分析网页全局属性的数据结构，其中TokenList是核心的元素节点链表。词法分析的目的就是生成这样一个链表。下面给出该链表的数据结构，是很简单的双向链表。typedefstructTokenList{BitToken*token; //元素节点structTokenList*priou;structTokenList*next;}BitTokenList,*BitPTokenList;以下是元素节点的数据结构：typedefstructBitToken{inttype; //节点类型，如定义的HTML_BODY，HTML_TXT等。char*pData;//如果是HTML_TXT型元素，则为其内容，否则为空BOOLend; //是否是结束元素，如</body>BitTokenAttrList*attrList;//元素属性链表，因为可能有多个属性，所以使用链表存储BitTokenAttrList*attrList_tail;}BitToken,*BitPToken;2.3 算法基本算法：首先介绍基本的算法：(1)从存储网页的字符串中，顺序读入一个字符(2)如果遇到<，认为遇到TAG（元素），处理该元素，使用函数Token_ConsumTag()，处理完毕后，指针移到该元素尾。(3)如果遇到回车、空格，则跳过。(4)如果遇到>，则跳过(不应该出现此情况，为了容错)。(5)如果非以上情况，则认为遇到文字，处理这段文字，使用函数Token_Consum_PlainText()。处理完毕，指针指向下一个元素首。(6)循环以上操作，直到该网页分析完毕。算法效率与改进：采用以上的基本算法，是可用的，但当网页比较大的时候，比如600K，该算法的效率成倍下降，这主要是由于要处理的字符串太大，在内存中完成查找、替换、复制、移动等操作，响应时间明显下降。对此的改进办法就是分段进行词法分析，不仅极大的提高了效率（在某些情况下约提高30倍），也有利于浏览器整体设计，因为当网页较大时，若等待全部内容传输完毕，再一次性完成词法分析和布局，用户会感到等待时间过长，一般现在成熟的浏览器都采用边传输，边分析，边显示。2.4HTML词法分析的应用HTML词法分析程序通常应用于浏览器设计、网页制作软件设计等领域，本人以一个使用VC开发的软件“HTML智能分析”来举例说明，“HTML智能分析”同样使用BitToken词法分析器，“HTML智能分析”是一个网页信息提取、处理软件。具有以下主要功能：1、智能提取网页中的文字信息，智能排版，并可在进行编辑后保存。2、统计网页的有关信息。3、根据用户设置的版式，将分析和编辑的结果，自动生成新的网页。其主要设计思路是，在BitToken词法分析器的基础上，结合浏览器布局的基本算法，对影响到TXT版面效果的元素进行处理。3浏览器JavaScript支持的实现3.1JavaScriptEngineJavaScriptEngine是浏览器开发者为了利用JavaScriptAPI来实现实际应用而设立的中间层，用于初始化JavaScript环境，提供对JavaScript解释、执行的接口。浏览器主体程序的设计者可以通过JavaScriptEngine，方便的实现各种应用，毕竟JavaScriptAPI太基础了，直接使用不太方便。下面介绍JavaScriptEngine的主要功能和实现方法。这也包含了利用JavaScriptAPI进行应用的基本思路。(1)初始化：内存分配：rt=JS_Init(10000L);初始化cx：cx=JS_NewContext(rt,STACK_CHUNK_SIZE);初始化globalObj：globalObj=JS_NewObject(cx,&globalClass,0,0);定义标准类：JS_InitStandardClasses(cx,globalObj);定义系统函数：JS_DefineFunctions(cx,globalObj,g_functions);定义报错函数：JS_SetErrorReporter(cx,JS_ErrorReporter);注册其它类：RegisterClassPoint (cx,globalObj);RegisterClassSize (cx,globalObj);RegisterClassRect (cx,globalObj);RegisterClassPolygon (cx,globalObj);RegisterClassColorKey (cx,globalObj);RegisterClassTDTimer (cx,globalObj);初始化定时器：TDTimerListInit();(2)提供对JavaScript解释、执行的接口函数：TD_EvaluateScript(JSContext*cx,JSObject*obj,constchar*bytes,uintNlength,constchar*filename,uintNlineno,jsval*rval)3.2JavaScript与浏览器接合基本概念：JavaScript操作HTML元素的常见方式例：<html><head><script><!--functionChangeImage(index){image0.src="a"+index+".gif";}--></script></head><aonmouseover="ChangeImage(0);"></a><br><aonmouseover="ChangeImage(1);">眼睛</a><br><imgid="image0"src="a0.gif"></img></html>当鼠标移到文字上时，触发事件mouseover，调用ChangeImage()函数，使得图像源(SRC)发生变化，重新调入新图片。3.3浏览器消息响应在主消息循环中调用TDWidgetProcessMsg，处理与widget有关消息。首先：取得当前焦点所在的widgetpWidget=TDWidgetGetAtPoint(pThis->baseDoc.base.mWidget,pt,&index);处理该widget对该消息的响应。最后一般为调用JavaScript执行，实现实际响应。TDVOIDTDWidgetDoAction(TDPWidgetActionpAnchor){ jsvaljval; if(pAnchor) TD_EvaluateScript(JS_GetGlobalContext(),js_GetGlobalObject(),pAnchor->mAction.mStr,pAnchor->mAction.mLength,TDNULL,0,&jval);}其中pAnchor->mAction.mStr即为界面对象(widget)对应的JavaScript源码，解释执行的结果就是调用为该对象注册的函数来重画该widget，从而实现动态效果。4Netbit浏览器开发与分析控制模块界面模块PIXMAP画图模块4.1NetbitBrowser浏览器各部份的功能控制模块界面模块PIXMAP画图模块HTML文件显示模块文本文件显示模块词法分析模块IO模块HTML文件显示模块文本文件显示模块词法分析模块IO模块(1)主程序：用于初始化。(2)界面模块：窗口、菜单、工具条、滚动条等的初始化。(3)控制模块：负责命令的响应，消息的处理，是软件控制的中枢。(4)IO模块：包括http和文件操作。(5)词法分析模块：HTML的词法分析。(6)文本文件的显示模块：对Plaintext显示的处理，也包含相应的布局算法。(7)HTML文件的显示模块：在Netbitbrowser中使用了语法分析与布局同时进行的方式，由此模块来驱动HTML文件的显示。(8)使用PIXMAP的画图模块：是实际输出采用的方法，被6、7模块调用。4.2各模块的实现1、界面模块：(1)interface.c，interface.h：用于界面的初始化和定制。主要的函数说明：voida_Interface_init(void);界面初始化的主函数voida_Interface_status(BrowserWindow*bw,constchar*format,...);设置状态栏内容。voida_Interface_openfile_dialog(BrowserWindow*bw);文件打开对话框voida_Interface_set_Page_title(BrowserWindow*bw,char*title);设置窗口标题。voida_Interface_entry_open_url(GtkWidget*widget,BrowserWindow*bw);打开网址输入栏输入的网址。BrowserWindow*a_Interface_new_browser_window(gintwidth,gintheight);新建浏览窗口，是很重要的函数，在其中创建了所有的界面控件，并对按钮等进行了消息绑定。(2)menu.c，menu.h主要函数：GtkWidget*a_Menu_mainbar_new(BrowserWindow*bw);定义了主菜单项，并进行了消息绑定(3)browser.h定义了重要的窗口结构如下：struct_BrowserWindow{/*主窗口的widgets*/GtkWidget*main_window;GtkWidget*back_button;GtkWidget*forw_button;GtkWidget*stop_button;GtkWidget*location;GtkWidget*location_button;GtkWidget*status;/*键盘控制表*/GtkAccelGroup*accel_group;/*工具条按钮*/GtkWidget*back_menuitem;GtkWidget*forw_menuitem;GtkWidget*stop_menuitem;/*主文档widget.(用于绘制HTML或其它)*/GtkWidget*layout;/*当前光标类型*/GdkCursorTypeCursorType;/*对话框widgets*/GtkWidget*open_dialog_window;GtkWidget*open_dialog_entry;GtkWidget*openfile_dialog_window;GtkWidget*quit_dialog_window;/*指向保存词法分析结果的数据结构*/BitTokenContext*global_cx;/*文件类型：htmlorplaintext*/gintfile_type;};2、控制模块：command.c，command.h主要的函数说明：voida_Commands_openfile_callback(GtkWidget*widget,gpointerclient_data);打开文件的对话框voida_Commands_openurl_callback(GtkWidget*widget,gpointerclient_data);打开URLvoida_Commands_close_callback(GtkWidget*widget,gpointerclient_data);关闭窗口voida_Commands_exit_callback(GtkWidget*widget,gpointerclient_data);退出程序voida_Commands_viewsource_callback(GtkWidget*widget,gpointerclient_data);查看HTML源码voida_Commands_reload_callback(GtkWidget*widget,gpointerclient_data);刷新当前网页voida_Commands_home_callback(GtkWidget*widget,gpointerclient_data);显示主页voida_Commands_helphome_callback(GtkWidget*widget,gpointerclient_data);显示帮助nav.h，nav.c：是命令对应的与网页操作有关的具体实施主要的函数说明：voida_Nav_push(BrowserWindow*bw,constchar*);按URL打开一个网址或文件，具有对不完整URL的兼容性。voida_Nav_reload(BrowserWindow*bw);刷新当前网页voida_Nav_open_splash(BrowserWindow*bw,char*str);打开起始页（内置页面）3词法分析模块：词法分析的原理和算法在前面已有详述。BitToken.c，BitToken.h主要的函数说明：BitTokenContext*Bit_NewContext();创建新的全局结构intBit_Tokenize(BitTokenContext*global_cx);局部词法分析voidBit_BeginToken(BitTokenContext*global_cx);全局词法分析intBit_DestroyToken(BitTokenContext*global_cx);释放内存char*Token_ReadUntil(BitTokenContext*global_cx,char*sUntil);重要的字符处理函数，读取到指定字符后结束char*Token_GetAttribute(BitTokenContext*global_cx);取元素属性voidToken_ConvertIfNeed(char*aString);转义字串的处理intToken_ConsumTag(BitTokenContext*global_cx);处理元素intToken_Consum_PlainText(BitTokenContext*global_cx);处理文本voidBit_ShowTokenResult(BitTokenContext*global_cx);显示分析结果voidBit_SaveTokenResult(BitTokenContext*global_cx,char*filename);保存分析结果BitHtmlDtd.h，BitHtmlDtd.c用于存储HTML4.0元素的名称和属性。BitTokenList.h，BitTokenList.c元素链表相关BitTokenAttrList.h，BitTokenAttrList.c元素属性链表相关BitStr.h，BitStr.c字符串处理函数4、文本文件的显示模块：plain.c，plain.hchar*Plain_handle_tabs(constchar*str)将TAB转为空格。voida_Plain_write(GtkLayout*display,char*Buf1,gintBufSize)主要函数下面介绍一下文本显示的算法。指定默认字体font=gdk_font_load("-adobe-helvetica-medium-r-normal--14-*-*-*-*-*-iso8859-1");通过预布局来计算页面的长度：while(i<BufSize){j=0;while(line_size<SCREEN_WIDTH-20&&Buf[i]!='\n'){str[j]=Buf[i];line_size+=gdk_char_width(font,str[j]);j++;i++;}str[j]='\0';if(Buf[i]=='\n')i++;x=X_START;line_size=x;y+=16;}创建PIXMAPpixmap_new(drawing_area,SCREEN_WIDTH,y);gc=gdk_gc_new(drawing_area->window);进行真实的画图。pixmap_repaint(drawing_area);输出到PIXMAP并显示5、HTML文件的显示模块：这部份是整个浏览器最重要的部份之一，综合了语法分析与HTML的布局、输出，其算法的好坏直接关系到网页的显示效果。主要流程：while(pTtokenList!=NULL){…………switch(pTtokenList->token->type){caseHTML_TITLE: …………break;caseHTML_TEXT: …………break; ………… …………default: ………break;}//switchpTtokenList=pTtokenList->next;}//while可以看到，这部份与语词分析结合的十分紧密，利用词法分析的结果，遍历各元素节点，取出其元素属性，根据一定的布局算法来进行布局。例如：当遇到title元素时，就使用gtk函数来设定窗口标题为指定标题gtk_window_set_title(GTK_WINDOW(bw->main_window),pTtokenList->token->pData);其中pTtokenList->token->pData即为词法分析分析出的标题内容。由于程序结构十分简单清晰，大部份元素的处理都简单易懂，参考源程序即可，下面主要针对<font>和相关标记对字体的设置阐述其算法。由于<font>标记允许嵌套，所以使用了栈来对font元素进行管理，例如以下的HTML代码：<fontsize=4color=#0000FF>Thisprogramisnot<b>freesoftware</b>;youcanredistributeitand/ormodifyitunderthetermsofthe<fontsize=5color=FF0000>GNUGeneralPublicLicense</font>aspublishedbytheFreeSoftwareFoundation;eitherversion2oftheLicense,or(atyouroption)anylaterversion.</font>显示的效果应为GNUGeneralPublicLicense的字号为5，颜色为FF0000，即红色；freesoftware应为粗体，受首尾两个呼应的font标记约束，其它字字号均为4，颜色为0000FF，由于freesoftware只被<b></b>这一对加粗符号约束，所以其颜色应受首尾的font标记的约束，即应为0000FF。这种嵌套的约束方式带来了HTML元素管理的混乱，也容易产生冗余的HTML代码，但既然标准是这么定的，也只能想办法加以解决，固然现在随着样式表的广泛采用，font已面临寿终正寝，但仍然大量存在，特别在对字体的颜色的设置，使用font标记很方便。栈式管理的主要算法详解：voidhtml_open_font(GtkWidget*widget,char*style_str,char*color_str,char*size_str,inthtml_element,intinsert_to_list)；该函数用于指定当前的字体属性，其参数包括style,color,size,以及改变字体属性的元素的名称，intinsert_to_list用于标记此字体属性是否入栈，通常是入栈的。4.3Netbit实际应用效果及比较下图为Netbitbrowser运行时的界面，所打开的页面源代码如下：<html><body><h1><fontcolor=#FF00FF><b>NetbitBrowserVersion0.0.1Demo</b></font></h1><hr><h4>License</h4><p><fontsize=4color=#0000FF>Thisprogramisnot<b>freesoftware</b>;youcanredistributeitand/ormodifyitunderthetermsofthe<fontsize=5color=FF0000>GNUGeneralPublicLicense</font>aspublishedbytheFreeSoftwareFoundation;eitherversion2oftheLicense,or(atyouroption)anylaterversion.</font><hr><h3>DesignbasedonGTK,bysogoandce!</h3></body></html>以下为主菜单以下为工具条输入网页的URL，即可进行访问。以下为打开文件对话框以下为查看HTML源码对话框下面对比NetbitBrowser，看看其它浏览器查看此网页的效果。以下为KDE浏览该网页的效果以下为GZILLA浏览该网页的效果，GZILLA对字体颜色的处理比较差，只有黑色的字体。对字号的支持也不好。以下为Netscape显示该网页的效果，Netscape默认背景色是灰色。IE查看该网页的效果，字体不同是由于IE设置的默认字体不同。可以看到，在对简单英文网页的支持效果上看，NetbitBrowser，已接近于成熟浏览器的水平，甚至优于一些小型的嵌入式浏览器如GZILLA，Netfront，但在复杂页面的显示上还有较大的差距。可以得出的结论是，NetbitBrowser0.0.1Demo版已经具有了一定的实用价值，但要对其进行完善，工作量还很巨大。对比Netscape，IE的漫长的开发历史和巨大的资金投入，NetbitBrowser的未来依然生死未卜。4.4NetbitBrowser的缺点分析及改进办法基础的GUI设计上存在缺陷：NetbitBrowser目前的页面输出实际上还采用了简单的画图机制，无法在主窗体内放置如按钮、编辑框、单选框等控件，也无法处理页面元素的消息响应，（NetbitBrowser0.0.1-013版已进行了改进），而使用GTK作为开发平台是完全可以实现这些要求的，GZILLA就是最好的实例，它通过对现有控件的组合，开发了自己的文档视图控件，实现了上述功能。但之所以目前没有采用先进的文档视控件，是因为要实现这样