Embed Size (px)
DESCRIPTION
Citation preview
使用 YUI 函式庫
2008/11/20 @ YZU
快速建立 Web 2.0 程式
講者：josephj
Hi! 我是 Joseph
跑步環島 2008.5.18，屏東楓港
•在 Y 工作 3 年
•前 2.5 年是前端工程師•今年 5 月當傳教士-開發者與 Y 的橋樑✓社群合作✓技術推廣✓教育訓練
YDN Evangelist
@josephj6802http://josephj.com
就是愛分享本週是 Rasmus Lerdolf 週
相關連結
• http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg
• http://josephj.com/entry.php?id=184
• http://josephj.com/entry.php?id=186
Agenda
•什麼是前端工程（F2E）•認識 YUI•實例演練
前端工程師
Front-end Engineer
什麼是前端工程師？
• 撰寫 HTML / CSS / JavaScript
• 告訴瀏覽器該怎麼做
• 所有「檢視原始碼」看得到的都是處理的範圍
SOUNDS SIMPLE!
no.
Dat
a Tr
ansp
ort
data
: cus
tom
, xm
l,
js
onbe
havi
or: j
sm
ixed
: new
xht
ml
(X)HTML DOM JavaScript
Specification Implementation
Bugs [ Theory / Practice ]
BOM API
DOM API
CSS
server
Macintosh
Safari Firefox Opera
Windows
OperaIE5, 6, 7 Firefox
Linux, Unix, Mobile
10,000+ UAs
Dat
a Tr
ansp
ort
data
: cus
tom
, xm
l,
js
onbe
havi
or: j
sm
ixed
: new
xht
ml,
(X)HTML DOM JavaScript
Specification Implementation
Defects [ Theory / Practice ]
BOM API
DOM API
CSS
server
MacintoshSafari Firefox Opera
WindowsOperaIE5, 6, 7 Firefox
Linux, Unix, Mobile10,000+ UAs
knowledge areas: 7dimensions: x 4
platforms: x 3browsers per platform: x 4
rendering modes: x 2
=672
usability, internationalization, localization, visual design,
accessibility, information architecture, security, build processes, performance,
benchmarking, devices, portability
from Lifted©2007 Pixar Animation Studios
所以我們建立了...
在瀏覽器上建立使用者 UI（控制項）
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
YUI 有著最好的瀏覽器支援度
http://blogs.computerworld.com/nytimes_iphone_browser_marketshare
即使是 iPhone 上的瀏覽器，YUI 也支援
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
Google Chrome 也一視同仁 ;)
Button + Menu + Container + ... = RTE Editor
結構複雜、但使用起來簡單愉快
且保證在每個主流瀏覽器都支援
無障礙網頁（Accessbility）
YUI 核心
YUI開發工具
YUI 函式集
YUI 控制項
YUI 核心
• 取得 HTML 物件參考ex. document.getElementById() 可改寫為 YUD.get()
• 綁事件ex. 將標籤內的 onClick 改寫 YUE.on(‘click’, doSomething)
事件處理與 DOM 的存取是所有 JS 函式庫的核心
YUI 函式集YAHOO.util.* : 好用的 Web 2.0 功能
• AJAX 相關一般 AJAX 功能、跨網域存取、JSON 解析、資料來源處理、歷史紀錄
• 炫麗技巧拖拉、動畫、縮放區塊大小
• 實用功能Cookie 存取、Selector 存取、物件導向
Browser History Manager解決 AJAX 沒有上一頁、下一頁的問題
http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153
點選下方的資料會更新
更新內容離頂端過遠，用傳統作法會讓使用者不便且個人資料較少 SEO 的問題因此決定採用 AJAX
一般的 AJAX 程式網址不會更新
多了這一串，可以回到上一頁或把此網址加入最愛但還是維持下面的狀態
YUI 控制項
• 自動完成• 按鈕• 日曆• 圖表• 顏色選取• 視窗• 資料表格• 截圖
• 版面管理員• 選單• HTML 編輯器
• Slider
• 頁籤組• 樹狀瀏覽• 上傳
YAHOO.widget.* : 功能強大的且易擴充的控制項
在瀏覽器上建立使用者 UI（控制項）
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
•效能檢測、Test Case、Log 偵錯
•CSS / JavaScript 的壓縮工具
•提供 CDN 讓開發者直接使用
YAHOO.widget.* : 讓你的開發及產出更順暢
YUI 開發工具集
YUI Compressor
Y! Slow檢測網頁效能的好工具
• Reset 將所有標籤預設樣式歸零
• Fonts相對字型大小、可被縮放
• Grids快速製作彈性 DIVs+CSS 版面
YUI CSS 基礎
grids.css
reset.css
fonts.css
輕鬆建立版型
讓使用者可縮放字型大小
讓每個瀏覽器的預設樣式相同
側邊欄寬度為 240px
平均分配 50%, 50%
版面寬度 950px
YUI 有哪些優點？
最符合使用者需求你每天都在用的網站是？
所有的 Library 必需符合使用者經驗的設計
Problem Summary
The user needs to enter an item into a text box which could ambiguous or hard to
remember and therefore has the potential to be mis-typed.
EXAMPLE:
Auto completion of contacts in Yahoo! Mail Beta
Use When
The suggestions can be pulled from a manageable set of data.
The input item can be entered in multiple ways.
The input item can be matched with a specific data item in the system.
Speed and accuracy of entry is an important goal.
The total number of items would be too large or inconvenient for displaying in a
standard drop down box.
Solution
Layout
Use a standard text box for input.
Label the text box to match the user's expection of what field will be searched against.
Interaction
As the user types, display a list of suggested items that most closely match what the
user has typed. Continue to narrow or broaden the list of suggested items based on the
user's input.
Display the suggested items list in a drop down box directly underneath the text box.
The suggested items list may be based on the complete set of data or more narrowly
based on other criteria such as each item's frequency of use.
When available, show multiple fields of information for each suggested item. In the
Yahoo! Mail example above, two fields are presented: the contact's full name and the
contact's email address.
Highlight the closest matching item within the suggested items list.
Show the matched item as first in the list.
Highlight the background of the matched item.
When multiple fields are shown for each suggested item the match may occur
with the initial characters of any of the fields presented.
For each suggested item in the suggest items list show the characters that exactly
match the user's input. When multiple fields are shown in a suggested item the
matching characters may appear in any of the fields presented. In the example below,
the characters 'Yu' have been typed by the user. The match is on three items. Notice
that the first item matched on the contact's email address '<yuiblogger.com>' whereas
the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.)
Allow the user to delete a character of input and display the previous suggested items
list.
Allow the user to complete the input field by pressing the Tab key or Enter; key. The
current matched item in the suggested items list will be accepted as the value for the
input field.
Allow the user to optionally highlight an item of their choice from the suggested item list
with the mouse or with the up and down arrow keys.
Allow the user to cancel the suggested items list by pressing the Esc key. The drop
down list will close. Subsequently pressing the Tab key or Enter key will accept the
value from the input field. However, typing more characters after hitting the Esc key will
restart the auto completion behavior displaying the suggested items list.
If multiple input items are allowed in a single input field, allow the user to use the
Comma key to separate each input item.
Pressing the comma key will complete an individual item match.
The auto complete behavior restarts when the user begins typing characters for
the next input item.
Rationale
Reducing the number of keystrokes allows for faster user input.
Showing additional formatting information in the suggested items list (like the email
address in the example above) removes ambiguity.
Continual feedback helps the user narrow in on the correct choice.
Accessibility
Label the text box to match the user's expection of what field will be searched against.
Allow the user to highlight a desired match either using a mouse or navigating to it with
the up or down arrow keys.
Allow the user to complete the form by pressing the Tab or Enter keys.
Allow the user to cancel suggestions by pressing the Esc key.
Allow the input field to receive keyboard focus by pressing the Tab key.
Once the edit field is in focus make sure that the focus stays in the edit field during
autocomplete.
Do not send any page refreshes when updating the field (page refreshes will signal
assistive technology to start reading the page again.)
The insertion cursor should move as the left/right arrow keys are pressed in the text
field.
QUICK JUMP
Solution
Rationale
Accessibility
RELATED PATTERNS
Calendar Picker
AS USED ON YAHOO!
Yahoo! Mail Beta
Yahoo! Maps Beta
Yahoo! My Web 2
BLOG
Blog Article
Y! UI CODE EXAMPLES
Auto Complete
Component
Y! Search (JSON)
Y! Search (XML)
In-Memory (array)
In-Memory (function)
Flickr (XML)
Flat data
Playground
Show with revisions
This work is licensed under a
Creative Commons Attribution 2.5
License.
Design Pattern Library
Auto Complete
Copyright © 2005-2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
Developer Network Home Help Site Search
Yahoo! Developer Network > Design Pattern Library > Auto Complete
超完整的範例目前在 YUI 官網上超過 300 個範例
各類文件把你教到會
Yahoo! User Interface Blog
In the Wild for November 30thNate Koechley 11/30/07 19:45:25
Implementation Focus: TripItEric Miraglia 11/14/07 11:22:42
Caridy Patiño Mayea’s Bubbling Library UpdatedEric Miraglia 11/07/07 09:23:45
Implementation Focus: NestoriaEric Miraglia 11/06/07 17:58:27
Using the Yahoo Global Object to Manage ObjectInheritance and Composition: Four New YUIExamplesEric Miraglia 11/06/07 17:54:03
YUI Forum on Yahoo! Groups
Using DataTable with Drag and Dropguiltyspark05 12/03/07 21:52:02
Re: autocomplete and ie layoutGopal Venkatesan 12/03/07 20:29:02
Re: connection manager problemGopal Venkatesan 12/03/07 20:20:00
Re: Cant get a connect manager return from.ASMX webservice into a Jtssha 12/03/07 20:19:06
Please tell me the reason (about treeview)liaolliso.2007 12/03/07 19:09:31
Cant get a connect manager return from .ASMXwebservice into a JSONfredpal99 12/03/07 17:01:09
Re: fixed-width layout with 100% background - is itpossible?Jim Davis 12/03/07 15:38:13
YUI on del.icio.us
bookmark on del.icio.us
tags: css yui javascript library webdesign ajaxweb2.0 programming ui development yahoo
saved by 7335 people
Getting Started
1. Check out the examples of YUI in action. We recommend starting withthe Event Utility and Dom Collection examples; Event and Dom are part ofthe YUI Core (along with the YAHOO Global Object) and provide animportant foundation for JavaScript developers using YUI. Once you'vereviewed those foundational pieces, go on to explore utilities like Drag andDrop and Animation or UI controls like Button, Calendar and TabView. Ifyou're interested in YUI's CSS components, read through the examples forReset, Base, Fonts, and Grids in that order.
2. Remember that there are full user's guides for each component here onthe website. If you have any questions about a component as you play withthe examples, check out the component's user's guide (by following any ofthe links along the left side of the page) or the searchable APIdocumentation.
3. You have cheat sheets for each component available on landing pagesand downloadable as a full set. These documents support the online user'sguides by providing concise print documentation for YUI components.
4. Start building. You can include YUI scripts and CSS from the YUIdownload (in the /build directory) or directly from Yahoo! servers. The
YUI Loader Utility is a client-side loading package that can dynamically pullin YUI scripts as needed, whether from your servers or from ours.
5. Become a member of the YUI community. YUI developers andimplementers share thoughts and solutions and provide a helping hand inour forums. YUI developers also contribute to the YUIBlog, where you'll findin-depth articles, videos and other great content about YUI and the world offrontend engineering.
Licensing
All of the YUI Library components are provided free of charge under a liberalBSD license.
Articles
Graded Browser Support: This article details the browser-supportphilosophy we use in developing the YUI Library. Graded BrowserSupport provides a sane path to achieving accessibility and gracefuldegradation while still building richly interactive interfaces in thebrowser.Skinning YUI: YUI components get their look and feel from a visual"skin" that you can modify or replace in your own applications.
Cheat Sheets
Cheat Sheets for the YUI Library provide quick references to the key methods,properties, and syntax patterns of each component. When you find yourselfelbow-deep in a coding problem, sometimes it's quicker to turn to these ratherthan firing up a browser to review documentation and examples — and reviewingthe cheat sheets can help you discover hidden gems you didn't know were there.
These one page references aren't comprehensive, but we think you'll find themvaluable to have on hand. (Cheat Sheets are currently provided for all YUIUtilities, nearly all UI Controls, and for the YUI CSS foundation.)
Support & Community
The YUI Library and related topics are discussed on the on the ydn-javascriptmailing list.
In addition, please visit the YUIBlog for updates and articles about the YUILibrary written by the library's developers.
Filing Bugs & Feature Requests
The YUI Library's public bug tracking and feature request repositories are locatedon the YUI SourceForge project site. Before filing new feature requests or bugreports, please review our reporting guidelines.
Guidelines for YUI feature requests and bug reports.Review current bug list or file a new bug.Review current feature requests or file a new feature request.
Copyright © 2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
Developer Network Home Help
[more videos ]YUI Theater
Nate Koechley — "The YUI CSS
Foundation"
Senior YUI engineer Nate Koechley guides youthrough the YUI CSS foundation in this October 2007tech talk.
enter email address
Site Search Search
The Yahoo! User Interface Library (YUI)
Using YUI:
FAQ
Getting Started
Licensing
Articles
Cheat Sheets
Support &Community
Filing Bugs &Feature Requests
Searchable APIDocumentation:
API docs are availabefor every YUIcomponent. You cansearch the APIdocumentation withinstant filtering on themain API page.
The YUI Compressor:
The YUI Compressor isa build-processcomponent that helpsyou minify yourJavaScript and CSS.Documentation anddownload informationare available here.
YUI Core:
The YAHOOGlobal Object(base requirementfor all YUIcomponents)
DOM Collection(conveniencemethods for DOMinteractions)
Event Utility (eventnormalization andtools)
YUI Library Utilities:
Animation Utility
Browser HistoryManager
ConnectionManager (forXHR/Ajax)
DataSource Utility
Drag and DropUtility
Element Utility
ImageLoader Utility[experimental]
The YUILoaderUtility
The YUI TestUtility
YUI LibraryControls/Widgets:
AutoComplete
Button Control
Calendar
Color Picker
Container(including Module,Overlay, Panel,Tooltip, Dialog,SimpleDialog)
DataTable
Logger
Menu
Rich Text Editor
Slider
TabView
TreeView
YUI Library CSSTools:
CSS Reset(neutralizesbrowser CSSstyles)
CSS Base (appliesconsistent stylefoundation forcommon elements)
CSS Fonts(foundation fortypography andfont-sizing)
CSS Grids (morethan 1,000 CSS-driven wireframesin a 4KB file)
The Yahoo! User Interface Library (YUI)
The Yahoo! User Interface (YUI) Library is a set of utilities andcontrols, written in JavaScript, for building richly interactive webapplications using techniques such as DOM scripting, DHTML andAJAX. The YUI Library also includes several core CSS resources. Allcomponents in the YUI Library have been released as open sourceunder a BSD license and are free for all uses.
Download YUI version 2.3.1, including full APIdocumentation and more than 200 functional examples
from Sourceforge.
The library's developers blog at the YUI Blog and the YUI Library communityexchanges ideas at YDN-JavaScript on Yahoo! Groups.
Yahoo! UI Library
Home
YUIBlog
YUI Discussion Forum
YUI on Sourceforge
API Documentation
YUI Examples Gallery
Powered by YUI
YUI Theater
YUI License
YUI Articles
YUI FAQ
Graded Browser Support
Skinning YUI
Bug Reports/Feature Requests
Serving YUI Files from Yahoo!
Security Best Practices
YUI Components
Animation
AutoComplete
Browser History Manager
Button
Calendar
Color Picker
Connection Manager
Container
DataSource
DataTable
Dom
Drag & Drop
Element
Event
ImageLoader [experimental]
Logger
Menu
Rich Text Editor
Slider
TabView
TreeView
Yahoo Global Object
YUI Loader
YUI Test
Reset CSS
Base CSS
Fonts CSS
Grids CSS
YUI Tools
YUI Compressor
Yahoo! Developer Network
Home
About Us
Developer Network Blog
YDN FAQ
Support Communities
Working Examples
每個元件都提供了三種版本
有完整註解的版本
-debug 偵錯版
-min 最小化版
版本改進的歷程說明
完整 API 文件
每個元件最常使用的方法
節省每次查詢的時間
速查表
YUI 劇場
共計約 50 個小時講者由 YUI 成員或專家所組成developer.yahoo.com/yui/theater
YUI 的書
雜誌評比名列前茅
控制項的量
維護是否容易
下載速度
文件齊全度
客製化容易
密碼強度顯示器
跟桌面一樣的選取方式
用 YUI 來製作簡報系統（為去年的 OSDC 所做的）
翻頁（Carousel）模組
手風琴模組
用於「知識+名片」的手風琴模組
用 YUI 做的俄羅斯方塊
提供專業視覺設計師的樣式
有哪些網站使用 YUI？
Q & A
問：YUI 是否會收費？
YUI 是基於最鬆散的 BSD License 條款授權
你可以自由引用、修改、甚至放在商業軟體販售
問：為什麼 Open Source ?
• Fasten Improvement 回應使用者的需求
• Fun 與使用者互動
• Innovation 有更多創新的應用
• Recruiting 培養前端工程師
• 也沒辦法不開放，檢視原始碼就看光了
• 現在你可以簽約成為 YUI Contributor
問：跟別的函式庫
jQuery、Prototype、Dojo、GWT
有何差別？
• 純 JavaScript 函式庫
• 最齊全的文件
• 不改變 JavaScript 原本的結構
• 不污染、違反網頁標準化的精神
• 客製化最容易
• 經過完整的 QA 流程測試
• 在標準瀏覽器上皆能正常運作
問：有沒有 IDE 編輯器？為什麼不體驗一下打字的爽快感呢...？
Aptana
問：有沒有跟後端程式
結合的計劃？
no.
• 無法滿足所有族群需求
• ASP, PHP, RoR, Python, JAVA...
• 必需考慮後續維護的問題
• 但有 3rd Party 自行研發
YUI 實例演練
YUI 練功坊
http://www.wallpapergate.com/wallpaper22725.html
練習網站：http://josephj.com/training/yzu/
1. HTML 模組在 Yahoo! 每一頁都是由許多的模組所構成
<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>
<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>
模組的結構
一個 ID 代表一個模組不能重複
.hd, .bd, .ft 分別代表模組的header、body、footer
＃yhtw_masthead
＃ykpmt
＃ykpsb
＃ykpimt
＃ykpimqa ＃ykpimr
＃ykpadv
＃ykpug
＃ykpiht＃ykpiht
＃ykpsb
•ykp 為知識+ 的 prefix
•sb 為 search box 的縮寫
•檔案：inc/search_box.php
<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div></div>
form .extra
[HTML]<style>#ykpsb { margin-bottom:10px;}#ykpsb form { float:left;}#ykpsb .extra { float:right;}</style>
[CSS]
因每個模組有 id，所以 CSS 可以寫得很 namespace
好處就是很安全，不同模組不會互相干擾
練習 1：HTML 模組 （3 Mins）http://josephj.com/training/yzu/html-module.html
1. 替此文章模組取個適合的 id2. 加上 hd, bd, ft 的 class3. 利用前頁的方法設定 CSS
color:#369;background:#ffe;
font:bold 16px;
2. YUI Gridshttp://developer.yahoo.com/yui/grids/builder/
快速 DIV + CSS 版面產生器
3. YUI AJAXhttp://josephj.com/training/yzu/yui-ajax.html
Web 2.0 的基礎
YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
A 網站伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 整份網頁重新整理
傳統流程：
使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
A 網站伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 只有小部分更新
AJAX流程：
YUI AJAX
練習 3：YUI Connectionhttp://josephj.com/training/yzu/yui-ajax.html
4. YUI Get Utilityhttp://josephj.com/training/yzu/yui-get.html
存取跨網域的資料
http://api.flickr.com/services/feeds/photos_public.gne?tags=yzu&lang=en-us&format=json<script src=”
“></script>
練習 4：YUI Gethttp://josephj.com/training/yzu/yui-get.html
5. YUI 選單輕鬆地做出巢狀式浮動選單
練習 5：YUI 選單http://josephj.com/training/yzu/yui-menu.html
1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件
2.執行這個物件的 render() 方法
練習 5：YUI 選單http://josephj.com/training/yzu/yui-menu.html
autosubmenudisplay (true 或 false) 是否自動顯示子選單
hidedelay （毫秒）滑鼠移開 n 毫秒後才隱藏
lazyload (true 或 false) 是否滑過去時才建立子選單
常用屬性：
6. YUI 按鈕輕鬆做出互動性豐富的按鈕 UI
YUI Button
一個按鈕該有的互動效果， YUI Button 都提供
更提供各種形式的按鈕
HTML 預設的按鈕醜又缺乏互動
練習 6：YUI 按鈕http://josephj.com/training/yzu/yui-button.html
1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕
7. YUI 視窗Web 2.0 的「開新視窗」
YUI Container 家族
YAHOO.widget.Panel
YAHOO.widget.Panel
YAHOO.widget.Dialog
YAHOO.widget.SimpleDialog
練習 7：YUI 視窗http://josephj.com/training/yzu/yui-panel.html
1. 請以 var oPanel = new YAHOO.widget.Panel([模組 id], [屬性]); 將 #panel 模組轉換為視窗（屬性設定請看下一頁）
2. oPanel.render(document.body)： 將模組 append 到最外層3. oButton.addListener(‘click’, onButtonClick)
onButtonClick 函式：oPanel.show();
練習 7：YUI 視窗http://josephj.com/training/yzu/yui-panel.html
close 是否要有關閉的按鈕
fixedcenter 是否要置中對齊
modal 是否為獨佔模式
underlay shadow’, ‘matte’
visible 預設是否顯示
width 視窗的寬度
{屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}
Questions?
