Archive

Archive for the ‘AJAX’ Category

Shelfari 書架 — 個人書籍管理

February 27, 2007 (Tuesday) 1 comment

念碩士班時,有個半路出家的同學問過我,有沒有程式可以管理個人的書籍。我當時是說,好像是沒有,但要寫也不難。她就一直很想要自己去寫一個,因為她的書實在多到不像話,超出能控制的範圍,書借給誰、有什麼書可能都要程式的幫助才行。

Web 2.0 的興起總是帶來很多驚喜,也許我已經太後知後覺了。Shelfari 是一個個人的書籍管理系統,user 在上面建立自己的書籍王國,只要在書架上一本一本加入你的書籍就可以了。而書的資料其實不會輸入到手酸,因為資料是由 amazon 取得,只要用書名等等去找就好了。加入之後,在個人的書架上,就會一本本的陳列在上面,連封面的圖都有!書籍的各種資料應該都蠻齊全的,而且也可以加入個人對書籍的資訊,比如說書什麼時候買的,什麼時候讀的,借給誰等等。每個人的書架,還可以細分 reading list、wish list。在書架上的書籍可以加 tag 、加書評、提出問題、直接連結 amazon 購買。書架上的書也可以做 import/export。

Web 2.0 網站不能免俗的總是要有 community 的概念,Friends、Groups 自然不會缺少了,Groups 的型式可以想像為讀書會,這點蠻不錯的。如果你是在看別人的書架,當然也可以留言給對方。跟你有同一本書的人在 Shlefari 上很容易找到。有最多書的人、寫最多問答、書評的人也會列出來。

總體而言,Shelfari 的功能並不強大,但簡單精準,操作容易。跟 amazon 結合的好也許是它的一項優勢,我沒有詳細研究其他像 LibraryThing 做得如何。但概念簡單好操作,貼近使用者的需求,而且不用輸入一堆東西才能建立書籍是一大優點。目前最大的缺點就是中文書好像沒有辦法找到。如果你也有很多書,交給書架去幫你管理吧!

technorati tags:, ,

Blogged with Flock

Advertisements

優美的 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

你用哪個 Ajax framework? – Ajaxian 的調查 (2006/09)

September 29, 2006 (Friday) 5 comments

Ajaxian » Ajaxian.com 2006 Survey Results

Ajaxian 做了一個關於 Ajax framework 使用調查,在 865 個有效的受訪者中,Prototype 一支獨秀,有 43% 的人開發 Ajax 是用它。見圖:

Framework Survey Results

<<From Ajaxian.com>>

而選用的 server side 語言,不意外的,PHP 佔了 50%:

Platform Survey Results

<< From Ajaxian.com >>

另外,居然有 25% 的人不是用 framework 而用 XMLHttpRequest 手工打造。

我個人觀察以上的結果,有幾點想跟大家分享:

  • 在 Ajaxian 這篇的 comment 裡,有人在討論到底 Prototype、Script.aculo.us 等等到底算不算 framework,在我的眼裡那些不是 framework,充其量是 js library 而已。
  • 把 Dojo 拿去跟 DWR 比沒什麼意義,畢竟這些東西用法不同。應該先把 framework 分成好幾組,同一類的放一起比才會有意義。我看不出 Dojo 19% 跟 DWR 12% 背後代表什麼。所以第一張圖我只能把它當作品牌知名度投票了。而因為 Prototype 跟 Script.aculo.us 屬於底層的東西,會吃到比較多票數可想而知。
  • 第二張圖對 Ajax 而言其實是附屬的投票,不過卻發人深省。PHP 佔了 50%,比起兩大陣營的 Java 37%、.NET 16% 多出很多。代表了其實 PHP developer 對於使用像 Ajax 這類的新的技術接受度跟進入的快速程度都比 Java / .NET developer 來得快。同時也許也表現了 Java / .NET 在 Ajax 的支援上並不夠強,影響了 developer 進場。
  • Java 37% 遠比 .NET 16% 高,而 Rails 的 14% 只比 .NET 少一點點,反映了 .NET 在這塊雖然宣稱有 Atlas 強大的支援,不過由於相關的資源還不太夠,我想 .NET developer 會去用它的機會也不是很高。

