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

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

YDN

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

Open API
AJAX API
Open API

Yahoo! Course

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

Agenda
• Frontend Engineering
• YUI Overview
• Workshop
9

Frontend Engineering

• HTML / CSS / JavaScript
•
•

SOUNDS SIMPLE!

no.

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

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

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

Yahoo
CSS Sprites

TabView JavaScript

No Image Not Loaded

Screen
<link rel=\"stylesheet\" type=\"text/css\" href=\".../i8/ykp_qack_min_20080707.css\" media=\"screen\">

Print
<link rel=\"stylesheet\" type=\"text/css\" href=\".../i8/ykp_print_min_20080707.css\" media=\"print\">

15

from Lifted
©2007 Pixar Animation Studios

...

http://developer.yahoo.com/yui

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

YUI YUI
Core Utilities
YUI YUI
Controls Dev Tools

YUI
• YAHOO Object
• DOM Utility
• Event Utility

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

Browser History Manager
• AJAX
•
•
•

AJAX
SEO
AJAX

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

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

YUI Compressor

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

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

grids.css
fonts.css
reset.css

950px

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

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

YUI

Library

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

YUI
• YUI 275
•
• Logger
•
•

Yahoo! UI Library YUI Theater [more videos ]
Home The Yahoo! User Interface Library (YUI) Nate Koechley — \"The YUI CSS
YUIBlog
The Yahoo! User Interface (YUI) Library is a set of utilities and Foundation\"
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

-debug

-min

API

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

YUI

YUI
OSDC

Carousel

+

YUI

YUI

Questions for
YUI Overview

Q Open Source ?

• Fasten Improvement
• Fun
• Innovation
• Recruiting
•

Q
jQuery Prototype Dojo GWT

• JavaScript
•
• JavaScript
•
•
• QA
•

Q IDE

Aptana

Q

no.

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

YUI
Workshop

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

YUI Grids

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

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

Questions?

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