3.4 美丽不打折——基于 JxLib 打造多变界面

3.4       美丽不打折——基于 JxLib 打造多变界面

灵活网页布局最能吸引用户的就是它的界面。灵活网页布局的界面，比起基本网页布局来，不仅更为好看，也更易于编辑。之所以灵活网页布局的界面能具有这么多的优势，与 JxLib 的功劳是分不开的。

JxLib 框架和 Fusion 师出同门，都是由 DM Solutions Group 最初发起的。 JxLib 框架旨在可以快速开发出复杂的网页界面。 JxLib 除了编写了大量诸如菜单、工具栏、网页内窗格等等有用控件之外，对于我们常见的网页元素（ Element ）的 Javascript 脚本也进行了扩展，从而使得这些网页元素能够支持更多的新特性。比如通过使用 JxLib ，我们可以让页面元素能够在窗口改变大小时自动调整其位置和大小，等等。限于篇幅，这里我们不去过多的介绍 JxLib 的框架结构或是 API 。如果您对此有兴趣，可以访问 JxLib 的官方主页 http://www.jxlib.org

Fusion 的 Widget 中最常用的两种界面元素是窗格（比如 TaskPane ）和按钮（比如 About ），下面我们将会依次介绍如何使用这两种界面元素。

与按钮不同，窗格是不需要用容器（ Container ）来承载的，如果您的 Widget 想要使用窗格作为界面元素，您需要完成以下事情：

1.       在 Widget 信息文件（放在 WidgetInfo 文件夹中用于描述 Widget 信息的 XML 文件）中的 ContainableBy 属性设为空。这是用来告诉生成应用程序定义文件的程序，这个 Widget 不能放置在容器中。

2.       将在页面模板文件（相应模板文件夹的主 html 文件）中用来放置该窗格的 div 的 id 设置为该 Widget 的名称。

3.       在 initializeWidget 函数中编写如何初始化该窗格中的各个界面元素的代码。在这个函数中，您可以用 this.domObj 来访问放置该窗格的 div

由于窗格和窗格本身差异很大，所以对于窗格， Fusion 并没有做更多的处理。用户需自行完成窗格中各个控件的布局和事件处理代码（当然，用户还是可以调用 JxLib 的已有函数来帮助完成这些工作）。

相比窗格而言， Fusion 对于容器内控件有着更多的支持。按钮就是一个很好的例子。下面我们就看看，如何实现一个基于按钮的 Widget ：

1.       将该 Widget 的 uiClass 默认值设置为 Jx.Button 。

2.       如果您需要做某些初始化工作的话，将其放置到 initializeWidget 函数中。当然，如果您不需要做初始化工作的话，完全可以忽略这一步。

3.       将点击按钮执行的代码放置在 activate 中。

如果您需要这个按钮具有按下和抬起两个状态（如 Select ），情况则稍有不同：

1.       除了将 uiClass 默认值设置为 Jx.Button 之外，还需要将 isExclusive 的默认值为 true

2.       将按下按钮的代码放置在 activate 函数中，将抬起按钮的代码放置在 deactivate 函数中。

我们可以看出，由于 Fusion 框架为我们做了相当多的事情，所以我们在开发 Widget 的时候无需考虑布局等琐碎的问题，从而可以专注于如何去编写按钮的事件代码。