毕 业 设 计 论 文 ......

 

 

北京信息科技大学

 

毕 业 设 计(论 文)

 

 

 

 

 

 

 

 

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

 

 

    院:         计算机学院             

 

 

    业:      计算机科学与技术          

 

 

学生姓名:  田野      班级/学号 04133/07

 

 

指导老师/督导老师:  张鹏/金铁鹰          

 

 

起止时间:2008 225  2008 620

(以上宋体4号居中)

 

 


         

 

  

 

 

 

    GUIXML,即软件构件图元编辑标准,是一种用于描述图形化用户界面构造过程所需应用逻辑的语言,其描述的界面具有设备独立性模式。为了开发一个用户界面,设计者需要编写一个GUIXML文档,其中包含了适用于最终使用此用户界面的设备的表示风格信息。之后GUIXML将被使用特定的编程语言工具包完成用户界面的构造(例如JFCSWT等),或者自动映射为目标设备所使用的语言(例如HTMLWML),使得设计者不需要学习针对特定设备的语言和API就可以设计出符合设备要求的UI。同时,软件构件图元编辑标准(GUIXML)是构件库标准之一,目前,根据此构件库标准已经完成了Java在桌面上SWTSwingGUIXML的支持引擎,可以通过自建立基于 GUIXML 构建标准的XML文档生成图形化的 Java 桌面应用程序;但是现阶段没有针对于WEB上的支持。为了保证GUIXML规范的通用性,需要设计一个针对WEB的支持GUIXML构建标准的解释引擎。

    本文着重介绍针对WEB的支持GUIXML构建标准的解释引擎的设计与部分实现方案,同时为解析引擎的后期开发进行了简要的说明。

 

 

关键词: GUIXMLJavaScript,解释引擎,设计,WEB,浏览器

 

 

 

 

 

 


 

 

    Abstract  

 

 

    GUIXML,即软件构件图元编辑标准,是一种用于描述图形化用户界面构造过程所需应用逻辑的语言,其描述的界面具有设备独立性模式。为了开发一个用户界面,设计者需要编写一个GUIXML文档,其中包含了适用于最终使用此用户界面的设备的表示风格信息。之后GUIXML将被使用特定的编程语言工具包完成用户界面的构造(例如JFCSWT等),或者自动映射为目标设备所使用的语言(例如HTMLWML),使得设计者不需要学习针对特定设备的语言和API就可以设计出符合设备要求的UI。同时,软件构件图元编辑标准(GUIXML)是构件库标准之一,目前,根据此构件库标准已经完成了Java在桌面上SWTSwingGUIXML的支持引擎,可以通过自建立基于 GUIXML 构建标准的XML文档生成图形化的 Java 桌面应用程序;但是现阶段没有针对于WEB上的支持。为了保证GUIXML规范的通用性,需要设计一个针对WEB的支持GUIXML构建标准的解释引擎。

    本文着重介绍针对WEB的支持GUIXML构建标准的解释引擎的设计与部分实现方案,同时为解析引擎的后期开发进行了简要的说明。

 

 

 

Keywords:  GUIXMLJavaScript,解释引擎,设计,WEB,浏览器

 

 

 

 

    

 

 

 

 


 

   

 

摘要     …………………………………………………………………………………………………I

Abstract  ………………………………………………………………………………………………II

第一章  概述...................................................... 1

1.1 背景介绍.................................................................... 1

1.2 GUIXML 标准介绍............................................................. 1

1.3 课题介绍.................................................................... 1

1.4 相关技术介绍................................................................ 2

1.4.1 HTML/XHTML........................................................... 2

1.4.2 CSS.................................................................. 3

1.4.3 JavaScript........................................................... 3

1.4.4 AJAX................................................................. 3

1.4.5 XML.................................................................. 3

1.4.6 Xpath................................................................ 4

第二章  总体设计.................................................. 5

2.1 引擎的研究与当前设计架构.................................................... 5

2.1.1 引擎的研究........................................................... 5

2.1.2 当前的设计架构....................................................... 6

2.2引擎处理总体流程............................................................ 6

2.3引擎当前架构扩展设计方案.................................................... 7

2.3.1 配置文件方案......................................................... 7

2.3.2 浏览器支持.......................................................... 10

2.3.3 接口扩展方案........................................................ 11

2.4引擎后期总体架构设计....................................................... 12

第三章  详细设计................................................. 13

3.1 引擎内部详细处理流程....................................................... 13

