开题报告 opening report verion 2_open report 开题报告-优快云博客

本文档介绍了一个用于解析GUIXML文档的JavaScript解释引擎的设计与实现方案，旨在支持跨平台的图形用户界面构建，特别关注Web环境下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GUIXML解释引擎的JavaScript的设计与实现

开题报告

班级（学号）0413307 姓名田野

指导教师张鹏

一、综述

GUIXML是一种用于描述图形化用户界面构造过程所需应用逻辑的语言，其描述的界面具有设备独立性模式。目前，已经完成了在 Desktop 上SWT与Swing对GUIXML的支持，可以通过自建立 GUIXML 的XML文档生成图形化的 Java Desktop Applications，但是没有针对于WEB上的支持。为了保证GUIXML规范的通用性，还需要设计一个WEB用的GUIXML引擎。(如图1.1)

图1.1 GUIXML当前设计支持架构

WEB用的GUIXML引擎有两个方案。其一是使用Java Applet。Java Applet在程序移植上很容易，但是在用户体验上却十分不理想，因为Applet在解析GUIXML的时候需要占用客户端大量资源，同时也需要更高的用户授权，对用户的终端构成一定安全风险，所以舍弃了这个方案。第二个方案是使用JavaScript制作一个GUIXML的解释引擎，虽然在解析的过程中仍旧要占用一定比例的客户端资源，但相对于Applet来说少了很多，同时，在安全性上，JavaScript仅仅需要的是用户的浏览器授权，如此降低了用户的安全风险。所以采用第二种方案，使用JavaScript构建GUIXML for WEB的解释引擎。

鉴于GUIXML的规范过于庞大，又由于浏览器的限制以及JavaScript自身的能力，使得这个WEB引擎不可能完全支持GUIXML的全部标准，因此在开发WEB用的GUIXML引擎的同时，寻找一个GUIXML在Desktop环境以及WEB环境中都能支持的最小的规范版本。因此本课题的研究意义在于，将 GUIXML 映射为浏览器可以识别的语言（ HTML/XHTML/CSS等），并在其开发过程中，确定 GUIXML 通用性的最小支持范围，从而构建 GUIXML 的 Lite 版本。

JavaScript Engine应用到的规范与技术：

·基于XML的软件构件图元编辑规范--GUIXML

软件构件图元编辑标准，以下简称基于XML的软件构件图元编辑规范（GUI XML），是一种用于描述图形化用户界面构造过程所需应用逻辑的语言，其描述的界面具有设备独立性模式。这里所说的"设备"，意味着个人计算机、多种信息应用设备（例如手持式电脑、桌面电话、蜂窝式电话和PCS电话），以及其他人类可以与之交互的设备。GUI XML是一种说明性的、符合XML规范的语言。为了开发一个用户界面，设计者需要编写一个GUI XML文档，其中包含了适用于最终使用此用户界面的设备的表示风格信息。之后GUI XML将被使用特定的编程语言工具包完成用户界面的构造（例如JFC、SWT等），或者自动映射为目标设备所使用的语言（例如HTML、WML）。 GUI XML的设计目标如下：

- 使得设计者不需要学习针对特定设备的语言和API就可以设计出符合设备要求的UI；

- 缩短针对一系列不同设计开发用户界面的时间；

- 提供了将UI代码与应用逻辑代码相分离的特性；

- 使得非程序员能够设计UI；

- 简化国际化和本地化的工作量；

- 实现了通过网络将UI下载到客户端的高效；

- 有助于强化安全性；

- 实现了对支撑UI技术的扩展。

·HTML/XHTML

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

XHTML是EXtensible HyperText Markup Language的英文缩写，即可扩展的超文本标记语言，它不需要编辑，可以直接由浏览器执行。 XHTML是用来代替HTML的，是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。* 其基于XML的应用，语法更简洁更严紧，也可以说就是HTML一个升级版本。(w3c描述它为'HTML 4。01')。除此之外XHTML和HTML基本相同。

·CSS

CSS是Cascading Style Sheets(层叠样式表)的简称。 CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行(属于浏览器解释型语言)。在标准网页设计中CSS负责网页内容(XHTML)的表现。* CSS文件也可以说是一个文本文件，它包含了一些CSS标记，可以通过简单的更改CSS文件，改变网页的整体表现形式，可以减少我们的工作量。

·JavaScript

JavaScript就是适应动态网页制作的需要而诞生的一种新的编程语言，由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言，在HTML基础上，使用JavaScript可以开发交互式Web网页。如今越来越广泛地使用于Internet网页制作上。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。Netscape公司 Navigator 3.0以上版本的浏览器都能支持 JavaScript程序，微软公司 IE 3.0以上版本的浏览器基本上支持JavaScript。JavaScript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

