面向Java开发者的Yahoo富UI组件库

原创
开发 后端
Yahoo富UI组件库是一个开源Javascript库,被用于开发基于AJAX的富用户界面。本文介绍了YUI能够做些什么,如何以OO设计的思路去开发网页和类,什么是JavaScript的良好代码习惯,以及如何通过继承类来创建符合特定需求的类。

【51CTO快译】Yahoo用户界面(YUI)是一个用于开发基于AJAX的富用户界面的开源Javascript库。新的Yahoo邮箱使用的就是YUI,可以想象这个库有多么强大的功能了。本文是三篇文章系列中的***篇,旨在帮助并不精通JavaScript的Java开发者在服务器端框架下(如JavaServer Pages,Struts或Spring等)开发web应用。从本文中,JavaScript的新手们可以学习到如何使用YUI来开发及设计,并了解到很多面向对象的JavaScript编程。JavaScript熟手们可以把本文当做YUI库的一个介绍。

YUI简介

基本上,YUI库是一个web应用各个方面相关组件的集合。主要分为一下几类:

◆组件/控件:

容器型组件(Container components),如面板,工具提示栏,对话框等。

UI控件(UI widgets),如按钮,日历,数据表格,下拉菜单,页码标注器,富文本编辑器等。

◆用于与服务器端交换信息的组件

◆用于控制DOM以及事件的组件

◆用于管理动画,拖曳,页面等的组件

每个组件的YUI源代码都有三种类型,在为你写的应用程序排错的时候很有助益。

◆标准型(Standard form):此类型用于理解组件的执行。

◆排错型(Debug enabled):开启此类型会显示排错信息。

◆压缩型(Compressed):此类型将代码中的空白清理掉,以提升下载速度。

JavaScript编程常见错误

JavaScript应用的开发与排错是相当繁琐的工作,尤其是对于Java开发者来说。错误不明显,即使用Firebug一类的JavaScript排错器也是一样。以下列出一些常见的JavaScript编程失误,以及其解决方法。

◆在定义变量的时候忘记使用关键词var定义本地变量,导致程序调用了函数外的变量。这种错误很难排除。

◆JavaScript中全都是函数,所以每次创建一个类的新实例时都必须使用关键字new。不然的话,JavaScript会调用该函数,并将结果赋值于等号左边的变量。

◆引用函数时不可在函数名称后使用圆括号,否则会变成调用函数。

◆输入DataTable组件的列宽,在IE和Firefox下显示不同。Firefox下比IE下要短20像素。

◆JavaScript在不同浏览器中行为不同。所以当你修改应用的时候要在不同的浏览器下测试效果。

◆如果你使用一个新的YUI组件,却忘记了include你的JavaScript源代码文件,你不会看到错误提示,但组件也无法工作。此问题可通过YUI加载器(YUI Loader)下载请求的源文件来解决,当然我更倾向于将组件与其所需求的源文件相联系。这样便可以精确的控制什么需要下载什么不要下载——和Java程序中import类的过程有点像。

#p#

YUI之OO(面向对象的)JavaScript设计

AJAX框架问世之前,JavaScript还算不上是一个应用开发平台。尽管它支持OO设计,JavaScript仅仅被当做一个脚本语言,用于实现有限的动态网页效果。为充分发挥JavaScript的OO设计,YUI在自己所有组件中都使用了OO设计。

以下部分举例说明了JavaScript中的OO编程方法,并介绍了构建OO JavaScript应用类的思路。YUI库提供的类十分有助于这种开发过程。

创建名字空间(Namespaces)

在企业软件中,将类按照名字空间下的行为来分类是非常普遍的做法。所以在学习创建类和对象之前,有必要了解名字空间。

如果你要把你所有的名字空间归到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文件中定义多个类,但***的做法是一个文件只定义一个类。

定义类

定义一个类有两种方法:建立一个实体对象(object literal),或定义一个函数。实体对象一般用于建立静态类,此类包含静态方法,无需通过构造器初始化便可使用。以下代码通过建立实体对象的方法定义了一个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) { // 构造器
var t = title; // 私有变量

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

/**
* Public method
*/
this.refresh = function () {
// 刷新主页
}
};

