编译器嵌入式html编辑器的设计和实现毕业设计

嵌入式HTML编辑器的设计和实现

摘要

随着编程技术的日益大众化,普遍化,大量的编程语言被更多的人们所掌握,HTML语言作为一种简单易懂的标签语言更是倍受编码爱好者的青睐。编码语言的普及化增高随之带来的是对于编辑器功能的需求提高。一款好的编辑器不仅要实现最基本的功能将代码语言编译成计算机可识别的机器语言还需要具有舒适友好的编译环境界面和方便的文本处理功能。这样的编辑器有助于提高编码者的编辑效率还能提高初学者继续学习下去的兴趣。因此为了更加方便自己的编码提高自己的编码效率所以自己设计实现了一款简单的可视化HTML编辑器。

编辑器中实现解释标签功能主要是使用了QT中的WebKit技术在该模块中主要有三个类分别为QWebView、 QWebPage和QWebView,它们其中包含的方法就可实现HTML标签的解释功能并可实现网页的逆解析过程可视化界面中实现网页的浏览也是利用了这一技术因此这一技术是本编辑器使用的核心技术。在搭建可视化编辑器的过程中使用了大量QT中封装的类其中最大的一个类是管理布局栈类将水平布局和垂直布局放在其中这样就可较方便的实现不同的布局相互切换这样就可根据编程者的个人喜好去改变界面的布局了。

本论文中重要介绍了项目的研发背景所完成的功能和研发过程重点讲解了主要技术、设计思想、解决方案。

关键词 HTML编辑器 WebKit 可视化界面 设计

Embedded HTML editor design and implementation

Abstract

With the growing popularity of programming techniques , generalization . a lot ofprogramming languages are more people to grasp , HTML language as an easy-to-understand language is much favored by the encoding lovers.The increased popularity ofcoded language is edited and brought demand for improved functionality.A good editor notonly to achieve the most basic function , the code is edited into machine languagerecognizable ; It also need to have a comfortable environment -friendly interface and easy toedit text processing functions. Such editors help increase editing efficiency coding beginnerswho can raise the interest to continue learning forever.Therefore , in order to more easilyencode their ownto improve their coding efficiency, so their design and implementation ofasimple visual HTML editor.

Editor achieved mainly explained labels using the QT WebKit technology, the module hasthree main categories namely QWebView,QWebPage and QWebFrame which containsmethods that they can achieve explain the functionality of HTML tags,and to achieve inverseparsing the page,visual interface is also implemented in Web browsers take advantage of thistechnology, so this technology is the core technology used in the editor.Use the visual editorto build the course in a lot of QT type ofpackage, the largest of which is the management ofa class stack class layout, the horizontal and vertical layout in which the layout, so you canachieve more convenient to switch between different layouts this can be based on thepersonal preferences of the programmer to change the layout of the interface.

This paper describes the development of an important project background, function anddevelopment proces s ,done to highlight the main technical ,design ideas, so lutions.Key words HTMLeditor;WebKit;class;design;

目录

摘要. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .i

Abstract. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .ii

1 引言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1. 1 研究现状. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.2 主要研究的目的及内容. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.3 研究方法及设计思路. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.3. 1 研究方法. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.3.2 设计思路. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

2 应用需求分析与可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2. 1 应用需求分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2.2 运行需求分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2.3 其他需求分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2.4 可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2.4. 1 经济可行性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2.4.2 技术可行性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.4.3 运行可行性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.4.4 时间可行性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.4.5 法律可行性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.5 程序开发步骤. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

3 相关技术简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3. 1 QT Creator简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3.2 WebKit模块详析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3.2. 1 QWebView类. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3.2.2 QWebPage类. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

3.2.3 QWebFrame类. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

3.3 HTML语言介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

4 系统分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

4. 1 程序中使用的类及成员. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

4. 1. 1 类名. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

4. 1.2 QT中的类名. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

4. 1.3 QT函数中的成员函数名及成员变量. . . . . . . . . . . . . . . . . . . . . . . . . . . .10

4.2 基础主控流程图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

4.3 成员槽函数流程图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

4.4 类图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

5 系统设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5. 1 概要设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5.2 系统结构设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5.3 详细设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5.3. 1 可视化主界面设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5.3.2 可视化菜单设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

5.3.3 逻辑代码设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

6 系统调试与测试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

6. 1 程序调试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

6.2 程序的测试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

6.2. 1 测试的重要性及目的. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

