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控件列表:

分类 名称 标签 描写叙述
内容控件 文本控件 label 用来显示文本内容
网页控件 web 用来显示网页内容
button控件 button 用来显示button
图标控件 icon 用来显示资源图片或手机本地图片
图片控件 image 用来显示网络图片
图组控件 slideimage 用来显示一组图片
进度条控件 progress 用来显示运行进度条
日历控件 calendar 用来显示日历,能够用于开发日程管理功能
地图控件 bmap 用来显示地图,能够在地图上标注地理位置信息。
表单控件 表单控件 form 用来表示表单,表单项都包括在form标签内
隐藏域控件 input-hidden 用来表示表单隐藏域
文本输入框控件 input-text 用来输入单行文本内容
password输入框控件 input-password 用来输入password
数字输入框控件 input-number 用来输入数字
邮件地址输入框控件 input-email 用来输入邮件地址
日期输入框控件 input-date 用来输入日期
时间输入框控件 input-time 用来输入时间
搜索框控件 input-search 用来输入搜索内容
文件选择框控件 input-file 用来选择文件
表单提交button input-submit 用来点击提交表单
文本域控件 textarea 用来输入多行文本
单选框控件 select 用来选取单个值
单选button控件 radio 用来选取单个值
单选button组控件 radios 用来选取单个值
多选button控件 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这些对象对于移动应用也不再适用,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屏幕分辨率为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

跨平台移动框架iMAG开发入门的更多相关文章

  1. Visual Studio 2015 和 Apache Cordova 跨平台开发入门

    原文:Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一) 基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于V ...

  2. Python云端系统开发入门——框架基础

    Django框架基础 这是我学习北京理工大学嵩天老师的<Python云端系统开发入门>课程的笔记,在此我特别感谢老师的精彩讲解和对我的引导. 1.Django简介与安装 Django是一个 ...

  3. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  4. ArcGIS API for Silverlight开发入门

    你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击 ...

  5. 【Electron】Electron开发入门

    Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...

  6. .NET 跨平台界面框架和为什么你首先要考虑再三

    ​​​原文地址 现在用 C# 来开发​跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统 ...

  7. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  8. 【译】.NET 跨平台界面框架和为什么你首先要考虑再三

    现在用 C# 来开发跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统深度集成. 这里的 ...

  9. Android开发入门要点记录:四大组件

    cocos2dx跨平台开发中需要了解android开发,昨天快速的浏览了一本Android开发入门教程,因为之前也似懂非懂的写过Activity,Intent,XML文件,还有里面许多控件甚至编程思想 ...

随机推荐

  1. javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  2. 用viewpager实现图片轮播

    应用中常常遇到图片轮播的需求,这时候就需要用到viewpager这个组件.viewpager是android support v4 中提供的一个组件.viewpager使用需要以下几步骤: 1.在布局 ...

  3. nodejs API笔记

    一.URL 涉及到的方法 1.parse():解析地址 2.format():生成地址 3.resolve(from,to):组合成地址 举例说明: url.parse('http://baidu.c ...

  4. Border - SGU 133(排序)

    题目大意:有N对区间现在剔除一些区间,这些区间被另一些区间完全包含,如,Ai<Bi, Bj<Aj, A完全包含B,求出来这样被包含的区间个数. 分析:首先按照第一个数字先进行一下排序,然后 ...

  5. Node.js之事件监听和发送

    演示事件的发送和监听 const events = require("events"); function Account() { this.balance = 0; events ...

  6. pyqt5界面切换

    #主要的思路就是创建两个frame(如果有两个以上同理)使用setVisible()函数显示或者隐藏frame 参数是bool值import sys from PyQt5.QtWidgets impo ...

  7. 二.jquery.datatables.js表格数据添加

    1.后台php public function addtable(){ $data = $_POST; if(M('yanfa_project')->add($data)){ $this-> ...

  8. ORACLE EBS xml publisher 报表输出字符字段前部&quot;0&quot;被EXCEL自动去掉问题

    http://www.cnblogs.com/lzsu1989/archive/2012/10/17/2728528.html   Oracle  EBS 提供多种报表的开发和输出形式,由于MS Ex ...

  9. idea最常使用的快捷键

    撤销 反撤销 : Ctrl+Z / Ctrl+Shift+Z 删除一行 : Ctrl+Y 跳到实现类 : Ctrl+Alt+B 重命名文件:   shift+F6 控制台放大缩小: ctrl+shif ...

  10. JAVA 多线程 杂谈

    一:java创建线程的三种方式: 1.继承Thread类: 2.实现Runnable接口: 3.实现Callable接口:Callable接口重写的是 call() 方法.1-允许有返回值,2-允许抛 ...