最後一個感想是,如果你是開發 public 的 web site 的話,還是用 open source 吧。畢竟當三流的 PHP developer 也在用 Ajax 時,一流的 .NET developer 可能還沒有足夠的 support 去大量發展 Ajax。

Blogged with Flock

13 本 Ajax 最重要的書

August 24, 2006 (Thursday) 2 comments

Agile Ajax: Social Network Analysis of Ajax Books

這篇文章的作者做了一個有趣的研究,由幾本 Ajax 的書開始,透過 Amazon 的 “customers who bought this book also bought…” 的功能,找出以下 13 本最重要的 Ajax 書籍。

  1. “Ajax in Action”
  2. “Professional Ajax (Programmer to Programmer)”
  3. “Head Rush Ajax”
  4. “Ajax Patterns and Best Practices (Expert’s Voice)”
  5. “DOM Scripting: Web Design with JavaScript and the Document Object Model”
  6. “Foundations of Ajax (Foundation)”
  7. “Hibernate in Action (In Action series)”
  8. “DOM Scripting: Web Design with JavaScript and the Document Object Model”
  9. “Programming Ruby: The Pragmatic Programmers’ Guide, Second Edition”
  10. “Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS”
  11. “CSS Mastery: Advanced Web Standards Solutions (Solutions)”
  12. “Professional JavaScript for Web Developers (Wrox Professional Guides)”
  13. “Ajax Design Patterns”

研究所的時候看到不少人用這種社會網路手法做研究,而這個卻是我看過這種手法中得出最實用的結果,至少告訴你別人都看了什麼書,輸人不輸陣,跟著看也準沒錯。比較怪的結果是第 7 本,Hibernate in Action,那本質上跟 Ajax 也沒有什麼關係,不過也突顯了 Hibernate 的重要性。休閒時,多看書,如果想要對 Ajax 更了解,這些想必是不錯的選擇。而我,已經看完第 1,7 兩本了。不過如果是想看 Hibernate 的入門書,最好還是先看 Hibernate Quickly,Hibernate in Action 太深了一點。

technorati tags:,

Blogged with Flock

Ajax4jsf – JSF 的一支強心針

August 6, 2006 (Sunday) Leave a comment

Ajax4jsf Open Source Project for Adding AJAX to JSF Applications without JavaScript: Downloads Articles, Examples, Tutorials

之前一直對 JSF 在 Ajax 上的 support 非常不以為然,因為都是一些 JSF 的 implementation 提供了有 ajax support 的 component。這樣聽起來是沒有什麼問題,但仔細一想會發現如果遇到沒有合用的元件,或是一些跨元件的問題時,麻煩就大了。當然一些 commercial 的 JSF implementation 應該夠強大去解決這些問題。但 open source 的 JSF 就沒辦法在 Ajax 上發揮自如了。

Ajax4jsf 在 Server side 放入一層比 JSF 更前面的 Front controller,等於是 hack JSF component 的 lifecycle。另外,Ajax4jsf 提供了一些 support 的 jsf taglib,在 JSF page 中使用可以針對不同的時機 (Javascript event) 去發動 Ajax4jsf 的 request,並進行 reRender component 等動作。後端方面因為跟 JSF lifecycle 整合在一起,所以也不用擔心 client/server inconsistence 或 refresh 的問題。

整體看來,Ajax4jsf 沒特定針對哪一種 JSF component,解決了 JSF 在 Ajax support 上的一大問題。使用 Ajax4jsf 是不需要寫 Javascript 的,雖然這點對 JSF developer 應該算是理所當然的了。基本上只要 Ajax4jsf 支援針對 JSF component 操作的事件足夠的話,對 JSF developer 來說已經足以建出一個 Ajax application 了。要是 JSR 把 Ajax4jsf 列入 JSF 的 spec 的話,那麼 JSF 大可號稱是一個 Ajax inside 的 Web MVC framework。看到 Ajax4jsf,對 JSF 又回復了一點興趣了,有了 Ajax4jsf,我大可以不要管什麼 post only 的問題了。真不知道是技術環境的反覆還是我自己三心兩意?

