iMAG是一個非常簡潔高效的移動跨平臺開發(fā)框架，開發(fā)一次可以同時兼容Android和iOS平臺，有點兒Web開發(fā)基礎(chǔ)就能很快上手。當前移動端跨平臺開發(fā)的框架有很多，但用iMAG還有一個好處，就是用iMAG開發(fā)出的App是原生的。iMAG采用XML + JavaScript（配置 + 腳本）的開發(fā)方式，它的原理是將符合iMAG開發(fā)規(guī)范的XML文件解釋成對應的原生應用代碼來執(zhí)行。原生跨平臺開發(fā)，iMAG App具有和Native App相同的性能和用戶體驗，因此相比PhoneGap、JQuery Mobile等Web開發(fā)框架iMAG適用于對性能要求較高的情況。
雖然是原生又跨平臺，iMAG的開發(fā)環(huán)境卻很簡單，不需要在本地電腦上安裝或部署，在iMAG的官網(wǎng)平臺注冊一個免費帳號，馬上就可以開始開發(fā)了。注冊完登錄，安裝網(wǎng)站提示先在手機上安裝iMAG開發(fā)版的客戶端，然后打開iMAG的在線開發(fā)工具開始開發(fā)。
登錄iMAG開發(fā)版客戶端，在iMAG在線開發(fā)工具里編輯XML文件并保存，在手機上刷新頁面就能看到效果。
Hello World
下面來看這個hello world的例子。iMAG框架使用的XML格式的文件來描述UI，因此代碼必須符合XML格式的規(guī)范，一套代碼在Android和iOS平臺都能運行，而且展現(xiàn)出來的是原生UI效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?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文檔的根節(jié)點，<page>包含整個頁面的內(nèi)容，是對頁面的抽象和封裝。上面的代碼中<page>包括<title>和<content>兩個部分，分別是頁面的標題和內(nèi)容。<title>是頁面標題導航欄，有<center>、<left>、<right>三個子節(jié)點，分別用來在title上居中、居左和居右來擺放文本和按鈕。<content>里有個<list>控件，用來展示“Hello World!”文本內(nèi)容，list的type屬性是"group"，表示是一個分組列表。
iMAG在Android和iOS系統(tǒng)上會將XML解釋成各自的本地代碼，比如在Android上<label>會解釋成原生的TextView，而在iOS上則會解釋成對應的UILabel。因此不同于HTML，在iMAG框架里文本內(nèi)容只能在放在label標簽里，而不能任意放置。
基本頁面布局
單個頁面通常由title, header, content, footer組成：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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>內(nèi)容</label> </content> <footer style="background:#cccccc;padding:10"> <label>置底</label> </footer> </page> </imag> |
<header>中的內(nèi)容會始終顯示在屏幕上頂部，<content>是頁面的主要內(nèi)容，<footer>的內(nèi)容在屏幕中置底顯示。
列表布局
通常頁面內(nèi)容的布局可以通過列表控件list來實現(xiàn)，如下面的例子：
其中<item>是列表項，每個item的都可以有自己的布局，在<item>中，<col>表示一列，<row>表示一行。這里list有點兒類似于HTML里的table，不同的是table是先有行(tr)再有列(td)，而list是先有列(col)再有行(row)。col-width樣式用來設(shè)置多列的跨度，多個用逗號“,”分割，星號“*”表示寬度自適應。
用list控件可以實現(xiàn)更復雜和細致的布局效果，下面是用iMAG框架開發(fā)的微博App頁面：
UI控件分類
UI控件分類iMAG框架的UI控件可以分為三類：內(nèi)容控件、表單控件、布局控件。
內(nèi)容控件：用來展示文字、圖片等內(nèi)容信息。
表單控件：用來接收用戶輸入的表單信息。
布局控件：用來控制頁面內(nèi)容的布局和擺放。
iMAG框架的UI控件列表：
|
分類 |
名稱 |
標簽 |
描述 |
|---|---|---|---|
|
內(nèi)容控件 |
文本控件 |
label |
用來顯示文本內(nèi)容 |
|
網(wǎng)頁控件 |
web |
用來顯示網(wǎng)頁內(nèi)容 |
|
|
按鈕控件 |
button |
用來顯示按鈕 |
|
|
圖標控件 |
icon |
用來顯示資源圖片或手機本地圖片 |
|
|
圖片控件 |
image |
用來顯示網(wǎng)絡圖片 |
|
|
圖組控件 |
slideimage |
用來顯示一組圖片 |
|
|
進度條控件 |
progress |
用來顯示進度條 |
|
|
日歷控件 |
calendar |
用來顯示日歷，可以用于開發(fā)日程管理功能 |
|
|
地圖控件 |
bmap |
用來顯示地圖，可以在地圖上標注地理位置信息。 |
|
|
表單控件 |
表單控件 |
form |
用來表示表單，表單項都包含在form標簽內(nèi) |
|
隱藏域控件 |
input-hidden |
用來表示表單隱藏域 |
|
|
文本輸入框控件 |
input-text |
用來輸入單行文本內(nèi)容 |
|
|
密碼輸入框控件 |
input-password |
用來輸入密碼 |
|
|
數(shù)字輸入框控件 |
input-number |
用來輸入數(shù)字 |
|
|
郵件地址輸入框控件 |
input-email |
用來輸入郵件地址 |
|
|
日期輸入框控件 |
input-date |
用來輸入日期 |
|
|
時間輸入框控件 |
input-time |
用來輸入時間 |
|
|
搜索框控件 |
input-search |
用來輸入搜索內(nèi)容 |
|
|
文件選擇框控件 |
input-file |
用來選擇文件 |
|
|
表單提交按鈕 |
input-submit |
用來點擊提交表單 |
|
|
文本域控件 |
textarea |
用來輸入多行文本 |
|
|
單選框控件 |
select |
用來選取單個值 |
|
|
單選按鈕控件 |
radio |
用來選取單個值 |
|
|
單選按鈕組控件 |
radios |
用來選取單個值 |
|
|
多選按鈕控件 |
checkbox |
用來選取多個值 |
|
|
表單驗證控件 |
validation |
用來驗證表單數(shù)據(jù) |
|
|
布局控件 |
頁面控件 |
page |
包含當前頁面的所有內(nèi)容 |
|
標題控件 |
title |
用來顯示頁面標題欄 |
|
|
置頂控件 |
header |
內(nèi)容在屏幕上置頂 |
|
|
置底控件 |
footer |
內(nèi)容在屏幕上置底 |
|
|
內(nèi)容控件 |
content |
包含頁面的內(nèi)容部分 |
|
|
內(nèi)容組控件 |
contents |
多個 |
|
|
標簽欄控件 |
tabbar |
標簽欄主要用于 |
|
|
標簽頁控件 |
tabs |
以標簽頁的形式來顯示內(nèi)容 |
|
|
單行控件 |
row |
用來顯示一行控件內(nèi)容 |
|
|
列表控件 |
list |
以列表的形式來顯示內(nèi)容 |
|
|
網(wǎng)格控件 |
grid |
以網(wǎng)格的形式來顯示內(nèi)容 |
|
|
多屏幕控件 |
screens |
以多個屏幕的形式來顯示內(nèi)容 |
|
|
系統(tǒng)菜單控件 |
menu |
用來顯示系統(tǒng)菜單 |
|
|
彈出菜單控件 |
actionmenu |
用來顯示彈出菜單 |
|
|
導航菜單控件 |
navmenu |
用來顯示導航菜單 |
|
|
彈跳菜單控件 |
pathmenu |
用來顯示彈跳菜單 |
|
|
側(cè)滑菜單控件 |
slidingmenu |
用來顯示側(cè)滑菜單 |
動態(tài)腳本
iMAG框架支持通過標準的Javascript語言來操作UI控件對象，完成動態(tài)交互功能，比如：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?xml version="1.0" encoding="utf-8"?><imag> <script> <![CDATA[ $page.onload = function() { alert('hello world!'); } ]]> </script> <page> </page></imag> |
上面的代碼會在頁面初始化時觸發(fā)onload事件，調(diào)用JavaScript方法彈出一個alert對話框。
這里有必要解釋一下Javascript的概念，完整的JavaScript實現(xiàn)是由以下3個不同部分組成的：核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）。對于iMAG而言實際上只用到了ECMAScript，因為iMAG并不支持DOM和BOM。這是因為移動UI往往頁面簡潔元素較少，沒有必要引入復雜的DOM操作，而且DOM API本身設(shè)計糟糕，對開發(fā)人員不夠友好。而BOM里的Window, Navigator, History這些對象對于移動應用也不再適用，iMAG有自己的MOM（Mobile Object Model）。
iMAG中定義的MOM對象：
● $page：封裝了頁面UI相關(guān)的屬性和方法。
● $http：封裝了http操作相關(guān)的方法。
● $phone：封裝了手機本地功能調(diào)用相關(guān)的方法。
● $util：封裝了一些實用工具方法。
通過這些內(nèi)置的JavaScript對象和方法，iMAG框架可以輕松調(diào)用手機本地功能，比如GPS定位。
|
1
2
3
4
5
6
7
8
9
|
$phone.locate({ provider: 'gps', success: function(location) { alert('GPS定位成功，經(jīng)緯度：' + location.latitude + ', ' + location.longitude); }, error: function() { alert('GPS定位失敗！'); }}); |
上面的$phone.locate()方法會啟動手機GPS定位功能，定位成功之后回調(diào)success方法，顯示出經(jīng)緯度信息。
iMAG框架支持動態(tài)創(chuàng)建UI控件，要用到$C()方法，參數(shù)是XML格式的文檔，如：
var button = $C('<button id="test_button">按鈕</button>');
$('content').add(button);
上面的方法通過XML動態(tài)創(chuàng)建了一個button控件，并在頁面的content里顯示。
iMAG框架還可以使用Ajax請求來獲取數(shù)據(jù)，如：
$http.get('http://www.zmynmublwnt.cn/download/data/http_json_ret.jsp', function(json) {
var obj = JSON.parse(json);
$('test_label').text = obj.text;
});
$http.get()方法會發(fā)起一個異步調(diào)用的Ajax請求，服務器返回的JSON數(shù)據(jù)格式如下：
{text:'<font color="blue">JSON數(shù)據(jù)</font>'}
從服務器端動態(tài)獲取的JSON數(shù)據(jù)用JSON.parse()方法解析，然后進行處理和顯示。因為iMAG底層是原生代碼非瀏覽器環(huán)境，因此在iMAG框架里調(diào)用Ajax請求沒有跨域問題。
使用HMTL5
雖然使用HTML5不是iMAG開發(fā)所必須的，但iMAG通過web控件的方式對HTML5進行了很好的支持和兼容，并且提供了腳本機制使得web可以同原生控件進行內(nèi)外交互相互調(diào)用，這在開發(fā)網(wǎng)站類應用的時候會比較有用。
使用Web控件顯示HTML網(wǎng)頁的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<?xml version="1.0" encoding="utf-8"?><imag> <page style="background:white"> <title> <center> <label>網(wǎng)頁控件</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，因為內(nèi)嵌的是HTML標簽，所以這里必須使用CDATA來進行標記。
適配不同屏幕
iMAG已經(jīng)屏蔽了不同平臺不同分辨率手機之間的差異，按照iMAG規(guī)范開發(fā)出的移動應用自動適配不同手機。對于不同平臺不同分辨率的屏幕，也需要使用多套不同大小的圖片去適配，這些圖片只需要按照規(guī)則放到相應的服務器目錄下即可，手機客戶端會自動下載與之相適配的圖片。
服務器端圖片資源目錄結(jié)構(gòu)如下：
Android圖片資源目錄是以屏幕密度(density)來區(qū)分，而iOS是以屏幕分辨率來區(qū)分。anroid和ios目錄下分別有一個default目錄，當具體屏幕分辨率或屏幕密度的圖片找不到時會讀取這個default目錄中的相應的圖片。
比如:<page>對于Android屏幕分辨率為800x480的手機bg.png圖片的目錄查找順序是：
/res/android/default
/res/default
對于iPhone5手機目錄查找順序是：
/res/ios/default
/res/default
可以看到這個查找順序是由內(nèi)向外的。
Android各個屏幕密度的取值如下：
|
密度 |
|
|
|
|
|
|
密度值 |
dip<140 |
140<=dip<190 |
190<=dip<280 |
280<=dip<400 |
400<=dip |
|
分辨率 |
240x320 |
320x480 |
480x800 |
720x1280 |
1080x1920 |
|
比例 |
3 |
4 |
6 |
8 |
12 |
可以根據(jù)比例來設(shè)計各種屏幕圖片的大小：比如一個圖片在hdpi上大小為48×48，那么在xhdpi上為64x64，在xxhdpi上為96x96(6:8:12)。
打包發(fā)布
App開發(fā)完成之后就是打包和發(fā)布，打包之前要先上傳自己的應用圖標和App啟動加載圖片，因為要適配不同分辨率的手機，圖片要上傳多套。iOS打包時還要上傳證書，這樣打包出來的App才能夠上傳到AppStore。
