YUI Introduction @ NCTU

Web 2.0
YUI

http://www.slideshare.net/josephj/josephj-yui-nctu

2009/3/10 @ NCTU
josephj

@josephj6802
http://josephj.com
josephj@yahoo-inc.com

Hi! josephj

@josephj6802
http://josephj.com

Hi! josephj

• 2.5 F2E

@josephj6802
http://josephj.com

Hi! josephj

• 2.5 F2E

• 0.5 Evangelist

@josephj6802
http://josephj.com

Hi! josephj

• 2.5 F2E

• 0.5 Evangelist

• SDE

@josephj6802
http://josephj.com

2008.5
ITHome http://farm4.static.ﬂickr.com/3251/3017901989_9252512e77_o.jpg

YDN 3/13 @

• + API
• API

• YAP

Agenda

• F2E
• YUI

Agenda

• F2E
• YUI
•

• HTML / CSS / JavaScript
•

• HTML / CSS / JavaScript
•
•

(X)HTML

Speciﬁcation

server

(X)HTML

Speciﬁcation
Implementation

server

(X)HTML

Speciﬁcation
Implementation
Bugs

server

(X)HTML

Speciﬁcation
Implementation
Bugs
[ Theory / Practice ]

server

CSS

BOM API
(X)HTML DOM JavaScript
DOM API

Speciﬁcation

Data Transport
data: custom, xml,

mixed: new xhtml
Implementation

json
behavior: js
Bugs

server

Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile

CSS

BOM API
DOM API

Speciﬁcation

Data Transport
data: custom, xml,

mixed: new xhtml
Implementation

json
behavior: js
Bugs

server

Safari Firefox Opera Firefox Opera 10,000+ UAs
IE5, 6, 7

CSS

BOM API
DOM API

Specification

data: custom, xml,

mixed: new xhtml,
Data Transport
Implementation

behavior: js
json
Defects

server

Safari Firefox Opera Firefox Opera 10,000+ UAs
IE5, 6, 7

knowledge areas: 7
CSS

dimensions: xJavaScript
4 BOM API
(X)HTML DOM
DOM API

platforms: x 3
Specification

data: custom, xml,

mixed: new xhtml,
platform: x 4
browsers perDefects

Data Transport
Implementation

behavior: js
json
rendering modes: x 2

server
=672

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

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

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

from Lifted
©2007 Pixar Animation Studios

http://developer.yahoo.com/yui

UI
UI YUI UI

Button Def. But.

Menu
Label

Text Field
Label

Label

Label

Text Area

click me

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

1. YUI
YAHOO.util.* : Web 2.0

1. YUI

• AJAX
AJAX JSON

1. YUI

• AJAX
AJAX JSON

•

1. YUI

• AJAX
AJAX JSON

•

•
Cookie Selector

Browser History Manager
AJAX
http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153

2. YUI
YAHOO.widget.* :

• •
• •
• • HTML
• • Slider
• •
• •
• •
•

Y! Slow
http://developer.yahoo.com/yslow

4. YUI CSS
• Reset

• Fonts

4. YUI CSS
• Reset

• Fonts

• Grids
DIVs+CSS

grids.css

fonts.css

reset.css

950px

240px

50%, 50%

doc3 = 989px
.yui-t6 = Right, 300px

doc4 = 974px
.yui-t3 = Left, 300px

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
Playground
The input item can be matched with a specific data item in the system.
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

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

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

• Fasten Improvement
• Fun

• Fun
• Innovation

• Fun
• Innovation
• Recruiting

• Fun
• Innovation
• Recruiting
•

• Fun
• Innovation
• Recruiting
•
• YUI Contributor

jQuery Prototype Dojo GWT

• JavaScript
•
• JavaScript

• JavaScript
•
• JavaScript
•

• JavaScript
•
• JavaScript
•
•

• JavaScript
•
• JavaScript
•
•
• QA

• JavaScript
•
• JavaScript
•
•
• QA
•

•

• ASP, PHP, RoR, Python, JAVA...

•

• 3rd Party

YUI

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

http://josephj.com/training/nctu/

<div id=”nav”>
<h2> </h2>
</div>
ID .hd, .bd, .ft
<p> </p> header body footer
</div>
<a href=”...”> ... </a>
</div>
</div>

yhtw_masthead

ykpmt

ykpsb

ykpimt ykpadv

ykpimqa ykpimr

ykpug

