Mozilla技术体系入门
Mozilla开发社区：http://developer.mozilla.org/cn/docs/
XUL
XUL DOC: http://developer.mozilla.org/cn/docs/XUL
XUL 是一个Mozilla使用XML来描述用户界面的一种技术，使用XUL你可以快速的创建出跨平台，基于因特网的应用程序。基于XUL技术的应用程序可以很方便的使用好看的字体、图形以及方便的界面布局，而且也更容易部署和定制。
1. 具体应用
- Firefox扩展－－给浏览器自身添加各种功能的扩展，常用形式有：浏览器用户界面的附加工具条，上下文菜单，或者用户定制等等。要完成这个功能使用的XUL特性被称为重载(overlay)，它将一个源里面提供的UI（本例中，Firefox浏览器），与扩展里面的UI进行合并。扩展也可以应用于其它基于Mozilla的产品例如Thunderbird。
- Standalone模式的XULRunner应用程序－－XULRunner是Mozilla平台的一个打包的版本，它允许创建独立运行的XUL应用程序。运行这些程序不需要浏览器，因为它们拥有自己的可执行文件。 例如Joost。
2. 处理内幕
XUL与HTML的处理方式一样，先读出内容，然后解析为一棵对象树，再对每个对象作处理，使其显示出来。因为XUL是用来定义用户界面的，因此它与HTML用来做显示的功能一样。实际上，在Mozilla中，HTML和XUL，甚至SVG都是使用同样的底层代码来处理的。
3. Chrome包
一个包的文件通常被组织为一个JAR文件。注意，很象Java中的Jar包，都是Zip格式的。但里面可不是Java程序。
通常一个chrome包有三个目录，但它们都是可选的，分别为：content、skin和locale。
4.示例
http://developer.mozilla.org/cn/docs/XUL_%E6%95%99%E7%A8%8B:%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%AA%97%E5%8F%A3
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="findfile-window"
title="查找文件"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Other elements go here -->
</window>
5. XUL UI元素示例
http://www.hevanet.com/acorbin/xul/top.xul
a). 布局 hbox vbox
<vbox flex="1" style="overflow: auto">
</vbox>
b). 按钮 button 事件处理oncommand
<button flex="1" label="6" tabindex="6" oncommand="setText('tab-text','6');" />
SVG
SVG DOC: http://developer.mozilla.org/cn/docs/SVG
SVG （Scalable Vector Graphics）是一个针对二维矢量图形的XML标记语言。简单的说SVG面向图形，XHTML面向文本。SVG与Flash类似，都是用于二维矢量图 形，二者的区别在于，SVG是一个W 3C 标准，基于XML，是开放的，而Flash是封闭的基于二进制格式的。因为都是W 3C 标准，SVG与其他的W 3C 标准，比如CSS, DOM and SMIL等能够协同工作。
<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Box around the image -->
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Visible path -->
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="none" stroke="red" stroke-width="2" />
<!-- Group of elements to animate -->
<g stroke-width="5" stroke="black">
<!-- Stick figure pieces -->
<circle cx="0" cy="-45" r="12" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
<!-- Animation controls -->
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" />
</g>
</svg>
XULRunner
XULRunner DOC: http://developer.mozilla.org/cn/docs/XULRunner
XULRunner是一个单独的“gecko运行时”安装包，可用于启动多种如同Firefox和Thunderbird一样丰富的XUL+XPCOM应 用程序。它提供了安装、升级和反安装这些应用程序的机制。XULRunner还将提供libxul，这个解决方案允许把Mozilla技术嵌入到其它项目和产品中。Joost中的tvprunner.exe (tvp表示TheVeniceProject)即是一个基于XULRunner的程序。
XPCOM (Cross-platform Component Object Model)
XPCOM DOC: http://developer.mozilla.org/cn/docs/XPCOM
到目前为止，我们已经知道 XUL 能够构建各种复杂的用户接口，并用 JavaScript 负责窗口的事件响应。但如果我们想实现更复杂的功能，比如要求 XUL 应用程序和独立运行的 Mail Server 交互，负责发送和收取信件，JavaScript 便显得捉襟见肘了，XPCOM 便是扩展 XUL 功能的途径。
XPCOM 作为一个对象模型，也具备了基本的面向对象理念。其中最重要的基本单位便是接口（Interface）和组件（Component）概念。每个接口（Interface）声明了它所具备的功能和属性，组件（Component）可以继承多个接口，并实现这些接口中的所有功能。这样做的目的是在公用接口中清楚地声明一套 API，由组件（Component）根据需要加以组合和实现，组件实现的改变不会对接口有任何地影响。
XUL本身已经实现了很多组件（Component），XUL 组件列表上有详细的说明，我们可以在Mozilla&Firefox 平台上直接使用这些功能。下面是一个使用 XPCOM 的例子：
例如需要对本地文件进行操作，
- 首先获得已经实现了文件操作功能的组件：
| var localFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); |
请注意，这里的 Components本身也是一个组件，它负责其它组件的生成，查询和管理。"@mozilla.org/file/local;1" 其实是 Mozilla 根据组件各自功能进行分类的规则，从某种意义上也可以称为命名空间。Components.interfaces.nsILocalFile 是我们所需要的具备文件操作功能的接口，最后我们通过 createInstangce() 函数得到了组件引用 localFile。
- 接下来可以用这个组件实现我们所需要的功能：
| function deletFile(filePath){ var localFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); //定位文件或目录路径，filePath例如"/mozilla/ToRemove" localFile. initWithPath(filePath); //删除该目录所有 (true) 内容 localFile.remove(true);
|
此外我们还可以开发并添加新的功能组件(Component)，由于篇幅限制，先不作介绍，读者可以参见 XPCOM。
SpiderMonkey
http://developer.mozilla.org/cn/docs/SpiderMonkey
SpiderMonkey 是Gecko 用C写的 JavaScript 引擎. 它用于不同的Mozilla产品, 并可以用于 MPL/GPL/LGPL tri-license授权协议下。
JavaScript
1. JavaScript基础语法
a) 变量是弱类型的，给同一个变量分配为不同的类型的值是合法的。
b) 代码动态解释，代码以文本形式保存并且在程序运行时解释为机器指令。
2. JavaScript数组
var startupJoostBugs = [];
当用[]时，我们认为定义了一个数组。
使用下标遍历：
for (var i=0;i<startupJoostBugs.length;i++)
{
var obj=startupJoostBugs[i];
}
添加元素
startupJoostBugs.push(obj);
3. JavaScript对象
JavaScript中的对象本质是一个动态Hash Map数组，这个数组里存储的是键值对，键就是对象的成员名，指就是成员的值。JavaScript对象是基于Prototype的，任何JavaScript对象仅仅是一个对象的，它仅仅是一个化装的关联数组。
var tooltipState={};
当用{}时，我们认为定义了一个对象。
引用成员时有两种方式
a). 像数组一样的下标方式
tooltipState['tooltip.extra_toggle_button'] = 'showingAdvertOverlay';
b). 像对象一样的点方式
tooltipState.tooltip_extra_toggle_button = 'showingAdvertOverlay';
假设sayHello是预先定义好的函数
给对象添加新函数
MyObject.sayHello = sayHello;
这样MyObject的sayHello就是指向一个函数。
如果写成
MyObject.sayHello = sayHello();
那么将执行sayHello函数，并且用它的返回值给MyObject的sayHello属性赋值。如果sayHello函数没有返回结果，则它得到的是null。
用法示例：
var OSD={
pauseShown:false,
muteShown:false,
volumeShown:false,
height:100,
width:100,
versionHeight:75,
versionWidth:300,
fadeTime:200,
muteTimer:0,
muteTimeout:4000,
volumeTimer:0,
volumeTimeout:4000,
volumeBars:null
};
OSD.init=function()
{
OSD.volumeBars=document.getElementById('OSDvolumeBars').getElementsByTagNameNS(SVG_NS,'path');
OSD.versionText=document.getElementById('OSDVersionText');
};
4. JavaScript函数
JavaScript函数是正常对象，JavaScript中函数可以附加到对象上，使得它们的行为类似于对象的方法。但是它们也可以在其它上下文中调用，并且在运行时附加到其它对象。
MyObject1={
my_name = “MyObject 1” ;
};
MyObject1.func = function()
{
return this.my_name ;
}
MyObject2={
my_name = “MyObject 2” ;
};
MyObject2.func = MyObject1.func;
var name1 = MyObject1.func(); //”MyObject 1”
var name2 = MyObject2.func(); //”MyObject 2”