目录目录 Hello World 环境准备创建项目创建 Mobile 项目创建 Mobile 服务项目编写程序编写 Mobile 项目

Size: px

Start display at page:

Download "目录目录 Hello World 环境准备创建项目创建 Mobile 项目创建 Mobile 服务项目编写程序编写 Mobile 项目"

侃像党
5 years ago
Views:

1 PRIMETON TECHNOLOGIES, LTD. 上海普元信息技术有限责任公司移动中间件 Primeton Mobile 开发快速入门 No part of this document may be reproduced, stored in any electronic retrieval system, or transmitted in any form or by any means, mechanical, photocopying, recording, otherwise, without the written permission of the copyright owner. COPYRIGHT 2015 by Primeton Technologies, Ltd. ALL RIGHTS RESERVED.

2 目录目录 Hello World 环境准备创建项目创建 Mobile 项目创建 Mobile 服务项目编写程序编写 Mobile 项目编写 Mobile 服务项目常见问题数据库初始化提示用户登录测试运行结果打包... 20

3 1 Hello World 本示例是 Primeton Mobile 入门示例, 实现了用户从移动端登录界面登录, 服务端校验登录信息, 登录成功在移动端显示欢迎界面, 登录失败则显示错误提示 1.1 环境准备在进行代码开发之前, 按照安装配置手册.docx 中的操作, 部署相应的环境, 确保环境正确安装 1.2 创建项目启动 Studio 程序 Studio 启动后, 会在 8088 侦听客户端调试链接 Primeton Mobile 控制台有输入内容 : 开启测试手机的网络连接 ( 建议使用 wifi), 并启动测试手机上的普元 DEV 客户端, 点击设置进入参数配置界面 :

4 点击 Studio 的二维码图标, 配置对应的参数 : 应用服务器地址端口号对应为该应用的后台服务器所在的地址以及端口号, 应用服务器名称为该应用后台服务器名称调试服务器为 Studio 所在的机器的地址配置完成后点击生成二维码按钮, 生成对应的二维码此时点击测试手机参数配置界面对应的图标, 扫二维码

5 开启 debug 模式, 重启应用

6 此时测试手机已经与 Studio 连接, 之后在我们的开发过程中每次保存,Studio 都会把我们的代码热部署到测试手机创建 Mobile 项目右键点击资源管理器, 选择 new ->Mobile 项目, 创建项目, 输入应用 ID 为 MobileDemo, 应用名称为 Mobile 入门开发指南, 如下图 :

7 选择下一步, 选择空项目来创建工程 : 点击完成按钮, 完成向导, 创建工程 :

工程创建后, 在工程目录下, 生成了 3 个目录 : config 目录 : 保存应用配置文件的目录, 内有一个 appconfig.xml 文件这是个重要的文件, 配置应用本身的一些信息 : <?xml version="1.0"encoding="utf-8"?> <config> <appid>mobiledemo</appid><!

8 工程创建后, 在工程目录下, 生成了 3 个目录 : config 目录 : 保存应用配置文件的目录, 内有一个 appconfig.xml 文件这是个重要的文件, 配置应用本身的一些信息 : <?xml version="1.0"encoding="utf-8"?> <config> <appid>mobiledemo</appid> <appname>mobile 入门开发指南 </appname> <description></description> <date> </date> <homepage>/index.html</homepage> <icon>/images/app.png</icon> <minclientversion>1.0</minclientversion> <appversion>1.0</appversion> <updatetime></updatetime> <patchversion></patchversion> </config> 其中的 homepage 元素, 指明了点击程序图标时, 进入应用的首页在当前的这个

9 例子, 是创建项目时自动生成的 index.htmlx 页面注意 : 在项目中编写代码过程中, 访问页面的路径写法都是从 src 目录做为根目录, 以绝对路径的方编写, 且后缀名为.html, 第一个 "/" 不能缺少, 不支持相对路径 res 目录 : 资源文件目录 skin 目录应用的皮肤样式目录, 其下可以有多个皮肤样式工程默认生成一个 default 样式皮肤, 包含 android 和 iphone 两个平台目录开发用户根据需要把样式资源保存在相应的目录下 src 目录 : 应用程序目录 Primeton Mobile 的应用程序为 htmlx 的文本文件编写, 程序代码他能够过 javascript 语言实现在 htmlx 内容中的 <script> 块中填写 javascript 代码,<body> 块中填写 Primeton Mobile 标签 ( 也可拖拽 palette 中的控件到 <body> 块中 ) <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <nav title=" 首页 "></nav> </body> <script> </script> </html>x <nav title=" 首页 "></nav> 标签声明了一个标题文字为首页的标题栏创建 Mobile 服务项目选择新建 ->Mobile 服务项目, 创建项目, 选择基础服务项目

