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

的时候无需考虑布局等琐碎的问题，从而可以专注于如何去编写按钮的事件代码。