2008/10/5 在中央大學介紹 YUI 使用者函式庫 Part 1.

1. The YUI Library
Know me, Touch me, Love me
2008/10/3 @ NCU

2. YDN Evangelist
Hi! Joseph YDN
• Y 3
• 2.5
• 5
- Y
✓
✓
✓
@josephj6802
http://josephj.com
josephj6802@gmail.com
2008.5.18

3. YDN

4. Open Hack Day
9/20 ~ 21
9/12 ~ 13

5. Open API
AJAX API
Open API

7. Yahoo! Course

8. Yahoo!
PHP Rasmus Lerdorf
11/9～16 ∕ ∕ ∕Yahoo

9. Agenda
• Frontend Engineering
• YUI Overview
• Workshop
9

10. Frontend Engineering

11. • HTML / CSS / JavaScript
•
•

12. SOUNDS SIMPLE!

13. no.

14. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
data: custom, xml,
mixed: new xhtml
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server

15. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
knowledge areas: 7
CSS
(X)HTML
dimensions: xJavaScript
DOM
4 BOM API
DOM API
platforms: x 3
Specification
data: custom, xml,
mixed: new xhtml,
browsers perDefects platform: x 4
Data Transport
Implementation
behavior: js
json
rendering modes: x 2
[ Theory / Practice ]
server
=672

16. usability, internationalization,
localization, visual design,
accessibility, information
architecture, security, build
processes, performance,
benchmarking, devices, portability

17. Yahoo
CSS Sprites

18. TabView JavaScript

19. No Image Not Loaded

21. Screen
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_qack_min_20080707.cssquot; media=quot;screenquot;>

22. Print
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_print_min_20080707.cssquot; media=quot;printquot;>

23. 15

24. from Lifted
©2007 Pixar Animation Studios

25. ...

26. http://developer.yahoo.com/yui

27. http://tw.developer.yahoo.com/yui/

28. YUI YUI
Core Utilities
YUI YUI
Controls Dev Tools

29. YUI
• YAHOO Object
• DOM Utility
• Event Utility

30. YUI
• Animation • Element
• Browser History • Get
• Connection (Ajax) • ImageLoader
• Cookie • JSON
• DataSource • Resize
• Drag & Drop • Selector

31. Browser History Manager
• AJAX
•
•
•

32. AJAX
SEO
AJAX