6.2.2 测试的步骤. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

6.2.3 测试的主要内容. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

结束语. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

外文原文. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

中文翻译. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59

1 引言

1 . 1 研究现状

编译器设计最近的发展包括首先编译器包括了更加复杂算法的应用程序它用于推断或简化程序中的信息这又与更为复杂的程序设计语言的发展结合在一起。其中典型的有用于函数语言编译的Hindley-M ilner类型检查的统一算法。其次编译器已越来越成为基于窗口的交互开发环境Interac tive De ve lop me nt Enviro nme nt I D E的一部分它包括了编辑器、连接程序、调试程序以及项目管理程序。这样的ID E标准并没有多少但是对标准的窗口环境进行开发已成为方向。另一方面尽管近年来在编译原理领域进行了大量的研究但是基本的编译器设计原理在近20年中都没有多大的改变它现在正迅速地成为计算机科学课程中的中心环节。

现在随着语言的发展编译器也呈现出井喷式的趋势整个编译器市场呈现出百家争鸣的态势。其中有些编译器界面设计精美舒适友好但是功能不够完善有些编译器功能强大但操作过于复杂冗余能作到面面具到的编译器是少之又少更有些商业编译器还需要付费。因此影响了编程技术的普及广度。因此有许多代码程序员开始自己设计并实现符合自己使用习惯的编译器。这种趋势必将继续发展下去。

HTML语言作为一种标签解释类语言在当前发展情况下,很少有专门的编辑器,一般情况下使用记事本工具进行编辑然后保存为ht ml扩展名的文件再使用浏览器打开才能查看编辑结果。这样就造成了过程操作上的繁琐导致程序员的工作效率不高会造成整个项目流程不能顺畅的进行下去。这些都是传统的ht ml编辑过程的弊端。因此本项目主要就是为了解决传统ht ml的编写过程中编辑界面和展示界面分离的弊端 以提高工作效率。

1 .2 主要研究的目的及内容

本课题的主要目的是使HTM L代码的编辑更清晰化透明化便于操作使编辑过程和结果展示处于同一界面之上。通过功能模块的优化组合实现不同的编程细节使编辑过程实现最大程度的便利,并能自动匹配标签,使编辑代码过程出错率降至最低。

使用面向对象的编程理念将编译器的主窗口封装成类。并将编译器的功能抽象为函数封装于主窗口类中。使用QT Creater工具调用Qt封装成的函数去实现可视化的编程并且实现HTM L的正向编译、 网页内容的逆向编译和编写窗口与展示窗口的布局改变。

1 .3 研究方法及设计思路

1 .3. 1 研究方法

随着编程技术的普及开发出功能强大、界面友好舒适且操作简单的HTML编辑器就迫在眉睫了。针对上述问题采用软件工程的开发原理依据软件流程过程规范按照需求分析、概要设计、详细设计、程序编码、测试、软件应用、软件维护等过程开发了一个HTML的编辑器。采用QT Creator作为开发工具基于C++语言并大量使用QT中封装的类及类的成员变量和成员函数保证了程序运行的效率和编译的正确性。

1 .3.2 设计思路

1程序应满足HTML代码的正向解析和逆向解析可以根据编辑者需求改变编辑框和展示框的布局满足熟练编程人员和新手的日常编辑需求并达到操作过程中的

直观方便实用等要求

2系统采用模块化程序设计方法既便于程序功能的各种组合和修改又便于以后新功能的加入和程序的升级

3程序应具备基本的文本编辑功能

4尽量采用代码去完成界面的设计和布局这样有利于界面控件精细化设计更有利于保存界面的美观与完整性有益于去改动升级编译器的外观界面。

2 应用需求分析与可行性分析

改变传统的的HTML编辑过程和展示过程异步的局面是有效提高HTM L语言编辑效率的好方法并且为程序员提供一个舒服适合自己的编辑界面也是提高程序员编辑效率的方法因此此编辑器应具备基本的文本编辑器的功能如改变字体大小、类型、颜色编辑器还需要具有一个特殊功能即展示框浏览器功能还需要具有界面布局的改变功能。

2. 1 应用需求分析

表2-1开发项目软硬件需求表

系统的性能要求通常指系统需要的存储容量以及后援存储重新启动和安全性,运行效率等方面的考虑。

硬件系统环境 Core 5600、 1G MBRAM、 120GBHD。系统运行时对数据的保密性要求不高对一般的数据不要求进行加密。此外对其它软件几乎没有依赖性程序健壮性较好

