跨平台移動架構iMAG開發入門

跨平台移動架構iMAG開發入門

iMAG是一個非常簡潔高效的移動跨平台開發架構，開發一次可以同時相容Android和iOS平台，有點兒Web開發基礎就能很快上手。當前移動端跨平台開發的架構有很多，但用iMAG還有一個好處，就是用iMAG開發出的App是原生的。iMAG採用XML + JavaScript（配置 + 指令碼）的開發方式，它的原理是將符合iMAG開發規範的XML檔案解釋成對應的原生應用代碼來執行。原生跨平台開發，iMAG App具有和Native App相同的效能和使用者體驗，因此相比PhoneGap、JQuery Mobile等Web開發架構iMAG適用於對效能要求較高的情況。      

雖然是原生又跨平台，iMAG的開發環境卻很簡單，不需要在本地電腦上安裝或部署，在iMAG的官網平台www.imagapp.com註冊一個免費帳號，馬上就可以開始開發了。註冊完登入，安裝網站提示先在手機上安裝iMAG開發版的用戶端，然後開啟iMAG的線上開發工具開始開發。

登入iMAG開發版用戶端，在iMAG線上開發工具裡編輯XML檔案並儲存，在手機上重新整理頁面就能看到效果。

Hello World

下面來看這個hello world的例子。iMAG架構使用的XML格式的檔案來描述UI，因此代碼必須符合XML格式的規範，一套代碼在Android和iOS平台都能運行，而且展現出來的是原生UI效果。

<?xml version="1.0" encoding="utf-8"?><imag>    <page>        <title style="background:#6495ED">            <center><label>測試App</label></center>        </title>        <content>            <list type="group">                <item>                    <label>Hello World!</label>                </item>            </list>        </content>    </page></imag>

其中<imag>是XML文檔的根節點，<page>包含整個頁面的內容，是對頁面的抽象和封裝。上面的代碼中<page>包括<title>和<content>兩個部分，分別是頁面的標題和內容。<title>是頁面標題導覽列，有<center>、<left>、<right>三個子節點，分別用來在title上置中、居左和居右來擺放文本和按鈕。<content>裡有個<list>控制項，用來展示“Hello World!”常值內容，list的type屬性是"group"，表示是一個分組列表。

iMAG在Android和iOS系統上會將XML解釋成各自的本地代碼，比如在Android上<label>會解釋成原生的TextView，而在iOS上則會解釋成對應的UILabel。因此不同於HTML，在iMAG架構裡常值內容只能在放在label標籤裡，而不能任意放置。

基本頁面布局

單個頁面通常由title, header, content, footer組成：

<?xml version="1.0" encoding="utf-8"?>    <imag>        <page>            <title style="background:#999999">                <center><label>標題</label></center>            </title>            <header style="background:#cccccc;padding:10">                <label>置頂</label>            </header>            <content style="background:white">                <label>內容</label>            </content>            <footer style="background:#cccccc;padding:10">                <label>置底</label>            </footer>        </page>    </imag>    

<header>中的內容會始終顯示在螢幕上頂部，<content>是頁面的主要內容，<footer>的內容在螢幕中置底顯示。

列表布局

通常頁面內容的布局可以通過清單控制項list來實現，如下面的例子：

其中<item>是清單項目，每個item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。這裡list有點兒類似於HTML裡的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width樣式用來設定多列的跨度，多個用逗號“,”分割，星號“*”表示寬度自適應。

用list控制項可以實現更複雜和細緻的布局效果，下面是用iMAG架構開發的微博App頁面：

UI控制項分類

UI控制項分類iMAG架構的UI控制項可以分為三類：內容控制項、表單控制項、布局控制項。
內容控制項：用來展示文字、圖片等內容資訊。
表單控制項：用來接收使用者輸入的表單資訊。
布局控制項：用來控制頁面內容的布局和擺放。

iMAG架構的UI控制項列表：

分類	名稱	標籤	描述
內容控制項	文本控制項	label	用來顯示常值內容
	網頁控制項	web	用來顯示網頁內容
	按鈕控制項	button	用來顯示按鈕
	表徵圖控制項	icon	用來顯示資源圖片或手機本地圖片
	圖片控制項	image	用來顯示網狀圖片
	圖組控制項	slideimage	用來顯示一組圖片
	進度條控制項	progress	用來顯示進度條
	日曆控制項	calendar	用來顯示日曆，可以用於開發議程管理功能
	地圖控制項	bmap	用來顯示地圖，可以在地圖上標註地理位置資訊。
