跨平台界面实现原理XUL
本帖最后由 hechengjin 于 2015-11-15 11:11 编辑混合型的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++
留个脚印```````
static/image/common/sigline.gif
540电影网 www.9edy.com/540.html
页:
[1]