2.2 运行需求分析

硬件条件酷睿CPU、 512M RAM、 20G硬盘以上的PC机。

软件条件 ubuntu12.04 qt creator以上

2.3 其他需求分析

本系统有较好的可维护性、可靠性、可理解性、效率。易于用户理解和操作。可维护性包括了可读性、可测试性等含义。可靠性通常包括正确性和健壮性。开发过程中在各种矛盾的目标之间作权衡并在一定的限制的条件下经费、时间、可用的软、硬件资源等使上述各方面最大限度的得到满足。

2.4 可行性分析

2.4. 1 经济可行性

经济可行性研究是对组织的经济现状和投资能力进行分析对程序建设运行和维护费用进行估算对程序建成后可能取得的社会和经济效益进行估计。 由于本程序是作为毕业设计由我自己开发的在经济上的投入甚微程序建成之后将为自己和同学编译HTML代码提供很大的方便估算新程序的开发费用和今后的运行、维护费用估

计新程序将获得的效益并将费用与效益进行比较看是否有利。开发、运行和维护费用主要包括

软件开发费用 由自己开发则该项费用可以计入下面的人员费用一项培训费用饭费住宿费消耗品费用无。所有开支都不大只需维持自己的生活所需费用所以经济上是可行的。

2.4.2 技术可行性

技术可行性要考虑现有的技术条件是否能够顺利完成开发工作软硬件配置是否满足开发的需求等。HTML编译器用的是C++开发语言使用Q T c reato r编译环境编译调试也相对简单 当前的计算机硬件配置也完全能满足开发的需求 因此在技术上是绝对可行的。软件方面 由于C++语言是相对底层的面向对象的编程语言且保留有指针这种特殊类型,它们速度快、编写简单、容量大、可靠性能高、价格低完全能满足系统的需求。

2.4.3 运行可行性

对新编译器运行后给现行编译器带来的影响包括编程习惯、编程效率、工作环境等进行估计和评价。同时还应考虑现有编码者使用、新特性的补充分析在给定时间里能否完成预定的程序开发任务等。

运行可行性是对编程习惯的影响编程效率和环境对程序的适应性及编码者对程序新特性的了解学习计划的可行性。当前对于已经形成根深蒂固编码习惯的编码者来说改变编码风格有些困难但有适合自己的新特性产生时也是可以接受的对于新手来说去适应并形成程序的编码习惯是很容易的所以在程序的运行上是可行性的。

本程序的开发使用QT Creator的编译环境主要运用其中的WebK it模块技术实现核心的编译过程。

2.4.4 时间可行性

从时间上看在实训的的时间里学习了相关知识并开发了HTML编译器时间上是有点紧有些功能不够完善且界面也不够美观但大体功能已经都实现通过两个月的设计实现项目基本完成。

2.4.5 法律可行性

①所有技术资料都为合法。

②开发过程中使用的开源开发工具不存在知识产权问题。

③未抄袭任何已存在的HTML编译器不存在侵犯版权问题。

④开发过程中是以开发编译器模型为目的的未涉及任何法律责任。

综上所述本程序的开发从技术上、从经济上、从法律上都是完全可靠的。

2.5 程序开发步骤

一般说来这种程序的开发大致可经过概要设计和详细设计两过程。上述各个过程排列成一个严格的线性开发序列在每个工作过程中均可产生完整的技术文档作为下一阶段工作的指导和依据每一阶段都应对文档进行评审确信该阶段工作已完成并达到要求后才能进入下一阶段 同时在以后的工作中不能轻易改变前面经过评审的成果。

上述开发方式的主要优点是便于开发工作的组织和管理并且可大大降低程序开发的复杂性。 国内外许多程序开发的实例都证明这是一种行之有效的开发方式。

国外曾有人对一些软件项目开发各阶段的工作量进行了统计结果表明在开发过程中各工作阶段所占全部工作量的比重分别达到系统分析系统设计编程模块调试系统调试20% 15% 20% 25% 20%。 由此可见程序编写在开发工作中只占很小比例而调试工作却占整个开发工作量的一半左右因此“系统开发就是编程”的习惯说法显然是片面的。另据统计在建立管理信息系统的三个阶段中总体规划和系统开发阶段的工作量约占整个工作量的2/3而运行、维护阶段要占1/3这说明一个管理信息系统开发后仍应十分重视它的维护工作 以便使程序不断完善并充分发挥其作用。