10 下一步, 输入项目名称为 MobileServer, 选择相应数据库, 完成如下图 : 点击完成按钮, 完成向导, 创建服务项目 :

1.3 编写程序 1.3.1 编写 Mobile 项目使用 Mobile 标签编写程序静态显示界面如下图是在 <body> 块中使用 Mobile 标签编写的一个简单的登录界面, 含有两个输入框, 两个 label 以及一个登录按钮 ( 换图 ): <html> <head> <meta http-equiv="content-type" content="text/html;

11 1.3 编写程序编写 Mobile 项目使用 Mobile 标签编写程序静态显示界面如下图是在 <body> 块中使用 Mobile 标签编写的一个简单的登录界面, 含有两个输入框, 两个 label 以及一个登录按钮 ( 换图 ): <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <nav title=" 首页 "></nav> <divwidth="100%"height="100%"valign="middle"halign="center"layout="vbox"> <divwidth="100%"height="-2" valign="middle" halign="center" paddingbottom="10"> <input type="label" value=" 姓名 :"/> <input type="text" emptytext=" 请输入姓名 " id="name" width="180"/> </div> <div width="100%" height="-2" valign="middle" halign="center" paddingbottom="20"> <input type="label" value=" 密码 :"/> <input type="password" emptytext=" 请输入密码 " id="password" width="180"/> </div> <div width="100%" height="-2" valign="middle" halign="center" paddingbottom="20"> <input type="button" value=" 登录 " width="120"/> <input type="button" value=" 取消 " width="120"/> </div> </div> </body> <script> </script> </html> 有关标签及其属性请详见 Primeton Mobile api 参考手册以下为此时的界面显

示效果 : 使用 javascript 完成动态逻辑的编写 : 首先为登录以及取消按钮添加点击事件在标签中添加 onclick 属性, 并完成对应的函数编写, 如下图 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <nav title="

12 示效果 : 使用 javascript 完成动态逻辑的编写 : 首先为登录以及取消按钮添加点击事件在标签中添加 onclick 属性, 并完成对应的函数编写, 如下图 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <nav title=" 首页 "></nav> <div width="100%" height="100%" valign="middle" halign="center" layout="vbox"> <div width="100%" height="-2" valign="middle" halign="center" paddingbottom="10"> <input type="label" value=" 姓名 :"/> <input type="text" emptytext=" 请输入姓名 " id="name" width="180"/> </div> <div width="100%" height="-2" valign="middle" halign="center" paddingbottom="20"> <input type="label" value=" 密码 :"/> <input type="password" emptytext=" 请输入密码 " id="password" width="180"/> </div> <div width="100%" height="-2" valign="middle" halign="center" paddingbottom="20"> <input type="button" value=" 登录 " width="120"onclick="login" /> <input type="button" value=" 取消 " width="120"onclick="cancle" /> </div> </body> </div>