technorati tags:,

Blogged with Flock

XML/SWF Charts – 新一代的網站圖表工具

July 26, 2006 (Wednesday) 16 comments

在 Web 上常常需要顯示圖表,而圖表如果是由動態資料產生的,就必需要有繪圖的 API 來幫忙製圖。以 Java 來說,大家熟知的是 JFreeChart。JFreeChart 提供的繪圖 API,在 web 環境的話,就要在 server 先把圖產生,再由 client 端顯示。這樣對 server 也是一個負擔,當很多人想要看各種不同的圖表時,系統的回應時間變慢、暫存檔的量大增,都是可以預見的。

XML/SWF Charts 是一個由 SWF (Flash) 在 client 端繪圖的 API。Server 只要準備 XML 格式的資料,圖的部份由 Flash 幫你在 client 端繪畫起來。省了 server 的 loading,也沒有暫存檔的產生,而且因為是 flash 做的,還可以有動畫特效,簡單、好用又美觀,絕對是 web 產生動態圖表的不二之選!

大家在這個連結可以看到很多範例,我不用貼圖的方式是因為貼圖沒有動畫的效果。事實上 W3Counter WUFOO 裡的圖似乎也都是用這個 API 做的,看來這個 API 已經得到 AJAX 界的肯定。

使用上其實也蠻簡單的,首先 下載 XML/SWF Charts 的 library,解開後有一個 charts.swf 和 charts_library 的資料夾。把它們放到 web 可以 access 得到的地方。在 html 或是動態網頁檔加入以下的 flash object:

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0&#8243; WIDTH=”400″ HEIGHT=”250″ id=”charts” ALIGN=””> <PARAM NAME=movie VALUE=”charts.swf?library_path=charts_library&xml_source=sample.xml”> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#666666> <EMBED src=”charts.swf?library_path=charts_library&xml_source=sample.xml” quality=high bgcolor=#666666 WIDTH=”400″ HEIGHT=”250″ NAME=”charts” ALIGN=”” swLiveConnect=”true” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”&gt; </EMBED> </OBJECT>

其中 src 的部份要指向 charts.swf 的所在位置。而後面的 sample.xml 就是圖表的資料來源囉。Sample.xml 由一個固定的 xml 格式表示圖表的原始資料。以下列的圖表為列:

2001 2002 2003 2004
Region A 5 10 30 63
Region B 100 20 65 55
Region C 56 21 5 90

那麼 Data 的格式就要如下:

<chart>
    <chart_type>column</chart_type>
    <chart_data>
      <row>
         <null/>
         <string>2001</string>
         <string>2002</string>
         <string>2003</string>
         <string>2004</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>100</number>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
      <row>
         <string>Region C</string>
         <number>56</number>
         <number>21</number>
         <number>5</number>
         <number>90</number>
      </row>
   </chart_data>
</chart>
而產生出的圖表就是這個樣子囉:

補充一下,圖表的一些格式、設定參數,是由 chart attributes 來設定,上面的 <chart_type> 就決定了系統要畫出什麼圖表。而 chart 的資料來源也可以帶有參數,讓 server 依參數動態產生 xml data。以上就大觀念作了簡單的解釋,詳細的部份請參閱 TutorialReference,畢竟參數太多了,很難一一解說。

這樣的 web 圖表架構,其實本身就是一種 AJAX。而 XML/SWF Charts 是可以免費使用的,只是圖會是可以點的,而點選就跳到 XML/SWF Charts 的 site。如果選擇付費的話,其實也不會很貴,USD $45 就可以買到一個 domain + any subdomain。我覺得 XML/SWF Charts 很有潛力成為知名圖表工具,甚至變成 Web 的圖表標準。而它的 host,maani.us 還提供了很多有趣跟有用的工具,像有一個是 flash 做成的汽車儀表板,實在太讚了。強力推介!

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