Web UI Design

Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式发布，它们遵循BSD协议并且可以免费使用。可以从Sourceforge站点下载完整的项目文件，同时包含相关文档和示例。

yui项目开发人员的BLOG：YUI Blog，交流社区：ydn-javascrīpt on Yahoo! Groups。

准备工作：

1、 下载yui
最新版YUI下载地址：http://sourceforge.net/project/downloading.php?group_id=165715&filename=yui_2.3.1.zip
yui项目文件已经发布在Sourceforge站点，文件包含相关文档，示例和代码。

注：Yahoo没有为yui的运行提供免费的运行环境，你需要运行在你在即Web服务器上。

2、 在你的网页中加入你需要的类库文件

为了使用yui中的组件你必须在你的页面文件中用<scrīpt>指定相关组件的类库文件地址。如果该组件依赖于其他组件，你必须使用<scrīpt>指定所依赖的组件的类库文件地址。

3、 如果有必要，在页面中加入CSS文件

某些yui的控件包含一个相应的CSS文件，用来设定控件的样式。此时，你必须在页面中使用<style>指定相应的CSS文件的地址。你可以通过修改相应的CSS文件达到你想要的效果。

4、 浏览相关文档和示例

每一个组件都包含详细的API文档，并且提供了常用的例子。学习完后，回顾一下所有的API，做到心中有数。因为对于API理解的好坏将影响你对yui的使用效果。

组件介绍 Yui组件分成2类：工具包和控件库

Yui 工具包

Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。

动画（Animation）：在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个"电影效果（cinematic effects）"。这些效果将在你的页面发生变化的时候给用户更好的体验。

连接管理（Connection Manager）：这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（form posts），错误捕获（error handling）和callbacks的全面支持。该工具包也支持文件的上传管理。

DOM：DOM工具包提供更简单的DOM脚本的功能调用方式，包含元素的位置和CSS样式的管理。

拖放（Drag and Drop）：创建可拖放的对象。为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。这个工具包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。

事件（Event）：这个神奇的管理类库给你提供一种简单安全的方法访问浏览器的事件（比如点击和键盘操作）。这个事件封包中还包含了自定义事件对象，它为你的程序交互提供一种发布和订阅事件的机制。

yui控件：

yui控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

这些控件包括：

自动完成（AutoComplete）控件：自动完成控件为文本输入提供一种渐进式的用户体验（streamline user interactions）。控件会提供相似项列表和基于多样化的数据格式的提前键入功能（type-ahead functionality based on a variety of data-source formats），并且可以通过XMLHttpRequest访问服务端的数据。

日历（Calendar）控件：一个用来日期选择的动态图形控件。

容器（Container）控件：一组模仿windows样式的控件，他们包括Tooltip, Panel, Dialog 和 SimpleDialog。其中Module 和 Overlay控件提供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件。

日志（Logger）控件：提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screen console）、Firefox的扩展组件FireBug，或者Safari的Javascrīpt控制台。yui的Debug组件将完整的记录输出信息和调试信息。

菜单（Menu）控件：利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascrīpt构造一个菜单，can be layered on top of semantic unordered lists。

滑块（Slider）控件：提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。

树形（TreeView）控件：提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动态加载。节点元素的展现可以通过CSS修改，比如文件夹视图，TO－DO任务列表或者其他可视化处理

yui的CSS资源

为了让CSS能符合不同等级的浏览器（A-Grade browsers）的标准，我们想了很多。我们把这些作为yui类库的一部分共享出来，希望能在这里得到促进，获得一个简洁的，可维护并在浏览器中表现优秀的设计。

页面网格样式（CSS Page Grids）：7个基本的用css组织子组件的页面框架，支持130种不通的页面布局。

标准的CSS字体（Standard CSS Fonts）：标准的跨浏览器字体样式和大小展现。

标准的CSS排列（Standard CSS Reset）：使用这些CSS声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。

看了这么多控件，无从下手，我决定先从calendar下手，这是一个日历，感觉上相对关联的类库应该少一些，比较简单。先看看examples里面的例子，好多啊，先来一个最简单的Quickstart Tutorial，查看下页面源代码，总体对Yahoo UI的使用有了一个大致的了解。 
在你使用的UI控件的页面组成有3大块： 
第一块导入依赖的JS文件和CSS文件； 
第二块控件实现的JS代码； 
第三块插入到当中的控件，实际就是。 
OK！我们开始使用它吧，把开发需要用的包全部放到项目中去，我是把build文件整个copy过来了，你可以根据自己的需要选择，但是基本上都会用到 yahoo、event、dom这3个包。在自己的项目中新建一个页面，htm、jsp、asp等等什么都可以了，我是用jsp的。 
第一块在内插入： 


<script>"text/javascript" src="build/yahoo/yahoo.js"></script> 
<script>"text/javascript" src="build/event/event.js"></script> 
<script>"text/javascript" src="build/dom/dom.js"></script> 
<script>"text/javascript" src="build/calendar/calendar.js"></script> 
<link type="text/css" rel="stylesheet" href="build/calendar/assets/calendar.css" /> 

这段代码大家应该很好理解了，注意src后面的路径要写正确，不然就看不到显示效果了。 
第二块写实现控件的JS代码了： 


<script> 
YAHOO.namespace("example.calendar"); 
function init() { 
YAHOO.example.calendar.cal = new YAHOO.widget.Calendar("cal","caler"); 
YAHOO.example.calendar.cal.render(); 
} 
YAHOO.util.Event.addListener(window, "load", init); 
</script> 


这几行代码都要写，因为要依赖的，具体函数实现我没有去研究，但是可以看到参数，我们基本可以理解了YAHOO这个对象应该是个全局的对象（本人JS没学过，不知道这个术语对不对），namespace()定义一个名称空间，这句话去掉浏览器就会报错说找不到YAHOO.example.calendar，那我们就暂且理解为namespace()可以初始化YAHOO的上下文了。接下来就开始new一个Calendar对象了，注意第二个参数，我们在div的时候会用到。最后加入了一个load窗口的事件，OK，这个流程基本清楚了。 
第三块，在里面写一个div,注意id属性就是初始化Calendar对象的第二个参数。 



把小猫跑起来吧，看看，是不是出现了一个简单的日历了。Yahoo UI还提供了对Calendar的其他功能以及复杂的Calendar，但是由于我时间有限，我只能抛砖引玉了，希望大家自己去按照这个思路研究，不是很难的，注意：研究的时候多看看http://developer.yahoo.com/yui 页面左侧的每一个控件导航说明，虽然是E文，但是还是可以看懂的。我的目标是DataTable和TreeView。 

好像Yui-ext现在和JQuery结合了,看样子有意思完全脱离Yui了