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 |
如果你的应用程序复杂些,那就可能为类考虑不同的设计策略。
转载于:https://www.cnblogs.com/liuning8023/archive/2011/07/26/2131453.html
Yahoo Web UIs——Java开发者丰富的Web UI相关推荐
- go web 和java web_Go语言的Web框架比较
这是Square工程师对几个Go语言的Web框架比较:A Comparison of Go Web Frameworks 推荐使用net/http作为入门起步的标准库,如果你需要路由方面功能,可使用G ...
- Tomcat(一) Tomcat是什么:Tomcat与Java技术 Tomcat与Web应用 以及 Tomcat基本框架及相关配置
Tomcat(一) Tomcat是什么: Tomcat与Java技术 Tomcat与Web应用 以及 Tomcat基本框架及相关配置 Tomcat是一个被广泛使用的Java WEB应用服务器,我们有必 ...
- Java和PHP在Web开发方面的比较
Java和PHP在Web开发方面的比较,比较PHP和JSP这两个Web开发技术,在目前的情况是其实是比较PHP和Java的Web开发.以下是我就几个主要方面进行的比较: 一. 语言比较 PHP是解释执 ...
- Java Web和Java后端开发的学习路线
基础:比如计算机系统.算法.编译原理等等 Web开发: 主要是Web开发相关的内容,包括HTML/CSS/JS(前端页面).Servlet/JSP(J2EE)以及Mysql(数据库)相关的知识.它们的 ...
- Java Web和Java后端学习之路
摘要: 每个阶段要学习的内容甚至是一些书籍.针对Java Web和Java后端开发 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的 ...
- python web和java web区别_成都汇智动力-谈谈个人认为的JavaWeb开发与PythonWeb开发的区别...
原标题:成都汇智动力-谈谈个人认为的JavaWeb开发与PythonWeb开发的区别 今天这篇文章谈一谈Java Web开发和Python Web开发的区别.在这里我并不是鼓励大家从Java Web转 ...
- safari的java扩展_用 Web 技术为 Safari 编写扩展
原标题:用 Web 技术为 Safari 编写扩展 作者:希德,iOS 开发者,前"有经验的前端开发工程师",就职于网易严选.正在写书<Thinkable SwiftUI&g ...
- java web 服务 构建与运行_Java Web 服务:构建与运行(影印版)
基本详情信息 书名:Java Web 服务:构建与运行 ISBN:9787564119270 作者:卡林(Martin Kalin) 著 出版社:东南大学出版社 出版日期:2010-1-1 其他信息 ...
- 基于Java+MySQL实现(Web)医院门诊信息管理系统【100010554】
医院门诊信息管理系统 第 1 章绪论 1.1 项目背景 随着计算机应用的日益普及和深化,网上办公已经成为了一种趋势.医院信息化近年来也在各个医院迅速发展,医院信息系统公认为新兴的医学信息学的重要分支, ...
- 基于Java+MySQL实现(Web)在线题库管理系统【100010067】
一.在线题库管理系统 1.1 课程题目 基于 JavaWeb 的在线题库管理系统的设计与开发 1.2 课设目的 <软件开发综合实践>是计算机科技与技术专业的一门专业必修课,是一门实践性较强 ...
最新文章
- 【Postman】6 Postman 发送post请求-Json格式
- matlab中dither 函数,(转)matlab里一些简单的函数
- Web GIS离线解决方案
- Matlab ANN人工神经网络 validation checks
- 项目管理自动化实践之路
- 神策数据通过中国信通院 SDK 安全评测
- CentOS 更改Apache默认网站目录
- 打印pdf就一页_PDF 文件转换工具
- 百度云域名解析如何添加? - [未完待续]
- 走进markdown
- 利用axios获取数据并渲染到视图层
- 微服务升级_SpringCloud Alibaba工作笔记0016---Nacos之服务提供者注册
- C语言编程七层塔381,【计算机类职业资格】二级C语言-381 (1)及答案解析.doc
- 两种方法递归斐波那契数列
- [设计模式]解释器模式
- appfuse mysql_Appfuse中文教程
- java gdal开源库_基于GDAL库,读取.grd文件(以海洋地形数据为例)Java版
- 雨落江满泛涟漪 尘拂心海滤情音 相思入云寄清风
- 炼数成金--支持向量机 笔记
- iOS OC 计算代码执行耗时