以下为创建实例和使用类的方法:

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) {
//实现login功能的代码
}
});

实现类的继承

继承可以通过YAHOO.lang.extend方法来实现。考虑以下Main的继承类refresh方法是如何创建的:

main.js文件:

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

DevX.myapp.AppMain = function () {
//呼叫超级类构造器
DevX.myapp.AppMain.superclass.constructor.call(this, 'App Main');

//延伸类具体初始化
}

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

DevX.myapp.AppMain.prototype.refresh = function () {
//修改refresh行为方法
}

关键词prototype(原型)指的是类的构造。

Web应用设计

至此,一个Java开发者对以上myapp的例子一定心存一些疑问。使用YUI就不用写HTML了吗?这个库和Java Swing API一样么?对于这两个问题,答案都是“否”。之前描述的应用使用HTML页面实现基本的UI元素。只是,每个页面现在都得到了JavaScript的支持,而且当需要时,这个JavaScript又可以使用YUI和其他的JavaScript库。YUI将被用来实现页面UI元素的事件处理(event handling),AJAX服务器交流,类似数据表格一类的UI元素,标注页码等等。

表格1提供了一些为web应用设计类时需要考虑的原则。假设你的应用有两个页面,每个页面都有一些UI元素,HTML和JavaScript类应当如同表格1中描述的方式工作。

表格1 你的应用中的HTML和JavaScript类

HTML 和 JavaScript 类 描述
/cxt/page1/Page1.html UI元素,版面
/cxt/page1/page1.css page1的样式css
/cxt/page1/page1.js page1的主类。组件初始化,注册事件,处理方法回调,与服务器交换信息
/cxt/page1/page1_util.js page1的Utility方法
/cxt/page1/page1_datatable.js page1的数据表格实例浓缩
/cxt/page2/Page2.html ?
/cxt/page2/page2.js ?
/cxt/shared/js/util.js 通用utility方法
/cxt/shared/js/myapp-datasource.js 自定义的数据源
/cxt/shared/js/myapp-connection.js 自定义的服务器连接类
/cxt/shared/css/myapp-table-skin.css 数据表格的CSS

如果你的应用比这样的简单页面+富UI的模式更复杂,那么你设计类的时候还是考虑一些其他的策略吧。

结束语

通过以上文字,你应该了解了YUI能为你的应用做些什么,如何以OO设计的思路去开发网页和类,JavaScript的良好代码习惯,以及如何基于一个继承的类来创建符合自己需求的类。

原文:Yahoo's Rich Web UIs for Java developers

作者:Narayanan A.R.

【编辑推荐】

  1. 2008年RIA平台发展回顾
  2. 如何使用ASP.NET AJAX访问Web Services
  3. Sun正式推出JavaFX 1.0 RIA三足鼎立局面确立
责任编辑:yangsai 来源: 51CTO.com
相关推荐

2011-04-14 10:05:16

BlackBerry

2011-04-14 10:03:32

UI组件BlackBerry

2011-03-21 13:31:24

UI

2011-04-14 10:34:08

BlackBerry

2019-01-16 18:22:24

机器学习人工智能计算机

2012-06-13 01:23:30

开发者程序员

2017-08-28 14:28:44

Python文档编程正确姿势

2017-04-01 18:00:08

开发者数据库

2013-07-12 09:39:44

SDK经济学移动开发者B2D

2016-11-08 20:57:51

文档型语言编程利器

2019-08-27 09:08:52

后端队列系统

2019-04-09 15:12:43

开发者技能工具

2015-11-24 09:17:01

产品设计UI

2012-06-29 10:51:44

Windows Pho

2014-02-01 21:31:10

JavaScriptJS框架

2012-03-31 16:35:53

Metro UIAndroid

2011-03-15 14:26:28

Java

2015-07-10 15:57:24

惠普开发者测试

2012-11-13 10:34:03

PythonWeb

2023-12-08 09:35:37

点赞
收藏

51CTO技术栈公众号