【移动应用开发技术】跨平台移动框架iMAG开发入门

【移动应用开发技术】跨平台移动框架iMAG开发入门

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

虽然是原生又跨平台，iMAG的开发环境却很简单，不需要在本地电脑上安装或部署，在iMAG的官网平台注册一个免费帐号，马上就可以开始开发了。注册完登录，安装网站提示先在手机上安装iMAG开发版的客户端，然后打开iMAG的在线开发工具开始开发。登录iMAG开发版客户端，在iMAG在线开发工具里编辑XML文件并保存，在手机上刷新页面就能看到效果。HelloWorld下面来看这个helloworld的例子。iMAG框架使用的XML格式的文件来描述UI，因此代码必须符合XML格式的规范，一套代码在Android和iOS平台都能运行，而且展现出来的是原生UI效果。<?xml

version="1.0"

encoding="utf-8"?>

<imag>

<page>

<title

>

<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控件，用来展示“HelloWorld!”文本内容，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

>

<center><label>标题</label></center>

</title>

<header

>

<label>置顶</label>

</header>

<content

>

<label>内容</label>

</content>

<footer

>

<label>置底</label>

</footer>

</page>

</imag>header中的内容会始终显示在屏幕上顶部，content是页面的主要内容，footer的内容在屏幕中置底显示。列表布局通常页面内容的布局可以通过列表控件list来实现，如下面的例子：<?xml

version="1.0"

encoding="utf-8"?>

<imag>

<page>

<title

>

<center><label>费用报销单</label></center>

</title>

<content>

<list

type="group">

<item

>

<col>

<row><label

>单据编号：</label></row>

</col>

<col>

<row><label>BXD-20120824-0250</label></row>

</col>

</item>

<item

>

<col>

<row><label

>主题：</label></row>

</col>

<col>

<row><label>客户招待报销单</label></row>

</col>

</item>

<item

>

<col>

<row><label

>申请公司</label></row>

</col>

<col>

<row><label>2012-08-24</label></row>

</col>

</item>

<item

>

<col>

<row><label

>职位：</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）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM）。对于iMAG而言实际上只用到了ECMAScript，因为iMAG并不支持DOM和BOM。这是因为移动UI往往页面简洁元素较少，没有必要引入复杂的DOM操作，而且DOMAPI本身设计糟糕，对开发人员不够友好。而BOM里的Window,

Navigator,History这些对象对于移动应用也不再适用，iMAG有自己的MOM（MobileObjectModel）。

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('/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

>

<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>