·AJAX

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。主要包含了以下几种技术Ajax（Asynchronous JavaScript + XML）的定义基于web标准（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）进行动态显示及交互；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHttpRequest 进行异步数据查询、检索；使用 JavaScript 将所有的东西绑定在一起。Ajax应用程序的优势在于：

1。通过异步模式，提升了用户体验

2。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3。 Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、研究内容

研究内容分两个部分：

1.JavaScript（下简称JS）引擎的研究。

2.JS引擎对GUIXML组件的支持。

2.1 JS引擎的研究

GUIXML的JS引擎相当于是GUIXML与WEB APPS的一个接口，在终端用户或者最终页面的干预下被触发，加载GUIXML文档文件以及自身引擎的配置文件，经过引擎的XML解析、配置文件的加载、GUIXML组件分析与组件表的建立、GUIXML属性分析与属性表的建立、翻译解析、拼接HTML/XHTML/CSS等6个主要步骤，最后注入到WEB页面中。如图2.1.1以及2.1.2。

图2.1.1 JS Engine

图2.1.2 JS ENGINE 的内部

从图2.1.1上看出，JS引擎在这里是整个流程的核心部分，一共有3个输入以及1个输出，在3个输入中，有1个接收的是用户或者终端页面的相应，另外2个是接收的是XML文件。在图2.1.2中，可以很清晰的看出这个引擎核心的6步重要工作流程。

2.2 JS引擎对GUIXML组件的支持

经过初步的讨论以及阅读GUIXML规范文档，JS引擎至少可以支持如下GUIXML组件，如表2.2.1。

这里引擎将支持的控件分为两层，其实引擎可以支持更多以及更复杂的控件，那么就会有更多的层来支持这个引擎（图2.2.1），本课题中引擎将仅仅支持两层：第一层也就是最底层控件，如Button等，这一类的控件不需要任何的组合即可使用，而且可以直接解释为相应的HTML代码。第二层控件建立在第一层之上，也就是说，这一类控件需要有部分第一层控件的支持才能够正常的运转。这样设计的好处在于，将复杂的控件分解为简单的控件的组合，降低了控件的升级、复杂控件的配置的难度。对于GUIXML规范的Lite版本来说，表2.2.1表明了GUIXML Lite至少要支持这些控件。在第二层组件中处理比较困难的是Tree组件以及Table组件，Table组件的困难在于，复杂的Table组件本身是一个容器，一个容器相当于多个容器，每一个cell都可以再包含组件，而这些组件还可以是容器。另外，Table容易出现一些错误，比如用户在写GUIXML文档的时候出现了多列的现象等等。Tree本身就是一个很复杂的容器。因为Tree包含了一种更复杂的结构，如何去解释这个结构是下面工作的重点以及难点之一。

表2.2.1 基本支持控件表

控件名称	备注
底层控件（第一层）
BUTTON	BUTTON解释为两种，一种是无逻辑的<BUTTON>，一种是含有处理逻辑的<INPUT>。
TEXTFIELD	解释为HTML的单行文本框<INPUT>标签
LABEL	解释为form的<LABEL>标签
PASSWORDFIELD	解释为密码输入框<INPUT type=password>标签
TEXTAREA	解释为多行文本框<TEXTAREA>标签
COMBOBOX	解释为下拉菜单,<SELECT><OPTION>结构标签
LIST	解释为列表, <SELECT><OPTION>结构标签
RADIOBUTTON	解释为单选按钮，<INPUT type=radio>标签
CHECKBOX	解释为复选按钮，<INPUT type=checkbox>标签
LINK	解释为链接，<A>标签，不过为了支持GUIXML规范，可能会被舍弃
FRAME	解释为层标签<DIV>，考虑使用复合方式实现
DIALOG	解释为层标签<DIV>, 考虑使用复合方式实现
PANEL	解释为层标签<DIV>
IMAGE	解释为图像标签<IMG>
第二层控件（基本）
TABLE	解释为<TABLE><TR>[<TH>]<TD>结构标签，内容标签可能与底层结合
TREE	考虑解释为<DIV>标签组。有待讨论出方案
TAB	解释为<UL><IL><DIV>的HTML结构标签，<DIV>可以相当于Panel等

图2.2.1 控件支持结构图

三、实现方法及预期目标

根据图2.1.1，引擎的实现方案包括两部分：引擎的外部设计实现、引擎内部的设计实现，最后为开发、运行、调试的环境。