表單控制項	表單控制項	form	用來表示表單，表單項都包含在form標籤內
	隱藏欄位控制項	input-hidden	用來表示表單隱藏欄位
	文本輸入框控制項	input-text	用來輸入單行常值內容
	密碼輸入框控制項	input-password	用來輸入密碼
	數字輸入框控制項	input-number	用來輸入數字
	郵件地址輸入框控制項	input-email	用來輸入郵件地址
	日期輸入框控制項	input-date	用來輸入日期
	時間輸入框控制項	input-time	用來輸入時間
	搜尋方塊控制項	input-search	用來輸入搜尋內容
	檔案選擇框控制項	input-file	用來選擇檔案
	表單提交按鈕	input-submit	用來點擊提交表單
	文本域控制項	textarea	用來輸入多行文本
	單選框控制項	select	用來選取單個值
	選項按鈕控制項	radio	用來選取單個值
	選項按鈕組控制項	radios	用來選取單個值
	多選按鈕控制項	checkbox	用來選取多個值
	表單驗證控制項	validation	用來驗證表單資料
布局控制項	頁面控制項	page	包含當前頁面的所有內容
	標題控制項	title	用來顯示頁面標題列
	置頂控制項	header	內容在螢幕上置頂
	置底控制項	footer	內容在螢幕上置底
	內容控制項	content	包含頁面的內容部分
	內容組控制項	contents	多個content的組
	標籤欄控制項	tabbar	標籤欄主要用於content內容的切換
	標籤頁控制項	tabs	以標籤頁的形式來顯示內容
	單行控制項	row	用來顯示一行控制項內容
	清單控制項	list	以列表的形式來顯示內容
	網格控制項	grid	以網格的形式來顯示內容
	多螢幕控制項	screens	以多個螢幕的形式來顯示內容
	系統功能表控制項	menu	用來顯示系統菜單
	快顯功能表控制項	actionmenu	用來顯示快顯功能表
	導覽功能表控制項	navmenu	用來顯示導覽功能表
	彈跳菜單控制項	pathmenu	用來顯示彈跳菜單
	側滑菜單控制項	slidingmenu	用來顯示側滑菜單

在iMAG中通過對這些控制項進行簡單的組合和設定，就可以開發出各種效果的UI頁面。

動態指令碼

iMAG架構支援通過標準的Javascript語言來操作UI控制項對象，完成動態互動功能，比如：

<?xml version="1.0" encoding="utf-8"?><imag>  <script>  <![CDATA[    $page.onload = function() {        alert('hello world!');    }  ]]>  </script>  <page>  </page></imag>

上面的代碼會在頁面初始化時觸發onload事件，調用JavaScript方法彈出一個alert對話方塊。

這裡有必要解釋一下Javascript的概念，完整的JavaScript實現是由以下3個不同部分組成的：核心（ECMAScript）、文件物件模型（Document Object Model，簡稱DOM）、瀏覽器物件模型（Browser Object Model，簡稱BOM）。對於iMAG而言實際上只用到了ECMAScript，因為iMAG並不支援DOM和BOM。這是因為移動UI往往頁面簡潔元素較少，沒有必要引入複雜的DOM操作，而且DOM API本身設計糟糕，對開發人員不夠友好。而BOM裡的Window, Navigator, History這些對象對於行動裝置 App也不再適用，iMAG有自己的MOM（Mobile Object Model）。

 iMAG中定義的MOM對象：

● $page：封裝了頁面UI相關的屬性和方法。
● $http：封裝了http操作相關的方法。
● $phone：封裝了手機本地功能調用相關的方法。
● $util：封裝了一些工具 + 生產力方法。

通過這些內建的JavaScript對象和方法，iMAG架構可以輕鬆調用手機本地功能，比如GPS定位。

$phone.locate({   provider: 'gps',   success: function(location) {       alert('GPS定位成功，經緯度：' + location.latitude + ', ' + location.longitude);   },   error: function() {       alert('GPS定位失敗！');   }});

上面的$phone.locate()方法會啟動手機GPS定位功能，定位成功之後回調success方法，顯示出經緯度資訊。

iMAG架構支援動態建立UI控制項，要用到$C()方法，參數是XML格式的文檔，如：

var button = $C('<button id="test_button">按鈕</button>');$('content').add(button);

上面的方法通過XML動態建立了一個button控制項，並在頁面的content裡顯示。

