面向Java開發者的Yahoo富UI組件庫

作者：楊賽譯 2009-03-24 08:51:30

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.

【編輯推薦】

2008年RIA平臺發展回顧
如何使用ASP.NET AJAX訪問Web Services
Sun正式推出JavaFX 1.0 RIA三足鼎立局面確立

責任編輯：yangsai 來源： 51CTO.com

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

面向Java開發者的Yahoo富UI組件庫