Introduction to Yahoo! UI Library

• JosephJ = 啊嗚
• 參與專案：音樂通、音樂網、知識+、電影。
• Front-End Engineer (F2E) = 前端技術工程師
  • HTML、CSS、JavaScript 的專家。
    • 把圖變成 HTML + CSS, 把效果變成 JavaScript
    • 所有「檢視原始碼」看得到的都是 F2E 的責任
  • Web 2.0 的幕後黑手。
    • 不換頁更新
    • 拖拉效果
    • 動畫效果
    • 網頁標準化
  • 處理瀏覽器相容的苦工。
    • IE6
    • IE7
    • Firefox1.5
    • Firefox2.0
    • Safari
    • IE5.5
    • Opera
  • 讓原始碼變得有意義、容易維護！
• 目前欠缺苦力，歡迎有志青年加入我們

  本人也負責「校園徵才」的活動，但是今天主題是技術分享，有興趣的就自己點進去看嚕！

  • 宣傳海報
  • 職缺訊息
  • 在 Yahoo! 的生活分享

• 像是一把瑞士刀，讓你自己發揮想要的功能，而不只是一個套件。
• 不改變 JavaScript 程式語言的結構
• 解決瀏覽器相容的問題
• 提供 Hosting 直接引用
  您可以直接連到：yui.yahooapis.com 這個有提供 Akamai 的網域。 Akamai 提供了下列的功能：

  • DNS Forwarding
  • GZip
  • Expire Header
• 完整線上資源：論壇（Yahoo! Group）、說明 (Getting Start)、範例 (Functional Example)、API Documentation。
• 大師的加持：Douglas Crockford、Nicholas Zakas。
  • Douglas 是 JSON 的提倡者、JavaScript: The World's Most Misunderstood Programming Language 的作者、曾撰寫過 JSMin、JSLint 這兩個好用的工具、也是 Yahoo! Namespace 的制訂者。
  • Nicholas 是 Professional JavaScript for Web Developer 的作者
• 這份 Slide 就是用 YUI 做的 Best Practice 唷！
  我用了以下的工具來做出這份 Slide：

  • CSS : reset.css, fonts.css
  • Utility : Event, DOM, Animation, Browser History Manager, Drag Drop...
  • Widget : Container, TabView
• 也有一些 JS Library 是基於 YUI 為 Basis 來開發

• 用 Table 來做排版已經是一件很落伍的事了
  （不瞭解？可以看 Why tables for layout is stupid 這一篇文章）
• 話說回來，要用 DIV + CSS 做排版，則需要比較強的 CSS 能力，對很多人來說是個痛苦的折磨。

• YUI 提供了一個很彈性的 CSS 工具叫 YUI Grid，你將可以快速建置各種符合標準的 CSS 版面。

DOM Collection 將許多的開發人員會自行撰寫的 DOM 方法都整理出來、並且跨瀏覽器，你可以透過此工具取得元素的物件參考、或設定及取得元素的定位及樣式。

• 取得物件參考

  除了我們所熟知本來 DOM 就提供的 getElementById, getElementsByTagName 外，YUI 也提供了數種方式讓開發人員更容易取得物件。以下以 YUD 來代表 YAHOO.util.Dom 這個命名空間。

  • YUD.get([ID、ID陣列、或DOM物件]), 傳回物件集合。getElementById 畢竟還是有點太多字了，而且一次只能取得一個，我們可以用 DOM 提供的 get 一次取得多個物件參考。
  • YUD.getElementsByClassName([Class名稱],[標籤名稱],[根目錄節點物件]), 傳回物件集合。由於 id 的屬性在一整頁的 HTML 不能重複， 所以我往往都只用在模組名稱上，其他我都是用 class="[something]" 來代表該區塊的意義。所以會很需要以 class 來取得物件。
  • YUD.getElementsBy([運算法（傳回Boolean）],[標籤名稱],[根目錄節點物件]), 傳回物件集合。如果你覺得像 getElementsByClassName 的方法還是不夠用的話，那麼你就可以利用 getElementsBy 來撰寫自己取得物件的方法，像 Dustin Diaz 就寫了一個 getElementsByAttribute 的方法。