iMAG架構還可以使用Ajax請求來擷取資料，如：

$http.get('http://www.imagapp.com/download/data/http_json_ret.jsp', function(json) {    var obj = JSON.parse(json);    $('test_label').text = obj.text;});

$http.get()方法會發起一個非同步呼叫的Ajax請求，伺服器返回的JSON資料格式如下：

{text:'<font color="blue">JSON資料</font>'}

從伺服器端動態擷取的JSON資料用JSON.parse()方法解析，然後進行處理和顯示。因為iMAG底層是原生代碼非瀏覽器環境，因此在iMAG架構裡調用Ajax請求沒有跨域問題。

使用HMTL5

雖然使用HTML5不是iMAG開發所必須的，但iMAG通過web控制項的方式對HTML5進行了很好的支援和相容，並且提供了指令碼機制使得web可以同原生控制項進行內外互動相互調用，這在開發網站類應用的時候會比較有用。

使用Web控制項顯示HTML網頁的例子：

<?xml version="1.0" encoding="utf-8"?><imag>    <page style="background:white">        <title>            <center>                <label>網頁控制項</label>            </center>        </title>        <content><web><![CDATA[  <style type="text/css">  table.altrowstable {      font-family: verdana,arial,sans-serif;      font-size:11px;      color:#333333;      border-width: 1px;      border-color: #a9c6c9;      border-collapse: collapse;  }     table.altrowstable th {      border-width: 1px;      padding: 8px;      border-style: solid;      border-color: #a9c6c9;  }     table.altrowstable td {      border-width: 1px;      padding: 8px;      border-style: solid;      border-color: #a9c6c9;  }     .oddrowcolor {      background-color:#d4e3e5;  }     .evenrowcolor {      background-color:#c3dde0;  }  </style>  <table class="altrowstable" id="alternatecolor">      <tr class="evenrowcolor">          <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>      </tr>      <tr class="oddrowcolor">          <td<Text 1A</td><td>Text 1B</td><td>Text 1C</td>      </tr>      <tr class="evenrowcolor">          <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>      </tr>      <tr class="oddrowcolor">          <td<Text 3A</td><td>Text 3B</td><td>Text 3C</td>      </tr>      <tr class="evenrowcolor">          <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>      </tr>      <tr class="oddrowcolor">          <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>      </tr>  </table>]]></web>        </content>    </page></imag>

這裡顯示的table表格是標準的HTML，因為內嵌的是HTML標籤，所以這裡必須使用CDATA來進行標記。

適配不同螢幕

iMAG已經屏蔽了不同平台不同解析度手機之間的差異，按照iMAG規範開發出的行動裝置 App自動適配不同手機。對於不同平台不同解析度的螢幕，也需要使用多套不同大小的圖片去適配，這些圖片只需要按照規則放到相應的伺服器目錄下即可，手機用戶端會自動下載與之相適配的圖片。

伺服器端圖片資來源目錄結構如下：

Android圖片資來源目錄是以螢幕密度(density)來區分，而iOS是以螢幕解析度來區分。anroid和ios目錄下分別有一個default目錄，當具體螢幕解析度或螢幕密度的圖片找不到時會讀取這個default目錄中的相應的圖片。

比如:<pagestyle="background:bg.png">對於Android螢幕解析度為800x480的手機bg.png圖片的目錄尋找順序是：
/res/android/hdpi
/res/android/default
/res/default

對於iPhone5手機目錄尋找順序是：
/res/ios/640x1136
/res/ios/default
/res/default

可以看到這個尋找順序是由內向外的。
Android各個螢幕密度的取值如下：

密度	ldpi	mdpi	hdpi	xhdpi	xxhdpi
密度值	dip<140	140<=dip<190	190<=dip<280	280<=dip<400	400<=dip
解析度	240x320	320x480	480x800 480x854	720x1280	1080x1920
比例	3	4	6	8	12

可以根據比例來設計各種螢幕圖片的大小：比如一個圖片在hdpi上大小為48×48，那麼在xhdpi上為64x64，在xxhdpi上為96x96(6:8:12)。

打包發布

App開發完成之後就是打包和發布，打包之前要先上傳自己的應用表徵圖和App啟動載入圖片，因為要適配不同解析度的手機，圖片要上傳多套。iOS打包時還要上傳認證，這樣打包出來的App才能夠上傳到AppStore。

iMAG官網地址：http://www.imagapp.com