3.1.1 读取(Load........................................................ 13

3.1.2 解析(Parse....................................................... 14

3.1.3 分析(Analyze..................................................... 15

3.1.4 翻译(Translate................................................... 16

3.1.5 注入(Inject...................................................... 17

3.1.6 响应(Action...................................................... 17

3.2 关键引擎控件............................................................... 18

3.2.1 框架窗口(Frame................................................... 18

3.2.2 按钮(Button...................................................... 19

3.2.3 列表、下拉框(List & Combo........................................ 20

3.2.4 单选、复选按钮组(RadioButton & CheckButton....................... 21

3.2.5 图片(Image....................................................... 21

3.2.6 超链接(Hyperlink................................................. 22

3.2.7 数据面板(DataPanel............................................... 22

3.2.8 文本框、密码框(TextField & Password.............................. 22

3.2.9 标签(Label....................................................... 23

3.2.10 文本域(TextArea................................................. 23

3.3 引擎内部行为............................................................... 23

3.3.1 显示与隐藏.......................................................... 23

3.3.2 拖动与活动焦点响应.................................................. 25

3.3.3 数据表格............................................................ 27

3.4 引擎后期内部扩展处理流程设计方案........................................... 29

3.4.1 配置文件处理........................................................ 29

3.4.2 更新解析方法........................................................ 30

3.4.3 异常................................................................ 30

3.5 三种高级控件设计方案....................................................... 30

3.5.1 标签面板(Tab..................................................... 31

3.5.2 简单树(Tree...................................................... 34

3.5.3 简单表格(Table................................................... 34

3.6 维护....................................................................... 34

3.6.1 版本控制与版本维护.................................................. 34

3.6.2 分发................................................................ 34

第四章  引擎成品演示............................................. 35

4.1 演示....................................................................... 35

4.2 GUIXML文件内容............................................................ 37

4.3 数据XML文件内容........................................................... 43

4.4 用户自定义事件............................................................. 44

结束语.......................................................... 46

参考文献......................................................... 47

附录............................................................ 48

附录1 用户手册 BETA.............................................. 48

Chapter 1 A GUIXML file............................................ 49

1.1 Structure of GUIXML........................................................ 49

1.1.1 Main Body Containers................................................. 49

1.1.2 DataModel and Flavor In Solution....................................... 49

1.1.3 Forms in Solution..................................................... 50

1.1.4 Reaction in Solution................................................... 52

1.2 A well-formed GUIXML file.................................................. 53

Chapter 2 Properties of Components................................. 54

Chapter 3 Preload HTML file......................................... 56

3.1 Preload Codes.............................................................. 56

3.2 Custom Codes............................................................... 57

3.2.1 in the scope of <head>................................................ 57

3.2.2 in the scope of <body>................................................ 57

Chapter 4 Custom events........................................... 58

4.1 Function Naming............................................................ 58

4.2 Engine Interfaces.......................................................... 59

附录2 引擎更新列表............................................... 60

 

 

 

 

 

 

 

 


第一章  概述

1.1 背景介绍

    本课题属于国家863科研项目的软件生产线展示与解释部分。此科研项目现阶段分为构件库的扩展、工具与数据的抽取分析、Eclipse的集成以及过程引擎4个部分,主要目的是通过构件库标准进行软件资源库的构建与转换,并将这些构件存入国家资源库,为软件生产线提供组件;同时通过相对应的解析引擎生成所需要的软件。软件构件图元编辑标准(GUIXML)是构件库标准之一,目前,根据此构件库标准已经完成了Java在桌面上SWTSwingGUIXML的支持引擎,可以通过自建立基于 GUIXML 构建标准的XML文档生成图形化的 Java 桌面应用程序;但是现阶段没有针对于WEB上的支持。为了保证GUIXML规范的通用性,需要设计一个针对WEB的支持GUIXML构建标准的解释引擎。

1.2 GUIXML 标准介绍

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

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

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

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

使得非程序员能够设计UI

简化国际化和本地化的工作量;

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

有助于强化安全性;

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

1.3 课题介绍

本课题基于软件构件图元编辑标准(下均简称GUIXML)。在原有的基于JavaGUIXML的支持下,设计并实现基于WEBGUIXML的支持引擎,在WEB浏览器中实现GUIXML的应用 (如图1.1)

 

1.1 GUIXML当前设计支持架构

 

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

鉴于GUIXML的规范过于庞大,又由于浏览器的限制以及JavaScript自身的能力,使得这个WEB引擎不可能完全支持GUIXML的全部标准,因此在开发WEB用的GUIXML引擎的同时,寻找一个GUIXML在桌面环境以及WEB环境中都能支持的最小的规范版本。

本课题的研究意义在于,将 GUIXML 映射为浏览器可以识别的语言( HTML/XHTML/CSS等 ),并在其开发过程中,确定 GUIXML 通用性的最小支持范围,从而构建 GUIXML Lite 版本。

1.4 相关技术介绍

    本节介绍引擎设计中使用到的相关技术以及这些技术的介绍。

1.4.1 HTML/XHTML

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

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

1.4.2 CSS

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

1.4.3 JavaScript

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

1.4.4 AJAX

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

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

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

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

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

1.4.5 XML

XMLeXtensible Markup Language的缩写。扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用。

XML的前身是SGMLThe Standard Generalized Markup Language),是自IBM60年代就开始发展的GMLGeneralized Markup Language

HTML一样, XML (可扩展标识语言)是通用标识语言标准(SGML)的一个子集,它是描述网络上的数据内容和结构的标准。尽管如此,XML不象HTMLHTML仅仅提供了在页面上显示信息的通用方法(没有上下文相关和动态功能) XML则对数据赋予上下文相关功能,它继承了SGML的大部分功能,却使用了不太复杂的技术。

标签由包围在一个小于号(<)和一个大于号(>)之间的文本组成,例如<tag>。起始标签(start tag)表示一个特定区域的开始,例如<start>;结束标签(end tag)定义了一个区域的结束,除了在小于号之后紧跟着一个斜线(/)外,和起始标签基本一样,例如</end>SGML还定义了标签的特性(attribute),它们是定义在小于号和大于号之间的值,例如<img src="picture.jpg">中的src特性。

1.4.6 Xpath

XML路径语言(Xpath) 是为寻址一种XML文件的一部分的一种表述语言,或基于一个XML文件内容的计算值(串、数值或布尔值)。 Xpath语言基于XML文件的一个树状演示图,和在这个树的周围提供导航功能,以多种标准选择结点。在通常的使用中(尽管不是官方的标准),一个 Xpath路径表达经常简单地记作XpathXPath 是努力给 XSL 转换和 XPointer的共享功能提供一个共用的句法及语义的结果。XPath的主要的目是用于对 XML文档元件寻址。在支持这个主要目的的同时,它也为字符串,数字和布尔的操作提供了基本手段。XPath 使用简明的、非 XML 句法以便於在 URIs XML 属性值以内使用 XPathXPath XML 文档的抽象的、逻辑的结构而非它的表面句法进行操作,XPath 的名字源于它在 URL 中用作对 XML 文档的层次的结构进行导航一个路径标志。除了用做寻址外,XPath 也被设计成以便它有能被用于匹配的一个自然的子集(测试一个节点是否匹配一个模式);XSLT中描述了 XPath 在这方面的使用。XPath 将一个 XML 文档建模成为一棵节点树,有不同类型的节点,包括元素节点,属性节点和正文节点。XPath 定义了一种方法来计算每类的节点的字串值。一些节点的类型也有名字。XPath 充分支持 XML 命名空间。这样,节点的名字被建模成由一个局城部分和可能为空的命名空间 URI 组成的对;这被称为扩展名。

XPath的主要语法构件是表达式,一个表达式匹配产生式 Expr,一个表达式被求值评估产出一个对象,该对象有下列 4 种基本的类型之一:

    节点集合(无序的、无重复的节点集合)

    布尔(真或假)

    数字(一个浮点数字)

    字符串(UCS 字符的顺序)

表达式求值发生与上下文有关。XSLT XPointer 分别地指定了上下文怎样在 XSLT XPointer 使用 XPath 表达式。上下文组成包括:

    一个节点([定义:上下文节点])

    一对非零正整数([定义:上下文位置]和[定义:上下文大小])

    一个变量绑定的集合

    一个函数库

    表达式范围内的命名空间声明的集合

第二章  总体设计

  本章主要介绍GUIXMLJavaScript引擎的总体设计方案,方案包括以下两部分:

    1、已实现部分,包含引擎现阶段设计架构、总体处理流程等

    2、已设计部分,包含引擎后期架构设计、引擎架构扩展设计方案等

2.1 引擎的研究与当前设计架构

2.1.1 引擎的研究

要完成这个引擎,首先要明白这个引擎的制作目的是什么,以及引擎的输入输出接口或者格式。在本课题中,引擎相当于是GUIXMLWEB 应用程序的一个接口,在终端用户或者最终页面的干预下被触发,加载完整格式的GUIXML文档文件以及完整格式的数据XML文件(引擎的入口格式),经过引擎的XML解析、数据文件的加载、GUIXML组件分析与组件表的建立、GUIXML属性分析与属性表的建立、翻译解析、拼接HTML/XHTML/CSS6个主要步骤,最后注入到WEB页面中(引擎的出口格式)。如图2.1

 

2.1 JS Engine

 

    综上所述,概括引擎的目的就是将GUIXML代码翻译为标准的HTML或者XHTML代码后,交给浏览器进行后续处理。这就是引擎主要处理的事情。

 

 

 

2.1.2 当前的设计架构

从图2.1上看出,JS引擎在这里是整个流程的核心部分,一共有3个输入以及1个输出,在3个输入中,有1个接收的是用户或者终端页面的相应,另外2个是接收的是XML文件。在图2.2中,可以很清晰的看出这个引擎核心的当前的设计架构。

 

 

2.2 引擎当前的设计架构

 

·解释器(PARSER

    解析器是引擎输入的重要部分,其目的是将输入的XML文件,包括GUIXML文件以及数据XML文件,转换到DOM树,然后将数据XML文件通过“名称DOM树”的形式储存在内存中,将GUIXML文件通过字符串分析方式以及XPATH方式,存储到指定的内存另开辟的部分中。

 

·分析器(ANALYZER

    分析器是引擎处理的重要部分,其目的是处理已经放入内存的这些数据。如果是GUIXML数据,也就是已经生成好的字符串或者经过XPATH后的数据结果,将其字符串进行彻底分析后,把组件以及属性分开存放在指定的数据表中,在处理过程中会涉及到数据XMLDOM的提取,所以分析器还承担一部分的数据提取的任务。

 

·翻译器(TRANSLATOR

    翻译器和分析器是相互进行的,翻译器是引擎输出的重要部分,其目的主要是生成HTML代码,并对这些代码进行重组,最后放入一个指定的代码池中。注入不属于翻译器的工作范围,翻译器会直接返回这个代码池,交予preload()模块继续处理。

 

·其他引擎模块

    当然,引擎还包含了其他的模块没有包含在图2.2中,他们是:

    -- 样式模块

     比如拖动、显示与消失等引擎默认的功能。

    -- 自定义模块

     用户自定义的功能,比如相应数据XMLDOM 的读取等等。

2.2引擎处理总体流程

    当前版本引擎的处理流程为以下6个步骤:加载完整格式的GUIXML文档文件以及完整格式的数据XML文件,经过引擎的XML解析、数据文件的加载、GUIXML组件分析与组件表的建立、GUIXML属性分析与属性表的建立、翻译解析、拼接HTML/XHTML/CSS,最后注入到WEB页面中,从而构成一个完整的引擎核心处理流程。如图2.3所示。

   

 

 

2.3 引擎的处理流程

 

    各个模块的详细流程设计以及实现请参见详细设计相关章节。

2.3引擎当前架构扩展设计方案

    该部分介绍了由于时间问题而没有实现的引擎架构设计方案。

2.3.1 配置文件方案

    引擎可以通过相应的XML配置文件进行配置。配置文件分为两种,一种为组件配置,另一种为属性配置。属性配置中分为:基础属性以及特定属性,如图2.4

 

2.4 配置文件

·组件配置

    组件配置包含可被引擎识别的组件名称以及组件的一些基本信息。组件的基本信息为可选内容,在解析的过程中相当于代码中的注释选项。在组件配置文件中,配置结构如下(代码2.1):

 

代码 2.1 组件配置文件内容结构

<configuration>

<components>

<component name = component type/>

<component name = component type/>

     

      </components>

</configuration>

 

    组件的配置信息在引擎加载XML文件(GUIXML文件、数据XML文件以及配置文件)的时候跟随配置文件一同被加载,属于必加载项之一。在引擎加载后,组件的配置信息将储存在特定的列表中。解析GUIXML文件的过程中,引擎会对GUIXML文件所生成的DOM树的组件部分进行比对,发现是否有不合理的组件定义,如果有,则抛出错误信息,同时结束引擎,否则,继续进行分析,直到全部组件加载解析完毕。

 

   

·属性配置

    属性配置是一个XML文件集。它包含三种文件:目录文件、基础属性文件以及特定属性文件。

 

 

2.5 属性配置文件集结构

 

-         目录文件

目录文件中包含基础属性文件的文件路径以及特定属性文件的文件路径,其文件结构定义如下(代码2.2):

 

代码2.2 目录文件内容的结构

<configuration>

   <basic>

       <file name = DOM Name path= xml file path/>

   </basic>

   <specific>

       <file name = DOM Name type = component type path = xml file path/>

<file name = DOM Name type = component type path = xml file path/>

   </specific>

</configuration>

 

<basic>标签中只能包含一个<file>标签,其中,path属性为必填属性,是基础属性文件的路径,name为选填;在<specific>标签中可以包含一个或者多个的<file>标签,type是特定属性文件的组件类型,内容不能重复,如果重复,以第一次所查到的路径为主,是必填属性,path属性也是必填属性,包含特定属性文件的路径信息,name属性为选填。

 

   

-         基础属性

基础属性包含所有组件共有的默认属性,比如字体大小,字体类型等。这里的属性表示的不是属性的值,而是可被引擎识别的属性的名称,包括下面的特定属性也是如此。基础属性的结构定义如下(代码2.3):

 

代码2.3 基础属性文件的内容结构

<configuration>

<basic>

<attribute name= attribute name/>

<attribute name= attribute name/>

</basic>

</configuration>

 

    <basic>标签中可以包含一个或多个的<attribute>标签,每个标签中包含name属性,必填项目,name为属性的名称,在辨别属性的时候首先辨别这些基础属性,而后在查询特定属性。

 

-         特定属性

特定属性包含每个不同嘴尖的特有属性,特定属性是一个文件集,其文件路径和类型名称的定义以及关联在目录文件中。特定属性的结构定义如下(代码2.4):

 

代码2.4 特定属性文件的内容结构:

<configuration>

  <component type= component type/>

<specific>

<attribute name= attribute name/>

<attribute name= attribute name/>

</specific>

</configuration>

 

    首先在<component>标签中设置这个属性文件的类型:type属性,必填选项,然后在<specific>标签中添加属性<attribute>,一个<specific>标签中包含一个或多个<attribute>标签,每个<attribute>标签均包含name属性,属性为该组件特定的属性名称。

 

加载顺序以及分析顺序(图2.6

    配置文件的加载顺序如下:

·加载文件目录

·分别加载基础属性以及特定属性文件

·建立基础属性列表以及特定属性列表

    配置文件分析顺序如下:

·比对基础属性表

·根据组件类型比对特定属性表

 

2.6 加载顺序与分析顺序

 

    经过配置方案扩展之后,引擎架构如图2.7所示。

 

 

2.7 扩展配置文件后的引擎架构

 

2.3.2 浏览器支持

    当前版本的引擎完全支持微软IE浏览器版本7或更高,部分支持Firefox以及Opera相关版本。

当前问题

Firefox:在支持Firefox以及Opera,也就是Mozilla核心的浏览器的时候,无法正确处理Xpath

Safari:没有相关文档指明SafariXMLDOM接口。

 

当前趋势

现今,Windows已经不再成为普通PC用户电脑上唯一的操作系统,UbuntuRedhatDebian等这些Unix-like的操作系统,MAC系列的苹果系统以及FreeBSDSolaris等这些Unix系统渐渐的进入了用户级操作系统的行列。在非Windows操作系统下,这些操作系统无法支持IE浏览器,Unix系统以及Unix-like系统大多数支持Mozilla核心的浏览器,苹果的系统支持Safari核心浏览器。

引擎基于JavaScriptJavaScript基于W3C以及浏览器。也就是说,引擎的支持与浏览器对JavaScript的支持十分相关,兼容性的问题也由于不同的浏览器中不同的JavaScript支持而变得十分的困扰。

解决方法

当前还没有一个明确的方式来解决这个兼容性问题,只能等待更高版本的浏览器支持或者期望等到浏览器的标准统一。引擎会根据浏览器的支持来进行更新。在当前的版本中,引擎在进行去除所有数据处理模块的修改后可以很好的支持Firefox,但同样,在这些浏览器中对于CSS样式列表的解释也有一定的区别,这个问题已经通过CSS样式列表重载覆盖的性质解决。

2.3.3 接口扩展方案

    所谓接口扩展,就是如何让用户更方便的调用引擎内部的功能。在当前的引擎中提供了一个自定义JavaScript的模块,目的就是让用户,也就是开发者自己通过相应的命名方式等自行开发自己需要的模块,然后使用GUIXML中的REACTION进行调用。

    在后期,引擎可以为这些自定义模块继续提供相应功能的接口,来满足开发者的需求以及减轻开发者在开发的压力与负担(图2.8)。

 

 

2.8 引擎与自定义JavaScript模块的接口图示

 

接口的类型

引擎考虑提供以下类型的接口:

·数据模型接口

·数据处理接口

·样式接口

·行为处理接口

 

数据模型接口(Data Model Interface

    该接口提供了数据XML文件的DOM接口名称,使得开发者可以更快的调用数据XMLDOM,而不用重复使用DOM方法加载DOM

   

数据处理接口(Data Processing Interface

    该接口提供了数据处理过程的方法,包括:

    ·数据的增删改查(CRUD

    ·数据表的显示与更新

    ·数据的重载

 

样式接口(CSS Interface

    该接口提供了组件样式处理的方法,开发者可以通过这些方法简单的修改指定组件的样式。接口通过处理各个组件的Style属性来完成这一个功能。

 

行为处理接口(Action Processing Interface

    该接口提供了组件的基本行为,这些行为可能由用户提供,也可能由GUIXML分析得出。如果要通过GUIXML分析,则需要更好的IDE支持。

 

    经过接口扩展后,引擎架构如下图所示(图2.9):

 

2.9 接口扩展后的引擎架构

 

2.4引擎后期总体架构设计

 

2.10 引擎后期总体架构设计图

 

 

    在经过引擎架构扩展后,引擎在后期同时追加错误处理、多GUIXML处理等模块,如图2.10。在引擎后期可以支持格式不完整的GUIXML文件以及数据XML文件,同时引擎将对数据XML嵌入以及命名空间提供支持。同时,如果对于有错误的文件,包括三种XML文件输入,引擎都将对其相应的错误进行针对性的错误处理以及上报。

 

组件架构(图2.11

 

2.11 控件架构示例

 

    控件架构采用金字塔的形式进行组装,即第二层组件能够包含第一层的所有组件,但第三层不能被第二层所包含,以此类推。

 

第三章  详细设计

  本章主要介绍GUIXMLJavaScript引擎的详细设计方案,方案包括以下两个部分:

 

1、已实现部分,包括引擎现阶段引擎内部详细处理流程设计实现,控件设计实现等

2、已设计部分,包括引擎后期内部扩展处理流程设计方案,高级(High-Level)控件设计等

 

3.1 引擎内部详细处理流程

    处理流程的设计实现总体根据图2.3

3.1.1 读取(Load

    读取的目的是将外部XML文件,包括GUIXML文件以及数据XML文件加载到内存中,并等待解析。在内存中,这些XML文件将以DOM树的形式储存,GUIXML文件将储存在一个特定的内存区域,数据XML文件将存储在一个DOM集合中,并通过数组将数据XML名称与DOM进行关联(图3.1)。

    在读取的过程中会涉及到关于浏览器的支持问题,IEMozilla核心处理XML的方式不同,所以要根据浏览器的不同进行不同方式的加载。在后期的引擎当前只能兼容IE而无法兼容Mozilla核心的浏览器,其原因是Mozilla核心对于Xpath的处理和IE的处理十分不同,在实现上无法用相同的代码来完成相应的功能,以及Mozilla核心的浏览器暂时无法更好的支持Xpath。在读取中主要是要处理兼容性的问题,不过,这可能需要等待浏览器的更新或者浏览器规范统一后才能真正解决这个兼容性的问题。

 

 

 

3.1 读取处理过程

 

3.1.2 解析(Parse

    这里,解析部分主要处理的是GUIXML的部分。引擎采用了两种解析的方法进行解析:

·解析字符串方法

·Xpath方法

 

    解析字符串的方法,就是分析DOM树后将树中相应的属性以及属性值通过特殊字符串拼接的方法生成一段特殊的DOM树字符串,然后通过字符串匹配的方法,将这些属性以及属性值写入对应的数组,也就是属性表(图3.2)。引擎大部分应用的是这种方法,但是这个方法有一点不足,因为通过特殊字符串进行拼接,当属性或者属性值也包含相应的特殊字符或字符串的时候,解析将失败。但由于时间的问题,这个方法仍旧应用在当前的引擎中,不过在将来的版本中,这个方法将被去除。

 

 

3.2 解析字符串方法

 

    Xpath方法是通过Xpath路径的方式将属性与属性值提取出来。这个方法的好处是不会发生解析字符串方法中出现的字符问题,并且在代码上,会减少代码量,同时减少循环次数以及代码冗余长度。当前引擎中<reaction>的解析已经应用这个解析方法进行行为响应表的建立(图3.3)。在将来的版本中会考虑应用这种方法来读取GUIXMLDOM树,应用在<forms><flavor>以及<datamodel>等标签分析中。在扩展上,应用Xpath方法进行解析可以更加方便的进行代码的重构以及重写,对于在开发来说Xpath是一个绝对优于解析字符串的方法。但Xpath仍旧有他的一个缺点:缺少Mozilla核心的支持。目前IE可以很完美的支持Xpath,但在Mozilla核心中处理Xpath并不容易。

 

3.3 Xpath解析方法(加粗部分为当前引擎已采用部分)

 

3.1.3 分析(Analyze

    分析的过程与解析的过程是相互交替的。也就是说,当前引擎的解析过程中是带有分析过程的,通过分析,将不同种类的属性进行分类,并与其属性值放在相应的属性表中,由于思路十分简单,并且在3.1.2中也有部分图示,如图3.3,故在这里不做过多陈述。

    分析模块还对属性重载进行控制。也就是说,如果用户在<flavor>中定义了属性,那么在<forms>中如果进行了重载,那么,分析模块将对这一部分的信息的相应的属性值进行修改或者添加。对于样式属性重载,引擎通过HTMLStyle标签属性的覆盖特性进行重载的处理;对于一些相关组件或控件信息的属性,比如控件显示的名称等等,将通过属性值直接覆盖的方法进行处理。

 

 

3.4 分析模块中的属性重载控制

 

3.1.4 翻译(Translate

    引擎根据已生成好的数据表,也就是相应的数组,进行翻译过程,将这些表格翻译成HTML代码。在这里,简要说一下表格的设计。

 

表格的设计

当前引擎对从XML解析后的GUIXMLDOM进行读取后,将树中的组件信息内容读取到组件表以及属性表中。组件表中存放的是所有组件的名称,类型以及从属关系(示例如表3.1)。

 

3.1 组件表示例

组件名称

类型

从属

Button1

Button

Frame1

Text1

Textfield

Frame1

……

……

……

Frame1

Frame

本身或者其他frame

 

    属性表中存放所有组件的属性名称以及属性的值,示例如表3.2

 

3.2 属性表示例

组件名称

属性

属性值

Button1

Text

确定

Text1

Text-overflow

Clip

……

……

……

 

在这里,引擎假定每一个Frame都拥有他自己本身的一个名称,这个名称在这个GUIXML文档中是独立且唯一的。所以,组件名称是必须的,因为需要通过名称去关联属性表以及其他的一些表,因此这里的名称不允许重复。当前版本的引擎对输入的数据的要求比较严格,不能包含一些带有二义性问题的数据,所以对待GUIXML的文档的要求比较苛刻。类型,包括基本类型(对应底层基本组件)以及第二层组件(对应第二层基本组件或更多同层组件)类型或者更复杂的类型,在当前引擎中仅仅处理了基本类型组件,更高级的组件在更新引擎解析方法后进行,因为在进行更新解析方法后,引擎的翻译部分也需要重写。

 

解释的方法

从组件的名称中查询组件表得到组件的类型,然后查询属性表中的属性,查看是否支持这个属性,如果不支持直接忽略,如果支持,把属性和属性值写入到HTMLStyle中,如果这个属性是相关组件的,那么将这个值直接覆盖引擎中相对的变量。

 

翻译过程

    翻译的过程也就是HTML代码的拼接,在引擎的basic_comp.js模块中定义了基本组件的拼接及其实现代码,这样,引擎自己本身提供了一套翻译函数,返回一段HTML代码。再通过循环拼接的方式,最终拼接为一段完整的HTML代码。翻译函数的调用通过组件类型进行判断分析后选择,翻译函数的参数通过对属性表的分析以及重载分析,最后填入相应的参数位置上。也就是说,在翻译过程中同样需要分析的过程。

    返回的这段HTML代码,也就是引擎在分析GUIXML代码的过程中最后返回的值。(图3.5

 

3.5 翻译过程

 

3.1.5 注入(Inject

    注入是引擎最后需要做的事情,在引擎返回一个HTML代码之后,在Preload函数中将有一个对应的变量接收这段HTML代码,通过标准JavaScript中对div对象的innerHTML属性进行赋值的方法,注入到浏览器中(如图3.6)。

 

 

3.6 简明注入过程

 

3.1.6 响应(Action

    引擎通过自定义方法进行相应。当前引擎仅支持Button的事件响应。响应事件通过<reaction>分析得到并进行关联,在用户点击按钮时候,引擎调用相应的函数进行相应(图3.7)。

 

 

3.7 相应过程

3.2 关键引擎控件

3.2.1 框架窗口(Frame

    框架窗口是所有控件的容器,相当于JavaAWTFrame或者SwingJFrame。窗口包含窗口的名称、关闭按钮以及一个容器显示部分,即窗口内容(图3.8)。

 

 

3.8 窗口示例

 

    调用函数为bc_component_frame,参数包括窗口名称,标题名称,窗口样式,标题样式,内容样式以及内容。其中,窗口的名称(定义如代码3.1),标题名称以及内容是必填项目,样式根据CSS默认定义即可。如果需要更新样式,仅仅需要对当前的样式进行重载即可。

 

代码3.1 窗口函数定义

function bc_component_frame(frameName,title,windowStyleString,titleStyleString,contentStyleString,content)

 

    窗口是当前引擎唯一需要CSS样式定义的控件(代码3.2)。

 

代码3.2窗口CSS样式表定义

div.window {  /* Specifies size and border of the window */

      position: absolute;            /* The position is specified elsewhere */

      width: 400px; height: 300px;   /* Window size, not including borders */

      border: 1px outset gray;       /* Note 3D "outset" border effect */

  }

 

  div.titlebar {  /* Specifies position, size, and style of the titlebar */

      position: absolute;      /* It's a positioned element */

      top: 0px; height: 18px;  /* Titlebar is 18px + padding and borders */

      width: 398px;            /* 290 + 5px padding on left and right = 300 */

      background-color: #aaa;  /* Titlebar color */

      border-bottom: groove gray 2px;  /* Titlebar has border on bottom only */

      padding: 3px 5px 2px 5px;  /* Values clockwise: top, right, bottom, left */

      font: bold 11pt sans-serif;       /* Title font */

  }

 

  div.content {  /* Specifies size, position and scrolling for window content */

      position: absolute;         /* It's a positioned element */

      top: 25px;                  /* 18px title+2px border+3px+2px padding */

      height: 268px;              /* 300px total - 25px titlebar - 10px padding*/

      width: 398px;               /* 300px width - 10px of padding */

      padding: 5px;               /* Allow space on all four sides */

      overflow: auto;             /* Give us scrollbars if we need them */

      background-color: #ffffff;  /* White background by default */

      font: 9pt;

}

 

    不同的浏览器对于CSS样式表的处理也是不一样的,IE核心和Mozilla核心在计算窗口边缘时候会有一定的误差。引擎在这里采用样式重载的方法进行修复,根据不同的浏览器进行不同的样式重载来解决问题。更好的方法就是等待浏览器的统一才能解决,但这还需要浏览器制造商间的协调。实现代码如3.3

 

代码3.3 浏览器CSS样式表处理

if (window.navigator.userAgent.indexOf("MSIE")>=1)

    {

      //IE

      obj.innerHTML+= ("<style>div.titlebar{width: 398px;} div.content {width: 398px;height: 270px;}div.dialogtitlebar{width: 398px;} div.dialogcontent{width: 398px;} </style>");

     

    }

    else if (window.navigator.userAgent.indexOf("Firefox")>=1)

    {

      //firefox

      obj.innerHTML+= ("<style>div.titlebar{width: 390px;} div.content {width: 390px;height: 263px;}div.dialogtitlebar{width: 390px;} div.dialogcontent{width: 390px;} </style>");

    }

3.2.2 按钮(Button

    按钮分为三种:普通按钮,提交按钮(submit)以及重置按钮(reset)。在实现上,普通按钮(图3.9)将被翻译为<button></button>容器(定义代码3.4),提交按钮(定义代码3.5)以及重置按钮(定义代码3.6)被翻译为<input/>容器。

 

代码3.4 普通按钮定义

function bc_component_button(buttonName,click_incident,defaultValue,buttonStyle)

 

代码3.5 提交按钮定义

function bc_component_submit(buttonName,defaultValue,buttonStyle)

 

代码3.6 重置按钮定义

function bc_component_reset(buttonName,defaultValue,buttonStyle)

 

3.9 按钮

 

    特殊地,普通按钮是引擎当前版本中唯一带有事件的按钮,可以通过<reaction>中的定义来关联相应的事件。事件调用代码通过拼接后,写入普通按钮调用函数的click_incident参数中。

3.2.3 列表、下拉框(List & Combo

    列表(定义代码3.7)和下拉框(定义代码3.8)在处理上唯一不同的是,在列表中存在一个叫做multiple的属性标记,在下拉框中没有。列表和下拉框同时被翻译成<select><option>结构。如图3.10

 

代码3.7 列表定义

function bc_component_list(listName,optionString,listStyle)

 

代码3.8 下拉框定义

function bc_component_combobox(listName,optionString,listStyle)

 

代码3.9 选项定义

function bc_option(valuetrans,valuedisplay)

 

    其中,列表和下拉框的选项值通过循环加载选项(定义代码3.9)后进行拼接完成。

 

3.10 列表与下拉框

3.2.4 单选、复选按钮组(RadioButton & CheckButton

    单选(定义代码3.10)和复选按钮(定义代码3.11)组通过翻译成<input/>容器实现(如图3.11),同时实现组的方法,即为将相同组的<input>容器的name属性设置为相同名称即可。其中值的设置通过循环加载选项(定义代码3.9)完成。

 

 

3.11 单选与复选按钮

 

代码3.10 单选按钮定义

function bc_component_radio(groupName,optionString,radioStyle)

 

代码3.11复选按钮定义

function bc_component_checkbox(groupName,optionString,checkboxStyle)

 

3.2.5 图片(Image

    图片(图3.12)通过翻译为<img>标签进行处理(定义代码3.12)。包括图片的名称,图片的源,图片的描述以及图片的样式。

 

 

3.12 图片

 

代码3.12 图片定义

function bc_component_image(imageName,source,describe,imageStyle)

 

3.2.6 超链接(Hyperlink

    超链接是浏览器中特有的控件,定义如定义代码3.13。包括链接的名称,链接的URL,可以是内部链接,比如#top,也可以是外部链接,比如www.baidu.com

 

定义代码3.13

function bc_component_link(linkName,url,defaultValue,linkStyle)

 

3.2.7 数据面板(DataPanel

    数据面板(图3.13)是当前引擎特殊支持的一个控件,其根据SCHEMA定义以及相关的数据XMLDOM树返回一个完整的数据表。不过,数据面板没有一个指定的定义,其使用Panel定义代码(定义代码3.12)以及XML数据表处理(定义代码3.13)进行拼凑而成。

 

代码3.12 面板代码定义

function bc_component_panel(panelName,content,panelStyle)

 

代码3.13 数据表定义

function makeTable_V2(xmldoc, schema, element)

 

    其中数据表将返回一个表格的HTML代码,包含完整的根据SCHEMA定义的数据。

 

 

3.13 数据表示例

 

3.2.8 文本框、密码框(TextField & Password

    文本框(定义代码3.14)以及密码框(定义代码3.15)翻译为<input/>标签,不同的是类型属性。如图3.14

 

 

代码3.14 文本框定义

function bc_component_textfield(textfieldName,defaultValue,textfieldStyle)

 

代码3.15 密码框定义

function bc_component_passwordfield(passwordfieldName,defaultValue,passwordfieldStyle)

 

 

3.14 文本框以及密码框

 

3.2.9 标签(Label

    标签翻译为HTML中的FORMS标签中的<label>标签,定义代码3.16

 

代码3.16 标签定义

function bc_component_label(labelName,defaultValue,labelStyle)

 

3.2.10 文本域(TextArea

    文本域翻译为<textarea>标签,定义代码3.17

 

代码3.17 文本域定义

function bc_component_textarea(textareaName,defaultValue,textareaStyle)

 

3.3 引擎内部行为

3.3.1 显示与隐藏

    窗口拥有的特定属性,用来显示(代码3.18)或者隐藏(代码3.19)窗口。在最终生成的HTML代码中,会提供相应的链接,用来响应每个窗口的显示;在窗口的右上角显示着一个“x”标记,用来关闭窗口,或者是隐藏窗口。或者通过按钮的相应来关闭相应的窗口。

 

代码3.18 显示

function display(elementToDisp)

{

    elementToDisp.style.display="";

}

 

function displayByID(IDName)

{

    document.getElementById(IDName).style.display="";

}

 

function displayDialogByID(IDName,DName)

{

    document.getElementById(IDName).style.display="";

    document.getElementById(DName).style.display="";

    document.getElementById(IDName).style.zIndex=12;

    document.getElementById(DName).style.zIndex=12;

}

 

代码3.19 隐藏

function hide(elementToHide)

{

    elementToHide.style.display="none";

}

 

function hideUpOneLevel(elementToHide)

{

    elementToHide.parentNode.style.display="none";

}

 

function hideByID(IDName)

{

    document.getElementById(IDName).style.display="none";

}

 

 

3.15 显示过程

 

 

 

 

 

3.16 隐藏过程

 

    显示和隐藏操作的是Style中的display属性。当display为空的时候,则显示,否则当displaynone的时候则隐藏。

 

3.3.2 拖动与活动焦点响应

    当前引擎中只有窗口的标题部分支持拖动以及活动焦点相应。也就是说,通过在标题栏上按住鼠标左键,然后移动鼠标,可以对窗口进行拖动(代码3.20);通过在标题栏上单击鼠标左键,可以让所选择的窗口显示到最前面(代码3.21)。

   

代码3.20 拖动关键代码

// Register the event handlers that will respond to the mousemove events

    // and the mouseup event that follow this mousedown event.

    if (document.addEventListener) {  // DOM Level 2 event model

        // Register capturing event handlers

        document.addEventListener("mousemove", moveHandler, true);

        document.addEventListener("mouseup", upHandler, true);

    }

    else if (document.attachEvent) {  // IE 5+ Event Model

        // In the IE event model, we capture events by calling

        // setCapture( ) on the element to capture them.

        elementToDrag.setCapture( );

        elementToDrag.attachEvent("onmousemove", moveHandler);

        elementToDrag.attachEvent("onmouseup", upHandler);

        // Treat loss of mouse capture as a mouseup event.

        elementToDrag.attachEvent("onlosecapture", upHandler);

    }

    else {  // IE 4 Event Model

        // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set

        // event handlers directly on the document object and hope that the

        // mouse events we need will bubble up.

        var oldmovehandler = document.onmousemove; // used by upHandler( )

        var olduphandler = document.onmouseup;

        document.onmousemove = moveHandler;

        document.onmouseup = upHandler;

    }

 

/**

     * This is the handler that captures mousemove events when an element

     * is being dragged. It is responsible for moving the element.

     **/

    function moveHandler(e)

    {

        if (!e) e = window.event;  // IE Event Model

 

        // Move the element to the current mouse position, adjusted as

        // necessary by the offset of the initial mouse-click.

        elementToDrag.style.left = (e.clientX - deltaX) + "px";

        elementToDrag.style.top = (e.clientY - deltaY) + "px";

 

        // And don't let anyone else see this event.

        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2

        else e.cancelBubble = true;                  // IE

    }

 

    /**

     * This is the handler that captures the final mouseup event that

     * occurs at the end of a drag.

     **/

    function upHandler(e)

    {

        if (!e) e = window.event;  // IE Event Model

 

        // Unregister the capturing event handlers.

        if (document.removeEventListener) {  // DOM event model

            document.removeEventListener("mouseup", upHandler, true);

            document.removeEventListener("mousemove", moveHandler, true);

        }

        else if (document.detachEvent) {  // IE 5+ Event Model

            elementToDrag.detachEvent("onlosecapture", upHandler);

            elementToDrag.detachEvent("onmouseup", upHandler);

            elementToDrag.detachEvent("onmousemove", moveHandler);

            elementToDrag.releaseCapture( );

        }

        else {  // IE 4 Event Model

            // Restore the original handlers, if any

            document.onmouseup = olduphandler;

            document.onmousemove = oldmovehandler;

        }

 

        // And don't let the event propagate any further.

        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2

        else e.cancelBubble = true;                  // IE

}

 

代码3.21 活动焦点相应

// here to change zIndex

    // if div onfocus, zIndex = 10.

    // then reset the values of all div tags.

    var cnt;

    for(cnt = 0;cnt<document.getElementsByTagName("div").length;cnt++)

    {

          document.getElementsByTagName("div")[cnt].style.zIndex=1;

    }

    elementToDrag.style.zIndex = 10;

   

    活动焦点通过将所有的div层的zIndex值设置为1,然后将当前的zIndex值设置到10来实现这个效果。

 

3.3.3 数据表格

    引擎通过数据表格模块获得数据,通过分析schema以及得到的DOM,生成数据表格的HTML代码,代码3.22为数据表格模块的实现方法。

 

代码3.22 数据表格模块

// schema: rowtag|column1,column2....

function makeTable_V2(xmldoc, schema, element) {

    // Create the <table> element

    var table = "<table border='1'>";

 

    // Create the header row of <th> elements in a <tr> in a <thead>

    var thead = "<thead>";

    var header = "<tr>";

    //alert(schema.columns.length);

   

    var tmpsch1 = schema.split("|");

    var schema_rowtag = tmpsch1[0];

   

    var tmpsch2 = tmpsch1[1].split(",");

    var schema_columns = tmpsch2;

   

    for(var i = 0; i < schema_columns.length; i++) {

        var label = schema_columns[i];

        var cell = "<th>";

        cell+=label+"</th>";

        header+= cell;

    }

    header += "</tr>";

    thead += header+"</thead>";

    table += thead;

    // The remaining rows of the table go in a <tbody>

    var tbody = "";

 

    // Now get the elements that contain our data from the xml document

    //alert(schema.rowtag);

    var xmlrows = xmldoc.getElementsByTagName(schema_rowtag);

 

    // Loop through these elements. Each one contains a row of the table.

    //alert(xmlrows.length);

    for(var r=0; r < xmlrows.length; r++) {

        // This is the XML element that holds the data for the row

        var xmlrow = xmlrows[r];

        // Create an HTML element to display the data in the row

        var row = "<tr>";

        //alert(schema.columns.length);

        // Loop through the columns specified by the schema object

        for(var c = 0; c < schema_columns.length; c++) {

            var tagname = schema_columns[c];

            var celltext;

            if (tagname.charAt(0) == '@') {

                // If the tagname begins with '@', it is an attribute name

                celltext = xmlrow.getAttribute(tagname.substring(1));

            }

            else {

                // Find the XML element that holds the data for this column

                var xmlcell = xmlrow.getElementsByTagName(tagname)[0];

                // Assume that element has a text node as its first child

                var celltext = xmlcell.firstChild.data;

            }

            // Create the HTML element for this cell

            var cell = "<td>";

            // Put the text data into the HTML cell

            cell += celltext+"</td>";

            // Add the cell to the row

            row+=cell;

        }

        row+="</tr>";

        // And add the row to the tbody of the table

        tbody +=row;

    }

    table += tbody+"</table>";

    // Set an HTML attribute on the table element by setting a property.

    // Note that in XML we must use setAttribute( ) instead.

 

    // Now that we've created the HTML table, add it to the specified element.

    // If that element is a string, assume it is an element ID.

    return table;

}

 

 

 

 

 

3.4 引擎后期内部扩展处理流程设计方案

3.4.1 配置文件处理

    引擎在解析分析过程之前,首先加载配置文件,建立配置表。配置表存储的是引擎的组件配置信息以及引擎相关的配置信息,在2.3.1已经说明。引擎加载配置文件这一部分本身也有一次解析与分析的过程,这个过程可以通过自建模块来实现(图3.17),或者将引擎的解析分析过程模块抽象化来以实现代码重用来完成这部分的功能。

 

 

3.17 配置文件加载过程

 

    组件支持可以通过配置文件进行修改,在组件配置中添加组件信息等,在属性配置中添加这个组件的属性配置文件即可(图3.18)。同时,修改引擎配置文件可以修改引擎的信息,比如版本信息等等。

 

 

3.18 添加一个新组件

 

    对于引擎的基本信息,可以包括引擎的当前版本、作者、修改者、建立时间、更新时间、版本描述、更新说明等等,这些都以XML的形式存储在引擎的基本信息配置文件中。不过这个文件不是一个关键必要的文件,所以在配置说明里面并没有强调这个文件的重要性。关于读取这个文件,可以通过在读取配置信息的时候将这段XML添加进去即可。或者可以通过书写引擎更新文档的方式来进行相应的引擎版本与文档版本的控制。

 

 

 

3.4.2 更新解析方法

    新的解析方法在引擎当前版本中的一部分被采用,也就是<reaction>的解析部分,这个解析方法建立在忽略浏览器兼容性的基础上,因为现在引擎没有针对Mozilla核心的浏览器进行Xpath的编码处理。所以这个解析方法仅适用于IE核心。

    新的解析方法使用MicrosoftXMLDOM中的Xpath部分。由于GUIXML文件内容本身就是一个格式完好(Well-Formed)的文档,有一定的书写格式以及要求,这样就可以以固定的形式加载Xpath路径。比如<reaction>中的<if>,可以采用“/guixml/solution/reaction/if”的路径来返回所有的当前路径下的<if>标签以及所对应的内容。在3.1.2中详细讲解了使用Xpath的优势,最重要的一点就是可以减轻代码量以及增加代码的可读性,毕竟如果进行字符串进行分析除了会造成一些名称、符号的兼容性问题,还会造成代码的不易读的问题,这个问题对于后期引擎的维护会造成维护成本的增加。

 

3.4.3 异常

    引擎当前版本中并没有很完整的异常处理,仅仅能够分析出所加载的XML文件是否存在,浏览器是否支持当前版本的浏览器等等。那么在新的引擎中,考虑添加以下类型的异常:

 

·XML文件有效异常

    检测并校验XML文件是否有效,是否正确,是否格式完好等

·组件信息异常

    检测是否存在这个组件的信息,引擎是否支持该组件等

·属性信息异常

    检测当前组件是否支持此属性

·数据信息自定义异常

    检测数据信息是否正常,比如当前信息需要数字,而不是字符串等

·引擎内部抛出的解析异常

    由于浏览器支持等问题或者JavaScript自身能力的问题而抛出的异常

·自定义异常

    在用户自定义函数中用户的自定义异常

 

    这些异常通过返回Boolean值的方法,其中自定义异常可以采用Alert形式的方法进行抛出。在引擎的设计中,不要在内部函数或者内部的过程中使用Alert,要使用Boolean校验的方法,因为引擎仅仅需要告知开发者这部分的执行是否正确即可。对于需要详细了解执行部分的异常说明,那么还需要在异常中添加相应的异常代码,这些异常代码仍旧可以通过添加引擎配置文件的方法进行加载。通常情况下,0代表通过,非0代表异常代码。

   

3.5 三种高级控件设计方案

    这里简单介绍以下三种引擎的设计方案:标签面板、树、表格。

    标签面板为实现方法,树和表格均为简要介绍设计,因为这两种组件还需要商榷,故不在本节中进行详细介绍。

 

 

 

3.5.1 标签面板(Tab

    标签面板(图3.19)是已经实现的高级控件,通过对<div><ul>的标签重载来实现。(代码3.23)

 

代码3.23 标签面板的示例代码

<script language="javascript" type="text/javascript" src="tab.js"></script>

<link rel="stylesheet" type="text/css" href="tab.css" />

<body>

 

<div>

        <ul>

                  <li onmouseover="javascript:chShift(this)">

                           <a class="on">Tab1</a>

                 </li>

                 <li onmouseover="javascript:chShift(this)">

                           <a >Tab2</a>

                 </li>

                  <li onmouseover="javascript:chShift(this)">

                           <a >Tab3</a>

                 </li>

                  <li onmouseover="javascript:chShift(this)">

                           <a >Tab4</a>

                 </li>

                  <li onmouseover="javascript:chShift(this)">

                           <a >Tab5</a>

                 </li>

                  <li onmouseover="javascript:chShift(this)">

                           <a href="http://www.baidu.com">Tab6</a>

                 </li>

                 <li onmouseover="javascript:chShift(this)">

                             <a >Tab7</a>

                  </li>

        </ul>

        <div>

             <ul >

                  <li onmouseover="javascript:chShift(this)">

                           <a >InnerTab1</a>

                 </li>

                 <li onmouseover="javascript:chShift(this)">

                           <a >InnerTab2</a>

                 </li>

            </ul>

            <div>InnerTab1</div>

            <div>InnerTab2</div>

        </div>

        <div>Tab2</div>

        <div>Tab3</div>

        <div>Tab4</div>

        <div>Tab5</div>

        <div>Tab6</div>

        <div>Tab7</div>

</div>

</body>

 

 

 

3.19 标签面板示例

 

标签面板的CSS样式(代码3.24)及以及JavaScript的事件响应(代码3.25)设计

 

代码3.24 CSS样式

ul

    {

    margin:0;

    padding:0;

    list-style-type:none;

    height:24px;

    }

    ul li

    {

    float:left;

    display:inline;

    }

    ul a

    {

    text-decoration: none;

    border-top:1px solid #ddd;

    border-bottom:1px solid #ccc; 

    border-left:1px solid #ddd;

    border-right:1px solid #ddd;

    display: block;

    padding: 5px 0 3px;

    margin-left:-1px;

    width:100px;

    font-weight: bold;

    text-align:center;

    line-height:15px;

    color: #11449E;

    }

 

    a.on,a:hover

    {

    padding-top: 6px;

    padding-bottom:3px;

    width:100px;

    border: 1px solid #ccc;

    border-bottom: 0;

    background:blue;

    color:white;

    }

 

代码3.25 JavaScript事件响应

function findA(obj)

{

         TagA=obj.getElementsByTagName("a");

         if (TagA.length>0)

        return TagA[0];

}

 

function findContentDIV(obj)

{

        TagDiv=obj.childNodes;

        var arrDiv = new Array;

        for(i=0;i<TagDiv.length;i++)

         {

                var objDiv = TagDiv[i];

                var re = /div/i;

                var arr = re.exec(objDiv.tagName);

                if(arr != null)

               {

                        if(arr.index == 0)

                       {

                               arrDiv.push(objDiv);

                      }

                }   

        }

        return arrDiv;

}

 

function chShift(o)

{

        o.style.cursor="pointer";

        var t=o.parentNode;

        var tA=t.getElementsByTagName("a");  

        var tParent=t.parentNode;

        var tParentDIV=findContentDIV(tParent);

 

        for(i=0;i<tA.length;i++)

        {

                tA[i].className= null;  

                tParentDIV[i].style.display="none";

                if(tA[i]==findA(o))

                {

                        tA[i].className="on";

                        tParentDIV[i].style.display="block";

                }

        }

}

 

    对于样式重载等等,需要权衡考虑当这些样式被重载的时候会不会影响到其他控件或者标签的行为以及样式,然后需要对这些代码进行修改,然后再放入高级控件库中。

 

 

 

 

3.5.2 简单树(Tree

    本节简要介绍简单树的设计方法。

    在树的实现上,JavaScript有得天独厚的优势,并且在网上通常能找到这类的实现方法,故在这里不重复介绍如何实现它。树有一定的结构,也就是说,生成一颗简单的树,仅仅需要将树放入DOM中就可以了。每颗树都有枝叶。关于叶子的类型,要求是面板。在面板中可以继续添加任何组件,比如文本框、标签等等。

 

3.5.3 简单表格(Table

    本节简要介绍简单表格的设计方法。

    引擎可以考虑采用以下的步骤进行表格的建立:

·得到表格结构

    类似的,像DataPanel的实现方法一样来实现

·得到结构化数据

·循环生成HTML代码

·返回HTML代码

 

3.6 维护

3.6.1 版本控制与版本维护

    引擎当前的版本为Beta版本。也就是0.97版。

    对于版本控制与版本维护,在软件开发过程中是十分重要的,在这里就不介绍如何进行版本控制与维护,因为几乎所有的软件工程的参考书对于这些管理问题介绍的十分详细,并且提供了如何使用CVS版本控制服务器等等的方法来进行版本的处理。在这里提出引擎对版本控制与维护的要求:

 

·每一次的更新都要求有更新说明以及Update版本号。

    比如,当前引擎进行了第10次的更新,那么当前引擎的版本是Beta Update10。意思就是Beta版本的Update 10

·每一次的升级要求有更新说明以及Upgrade版本号

    比如,引擎从Beta版本变为Beta2版本,也就是Upgrade 2 版本。如果是Beta2版本的第十次更新,则引擎的版本为:Beta2 Update10

·在维护的过程中,最好能够通过相关的版本控制工具,比如CVS等。

3.6.2 分发

    引擎在Beta版本之后就可以进行一次分发。每次的更新分发要包括最新的软件包、用户手册、更新文档,开发文档四个部分。由于引擎的目标使用者是建立在拥有一定计算机开发背景的人群上,所以这四份文档都要交给用户。

    另外,引擎是否需要遵循GPL协议,还需要重点讨论。个人推荐,将这个引擎列为开源项目。

 

第四章  引擎成品演示

4.1 演示

引擎成品演示为:学生管理演示(图4.1)。包含两个数据XML文件,一份GUIXML设计文件。可以通过该系统对学生信息进行查看(图4.2)、增加(图4.3)、删除(图4.4)。

 

 

4.1 主页面

 

 

4.2 查看学生信息

 

4.31)添加前

 

 

4.32)添加后

 

 

4.41) 删除第一行前

 

 

 

4.42) 删除第一行后

 

    同时,还可以选择性的查看学生表的信息(图4.5)。

 

 

4.5 选择学生表信息

 

4.2 GUIXML文件内容

<!--

      This is the Demo of Student Management System

     

      Reference to GUIXML.

     

      Created by solaris_navi on Apr. 20th 2008

-->

<guixml>

  <solution>

    <datamodel>

      <model id="showstudent">

          <instance src="data_test.xml"/>

      </model>

      <model id="showstudent_2">

          <instance src="data_test2.xml"/>

      </model>

       <model id="instruction">

          <instance src="instruction.xml"/>

      </model>

    </datamodel>

    <flavor>

      <attributes type="labeltype">

        <attribute name="text">Default Label</attribute>

        <attribute name="color">red</attribute>

        <attribute name="size">5</attribute>

      </attributes>

      <attributes type="frametype">

        <attribute name="text">Defalut Frame</attribute>

      </attributes>

     

      <attributes type="datapaneltype">

        <attribute name="text"></attribute>

      </attributes>

      <attributes type="texttype">

        <attribute name="text">Default Text</attribute>

        <attribute name="color">red</attribute>

      </attributes>

      <attributes type="passtype">

        <attribute name="text"></attribute>

      </attributes>

      <attributes type="submittype">

        <attribute name="text">submit</attribute>

      </attributes>

      <attributes type="combotype">

        <attribute name="text">option1|option2|option3|option4</attribute>

      </attributes >

     <attributes type="imgtype">

        <attribute name="text">neko</attribute>

        <attribute name="src">moz.jpg</attribute>

        <attribute name="width">50%</attribute>

        <attribute name="height">50%</attribute>

      </attributes >

      <attributes type="linktype">

        <attribute name="text">Default Link</attribute>

        <attribute name="url">www.www.com</attribute>

      </attributes >

      <attributes type="hellobutton">

        <attribute name="text">Default Button</attribute>

      </attributes >

      </flavor>

    <forms>

    <component class="frametype" id="frame1">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Instruction</attribute>

        </flavor>

        <component class="labeltype" id="ilabel1">

            <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">

                  <reference type="xml" datamodelid="instruction" idref="/instruction/title/text()">

                  </reference>

              </attribute>

              <attribute name="color">blue</attribute>

              <attribute name="font-size">18</attribute>

            </flavor>

          </component>

          <component class="labeltype" id="ilabel2">

            <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">

                  <reference type="xml" datamodelid="instruction" idref="/instruction/content/text()">

                  </reference>

              </attribute>

               <attribute name="font-size">12</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button1exit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component>

      <component class="frametype" id="frame2">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Show Students View 1</attribute>

        </flavor>  

        <component class="datapaneltype" id="datapanel1">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="datamodelid">showstudent</attribute>

              <attribute name="xmldatastructure">student|@no,name,dept,age</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button2ref">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Refresh</attribute>

            </flavor>

          </component>

           <component class="hellobutton" id="button2exit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component> 

     <component class="frametype" id="frame3">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Show Students View 2</attribute>

        </flavor>  

        <component class="datapaneltype" id="datapanel2">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="datamodelid">showstudent_2</attribute>

              <attribute name="xmldatastructure">student|@no,name,dept,age</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button3exit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component> 

     <component class="frametype" id="selectedshowframe">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Show Students View By Selecting</attribute>

        </flavor>  

        <component class="datapaneltype" id="datapanel3">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="datamodelid">showstudent</attribute>

              <attribute name="xmldatastructure">student|@no,name,dept,age</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button3show1">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Show View1</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button3show2">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Show View2</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="button3exit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component>

      <component class="frametype" id="framedata">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Add a Student to View 1</attribute>

        </flavor>

        <component class="labeltype" id="lbno">

        <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">stno</attribute>

               <attribute name="color">blue</attribute>

            </flavor>

          </component>       

        <component class="texttype" id="txtno">

            <flavor>

              <attribute name="rendering">TextField</attribute>

            </flavor>

          </component>

            <component class="labeltype" id="lbname">

            <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">name</attribute>

               <attribute name="color">blue</attribute>

            </flavor>

          </component>

          <component class="texttype" id="txtname">

            <flavor>

              <attribute name="rendering">TextField</attribute>

            </flavor>

          </component>

           <component class="labeltype" id="lbdept">

           <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">dept</attribute>

               <attribute name="color">blue</attribute>

            </flavor>

          </component>

          <component class="texttype" id="txtdept">

            <flavor>

              <attribute name="rendering">TextField</attribute>

            </flavor>

          </component>

           <component class="labeltype" id="lbage">

           <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">sage</attribute>

               <attribute name="color">blue</attribute>

            </flavor>

          </component>

          <component class="texttype" id="txtage">

            <flavor>

              <attribute name="rendering">TextField</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="addv1button">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Add</attribute>

              <attribute name="width">50</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="buttonaddexit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component> 

     <component class="frametype" id="frameSingledata">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Delete a Student from the Top of View 1</attribute>

        </flavor> 

        <component class="datapaneltype" id="delv1datapanel">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="datamodelid">showstudent</attribute>

              <attribute name="xmldatastructure">student|@no,name,dept,age</attribute>

            </flavor>

          </component>       

          <component class="hellobutton" id="buttondelref">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Refresh</attribute>

            </flavor>

          </component>

        <component class="hellobutton" id="delv1button">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Remove The Top</attribute>

              <attribute name="width">120</attribute>

            </flavor>

          </component>

          <component class="hellobutton" id="buttondelexit">

            <flavor>

              <attribute name="rendering">Button</attribute>

              <attribute name="text">Close</attribute>

            </flavor>

          </component>

     </component> 

    </forms>

    <reaction>

        <if>

            <condition>

                <trigger class="doClick" idref="button1exit"/> 

                <trigger class="doClick" idref="button2exit"/>              

                <trigger class="doClick" idref="button3exit"/>

                <trigger class="doClick" idref="buttonaddexit"/>

                <trigger class="doClick" idref="buttondelexit"/>

            </condition>

            <callback>

                <adapter name="closeme" class="hideUpOneLevel(this.parentNode)"/>              

            </callback>

        </if>

        <if>

            <condition>              

                <trigger class="doClick" idref="button3clear"/>

            </condition>

            <callback>

                <adapter name="cleardatapanel1" class="func_clear(datapanel2)"/>

            </callback>

        </if> 

        <if>

            <condition>              

                <trigger class="doClick" idref="button3show1"/>

            </condition>

            <callback>

                <adapter name="showdatapanel3" class="func_show_table(datapanel3,'showstudent')"/>

            </callback>

        </if>

        <if>

            <condition>              

                <trigger class="doClick" idref="button3show2"/>

            </condition>

            <callback>

                <adapter name="showdatapanel3" class="func_show_table(datapanel3,'showstudent_2')"/>

            </callback>

        </if> 

        <if>

            <condition>              

                <trigger class="doClick" idref="addv1button"/>

            </condition>

            <callback>

                <adapter name="addv1button1" class="func_add_a_student_DOM('showstudent',txtno,txtname,txtage,txtdept)"/>

                 <adapter name="closeme" class="hideUpOneLevel(this.parentNode)"/>

                 <adapter name="cleardatapanel1" class="func_clear(datapanel1)"/>

                <adapter name="showdatapanel1" class="func_show_table(datapanel1,'showstudent')"/>

                <adapter name="cleardatapanel3" class="func_clear(datapanel3)"/>

                <adapter name="showdatapanel3" class="func_show_table(datapanel3,'showstudent')"/>

                <adapter name="cleardelv1datapanel" class="func_clear(delv1datapanel)"/>

                <adapter name="showdelv1datapanel" class="func_show_table(delv1datapanel,'showstudent')"/>

            </callback>

        </if>

          <if>

            <condition>              

                <trigger class="doClick" idref="button2ref"/>

            </condition>

            <callback>

                <adapter name="cleardatapanel1" class="func_clear(datapanel1)"/>

                <adapter name="showdatapanel1" class="func_show_table(datapanel1,'showstudent')"/>

            </callback>

        </if>

        <if>

            <condition>               

                <trigger class="doClick" idref="buttondelref"/>

            </condition>

            <callback>

                <adapter name="cleardelv1datapanel" class="func_clear(delv1datapanel)"/>

                <adapter name="showdelv1datapanel" class="func_show_table(delv1datapanel,'showstudent')"/>

            </callback>

        </if>

          <if>

            <condition>              

                <trigger class="doClick" idref="delv1button"/>

            </condition>

            <callback>

                <adapter name="delfromthetop" class="func_del_a_student_DOM_from_top('showstudent')"/>

                <adapter name="cleardatapanel1" class="func_clear(datapanel1)"/>

                <adapter name="showdatapanel1" class="func_show_table(datapanel1,'showstudent')"/>

                <adapter name="cleardatapanel3" class="func_clear(datapanel3)"/>

                <adapter name="showdatapanel3" class="func_show_table(datapanel3,'showstudent')"/>

                <adapter name="cleardelv1datapanel" class="func_clear(delv1datapanel)"/>

                <adapter name="showdelv1datapanel" class="func_show_table(delv1datapanel,'showstudent')"/>

            </callback>

        </if>              

    </reaction>

   

  </solution>

</guixml>

4.3 数据XML文件内容


·数据XML文件内容1

<?xml version="1.0" encoding="UTF-8"?>

<!--

      This is the Demo of xml data.

      contents some students information.

     

      Created by solaris_navi on Apr. 10th 2008

-->

<students>

<student no="1">

<name>Mike</name>

<dept>Computer Science</dept>

<age>21</age>

</student>

<student no="2">

<name>Jane</name>

<dept>Computer Science</dept>

<age>22</age>

</student>

<student no="3">

<name>Jack</name>

<dept>Computer Engineering</dept>

<age>20</age>

</student>

<student no="4">

<name>Daniel</name>

<dept>Computer Engineering</dept>

<age>21</age>

</student>

<student no="5">

<name>Juliet</name>

<dept>Information Science</dept>

<age>21</age>

</student>

</students>

 

·数据XML文件内容2

<?xml version="1.0" encoding="UTF-8"?>

<!--

      This is the Demo of xml data.

      contents some students information.

     

      Created by solaris_navi on Apr. 10th 2008

-->

<students>

<student no="1">

<name>James</name>

<dept>Soiety Engineering</dept>

<age>20</age>

</student>

<student no="2">

<name>Janet</name>

<dept>General Science</dept>

<age>22</age>

</student>

<student no="3">

<name>Jackson</name>

<dept>Soiety Engineering</dept>

<age>21</age>

</student>

<student no="4">

<name>Dan</name>

<dept>Soiety Engineering</dept>

<age>20</age>

</student>

<student no="5">

<name>Julia</name>

<dept>General Science</dept>

<age>22</age>

</student>

</students>


 

 

 

 

4.4 用户自定义事件

/**

        project : js engine

        module name : incident functions

        module lv : basic

        author : solaris_navi

        project created on : Apr.7 2008

        last project modified on : Apr. 7 2008

       

        description :

        include some useful functions. definate by users

 */

 

 // alert

 function func_alert(str)

 {

    alert(str);

 }

 

 function func_clear(obj)

 {

    //alert(obj.innerHTML);

    obj.innerHTML = "";

 }

 

 function func_show_table(obj , xmlname)

 {

    var exDOM2;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            break;

          }

      }

      var schema = "student|@no,name,dept,age";

 

      obj.innerHTML = makeTable_V2(exDOM2, schema);

 }

 

 function func_add_a_student_DOM(xmlname,no,name,age,dept)

 {

    var exDOM2;

    var exid;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            exid = fid1;

            break;

          }

      }

     

      var root = exDOM2.documentElement;

      newstudent=exDOM2.createElement("student");

      newstudent.setAttribute("no",no.value);

     

      newname=exDOM2.createElement("name");

      newtext=exDOM2.createTextNode(name.value);

      newname.appendChild(newtext);

      newage=exDOM2.createElement("age");

      newtext=exDOM2.createTextNode(age.value);

      newage.appendChild(newtext);

      newdept=exDOM2.createElement("dept");

      newtext=exDOM2.createTextNode(dept.value);

      newdept.appendChild(newtext);

     

      newstudent.appendChild(newname);

      newstudent.appendChild(newdept);

      newstudent.appendChild(newage);

     

      root.appendChild(newstudent);

      //alert(root.xml);

      global_xmldoc_DOM[exid] = exDOM2;

 }

 

 function func_del_a_student_DOM_from_top(xmlname)

 {

    var exDOM2;

    var exid;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            exid = fid1;

            break;

          }

      }

     

      var root = exDOM2.documentElement;

      y=exDOM2.getElementsByTagName("student")[0];

      root.removeChild(y);

      //alert(root.xml);

 }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结束语

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考文献

[1] 清华大学知识工程实验室, 软件构件图元编辑规范070621_征求意见稿,北京,2007

[2] 苏昱,《样式表中文手册》,2002

[3] 沈裕和,《 XML 及其应用》,北京,北京信息工程学院,2006

[4] 沈裕和,《人机交互与界面设计》,北京,北京信息工程学院,2005

[5] David Flanagan, JavaScript: The Definitive Guide , US, O'Reilly, 2006

[6] Scott Raymond, Ajax On Rails 》,USO'Reilly, 2007P32 - P48

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

附录

附录1 用户手册 BETA

Users’ Guide

Compiled by Solaris_navi on Apr. 2008

Engine Version: 0.97

Document Version: 0.97_Modify_1

Abstract

The goal of this guide is to introduce how to use this JavaScript Engine Beta Version for GUIXML correctly to create a basic web application.

 

CONTENTS

Chapter 1 A GUIXML file................................................ 49

1.1 Structure of GUIXML............................................................. 49

1.1.1 Main Body Containers....................................................... 49

1.1.2 Solution................................................................... 49

1.1.3 Forms..................................................................... 50

1.1.4 Reaction.................................................................. 52

1.2 A well-formed GUIXML file....................................................... 53

Chapter 2 Properties of Components..................................... 54

Chapter 3 Preload HTML file............................................. 56

3.1 Preload Codes................................................................... 56

3.2 Custom Codes.................................................................... 57

3.2.1 in the scope of <head>...................................................... 57

3.2.2 in the scope of <body>...................................................... 57

Chapter 4 Custom events............................................... 58

4.1 Function Naming................................................................. 58

4.2 Engine Interfaces............................................................... 59

 

 

 

 

 

 

 

 

Chapter 1 A GUIXML file

In this section, you can understand how to create a correct GUIXML file, which is supported by current JS Engine Beta Version.

Note: JS Engine Current Version only supports WELL-FORMED GUIXML File now.

1.1 Structure of GUIXML

Here is to introduce the basic structure of a GUIXML file.

1.1.1 Main Body Containers

All the GUIXML file start with the tag <guixml> and end with </guixml>. In the body of <guixml>, there are three tags: <solution>, <forms> and <reaction>. GUIXML file similar to the one shown below appear (Code 1.1):

Code 1.1 the sample of simple structure of GUIXML file.

<guixml>

<solution>

<datamodel>

</datamodel>

<flavor>

</flavor>

<forms>

</forms>

<reaction>

</reaction>

</solution>

</guixml>

 

1.1.2 DataModel and Flavor In Solution

The engine currently version only support two tags of Solution: Datamodel and Flavor.

You can define some data model by add a tag <model> with its value of id as a DOM table identity, and add the tag <instance> with its source xml file, in the container <datamodel>, sample code as the Code 1.2. Then you can use these data model by referencing.

 

Code 1.2 Structure of Datamodel:

<datamodel>

      <model id="modelid">

          <instance src="guixml file path"/>

      </model>

</datamodel>

 

The container <flavor> is similar to the Class in Java. It defines default component styles and values. It means that if you dont configure your component styles or values in the custom way, the styles and values will be replaced by these default styles and values you defined in <flavor>. <flavor> contains tag <attributes>, which define the name or the identity of default styles and values set, as Class Name in Java, you can set the attribute type of <attributes> to define the name of this set. <attributes> contains one tag <attribute> or more, tag <attribute> will define every styles and values according to your definition. Each <attribute> has an attribute name, which is the name of this attribute, and the value of <attribute> is the value of this attribute. Attribute name can be two types: one is text, another is CSS Style. Type text defines the default value and type CSS Style defines the default style of the component. The sample code shows below as Code 1.3.

 

Code 1.3 Structure of Flavor

<flavor>

      <attributes type="labeltype">

        <attribute name="text">Default Label</attribute>

        <attribute name="color">red</attribute>

        <attribute name="size">5</attribute>

      </attributes>

</flavor>

 

    This sample shows that, it defines an attribute set named labeltype and it contains three attributes in two types: the default value and style, which is the text Default Label and the style color = red; size = 5.

1.1.3 Forms in Solution

    All components are defined in the scope of the container <forms>. Please follow the instructions below to create a frame with components, or controllers:

-         Create a frame

All components except frame need a parent component. A frame should be defined like this:

 

Code 1.4 Structure of Component Frame

<component class="frametype" id="frameName">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text"> (Optional) frameName</attribute>

        </flavor>

                     <component>

                            …..

                     </component>

       </component>

 

    Note: Frame needs at least one component.

   

-         Add components

Component should be defined like this:

 

Code 1.5 Structure of General Component

<component class="component type" id="component name">

        <flavor>

              <attribute name="rendering">Component Type</attribute>

              <attribute name="text"> (Optional) type text value</attribute>

               <attribute name="style name"> (Optional) type style value</attribute>

            </flavor>

          </component>      

 

Every component contains an attribute named rendering, engine current version supports: Label, TextField, TextArea, Button, Submit, Reset, DataPanel, Password, Image, RadioButton, CheckBox, ComboBox, List and Link. Component has its own default or custom text value, which is the required property and it help the engine defined the shown-out text. If there is a RadioButton, CheckBox, ComboBox or List, you can define the options split by |. There is an RadioButton example shown below:

 

Code 1.6 Example of a RadioButton

    <component class="combotype" id="radiodemo1">

            <flavor>

              <attribute name="rendering">RadioButton</attribute>

<attribute name="text">option1|option2|option3|option4</attribute>

            </flavor>

    </component>

 

-         Link Data if need

In the Solution, if you defined a datamodel, then you would have a datamodelid as a identity name of a path of a xml file.

Note: the xml file should be well-formed, otherwise, error(s) will be caused.

    If you really have a datamodel now, you can reference data from the xml file.

 

   Code 1.7 Link data Demo

<reference type="xml" datamodelid="datamodelid" idref="xpath"></reference>

   

You can insert a reference similar to Code 1.7 to tag <attribute name= text></attibute>.

    And if you define a DataPanel, you can show all data in the xml file with a configuration     schema.

    There is a example shows that how to define a DataPanel with referenced Data.

 

   Code 1.8 Example of a well-formed Data XML file: Stduent.xml

<students>

<student no="1">

<name>Mike</name>

<dept>Computer Science</dept>

<age>21</age>

</student>

<student no="2">

<name>Jane</name>

<dept>Computer Science</dept>

<age>22</age>

</student>

<student no="3">

<name>Jack</name>

<dept>Computer Engineering</dept>

<age>20</age>

</student>

<student no="4">

<name>Daniel</name>

<dept>Computer Engineering</dept>

<age>21</age>

</student>

<student no="5">

<name>Juliet</name>

<dept>Information Science</dept>

<age>21</age>

</student>

</students>

 

    And if we want to use this xml file, we should have a definition in <solution>.

 

   Code 1.9 DataModel Definitions in Solution

<datamodel>

      <model id="showstudent">

          <instance src=" Student.xml"/>

      </model>

    </datamodel>

   

    Then add a component in <forms>.

   

   Code 1.10 DataPanel Example

       <component class="datapaneltype" id="datapanelName">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="datamodelid">showstudent</attribute>

              <attribute name="xmldatastructure">student|@no,name,dept,age</attribute>

            </flavor>                

          </component>

          

    Now, you have a DataPanel with the data from Student.xml.

 

1.1.4 Reaction in Solution

  Reaction is the scope that defines buttons behaviors. The Engine currently supports only the Button with behaviors. The structure of <Reaction> shows as below:

 

Code 1.11 Structure of Reaction

<reaction>

        <if>

            <condition>

                <trigger class="action" idref="Component (button) Name"/>                

            </condition>

            <callback>

                <adapter name="actionName" class="JavaScript Function"/>              

            </callback>

        </if>       

    </reaction>

 

The attribute idref of trigger is the name of the button or other component support further, and the attribute class of adapter is the JavaScript Function which defined in Custom events (incident.js). You can define a 1 to 1, 1 to N, N to N action here. It means that you can define one or more components to one function, or one component to more than one function.

 

1.2 A well-formed GUIXML file

The engine now cannot parse a broken or incomplete GUIXML file, so a well-formed GUIXML file is need to create a application by using this engine. A well-formed GUIXML file should contain similar tags as the follow example (Code 1.12):

 

Code 1.12 A well-formed GUIXML File

<guixml>

  <solution>

    <datamodel>

      <model id="showstudent">

          <instance src="data_test.xml"/>

      </model>

      <model id="showstudent_2">

         …………

    </datamodel>

    <flavor>

      <attributes type="labeltype">

        <attribute name="text">Default Label</attribute>

        <attribute name="color">red</attribute>

        …………

      </attributes>

      <attributes type="frametype">

     …………

      </flavor>

    <forms>

    <component class="frametype" id="frame1">

        <flavor>

            <attribute name="rendering">Frame</attribute>

            <attribute name="text">Instruction</attribute>

        </flavor>

        <component class="labeltype" id="ilabel1">

            <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="text">

                  <reference type="xml" datamodelid="instruction" idref="/instruction/title/text()">

                  </reference>

              </attribute>

              <attribute name="color">blue</attribute>

              <attribute name="font-size">18</attribute>

            </flavor>

          </component>

          <component class="labeltype" id="ilabel2">

            …………

     </component>

      <component class="frametype" id="frame2">

        …………

    </forms>

    <reaction>

        <if>

            <condition>

                <trigger class="doClick" idref="button1exit"/> 

                <trigger class="doClick" idref="button2exit"/>

………..              

            </condition>

            <callback>

                <adapter name="closeme" class="hideUpOneLevel(this.parentNode)"/> 

………..            

            </callback>

        </if>

        <if>

............

    </reaction>

  </solution>

</guixml>

 

    Exception or broken xml error rising may be supported in the Engine further versions.

Chapter 2 Properties of Components

There are 2 types of properties. One is Type Text, another is Type Styles. Property Text is required for every component. It configures components shown text. Properties Type Styles are optional, and it configures components shown styles. It means that if you define a component, there must be one attribute at least in your <attributes> scope: <attribute name = text>. </attribute>.

    All Styles properties are referred from CSS Styles. All styles are supposed to be supported in the engine of current version shows in the table below (Table 2.1):

 

Table 2.1 CSS Styles Table

Text Properties

text-indent

text-autospace

text-overflow

test-kashida-space

vertical-align

text-justify

text-align

ruby-align

layout-flow

ruby-position

writing-mode

ruby-overhang

direction

ime-mode

unicode-bidi

layout-grid

Word-break

layout-grid-char

line-break

layout-grid-char-spacing

White-space

layout-grid-line

Word-wrap

 

Table Properties

border-collapse

empty-cells

border-spacing

table-layout

caption-side

speak-header

Paddings Properties

padding

padding-bottom

padding-top

padding-left

padding-right

 

Outlines Properties

outline

outline-style

outline-color

outline-width

Margins Properties

margin

margin-bottom

margin-top

margin-left

margin-right

 

Lists Properties

list-style

list-style-type

list-style-image

marker-offset

list-style-position

 

Layout Properties

Clear

overflow-x

Float

overflow-y

Clip

display

overflow

visibility

Font Properties

font

text-underline-position

Color

text-shadow

font-family

font-variant

font-size

text-transform

font-size-adjust

line-weight

font-stretch

letter-spacing

font-style

word-spacing

font-weight

text-decoration

Dimensions Properties

height

Width

max-height

max-width

min-height

min-width

Borders Properties

border

border-style

border-color

border-bottom

border-width

border-bottom-color

border-top

border-bottom-style

border-top-color

border-bottom-width

border-top-style

border-left

border-top-width

border-left-color

border-right

border-left-style

border-right-color

border-left-width

border-right-style

border-right-width

Background Properties

background

background-position-x

background-attachment

background-position-y

background-color

background-repeat

background-image

layer-background-color

background-position

layer-background-image

 

How to add attributes please see 1.1.2 and 1.1.3.

 

Chapter 3 Preload HTML file

First, lets see the sample code below (Code 3.1):

 

Code 3.1 Preload HTML file sample

<html>

<head>

 

<meta name="GUIXMLFILE" content="test_frame1.xml"/>

 

<script language="javascript" type="text/javascript" src="xml_parser_V2.js"></script>

<script language="javascript" type="text/javascript" src="basic_comp.js"></script>

<script language="javascript" type="text/javascript" src="preload.js"></script>

<script language="javascript" type="text/javascript" src="incident.js"></script>

<script language="javascript" type="text/javascript" src="hidendisplay.js"></script>

<script language="javascript" type="text/javascript" src="dragndrop.js"></script>

<script language="javascript" type="text/javascript" src="xml.js"></script>

 

<link rel="stylesheet" type="text/css" href="div-css.css" />

 

</head>

<body onload="preload(div1);">

<div id="div2">

<h1> This is a GUIXML Test File</h1>

<br/>

<b>Click the Link below to run the test.</b>

</div>

<div id="div1"></div>

</body>

</html>

 

3.1 Preload Codes

There are some codes in this HTML file that should not be removed (Code 3.2):

 

Code 3.2 Kernel Codes

<script language="javascript" type="text/javascript" src="xml_parser_V2.js"></script>

<script language="javascript" type="text/javascript" src="basic_comp.js"></script>

<script language="javascript" type="text/javascript" src="preload.js"></script>

<script language="javascript" type="text/javascript" src="incident.js"></script>

<script language="javascript" type="text/javascript" src="hidendisplay.js"></script>

<script language="javascript" type="text/javascript" src="dragndrop.js"></script>

<script language="javascript" type="text/javascript" src="xml.js"></script>

 

<link rel="stylesheet" type="text/css" href="div-css.css" />

 

These codes contain parser, loading scripts, static behaviors, data process and translator, also a CSS style for the default style value. If there are any of them missing or removed, engine may cause errors because browser cannot understand a broken code written in JavaScript, such as undefined errors and missing object errors. Keep its process integrity so that the engine can run without any unexpected errors.

 

3.2 Custom Codes

    You can edit codes in the scope of <head> and <body>.

3.2.1 in the scope of <head>

    Here is only one tag that you can edit is the properties of tag <meta>:

 

Code 3.3 Meta Code

<meta name="GUIXMLFILE" content="test_frame1.xml"/>

 

This Meta contains your GUIXML file name, so you can just edit the property content to change your loading file.

Property content supports absolute and relative path

 

3.2.2 in the scope of <body>

    You can add or edit any of these codes in the scope of <body> by using HTML codes. Please notice:

-         tag <body onload>

<body> event onload refers a function called preload(). The parameter of this function is the name of the container <div>. It means that you can change the parameter to select which container you want to use.

-         container <div>

Every tag has a property named id, you should edit tag <div> and set the id property, then you can run the function correctly.

-         other codes

You can add other HTML codes in the scope of <body>, such as the code shown below (Code 3.4):

 

Code 3.4 Custom Code in Preload HTML file

<div id="div2">

<h1> This is a GUIXML Test File</h1>

<br/>

<b>Click the Link below to run the test.</b>

</div>

………………………………..

 

 

Chapter 4 Custom events

You can add new functions to the engine current version; codes must be added in the JavaScript file incident.js.

4.1 Function Naming

    JavaScript didnt have any Code Naming Scope, so functions should have an exclusive name. So user custom name should be begin with: func_, then the description of the function. For example: function func_alert(). Here are the codes of the functions referred from student management demo (Code4.1):

 

Code 4.1 Events of Student Management Demo

function func_clear(obj)

 {

    //alert(obj.innerHTML);

    obj.innerHTML = "";

 }

 

 function func_show_table(obj , xmlname)

 {

    var exDOM2;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            break;

          }

      }

      var schema = "student|@no,name,dept,age";

 

      obj.innerHTML = makeTable_V2(exDOM2, schema);

 }

 

 function func_add_a_student_DOM(xmlname,no,name,age,dept)

 {

    var exDOM2;

    var exid;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            exid = fid1;

            break;

          }

      }

     

      var root = exDOM2.documentElement;

      newstudent=exDOM2.createElement("student");

      newstudent.setAttribute("no",no.value);

     

      newname=exDOM2.createElement("name");

      newtext=exDOM2.createTextNode(name.value);

      newname.appendChild(newtext);

      newage=exDOM2.createElement("age");

      newtext=exDOM2.createTextNode(age.value);

      newage.appendChild(newtext);

      newdept=exDOM2.createElement("dept");

      newtext=exDOM2.createTextNode(dept.value);

      newdept.appendChild(newtext);

     

      newstudent.appendChild(newname);

      newstudent.appendChild(newdept);

      newstudent.appendChild(newage);

     

      root.appendChild(newstudent);

      //alert(root.xml);

      global_xmldoc_DOM[exid] = exDOM2;

 }

 

 function func_del_a_student_DOM_from_top(xmlname)

 {

    var exDOM2;

    var exid;

    //alert(xmlname);

     for(var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

          if(global_reference_model_name[fid1] == xmlname)

          {

            exDOM2 = global_xmldoc_DOM[fid1];

            exid = fid1;

            break;

          }

      }

     

      var root = exDOM2.documentElement;

      y=exDOM2.getElementsByTagName("student")[0];

      root.removeChild(y);

      //alert(root.xml);

 }

 

4.2 Engine Interfaces

Engine also has some interfaces to the users. But in this version, the engine provides one function: makeTable_V2().

This function makeTable_V2 (exDOM2, schema) provides two parameters (or you can call it interfaces): DOM as a object and schema as a String, and then return a HTML code string, so that to return a table with the data related with the data xml file and a table structure defined by schema.

 

This feature may be completed in the further version of engine.

 

This is the end of Users Guide. Engine version: 0.97. Document Version: 0.97

 

附录2 引擎更新列表

updated 9:

----------------------------------------------------------

1. component frame bug fixed.

2. behavor updated. new feature supported.

   you can definate behavors as follows:

   <reaction>

        <if>

            <condition>

                <trigger class="doClick" idref="button1"/> 

                <trigger class="doClick" idref="button2"/>               

                <trigger class="doClick" idref="button3"/>

            </condition>

            <callback>

                <adapter name="SayHello" class="func_alert('helloword!')"/>

                <adapter name="SayHello2" class="func_alert('helloword2!')"/>               

            </callback>

        </if>

    </reaction>

3. new engine parser desgin method is found.

    <reaction> is implemented by using this method.

    other tags will keep prevenient method.

4. engine version now is V0.97

5. demo updated.

 

 

updated 8_2:

----------------------------------------------------------

1. supported a new way to load data from xmlfile.

          <component class="listtype" id="lstype1">

            <flavor>

              <attribute name="rendering">List</attribute>

              <attribute name="color">blue</attribute>

              <attribute name="datamodelid">showstudent</attribute>

              <attribute name="value">

                <reference type="xml" datamodelid="showstudent_2" idref="/students/student/name/text()">

                </reference>

              </attribute>

            </flavor>

          </component>

2. modelid ==> datamodelid

3. demo file updated.

 

updated 8:

----------------------------------------------------------

1. single data load supported.

    you can get data from a xml, only configure a xpath.

defination:

    <component class="labeltype" id="deptlabel1">

            <flavor>

              <attribute name="rendering">Label</attribute>

              <attribute name="value">

                <reference type="xml" modelid="showstudent" idref="/students/student[1]/dept">

                </reference>

              </attribute>

            </flavor>

          </component>

 

outstanding:

--engine does not support FF anymore.

   this bug may fixed further. however , it depend on the broswer.

   seems that FF does not support .xml this property.

2. demo file updated.

 

updated 7:

----------------------------------------------------------

1. cursor bug fixed.

2. new way to load data xml file.

    out understanding:

    a. namespacing does not support now.

        it may be supported later.

    e,g;

datamodel defination:

     <datamodel>

      <model id="showstudent">

          <instance src="data_test.xml"/>

      </model>

      <model id="showstudent_2">

          <instance src="data_test2.xml"/>

      </model>

    </datamodel>

using:

<component class="datapaneltype" id="datapanel1">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="modelid">showstudent_2</attribute>

              <attribute name="xmldatastructure">

                        student|@no,name,dept,age</attribute>

            </flavor>

          </component>

 

updated 6:

----------------------------------------------------------

1. several bugs fixed.

2. definate new tag : datapanel as a demo tag to load xml file.

    datapanel has 2 attribute: xmldatafile,xmldatastructure

    datapanel is just a test tag to implement reading xml data file by engine.

    datapanel does not follow GUIXML defination as Link tag does.

    now the defination configure in forms only.

    e,g; as follows:

         <component class="datapaneltype" id="datapanel1">

            <flavor>

              <attribute name="rendering">DataPanel</attribute>

              <attribute name="xmldatafile">data_test.xml</attribute>

              <attribute name="xmldatastructure">student|name,dept,age</attribute>

            </flavor>

          </component>

3. demo file updated.

 

updated 5:

----------------------------------------------------------

1. bug fixed: rendering cause errors.

2. defination support updated. you can configure style also in forms.

    a. frame only support "value" now. style will be work out sometime later.

    b. button style and it's implementation is not changed.

3. demo file updated.

 

updated 4:

----------------------------------------------------------

1. use a new way to fix css parse problem.

2. updated Frame Style.

3. known bug fixed. multi-frames supported.

 

updated 3:

----------------------------------------------------------

1. success to get GUIXML file name from meta tag.

2. img defination updated.

    <attributes type="imgtype">

        <attribute name="value">neko</attribute>

        <attribute name="src">moz.jpg</attribute>

        <attribute name="width">50%</attribute>

        <attribute name="height">50%</attribute>

      </attributes >

3. url defination updated.

     <attributes type="linktype">

        <attribute name="value">Baidu</attribute>

        <attribute name="url">www.baidu.com</attribute> <!-- no "http://" -->

      </attributes >

4. url supported innerLink and outLink.

 

updated 2:

----------------------------------------------------------

1. fixed checkbox

2. implemented button with simple event

3. implemented image

4. finished first demo

5. implemented inner link

 

updated 1:

----------------------------------------------------------

1. css cannot parse correctly through IE and FF has fixed.

2. simplified html file contents.

3. use a new way to start the engine.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

阅读更多
个人分类: Other Java
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