跨平台移动框架iMAG开发入门

iMAG是一个非常简洁高效的移动跨平台开发框架，开发一次能够同一时候兼容Android和iOS平台，有点儿Web开发基础就能非常快上手。当前移动端跨平台开发的框架有非常多，但用iMAG另一个优点，就是用iMAG开发出的App是原生的。iMAG採用XML + JavaScript（配置 + 脚本）的开发方式，它的原理是将符合iMAG开发规范的XML文件解释成相应的原生应用代码来运行。原生跨平台开发，iMAG App具有和Native App同样的性能和用户体验，因此相比PhoneGap、JQuery Mobile等Web开发框架iMAG适用于对性能要求较高的情况。      

尽管是原生又跨平台，iMAG的开发环境却非常easy，不须要在本地电脑上安装或部署，在iMAG的官网平台www.imagapp.com注冊一个免费帐号，立即就能够開始开发了。注冊完登录，安装站点提示先在手机上安装iMAG开发版的client，然后打开iMAG的在线开发工具開始开发。

登录iMAG开发版client，在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上居中、居左和居右来摆放文本和button。<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来实现，如以下的样例：

<?xml version="1.0" encoding="utf-8"?>  
<imag>  
    <page>  
        <title style="background:gradient(#444444)">  
            <center><label>费用报销单</label></center>  
        </title>  
        <content>  
            <list type="group">  
                <item style="col-width:100,*">  
                    <col>  
                    	<row><label style="color:gray">单据编号：</label></row>  
                    </col>  
                    <col>  
                        <row><label>BXD-20120824-0250</label></row>  
                    </col>  
                </item>  
                <item style="col-width:100,*">  
                    <col>  
                       <row><label style="color:gray">主题：</label></row>  
                    </col>                      
                    <col>  
                       <row><label>客户招待报销单</label></row>  
                    </col>  
                </item>  
                <item style="col-width:100,*">  
                    <col>  
                      <row><label style="color:gray">申请公司</label></row>  
                    </col>                      
                    <col>  
                       <row><label>2012-08-24</label></row>  
                    </col>  
                </item>  
                <item style="col-width:100,*">  
                    <col>  
                        <row><label style="color:gray">职位：</label></row>  
                    </col>                      
                    <col>  
                        <row><label>財务总监</label></row>  
                    </col>  
                </item>  
            </list>   
        </content>  
    </page>  
</imag>  

当中<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控件列表：

在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这些对象对于移动应用也不再适用，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请求，server返回的JSON数据格式例如以下：

{text:'<font color="blue">JSON数据</font>'}

从server端动态获取的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规范开发出的移动应用自己主动适配不同手机。对于不同平台不同分辨率的屏幕，也须要使用多套不同大小的图片去适配，这些图片仅仅须要依照规则放到对应的server文件夹下就可以，手机client会自己主动下载与之相适配的图片。

server端图片资源文件夹结构例如以下：

Android图片资源文件夹是以屏幕密度(density)来区分，而iOS是以屏幕分辨率来区分。anroid和ios文件夹下分别有一个default文件夹，当详细屏幕分辨率或屏幕密度的图片找不到时会读取这个default文件夹中的对应的图片。

比方:<pagestyle=”background:bg.png”>对于Android屏幕分辨率为800×480的手机bg.png图片的文件夹查找顺序是：
/res/android/hdpi
/res/android/default
/res/default

对于iPhone5手机文件夹查找顺序是：
/res/ios/640×1136
/res/ios/default
/res/default

能够看到这个查找顺序是由内向外的。
Android各个屏幕密度的取值例如以下：

能够依据比例来设计各种屏幕图片的大小：比方一个图片在hdpi上大小为48×48，那么在xhdpi上为64×64，在xxhdpi上为96×96(6:8:12)。

打包公布

App开发完毕之后就是打包和公布，打包之前要先上传自己的应用图标和App启动载入图片，由于要适配不同分辨率的手机，图片要上传多套。iOS打包时还要上传证书，这样打包出来的App才可以上传到AppStore。

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