最近都在玩 Cappuccino 這個很有趣的 web-framework。這是一個前端UI的framework，他提供了一套用 JavaScript 寫的 Objective-J 的 parser 跟 runtime，讓你可以用 Objective-J (說穿了就是 Objective-C syntax 的 Javascript XD) 來寫程式。他們很瘋狂的把 Foundation 跟 AppKit 做了一個相對應的版本，因此你可以把原先 Mac 開發經驗帶到網站開發來，非常有趣。

前陣子又注意到 Chroma-Hash 這個小玩意，這是一個很有趣的視覺化機制。他利用顏色棒來指示使用者現在輸入的文字是什麼，所以使用者輸入密碼的時候只要看一眼顏色棒的顏色是不是跟以前相同，大概就知道自己密碼輸入是否正確了。聽起來是個不起眼的小功能，可是對使用者來說卻是挺方便的。（至少，他也是個可愛的裝飾品 :P）可惜的是，他是一個 jQuery plugin，而且還 depends on jQuery + jQuery UI。 因此，想來做一個小東西，把 Chroma-Hash porting 到 Cappuccino 上跟文字框結合。我用 Objective-J 重新實作了 ChromaHash 的功能，把程式拆成三個部分。ZRChromaHashTextField 基本上就是繼承 CPTextField 但會自動幫你處理 ZRChromaHashView 的擺放位置並把參數存取介面 expose 到同一個地方方便使用。 ZRChromaHashView 則是真正處理文字轉顏色棒的部份，而最後有個 ZRChromaHashColorAnimation 做顏色變化的動畫處理。雖然最後成果一樣，不過實現的方式卻是大大不同。jQuery 版本用的是 label 物件蓋在文字框上面，然後設定底色。我的版本最後出來的則是用 canvas 蓋在文字框上，統一畫在裡面。用兩種不同工具在同樣的平台上做出來同樣的效果，不過細節卻是大大不同。這還挺有趣的…

總之呢，最後成果就是：http://itszero.github.com/ZRChromaHashTextField/

目前正在做的就是將他包裝成 framework (hey, 這才像是在寫 Obj-C/Cocoa 阿 :P)，不過還有些問題沒搞定。如果你也對 Cappuccino 有興趣，可以看看他們的官方網站以及討論群組。