Yahoo!User Interface Libray 介绍

Yahoo!User Interface Libray 介绍

-Written by 浪子@cnblogs.com (06-08-21)
第一章 简介

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

yui项目开发人员的BLOG:YUI Blog,交流社区:ydn-javaScript on Yahoo! Groups。

准备工作:

1、 下载yui

yui项目文件已经发布在Sourceforge站点,文件包含相关文档,示例和代码。

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

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

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

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的Javascript控制台。yui的Debug组件将完整的记录输出信息和调试信息。

菜单(Menu)控件:利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascript构造一个菜单,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声明来排除页面的空白部分并且公共元素的样式兼容各种浏览器的展现。


阅读更多

Android User Interface问题

08-07

[color=#FF6600]In an Android application, the user interface is built using View and ViewGroup objects. There are many types of views and view groups, each of which is a descendant of the View class.rnrnView objects are the basic units of user interface expression on the Android platform. The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative.rnrnA View object is a data structure whose properties store the layout parameters and content for a specific rectangular area of the screen. A View object handles its own measurement, layout, drawing, focus change, scrolling, and key/gesture interactions for the rectangular area of the screen in which it resides. As an object in the user interface, a View is also a point of interaction for the user and the receiver of the interaction events.[/color]rnrn以上一段是google官方对android user interface的介绍。rnrn[color=#008000]首先看In an Android application, the user interface is built using View and ViewGroup objects.[/color]rn我的理解是这样的:rnrn用户界面是构建在"View"和"ViewGroup"对象之上的。[color=#FF0000]这里我的疑问是:View 对象是何物?[/color]是不是可以这样理解:rn[code=Java]rnclass View()rnrn//propertiesrn....rn//methodsrn....rnrn[/code]rn这只是一个类,按照我对面向对象模糊的认识:应该由这个类生产一个对象rn[code=Java]rnView view = new View();rn[/code]rn这样,似乎就做出了一个view对象,不知可否这样理解呢?我觉得这样的理解肯定是不对的。换句话说:这里的“对象”二字该如何解释?rn对于"ViewGroup",有着同样的疑惑。rn[color=#008000]接着往下看:There are many types of views and view groups, each of which is a descendant of the View class.rn[/color]rn这句话说的是什么呢?View类的后代有很多类型的"views"和"view groups"?我无法理解。rnrn继续看:[color=#FF9900]View objects are the basic units of user interface expression on the Android platform. The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative.[/color]rn这一段的大概意思是说:View对象是Android平台用户界面的基本单元,“View”类是“widgets”类的基类,基本用来提供界面上的小对象,比如按钮之类的。"ViewGroup"类是"layouts"类的基类,是用来提供布局架构的。不知道对不对,还请各位斧正rnrn接下来看最后一段:rnrn[color=#FF6600]A View object is a data structure whose properties store the layout parameters and content for a specific rectangular area of the screen. A View object handles its own measurement, layout, drawing, focus change, scrolling, and key/gesture interactions for the rectangular area of the screen in which it resides. As an object in the user interface, a View is also a point of interaction for the user and the receiver of the interaction events[/color]rnrn我的理解是这样的:“View” 对象是一数据结构:其"properties(性质)"存储“布局”参数。“and content for a specific rectangular area of the screen”这紧接着的一句,我不知是何意。rn"A View object handles its own measurement,layout,drawing,focus change, scrolling ...."rn这句的意思是否是:"View"对象"handle"(掌管?这里的handle如何理解才合理?)着自己的很多性质“比如 layout,drawing,等等”,最后一句大概是说:View还是用户和事件交互的纽带。rnrn还有一个问题:第二段明明说:"View Class"是负责界面上的小玩意的,比如按钮等等,而“ViewGroup Class”则是负责界面布局的。但第三段中说明了"View object"中的"property"存储了布局参数。这我就不理解了?那还用ViewGroup Class干嘛?rnrn深深感觉小弟理解能力有问题,看Android 的 SDK ,很难理解。rn看Android的书,更是不好理解....rn这里,请大家帮我看看....谢谢啦rn

Android User Interface的疑惑

08-08

[color=#FF6600]In an Android application, the user interface is built using View and ViewGroup objects. There are many types of views and view groups, each of which is a descendant of the View class. rnrnView objects are the basic units of user interface expression on the Android platform. The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative. rnrnA View object is a data structure whose properties store the layout parameters and content for a specific rectangular area of the screen. A View object handles its own measurement, layout, drawing, focus change, scrolling, and key/gesture interactions for the rectangular area of the screen in which it resides. As an object in the user interface, a View is also a point of interaction for the user and the receiver of the interaction events.[/color]rnrn以上一段是google官方对android user interface的介绍。rnrn首先看[color=#008000]In an Android application, the user interface is built using View and ViewGroup objects.[/color] rn我的理解是这样的: rnrn用户界面是构建在"View"和"ViewGroup"对象之上的。这里我的疑问是[color=#FF0000]:View 对象是何物?[/color]是不是可以这样理解:rnrn[code=Java]rnclass View()rnrn//propertiesrn....rn//methodsrn....rnrn[/code]rn这只是一个类,按照我对面向对象模糊的认识:应该由这个类生产一个对象rn[code=Java]rnView view = new View();rn[/code]rn这样,似乎就做出了一个view对象,不知可否这样理解呢?我觉得这样的理解肯定是不对的。换句话说:这里的“对象”二字该如何解释? rn对于"ViewGroup",有着同样的疑惑。rn[color=#008000]接着往下看:There are many types of views and view groups, each of which is a descendant of the View class.[/color]rn这句话说的是什么呢?View类的后代有很多类型的"views"和"view groups"?我无法理解。rn继续看:[color=#FF6600]View objects are the basic units of user interface expression on the Android platform. The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative. [/color]rn这一段的大概意思是说:View对象是Android平台用户界面的基本单元,“View”类是“widgets”类的基类,基本用来提供界面上的小对象,比如按钮之类的。"ViewGroup"类是"layouts"类的基类,是用来提供布局架构的。不知道对不对,还请各位斧正 rnrn接下来看最后一段: rnrn[color=#FF6600]A View object is a data structure whose properties store the layout parameters and content for a specific rectangular area of the screen. A View object handles its own measurement, layout, drawing, focus change, scrolling, and key/gesture interactions for the rectangular area of the screen in which it resides. As an object in the user interface, a View is also a point of interaction for the user and the receiver of the interaction events [/color]rnrn我的理解是这样的:“View” 对象是一数据结构:其"properties(性质)"存储“布局”参数。“and content for a specific rectangular area of the screen”这紧接着的一句,我不知是何意。 rn"A View object handles its own measurement,layout,drawing,focus change, scrolling ...." rn这句的意思是否是:"View"对象"handle"(掌管?这里的handle如何理解才合理?)着自己的很多性质“比如 layout,drawing,等等”,最后一句大概是说:View还是用户和事件交互的纽带。 rnrn还有一个问题:第二段明明说:"View Class"是负责界面上的小玩意的,比如按钮等等,而“ViewGroup Class”则是负责界面布局的。但第三段中说明了"View object"中的"property"存储了布局参数。这我就不理解了?那还用ViewGroup Class干嘛? rnrn深深感觉小弟理解能力有问题,看Android 的 SDK ,很难理解。 rn看Android的书,更是不好理解.... rn这里,请大家帮我看看....谢谢啦

没有更多推荐了,返回首页