原文地址 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 |
如果你的应用程序复杂些,那就可能为类考虑不同的设计策略。