• 取得及設定物件定位

  像上面我們有用 Animation 工具來做一些動畫，但都只是隨便指定結束的位置，但是真的在寫程式的時候，就必須取得相關物件的位置，以讓動畫跑到正確的位置。

  • YUD.getX([ID或物件參考]), 傳回整數
  • YUD.getY([ID或物件參考]), 傳回整數
  • YUD.getXY([ID或物件參考]), 傳回陣列
  • YUD.setX([ID或物件參考],[水平位置]), 無回傳值
  • YUD.setY([ID或物件參考],[垂直位置]), 無回傳值
  • YUD.setXY([ID或物件參考],[水平位置跟垂直位置的陣列]), 無回傳值
• 取得及設定物件樣式

  有時我們必須動態改變一個元素的外觀，不過例如利用 element.style.display 常會碰到空值的問題，而 element.style.opacity 則是只有在 Firefox 會生效。
  
  另外我們可能會對單一元素一次指定多個 Class，例如 class="mask container last", 如果要新增、取代、或者是檢查是否存在，可能都得自己寫 Regular Expression 做字串處理。但是現在有 YUI DOM, 問題都可以解決嚕！

  • YUD.getStyle([ID或物件參考], 屬性), 傳回屬性值
  • YUD.setStyle([ID或物件參考], 屬性, 屬性值)
  • YUD.hasClass([ID或物件參考], Class名稱), 傳回 true /false
  • YUD.addClass([ID或物件參考], Class名稱), 無傳回值
  • YUD.replaceClass([ID或物件參考], 舊Class名稱, 新Class名稱), 無傳回值
  • YUD.removeClass([ID或物件參考], Class名稱), 無回傳值
• 其他有用的方法
  • YUD.getRegion([ID或物件參考]),回傳值為陣列。

    利用此方法將可以傳回一個元素的 top, right, bottom, left 的四個值

  • YUD.getViewportWidth(),傳回值為數字
    YUD.getViewportHeight(),傳回值為數字
    

    有時我們會希望區塊隨著視窗大小做改變，這時把捲軸去除掉的 Viewport 的高與寬就很好用了。而想把捲軸算進去可用 YUD.getClientHeight(), YUD.getClientWidth();

  • YUD.generateId([元素]),無回傳值。

    幫頁面上的元素產生獨一無二的 ID

對 Event、Animation、與 DOM 都瞭解後，看這個 Prototype

Web Application 的精神就是要讓網站用起來跟視窗應用程式一樣，例如新版的 Yahoo! Mail 使用介面類似 Outlook。其中很重要的就是拖拉技術的實踐。

• Browser Compablity

  拖拉技術在每個瀏覽器都或多或少有所不同，DragDrop Utility 整合成共用的介面，讓 Developer 可以專注於程式核心上。

• DD : 一行即可建立拖拉物件
• DDProxy : 可不用拖拉物件本身
• DDTarget : 指定拖拉目標物件
• 實做拖拉式購物車

眾所皆知的 AJAX / XmlHttpRequest 其實就是一種不利用換頁而發出 Http Request、等待 Server Reponse、最後再輸出到頁面上的一種方式。

• 廢話不多說，來看看怎麼用吧！
• 我很久前做的 AJAXGrid
• 支援不換頁檔案上傳

還有一些是上上個月 ( 2007/2 ) 才出爐的新貨：

