ExMobi从入门到精通-移动应用平台ExMobi
<meta name="author" content="黄楠 "/>
第1篇ExMobi基础篇
1 ExMobi概述
1.1 ExMobi概述
1.2 ExMobi组成元素
1.3 ExMobi的应用工作原理
2 MBuilder的使用
2.1 安装、升级和卸载
2.2 安装目录介绍
2.3 首选项配置
2.4 MBuilder主要功能介绍
2.5 PC模拟器基座客户端功能
2.6 使用MBuilder创建第一个应用
2.7 认识应用结构
3 准备工作
3.1 集成开发环境检查
3.2 辅助开发工具介绍
3.3 使用二次开发手册
3.4 基础知识准备
第2篇ExMobi编程基础
4 客户端XHTML编程
4.1 XHTML概述
4.2 XHTML与JS、CSS的关系
4.3 XHTML与JSP的关系
4.4 XHTML控件分类
4.5 XHTML常用界面展现
4.6 XHTML页面的互调
4.7 JS实现本地数据存储
4.8 JS客户端信息调用
4.9 本地能力调用
4.10 JS调用基座能力
4.11 简单逻辑处理
4.12 客户端通用配置
5 服务端敏捷适配开发
5.1 服务端MAPP路由规则概述
5.2 服务端的处理逻辑
5.3 拣选模式特点
5.4 敏捷适配JSP标签库
5.5 敏捷适配JAVA工具集函数
5.6 XPATH扩展函数
5.7 JSP的基本使用
5.8 JSP的处理流程
第3篇ExMobi开发进阶
6 页面抓取集成
6.1 HTTP协议概述
6.1.1.1 请求行
6.1.1.2 消息报头
6.1.1.3 请求正文
6.1.2.1 状态行
6.1.2.2 响应报头
6.1.2.3 响应正文
6.2 常见抓包分析和处理
6.2.2.1 客户端代码
6.2.2.2 抓包特征
6.2.2.3 模拟请求
6.2.3.1 客户端代码
6.2.3.2 抓包特征
6.2.3.3 模拟请求
6.2.4.1 客户端代码
6.2.4.2 抓包特征
6.2.4.3 模拟请求
6.2.5.1 客户端代码
6.2.5.2 抓包特征
6.2.5.3 模拟请求
6.3 实现合并请求
6.3.3.1 发送信息页面展现
6.3.3.2 JSP合并请求处理
7 AJAX的使用
7.1 AJAX的请求特点
7.2 AJAX实例
7.3 AJAX与普通表单提交的差别
7.4 在表单提交中使用AJAX.
8 Web Service集成
8.1 调试工具Soap UI介绍
8.2 SOAP HTTP抓包特征
8.3 Web Service集成
8.3.1.1 客户端代码
8.3.1.2 MAPP路由配置
8.3.1.3 JSP处理请求
8.3.2.1 客户端代码
8.3.2.2 MAPP路由配置
8.3.2.3 JSP请求处理
9 数据库集成
9.1 数据库MAPP配置
9.2 数据库集成
9.2.1.1 客户端代码
9.2.1.2 MAPP路由配置
9.2.1.3 JSP处理请求
9.2.2.1 客户端代码
9.2.2.2 MAPP路由配置
9.2.2.3 JSP处理请求
9.2.3.1 客户端代码
9.2.3.2 MAPP路由配置
9.2.3.3 JSP处理请求
9.2.4.1 客户端代码
9.2.4.2 MAPP路由配置
9.2.4.3 JSP处理请求
10 实现PUSH推送
10.1 PUSH推送概述
10.2 推送的关键要素
10.3 直推式推送实现
10.3.1.1 解决来源问题
10.3.1.2 解决途径问题
10.3.2.1 准备工作
10.3.2.2 解决来源问题
10.3.2.3 解决途径问题
10.3.2.4 在途径中获取来源
10.3.2.5 第三方调用接口
11 附件预览和下载
11.1 永中与openoffice的比较
11.2 支持的预览格式
11.3 文档转换服务配置
11.4 客户端代码实现
11.5 特殊控件或格式附件预览
11.6 非标准格式响应附件预览
第4篇ExMobi安装部署
12 部署应用
12.1 导出应用
12.2 发布应用
12.3 使用基座客户端测试
12.4 客户端打包发布
第5篇ExMobi设计与扩展
13 主题设计和制作
13.1 内置主题的使用
13.2 主题的开发和使用
14 Native插件的开发和使用
14.2 Android插件开发与使用
14.2.1.1 工程创建
14.2.1.2 示例1：SmsComponent的实现
14.2.1.3 示例2：CityComponent的实现...
14.2.1.4 注意事项和FAQ
14.2.2.1 测试类构建
14.2.2.2 示例：CityComponent的测试用例
14.2.2.3 注意事项和FAQ
14.2.3.1 打包步骤
14.2.3.2 注意事项和FAQ
14.2.4.1 示例：SmsComponent 短信能力插件
14.2.4.2 示例：CityComponent 城市选择插件
14.2.4.3 注意事项和FAQ
14.3 IOS插件开发与使用
14.3.1.1 工程创建
14.3.1.2 示例1：SmsComponent的实现
14.3.1.3 示例2：CityComponent的实现...
14.3.1.4 注意事项和FAQ
14.3.2.1 测试类构建
14.3.2.2 示例：CityComponent的测试用例
14.3.2.3 注意事项和FAQ
14.3.3.1 打包步骤
14.3.3.2 注意事项和FAQ
15 Native插件开发实战
15.1 Android插件实例开发与使用
15.1.1.1 工程创建
15.1.1.2 设计插件
15.1.1.3 给资源名和资源文件添加前缀，并且修改包名
15.1.1.4 导入插件需要的类文件
15.1.1.5 创建一个插件类，并且继承Component类
15.1.1.6 完善datePicker类中的getView方法
15.1.2.1 调客户端定义的js,并传值
15.1.2.2 从客户端页面的js向插件传值
15.2 iOS插件实例开发与使用
第6篇ExMobi综合实例
16 开发模式介绍
16.1 同步模式
16.2 异步模式
16.3 异步模式的优势
17 ExMobiJS框架介绍
17.1 基础类base
17.2 应用场景类app
17.3 工具类utility
17.4 动态树类tree
17.5 表单校验类validate.
17.6 SQLite数据库操作类db
17.7 微博调用类weibo
18 应用实例开发
18.1 登录页
18.2 应用登录
18.3 请假申请&列表
18.4 请假申请&详情
19.1 DPI计算方式说明
19.2 客户端头信息说明
&从入门到精通
本书电子版和示例代码请访问GIT仓库：
ExMobi门户：
ExMobi社区：
支撑电话：400-110-77-7333
官方微博（新浪）：@ExMobi
南京烽火星空通信发展有限公司
篇ExMobi基础篇
ExMobi是烽火星空公司推出的跨平台移动应用开发中间件产品。ExMobi通过全面的数据集成技术和丰富的跨平台客户端展现能力，将业务系统快速、安全、高效的移植于移动终端，并从开发（IDE环境）、集成（IT系统对接、云服务）、打包（各个操作系统的应用打包）、发布（应用的运行）、管理（日志管理，更新管理）上提供了一整套的解决方案。
ExMobi包含了一系列的技术和产品，主要包括：ExMobi客户端、ExMobi服务端、MBuilder集成开发工具以及ExMobi产品门户。
ExMobi产品门户网址为www.exmobi.cn ，它包括ExMobi产品中心、EDN开发者门户、BBS社区（bbs.exmobi.cn）以及ExMobi开放平台。
ExMobi产品中心可以了解到ExMobi产品的功能和最新动态；EDN开发者门户为开发者提供应用的开发、发布和管理等一站式服务；BBS社区为开发者提供可持续的学习和交流空间；ExMobi开放平台提供广阔的基于ExMobi的原生插件开发资源，开放平台开发者开发的插件可以作为ExMobi客户端引擎的一部分。
EDN开发者门户、ExMobi开放平台、BBS社区和MBuilder均需要在ExMobi产品门户上进行注册成功后得到账号和密码方能登陆使用。
ExMobi客户端负责应用在移动终端的展示和交互，以及与ExMobi服务端的通信。它主要包含：PC模拟器客户端、Android客户端、IOS客户端、Windows8客户端等。
ExMobi客户端实现跨平台的原理，是在不同移动终端上将同样的功能和交互封装成统一的接口，如：XHTML、JavaScript、CSS、主题、Native插件接口等。对于移动应用开发者来说实际上就像WEB开发一样开发一套XHTML的应用即可进行跨平台的数据展现和交互。而能够执行这种特殊应用的引擎我们称为“基座”。所以，对于一个完整的ExMobi客户端应该包含基座和应用。
而为了方便开发调试，ExMobi客户端存在两种状态，一种是基座状态，一种是打包状态。
基座状态主要在开发调试时使用，安装基座客户端的时候，里面是没有应用的。客户端安装好之后，打开基座客户端首先看到的就是基座，在基座的“设置”功能中配置好开发调试环境的IP和端口即可方便的安装和卸载应用，并对应用进行开发调试，而不是像Native原生开发一样每次都要编译，方便了调试也节省了编译的时间。
打包状态为应用开发完毕后将基座和应用一起打包生成最后发布安装包的状态。打包客户端实际上就是在打开客户端的时候把基座隐藏起来直接看到应用。打包客户端可以使用ExMobi开发者门户的云打包服务进行在线打包。
下图为ExMobi基座客户端效果图。
ExMobi服务端负责对ExMobi客户端请求过来的数据进行处理，并把处理结果响应给客户端进行操作。所以，它主要的功能就是对数据的集成能力。
ExMobi服务端主要包含4大组件：ExMobi管理平台（EMP）、基本核心引擎（BCS）、统一推送引擎（PNS）、统一文档转换引擎（DCS）。
EMP为ExMobi的管理平台，对ExMobi应用和客户端的管理、终端用户使用授权、统计报表展现、其他引擎和服务的管理等。
BCS为数据集成的服务引擎，主要包括：HTTP请求的模拟、Web Service集成、数据库集成、标准接口集成、接口发布等。
PNS为统一推送引擎，实现与BCS的对接，通过UDP/TCP Push、二进制短信push、APNS/C2DM等通道实现应用的统一推送。
DCS为统一文档转换引擎，可以对标准OFFICE文档、压缩包、图片等格式进行支持。也支持对书生SEP、方正CEB、点聚AIP等特殊格式文档进行转换在客户端展示。
下图为部署了ExMobi服务端后在浏览器上看到的EMP管理平台的效果图：
集成开发工具
MBuilde是为了方便开发者开发移动应用而研发的一款基于Eclipse的ExMobi移动应用集成开发工具。
MBuilder包括ExMobi的Eclipse插件、ExMobi的PC模拟器基座客户端以及ExMobi服务端的DEV开发版本（BCS-mini版本+PNS-mini版本+DCS-mini版本，不包含EMP）。
使用MBuilder就像使用Eclipse或者其他开发工具一样，能够方便的创建、编辑、调试和发布应用。
的应用工作原理
ExMobi的应用包含客户端资源和服务端资源。客户端资源运行在ExMobi客户端；服务端资源运行在服务端。
应用的运行原理如下图所示：
ExMobi应用的运行原理实际上是ExMobi服务端将第三方系统数据源转换为ExMobi客户端识别的语言在不同的终端进行展示和交互的一个过程。而服务端转换的依据是通过客户端发起的请求指令经过MAPP路由传递到服务端的。
MBuilder集成开发工具为开发者提供了简单易操作的开发环境。正确使用MBuilder可以极大的提高开发的效率。
安装操作系统要求：支持XP、WIN7（32bit、64bit）。
JDK版本要求：JDK1.6.0_20。
MBuilder版本要求：2.X.X版本。
JDK和MBuilder安装包可以通过下载和安装指引页面下载：
http://www.exmobi.cn/sdkdownload.jsp
运行安装文件，如下图所示：
注：文件名根据实际版本情况而定，其中2.3.6是版本号。
点击“下一步”后选择“安装目录”
安装目录后点击“安装”即可执行安装操作。
安装过程要求安装的组件也需要安装。
模拟器依赖组件：
WebKit组件库：
全部安装完毕，点击“完成”按钮即可完成MBuilder的安装：
安装完成后，会在桌面有MBuilder的快捷图标：
点击即可运行MBuilder，运行前需要选择工作空间，如下图所示：
由于卸载MBuilder的时候整个MBuilder安装目录的内容都会被删掉，为了保险起见，请在MBuilder外部创建工作空间，然后选择该目录。
选择完毕后，点击“OK”按钮进到MBuilder工作界面，由于首次使用需要进行进行登陆，在登陆前需要在ExMobi产品门户进行注册（www.exmobi.cn），使用注册的账号和密码进行登陆，如下图所示：
若账号、密码正确，即可进到MBuilder的工作界面：
MBuilder提供了在线升级的功能，点击主菜单-“help”-“about MBuilder”即可看到界面，如下图所示：
点击“check for updates”即可进行在线升级。
在MBuilder安装根目录下，找到“uninst.exe”文件，点击执行即可进入卸载向导。
在MBuilder的安装目录下，存在如下目录：
|---eclipse&&&&&&&&&&&&&&&&
存放eclipse开发平台相关文件
|--- dropins&&&&&&&&&&
存放MBuilder 插件目录
&&& &&&&&&
|---env&&&&&&&&&&&&&&&&&&&&
依赖组件的安装包（ExMobi/Webkit组件库）
&&&&&&& &&
|---ExMobi&&&&&&&&&&&&&&&&&&
ExMobiPC模拟器基座客户端
&&&&&&& &&
|---ExMobi-server&&&&&&&&&&&
ExMobi服务端DEV版
&&&&&&&&&&
|---apache-tomcat-7.0.22&&&&
自带服务依赖的tomcat
&&&&&&&&& &|---uninst.exe&&&&&&&&&&&&&&
MBuilder的ExMobi客户端和服务端是可以单独升级的。可以到ExMobi产品门户下载PC模拟器安装包和ExMobi服务端的压缩包，安装或者解压相应的目录到MBuilder的客户端和服务端的安装目录下即可。
首选项里面主要对配置文件编码、Tomcat容器（自动配置）、服务端及客户端配置（自动配置）、第三方服务引擎配置、文件模板配置。
&首选项位于主菜单-“window”-“preferences”选项，如下图所示：
选择后会进入到首选项的配置页面，如下图所示：
本节的配置均在首选项中进行。
ExMobi中所有文件的编码要求为“UTF-8”编码，如果编码不对可能会造成乱码和提交错误等问题。
在首选项中一般需要配置的编码的文件为：HTML、CSS、JS、JAVA、JSP等，如下图所示：
Tomcat默认已经是自动配置好的，此处只需要对其进行验证一下即可，如下图所示：
服务端及客户端的配置也是默认配好的，此处也只需要进行确认即可，如下图所示：
服务引擎指的是ExMobi服务端的PNS、DCS、BCS引擎，由于ExMobi服务端支持分布式部署，所以这些引擎是相对独立部署在不同的服务器上的。
如果使用不同服务器上服务，则需要在此处进行配置。
而一般开发者只需要使用本机的服务即可，配置本机服务请看下图：
MBuilder中提供了对所有可编辑文件格式的模板配置，在创建相应格式文件的时候就可以通过模板快速创建出带一定结构的文件。
本小节以XSL文件为例，说明文件模板的配置。
在首选项中找到XSL文件的templates选项，如下图所示：
点击“edit”按钮后，即可对相应的模板进行修改，也可以点击“new”按钮新建一个模板，如下图所示：
编辑好的模板可以在MBuilder中使用，如下图所示：
主要功能介绍
MBuilder工作界面如下：
主菜单：MBuilder的所有功能操作菜单。
快捷菜单：常用的MBuilder功能。
应用程序目录结构：应用的完整结构，对应用资源的管理。
代码编辑区域：应用中可编辑资源的编辑区域，可对资源内容进行修改。
控制台和工具区域：主要是开发辅助调试的工具展示区域。
Tomcat是ExMobi服务端的运行容器，Tomcat的启动、停止和重启就是ExMobi服务端的启动、停止和重启。
Tomcat的启动、停止、重启操作依次在快捷菜单中，如下图所示：
启动&&& 停止&& 重启
点击第一个按钮即可启动Tomcat，启动成功会在控制台中看到成功日志，如下图所示：
如果有客户端要接入该服务端，需要配置对应的IP和端口，比如：
这里的IP和端口就是TOMCAT所在服务器的IP和TOMCAT启动的端口。如果是同一台机器，比如PC模拟器可以使用127.0.0.1的IP，当然，使用实际的IP也可以，从MBuilder的控制台可以看出普通端口是8001，加密端口是8443，如果开启“使用数据加密”，需要填写加密端口；如果是用真机设备上的客户端，需要确保设备和MBuilder的网络是通的，并且填写的IP是同一网段的实际IP，端口仍然使用TOMCAT启动的端口。
MBuilder的新建和导入向导位于快捷菜单中，如下图所示：
点击该按钮即可新建一个应用或者导入一个已经存在的应用，如下图所示：
继续每一个“next”或有相应的配置，最后一个配置是在应用中使用模板和皮肤主题，如下图所示：
配置完成后点击“finish”即可完成应用的新建或者导入。
ExMobi应用包含了客户端和服务端资源，而客户端资源是运行在客户端的，服务端资源是运行在服务端的。
在创建应用的时候应用的资源仅仅存在MBuilder的工作空间中，尚未部署到客户端和服务端，所以需要进行代码同步。
MBuilder中提供了自动代码同步的功能，可以把应用的客户端和服务端资源分别同步到PC模拟器基座客户端和ExMobi的DEV开发版中，这样才能在基座中进行开发调试。
自动同步按钮的图标位于快捷菜单中，图标有两种状态：启动和关闭。
如下图所示的状态为自动同步关闭状态，在该状态下应用不会自动同步：
如下图所示的状态为自动同步启动状态，在该状态下应用才会自动同步：
要同步哪个应用需要先选中该应用，然后再点击自动同步按钮，如下图所示：
应用开发完成只是运行在MBuilder的开发环境中，要投入生产还需要将完整应用包部署到ExMobi的工程环境中，并且需要在EDN开发者门户中将应用的客户端资源包和基座打成打包客户端。
这里涉及两个包的导出：一个是完整应用包的导出，一个是客户端资源包的导出。
一、完整应用包的导出功能在MBuilder的快捷菜单中，如下图所示：
点击按钮前需要先选中要导出的应用，选中后点击该按钮，会弹出如下导出向导界面：
点击“finish”即可导出指定应用的完整应用包到指定的目录，格式为zip。
二、客户端资源包的导出也是位于快捷菜单，如下图所示：
点击该按钮，即可进入导出客户端资源包的导航页面，如下图所示：
第一步：选择应用的版本：
第二步：选择要生成客户端资源的应用，以及要生成的分辨率、存放目录等，如下图所示：
点击“finish”即可完成应用客户端资源的打包，包的格式为zip。
模拟器基座客户端功能
PC模拟器基座客户端是为了进行开发调试方便而研发的一款产品。它可以最大限度的模拟移动设备终端的效果，使开发达到所见即所得的目的。
打开PC模拟器基座客户端的按钮也位于快捷菜单中，如下图所示：
他主要分为“菜单栏”、“模拟手机客户端界面”、“模拟手机按键”三部分。
菜单栏包含：设置、编辑、工具、性能测试和帮助功能
一、 “设置”部分主要进行三类设置
1)模拟器模拟的终端平台和型号等，比如：android的三星手机、iOS的iPad2平板等。
2)界面缩放。有时候模拟pad的设备，在PC机中会显示比较大，可以通过缩放功能对显示的界面进行等比缩放，方便开发查看和切换。
3)横竖屏切换。横竖屏切换是开发中常遇到的问题，对模拟器进行相应的切换设置可以及时看到效果。
二、“编辑”部分可以对开发展示的界面进行截屏处理。
三、“工具”部分可以启动简易抓包工具、JSON格式数据、打开当前显示页面的源码、复制当前页面地址以及打开PC模拟器的程序目录。
四、“性能测试”部分可以对整个应用的运行性能进行测试，让开发人员了解运行的情况以进行应用的优化。
五、“帮助”部分可以查看模拟器的版本号等信息。
手机客户端界面主要分四部分：演示中心、参数设置、进入基座和关于我们。
一、演示中心：包含烽火星空公司的一系列开发模板、行业应用和成功案例，可以方便开发者或者项目经理对开发进行参考以及项目前期的演示等使用。
二、参数设置：可以设置应用访问相关的一些信息，如：ExMobi服务端的IP、端口、页面动画效果的开关、缓存的设置等。MBuilder中的PC模拟器默认设置的IP和端口使用的是本机的环境。
三、进入基座：该界面与开发者息息相关，在MBuilder中创建的应用经过同步或者应用的安装等操作后即可在该界面实时看到应用运行的效果，方便开发者开发调试。
四、关于我们：在该界面中，主要可以查看模拟器的版本号、IMSI、ESN、模拟的分辨率等信息。
手机按键主要有：菜单键、home键、返回键。下图是模拟键和手机按键的对应关系：
创建第一个应用
第一个应用很容易就让人想起“Hello World”，没错我们现在就通过创建一个“Hello World”的应用来展示一个“Hello World”的页面。
在MBuilder中点击新建应用按钮，如下图所示：
点击后就会进到创建应用的导航页面。
在创建应用的导航页面，填写应用信息，我们的应用名称为“helloworld”如下图所示：
&& Project name 项目名；（必填项）
&& Application ID 应用ID，必须和项目名一致；（必填项）
&& Application Name 应用名。（必填项）
&& Application Version 版本号。（必填项）
&& Scope 应用支持的表现形式，是客户端方式的还是wap方式的，还是都支持；
&& Access 该应用是否需要网络（network）、gps定位（gps）、拍照（camera）；
&& HomePage 该应用访问的第一个页面，可以是本地页面，也可以是网络地址。Res开头的为本地页面，http的地址是网络页面。这里使用的是本地页面。
点击“next”按钮进到“设置应用图片”面板
在开发者信息设置面板可以填写一些开发者的基本信息，如下图所示：
此步骤一般可以直接跳过。
继续点击“next”按钮，可以进入皮肤模板选择面板。
进入“皮肤模板选择面板”后，可以选择使用某个模板的某个皮肤，如下图所示：
本次创建不使用模板，后面的章节中我们会单独对模板的开发和使用进行介绍。
所以该面板我们选择结果如下：
不选择模板则所有的模板选项均不可选择。
点击“finish”即可完成应用的创建。
应用创建完成后，打开PC模拟器基座客户端，点击“进入基座”，这时候会发现创建的应用并没有在客户端中显示，如下图所示：
可以看到界面中左上角和右上角都有一个操作按钮。
其中左上角的按钮为“应用管理”，点击进去可以看到存在的应用列表；右上角的按钮为“更多选项”，点击进入可以对基座的一些信息和参数进行设置和读取。
点击左上角的按钮，可以看到提示无应用，如下图所示：
为什么我们创建好了应用，但是在应用列表中却看不到应用？
这是因为应用管理是客户端向服务端拉取应用列表。而应用创建于MBuilder的工作空间中，并没有同步部署到ExMobi服务端，所以这时候在客户端是请求不到应用的。
这时候我们就需要做一件事情，那就是“应用自动同步”。
在MBuilder中首先选中要同步的应用，这里选择“helloworld”应用跟目录，然后点击快捷菜单中的“自动同步”按钮，如下图所示：
将“不同步”状态改成“自动同步”状态，如下图所示：
退出基座界面到客户端首页，重新点击“进入基座”，这时候就可以看到新创建的应用已经同步到客户端，如下图所示：
如果继续点击左上角的“应用管理”按钮，可以对已经同步的应用进行卸载和安装，如下图所示：
然后点击“启动Tomcat”的图标把Tomcat启动好。
当点击应用的“进入”按钮的时候，会提示“链接文件不存在”，如下图所示：
为什么会报这个错误，这里先卖一个关子。我们将通过下一节2.7的内容进行讲解。
在上一节中，我们看到图2-6-6-1中的报错，那是因为点击“进入”按钮，实际上是请求应用的首个页面，这个提示的意思就是说首个页面的地址文件不存在。
这就需要先来了解应用的结构。如下图所示是一个应用的基本结构：
应用根目录下有一个文件（config.xml）和两个文件夹（server、client）。
基本信息配置
config.xml文件为应用的基本信息配置文件，使用MBuilder默认生成的配置内容和说明如下：
这里需要注意的是，homepage项即为应用的入口节点，它支持本地文件（res:开头）也支持网络地址（http://开头）。当点击应用图标，也就是图2-6-6-1中点击”进入”按钮的时候会触发该首页地址。页面上提示“链接文件不存在”意思就是说我们设置的“res:page/index.xhtml”本地页面不存在，因为我们还没有创建该文件。
除此之外还有几个特殊配置项：
access.land
横竖屏切换
（重力感应）
取值为boolean值，false（默认值）代表强制竖屏，true代表横竖屏自动切换。
access.orientation
默认显示方向
为应用默认显示的方向，有两个取值&#8212;&#8212;port：设置应用为竖屏模式；land：设置应用为横屏模式；padland_phoneport：设置PAD为横屏模式，phone为竖屏模式；padport_phoneland：设置PAD为竖屏模式；phone为横屏模式。
config.theme
取值为对应皮肤包的id。
homepage.defaultsrc
网络连接错误的处理页面
只支持本地静态页面，如果不设置，则跳转到基座的设置页面。
客户端资源文件夹
client文件夹下包含page、css、script、theme等子目录，存放的都是客户端资源。所谓客户端资源就是运行在客户端的文件。
由于不同终端存在分辨率不同的问题，所以在client的子目录下都区分了phone和pad目录，再往下又分为default（默认资源）、ldpi（低分辨率资源）、mdpi（中分辨率资源）、hdpi（高分辨率资源）、xhdpi（超高分辨率资源），以image目录为例，如下图所示：
对于DPI的划分，可以参考附录14.1。
这时候客户端读取的资源就是client/image/phone/hdpi目录下的资源。到ExMobi的PC模拟器的apps目录，找到应用image的目录地址，比如：C:\developer\MBuilder\ExMobi\apps\helloworld\image，可以看到如下图片：
可以看到，同步到客户端的资源都没有了分辨率的信息。
其实，当打开PC模拟器的时候，在模拟器标题栏可以看到如下信息：
从右往左看，它表明的是当前模拟器模拟的是终端类型为phone，DPI为hdpi。
客户端使用什么资源就是根据客户端的信息来读取相应的资源的。
如果客户端要使用logo.png这个图片，中间的分辨率信息是不需要写的，也就是说正确的引用方法为res:image/logo.png即可引用logo.png图片。
需要特别说明default目录。该目录是公共文件目录，也就是说不管是哪个DPI的客户端都可以使用default目录的资源。Default目录的资源跟DPI下的资源一样也会同步到image目录下，不含有default目录本身。所以如果default目录和DPI目录如有有相同名字的资源，那么DPI下的资源会覆盖default下的资源。
所以可以总结客户端资源使用的规则为：客户端使用的资源根据客户端的类型（phone、pad）和DPI信息（ldpi、mdpi、hdpi、xhdpi）找到对应的dpi资源，同时也会去找default下的资源，如果DPI下有和default下同名的资源，那么使用的将会是DPI目录下的资源。
根据本节前面的提示信息“链接文件不存在”确定是因为尚未创建首页地址“res:page/index.xhtml”，所以接下来我们可以在client/page/phone目录下的default目录或者hdpi目录下创建index.xhtml文件。在default目录点击右键，如下图所示：
即可打开创建新XHTML页面的面板，如下图所示：
修改文件名为“index.xhtml”，然后点击“finish”即可创建完毕页面，并在MBuilder中打开默认页面，如下图所示：
再次点击“进入”应用就不会报错，并且显示该页面信息，如下图所示：
在开发的过程中，可以使用这些可以允许的客户端资源来进行展示和脚本操作。
服务端资源文件夹
server文件夹用于存放在服务端执行的文件。其目录结构如下：
其中，JSP文件夹用于存放JSP文件；xsl文件夹用于存放xsl文件；mapp.xml文件为服务端的规则配置文件，是一个统一的全局配置。
mapp.xml配置文件其功能主要有：
1)配置处理第三方系统的JSP文件。
2)设置第三方系统的伪域名。
3)Push推送频道的配置。可执行Push消息的推送。
4)数据库资源配置。可以指定多个数据源。可在JSP中使用配置好的数据源。
5)定时器配置（定时执行某个请求）。
6)多媒体类型映射（为特殊contenttype指定文档格式，如doc、ppt等）。
7)Session类型设置（默认是有session限制，如果为新浪网等新闻类系统可以设置无session限制）。
8)文档预览和下载缓存配置。可以设置缓存的天数。
其常用配置如下表：
用于标识符合MAXML规范的xml文件
用来表明路由节点信息元素, 其baseaddr属性为第三方系统的域名/ip地址，该域名可以为伪域名
&forward/&
_PAGE元素转发元素
用来对每个请求处理进行转发元素，通过pattern属性正则匹配第三方系统的地址，然后转向path属性设置的JSP进行处理。
应用相关配置元素
应用伪域名元素
用于应用伪域名配置，address属性指定第三方系统的真实域名/ip，name属性指定伪域名。通过配置，整个应用不管是xhtml、jsp还是mapp.xml的route配置中都可以使用伪域名。
&database/&
数据源元素
数据库的数据源配置，用于在JSP中作为数据源直接调用。
用来表明多组推送频道元素，其authpage属性
&pushchannel/&
推送频道元素
用来设置一个推送频道的处理策略，必须包含一个id作为频道的唯一标识，path为轮循推送必须的处理JSP，并且needsubscribed指明是否为订阅频道，同时需要设置corn子标签指明推送的周期间隔。
&services/&
用来表明多组接口服务元素。
&http-service/&
http接口服务元素
提供第三方系统调用的http接口服务，必须配置pattern属性指明访问路径，配置path路径指明中间件对接收到的数据的处理JSP页面。
一个mapp.xml最基本的内容一般为：
&maxml version=&2.0&
xmlns=&http://www.nj.fiberhome.com.cn/map&
&&& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&& xsi:schemaLocation=&http://www.nj.fiberhome.com.cn/map
maxml-2.0.xsd&&
&&& &route baseaddr=&http://domain&&
&&&&&&& &!--
登陆页面get
&&&&&&& &forward pattern=&/app/template/login.jsp& path=&login.jsp&/&
&&&&&&& &!--
登陆校验post带键值对 --&
&&&&&&& &forward pattern=&/app/template/checkLogin.jsp& path=&checkLogin.jsp&/&
&&&&&&& &!--
新建任务get
&&&&&&& &forward pattern=&/app/template/jsp/addTask.jsp& path=&addTask.jsp&/&
&&&&&&& &!--
保存任务post带附件 --&
&&&&&&& &forward pattern=&/template/action/taskManagerAction.jsp\?handler=save&
path=&taskManager.jsp&/&
&&&&&&& &!--
列表展示post带XML请求体 --&
&&&&&&& &forward pattern=&/app/template/action/taskManagerAction.jsp\?handler=list&dataType=xml.*&
path=&taskManagerListXML.jsp&/&
&&&&&&& &!--
列表展示post带JSON请求体 --&
&&&&&&& &forward pattern=&/app/template/action/taskManagerAction.jsp\?handler=list&dataType=json.*&
path=&taskManagerListJSON.jsp&/&
&&& &/route&
&&& &config&
&&&&&&& &!--
为第三方系统的实际访问地址配置一个简写域名domain，以后所有请求前面部分都可以使用domain代替，route的baseaddr也可以写为domain
&&&&&&& &domain address=&miap.cc:1001& name=&domain&/&
&&& &/config&
里面最常用的就是route请求路由配置。实际上，客户端的所有http请求并不是立即触发的，而仅仅是告诉服务端要触发http请求，真实的请求是在服务端的JSP里面触发的。那么客户端的http请求如何知道是哪个服务端的JSP来处理自己的请求？route配置其实就起到了桥梁的作用，通过route配置，可以为客户端的请求配置处理的JSP文件进行逻辑处理。
在helloworld应用的index.xhtml中增加一个“ExMobi门户网站”的超链接：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.nj.fiberhome.com.cn/exmobi.dtd&&
&meta charset=&UTF-8&/&
&title&Hello
World&/title&
&a href=&http://www.exmobi.cn/&&ExMobi门户网站&/a&
其效果如下：
当点击该超链接的时候，并没有实际的去请求“ExMobi门户网站”，而是先在mapp的route里面去找是否有该请求对应的处理JSP。因为还没有配置，页面会报错，如下图所示：
该错误信息可以在MBuilder的响应码查询中进行查看报错原因，如下图所示：
途中提到的“需要配置添加相应的应用处理页面”指的就是服务端的处理JSP。也就是说还没在route中配置处理的JSP文件。
现在可以在mapp.xml中配置route如下：
&?xml version=&1.0& encoding=&UTF-8&
&maxml version=&2.0& xmlns=&http://www.nj.fiberhome.com.cn/map&
&&&&& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&&&& xsi:schemaLocation=&http://www.nj.fiberhome.com.cn/map
maxml-2.0.xsd&&
&htmlformat wellformat=&true&
&route baseaddr=&http://www.exmobi.cn&&
&&&& &forward pattern=&/& path=&index.jsp&/&
这就指明了“http://www.exmobi.cn/”这个请求处理的JSP名为“index.jsp”。所以还需要在sever目录的JSP子目录中新建index.jsp，如下图所示：
在弹出的新建面板中输入文件名，如下图所示：
即可创建默认的JSP文件，如下图所示：
&%@ page language=&java&
import=&java.util.*,com.fiberhome.bcs.appprocess.common.util.*&
&contentType=&application/uixml+ charset=UTF-8&
pageEncoding=&UTF-8&%&
&%@ include file=&/client/adapt.jsp&%&
&!DOCTYPE html SYSTEM &http://www.nj.fiberhome.com.cn/exmobi.dtd&&
&meta charset=&UTF-8&/&
&title&Hello
World&/title&
is the page content.
重新点击客户端的“ExMobi门户网站”链接就可以看到一个新的页面，如下图所示：
特别的，如果为第三方地址配置的JSP的文件名和第三方地址的文件名刚好一样，这时候是可以不用配置MAPP路由的，它会自动智能匹配处理的JSP文件。
比如客户端发起如下几种格式的URL请求，他们的特点是名称都为action：
http://domain/action.jsp
http://domain/action.jsp?type=1
http://domain/action.jsp?type=2
http://domain/action.do?type=1
http://domain/action.php?type=2
http://domain/action?type=3
如果在jsp目录新建一个文件action.jsp，由于其名称也是action，在不给上述URL配置MAPP路由的情况下，服务端会自动匹配该action.jsp进行处理。
所以对于basic@fiberhome应用里的几个配置项：
&!-- 登陆页面get --&
&forward pattern=&/app/template/login.jsp&
path=&login.jsp&/&
&!-- 登陆校验post带键值对 --&
&forward pattern=&/app/template/checkLogin.jsp&
path=&checkLogin.jsp&/&
&!-- 新建任务get --&
&forward pattern=&/app/template/jsp/addTask.jsp&
path=&addTask.jsp&/&
其实是可以不用配置的，因为第三方系统的URL和处理的JSP名称一致。
所以对于一些名称一样，参数不一样的第三方系统URL，最好配置的PATH不要以该URL的名称命名MAPP路由的JSP文件，这样可能导致逻辑混乱。
以下各项请逐个检查：
n检查ExMobi集成开发环境MBuilder是否已经安装好。
n运行Tomcat看是否能正常启动。
n启动客户端PC模拟器，在“系统设置”中配置为本机IP和Tomcat运行的端口（8001），并点击“应用管理”菜单看是否能正常进入。
注：没有安装、配置或者出现运行异常的请参照《MBuilder安装手册》。
辅助开发工具主要是帮助开发人员在不写代码的情况来分析第三方系统的交互情况，并进行模拟和取值，方便在写代码前理顺思路。
HTTPAnalyzerStdV2
抓包和网络请求分析工具
正则校验工具
已经集成在MBuilder中
XPATH校验工具，SOAP模拟请求工具
模拟http请求
二次开发手册在MBuilder菜单中的“Help-》Help
Contents”中，如下图所示：
点击后的帮助界面有一些二次开发的相关文档，其中就包含二次开发手册：
其中的“ExMobi二次开发手册”为客户端和服务端的API手册，开发者可以方便的查找API来实现不同的业务场景功能。
使用ExMobi进行开发需要大致了解：HTML、JavaScript、CSS的基本语法；正则表达式的用法；XML的文档结构以及XPATH的基本语法；TCP/IP网络协议的原理和报文分析。
篇ExMobi编程基础
客户端XHTML编程
XHTML是ExMobi客户端的标记语言。与W3C规范的XHTML不同的是，ExMobi的XHTML是对标准HTML的集成和扩展&#8212;&#8212;继承适合在移动终端使用的控件，并扩展更多新的控件更方便移动应用的开发和移动终端的展示。
后续提到的XHTML均指代ExMobi的XHTML。
移动应用开发涉及多平台开发，不同平台开发语言不同，所以能够统一、简单、快捷的进行开发是选择使用XHTML的最大原因。
因为使用XHTML有诸多好处：
1)开发语言统一。XHTML只是一种描述性标记语言，不同平台的ExMobi的客户端都可以解析正确语法的XHTML。所以开发者只需要编写一套XHTML代码即可在不同平台上运行。
2)代码结构简单。XHTML代码结构采用的是XML结构，层次分明。
3)代码简洁，表达丰富。XHTML只需要给指定的标签设置不同的属性和样式即可展现丰富的界面效果。
4)可重用性好。XHTML由于其XML特性，故可以很方便的进行模板化以达到最大化的可重用性。
5)可扩展性好。XHTML继承自ExMobi强大的组件内核，可以很方便的进行扩展出更多原本没有的控件，根据不同的使用场景进行插件的定制开发。
6)纠错方便。XHTML代码必须符合ExMobi的规范，此规范是验证XHTML代码正确性的标准，在XHTML代码中只要声明使用此规范即可进行快速纠错。
的基本结构
XHTML遵循ExMobi的语法定义，并严格符合XML的语法规范。
其基本结构如下：
1)第1-2行是文档规范声明，意思是文档内容必须符合ExMobi语法规范。
2)第3行表示XHTML内容的开始，第18行表示XHTML内容的结束。
3)第4-12行是head头信息声明区域，可以设置字符编码、title标题信息、JS脚本和CSS样式表等。
4)第5行是声明页面编码。
5)第6行是设置title标题头的信息。
6)第7-11行是JS代码块，其中第9行为JS中的代码注释写法。
7)第13-17行为body区域，用于显示页面的主体内容，其中第14行是XHTML中的代码注释写法。
除此之外，在XHTML中可以添加不同功能的控件、JS和CSS，后续章节中会有详细介绍。
规范的XHTML
XHTML是一种特殊的XML。所以，XML中的关键字需要被转义。XML中已经定义的转义字符包括：
修改helloworld应用的index.xhtml页面如下所示：
由于该页面中含有&没有转义为&所以导致页面不符合XML，所以打开此页面会报错，如下图所示：
他会明确告知是第14行错误，将&字符转义为&后再看页面效果：
CDATA块是XML中的特殊区块，CDATA中的内容不会被解析器解析，而是原样输出。所以一般JS的内容都是很不确定的，并且JS语法经常使用引号、大于小于号等XML的关键字，所以JS内容通常包在CDATA中，这些内容就不需要进行转义。
但是JS中有一个很常用的功能&#8212;&#8212;innerHTML，改属性是给控件设置内部HTML内容。在ExMobi中，作为显示的HTML片段如果包含XML的关键字也是需要转义的。
而JS中如果是给某个控件赋值，比如obj.value =这样的赋值，如果value中包含XML的关键字是不需要转义的。
所以，符合XML规范的XHTML应该具备如下特征：
1)xml中使用
&& ' 与 && 均代表 '
&& & 与 & 均代表 &
&& & 与 &&& 均代表 &
代表 &,不支持直接放置 &
&&&&&&&& 代表 &,不支持直接放置 &
&& ' 与 && 均代表 '
&& & 与 &&& 均代表 &
&&&&&& 代表 &
&& & 当属性通过 ‘&& ‘ 包裹时，可直接放置 “，当属性通过 ” “包裹时，必须用&
&& &&&&&&&&
代表 &,不支持直接放置 &
&&&&&&&& 代表 &,不支持直接放置 &
2)js中使用& 注：为防止xml转义引起歧义，js语句必须被&![CDATA[&&
a)通过innerHTML构建控件,控件属性或者text中
&&&&&&&&&&&&& &&&&&&&
&&&&&&&&&&&&& &&&&&&&
&&&&&&&&&&&&& &&&&&&
&&&&&&&&&&&&& &&&&&
&&&&&&&&&&&&& &&&&&
&&&&&&&&&&&&&
function change(){
&&&&&&&&&&&&&&&&&&&&&&&&&&& var
ctrl = document.getElementById(&mydiv1&);
&&&&&&&&&&&&&&&&&&&&&&&&&&& ctrl.innerHTML
= &&textarea
id=\&mytextarea1\&&&&&&&&/textarea&&div
id=\&mydiv2\&
href=\&&&&&&\&&&&&&&&/div&&;
&&&&&&&&&&&&&&&&&&&&&&&&&&& var
ctrl2 = document.getElementById(&mydiv2&);
&&&&&&&&&&&&&&&&&&&&&&&&&&& alert(ctrl2.href);
&&&&&&&&&&&&& &
&& 结果为：&&/&&
b)通过js设置控件属性
&&&&&& 代表 &
&&&&&& 代表 &
&&&&& 代表 &
&&&& 代表 &
&&&& 代表 &
&&&&&&&&&&&&&
function change(){
&&&&&&&&&&&&&&&&&&&&&&&&&&& var
ctrl = document.getElementById(&mytextarea1&);
&&&&&&&&&&&&&&&&&&&&&&&&&&& ctrl.value
= &&&&&&&;
&&&&&&&&&&&&& &
设置后结果为：&&&&&
&&&&&&&&&&&&& \&&&&&&&&
&&&&&&&&&&&&& \'&&&&&&&
&&&&&&&&&&&&& &&&&&&&&&
&&&&&&&&&&& 代表 &
&&&&&&&&&&& 代表 &
function change(){
&&&&&&&&&&&&&&&&&&&&&&&&&&& var
ctrl = document.getElementById(&mytextarea1&);
&&&&&&&&&&&&&&&&&&&&&&&&&&& ctrl.value
= &\&\'&&&&;
&&&&&&&&&&&&& &
&&&&&& &设置后结果为：&'&&&
文档类型的声明
XHTML是一种语法规范，符合XHTML规范的文档称为XHTML文档。
有两种方式声明XHTML文档类型：
1)静态文件后缀名为xhtml。该种方式仅针对静态文件，就是创建一个本地的页面，其后缀为xhtml格式。Helloworld应用中的首页地址index.xhtml就是一个xhtml文档。
2)动态文件声明响应content
type为“application/uixml+xml”。动态文件是指JSP、PHP、.NET等语言开发的页面，而content-type是http协议中规定文档格式的头信息。如果这些页面是要在ExMobi客户端中进行显示，必须声明响应的content- type为“application/uixml+xml”。比如helloworld应用的index.jsp就声明了content-type，如下所示：
&%@ page language=&java&
import=&java.util.*,com.fiberhome.bcs.appprocess.common.util.*&
&contentType=&application/uixml+ charset=UTF-8&
pageEncoding=&UTF-8&%&
但是无论是哪种方式，一旦声明了文档类型为XHTML，内容则必须符合XHTML的规范，否则在ExMobi客户端中将无法进行正确解析和展示。
与JS、CSS的关系
JS是JavaScript的简称，是一种客户端脚本语言，ExMobi客户端可以执行XHTML页面中的JS；CSS是层级样式表，可以渲染XHTML页面的控件显示效果。
的引用和使用
JS有两种使用方式，一种是直接在XHTML中的script代码块中编写JS代码；另一种是把JS代码写在本地的JS文件中，通过script标签引用本地的JS文件即可使用。如下所示：
注意：XHTML里的JS无法引用网络侧的JS文件。
比如下面的引用是错误的：
&script src=&http://domain/script/index.js&&&/script&
的引用和使用
CSS有三种使用方式，第一种是直接在XHTML中的style代码块中编写CSS代码；第二种是把CSS代码直接写在某个控件的style属性中；第三种把CSS代码写在本地的CSS文件中，然后通过link控件引用本地的CSS文件。如下所示：
通过方法一和方法三使用CSS，只能通过类选择器和派生选择器进行引用。而且派生选择器只支持一级。
上图方法一的就是类选择器的用法，即给控件设置class样式名，然后在创建一个以该名为引用的样式。
派生选择器的用法为控件的名称即为样式的引用，比如要给一个a控件写样式可以这么写CSS：
&&& &font-weight:
与JSP的关系
JSP是一种动态语言，属于服务端语言中的一种，并不直接运行在客户端。所以JSP的运行是在依赖于运行容器的，比如Tomcat。容器运行后会得到一个执行结果，执行结果可以返回给客户端进行操作。
所以ExMobi中的JSP是运行在ExMobi的服务端的，其响应的内容文档可以是XHTML，也可以是XML、JSON等一些比较常用的数据格式，还可以是doc、ppt、jpg等office文档格式或者图片格式。
通常，如果JSP响应结果直接作为页面展现，则需要输出为XHTML文档，这时候需要声明JSP的content-type为“application/uixml+xml”；如果只是作为数据需要进一步的处理，比如页面中发起的AJAX请求的JSP响应可以输出为XML或者JSON等方便JS操作的格式，同时也需要把content-type设置为相应数据格式的类型，比如JSON数据的头信息为“application/json”。
XHTML是由不同控件组合而成，这些控件主要分为6大类：语义控件、顶级容器控件、布局控件、导航控件、表单控件和多媒体控件。
所谓语义控件，就是指只有一定的含义，但是不会在客户端中进行展现的控件。比如：html、script、link、meta、style、head等控件都是语义控件。
其中html控件为XHTML文档的根容器控件，一个XHTML文档以html控件为开始。
顶级容器控件是XHTML中的主容器控件，这些控件都只能位于html根容器之下，并且互相不能嵌套。
顶级容器控件包括：body（内容主体容器）、dialog（对话框容器）、fix（绝对定位容器）、footer（固定底部容器）、header（固定顶部容器）、leftcontainer（左侧区域容器）、rightcontainer（右侧区域容器）、title（标题区域容器）。
其中，dialog和fix容器是浮动在其他容器之上的，不会占用其他容器的区域；而剩下的其他6个容器的区域共同铺满整个XHTML的屏幕页面，并且如果其中一个不使用或者不显示，其所占区域会让渡给其他的容器使用，其他容器仍然铺满整个XHTML的屏幕页面。
可以通过如下代码：
&meta charset=&UTF-8&/&
&title&title区域&/title&
&header id=&header& style=&background-color:#aaaaaa&&
&& header是固定在头部的容器，不出现滚动条
&leftcontainer id=&lefter& style=&background-color:#bbbbbb;width:70;&&
&& &div style=&height:1001;&&
&&&&& leftcontainer是固定在左边的容器，内容超出会显示滚动条
&& 下面没有内容了
&/leftcontainer&
&body style=&background-color:#cccccc&&
&& &div style=&height:1001;&&
&&&&& body中的内容，超过会有滚动条。必须显示，不能隐藏。
&&&&& &a href=&document.getElementById('header').style.display='none'&&隐藏header&/a&
&&&&& &br/&
&&&&& &a href=&document.getElementById('footer').style.display='none'&&隐藏footer&/a&
&&&&& &br/&
&&&&& &a href=&document.getElementById('lefter').style.display='none'&&隐藏leftcontainer&/a&
&&&&& &br/&
&&&&& &a href=&document.getElementById('righter').style.display='none'&&隐藏rightcontainer&/a&
&&&&& &br/&
&&&&& &a href=&document.getElementById('fixer').style.display='none'&&隐藏fix&/a&
&&&&& &br/&
&&&&& 可以看到，除了header、footer、leftcontainer、rightcontainer以外剩下的区域都属于body，并且不受fix的影响，所以，如果这些容器不写，则body的空间就会更大。
&& 下面没有内容了
&& &fix id=&fixer& style=&top:70%;left:0;background-color:#ffffff;&&
&&&&& fixset可以包含多组fix容器，fix是绝对定位的容器，悬浮于窗口之上，所以可以看到其内容可以横跨&br/&
&&&&& header、footer、body、leftcontainer、rightcontainer&br/&
&&&&& 可以设置其left或者right之一以及top或者bottom之一来实现绝对定位
&rightcontainer id=&righter& style=&background-color:#dddddd;width:70;&&
&& &div style=&height:1001;&&
&&&&& rightcontainer是固定在右边的容器，内容超出会显示滚动条
&& 下面没有内容了
&/rightcontainer&
&footer id=&footer& style=&background-color:#eeeeee;&&
&& footer是固定在底部的容器，不出现滚动条
其效果如下：
将header、footer、leftcontainer隐藏后的效果：
继续隐藏rightcontainer和fixset后的效果：
可以看到原来header、footer、leftcontainer、rightcontainer的区域都给了body，而fixset只是隐藏对body没有影响。
title区域在页面中不能改变显隐状态，默认是显示的，如果需要隐藏可以给title控件加属性show=&false&来隐藏。上面代码设置后的显示效果如下：
布局控件提供不同粒度的控件来对页面布局提供强有力的保证。
独立布局控件为最小粒度的布局控件，它们只能对自身的布局进行控制。如：a、artfont（艺术字）、br、font、hr等。
整体布局控件本身是具有固定结构的一个整体，它可以对内部的特定元素进行布局。如：table、tree（树控件）、htmlgroup（页面组）等。
局部布局控件可以针对部分的其他控件进行布局调整，它不想整体布局控件那样有固定结构。比如：div、page（页容器）、scroll、slidingcontainer、h（横向布局）、v（纵向布局）等。
实际上，除了布局控件外，其他控件也都可以对自身进行布局。只是布局控件的作用是以布局为主。
导航控件顾名思义就是做引导用的，方便用户能够知道如何进行操作、引导用户操作等。
导航类控件主要通过简单的标题和图标指示用户的操作。比如：list（动态列表）、listitem（单行、双行列表）、titlebar（标题栏，可代替title控件）等。
菜单类控件通常是提供一组相似功能的菜单给用户选择使用。比如：grid（九宫格）、animationmenu（动画菜单）、contextmenu（弹出菜单）、menubar（底部导航菜单）、tabbar（顶部导航菜单）等。
引导类控件通过一些简单的动作引导用户操作。比如：dragrefresh（拉拽刷新）、marquee（跑马灯）、toggle（显隐组）等。
表单控件主要用于表单页面的展现以及数据的提交，可以提交值的控件都有value属性。
要作为表单提交的两个必要条件为：
1)要作为表单提交的表单控件必须放置于form控件中；
2)form控件的enctype属性必须为： application/x-www-form-urlencode（普通提交方式）或者multipart/form-data（带有附件的提交方式），不写则默认为application/x-www-form-urlencode。
部分控件在form表单中的提交值如下：
控件提交值
&eselect&可编辑选择框
编辑框value值
&handsign&手写签名
手写生成文件路径（sys 开头）
&input:autocompletetext&记忆框
编辑框value值
&input:camera&拍照摄像
拍照生成文件路径（sys: 开头）
&input:checkbox&复选框
相同name值value组成字符串，以&连接 如 奥迪&奔驰
&input:decode&动态解码
编辑框内解码结果
&input:file&文件选择框
已选中文件路径（sys: 开头）
&input:password&密码框
编辑框内密码值
&input:radio&单选框
单选框控件value值
&input:text&输入框
编辑框内输入值
&object:date&日期选择框
已选中日期值
&object:time&时间选择框
已选中时间值
&select&选择框
已选中option项value值
&textarea&多行文本域
textarea输入值
&handwriting&增强手写
手写完成后生成图片文件的完整路径（sys：开头）
&photoupload&增强型拍照控件
手写完成后生成图片文件的完整路径（sys：开头），多个文件以&连接
&input:record&录音
录音完成后生成的录音文件路径（sys：开头）
&switch&开关
可以看出来，部分表单控件具备了调用本地能力的功能，比如：input:camera可以调用摄像头、input:record可以调用录音功能等。
所谓多媒体控件是指使用了多种元素进行展现的控件。比较常用的多媒体控件有：
&baidumap&
浏览器控件
附件集，进行附件的预览、下载、打开、签批等
&gaodemap&
&photoupload&
增强型拍照控件
常用界面展现
中间件客户端支持对文字多样性的展现，比如：文字的大小、颜色、样式等，也能给文字添加超链接，使文字能够与其他页面进行交互。如下面的页面效果：
其代码实现如下：
&meta charset=&UTF-8&/&
&title&基本文字展现&/title&
&font&一般用font修饰字体，这是没有经过修饰的字体&/font&
&font style=&font-size:large;&&将文字变大&/font&
&font style=&font-size:small;&&将文字变小&/font&
&font style=&color:#ff0000;&&给文字添加颜色&/font&
&font style=&font-weight:bold;&&将文字加粗&/font&
&font style=&font-style:italic;&&将文字显示为斜体&/font&
&font style=&text-decoration:underline;&&给文字添加下划线&/font&
&font style=&font-size:small;color:#00ff00;font-weight:bold;font-style:italic;text-decoration:underline;&&综合使用样式的文字，可以任意组合&/font&
&div style=&font-size:large;color:#0000ff;font-style:italic;&&很多控件可以修饰文字，这是在div中修饰文字&/div&
&a href=&res:page/interactive.xhtml&&给文字添加超链接，不加样式&/a&
&a href=&res:page/layout.xhtml& style=&color:#ff0000;text-decoration:none;&&这是一个超链接，去掉了下划线并设置了颜色&/a&
页面跳转可以通过超链接来实现，能够通过超链接打开的页面类型有两种：
应用中的本地文件
href=&res:page/index.xhtml&&打开一个本地页面&/a&
http://开头
href=&http://www.exmobi.cn&&合作伙伴门户&/a&
超链接通常搭配target属性使用，指定为新打开一个页面（_blank）还是在本页面中打开（_self）。
任何页面类型都可以通过以下方式触发：
href=&http://www.nj.fiberhome.com.cn&&烽火星空门户网站&/div&
type=&button& value=&请点击&
onclick=&res:page/index.xhtml&/&
window.open(&res:page/index.xhtml&);
任何具有href、onclick的控件都能触发超链接，而且超链接除了可以打开页面，也可以进行其他的交互，如下表：
src=&res:image/logo.png&/&
src=&res:script/exmobijs/base.js& /&
href=&res:page/index.xhtml&&打开一个本地页面&/a&
客户端资源
href=&sys:data/sys/help.xhtml&&客户端帮助页面&/a&
href=&file:SD/text.txt &&安卓系统文件&/a&
http://开头
href=&http://www.exmobi.cn&&合作伙伴门户&/a&
ftp://开头
可以指定账号密码目录等信息
href=&window.open('res:index.xhtml')&&用JS打开一个页面&/a&
href=&tel:&&拨打电话&/a&
sendsms:开头
href=&sendsms:,:true:节日快乐&&短信群发&/a&
调用手机程序打开文件
href=&open:file:SD/ppt培训.pdf &&打开安卓文件
href=&open:http://192.168.100.131:8001/Test/file/mp4/cat.mp4 &
target=&_blank & &cat.mp4播放&/a&
调用浏览器
browser:开头
href=&browser:http://wap.sohu.com&&进入WAP主页&/a&
download@http://开头
下载天下无天
下载天下无天
script:开头
返回上一页
退出客户端
ExMobi采用的是流式布局的原则对界面控件进行布局。所谓流式布局是指在容器（区域控件和布局控件）中，从左到右、至上而下对该容器里面的控件进行布局，当一行不能容纳的时候自动换行。
横向布局可以设置容器控件（如：div、font等）的text-align属性来指定子控件的布局，也可以使用控件本身的align属性指定本控件在父容器中的布局，他们的属性值是一样。比如：center为居中、left停靠左侧、right停靠右侧显示。
纵向布局只能通过div的text-valign属性来指定子控件的布局，比如：top为停靠容器顶部、middle垂直居中、bottom停靠容器底部显示。也可以通过br、hr对内容进行换行和分隔。
内外边距可以使容器和控件间产生一些间距。其中外边距margin可以使容器或者控件与其他容器控件产生间距；内边距padding可以使容器和它内部的容器或者控件以及文本产生间距。也可以给控件添加border边框，并设置边框的弧度。
需要注意的是，控件的宽度width和高度height已经包含了margin、padding和border的大小。而一般控件的margin、padding和border都会有默认值。所以实际显示的控件大小应该是宽度或者高度减去margin、padding和border后剩下的大小。
比如下面代码：
&meta charset=&UTF-8&/&
&title&基本布局&/title&
&font style=&color:#ff0000&&横向布局&/font&&font&：给div设置text-align（对子容器有效）和给button设置align（对自身有效）&/font&
&div style=&border-size:1dp;padding:4 4 4 4;text-align:center&&
&& &input type=&button& value=&给div设置text-align:center&/&
&div style=&border-size:1dp;padding:4 4 4 4; &&
&& &input type=&button& value=&给button设置align:center& style=& align:center;&/&
&font&下面的两个div在一行显示，各占50%，各div内部左边的内容占40%，右边的输入框占60%，并且div设置了外边距(margin)，让div之间有间隔：&/font&
&div style=&width:50%;border-size:1dp;margin:0 0 0 2%&&
&& &font style=&width:30%;text-align:right;&&姓名&/font&
&& &input type=&text& style=&width:70%&/&
&& &font style=&width:30%;text-align:right;&&性别&/font&
&& &input type=&text& style=&width:70%&/&
&div style=&width:50%;border-size:1dp;margin:0 0 0 2%&&
&& &font style=&width:30%;text-align:right;&&班级&/font&
&& &input type=&text& name=&class&
style=&width:70%&/&
&& &font style=&width:30%;text-align:right;&&年级&/font&
&& &input type=&text& name=&grade&
style=&width:70%&/&
&font style=&color:#ff0000&&纵向布局&/font&&font&：div设置text-valign（对子容器有效）：&/font&
&div style=&border-size:1dp;height:100;text-valign:middle;&&
&& &font&文字&/font&&input type=&text& style=&width:40%& /&
&font&下面的的div设置了上下内边距(padding)都为30，也可以达到垂直居中的效果：&/font&
&div style=&border-size:1dp;padding:30 0 30 0;&&
&& 这里的文字跟div有上下间距
实现效果如下：
除了使用div布局，还有其他框架布局控件：page（页容器）、scroll（滚动容器）、 slidingcontainer（左右滑动容器）、table（表格容器）、tree（树容器）。
布局的基本原则是：
1)框架布局控件多用于构建一个页面的框架结构；
2)其他布局控件（如：div、font等）则是在进行微调的时候使用。
3)应尽量避免使用div来实现大量布局和嵌套使用以提升界面显示的效率。
4)表单控件具有布局能力。表单控件本身能布局的不要使用布局控件代替。
常见的导航一般有位于底部的菜单导航（menubar）、九宫格导航（grid）、列表导航（listitem）、分页、位于顶部的tab导航（tabbar）。
通过下面代码认识它们：
&meta charset=&UTF-8&/&
&title&导航页面&/title&
&& height:40;
&& border-size:1;
&& padding:8 4 0
&& height:40;
&& width:33%;
&& border-size:1;
&& border-radius:8;
&& padding:4 4 4
&& margin:0 4 0
&& text-align:center;
&& text-valign:middle;
&& background-click-color:#dddddd;
&& background-color:#cccccc;
&& &tabbar showtype=&text&&
&& &tab text=&tab1页& selected=&true& bindpage=&page1&/&
&tab text=&tab2页& bindpage=&page2&/&
&tab text=&tab3页& bindpage=&page3& /&
&page id=&page1&&
&& &grid style=&color:black;click-color:#ff8800;color-current:#0000ff;cell-background-click-color:#cccccc;cell-background-radius:4;&&
&&&&& &cell text=&列表控件& href=&res:page/listitem.xhtml& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&拖动列表& href=&res:page/list.xhtml& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&&&&& &cell text=&功能模块& icon=&res:image/icon_man.png& /&
&& &/grid&
&page id=&page2&&
&& 这是第二页的内容
&page id=&page3&&
&& 这是第三页的内容
&menubar showtype=&mix& style=&menu-background-current-color:#000000;&&
&& &menu text=&待办& bindpage=&page1& icon=&res:image/menubar-icon-daiban.png&
currenticon=&res:image/menubar-icon-daiban.png&/&
&& &menu text=&新建& bindpage=&page2& icon=&res:image/menubar-icon-xinjian.png&
currenticon=&res:image/menubar-icon-xinjian.png&/&
&& &menu text=&通讯录& bindpage=&page3& icon=&res:image/menubar-icon-tongxunlu.png&
currenticon=&res:image/menubar-icon-tongxunlu.png&/&
&& &menu text=&公告& icon=&res:image/menubar-icon-tongzhigonggao.png&
currenticon=&res:image/menubar-icon-tongzhigonggao.png&/&
&& &menu text=&更多& icon=&res:image/menubar-icon-gengduo.png& currenticon=&res:image/menubar-icon-gengduo.png&&
&&&&& &submenu text=&加班& icon=&res:image/icon_jiaban.png& clickicon=&res:image/icon_jiaban.png&/&
&&&&& &submenu text=&请假& icon=&res:image/icon_qingjia.png& clickicon=&res:image/icon_qingjia.png&/&
&&&&& &submenu text=&调休& icon=&res:image/icon_tiaoxiu.png& clickicon=&res:image/icon_tiaoxiu.png&/&
&& &/menu&
&/menubar&
效果如下：
其中tabbar和menubar可以与page控件进行绑定，达到可以通过左右滑动局部却换内容。
列表导航（listitem）一般分为单行（oneline）和双行（twoline），代码如下：
&meta charset=&UTF-8&/&
&title&列表展示&/title&
&!-- 单行列表
&listitem type=&oneline& href=&res:page/index.xhtml&
icon=&res:image/icon_user.png& caption=&列表caption& ricon=&res:image/icon_arrow.png& /&
&listitem type=&oneline& href=&res:page/index.xhtml&
icon=&res:image/icon_user.png& caption=&列表caption& ricon=&res:image/icon_arrow.png& /&
&!-- 双行列表
&listitem type=&twoline& href=&res:page/index.xhtml&
icon=&res:image/icon_user.png& caption=&列表caption& sndcaption=&列表sndcaption& ricon=&res:image/icon_arrow.png&/&
&listitem type=&twoline& href=&res:page/index.xhtml&
icon=&res:image/icon_user.png& caption=&列表caption& sndcaption=&列表sndcaption& ricon=&res:image/icon_arrow.png&/&
&footer style=&background-color:#cccccc;&&
&input type=&button& value=&&&&/&
&input type=&button& value=&&&/&
&font style=&align:center;&&1/2&/font&
&input type=&button& value=&&&
style=&align:right;&/&
&input type=&button& value=&&&&
style=&align:right;&/&
效果如下：
上面的是比较固定布局的list，如果需要进行简单的自定义布局，可以使用list控件，同时支持上下拖拽进行分页。需要注意的是list控件只支持通过注入JS数据来生成列表数据。代码如下：
&meta charset=&UTF-8&/&
&title&拖动列表&/title&
&& showList();
showList(){
listview = document.getElementById('listview');
&& var dp =
listview.getDataProvider();
&& var item =
&& item.push('{&name&:{&innerHTML&:&黄楠&},&number&:{&innerHTML&:&&},&listitem&:{&href&:&alert(1)&}}');
&& item.push('{&name&:{&innerHTML&:&高明珠&},&number&:{&innerHTML&:&&},&listitem&:{&href&:&alert(2)&}}');
&& dp.appendItems('['+item.join(',')+']');
&& dp.refreshData();
&body onload=&doLoad()&&
&list id=&listview& onscrolltop=&showList()& onscrollbottom=&showList()&&
&& &div data-role=&listtopdrag& style=&text-align:center;height:30dp&&
&&&&& &font style=&font-size:20dp;color:#333333&&向下拖动&/font&
&& &div data-role=& listtoprelease& style=&text-align:center&&
&&&&& &font style=&font-size:20dp;color:#333333&&释放即将刷新&/font&
&& &div data-role=&listtoprefresh& style=&text-align:center& &
&&&&& &font style=&font-size:20dp;color:#333333&&正在刷新.....&/font&
&& &div data-role=&listitem& style=&background-click-color:#cccccc;&&
&&&&& &div style=&width:10%;&&
&&&&&&&& &img src=&res:image/icon_user.png&/&
&&&&& &/div&
&&&&& &div style=&width:80%;&&
&&&&&&&& &font id=&name& style=&color:#5f5f5f;font-size:1.5em&&姓名&/font&
&&&&&&&& &br /&
&&&&&&&& &font id=&number& style=&color:#5f5f5f;font-size:1.5em&&电话号码&/font&
&&&&& &/div&
&&&&& &div style=&width:10%;&&
&&&&&&&& &img src=&res:image/icon_arrow.png&/&
&&&&& &/div&
&&&&& &hr/&
&& &div data-role=&listbottomdrag& style=&text-align:center;height:30dp&&
&&&&& &font style=&font-size:20dp;color:#333333&&向上拖动&/font&
&& &div data-role=& listbottomrelease& style=&text-align:center&&
&&&&& &font style=&font-size:20dp;color:#333333&&释放即将刷新&/font&
&& &div data-role=&listbottomrefresh& style=&text-align:center&&
&&&&& &font style=&font-size:20dp;color:#333333&&正在刷新.....&/font&
其效果如下，拖拽后释放可以继续追加数据：
其他常用的导航控件还有：
1)animationmenu动态菜单（必须置于fixset中）；
收起状态：
展开状态：
2)contextmenu弹出菜单，必须通过内置脚本script:popmenu(id)才能打开菜单；
3)hdiv临界事件导航，即拖动到页面顶部或者底部的时候可以引导触发事件，比如：上下拖动加载上下页内容。
ExMobi客户端的表单控件除了提供标准html的表单控件，也提供了比如：拍照、摄像、日期、时间、可编辑选择框、开关等控件，更适合在移动终端上使用。
在移动终端中由于屏幕大小有限，很多时候需要对表单内容进行分组，这时候可以使用div，为div设置边框大小（border-size）、边框颜色（border-color）和边框弧度（border-radius）等相关样式即可达到分组的效果，结合使用tabbar可以进行更复杂的分组。
比如下面的代码：
&&&&& &title show=&false&/&
&&&&& &style&
&&&&& .container{
&&&&&&&& border-size:1;
&&&&&&&& border-color:#ababab;
&&&&&&&& border-radius:4;
&&&&&&&& background-color:#ffffff;
&&&&&&&& margin:4 4 4
&&&&& &/style&
&&&&& &script&
&&&&& &![CDATA[
&&&&& function
doSubmit(){
&&&&&&&& document.getElementById('form').submit();
&&&&& &/script&
&& &/head&
&& &header&
&&&&& &titlebar caption=&返回& title=&表单界面& rcaption=&操作& riconhref=&script:popmenu(oper)& iconhref=&script:close&/&
&& &/header&
&&&&& &contextmenu id=&oper&&
&&&&&&&& &option caption=&保存& onclick=&doSubmit()&/&&&&& &&
&&&&&&&& &option caption=&提交& onclick=&doSubmit()&/&
&&&&& &/contextmenu&
&&&&& &form id=&form& action=&http://local/submit.jsp&
method=&post&&
&&&&&&&& &eselect&
&&&&&&&&&&& &option selected=&true&&可编辑的select&/option&
&&&&&&&&&&& &option&eselect控件&/option&&&&
&&&&&&&& &/eselect&
&&&&&&&& &select&
&&&&&&&&&&& &option selected=&true&&select控件&/option&
&&&&&&&&&&& &option&select控件&/option&&&&
&&&&&&&& &/select&
&&&&&&&& &input type=&text& prompt=&文本提示&/&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& &font style=&width:25%;margin:0 0 0 8;&&文本固定&/font&
&&&&& &&&&& &input type=&text& prompt=&只能输入数字& validate=&num& style=&width:75%;border-size:0;margin:1 0 1 0;&/&
&&&&&&&& &/div&
&&&&&&&& &input& type=&file& prompt=&file&/&
&&&&&&&& &input type=&camera& prompt=&拍照&/&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& 日期段
&&&&&&&&&&& &br/&
&&&&&&&&&&& &object type=&date& prompt=&开始日期& style=&width:50%;&&&/object&&object type=&time& prompt=&开始时间& style=&width:50%;&&&/object&
&&&&&&&&&&& &object type=&date& prompt=&结束日期& style=&width:50%;&&&/object&&object type=&time& prompt=&结束时间& style=&width:50%;&&&/object&
&&&&&&&& &/div&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& &font&内容:&/font&
&&&&&&&&&&& &br/&
&&&&&&&&&&& &textarea rows=&3& type=&text&&&/textarea&
&&&&&&&& &/div&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& 开关
&&&&&&&&&&& &switch ontext=&开& offtext=&关& id=&switch_autologin& checked=&true& style=&align:right;on-background-color:#ff8800;& /&
&&&&&&&& &/div&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& 单选
&&&&&&&&&&& &br/&
&&&&&&&&&&& &input type=&radio& name=&radio&
caption=&选项1&/&
&&&&&&&&&&& &input type=&radio& name=&radio&
caption=&选项2&/&
&&&&&&&&&&& &input type=&radio& name=&radio&
caption=&选项3&/&
&&&&&&&& &/div&
&&&&&&&& &div class=&container&&
&&&&&&&&&&& 多选
&&&&&&&&&&& &br/&
&&&&&&&&&&& &input type=&checkbox& name=&checkbox& caption=&选项1&/&
&&&&&&&&&&& &input type=&checkbox& name=&checkbox& caption=&选项2&/&
&&&&&&&&&&& &input type=&checkbox& name=&checkbox& caption=&选项3&/&
&&&&&&&& &/div&
&&&&& &/form&
&& &/body&
其效果如下，点击操作可以调用JS打开contextmenu菜单，注意这里隐藏了title标题区域，取而代之的是在header中使用titlebar控件显示标题，作用是给titlebar添加操作按钮：
一般常用的属性和使用场景如下：
控件的唯一标识
通常用于对该控件进行JS操作的时候使用。
表单控件的名称
当表单控件需要提交到服务端的时候需要给控件指定name，否则控件不会被提交。
href、onclick
进行超链接操作
通常用于页面跳转、执行JS逻辑或者交互操作的时候使用。
style、class
给控件设置样式
需要给控件设置样式的时候使用，style为直接写样式，class是使用外部的样式。
每一个控件本身都有一些默认的样式，通常情况下是不需要修改的，所以了解一些常用样式可以灵活的对控件进行修饰。
一般需要对文字进行强调或者弱化的时候使用。
font-weight
一般需要对文字进行强调的时候使用。
font-style
一般需要对文字进行强调的时候使用。
text-decoration
文字下划线
在A控件中设置是否下划线达到界面显示效果一致。
一般需要对文字进行强调或者弱化的时候使用。
设置控件宽度
设置控件高度
一般在表单中通常用于内容分组或者逻辑处理
背景（点击）颜色
background-color
设置背景颜色
background-click-color
点击时的背景色
给控件添加点击效果，通常用在div或者导航控件中
background-image
设置背景图片
background-click-image
点击时的背景色
给控件添加点击效果，通常用在div或者导航控件中
text-align
子容器横向布局
一般在顶级容器或者div、font中使用，对内部的容器设置横向对齐方式
text-valign
子容器纵向布局
一般在顶级容器或者div、font中使用，对内部的容器设置纵向对齐方式
控件自身布局
一般用在表单控件、font、div中使用，用于指定控件本身在父容器中的横向对齐方式
可以通过样式设置点击效果的常用控件主要有：
background-click-image、background-click-color
menu-background-click-image、menu-background-current-image、menu-background-click-color、menu-background-current-color、menu-click-color、menu-current-color
tab-background-click-color、tab-background-current-color、click-color、current-color、border-current-color
cell-background-click-image、cell-background-current-image、cell-background-click-color、cell-background-current-color
background-click-color、background-click-image
background-click-image、background-click-color
input:button
background-click-color
其中click代表点击的效果，current代表选中的效果。
可以通过给html标签设置样式实现页面切换动画效果：
openanimation
页面打开的动画效果
none：无；slideright：从左到右；slideleft：从右到左（默认）；slidedown：从上到下； slideup：从下到上；zoom：从内向外；fade：渐显
closeanimation
页面关闭的动画效果
none：无；slideright：从左到右（默认）；slideleft：从右到左；slidedown：从上到下；slideup：从下到上；zoom：从外向内；fade：渐隐
页面的互调
有时候需要在页面间传值，来实现客户端数据的复用。比如：在a.xhtml页面中的input输入框的值需要传递到b.xhtml中使用，可以有两种方法：
n在url中添加参数
可以在a页面打开b页面的超链接中添加参数，如：res:b.xhtm?param=111，然后在b中可以使用window.getParameter(&param&)得到传过来的值111。
n使用客户端的session
可以在a页面中设置客户端的session，这个session只能供客户端使用与服务端和第三方系统均无关，只要应用没有关闭该session均会存在，比如：window.setStringSession(&session&,&222&)，那么在打开B页面的时候或者任意页面的时候都可以使用window.getStringSession(&session&)来获取到保存在客户端的session值222，多次设置，获取到的是最后一次设置的值。
jsA.xhtml代码如下：
&meta charset=&UTF-8&/&
&title&A页面&/title&
&& var param =
&param=&+document.getElementById(&param&).
&& window.setStringSession(&session&,
document.getElementById(&session&).value);
&& window.open(&res:page/jsB.xhtml?&+param);
传参的输入框：
&input type=&text& id=&param&/&
放到session的输入框：
&input type=&text& id=&session&/&
&input type=&button& value=&打开B页面& onclick=&openB()&/&
jsB.xhtml代码如下：
&meta charset=&UTF-8&/&
&title&B页面&/title&
function getA(){
&& document.getElementById(&param&).value
= window.getParameter(&param&);
&& document.getElementById(&session&).value
= window.getStringSession(&session&);
&body onload=&getA()&&
获取参数的输入框：
&input type=&text& id=&param&/&
获取session的输入框：
&input type=&text& id=&session&/&
&input type=&button& value=&关闭& onclick=&script:close&/&
效果如下：
每一个XHTML页面都是一个JS的Window对象。每个页面的控件和函数都存在于Window中。单个页面内部的控件和函数调用不需要声明Window对象，比如页面中存在某个id为divCtr的控件，在当前页面中可以使用下面方法获取到控件对象：
var divCtrObject = document.getElementById(“divCtr”);
但是如果是两个页面之间的控件和函数的调用就必须声明Window对象。
每个XHTML页面的html控件都有一个属性id，作为当前页面Window的唯一标识，比如：
实现本地数据存储
本地数据的存储只要有3种方式：缓存存储、SQLite存储、本地文件存储。
本地数据存储是不随客户端的关闭而消亡的，所以只要缓存没有删除，在任何时候使用都是可以的。
缓存存储是最常用的一种本地数据存储方式，这种方式通过键值对的方式把数据存储到移动终端本地。
其具体实现是通过类document.cache来实现，其用法如下：
设置缓存：
document.cache.setCache(key,
value);//以键值对方式设置缓存，即可把缓存存到本地
读取缓存：
var str = document.cache.getCache(key);//通过设置的key来获取已经设置过的值
清除缓存：
document.cache. remove(key);//清除某个key对应的值
document.cache.clear();//清除所有缓存
常见的登陆用户名、密码的保存、临时数据的存储等都可以采用这种方式。
SQLite是一种轻型的关系数据库管理系统，一般用于嵌入式的系统，在移动设备中被广泛应用，所以也是比较常用的一种数据存储的方式。
SQLite跟大多数数据库一样，都需要连接、创建（数据库、表）、对表的增删改查、数据库关闭等一系列的操作。其基本步骤如下：
注：每个应用都会自动创建一个名称为应用id的数据库，所以一般情况下都使用var db = Util.getDB(appId);获取一个DB数据库对象，而不用再创建自定义的数据库。
常用SQL语句范例：
创建表createSQL：
table Keys(id INTEGER,name TEXT)
查询表querySQL：
插入表内容insertSQL：
insert into
Keys (id,name) values (21,'test1')
更新表内容updateSQL：
update Keys
set name=’aaa’ where id=21
删除表内容deleteSQL：
delete from
Keys where id=21
本地文件存储涉及本地文件的操作，常用于一般文本内容的存储。
读写某个文本文件的内容方法如下：
var filePath =
&res:page/home.uixml&;
var content =
Util.readFile(filePath);//获取指定路径文件的内容
Util.writeFile(filePath,content);//将文本内容写到本地文件中
与文件相关的操作还包括，文件（夹）的实例化：
var file = new
File(filePath);//参数为文件夹路径则实例化一个文件对象
var folder = new
File(folderPath, true);//参数为文件夹路径则实例化一个文件夹对象
常用的文件（夹）操作方法：
bool isFolder()
判断file是否是一个文件夹。返回true，表示文件夹；false表示文件。
bool exists()
判断文件或文件夹是否存在。返回true，存在；false，不存在。
bool deleteFile()
删除文件/文件夹。返回true，删除文件成功；false，删除文件失败或文件不存在。
bool mkdir()
创建此抽象路径名指定的目录。返回true，创建文件成功；false，创建文件失败。语法：file.mkdir()
bool createFile()
当且仅当不存在具有此抽象路径名指定名称的文件时，创建一个新的空文件。返回true(1)：创建文件成功；false(0)：创建文件失败。
bool renameTo(destPath)
重新命名此抽象路径名表示的文件或文件夹。返回true：重命名文件或文件夹成功;false：重命名文件或文件夹失败
bool copyTo(destPath)
复制文件或文件夹到指定路径。返回true：复制文件或文件夹成功；false：复制文件或文件夹失败
String getFilePath()
获取文件路径，绝对路径。
String getFileName()
获取文件名
客户端信息调用
移动应用开发跟设备信息息息相关，所以通过获取客户端的信息进行一些逻辑处理是很有必要的。
客户端设备也就是客户端所在的移动设备的信息，通常包括：操作系统信息、设备型号、设备的屏幕尺寸、设备的IMSI号、设备的ESN号、客户端clientId、网络信息等。
String Util.getEsn()
返回手机ESN号(iphone无法获得，返回的是内部自定义字符串)
String Util.getImsi()
返回手机IMSI号(iphone无法获得，返回的是内部自定义字符串)
操作系统信息
String Util.getOs()
获取操作系统平台。PC模拟器根据配置手机类型返回，如设置为Android则返回android，设置Iphone则返回ios。各个系统返回值如下：android、ios
获取手机型号
String Util.getPhoneModel()
获得手机型号名，如(htc6950)。PC模拟器返回模拟器配置文件中的phonemodel节点属性name值
获取屏幕高度
int Util.getScreenHeight()
获取当前手机屏幕高度。返回值为屏幕绝对像素值；若重力感应切换为横屏模式，则该值会变为竖屏模式下的屏幕宽度；
获取屏幕宽度
int Util.getScreenWidth()
获取当前手机屏幕宽度。返回值为屏幕绝对像素值；若重力感应切换为横屏模式，则该值会变为竖屏模式下的屏幕高度；
获取客户端clientId
String Util.getClientId()
获取客户端标识。返回值：返回客户端标识，字符串
获取设备当前网络连接类型
int getConnectionType()
获取设备当前网络连接类型。pc模拟器实现空方法，固定返回1
0：设备无网络连接
1：设备连接方式为WIFI无线网络
2：设备连接方式为移动网络
获取网络分配的IP地址
String getNetIp()
获取当前网络分配ip地址。PC获取为空串
打开系统的APN设置界面
void openApnSetting()
打开系统的APN设置界面
调用系统的网络设置界面
bool startConnectSetting()
返回true，表示调用成功；false，表示调用失败。【注】该函数仅Android支持，pc模拟器及Iphone实现空方法即可
客户端应用指的是在MBuilder中创建的项目。应用最终会部署到ExMob的服务端中，一个服务端可以部署无限个应用，前提是服务器性能可以支撑。
所以如果需要对应用进行管理就要获取应用的信息。
获取当前XHTML页面所在应用的应用id的方法为：String
Util.getAppId();该方法返回的是应用id的字符串
获取所有应用的信息方法为：Array Util.getApplicationInfos()；该方法返回的是当前ExMobi服务器下的所有应用的信息数组，该数组的每一个元素都是应用信息对象ApplicationInfo。
ApplicationInfo对象包含的内容有：
返回该对象所属类名，
字符串全小写 只读。则返回applicationinfo
当前应用状态。getApplicationInfos方法只获取本地应用，状态固定为local
local:纯本地已安装应用
setup:服务器存在已安装应用，无须更新
update:服务器存在已安装应用，且可更新
unsetup:服务器存在但未安装应用
返回应用适用类型,字符串。只读
client：客户端应用（默认）；wap：wap应用；all：客户端及wap应用均支持
返回应用id节点，应用唯一标识。只读。默认为空。在脚本里使用appid时，对iphone客户端，appid需要使用全小写
返回定义应用名称
字符串。只读。默认为空
description
返回应用描述
字符串。只读。默认为空
localVersion
返回本地应用版本号
字符串。只读。默认为空
serverVersion
返回服务器应用版本号，字符串。只读。默认为空
若服务器不存在该应用，返回为空
返回应用发布日期
字符串。只读。默认为空
homepageSrc
返回主页指向地址
字符串。只读。默认为空&
返回应用开发者主页
字符串。只读。默认为空
vendorEmail
返回应用开发者邮件地址
字符串。默认为空。只读
返回应用主界面大图
路径。只读
返回应用logo小图 路径。只读
iconSelectedLogo
返回应用选中logo小图。只读。建议为png格式
客户端下载时需要下载的应用包大小，服务端根据客户端屏幕尺寸来计算应用包下载大小后再动态加上。计算时遵循大于1M 就用MB ，精确到小数点后1位数，如1.2MB；小于1M 就用KB ，精确到小数点后1位数，如800.2KB。对于服务器上不存在的本地应用，size为空。
如果要获取当前应用的信息，可以先获取所有应用信息的数组，然后再根据数组元素ApplicationInfo对象的appid值与Util.getAppId()值进行比较，id值一样ApplicationInfo对象信息就是当前应用的信息。如下：
getCurrentAppInfo(){
//先获取所有应用的信息&&&
list = Util.getApplicationInfos();
&var currentAppI//定义当前应用信息变量
= 0;i & list.i=i+1){
if(list[i].appid==Util.getAppId())
&&&&&&&&&&&
return list[i];
调用上面的getCurrentAppInfo()函数即可获得当前应用的信息。
本地能力是指移动设备特有能力，这里主要介绍：摄像头、GPS/Location定位、地图、发短信/发邮件/打电话、条形码/二维码扫描。
这里的摄像头主要指拍照和摄像。在4.4.5一节我们已经了解到ExMobi中已经提供现成的控件支持：
&title&&/title&
&script type=&text/javascript&&
//回调函数有默认参数可以获取文件的完整路径
getFilePath(path){
document.getElementById(&divid&).innerHTML
= &文件名称：&+
&!-- mode属性可以指明调用的是拍照(still)还是摄像(videoaudio)，默认为拍照
&input type=&camera& mode=& videoaudio& savedcallback=&getFilePath&/&
&div id=&divid&/&
除此之外，通过JS对象CameraWindow也可以唤起摄像头进行拍照或者摄像：
camerawindow = new CameraWindow();//创建一个摄像头对象，通常是全局变量
show(){//可以在某个函数中来唤起摄像头
&camerawindow.mode=”still”;//设置摄像头的模式是拍照(still)还是摄像(videoaudio)
&camerawindow.onCallback=//设置拍照结束后的回调函数
&camerawindow.pwidth = 800;//设置照片的尺寸
&camerawindow.startCamera();//唤起摄像头
callback(){//摄像头使用完毕会调用回调函数
&if(camerawindow.isSuccess()){//判断是否拍照或者摄像成功
//可以从camerawindow对象获取摄像的结果
&&&&&& //比如camerawindow.path为获取照片或者视频的路径
定位功能在社交类、外勤、快消等行业中有广泛的应用。ExMobi中也提供了相应的API。
定位按照空间分类，可分为室内定位和室外定位；按照定位方式分类，可分为基站定位（LBS）和全球卫星定位（GPS）。
LBS定位是通过电信运营商的基站信号差异来计算出手机所在的位置，所以有一定的误差，并且需要有移动信号；GPS定位通过接收GPS卫星提供的经纬度坐标信号来进行定位，所以需要移动设备有GPS模块才能定