Skip to main content

Titanium APP with PureMVC & CoffeeScript


昨天一時無聊研究起最近很紅的 CoffeeScript,小試結果不禁有種相見很晚的 fu....Jeremy Ashkenas 你實在是太棒啦!!!!!


先前使用 Javascript 來寫 Titanium APP 的時候最大的問題還是來自於 Javascript 是個易學難精的語言,debug 不易,怎麼寫好像都沒問題但是跑出來的結果就是很神奇, Class 的實作也是百百種....雖然先前 文章分享的:PureMVC for Titanium Mobile 簡單實作了 PureMVC 供 Titanium 使用,不過實際操作時還是會覺得有點彆扭。

CoffeeScript 講求的就是採用 Javascript the Good parts,在不影響效能的轉換下,保證轉出來的 js 都是優良的,更重要的是它的類別實作....各位朋友們啊!這個才叫類別啊!!!(淚奔)

秉持著哪裡都要用 PureMVC, 即使改用 CoffeeScript 也不例外
以下原始碼皆可以在本人的 github 找到。

在這邊貼一段 Titanium APP with PureMVC & CoffeeScript 的實作:
為了怕 混亂 Global scope, Puremvc 還是包覆在 Puremvc 的 namespace 下

#引入 puremvc
Ti.include "puremvc-coffee-1.0.js"

trace = (s)->
Ti.API.info s

trace "Hello coffeescript with puremvc."

#利用工廠方法建立 MainWindow 方法
MainWindow = ->
win = Ti.UI.createWindow
title: 'Tab 1'
backgroundColor: '#fff'

label = Ti.UI.createLabel
color: '#999'
text: 'Hello Coffeescript & Puremvc'
font:
fontSize: '20dp'
fontFamily: 'Helvetica Neue'
textAlign: 'center'
width: 'auto'

win.add label;
win

# MainWindow 用的 Mediator
class MainMediator extends Puremvc.Mediator
listNotificationInterests: -> ["Hello"]

handleNotification:(note)->
trace 'MainMediator got "Hello": ' + note

onRegister:->
trace 'Mediator onRegister.:' + @getMediatorName()
# get view component
@getViewComponent().open()

#主要由 StartupCommand 註冊 MainMediator
class StartupCommand extends Puremvc.SimpleCommand
execute:(note)->
trace 'startupCommand executed!!!'
@facade.registerMediator new MainMediator 'MainMediator', new MainWindow()
# to MainMediator
@sendNotification "Hello"

最後:

setTimeout( ->
Puremvc.facade.registerCommand 'startup', StartupCommand
Puremvc.facade.registerProxy new DemoProxy 'DemoProxy'
Puremvc.facade.sendNotification 'startup'
200)


Edit:
為了怕大家不清楚如何在 Titanium Studio 中使用 CoffeeScript ,在這邊提供一個中文說明:請參考高見龍的 在Titanium Studio使用CoffeeScript來寫app

Edit2:
關於如何在 Titanium 中使用 CoffeeScript 也可以直接安裝好 CoffeeScript 後,直接利用 Titanium 下拉是功能表 / Commands / CoffeeScript Bundle 執行 Compile and Display JS,不需要真的安裝 Titanium plug-in

Comments

Popular posts from this blog

PureMVC 我也會 [6]

Mediator ViewComponents 與 pureMVC 架構的中介 監聽並反應 View Component 發出的 Event 可以發送與接收 Notification 儘量少操作 Proxy 公開方法,多用 sendNotification... Mediator design pattern 要多認識這個 Mediator 設計模式的話,請自行看連結說明啊! 簡單來講,假使有一個 View 裡面有好幾個 MovieClip 組成,而這些 MovieClip 會互相影響對方...這個情況在 Flash 中,通常都會變成下圖: MovieClip 直接控制其他 MovieClip 搞到整個關係很複雜...換一個元件簡直是災難。 加入 Mediator 後,示意圖就會變成: 這樣,所有的 MovieClip 都透過 Mediator 來跟其他 MovieClip 溝通,當某一個 MovieClip 替換成別的元件,這時候也只需要修改 Mediator 中的引用即可,是不是變得很乾淨?如果同一組 MovieClip 有另外一個操作模式,也只需要替換掉 Mediator 即可!天下太平啊~~~ 而 PureMVC 中就是利用 Mediator class 為與前端 ViewComponent 的中介,這樣可以切開 ViewComponent 與 PureMVC framework 的關係,不管你前端介面使用 Flash or Flex 製作都跟程式核心無關。 所以 ViewComponent 製作時只需要兩個原則,一把所有的請求都以 Event 送出由 Mediator 處理,二提供公開方法, Mediator 只需要監聽 View 的 Event,將收到的資訊透過公開方法喂進 ViewComponent 即可。 如在 ViewComponent 中: public function setList( result:Object ):void{ list.dataProvider = result as ArrayCollection; } //然後在按下取得資料的按鈕 Click action 寫上: dispatchEvent( new Event( "GET_LIST" )); 新建 Mediator 的時候一樣有幾個重點方...