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

2. YDN Evangelist Hi! JosephYDN Y3 2.5 5- Y @josephj6802http://josephj.comjosephj6802@gmail.com 2008.5.18 3. YDN 4. Open Hack Day 9/20 ~ 21 9/12 ~ 13 5. Open API AJAX API Open API 6. Yahoo! Course 7. Yahoo! PHPRasmus Lerdorf11/916 Yahoo 8. Agenda Frontend Engineering YUI Overview Workshop9 9. Frontend Engineering 10. HTML / CSS / JavaScript 11. SOUNDS SIMPLE! 12. no. 13. SafariFirefoxOpera IE5, 6, 7Firefox Opera 10,000+ UAsMacintosh WindowsLinux, Unix, Mobile CSSBOM API(X)HTMLDOMJavaScript DOM API SpecicationData Transport data: custom, xml, mixed: new xhtml Implementationjson behavior: jsBugs[ Theory / Practice ]server 14. SafariFirefoxOpera IE5, 6, 7 Firefox Opera10,000+ UAsMacintosh Windows Linux, Unix, Mobileknowledge areas: 7 CSS(X)HTMLdimensions: xJavaScript DOM 4BOM APIDOM API platforms: x 3Specificationdata: custom, xml,mixed: new xhtml,browsers perDefects platform: x 4 Data TransportImplementationbehavior: js jsonrendering modes: x 2 [ Theory / Practice ]server=672 15. usability, internationalization, localization, visual design, accessibility, informationarchitecture, security, buildprocesses, performance, benchmarking, devices, portability 16. Yahoo CSS Sprites 17. TabView JavaScript 18. No Image Not Loaded 19. Screen 20. Print 21. 15 22. from Lifted 2007 Pixar Animation Studios 23. ... 24. http://developer.yahoo.com/yui 25. http://tw.developer.yahoo.com/yui/ 26. YUIYUICoreUtilitiesYUIYUI Controls Dev Tools 27. YUI YAHOO Object DOM Utility Event Utility 28. YUI Animation Element Browser History Get Connection (Ajax) ImageLoader Cookie JSON DataSource Resize Drag & Drop Selector 29. Browser History Manager AJAX 30. AJAX SEO AJAX 31. 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 32. YUI Logger YUI Hosting YUI Test YUI Skins Proler ProleViewer Compressor YUI Loader / YUI Get 33. YUI Compressor 34. Y! SlowGZip Expire Header CSS / JavaScript Request Request JavaScript 35. YUI CSS Reset Grid Builder Base Fonts (optional) Grids DIVs +CSS 36. grids.css fonts.css reset.css 37. 950px 38. #doc3 : 100%.yui-t6 : 300 on right 39. #doc4 : 974px .yui-t3 : 300 on left 40. YUI 41. Library 42. Developer Network Home Help Site SearchDesign Pattern LibraryYahoo! Developer Network > Design Pattern Library > Auto Complete Auto CompleteQUICK JUMPProblem Summary SolutionThe user needs to enter an item into a text box which could ambiguous or hard to Rationaleremember and therefore has the potential to be mis-typed. Accessibility EXAMPLE:RELATED PATTERNSCalendar Picker AS USED ON YAHOO!Yahoo! Mail Beta Yahoo! Maps Beta Yahoo! My Web 2 BLOGBlog Article Y! UI CODE EXAMPLESAuto Complete ComponentAuto completion of contacts in Yahoo! Mail BetaY! 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 dataThe input item can be matched with a specific data item in the system. PlaygroundSpeed and accuracy of entry is an important goal.Show with revisionsThe total number of items would be too large or inconvenient for displaying in astandard drop down box.Solution This work is licensed under aCreative Commons Attribution 2.5License.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 theuser has typed. Continue to narrow or broaden the list of suggested items based on theuser'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 narrowlybased on other criteria such as each item's frequency of use.When available, show multiple fields of information for each suggested item. In theYahoo! Mail example above, two fields are presented: the contact's full name and thecontact'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 occurwith the initial characters of any of the fields presented.For each suggested item in the suggest items list show the characters that exactlymatch the user's input. When multiple fields are shown in a suggested item thematching 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. Noticethat the first item matched on the contact's email address '' whereasthe 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 itemslist.Allow the user to complete the input field by pressing the Tab key or Enter; key. Thecurrent matched item in the suggested items list will be accepted as the value for theinput field.Allow the user to optionally highlight an item of their choice from the suggested item listwith 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 dropdown list will close. Subsequently pressing the Tab key or Enter key will accept thevalue from the input field. However, typing more characters after hitting the Esc key willrestart 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 theComma 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 forthe next input item. RationaleReducing the number of keystrokes allows for faster user input.Showing additional formatting information in the suggested items list (like the emailaddress in the example above) removes ambiguity.Continual feedback helps the user narrow in on the correct choice. AccessibilityLabel 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 withthe 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 duringautocomplete.Do not send any page refreshes when updating the field (page refreshes will signalassistive technology to start reading the page again.)The insertion cursor should move as the left/right arrow keys are pressed in the textfield.Copyright 2005-2007 Yahoo! Inc. All rights reserved.Privacy Policy - Terms of Service - Copyright Policy - Job Openings 43. YUI YUI275 Logger 44. Yahoo! UI LibraryYUI Theater[more videos ]HomeThe Yahoo! User Interface Library (YUI) Nate Koechley quot;The YUI CSSYUIBlogThe Yahoo! User Interface (YUI) Library is a set of utilities and Foundationquot;YUI Discussion ForumYUI on Sourceforgecontrols, written in JavaScript, for building richly interactive webAPI Documentation applications using techniques such as DOM scripting, DHTML andYUI Examples GalleryAJAX. The YUI Library also includes several core CSS resources. Allcomponents in the YUI Library have been released as open sourcePowered by YUIunder a BSD license and are free for all uses.YUI TheaterYUI LicenseDownload YUI version 2.3.1, including full API YUI Articlesdocumentation and more than 200 functional examplesYUI FAQ from Sourceforge.Graded Browser SupportSkinning YUIThe library's developers blog at the YUI Blog and the YUI Library communityexchanges ideas at YDN-JavaScript on Yahoo! Groups.Bug Reports/Feature RequestsServing YUI Files from Yahoo!Security Best Practices Using YUI: YUI Core:YUI Library YUI Components FAQ The YAHOO Controls/Widgets:Animation Getting Started Global ObjectAutoCompleteAutoCompleteLicensing (base requirementButton ControlBrowser History Manager Articlesfor all YUICalendarButtoncomponents)Color PickerCheat SheetsSenior YUI engineer Nate Koechley guides youCalendarDOM Collection ContainerSupport & through the YUI CSS foundation in this October 2007Color Picker(convenience (including Module,Community tech talk.methods for DOMOverlay, Panel,Connection ManagerFiling Bugs & interactions)Tooltip, Dialog,Container Feature RequestsEvent Utility (event SimpleDialog)DataSourceSearchable APInormalization andDataTableYahoo! User Interface BlogDataTable tools)Dom Documentation: LoggerIn the Wild for November 30thDrag & Drop API docs are availabeYUI Library Utilities:MenuNate Koechley 11/30/07 19:45:25for every YUIRich Text EditorElement Animation UtilityImplementation Focus: TripItcomponent. You canEvent Browser HistoryEric Miraglia 11/14/07 11:22:42search the APISliderImageLoader [experimental]documentation withManagerCaridy Patio Mayeas Bubbling Library UpdatedLoggerConnectionTabViewinstant filtering on the Eric Miraglia 11/07/07 09:23:45Menumain API page.Manager (forTreeViewRich Text EditorXHR/Ajax)Implementation Focus: NestoriaYUI Library CSSEric Miraglia 11/06/07 17:58:27SliderThe YUI Compressor: DataSource UtilityTools: Using the Yahoo Global Object to Manage ObjectTabView The YUI Compressor isTreeViewa build-processDrag and DropCSS ResetInheritance and Composition: Four New YUIYahoo Global Object component that helps Utility(neutralizes Examplesyou minify your browser CSSEric Miraglia 11/06/07 17:54:03YUI Loader Element UtilityJavaScript and CSS. styles)YUI Test ImageLoader UtilityDocumentation and CSS Base (appliesReset CSS[experimental]download informationconsistent styleBase CSS The YUILoaderfoundation forYUI Forum on Yahoo! Groupsare available here.UtilityFonts CSS common elements) The YUI TestUsing DataTable with Drag and DropGrids CSS CSS Fontsguiltyspark05 12/03/07 21:52:02 45. -debug 46. -min 47. API 48. YUI 50YUI developer.yahoo.com/yui/theater 49. YUI 50. YUI OSDC 51. Carousel 52. + 53. YUI 54. YUI 55. Questions for YUI Overview 56. Q Open Source ? 57. Fasten Improvement Fun Innovation Recruiting 58. Q jQuery Prototype Dojo GWT 59. JavaScript JavaScript QA 60. Q IDE 61. Aptana 62. Q 63. no. 64. PHP, ROR, Python, JAVA... Developer 65. YUI Workshop 66. http://www.wallpapergate.com/wallpaper22725.html 67. YUI Grids 68. YUI Connection Manager http://josephj.com/training/yui-monday/connection-manager/ 69. YUI Get Utility http://josephj.com/training/yui-monday/get/ 70. Questions? 71. Thank You http://developer.yahoo.com/yui/ josephj@yahoo-inc.com