• Browser History Manager [Experimental]

  Experimental代表此 Utility 仍在實驗階段，尚未接受廣泛的測試。

  由於現今有太多的前端應用程式，像是 AJAX 不換頁更新、或者地圖移動座標，都不會有「上一頁」、「下一頁」的歷史紀錄，在很多時候對於使用者來說會造成許多困擾。這個工具則利用瀏覽器的 Hash (#) 及 Iframe，以達成產生瀏覽歷史記錄的需求。

  但是我還蠻衝的，即使目前還在 Experimental，我在知識+的追蹤清單頁已經用了這樣的技術。

• DataSource Utility [Beta]

  這個工具是從 Yahoo! Widget 中的 AutoComplete 及 DataTable 中所分出來的。主要目的是希望不管資料來源是 XML、純文字、JSON、或 JavaScript Function，都能讓應用程式有一個統一的介面、不需要為不同的資料而煩惱。

• Element Utility [Beta]

  所有前面提到的 Utility 、簡單來說就是提供了許多好用的 Function。但喜歡 jQuery 或有在用 extJS 的人可不這麼想，因為他們的用法更直覺，例如 YAHOO.util.Event.on(el,'click',doSomething)、它們可以寫成 el.on('click',doSomething)，實在是直覺許多，所以 Yahoo 從善如流，提供了 Element 這個 Utility 包裝 DOM 物件、可直接存取一些常用的方法。

  （使用範例）

你可以看到許多的搜尋引擎都提供了「自動完成」關鍵字的功能，如 Google Suggestion 以及 Yahoo! 奇摩的搜尋頁，這是一個看起來十分複雜的效果，牽扯到許多事件、動畫及資料，但是有了 Yahoo! AutoComplete，你將可以快速產出。

• 看看資料來源（Yahoo! Search API）
• 看看網頁內容

由於 JavaScript 偵錯不容易，所以都會有人說 alert() 是最好的偵錯工具。但是如果你是在 DragDrop onMouseDown 要偵測座標時，用 alert() 可能會讓你的瀏覽器當掉。

而 Logger 精靈就是 alert 偵錯很好的替代品，使用也很方便。

• 使用範例

自從 Yahoo! 首頁 2006 年底改版為起點，開始看到許多網站開始採用 Tab 的方式做首頁資訊的呈現，如蕃薯藤和近期改版的蘋果日報。Tab 的原理不過就只是 style.display 的切換，但是他也可以很複雜的涉及到輪撥、點選用 AJAX 才載入。Tab View 提供了很 Flexible 的功能，讓你能面面兼顧！

• 使用範例：直接用現有的 HTML

想點選照片後、直接在本頁放大嗎？想要輕鬆做出 AJAX 的轉場效果嗎？覺得用系統內建的 alert(), confirm() 很醜嗎？想要直接跳出表單與使用者互動嗎？Container Family 是你最好的選擇！

• Panel : 不需跟使用者互動，例如 AJAX 程式常在用的 轉場效果、或顯示資訊，例如 PhotoBox 的效果。
• Simple Dialog : 只有簡單的按鈕互動，請見範例
• Dialog : 有時我們更需要讓使用者直接填寫表單

想點選照片後、直接在本頁放大嗎？想要輕鬆做出 AJAX 的轉場效果嗎？覺得用系統內建的 alert(), confirm() 很醜嗎？想要直接跳出表單與使用者互動嗎？Container Family 是你最好的選擇！

• Panel : 不需跟使用者互動，例如 AJAX 程式常在用的 轉場效果、或顯示資訊，例如 PhotoBox 的效果。
• Simple Dialog : 只有簡單的按鈕互動，請見範例
• Dialog : 有時我們更需要讓使用者直接填寫表單

DataTable 可以讓資料來源快速組合成一個 Table，你不再需要再自己 parse 資料。另外也可以讓你直接編輯修改這 Table 上的資料。

• 有那些資料格式？

  多說無益，直接點選範例看看吧～

  • XML
  • JSON
  • Text
• 直接編輯
• Hmm... 看起來還是我的 AJAX GRID 感覺比較好（自戀），哪天再來增加些功能吧 :))

經過這一連串的介紹之後，相信你會對 Yahoo! UI Library 有一些認識：

• 與快速產出相比，YUI 更重視函式庫本身的彈性，要讓你可以在許多地方重複利用、好修改。
• Semantic!

  Yahoo! 很重視原始碼的意義 : Don't pollute your code!。有一些 Library 雖然產出很快，把都不顧 Web Standard 的實際精神。如果你也是追求「極致手工業」的一員，YUI 相信是你不錯的選擇。

• 考量到 Downgrade 的 Issue

  拿 TabView 來說，即使使用者介面不支援 JavaScript，他還是可以瀏覽內容。

希望今天的 Demo 能讓大家對 Yahoo! UI Library 開始著迷～ 如果有場合及機會，我會持續地推廣及介紹地更詳細，也歡迎大家來信與我交流