XML用户界面语言（XUL）开发入门(6)

您或许在 清单 4 中注意到，有一个叫做 preview 的HTMLdiv。这是一个用来预览博客条目的HTML区域。它让用户进入正常的HTML，然后单击 preview 按钮查看外观。但是如何将编辑器中的HTML转换成在 preview 区域上显示的HTML。回头看看XUL代码，您将看到一个 preview() 函数，它在用户单击 Preview 按钮时被调用。清单 6 展示了在 blog.js 文件中的 preview() 函数。

清单 6. preview() 函数

function preview(){
　　var preview = document.getElementById("preview");
　　preview.innerHTML = document.getElementById("entry").value;
　　var sigImg = document.createElement("img");
　　sigImg.src = document.getElementById("canvas").toDataURL();
　　preview.appendChild(sigImg);
}

这对于做过很多HTML/JavaScript 处理的人来说，应该很熟悉，尤其是做过 Ajax 开发的人。这正是我们习惯编写的 JavaScript 类型：使用元素的 ID 来获得元素，然后使用HTML元素的 innerHTML 属性将其转储到HTML中。您还需要注意如何从用户的签名中获取数据，然后将其转换成一个数据 URL。这使您可以将签名显示为图像。该数据 URL 是一张采用 64 位编码的 PNG 格式的图像。甚至可以将这些数据保存到本地文件中。画布元素还有很多其他功能，并且可以在XUL应用程序中任意使用。

关于名称空间

您或许注意到，清单 4 声明了 2 个名称空间。一个是XUL名称空间，在XUL文件中创建每个 UI 控件时使用。同时，还有一个指向HTML模式的默认名称空间。这跟大多数XUL文件的设置方式是相反的。通常，XUL 名称空间是默认的，并且任何HTML元素都需要添加前缀。但是在这个例子中，我们想让用户将HTML输入到博客编辑器中。也可以解析预览窗格的内容，然后添加合适的HTML前缀（或者想要使用的其他前缀）。在这些内容被转储前，将此前缀作为标记的一部分。

修饰应用程序外观

您的应用程序看起来很单调，可以很轻松地为其添加更好的外观。所需的只是一个小小的 CSS，就像在Web页面上使用一样。可以将类和/或 ID 添加到每个部件上。可以为这些类编写 CSS 选择器，或者用特定部件的 ID 为其编写 CSS 选择器，就像创建Web页面时的操作一样。

保存博客条目

现在把博客条目保存到本地文件系统中。XUL 允许通过 JavaScript 访问本地 I/O 操作。如果熟悉 JavaScript，就会知道它没有内建这些功能。这正是 XPCOM 发挥作用的地方。请看一下清单 7。

清单 7. 在 JavaScript 中启用本地 I/O

function save() {
　　try {
　　　　netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
　　} catch (e) {
　　　　alert("Permission to save file was denied.");
　　}
　　var file = Components.classes["@mozilla.org/file/local;1"]
　　　　.createInstance(Components.interfaces.nsILocalFile);
　　file.initWithPath( savefile );
　　if ( file.exists() == false ) {
　　　　alert( "Creating file... " );
　　　　file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
　　}
　　var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
　　　　.createInstance( Components.interfaces.nsIFileOutputStream );
　　/* Open flags
　　#define PR_RDONLY　　　 0x01
　　#define PR_WRONLY　　　 0x02
　　#define PR_RDWR　　　　 0x04
　　#define PR_CREATE_FILE　0x08
　　#define PR_APPEND　　　0x10
　　#define PR_TRUNCATE　　 0x20
　　#define PR_SYNC　　　　 0x40
　　#define PR_EXCL　　　　 0x80
　　*/
　　/*
　　** File modes ....
　　**
　　** CAVEAT: 'mode' is currently only applicable on UNIX platforms.
　　** The 'mode' argument may be ignored by PR_Open on other platforms.
　　**
　　**　 00400　 Read by owner.
　　**　 00200　 Write by owner.
　　**　 00100　 Execute (search if a directory) by owner.
　　**　 00040　 Read by group.
　　**　 00020　 Write by group.
　　**　 00010　 Execute by group.
　　**　 00004　 Read by others.
　　**　 00002　 Write by others
　　**　 00001　 Execute by others.
　　**
　　*/
　　outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
　　//var output = document.getElementById('blog').value;
　　var output = serialize();
　　var result = outputStream.write( output, output.length );
　　outputStream.close();
}