Yahoo Web UIs——Java开发者丰富的Web UI

原文地址 http://www.devx.com/Java/Article/41159/0/page/1

 

用服务器端框架开发Web应用程序的Java开发人员往往不具备JavaScript知识，来创建丰富的用户界面。学习Yahoo用户界面（Yahoo Web UIs，以下简称YUI）可以帮助你弥合这一差距。

YUI是一个开源JavaScript库，用于开发基于AJAX的丰富的用户界面。新的YahooMail就使用了YUI，因此你可以想象这个库是多么强大。本文由三部分组成，第一部分的目标是针对不是很精通JavaScript，而是利用服务器端框架（如JSP、Struts或Spring）开发Web应用程序的Java开发人员。在YUI安装部分，JavaScript的新手将看到如何安装YUI和利用YUI设计Web应用程序，以及学习JavaScript面向对象编程。对于已经使用JavaScript的开发人员来说，本文旨在介绍YUI库。

接下来两部分将包含如下内容：

1,  容器，布局，部件，事件处理，AJAX组件和​​服务器端交互；

2,  DataTable，分页，排序，JSON，和错误处理。

YUI结构

本质上，YUI库是一个提供开发Web应用程序各个方面的组件集合。它们大致可分为以下几类：

1,  控件/部件:

    1)  容器组件，像 Panel、Tooltip、Dialog等

    2)  UI 部件，像 Button、Calendar、DataTable、Menu、Paginator、Rich Text Editor等

2,  用于与服务器端模块交互的组件

3,  用于处理DOM和事件处理的组件

4,  用于管理动态的组件，像drag、drop、page layout等

为了便于调试，YUI源代码为每个组件提供三种方式：

1,  标准方式：这种方式有助于你理解组件是如何实现的。

2,  调试：这种方式会输出调试信息。

3,  压缩：这种方式去掉了空格，有助于提高下载性能。该方式用于部署。

JavaScript编程的困境

开发和调试JavaScript应用程序是件痛苦的事，尤其是对Java开发人员。错误不容易被发现，即使你用JavaScript调试器，像Firebug。考虑以下常见的JavaScript编程误区和解决方法：

1,  如果在声明期间，函数中的局部变量没有var关键字，那么这个局部变量的值将被保留在函数域之外。这使得确定什么地方出现错误很难。

2,  JavaScript中的一切都只是一个函数，所以你必须使用new关键字来创建一个类的实例。否则，JavaScript调用这个函数，并把返回值赋给左操作数。

3,  当传递一个引用给函数时，不要用大括号“｛｝”作为函数名的结尾。这实际上将调用该函数。

4,  传递列的宽度给DataTable组件时，在IE和FireFox中是不同的。设置列宽为20个像素，在IE中要比在FireFox大。

5,  JavaScript代码的行为在不同的浏览器会有所不同。因此，当你改变应用程序时，必须在所有浏览器上测试你的应用程序。

如果您使用一个新的YUI组件，忘记包含JavaScript源文件，你不会得到任何错误信息，只是该组件不起作用、不能工作而已。一个办法是使用YUI装载器，按需下载源文件，但是我更喜欢另一个简单的办法，在使用时连接单个的组件源文件。这种方式，你可以准确地控制下载——有点类似于Java开发时导入需要的类。

YUI面向对象JavaScript设计

JavaScript并不作为一个应用程序开发平台，直到Ajax框架出现。尽管JavaScript支持面向对象（OO）设计，但它只是作为一种脚本语言来对待，完成最小化动态网页的行为。为了利用JavaScript开发中的面向对象设计，YUI在它所有的组件中使用了面向对象设计。

以下各节在JavaScript中说明面向对象编程，并引入一个方法，帮助你用面向对象的JavaScript应用程序结构化你的类。YUI库就使用这种开发风格。

创建命名空间

对于企业级软件，基于行为在命名空间中组织类，是很常见的。因此，在学习创建类和对象之前，学习命名空间是很重要的。

如果你想让你所有的命名空间都在Yahoo下，你可以这样：

