Home > AJAX, Commentary, 評論, Framework, JavaScript, Programming, Technologies, 技術 > 優美的 UI component – YUI and yui-ext

優美的 UI component – YUI and yui-ext

February 10, 2007 (Saturday) Leave a comment Go to comments

不少人都知道 Yahoo! 的 YUI (Yahoo! UI Libraray),那是一個簡單又好用的 UI component。因為使用的技術是 HTML + JavaScript + CSS,所以並沒有限制在什麼平台或語言下使用。YUI 最強的地方是它的 packing 跟 ease of use,不會因為你要用一個小元件就要裝一大包東西,文件跟範例也算是很完整了。在 Ajax 開發時如果找機套上 YUI 去使用應該會事半功倍。比起 DojoQooxdoox-desktop 等,YUI 的功能其實不強,但卻很實用。

yui-ext Documentation Center 是一個叫 yui-ext 的 library,很明顯它是 YUI 的一個擴充。也許因為 YUI official 提供的功能其實不夠強大,就有人來做擴充啦。繼承了 YUI 包裝上的便利性、文件完整和容易使用的特性,yui-ext 提供了不少很實用的功能。有些功能其實是把 YUI 過於基層的功能再做一些包裝。功能大概有以下幾項:

  • Dialogs: 跳出一個 <div> 對話框,彈出跟收入的 animation 動作看了就讓人快樂。
  • Grid: 幾乎是無敵的 component,Table、Form 通通可以由它來做,還有 js coloumn sorting、inline editing,有這個我應該就懶得用其他的東西了。
  • Layouts: 強大的 layout manager,雖然很難說明,但可以看一下 Feed Viewer 的 example。
  • Resizable: 沒錯!圖片、文字框都可以即時改變大小!
  • Tab Panel: 這已經是 Ajax 時代必備的元件了,不用多解釋了。

總觀 yui-ext 的功能要比還是比不過 Dojo 等超強的 js 元件,但問題是實用性。為了一個 dojo fisheye 去用 dojo 可能有點痛苦,而 YUI 及 yui-ext 在絕大多數的情況你只要選你用的元件就好了。在 code 的撰寫方面,YUI 系列的 javascript 更是優雅到一個極點,寫起來完全跟在寫一般的 local application 的 UI 有接近。是一個非常推薦使用的元件,不管是只用一小部份還是全系統套用,都非常有價值。

在 web-based application 的環境,大家都想把很多很多的功能放在網站上,版面就變成亂七八糟,也佔得滿滿的,使用者永遠找不到它要的東西。如果有 Tab Panel 跟 Layouts 兩個元件,就像 Feed Viewer 的範例一樣,把版面做最好的利用。有時候,user 也會無聊的跟你要求什麼要大一點,什麼又要小一點,與其為了這種雞毛蒜皮的事情浪費人力,不如弄個可以 resize 的給 user 自己去調!當 web 不再是只有 page 的時候,可以套用的外觀設計也會跟著開闊。

technorati tags:, , ,

Blogged with Flock

Advertisements
  1. Dolphin
    February 10, 2007 (Saturday) at 14:16

    沒想到你這麼喜歡 YUI-ext 呢, 下次有別的好東西記得多介紹唷.

  2. February 11, 2007 (Sunday) at 23:40

    好的 接下來會把好用的東西從頭整理一遍 不然久沒看也會忘了

  3. February 18, 2007 (Sunday) at 14:39

    您好我也是YUI的愛好者
    如果您不介意
    我可以把這篇文章轉到我的BLOG嗎?
    期待您的答覆 謝謝

  4. February 18, 2007 (Sunday) at 21:39

    當然可以 Blog 上轉文章一邊不用問過作者啦
    前題當然是你是使用 trackback 引用囉
    不要只使用 copy paste 喔

  5. February 18, 2007 (Sunday) at 21:55

    您好
    謝謝您的答覆
    不過我不太清楚trackback的方法
    也找不到trackback的URL= =?

  6. February 19, 2007 (Monday) at 8:48

    trackback 的 url 是 https://scw1109.wordpress.com/2007/02/10/%e5%84%aa%e7%be%8e%e7%9a%84-ui-component-yui-and-yui-ext/ 也就是 blog post 左下方的 Permalink 的地方
    把這個網址貼在你的文章中 或是 blog 裡有一個 trackback url 之類的地方就可以了

  7. April 26, 2007 (Thursday) at 21:53

    一開始真的以為yui已經很好用、很猛了!
    花了一段時間研究並且用於一些案子上,已經蠻滿意了。
    不過後來才又發現ext,唉,悶啊!
    最近改用ext,開發時間真的少了許多,好物啊!

  8. April 26, 2007 (Thursday) at 22:11

    可以多分享一點嗎?
    使用在案子上的感覺順嗎?
    你所使用的開發工具是?

  9. April 29, 2007 (Sunday) at 2:37

    說實在的,
    目前這些套件,
    bug都不少,用起來,有時不順到要抓狂!
    明明程式都對了,就是得不到應有的效果=.=
    問題最少的,應該是JQuery吧,
    寫起程式來,真的超順!
    可惜,它的外掛雖多,
    但要和yui比完整性,還是差了點。
    最近又多了一個Spry,
    像我平常都用Dreamweaver來工作人的,
    實在不錯,可以省掉一些key語法的時間,
    但功能性,就和前幾套,差上了好大一截。
    所以,目前正在上下左右為難中。。。
    ext是好,但bug真不少,而且整個載入,400多k,
    有點誇張!
    你呢?
    你目前是站哪邊的呢^^

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: