Archive

Archive for the ‘JavaScript’ Category

優美的 UI component – YUI and yui-ext

February 10, 2007 (Saturday) 9 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

Validation with Annotations — 驗證新趨勢

September 28, 2006 (Thursday) 4 comments

Validation 是每個像樣一點的系統必備的功能,不過做法就有很多了。以 Java Web AP 為例,從 JavaScript 的 Validation 到使用 Java Code 去做,或是使用 Jarkata Commons Validator 都是很常見的方法,也各有優缺點。

最近在網路上出現了一些跟 Validation 相關的文章,包括有 Hibernate can meet your validation needsSpring Validation with Java Annotations。或許你會奇怪,Hibernate 跟 Spring 並不是在處理 Validation 的事情的。到底是怎麼回事呢?原來現在最流行的 Validation 方法是使用 Annotation!在 domain model class 的 getter/setter 上加上 Annotation Tag,例如:@Required 就代表這個值是必需填入的。@Length(max = 10) 代表最長不能起過 10 個字元等等。在 domain model 宣告完成後,在需要時再由 Java 程式去執行驗證,而驗證是自動依據 Annotation 的設定所做的。

不管用 Hibernate 或是 Spring 做,概念上都大同小異。把 Validation 資訊放在 domain model 的好處是,不管在哪個 level 想做驗證,都會用到同樣的資訊。否則很有可能會變成在 User Input 寫一段,存取 DB 時又寫一段。而事實上驗證的資訊放在 domain model 事實上是最適合的了,因為驗證限制可以說是 domain model 的一項註解。

Annotation 在 Java 5 出現以來,有很多範例應用。但相對實戰上使用,而且必需要使用 Annotation 才能達成的任務一直都不是很多。直到最近,不少 Annotation 應用都已經成熟。不久的將來,Annotation 就會變成常用的 Java 語法,而系統中出現 Annotation 就跟出現平常的 code 一樣自然。

technorati tags:, , ,

Blogged with Flock

Selenium IDE – 測試,原來也可以這麼輕鬆

July 26, 2006 (Wednesday) 4 comments

Selenium IDE: Selenium IDE

今天介紹的這個工具真是做 web testing 的終極武器。Selenium IDE,是一個 Browser 的 plugin,安裝之後,你可以把你在網頁上的操作錄製起來。加上一些 check point 之後,就是一個全自動的 web testing 了。以前猛點、一直 key in 資料、搞不清楚自己按了什麼的日子不再出現。觀念簡單,操作容易,我想多寫幾句話去解釋它都有點難。如果還沒有弄懂的就看一下 demo影片吧

安裝方面,下載後直接安裝就好了。雖然是 Firefox plugin 但在 Flock 用也沒問題喔!

使用上,就是像影片看到的,用錄的方式,你點什麼或打什麼字就會錄起來了。關鍵是 check point 的設定,如同 xUnit 一派的做法,可以由一些 assertXXX 來當 check point。最當用的大概就是把文字選取起來,點右鍵就會出現 assertTextPresent 的選項,目的當然是希望來到這頁時需要檢查有沒有出現目標字串囉。錄製好之後,按 run 就會從頭跑一次,到 check point 的地方如果正確就會是綠色,出現錯誤會是紅色。而錄起來的 script 可以存成多種格式。

曾經在開發專案時開玩笑的說如果 UAT (User Acceptence Test) 能夠自動化就好了。因為 UAT 有幾十到幾百個 test case,由專人去跑一遍可能也要個一兩天,對時程是很傷的。而且大家都知道,測試通常會找出一些問題,那問題改了是要全部重測還是只測 fail case?考量到人力跟時間資源,大部份會只測 fail case,好一點再加抽幾個 test case 做抽檢。問題是,天知道改一個東西會影響到哪些部份,除非你敢保證你的 change impact analysis 做得很好。如果沒有,那還是乖乖全測比較保險。有了 Selenium IDE,那就好辦啦,把 script 開始來重跑一次就好了嘛!UAT 自動化不是夢!

另一個可行的用途是,網管或 MIS 需要確保 service alive,把 Selenium IDE 當作 service monitor 也沒有什麼不行的,至少它簡單好用,在你學會或有錢買那些重型產品前之前,用 Selenium IDE 先頂住至少日子會好過一點。說穿了 service monitoring 就是一種測試嘛 (測試 service 有沒有活著)。

Selenium IDE 是由 OpenQA 所開發的,lincense 是親切可愛的 Apache 2.0。除了 Selenium IDE 以外,OpenQA 還有很多不錯的產品都是在 QA 方面會有用的。目前還沒有詳細做研究,但是 Selenium RC 似乎可以把 Selenium IDE 錄製的 script 再做點事。因為存 script 時的格式有些就是 for Selenium RC 的。如果你是 developer/tester,那不要懷疑了,趕快安裝 Selenium IDE 吧。

technorati tags:, , , , , , , , ,

Blogged with Flock

Ajax 不是罪 — 錯用 Ajax 的反醒

July 21, 2006 (Friday) 1 comment

Ajax,我懶得再解釋它了。

Ajax,很多人支持它,推崇它。

Ajax,也有不少人罵:Ajax 的七宗罪Ajax: 99% Bad

到底 Ajax 是對是錯?用 Ajax 是不是有罪?還是如網路上 Ajax 支持者所言;「欲加之罪,何無患詞?」 Ajax 是工具,是 Web developer 的武器,武器是不會有罪的,但錯用這把利器的人就可能有罪了。這篇文章,只要你想寫 Ajax,請你一定要看:The Right Way to do Ajax is Declaratively。內容長篇大論,而且可能也不是很好懂,說實在話,我也不是全都能了解,但是身為一個 Ajax developer,我想有必要知道什麼是對的。以下就我能理解的部份,做一個整理 (但還是希望大家能看看原文):

全文重點在:不要亂寫一堆 Javascript 搞互動網頁!(Don’t write your interactive Web application in custom
Javascript! )
事實上,有很多標準的方式可以優雅的做到 Ajax。例如:Hijax, hinclude, XForms, SVG, XBL, etc.

Hijax 由 Hijack Ajax 所組成的字,教你由 non Ajax design 出發,整理好你的 html, css, javascript,然後再由 Ajax 去 Hijack (綁架) 你的 Http request 變成使用 XMLHTTPRequest 去達成 Ajax。內容也有提到 AHAH 的觀念。Hijax 確保系統跟 no Ajax 的設計很接近,避免了 Ajax Monster 的出現。

REST based design + Server Cache + Client-side page construction 可以加速 Web performance。而 client-side page construction 的例子可以用類似 SiteMesh 的但在 client 使用的 solution,hInclude。同樣的,DB 裡的資料也可以用 client-side page construction 去呈現,不必由 server 產生出全部的 html。

後面談到的 Xhtml2、XForms,以前曾看過一些介紹,但年代久遠,已經記不清楚了。只知道解決了很多 html 的問題。不過這些標準的實作目前很少在成熟的技術討論中看到,要如何在實務上使用也許還有一段距離。

這篇提供了不少 Ajax 的正當設計手法,但在不了解之前,想必大家都做了不少錯誤的示範了。對這些錯誤好好檢討改進的話,Ajax 就不會再被認為是一種罪了。

technorati tags:, , , ,

Blogged with Flock

用 Ajax 做 Portlet

July 17, 2006 (Monday) 3 comments

Ajaxian » Ajax Portlet Communication with DWR

這個想法其實也不新鮮啦,Portlet 本來就是一個資訊呈現的方式,而 Ajax 是在 Web 傳送資料的好方法,兩個配在一起一拍即合。目前有一個叫作 light 的 portal 本身就是全面運用了 Ajax 的技術,效果自然會跟 NetVibes 等 Web 2.0 portal 有點類似。即使是用舊有的 portal 系統,還是有救,就像那篇文章中提到的方式,用 DWR 去把資料拉過來就是一個很好的解法。好處是可以大量減少了 MVC 層的苦工,直接用 DWR 去接 Business Tier 去拉資料回來。

當然新的想法總是有兩面的看法,不讚同的人很多是因為了解不足。這時候如何能夠證明新想法是好的就很重要了。以這個 Ajax + Portlet 的案例來說,一點都不用擔心很難說服別人,因為這個想法是在 IBM developer works 上發表的 http://www-128.ibm.com/developerworks/java/library/j-ajaxportlet/index.html?ca=drs-,這麼一來,如果硬是說這想法不可行是有點說不過去了。有趣的是,裡面範例用的不是 IBM 的 portal,而是 Jetspeed2,Apache 的JSR-168 portal,當然是 open source 的囉!

突然想起 ptt 鄉民們很流行的一句話,”閃開!讓專業的來!”

technorati tags:, ,

Blogged with Flock

ZK – Ajax but no JavaScript

July 13, 2006 (Thursday) 8 comments

ZK – Simply Rich –  Ajax but no JavaScript

第一次看 ZK 已經忘了是什麼時候了,不過今天又回來看了一下,發現 ZK 真的是個好東西。如果要開發大型的 Ajax 專案非常值得考慮使用。ZK 的假想敵是 Echo2,ZK 認為 Echo2 使用的 Swing like 開發方式,是在假設開發人員都用過 Swing。而我個人也是非常反對這點,因為這樣美工人員完全無法進場。ZK 本身使用的是標準 XUL (XML User Interface Language) 的擴充稱為 ZUL,我目前沒有去了解 XUL 跟 ZUL 的差別有多少,但看起來差異不是很大。

ZK 也是一個 Java-based 的 framework,跟大部份的 Java web application framework 一樣,由一個 front controller servlet 去接所有 *.zul 的 request,server 會把 parse 成 html。而 ZUL 的語法大概如下:

<window title=”My First window” border=”normal” width=”200px”>
    Hello, World!
</window>

不難想像還會有 button, checkbox 等 ZUL 元件,這點跟 JSF 或是 OpenLaszlo 倒是差異不大。ZUL 的 tag 本身可以使用 css 或是 javascript。

在大型的 Ajax 專案裡,講究的是有沒有一個夠強的 framework 提供足夠的基礎元件、讓美工與開發人員簡便的合作。上面提到的幾個 framework:ZK、Echo2、JSF 和 OpenLaszlo,第一個出局的是 Echo2,不管它做得怎麼強大,網頁美工絕對不能拿來當 Swing 搞。第二個有問題的是 JSF,JSF 在 Struts 的影子之下,後端雖然強大,但前端仍然很少著墨。規範中前端的元件少得可憐,如果要找免費好用的元件恐怕不是很容易。再說 JSF 對 Ajax 支援有限,而且用起來綁手綁腳的,如果只是為了 Ajax 是沒必要跟自己過不去。OpenLaszlo 已經是很成熟的東西了,觀念上跟 ZK 非常接近,同一份 code 能產生 Flash 跟 DHTML 兩種模式實在是讓人讚嘆。只是用的是獨規的語法,比起 ZK 用類 XUL 的語法好像差了一些。在切割 MVC 這三件事上面 OpenLaszlo 也有點模糊不清,而且以我對 OpenLaszlo 粗淺的了解,沒有看到 control tag,反之 ZK 對於 if condition, iterating 等等都有考量到,這也是 ZK 優勢所在。ZK 還有一個好處是看來 extends 它的 class 或是做 custom 的元件不是很難。但是 OpenLaszlo UI event 直接 call Web Service 的模式可謂是 SOA 的奧義,非常有用。

總合以上,我覺得 ZK 跟 OpenLaszlo 都是很值得考慮使用的。可能你會發現怎麼沒提到 Dojo?因為 Dojo 現在已經成為 JavaScript component 的地下標準了,每家都讚助它,使用它。ZK 已經結合 Dojo,OpenLaszlo 也有在做這件事。看完 ZK 跟 OpenLaszlo,JSF 又再被我打入冷宮了,我寧可用 Spring Web Flow 去把 ZK 或 OpenLaszlo 的頁面接起來也不想用那一大包沒多少建設的東西。要不就使用奧義:OpenLaszlo + BPEL + ESB 往軟體工程的烏托邦前進。可惜的是 Gavin King 的 JBoss Seam 綁死用 JSF,就連帶被判出局了。之前有人做一個 HSE (Hibernate + Spring + Echo2) 的 framework,是時候來做 OLSH (OpenLaszlo + Spring + Hibernate) 或是 ZSH (ZK + Spring + Hibernate) 了。

technorati tags:, , , , , ,

Blogged with Flock

40 Ajax Tutorials and Articles

June 29, 2006 (Thursday) Leave a comment

Max Kiesler – How to Make Your AJAX Applications Accessible – 40 Tutorials and Articles

AJAX 很多人都知道,要怎麼把 AJAX 弄好可能就是一門學問了。

應該要找時間看看人家怎麼說的。

只是 40 篇那麼多…

Blogged with Flock