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类如下表所示。
| 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 |
如果你的应用程序复杂些，那就可能为类考虑不同的设计策略。