The YUI Library (Yahoo! Course @NCU)


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The YUI Library (Yahoo! Course @NCU)

  1. 1. The YUI Library Know me, Touch me, Love me 2008/10/3 @ NCU
  2. 2. YDN Evangelist Hi! Joseph YDN • Y 3 • 2.5 • 5 - Y ✓ ✓ ✓ @josephj6802 2008.5.18
  3. 3. YDN
  4. 4. Open Hack Day 9/20 ~ 21 9/12 ~ 13
  5. 5. Open API AJAX API Open API
  6. 6. Yahoo! Course
  7. 7. Yahoo! PHP Rasmus Lerdorf 11/9~16 ∕ ∕ ∕Yahoo
  8. 8. Agenda • Frontend Engineering • YUI Overview • Workshop 9
  9. 9. Frontend Engineering
  10. 10. • HTML / CSS / JavaScript • •
  11. 11. SOUNDS SIMPLE!
  12. 12. no.
  13. 13. 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
  14. 14. 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
  15. 15. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
  16. 16. Yahoo CSS Sprites
  17. 17. TabView JavaScript
  18. 18. No Image Not Loaded
  19. 19. Screen <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_qack_min_20080707.cssquot; media=quot;screenquot;>
  20. 20. Print <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_print_min_20080707.cssquot; media=quot;printquot;>
  21. 21. 15
  22. 22. from Lifted ©2007 Pixar Animation Studios
  23. 23. ...
  24. 24.
  25. 25.
  26. 26. YUI YUI Core Utilities YUI YUI Controls Dev Tools
  27. 27. YUI • YAHOO Object • DOM Utility • Event Utility
  28. 28. YUI • Animation • Element • Browser History • Get • Connection (Ajax) • ImageLoader • Cookie • JSON • DataSource • Resize • Drag & Drop • Selector
  29. 29. Browser History Manager • AJAX • • •
  30. 30. AJAX SEO AJAX
  31. 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. 32. YUI • Logger • YUI Hosting • YUI Test • YUI Skins • Profiler • ProfileViewer • Compressor • YUI Loader / YUI Get
  33. 33. YUI Compressor
  34. 34. Y! Slow • GZip Expire Header • CSS / JavaScript • Request • Request • JavaScript
  35. 35. YUI CSS • Reset • Grid Builder • Base • Fonts (optional) • Grids DIVs + CSS
  36. 36. grids.css fonts.css reset.css
  37. 37. 950px
  38. 38. #doc3 : 100% .yui-t6 : 300 on right
  39. 39. #doc4 : 974px .yui-t3 : 300 on left
  40. 40. YUI
  41. 41. Library
  42. 42. 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 '<>' 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
  43. 43. YUI • YUI 275 • • Logger • •
  44. 44. 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
  45. 45. -debug
  46. 46. -min
  47. 47. API
  48. 48. YUI 50 YUI
  49. 49. YUI
  50. 50. YUI OSDC
  51. 51. Carousel
  52. 52. +
  53. 53. YUI
  54. 54. YUI
  55. 55. Questions for YUI Overview
  56. 56. Q Open Source ?
  57. 57. • Fasten Improvement • Fun • Innovation • Recruiting •
  58. 58. Q jQuery Prototype Dojo GWT
  59. 59. • JavaScript • • JavaScript • • • QA •
  60. 60. Q IDE
  61. 61. Aptana
  62. 62. Q
  63. 63. no.
  64. 64. • • PHP, ROR, Python, JAVA... • • Developer
  65. 65. YUI Workshop
  66. 66.
  67. 67. YUI Grids
  68. 68. YUI Connection Manager
  69. 69. YUI Get Utility
  70. 70. Questions?
  71. 71. Thank You