ykpiht ykpiht

ykpsb

• ykp + preﬁx
• sb search box
• inc/search_box.php

id CSS namespace
form .extra

[CSS]
[HTML]
<style>
<div id=”ykpsb”>
#ykpsb {
<div class=”bd clearfix”>
margin-bottom:10px;
<form ...>
}
...
#ykpsb form {
</form>
float:left;
<div class=”extra”>
}
...
#ykpsb .extra {
</div>
float:right;
</div>
}
</div>
</style>

1 HTML 3 Mins
http://josephj.com/training/nctu/html-module.html

1. id
2. hd, bd, ft class
3. CSS
font-weight:bold;
font-size:16px;

background:#ffe;
color:#369;

2. YUI Grids
DIV + CSS

http://developer.yahoo.com/yui/grids/builder/

YUI Grid Builder

http://developer.yahoo.com/yui/grids/builder/

3. YUI AJAX
Web 2.0
http://josephj.com/training/nctu/yui-ajax.html

YUI AJAX
YUI AJAX Connection Manager

A

YUI AJAX

1. Request

A

YUI AJAX

2. Request

1. Request

A

A

YUI AJAX

2. Request

1. Request

A
3.
A

YUI AJAX

2. Request

1. Request

A
3.
A

4.

YUI AJAX

AJAX

1. JavaScript Request

A

YUI AJAX

AJAX
2. Request


A

A

YUI AJAX

AJAX
2. Request


A
3.
A

YUI AJAX

AJAX
2. Request


A
3.
A

4.

3 YUI Connection
http://josephj.com/training/nctu/yui-ajax.html

4. YUI Get Utility
http://josephj.com/training/nctu/yui-get.html

JavaScript
AJAX
http://tw.yahoo.com http://tw.lifestyle.yahoo.com

JavaScript
AJAX

<script src=”...”></script>

JavaScript
AJAX


http://josephj.com/training/ncu-tsung/script.html

JavaScript
AJAX


<script src=”http://www.josephjiang.com/training/ncu-tsung/data.js “></script>


JavaScript
AJAX


var outputString = ‘hello’;
getData(outputString);



JavaScript
AJAX


<script>
function getData (data) { var outputString = ‘hello’;
alert(data);
getData(outputString);
}
</script>


http://api.ﬂickr.com/services/rest/?
method=ﬂickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text=
&format=json

YUI Get Utility
<script/>
•

YUI Get Utility
<script/>
•
• YAHOO.util.Get.script(url)

YUI Get Utility
<script/>
•
• ex1. YUI jQuery...

YUI Get Utility
<script/>
•
• ex2. JSON

YUI Get Utility
<script/>
•
• ex2. JSON
<link/>
•

YUI Get Utility
<script/>
•
• ex2. JSON
<link/>
•
• YAHOO.util.Get.css(url)

YUI Get Utility
<script/>
•
• ex2. JSON
<link/>
•
• YAHOO.util.Get.css(url)
• ex.

4 YUI Get Utility
http://josephj.com/training/nctu/yui-get.html

5 YUI
http://josephj.com/training/nctu/yui-menu.html

1. new
YAHOO.widget.MenuBar([ id]);
YUI
2. render()

5 YUI
http://josephj.com/training/nctu/yui-menu.html

(true false)
autosubmenudisplay

hidedelay
n

(true false)
lazyload

YUI Button
HTML

YUI Button

6 YUI
http://josephj.com/training/nctu/yui-button.html

1. new YAHOO.widget.Button([
id]);

YUI Container

YAHOO.widget.Panel

YUI Container
YAHOO.widget.Dialog

YAHOO.widget.Panel

YUI Container
YAHOO.widget.Dialog

YAHOO.widget.Panel

YAHOO.widget.Panel

YUI Container
YAHOO.widget.Dialog

YAHOO.widget.Panel

YAHOO.widget.Panel

YAHOO.widget.SimpleDialog

7 YUI
http://josephj.com/training/nctu/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/nctu/yui-panel.html

close
ﬁxedcenter
modal
underlay shadow’, ‘matte’
visible
width

{ 1: 1, 2: 2}

Thank You

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

YUI Introduction @ NCTU

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie YUI Introduction @ NCTU

Ähnlich wie YUI Introduction @ NCTU (20)

Mehr von Joseph Chiang

Mehr von Joseph Chiang (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

YUI Introduction @ NCTU