如何在Linux上開發(fā)跨平臺(tái)的移動(dòng)應(yīng)用程序？
譯文【51CTO譯文】過去這幾年見證了移動(dòng)市場的迅猛發(fā)展，推動(dòng)這個(gè)市場發(fā)展的主要是一大批應(yīng)用程序。作為消費(fèi)者，我們都討厭看到任何一種平臺(tái)造成的某種市場壟斷局面。畢竟，競爭越激烈，創(chuàng)新越多。作為開發(fā)人員，我們對跨平臺(tái)開發(fā)懷有復(fù)雜的心情?？缙脚_(tái)開發(fā)存在幾個(gè)缺點(diǎn)，比如糟糕的平臺(tái)集成和欠靈活的設(shè)計(jì)等等?？墒橇硪环矫妫覀冇帜軌蚪佑|擁有更多消費(fèi)者的更廣闊市場，能夠?yàn)槲覀冮_發(fā)的應(yīng)用程序在眾多平臺(tái)上提供統(tǒng)一的外觀和感覺。
如今，幾乎所有現(xiàn)代的移動(dòng)平臺(tái)都提供面向?qū)ο蟮腁PI。因而，沒有理由不開發(fā)跨平臺(tái)的應(yīng)用程序。我們在本教程中將逐步介紹跨平臺(tái)開發(fā)的基礎(chǔ)知識(shí)。我們將使用來自Appcelerator的Titanium SDK作為一種跨平臺(tái)SDK（軟件開發(fā)工具包）。
我們需要哪些東西？
•了解Java
•PC
•安卓SDK
•Titanium SDK
作為一種開發(fā)平臺(tái)，Titanium讓你可以通過單一源代碼為谷歌安卓以及蘋果iOS開發(fā)原生應(yīng)用程序。它使用Java作為主語言，還能夠與HTML和JavaScript協(xié)同運(yùn)行。它并不依賴WebUI，而且具有擴(kuò)展性。模塊可以用Objective-C編寫而成。
對于通曉Java和HTML的那些人來說，Titanium是切入移動(dòng)開發(fā)的一個(gè)很好的起點(diǎn)。想開發(fā)安卓應(yīng)用程序，你就需要安卓SDK；如果想開發(fā)iOS應(yīng)用程序，則需要Mac。幸好對我們來說，一旦你有了代碼，就可以將代碼導(dǎo)入到Mac上的Titanium，然后針對iOS編譯代碼。
想讓Titanium SDK正常使用，我們就需要下列：
•Oracle Java JDK 6或7
•Node.js
•安卓SDK和安卓NDK
•至少2 GB內(nèi)存
在此下載Titanium SDK（需要注冊）：https://my.appcelerator.com/auth/signup。
Titanium下載完畢后，進(jìn)入到下載目錄，將它解壓縮到/opt。
$ sudo unzip titanium.linux.gtk.x86_64.zip -d /opt
下一步進(jìn)入到終端，設(shè)置路徑。
$ echo 'export MOZILLA_FIVE_HOME=/usr/lib/mozilla' >> ~/.bashrc
$ source ~/.bashrc
接下來，我們要為Titanium SDK安裝所有依賴項(xiàng)。
在Ubuntu或Debian上，我們將使用apt-get：
$ sudo apt-get install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0
在Fedora，使用yum：
$ sudo yum install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0
依賴項(xiàng)安裝完畢后，我們要重新安置Titanium，具體如下所示。
$ sudo ln -s /opt/Titanium_Studio/TitaniumStudio /usr/local/bin/TitaniumStudio
在我們頭一次運(yùn)行Titanium SDK之前，必須為Titanium建立一個(gè)構(gòu)建目錄（build directory）。通常我在/home目錄中有一個(gè)名為“builds”的文件夾（下面另有子文件夾），存放著我的所有項(xiàng)目。不妨先建立一個(gè)構(gòu)建目錄。
$ mkdir ~/builds
構(gòu)建目錄建立完畢后，啟動(dòng)Titanium。
$ TitaniumStudio
用你在下載Titanium過程中創(chuàng)建的那個(gè)用戶帳戶登錄上去，瀏覽至你的構(gòu)建目錄。
Titanium SDK的工作窗口連接到你之前創(chuàng)建的帳戶。它提供了豐富的信息和大量的幫助。在左邊，我們可以選擇是創(chuàng)建一個(gè)新項(xiàng)目還是導(dǎo)入舊項(xiàng)目。就該教程而言，我們將創(chuàng)建一個(gè)新項(xiàng)目，于是選擇“Create Project”（創(chuàng)建項(xiàng)目）選項(xiàng)卡。
在新項(xiàng)目窗口中，我們可以在多個(gè)模板之間進(jìn)行選擇。我們將為本教程選擇默認(rèn)的項(xiàng)目模板。
之后，我們就要為項(xiàng)目命名了。輸入應(yīng)用程序編號(hào)（app id）和公司URL。應(yīng)用程序編號(hào)與公司URL正好反過來，以.appname結(jié)尾。我們網(wǎng)站的URL是http://xmodulo.com，應(yīng)用程序名為“firstapp”。這樣一來，我們的應(yīng)用程序編號(hào)是“com.xmodulo.firstapp”。
就命名的項(xiàng)目而言，我們需要選擇安卓組件。我通常選擇所有安卓組件。
Titanium會(huì)下載和配置所有需要的組件，另外還會(huì)更新舊的組件。下載和安裝安卓組件后，Titanium會(huì)為我們的項(xiàng)目自動(dòng)打開一個(gè)工作窗口。
工作窗口包括兩個(gè)選項(xiàng)卡：app.js和應(yīng)用程序編輯器。app.js用于編寫代碼，應(yīng)用程序編輯器窗口則用于提供應(yīng)用程序信息。
Titanium建立起來后，我們不妨在app.js窗口中創(chuàng)建一些簡單的代碼，了解Titanium的基本元素。
Titanium中最重要的元素就是窗口元素。窗口其實(shí)一點(diǎn)也不復(fù)雜。你可以把窗口視作開發(fā)成果的容器。就某一個(gè)應(yīng)用程序而言，你可以添加一個(gè)或多個(gè)窗口。下一個(gè)重要元素就是視圖元素，這個(gè)長方形可容納其他元素，比如HTML中的標(biāo)記。重要元素還有標(biāo)記組和標(biāo)記。它們又是如何工作的呢？每個(gè)標(biāo)記組都含有一個(gè)或多個(gè)標(biāo)記，而每個(gè)標(biāo)記控制多個(gè)窗口。
構(gòu)建簡單的應(yīng)用程序
在教程的這個(gè)部分，我們將構(gòu)建一個(gè)簡單的應(yīng)用程序，它只有主要的元素。首先，不妨指定一些基本方面，比如像素。像素大小并不采用標(biāo)準(zhǔn)的px標(biāo)注，而是采用百分比，而且需要寫成字符串。
- top,20,
- width:"50%"
至于顏色，我們并不使用名稱，因?yàn)樗鼈儾捎檬M(jìn)制RGB顏色碼。
- backgroundColor:"#f00",
- borderColor:"#87C8FF"
現(xiàn)在使用函數(shù)Titanium.UI.createWindow，我們就能構(gòu)建***批窗口，稍微詳細(xì)地闡述一下。
- var win1 = Titanium.UI.createWindow({
- title:'Tab 1',
- backgroundColor:'#fff'
- });
這個(gè)代碼意味著什么？它表明，我們將含有所有屬性的一個(gè)變量傳遞給createWindows函數(shù)。那些元素背后的邏輯很簡單。
tagGroup是應(yīng)用程序的根，不能包含在其他一些元素中。它含有標(biāo)記，每個(gè)標(biāo)記又含有自己的窗口。不妨把這一切都結(jié)合起來，構(gòu)建成一個(gè)演示窗口、標(biāo)記和視圖的簡單應(yīng)用程序。
- // 創(chuàng)建標(biāo)記組
- var tabGroup = Titanium.UI.createTabGroup();
現(xiàn)在，不妨創(chuàng)建一些窗口和標(biāo)記。
- // 創(chuàng)建基本的UI標(biāo)記和窗口
- var win1 = Titanium.UI.createWindow({
- title:'I am Window 1.',
- backgroundColor:'#fff'
- });
- var tab1 = Titanium.UI.createTab({
- icon:'KS_nav_views.png',
- title:'Tab 1',
- window:win1
- });
- var win2 = Titanium.UI.createWindow({
- title:'I am Window 2',
- backgroundColor:'#fff'
- });
- var tab2 = Titanium.UI.createTab({
- icon:'KS_nav_views.png',
- title:'Tab 2',
- window:win2
- });
之后，我們不妨將所有這些連接成一個(gè)整體。
- // 添加標(biāo)記
- tabGroup.addTab(tab1);
- tabGroup.addTab(tab2);
- // 打開標(biāo)記組
- tabGroup.open();
我們編寫好代碼后，就需要定義其外觀。為此，我們要使用標(biāo)簽元素。有了這個(gè)標(biāo)簽元素，我們就可以為應(yīng)用程序添加背景墻紙，定義原生字體和顏色。另外，它還允許定義其他元素的外觀。我們將為開發(fā)的這個(gè)應(yīng)用程序定義窗口元素的外觀。不妨為我們的應(yīng)用程序構(gòu)建一個(gè)簡單的標(biāo)簽元素。
- var label1 = Titanium.UI.createLabel({
- color:'#999',
- text:'I am Window 1',
- font:{fontSize:20,fontFamily:'Helvetica Neue'},
- textAlign:'center',
- width:'auto'
- });
整個(gè)源代碼又是什么樣子呢？
- // 創(chuàng)建標(biāo)記組
- var tabGroup = Titanium.UI.createTabGroup();
- // 創(chuàng)建基本的UI標(biāo)記和根窗口
- var win1 = Titanium.UI.createWindow({
- title:'Tab 1',
- backgroundColor:'#fff'
- });
- var tab1 = Titanium.UI.createTab({
- icon:'KS_nav_views.png',
- title:'Tab 1',
- window:win1
- });
- var label1 = Titanium.UI.createLabel({
- color:'#999',
- text:'I am Window 1',
- font:{fontSize:20,fontFamily:'Helvetica Neue'},
- textAlign:'center',
- width:'auto'
- });
- win1.add(label1);
- var win2 = Titanium.UI.createWindow({
- title:'Tab 2',
- backgroundColor:'#fff'
- });
- var tab2 = Titanium.UI.createTab({
- icon:'KS_nav_views.png',
- title:'Tab 2',
- window:win2
- });
- var label2 = Titanium.UI.createLabel({
- color:'#999',
- text:'I am Window 2',
- font:{fontSize:20,fontFamily:'Helvetica Neue'},
- textAlign:'center',
- width:'auto'
- });
- win2.add(label2);
- // 添加標(biāo)記
- tabGroup.addTab(tab1);
- tabGroup.addTab(tab2);
- // 打開標(biāo)記組
- tabGroup.open();
這就是我們這個(gè)簡單的應(yīng)用程序在安卓模擬器中運(yùn)行時(shí)呈現(xiàn)的樣子。
這段代碼短小又簡單，卻是一個(gè)很好的起點(diǎn)，可以趁機(jī)開始體驗(yàn)跨平臺(tái)開發(fā)。
英文原文：http://xmodulo.com/develop-cross-platform-mobile-apps-linux.html
布加迪編譯