34. YUI
• AutoComplete • ImageCropper
• Button • Layout Manager
• Calendar • Menu
• Charts • Rich Text Editor
• Color Picker • Slider
• Container Tooltip, etc.)
(Panel, Dialog,
Family • TabView
• TreeView
• DataTable
• Uploader

35. YUI
• Logger • YUI Hosting
• YUI Test • YUI Skins
• Profiler
• ProfileViewer
• Compressor
• YUI Loader / YUI Get

36. YUI Compressor

37. Y! Slow
• GZip Expire Header
• CSS / JavaScript
• Request
• Request
• JavaScript

40. YUI CSS
• Reset • Grid Builder
• Base
• Fonts
(optional)
• Grids
DIVs +
CSS

41. grids.css
fonts.css
reset.css

42. 950px

43. #doc3 : 100%
.yui-t6 : 300 on right

44. #doc4 : 974px
.yui-t3 : 300 on left

45. YUI

47. Library

48. Developer Network Home Help Site Search
Design Pattern Library
Yahoo! Developer Network > Design Pattern Library > Auto Complete
Auto Complete
QUICK JUMP
Problem Summary
Solution
The user needs to enter an item into a text box which could ambiguous or hard to
Rationale
remember and therefore has the potential to be mis-typed.
Accessibility
EXAMPLE:
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
Auto completion of contacts in Yahoo! Mail Beta Y! Search (JSON)
Y! Search (XML)
Use When In-Memory (array)
In-Memory (function)
The suggestions can be pulled from a manageable set of data.
Flickr (XML)
The input item can be entered in multiple ways. Flat data
The input item can be matched with a specific data item in the system. Playground
Speed and accuracy of entry is an important goal.
Show with revisions
The total number of items would be too large or inconvenient for displaying in a
standard drop down box.
Solution This work is licensed under a
Creative Commons Attribution 2.5
License.
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.
Copyright © 2005-2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings

50. YUI
• YUI 275
•
• Logger
•
•

53. Yahoo! UI Library YUI Theater [more videos ]
Home The Yahoo! User Interface Library (YUI) Nate Koechley — quot;The YUI CSS
YUIBlog
The Yahoo! User Interface (YUI) Library is a set of utilities and Foundationquot;
YUI Discussion Forum
YUI on Sourceforge controls, written in JavaScript, for building richly interactive web
API Documentation applications using techniques such as DOM scripting, DHTML and
YUI Examples Gallery
AJAX. The YUI Library also includes several core CSS resources. All
components in the YUI Library have been released as open source
Powered by YUI
under a BSD license and are free for all uses.
YUI Theater
YUI License Download YUI version 2.3.1, including full API
YUI Articles documentation and more than 200 functional examples
YUI FAQ from Sourceforge.
Graded Browser Support
Skinning YUI
The library's developers blog at the YUI Blog and the YUI Library community
exchanges ideas at YDN-JavaScript on Yahoo! Groups.
Bug Reports/Feature Requests
Serving YUI Files from Yahoo!
Security Best Practices Using YUI: YUI Core: YUI Library
YUI Components FAQ The YAHOO Controls/Widgets:
Animation Getting Started Global Object AutoComplete
AutoComplete Licensing (base requirement Button Control
Browser History Manager Articles for all YUI Calendar
Button components) Color Picker
Cheat Sheets Senior YUI engineer Nate Koechley guides you
Calendar DOM Collection Container
Support & through the YUI CSS foundation in this October 2007
Color Picker
(convenience (including Module,
Community tech talk.
methods for DOM Overlay, Panel,
Connection Manager Filing Bugs & interactions) Tooltip, Dialog,
Container Feature Requests
Event Utility (event SimpleDialog)
DataSource
Searchable API normalization and DataTable Yahoo! User Interface Blog
DataTable tools)
Dom Documentation: Logger In the Wild for November 30th
Drag & Drop API docs are availabe YUI Library Utilities: Menu Nate Koechley 11/30/07 19:45:25
for every YUI Rich Text Editor
Element Animation Utility Implementation Focus: TripIt
component. You can
Event Browser History Eric Miraglia 11/14/07 11:22:42
search the API Slider
ImageLoader [experimental]
documentation with Manager Caridy Patiño Mayea’s Bubbling Library Updated
Logger Connection TabView
instant filtering on the Eric Miraglia 11/07/07 09:23:45
Menu main API page. Manager (for TreeView
Rich Text Editor XHR/Ajax) Implementation Focus: Nestoria
YUI Library CSS Eric Miraglia 11/06/07 17:58:27
Slider The YUI Compressor: DataSource Utility
Tools: Using the Yahoo Global Object to Manage Object
TabView The YUI Compressor is
TreeView a build-process Drag and Drop CSS Reset Inheritance and Composition: Four New YUI
Yahoo Global Object component that helps Utility (neutralizes Examples
you minify your browser CSS Eric Miraglia 11/06/07 17:54:03
YUI Loader Element Utility
JavaScript and CSS. styles)
YUI Test ImageLoader Utility
Documentation and CSS Base (applies
Reset CSS [experimental]
download information consistent style
Base CSS The YUILoader foundation for YUI Forum on Yahoo! Groups
are available here. Utility
Fonts CSS common elements)
The YUI Test Using DataTable with Drag and Drop
Grids CSS CSS Fonts guiltyspark05 12/03/07 21:52:02

58. -debug

59. -min

61. API

63. YUI
50
YUI
developer.yahoo.com/yui/theater

64. YUI

71. YUI
OSDC

72. Carousel

74. +

75. YUI

79. YUI

81. Questions for
YUI Overview

82. Q Open Source ?

83. • Fasten Improvement
• Fun
• Innovation
• Recruiting
•

84. Q
jQuery Prototype Dojo GWT

85. • JavaScript
•
• JavaScript
•
•
• QA
•

86. Q IDE

87. Aptana

88. Q

89. no.

90. •
• PHP, ROR, Python, JAVA...
•
• Developer

91. YUI
Workshop

92. http://www.wallpapergate.com/wallpaper22725.html

93. YUI Grids

95. YUI Connection Manager
http://josephj.com/training/yui-monday/connection-manager/

96. YUI Get Utility
http://josephj.com/training/yui-monday/get/

97. Questions?

98. Thank You
http://developer.yahoo.com/yui/
josephj@yahoo-inc.com