|
动态脚本 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请求，服务器返回的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来进行标记。 | 
/1 
发表于 2014-7-15 18:12:19
收藏
转播
淘帖
楼主
发表于 2014-7-15 23:28:00