3.1 引擎外部的设计实现

引擎的外部实现包含引擎的激活与调用以及WEB PAGES的注入两部分。

3.1.1 引擎的激活与调用

通过一个Function来激活JS engine 工作，这个Function可以被加载到<body>标签中的onload中进行调用或者通过其他的一些链接，比如<a>标签，href=”#” onlick的时候，调用这个Function，从而激活JS engine的解析。同时，加入引擎配置文件，在加载引擎之后，引擎自动开始加载其配置文件，读取相应的配置然后开始对xml文件进行解析。参考图2.1.1与图2.1.2。

3.1.2 WEB PAGES的注入

WEB PAGES注入即为将拼接好的HTML代码或者JS代码写入到WEB PAGES中。因为JS引擎无法生成JS代码，因此这里的JS代码就是一个引擎携带的代码库，保存着组件所需要的JS代码。HTML代码通过Document元素等JS中的基本元素即可方便的调用以及生成。

3.2 引擎内部的设计实现

根据引擎内部的XML解析、配置文件的加载、GUIXML组件分析与组件表的建立、GUIXML属性分析与属性表的建立、翻译解析、拼接等6个主要步骤，本节包含6个部分。

3.2.1 XML解析

XML解析是将从外部加载过来的配置文件以及GUIXML文件分别保存在DOM树中等待下一步的利用，假设配置文件与GUIXML文件各仅有1个文件流入（或者多个GUIXML文件组成一个没有冗余的数据流），那么，在引擎中需要有相应的变量对这两颗DOM树进行保存。如图3.2.1。

图3.2.1 引擎的XML解析流程

3.2.2配置文件的加载

对从XML解析后的CONFIG DOM TREE进行读取，然后将TREE中的内容分别读取到以下两张表里面：

Component表以及Attribute表中。

·Component表

这个表中保存着引擎可以支持的GUIXML组件类型，从Tree中解析出来后直接放入这个1维表即可。示例如表3.2.1。

表3.2.1 引擎支持的表的示例

类型

Button

Frame

Panel

。。。

·Attribute表

每一个组件都有自己的属性，很多组件的属性拥有交集。比如说，button中有value这个属性，textfield中也有value属性。把这些属性抽象出来生成的表，就是Attribute表中的第一种表，basic_attribute表。如表3.2.2所示。

表3.2.2 Basic_attribute表示例

属性

Text-align

position

font

。。。。

表中包含了所有组件都共有的属性，解释的时候，引擎从这些属性中先判断出组件的一些基本信息，把它们按照一定的安排存储到生成的Component表以及Attribute表中。然后，根据每个组件的不同，再找到这些组件不同的属性：例如frame的属性，如表3.2.3所示：

表3.2.3 Frame的属性表示例

Frame

z-index

Top

…

在引擎检索表的时候，首先查basic表，然后再根据生成的组件表的类型来查看相应类型的表。这样做的好处就是在于，如果需要更改、更新或者添加新的属性元素的时候，仅仅需要的是CRUD，而不是需要再次更新所有的表，从而避免了产生大量的资源浪费以及冗余。

这两个表的关联就是通过解析器来完成的，因此在解析的过程中要注意读取的顺序。

关于配置文件的内容：

配置文件一共有两份，如图3.2.2。第一份配置文件存储所有组件的信息，如支持哪些组件，以及这些组件的基本描述信息，如组件的静态CSS属性等等。第二份的配置文件是存储所有的属性信息：一个是存储通用的支持属性，也就是Basic表，另外一些表就是相应类型的配置文件，所以第二份配置文件可能会包含很多XML文件，如何正确的解析这样的文件集是配置文件的一个重点，有待进一步讨论。命名以及管理方法以参考“JAVA年会论文-利用Java实现简单XML数据库方案”中的数据库、数据表管理中的设计方案，这里就不多陈述。

图3.2.2 配置文件

3.2.3 GUIXML组件分析与组件表的建立

对从XML解析后的GUIXML DOM TREE进行读取，然后将TREE中的组件信息内容分别读取到Component表中。

这张表里面存放的是所有组件的名称以及他们的类型，现有两种方案。

第一种方案，如示例:表3.2.4。

表3.2.4 Component表示例

Component名称	类型
Button1	Button
Text1	Textfield
……	……

这里需要说明的是引擎对输入数据的要求：

