Alloy 初體驗

在 Mobile App 蓬勃發展的年代，Google Play 和 App Store 都分別有超過百萬隻的 App 上架，在這驚人的成長速度下，想讓 App 脫穎而出，除了實用性和創意外，最好還要能容易改版維護。這是一篇 App 開發初體驗介紹文，希望能帶給大家一些幫助，也請多多指教！

Titanium

Titanium mobile 是一套用來開發跨平台 Mobile App 的 framework，支援 iOS、Android、Blackberry及 Mobile Web App 等，以 Javascript 作為主要的開發語言，由於 Titanium 會把 Javascript 編譯成原生 (Native) 的程式碼（例如可以編出 XCode 專案），所以能開發出擁有各種平台原生外觀並有接近原生執行速度的 App。

Alloy

Alloy 是一個基於 Titanium 的 MVC framework，讓開發者很容易地寫出架構清楚層次分明的程式碼，有寫過 Javascript 的朋友們應該能體會用 Javascript 不是很直覺的能做到這件事。Alloy 是一個 Open Source 的 Project， Repository 在 GitHub上，有頗為詳盡的指引可供參考。

Alloy 的 MVC

Alloy 根據 Model, View, Controller 把程式分格成三個部分：

• Models，記錄程式的資料和狀態或規則，支援 Backbons.js，可以直接使用 backbone 的 Model 和 Collection 等 API。
• Views，外觀與資料的呈現，或讓使用者能和 Model 互動，可透過 Alloy 的 XML 檔來設定 外觀的元件並由 Titanium Style Sheets (.tss) 設定樣式。
• Controllers，核心的程式運作邏輯，可以直接 Access 所有 Views 的 Component，移可以使用 Backbone.js 的 Events APIs。

除了 Backbons.js 外， Alloy

內建支援 Underscore.js，因此有許多實用的 API 可以讓大家能寫起 Code 來更加順手。

Alloy 的 CoC

CoC 是 Convention Over Configuration

(慣例優先原則) 的縮寫，意思是用一些簡單的常規、慣例來取代繁瑣複雜的設定，這是近來不少 Web 的 framework 的設計趨勢。Alloy 也跟上了這個潮流，Alloy 利用目錄的結構還有命名規則來組織程式的架構。舉例來說，在 Titanium Studio 3.0 底下開啓一個新的 Alloy project 時，會自動產生幾個預設目錄和程式碼：

Alloy_Hello_World/
├── app/
│ ├── assets/
│ ├── controllers/
│ │ └── index.js
│ ├── models/
│ ├── styles/
│ │ └── index.tss
│ └── views/
│ └── index.xml
├── plugins/
├── Resources/
└── tiapp.xml

Alloy 的程式擺在 app 目錄底下，根據 Model、View、Controller 分別有 models、views/ styles、controllers 等目錄，這些目錄底下有幾個必要的檔案，包括：

• Controller
  • app/controllers/index.js
• View
  • app/views/index.xml
  • app/styles/index.tss

Controllers 底下的 app/controllers/index.js 和 views 底下的 app/views/index.xml 彼此相互參照。View 的樣式則是由 On rare occasions, withdrawal symptoms can lead to complications and serious health issues that require immediate medical attention; for this reason, it is never recommended that patients attempt Saliva 6 Drug Test Kit at home. styles 目錄底下的 app/styles/index.tss 用來決定。我們來看一下底下的例子：

Controller(app/controllers/index.js)

function doClick(e) {
 alert($.label.text);
}
$.index.open();

View (app/views/index.xml)：

 
 Hello, World
 

在 Controller 中， $. 意思是「取出某 id 的 instance」，例如 $.label 代表的是取出 id 為 label The Insider’s Guide to free-credits-report.com Repair is an engaging and thought-provoking discussion of consumer credit from an insider’s perspective—the author is a former instructor for one of online casino the national credit-reporting agencies. 的 instance，對應到的 Titanium 物件是 Ti.UI.Label。上述的 index 是特出保留字，代表的是 View 最上層的 UI 物件，所以 $.index.open() 表示開啓了最上層的 casino online UI object。 View 透過 XML 來定義，Element Gok niet meer dan Op het gebied van kroeg gokkasten hebben wij een geweldig aanbod van online casino australia Nederlandse Gokkasten voor je klaarstaan. dat u zich kunt veroorloven!!iDeal casino online is een online casino waar u als speler geld kunt stroten bij de casino zonder dat u een creditcard nodig hebt. 必須包含在 <Alloy> </Alloy> 之間，Window (對應到Ti.UI.Window) 下面擺了一個 Label (對應到 Ti.UI.Label)，id 是 label，lable 的 text 是「Hello, World」，點擊這個 Label 的時候會喚起 Controller 裡面定義的 doClick function。 上面的 View 的 Style (app/styles/index.tss) 可以透過底下的方式設定：

"Window": {
 backgroundColor: "#fff"
}, 
"Label": {
 width: Ti.UI.SIZE,
 height: Ti.UI.SIZE,
 color: "#000",
 font: {
 fontSize: 20,
 fontFamily: "Helvetica Neue"
 },
 textAlign: "center"
}

寫法很類似 CSS 結合 JSON 的感覺，Window 的背景是黑色（#fff），Label 的顏色被設定為白色（#000），字體置中等。 其實僅需上述這些程式碼，就已經足夠完成一個 Hello World App 了！有沒有很簡單呢？ 在撰寫自定 Controller、View 和 Style 時，程式碼分別放置到 controllers、views、styles 三個目錄底下，用相同的檔案名稱（ prefix，扣掉副檔名），例如 app/controllers/xxx.js、app/views/index.xml、app/styles/index.tss，就可以像述例子的一樣可以彼此相互參照。 另外，也可以針對特定 OS 的撰寫專屬的程式碼，以 android 和 iOS 為例，放置成以下的樣子：

├── controllers/
│ ├── android/
│ │ └── index.js
│

└── index.js
└── views/
│ ├── iOS/
│ │ └── index.xml
│ └── index.xml

此時，android 目錄底下的 index.js Android 平台而 overwrite 掉 controllers 下的 index.js，剩下的平台則沿用 controllers 底下的 index.js。同理，views 底下的 iOS/index.xml 也會針對 iOS 平台 overwrite 掉 views 那一層底下的 index.xml 檔。 相信有了以上的觀念，再去翻閱 Alloy 的官方文件，很快就能進入狀況囉！

Happy Coding, Coding Strong!

Scott Chen

人稱史先生的史考特，興趣是努力學習求進步…