跨平台移动框架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控件列表:
分类 | 名称 | 标签 | 描写叙述 |
---|---|---|---|
内容控件 | 文本控件 | 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开发入门的更多相关文章
- Visual Studio 2015 和 Apache Cordova 跨平台开发入门
原文:Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一) 基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于V ...
- Python云端系统开发入门——框架基础
Django框架基础 这是我学习北京理工大学嵩天老师的<Python云端系统开发入门>课程的笔记,在此我特别感谢老师的精彩讲解和对我的引导. 1.Django简介与安装 Django是一个 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- ArcGIS API for Silverlight开发入门
你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击 ...
- 【Electron】Electron开发入门
Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...
- .NET 跨平台界面框架和为什么你首先要考虑再三
原文地址 现在用 C# 来开发跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- 【译】.NET 跨平台界面框架和为什么你首先要考虑再三
现在用 C# 来开发跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统深度集成. 这里的 ...
- Android开发入门要点记录:四大组件
cocos2dx跨平台开发中需要了解android开发,昨天快速的浏览了一本Android开发入门教程,因为之前也似懂非懂的写过Activity,Intent,XML文件,还有里面许多控件甚至编程思想 ...
随机推荐
- C++经典笔试题及参考答案-趋势科技
1.static有什么用途?(请至少说明两种) 答案:1)在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变. 2)在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所用函数 ...
- 无锁队列--基于linuxkfifo实现
一直想写一个无锁队列,为了提高项目的背景效率. 有机会看到linux核心kfifo.h 原则. 所以这个实现自己仿照,眼下linux我们应该能够提供外部接口. #ifndef _NO_LOCK_QUE ...
- 14.3.3 Locks Set by Different SQL Statements in InnoDB 不同的SQL语句在InnoDB里的锁设置
14.3.3 Locks Set by Different SQL Statements in InnoDB 不同的SQL语句在InnoDB里的锁设置 locking read, 一个UPDATE,或 ...
- nohup sort -k1 -n -t$'\t' ./bigfile.16 -o./test/bigfile.16.ok &
nohup sort -k1 -n -t$'\t' ./bigfile.16 -o./test/bigfile.16.ok &
- 《Python学习手册》读书笔记
之前为了编写一个svm分词的程序而简单学了下Python,觉得Python很好用,想深入并系统学习一下,了解一些机制,因此开始阅读<Python学习手册(第三版)>.如果只是想快速入门,我 ...
- Adaboost的几个人脸检测网站
[1]基础学习笔记之opencv(1):opencv中facedetect例子浅析 http://www.cnblogs.com/tornadomeet/archive/2012/03/22/2411 ...
- sql2005,sql2008,sql2012清空日志语句
原文:sql2005,sql2008,sql2012清空日志语句 sql2005清空日志语句 Backup Log DbName WITH no_log GO DUMP TRANSACTION DbN ...
- .Net程序猿乐Android开发---(4)注册页面布局
接下来我们介绍的登陆页面布局,在本节中,我们看一下注册页面布局,页面布局大同小异,来一起熟悉下基本控件的使用方法. 效果图: 1.加入注冊页面 右键选中layout目录,加入注冊页面.例如以下图 点击 ...
- 在ireport中使用checkbox
在网上搜索了很多实现checkbox的办法, 主要是利用打钩图片实现. 下面是我的做法,也不怎么高明, 不过比利用图片好. 后台 map.put("lifeTimePartFlag" ...
- 对付"反盗链"
对付"反盗链" 某些站点有所谓的反盗链设置,其实说穿了很简单, 就是检查你发送请求的header里面,referer站点是不是他自己, 所以我们只需要像把headers的refer ...