跨平台界面实现原理XUL

hechengjin

混合型的Web(HTML+DOM+CSS+JavaScript)能提供的东西比传统桌面UI开发所需要的要多得多。于是XML User InterfaceLanguage(XUL)诞生了。XUL引入了一种基于XML的语言，可以用来描述一个对话框或者窗口的布局，就像HTML向浏览器描述Web页面的布局一样。浏览器之下的架构用来处理HTML和XUL，并且发掘它们的共同点。

Netscape/Mozilla XUL UI的核心组件：HTML、DOM、CSS和JavaScript。

XUL首次使用是基于Mozilla代码库的Netscape6里。

XUL基于动态HTML(DHTML)，一组Web标准和技术的集合，开发人员用它来创建Web内容。

1.1   DHTML

DHTML是以下技术的组合:

l  一个标记语言，如HTML。

l  一个文档对象模型(Document Object Model, DOM)。

l  一个脚本语言，通常是Javascript。

l  一个样式系统（比如CSS）

1.2   HTML

Internet用于发布静态内容，并且显示在Web浏览器的语言。一个HTML文档由一组元素(element)和属性(attribute)的集合组成。元素描述了页面的布局，属性则用来润色HTML文档里的元素。

HTML标记里的元素有两种形式：

<element_name attr1=”value” attr2=”value”…>

</element_name>

或者

<element_name attr1=”value” attr2=”value”… />

第一种形式可以嵌套更多的元素。

1.3   脚本语言

脚本语言让网站设计师可以把代码附加到特定的HTML内容或整个网页上。脚本语言可以是嵌套在网页里的，也可以在另外的文件里定义然后包含到网页里的。

内嵌代码使用<script>元素。对特定的元素，代码可以做为属性添加进去。

引入脚本方法1：

<script language=”javascript”>

function function1()

{

}

…

</script>

引入脚本方法2:

<script language=”javascript” src=”myscript.js”/>

引入脚本方法3:

<image src=”surf.png” onmouseover=”handleMouseOver();”/>

1.4   文档对象模型 DOM

和脚本语言一样与元素和属性紧密相联的是文档对象模型，简称DOM。DOM是一个由Web浏览器实现的层次型数据结构，包含了所有页面定义的元素和属性的表达，和一套允许你访问这个结构的API。

脚本语言用DOM来定位和修改元素及其属性。

当浏览器渲染一个页面时，会为其生成一个表示页面的DOM。DOM是一棵树，每个节点都代表一个元素，同时它还保存着构成页面的元素之间的父子关系。

要让脚本访问它，为元素的id属性指派一个唯一的值。

<image id=”surfimage” src=”surf.png”height=”200” />

DOM提供一套可以让脚本语言调用的API来定位DOM之内的元素，并且读写它们的属性。

Var imageElement = document.getElementById(“surfimage”);

如果imageElement为空，表示元素不存在。若存在可以进行如下修改设置

imageElement.src=”wave.png”

正是因为这样的代码才让Web页面含有动态内容，才能称之为DHTML。

1.5   样式系统

由层叠样式表CSS实现。CSS让Web开发人员可以将页面的外观风格从HTML标签里分解出来。

样式表(stylesheet)通过为一个外部文件，由link元素引入：

<link rel=”stylesheet” href=”surfreport.css”type=”text/css” />

样式表由一组规则组成。每条规则都有两个主要部分：selector和声明(declaration)。selector定义了声明应用的上下文。

两个常用的selector是元素名和类别，元素名即界面上的元素。如给文档里的<span>元素添加样式的话，以”span”为名的seletor：

span {declaration}

要使用类别，则只需在元素上指明类别属性即可。如把span的类别属性设置为”messageclass”:

<span id=”message” class=”messageclass”>

Mouse over the icons below to get surfconditions

</span>

相应的selector则是：

messageclass {declaration}

上面提到的声明是一系列属性/值的对；每一对值都以分号结束，并且属性和值之间用冒号隔开。

{font-size:12pt; color:red}

1.6   XUL

XUL里的标记都由XML定义。XUL里的元素就相当于Gtk+、Cocoa或.NET Forms等原生GUI工具包里的widget。

1.6.1   窗口和对话框

<window>

<dialog>

1.6.2   box元素

<hbox> <vbox>用来在窗口或对话框里对齐内容的主要widget。

<spacer>元素可以用来在<vbox>和<hbox>管理的子元素之间创建空格，让窗口的布局以及widget在窗口大小变化时的摆放更具有灵活性

1.6.3   工具条

<toolbar>把一组<toolbarbutton>水平地组织在一起。

1.6.4   菜单

<menubar>

<menu>

<menupopup>

<menuitem>

支持XUL的引擎知道怎么支持不同平台上使用菜单的差异。

1.6.5   控件

<button>

<textbox>

<checkbox>

<radio>

<label>

<progressmeter>

1.6.6   其它widget
1.6.7   XUl编程

和DHTML一样，XUL元素可以链接到JavaScript代码中，同样和解析HTML一样，解析XUL文档得到的也是DOM。最后XML和DHTML都可以用CSS来定义风格。

1.6.8   用XPCOM和XPConnect接口化JavaScript和C/C++

vhdndj

留个脚印```````












540电影网 www.9edy.com/540.html