13 <script> function login(){ var ajax = new $M.Ajax();// 创建 ajax 对象 ajax.add("name", name.getvalue()); // 设置 ajax 参数 ajax.add("password", password.getvalue()); ajax.setaction("/helloworld.jsp"); ajax.submit(function(result){ // 设置 ajax 请求地址 //ajax 请求成功的回调函数,result 为返回的数据 $M.page.goTo("/homepage.html", result, true); // 页面跳转并传值, 同时销毁当前页面 }, function(errorcode,errormsg){ //ajax 请求失败的回调函数 log("ajax Error : "+errorcode+""+errormsg);// 在控制台打印 }); } function cancle(){ name.setvalue(""); password.setvalue(""); } </script> </html> 如图中注释, 在函数 login 中, 我们 var 了一个 ajax 对象, 对其设置提交参数以及请求的地址, 并对其设置请求成功和请求失败的回调函数如果请求成功, 则进行页面跳转, 并将服务端返回的参数传递到下一页 ( 有关 ajax 对象详细说明请参考 Primeton Mobile api 参考手册 ) 现在我们已经完成 index 页面的编写, 接下来我们要新建一个页面 : 当 index 页面登录成功后要跳转到该新建的页面, 并把 index 页面上通过 ajax 与后台进行数据交互后得到的数据显示到该页面上创建新页面在资源管理器中选中 src 目录, 右键点击 src, 选择创建 -> HTML 文件, 在选择面板中填写文件名为 homepage:

14 点击下一步, 选择模版为导航样式, 点击完成 : 下图为生成的 /homepage.htmlx 文件中的内容 : <html> <head>

15 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World</title> </head> <body> <nav title="tab" enableright="true" enableleft="true"/> </body> <script> </script> </html> 修改标题栏文字, 并创建一个 label 控件用户显示从 index 传递过来的数据 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World</title> </head> <body> <nav title=" 登录成功 " enableright="true" /> <input type="label" id="paramlabel"/> </body> <script> </script> </html> render 后动态修改控件属性为当前页面添加 onload 事件, 当页面加载完后会执行该回调函数, 函数的参数为前一个页面传递的数据 ( 详见 Primeton Mobile 开发参考手册 ) 在该事件的回调函数中通过 label 的 id paramlabel 操作 label 的 value 值使其显示传递过来的参数 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World</title> </head> <body> <nav title=" 登录成功 " enableright="true" onrightclick=""/> <input type="label" id="paramlabel"/> </body> <script> $M.page.addEvent('onLoad',function(param){ paramlabel.setvalue(param); }); </script> </html>

至此该项目的前端代码已经编写完成我们写一个简单 jsp 作为后台部分来处理前端发起的 ajax 请求 1.3.2 编写 Mobile 服务项目右键 MobileServer 中的 WEB 目录, 创建一个 jsp 文件 :helloworld.jsp 作为后台部分来处理前端发起的 ajax 请求 helloworld.

16 至此该项目的前端代码已经编写完成我们写一个简单 jsp 作为后台部分来处理前端发起的 ajax 请求编写 Mobile 服务项目右键 MobileServer 中的 WEB 目录, 创建一个 jsp 文件 :helloworld.jsp 作为后台部分来处理前端发起的 ajax 请求 helloworld.jsp 中代码如下 : <% String name = request.getparameter("name"); String password = request.getparameter("password"); if("admin".equals(name) &&"000000".equals(password)) out.print("login success!"); else out.print("fail! Wrong name or password!"); %> 后将该 jsp 部署到我们最初设定的应用服务器 (1.2 刚开始时对测试手机通过扫二维码进行的配置本例中为 IP: , Port:8080 服务器名称 :default) 上, 点击下图按钮, 启动应用服务器 1.4 常见问题数据库初始化若在安装软件安装过程中没有初始化数据库会有数据库的错误提示登陆 governor, 左侧点击管理 > 数据库初始化, 如图 :

17 点击数据库连接测试, 显示成功, 再初始化数据库继续对数据源进行配置, 点击左侧配置 > 数据源, 若测试数据源连接失败, 点击修改

18 测试数据库连接成功后, 点击确定提示用户登录在客户端进行操作, 若跳转至如下界面 : 且控制台出现如下错误 :

19 请登录 governor 进行配置点击左侧配置 >HTTP 接入, 勾选门户模式如下图 : 1.5 测试运行结果

20 1.6 打包代码编写完成后, 就可以把程序打包成 apk 在 Project Explorer 中右键点击项目, 选择 Export, 在选择导出选项时, 选择 Mobile ->Mobile Client-> 导出 APK

21 点击 Next, 选择要导出的 MobileDemo 工程 :

22 点击 Next 按钮, 输入入口应用的 id(appconfig.xml 中的 appid), 入口应用的首页 (appconfig.xml 中的 homepage), 并选择应用图标, 输入导出的目标地址 :

23 点击 Finish 按钮, 完成导出在指定的目录下, 保存有 MobileDemo.apk 文件

Microsoft Word - Primeton Mobile 开发快速入门.docx

Microsoft Word - Primeton Mobile 开发快速入门.docx PRIMETON TECHNOLOGIES, LTD. 上海普元信息技术有限责任公司移动中间件 Primeton Mobile 开发快速入门 No part of this document may be reproduced, stored in any electronic retrieval system, or transmitted in any form or by any means,

目录 目录 Hello World 环境准备 创建项目 创建 Mobile 项目 创建 Mobile 服务项目 编写程序 编写 Mobile 项目

目录目录 Hello World 环境准备创建项目创建 Mobile 项目创建 Mobile 服务项目编写程序编写 Mobile 项目