组件名称是必须的，因为需要通过名称去关联属性表以及其他的一些表，因此这里的名称不允许重复。这个就需要一个良好的IDE工具来对这个问题进行解释分析，或者抛出一个异常，最后生成的表必须是一个干净的表。即为引擎对输入的数据的要求比较严格，不能包含一些带有二义性问题的数据。其中的类型包括基本类型（对应底层基本组件）以及第二层组件（对应第二层基本组件或更多同层组件）类型或者更复杂的类型。通过分析类型，来对其的属性进行分析。

第二种方案的提出

假定，每一个guixml文档都是一个frame。每一个frame都拥有他自己本身的一个name。在读取多文档的时候，引擎需要对frame的域进行保存，如需要知道组件被包含在哪一个容器中。因此提出了第二个方案，也是第一个方案的改进版。更新结构示例如表3.2.5：

表3.2.5 更新的Component表示例

Component名称	类型	从属
Button1	Button	Frame1
Text1	Textfield	Frame1
。。。	。。。	。。。
Frame1	Frame	本身或者其他frame

*第三种方案

此方案抛弃用表格作为设计，采用树形结构来完成表同样的目的。将这些组件按照从属关系放入树形结构中。在表3.2.5中从属一栏中的组件相当于是父容器，组件名称也就是其子容器或者子组件，包含于这个父容器之中。这里将表3.2.5 改为图3.2.3：

Frame1

|-------Button1

|-------Text1

|-------。。。。。。

其他容器

|-------容器组件1

|-------组件1

|-------组件2

。。。。。。。。。。

图3.2.3 Frame1的树形图

3.2.4 GUIXML属性分析与属性表的建立

对从XML解析后的GUIXML DOM TREE进行读取，然后将TREE中的组件信息内容分别读取到Attribute表中。如表3.2.6所示。

表3.2.6 Attribute表示例

Component名称	Attribute	Value
Button1	Value	确定
Text1	Text-overflow	Clip
…	…	…

解释的方法：从组件的名称中查询component表得到组件的类型，然后查询attribute表中的属性，查看是否支持这个属性，如果不支持直接忽略，如果支持，把attribute和value写入到style中。实现上就是一个字符串的拼接。

3.2.5翻译解析

现只考虑到翻译基础控件部分。翻译的规格暂时如下所描述：

Button

<button class=buttonClass name= componentName id= componentName style=buttonStyle> buttonValue </button>

Reset

Submit

Textfield

Label

<label class=labelClass style=labelStyle name=cmpntName id=compntName>labelValue</label>

Passwordfield

Textarea

<textarea rows=rnumber cols=cnumber class=textAreaClass style=textAreaStyle name=cmpntName id=compntName> textAreaValue </textarea>

Combobox and list

Radiobutton

checkbox

*Link

<a href=linkhrefValue class=linkClass style=linkStyle name=compntName id=compntName>linkValue</a>

Frame/Dialog/Panel

Image

*翻译的过程（如图3.2.4）

翻译的过程如同字符串的等价兑换，引擎考虑使用swicth或者if..else..结构对已经输入组件表的控件进行判断，然后读取对应的属性表，从而直接生成相应的代码。

图3.2.4 翻译流程

3.2.6 拼接

将生成的所有代码通过for、while循环或者其他相关操作拼接到一起，最后将这段拼接好的HTML注入到目的WEB PAGE中即可。参考图3.2.4。

3.3 开发、运行、调试环境

·操作系统：

--首选：windows

原因：在windows下可以很简单的开发JS项目，并且可以在firefox以及IE中运行。

其次：solaris

原因：系统环境十分稳定。但缺点是之后firefox而没有IE，这样在IE8B1以下的版本中将可能出现一定的问题。故第二考虑使用solaris操作系统。

·开发工具：

--首选：SciTE

原因：SciTE可以对很多语言支持很好，具备标准的高亮显示，虽然他本身不具备调试功能，但是开发起来上手很容易，而且占用的系统资源极少。

其次：Netbeans

原因：极其强大的一款IDE，但是太强大了导致在windows环境下的效率不是太好。在solaris下的表现十分不错，但是solaris本身不可能支持IE，因此Netbeans作为候选。

·调试、运行工具：

--首选：IE 7 以及 Firefox 2.0.0.12 or later version

原因：IE中自带有一款叫做webdev的toolkit，可以很容易的对JS进行语法分析，在IE8中同样有这类工具，虽然IE现在也不能很准确的报告错误的原因，但是在解析xml文件的时候因为采用了Micorosoft.xmldom这个AXO，所以首选IE，同时也是首选windows的原因； Firefox有更强大的debug工具，而且支持国际化通用标准规范，采用Firefox进行调试可以使得引擎得到更多的浏览器支持。