1、 北京邮电大学毕业设计 嵌入式HTML编辑器的设计和实现 摘要 随着编程技术的日益大众化,普遍化,大量的编程语言被更多的人们所掌握,HTML语言作为一种简单易懂的标签语言更是倍受编码爱好者的青睐。编码语言的普及化增高随之带来的是对于编辑器功能的需求提高。一款好的编辑器不仅要实现最基本的功能，将代码语言编译成计算机可识别的机器语言；还需要具有舒适友好的编译环境界面和方便的文本处理功能。这样的编辑器有助于提高编码者的编辑效率还能提高初学者继续学习下去的兴趣。因此，为了更加方便自己的编码，提高自己的编码效率，所以自己设计实现了一款简单的可视化HTML编辑器。
2、 编辑器中实现解释标签功能主要是使用了QT中的WebKit技术，在该模块中主要有三个类分别为QWebView、QWebPage和QWebView,它们其中包含的方法就可实现HTML标签的解释功能，并可实现网页的逆解析过程，可视化界面中实现网页的浏览也是利用了这一技术，因此，这一技术是本编辑器使用的核心技术。在搭建可视化编辑器的过程中使用了大量QT中封装的类，其中最大的一个类是管理布局栈类，将水平布局和垂直布局放在其中，这样就可较方便的实现不同的布局相互切换，这样就可根据编程者的个人喜好去改变界面的布局了。 本论文中重要介绍了项目的研发背景，所完成的功能和研发过程，重点讲解了主要技术、设计思
3、想、解决方案。 关键词 HTML编辑器； WebKit； 可视化界面； 设计； Embedded HTML editor design and implementation Abstract With the growing popularity of programming techniques , generalization . a lot of programming languages are more people to grasp , HTML language as an easy -to-understand
4、 language is much favored by the encoding lovers. The increased popularity of coded language is edited and brought demand for improved functionality . A good editor not only to achieve the most basic function , the code is edited into machine language recognizable ; It also need to have a comfortabl
5、e environment -friendly interface and easy to edit text processing functions. Such editors help increase editing efficiency coding beginners who can raise the interest to continue learning forever. Therefore , in order to more easily encode their own to improve their coding efficiency , so their des
6、ign and implementation of a simple visual HTML editor. Editor achieved mainly explained labels using the QT WebKit technology, the module has three main categories namely QWebView, QWebPage and QWebFrame which contains methods that they can achieve explain the functionality of HTML tags, and to ac
7、hieve inverse parsing the page, visual interface is also implemented in Web browsers take advantage of this technology, so this technology is the core technology used in the editor. Use the visual editor to build the course in a lot of QT type of package, the largest of which is the management of a
8、class stack class layout, the horizontal and vertical layout in which the layout, so you can achieve more convenient to switch between different layouts this can be based on the personal preferences of the programmer to change the layout of the interface. This paper describes the development of an
9、 important project background , function and development process ,done to highlight the main technical , design ideas, solutions. Key words HTMLeditor; WebKit; class; design; ii 目录 摘要 i Abstract ii 1 引言 1 1.1 研究现状 1 1.2 主要研究的目的及内容 1 1.3 研究方法及设计思路 1 1.3.1 研究方法 1 1.3.2 设计思路
10、 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
11、语言介绍 8 4 系统分析 9 4.1 程序中使用的类及成员 9 4.1.1 类名 9 4.1.2 QT中的类名 10 4.1.3 QT函数中的成员函数名及成员变量 10 4.2 基础主控流程图 13 4.3 成员槽函数流程图 15 4.4 类图 19 5 系统设计 21 5.1 概要设计 21 5.2 系统结构设计 21 5.3 详细设计 21 5.3.1 可视化主界面设计 21 5.3.2 可视化菜单设计 24 5.3.3 逻辑代码设计 33 6 系统调试与测试 35 6.1 程序调试 35 6.2 程序的测试 35
12、 6.2.1 测试的重要性及目的 35 6.2.2 测试的步骤 36 6.2.3 测试的主要内容 36 结束语 39 参考文献 40 致谢 41 外文原文 42 中文翻译 62 1 引言 1.1 研究现状 编译器设计最近的发展包括：首先，编译器包括了更加复杂算法的应用程序它用于推断或简化程序中的信息；这又与更为复杂的程序设计语言的发展结合在一起。其中典型的有用于函数语言编译的Hindley-Milner类型检查的统一算法。其次，编译器已越来越成为基于窗口的交互开发环境（Interactive Develo
13、pment Environment，IDE）的一部分，它包括了编辑器、连接程序、调试程序以及项目管理程序。这样的IDE标准并没有多少，但是对标准的窗口环境进行开发已成为方向。另一方面，尽管近年来在编译原理领域进行了大量的研究，但是基本的编译器设计原理在近20年中都没有多大的改变，它现在正迅速地成为计算机科学课程中的中心环节。 现在随着语言的发展，编译器也呈现出井喷式的趋势，整个编译器市场呈现出百家争鸣的态势。其中有些编译器界面设计精美舒适友好，但是功能不够完善；有些编译器功能强大，但操作过于复杂冗余；能作到面面具到的编译器是少之又少；更有些商业编译器还需要付费。因此影响了编程技术的普及广度
14、因此有许多代码程序员开始自己设计并实现符合自己使用习惯的编译器。这种趋势必将继续发展下去。 HTML语言作为一种标签解释类语言在当前发展情况下,很少有专门的编辑器,一般情况下使用记事本工具进行编辑然后保存为html扩展名的文件，再使用浏览器打开才能查看编辑结果。这样就造成了过程操作上的繁琐，导致程序员的工作效率不高，会造成整个项目流程不能顺畅的进行下去。这些都是传统的html编辑过程的弊端。因此，本项目主要就是为了解决传统html的编写过程中编辑界面和展示界面分离的弊端，以提高工作效率。 1.2 主要研究的目的及内容 本课题的主要目的是使HTML代码的编辑更清晰化，透明化，便于操作，
15、使编辑过程和结果展示处于同一界面之上。通过功能模块的优化组合实现不同的编程细节，使编辑过程实现最大程度的便利,并能自动匹配标签,使编辑代码过程出错率降至最低。 使用面向对象的编程理念，将编译器的主窗口封装成类。并将编译器的功能抽象为函数封装于主窗口类中。使用QT Creater工具，调用Qt封装成的函数去实现可视化的编程，并且实现HTML的正向编译、网页内容的逆向编译和编写窗口与展示窗口的布局改变。 1.3 研究方法及设计思路 1.3.1 研究方法 随着编程技术的普及，开发出功能强大、界面友好舒适且操作简单的HTML编辑器就迫在眉睫了。针对上述问题，采用软件工程的开发原理，依据软件
16、流程过程规范，按照需求分析、概要设计、详细设计、程序编码、测试、软件应用、软件维护等过程开发了一个HTML的编辑器。采用QT Creator作为开发工具，基于C++语言并大量使用QT中封装的类及类的成员变量和成员函数，保证了程序运行的效率和编译的正确性。 1.3.2 设计思路 （1）程序应满足HTML代码的正向解析和逆向解析，可以根据编辑者需求改变编辑框和展示框的布局，满足熟练编程人员和新手的日常编辑需求，并达到操作过程中的直观，方便，实用等要求； （2）系统采用模块化程序设计方法，既便于程序功能的各种组合和修改，又便于以后新功能的加入和程序的升级； （3）程序应具备基本的文本编辑
17、功能； （4）尽量采用代码去完成界面的设计和布局，这样有利于界面控件精细化设计更有利于保存界面的美观与完整性，有益于去改动升级编译器的外观界面。 2 应用需求分析与可行性分析 改变传统的的HTML编辑过程和展示过程异步的局面，是有效提高HTML语言编辑效率的好方法，并且为程序员提供一个舒服适合自己的编辑界面也是提高程序员编辑效率的方法，因此此编辑器应具备基本的文本编辑器的功能如改变字体大小、类型、颜色，编辑器还需要具有一个特殊功能即展示框浏览器功能，还需要具有界面布局的改变功能。 表2-1 开发项目软硬件需
18、求表 2.1 应用需求分析 程序 硬件 处理器: Core i5 M 480 @ 2.67GHz 双核笔记本处理器 内 存：3 GB (DDR3 1333MHz / DDR3 1333MHz ) 硬 盘: WDC WD5000BEKT-60KA9T0 ( 500 GB / 7200 转/分 ) 软件 QT Creator 4.8.1 Ubuntu 12.04 LTS 系统的性能要求通常指系统需要的存储容量以及后援存储，重新启动和安全性,运行效率等方面的考虑。 硬件系统环境：Core 5600、1G MB（RAM）、120GB（HD）。系统运行时对数据的保密性
19、要求不高对一般的数据不要求进行加密。此外，对其它软件几乎没有依赖性，程序健壮性较好 2.2 运行需求分析 硬件条件：酷睿 CPU、512M RAM、20G硬盘以上的PC机。 软件条件：ubuntu12.04 qt creator以上 2.3 其他需求分析 本系统有较好的可维护性、可靠性、可理解性、效率。易于用户理解和操作。可维护性包括了可读性、可测试性等含义。可靠性通常包括正确性和健壮性。开发过程中，在各种矛盾的目标之间作权衡，并在一定的限制的条件下（经费、时间、可用的软、硬件资源等），使上述各方面最大限度的得到满足。 2.4 可行性分析 2.4.1 经济可行性 经济
20、可行性研究是对组织的经济现状和投资能力进行分析，对程序建设运行和维护费用进行估算，对程序建成后可能取得的社会和经济效益进行估计。由于本程序是作为毕业设计由我自己开发的，在经济上的投入甚微，程序建成之后将为自己和同学编译HTML代码提供很大的方便，估算新程序的开发费用和今后的运行、维护费用，估计新程序将获得的效益，并将费用与效益进行比较，看是否有利。开发、运行和维护费用主要包括： 软件开发费用：由自己开发，则该项费用可以计入下面的人员费用一项；培训费用，饭费，住宿费；消耗品费用：无。所有开支都不大，只需维持自己的生活所需费用，所以经济上是可行的。 2.4.2 技术可行性 技术可行
21、性要考虑现有的技术条件是否能够顺利完成开发工作，软硬件配置是否满足开发的需求等。HTML编译器用的是C++开发语言，使用QT creator编译环境编译，调试也相对简单，当前的计算机硬件配置也完全能满足开发的需求，因此在技术上是绝对可行的。软件方面：由于C++语言是相对底层的面向对象的编程语言，且保留有指针这种特殊类型,它们速度快、编写简单、容量大、可靠性能高、价格低，完全能满足系统的需求。 2.4.3 运行可行性 对新编译器运行后给现行编译器带来的影响（包括编程习惯、编程效率、工作环境等）进行估计和评价。同时还应考虑现有编码者使用、新特性的补充，分析在给定时间里能否完成预定的程序开发任
22、务等。 运行可行性是对编程习惯的影响，编程效率和环境对程序的适应性及编码者对程序新特性的了解学习计划的可行性。当前对于已经形成根深蒂固编码习惯的编码者来说改变编码风格有些困难，但有适合自己的新特性产生时也是可以接受的；对于新手来说去适应并形成程序的编码习惯是很容易的，所以在程序的运行上是可行性的。 本程序的开发使用QT Creator的编译环境，主要运用其中的WebKit模块技术实现核心的编译过程。 2.4.4 时间可行性 从时间上看，在实训的的时间里学习了相关知识，并开发了HTML编译器，时间上是有点紧，有些功能不够完善且界面也不够美观，但大体功能已经都实现，通过两个月的设计实现项
23、目基本完成。 2.4.5 法律可行性 ① 所有技术资料都为合法。 ② 开发过程中使用的开源开发工具不存在知识产权问题。 ③ 未抄袭任何已存在的HTML编译器，不存在侵犯版权问题。 ④ 开发过程中，是以开发编译器模型为目的的未涉及任何法律责任。 综上所述，本程序的开发从技术上、从经济上、从法律上都是完全可靠的。 2.5 程序开发步骤 一般说来，这种程序的开发大致可经过概要设计和详细设计两过程。上述各个过程排列成一个严格的线性开发序列，在每个工作过程中均可产生完整的技术文档作为下一阶段工作的指导和依据，每一阶段都应对文档进行评审，确信该阶段工作已完成并达到要求后才能进入下一阶段
24、同时在以后的工作中不能轻易改变前面经过评审的成果。 上述开发方式的主要优点是便于开发工作的组织和管理，并且可大大降低程序开发的复杂性。国内外许多程序开发的实例都证明这是一种行之有效的开发方式。 国外曾有人对一些软件项目开发各阶段的工作量进行了统计，结果表明，在开发过程中各工作阶段所占全部工作量的比重分别达到系统分析：系统设计：编程：模块调试：系统调试＝20%：15%：20%：25%：20%。由此可见，程序编写在开发工作中只占很小比例，而调试工作却占整个开发工作量的一半左右，因此“系统开发就是编程”的习惯说法显然是片面的。另据统计，在建立管理信息系统的三个阶段中，总体规划和系统开发阶段的工
25、作量约占整个工作量的2/3，而运行、维护阶段要占1/3，这说明一个管理信息系统开发后，仍应十分重视它的维护工作，以便使程序不断完善并充分发挥其作用。 3 相关技术简介 3.1 QT Creator简介 Qt Creator的是一个跨平台的IDE（集成开发环境） ，以量身打造的Qt开发人员的需求。是Qt项目的一部分。先进的代码编辑器Qt Creator的重点是提供功能，可帮助新Qt用户启动和运行速度更快，同时也促进经验丰富的Qt开发人员的生产力。用C + + 、 QML和ECMAScript的支持代码编辑器快速的代码导航工
26、具语法高亮和代码完成在您键入静态代码检测和风格的提示支持源代码重构上下文敏感的帮助代码折叠括号匹配和括号选择模式可视化调试器该可视化调试器的C++是知道许多Qt类的结构，从而提高了其显示Qt的数据清楚地能力。此外， Qt Creator的显示从GDB的清晰和简明的方式的原始信息。中断程序的执行。通过该计划的行由行或指令由指令步骤。设置断点。检查调用栈内容，观察家，以及局部和全局变量。GUI设计师集成的GUI布局和形式建造者为C++项目，它允许您快速设计，并使用通过，将在你的应用程序中使用相同的部件屏幕上的形式建立窗体和对话框。形式是全功能的，并且他们可以立即预览，以确保它们的外观和感觉完全按您
27、预期。 3.2 WebKit模块详析 QtWebKit的依赖于QtGui。 QwebView可以用于打开多个网页，而里面具体的网页对象是QWebPage，QWebPage通过mainframe（）方法可以得到。 图3-1 WebKit 3.2.1 QWebView类 QWebView类提供了用于查看和编辑网页的小工具。 QWebView是主要部件组成QtWebView的网页浏览模块。它可以用在各种应用程序中显示从因特网获取的网页内容。一个网站可以用load()函数加载到QWebView类中。像所有的Qt widget控件都需要借助show()来显示。并
28、且setUrl()也可以被用于加载一个网站。如果有完善的HTML内容，也可以使用setHtml()来代替。当视图开始加载时，loadstarted()函数会发送一个信号。每当网络视图中的一个元素正在完成加载时，loadProgress()函数就会发送一个信号，如嵌入图像，脚本等。当视图已经完成加载后，loadFinished()会发出一个信号，返回的参数true或false，表示成功与失败。page()函数返回一个指向网页的对象的指针。可以使用QWebSettings类的成员函数settings()去修改web视图的设置。使用QWebSettings类可以修改如JavaScript和插件等的默
29、认字体，启用或禁用功能。 一个HTML文件的title属性可以用title()访问对应属性。此外，网站还可以指定一个图标icon属性，icon属性可以使用icon()函数获得。如果title和icon属性发生改变时，函数titlechanged()和titlechanged()会发送对应信号。textSizeMultiplier()可以修改在网页视图中显示的整体文本大小。更多的功能，例如重新加载视图，选定的文本复制到剪贴板，或者粘贴到视图，也封装在内部的QAction类的对象内，这些可以通过pageAction()函数返回到QAction类的对象的。这些操作可以通过使用triggerPage
30、Action()函数去触发，这些操作可以直接添加到工具栏或菜单中去。QWebView类维持着这些操作的返回状态，但是允许操作属性的修改，如文本和图标。 一个QWebView类可以通过print()函数打印在QPrinter类中。这个函数被定义为槽函数，并且可以被QPrintPreviewDialog类的paintRequested()函数发送的信号所连接。如果需要提供的网站，允许用户打开新的窗口，如弹出窗口的支持，可以继承QWebView类并且重新实现CreateWindow()函数。 3.2.2 QWebPage类 QWebPage类提供了一个对象来查看和编辑网页文件。 QWebP
31、age有主框架负责网页内容，设置导航的链接和操作的历史。这个类可以和QWebFrame类在一起使用，以提供功能像类QWebView在 a widget-less环境。QWebPage的API与QWebView的 非常相似，例如被提供的常见功能，如action()（QWebView 类的pageAction() 方法）、triggerAction()、findText()和settings()。更多的QWebView类中的函数可以在QWebPage的主框架中，可以通过 mainFrame() 函数找到。例如QWebPage类中的 load()、setUrl()和setHtml()可以使用QWeb
32、Frame类去访问。当网页开始加载时 loadStarted() 函数会发出信号。每当网页中的一个元素正在完成加载时，loadProgress()函数就会发送一个信号，如嵌入图像，脚本等。 当网页内容已经完成加载后，loadFinished()会发出一个信号，独立于脚本执行，返回的参数true或false，表示成功与失败。 3.2.3 QWebFrame类 QWebFrame类表示一个web页面的框架。 QWebFrame表示内部网页中的框架，每个QWebPage对象包含至少一个框架，想要获得就使用QWebPage::mainFrame()函数，额外的框架使用 HTML
33、 or