YAHOO.namespace("myapp");
YAHOO.namespace("myapp.util");
YAHOO.namespace("myapp.ui");

YAHOO.myapp.Main = function() {
}

这段代码创建了三个名字空间，以及命名空间YAHOO.myapp下的一个类。

类似地，你可以定义自己的命名空间：

if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};

DevX.myapp.Main = function() {
}

管理文件

你可以在同一个JavaScript文件定义多个类，但是分开的话，更好。

定义类

你可以用两种方式来定义一个类：直接利用对象，或是定义一个函数。直接利用对象通常用于包含所有静态方法的类，不需要构造函数来初始化。下面的代码片段演示了如何使用直接利用对象的方法定一个Util类。

假设文件util.js 内容如下：

if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};

DevX.myapp.Util = {
     TIMEOUT : 5, // Timeout constant in minutes for server requests
     isBrowserIE : function() {
          return YAHOO.env.ua.ie > 0;
     }
}

若想使用这个类，你不需要创建Util类的实例，而是直接访问它的成员就行：

if(DevX.myapp.Util.isBrowserIE()) {
    // IE specific behavior
}

你也可以利用函数来定义一个类。假设main.js文件内容如下。

if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};

DevX.myapp.Main = function (title) { // Constructor
     var t = title; // Private variable

     /**
     * Private method
     */
     function getTitle() {
          return t;
     }

     /**
     * Public method
     */
     this.refresh = function () {
          // Refresh the main page
     }
};

实例化并使用这个类的代码如下：

var main = new DevX.myapp.Main('Home page');
main.refresh();

当向类添加更多的功能时，你的构造函数会一直增长，因为所有的成员都定义在构造函数里。若想定义额外的方法和字段，你可以使用YAHOO.lang.augment方法在构造函数外定义你自己的方法和字段。考虑如何向类Main添加login方法：

YAHOO.lang.augment(DevX.myapp.Main, {
     login : function(username, password) {
          // perform login operation
     }
});

实现继承

通过YAHOO.lang.extend 方法，你可以实现继承。考虑继承Main类，改变refresh方法的行为。

如下例子，main.js文件内容如下：

if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};

DevX.myapp.AppMain = function () {
     //Call the super class constructor
     DevX.myapp.AppMain.superclass.constructor.call(this, 'App Main');

     // Derived class specific initialization goes here
}

YAHOO.lang.extend(DevX.myapp.AppMain, DevX.myapp.Main);

DevX.myapp.AppMain.prototype.refresh = function () {
     // Modify refresh behavior
}

关键字 prototype 引用类的结构。

Web 应用程序设计

现在，一个Java开发人员可能对myapp例子有两个问题。使用YUI就不用编写HTML？这个库是不是跟Java Swing API一样？两个问题的答案都是“否”。前面描述的应用程序使用基本UI元素的HTML页面。然而，每个页面都支持JavaScript代码，使用YUI和其他JavaScript库要按应用程序的需求。YUI处理UI元素引发的事件，与AJAX服务、分页等交互。

表1为Web应用程序提供设计原则。假设你的应用程序有两个页面，每个页面有各种UI元素，HTML页面和JavaScript类如下表所示。

表1. 你应用程序的HTML和JavaScript类

HTMLand JavaScript 类	描述
/cxt/page1/Page1.html	Page1的UI 元素，布局
/cxt/page1/page1.css	page1的CSS
/cxt/page1/page1.js	page1的Main类。初始化组件、注册事件、处理方法回调，执行服务器端交互
/cxt/page1/page1_util.js	page1的工具方法（仅仅是一些静态方法）
/cxt/page1/page1_datatable.js	page1中使用的DataTable实例的抽象
/cxt/page2/Page2.html	Page2的UI 元素、布局
/cxt/page2/page2.js	page2的Main类
/cxt/shared/js/util.js	通用的工具方法
/cxt/shared/js/myapp-datasource.js	自定义的 DataSource
/cxt/shared/js/myapp-connection.js	自定义的服务器端连接类
/cxt/shared/css/myapp-table-skin.css	DataTable的CSS

如果你的应用程序复杂些，那就可能为类考虑不同的设计策略。