高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

在Titanium Studio使用CoffeeScript來寫app

即然CoffeeScript寫出來的東西就是一般的JavaScript,之前就在猜想是不是也可以把CoffeeScript用在Titanium Studio裡,果然,有善心人士用Python寫了給Titanium Studio的外掛。

安裝

首先,你需要在你電腦裡安裝好CoffeeScript的相關工具,詳情可參考這篇

相關的工具安裝完成之後,接著請到 https://github.com/billdawson/ti_coffee_plugin 下載壓縮檔,解壓縮之後把plugin.py這個檔案放到Titanium Studio的plugin資料夾。以我的電腦來看是放在這個資料夾:

/Library/Application Support/Titanium/plugins/ti_coffee_plugin/1.0/plugin.py

如果資料夾不存在的話,就自己手動建吧,檔案放進去之後就算安裝完成了。

使用

在每個Titanium Studio的project底下,應該都可以找到一個”tiapp.xml“的檔案:

image

找到它之後,請在最下面加上這段:

<plugins>
    <plugin version="1.0">ti_coffee_plugin</plugin>
</plugins>

image

接下來,因為我們要建一個app.coffee來產生app.js,所以原來的app.js就可以先丟掉,然後在Resources資料夾裡建一個叫app.coffee的檔案:

image

接著就是打開app.coffee來寫code啦,如果大家懶得寫,可以直接剪貼這段直接貼上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Titanium.UI.backgroundColor = 'white'

win1 = Titanium.UI.createWindow(
  backgroundColor: 'white'
  title: 'CoffeeScript Demo'
)

label1 = Titanium.UI.createLabel(
  color: '#999'
  text: 'Hello CoffeeScript'
  font:
      fontSize:30
      fontFamily: 'Helvetica Neue'
  textAlign: 'center'
  width:'auto'
)

win1.add label1
win1.open()

打完收工,按下build按鈕,耐心等一下畫面..

image

同時你應該也會發現在Resources資料夾裡自動長出了app.js,這個就是神奇的plugin幫我們在build的時候,自動幫我們完成從編譯js檔的工作。

為什麼好好的JavaScript要改用CoffeeScript來寫?

大家先看看程式碼的畫面:

image

主要是CoffeeScript的語法簡單、清楚很多,例如像是物件可以用YAML的方式來寫。所以像label1裡的參數本來是一層包一層,可以改用更清楚的YAML式的寫法(不過這個多少有個人觀感,說不定有的人覺得原來用大括號的比較清楚)。

好寫是好寫,但也不是完全沒缺點,大家自己看畫面應該會發現到,例如原本Titanium Studio有syntax highlight改用CoffeeScript就沒了,當然code hint就別想了(不知道會不會有善心人士也把這個功能補完),不然就是先到有支援CoffeeScript的編輯器裡先寫好,再回來Titanium Studion裡進行編譯也是一招。

所以各位客倌就自己取捨囉,供大家參考。

Comments