基于Rexsee项目中心的在线开发实现hello World，含代码

j8900610 · 发表于 2012-2-28 12:26:19

看到好多开发工具都有推出自己的在线开发平台，尝试了一些，也做了简单比较。。
目前比较专注于Android这块，体会较多的是国内的Rexsee平台，扩展的大量对象很是惊艳。。新版本的升级开始支持原生的UI布局，个人觉得有些地方还有待完善，不过这也已经可以解决在没有JQuery配合下对于界面展现的良好体验。。

Rexsee也有自己的在线开发平台，提供的功能不多，想必是对于产品自身过于有信心了吧。
流程如下，大家可以试试：

1. 进入Rexsee社区项目中心创建新项目
链接地址：http://www.rexsee.com/project/index.php ，或者搜索“Rexsee”，点击左侧上方的“创建新项目”，输入相关信息即可。下方的勾选框内容视应用自身而定，如屏幕显示、权限设置等待。本次hello world只是简单的应用示例，所以功能项方面几乎都不用选。

其中“分享”功能相当有意思，Rexsee默认为开放共享，也就是说你可以去查看别人的应用源码究竟是怎样写的，作为学习而言很有帮助。

2. 在线编程与调试
创建项目后进入点击index.html页面的编辑，输入如下代码：

<html>
<head>
<title>Rexsee Hello World</tiltle>
<script type=text/javascript>
//Rexsee代码从这里开始
window.onRexseeReady=function(){
  rexseeDialog.toast('系统加载完毕！');//出现后随即消失效果
}
</script>
</head>
<body></body>
</html>

说明：
· Rexsee提供的是JS API，可以在html中加入<script type=text/javascript></script>标签；也可以在外部文件中添加JS代码，然后通过<script type=text/javascript src="你的外部javascript地址">引用；
· 本段代码中用到了window.onRexseeReady=function（），当系统加载完毕后将会执行{}中的JS语句；
· rexseeDialog.toast()，这行代码执行时会弹出一个随即消失的对话框；
· 更多详细的JS对象和事件说明请在Rexsee社区的“手册与源码”中获取，或者下载Rexsee开发手册

然后就可以利用Rexsee的开发版进行调试。。或者直接点击项目右上角的编译，生成apk后直接运行调试。

再尝试一段稍微复杂一点的：
……
//Rexsee代码从这里开始
rexseeTitleBar.setStyle('visibility:hidden;');//隐藏系统的标题栏
rexseeStatusBar.setStyle('visibility:hidden;');//隐藏系统的状态栏
var normalStyle = "";
normalStyle+="border-width:0;";    //边框宽度为零
normalStyle+="color:#FFFFFF;";    //色彩为白色
normalStyle+="background-color:#ffffff+#3399ff/0;";//从白色过渡到蓝色
normalStyle+="font-size:24;";       //字体大小为24
if (!rexseeMenu.exists('head')){    //设置头部标签栏菜单
  rexseeMenu.create('head');
  rexseeMenu.addItem('head','rexsee:','label:Rexsee Hello World;'+normalStyle);
  }
if (!rexseeTabBars.exists('head')){
  rexseeTabBars.create('head');
  rexseeTabBars.setStyle('head','bar-position:top;padding:0px;');
}                                     //设置头部标签栏
if (!rexseeMenu.exists('footer')){    //设置底部按钮栏菜单
  rexseeMenu.create('footer');
  rexseeMenu.addItem('footer','rexsee:','label:上一页;');
  rexseeMenu.addItem('footer','rexsee:','label:下一页;');
  rexseeMenu.addItem('footer','rexsee:','label:退出;');
  }
  if (!rexseeButtonBars.exists('footer')){  //设置底部标签栏
  rexseeButtonBars.create('footer');
  rexseeButtonBars.setStyle('footer','bar-position:bottom;padding:5px;');
  }
……

代码说明：
本段代码新增了标题栏以及菜单布局，一般有如下几个步骤完成：
· 隐藏系统的标题栏：rexseeTitleBar.setStyle('visibility:hidden;');
· 判断某个标题栏是否存在，标题栏创建之后在整个应用中会一直存在，所以在创建的时候需要判断，是否已经存在过此标题栏，防止重复创建：
if (!rexseeMenu.exists('head'))    //设置头部标签栏菜单
· 创建一个标签栏，作为标签栏菜单：rexseeMenu.create('head');
· 向标签栏菜单中添加标签：
rexseeMenu.addItem('head','rexsee:','label:Rexsee Hello World;'+normalStyle);

3. 在线编译生成APK
进入项目点击右上角的“编译”按钮，直接在线生成APK。。
Rexsee提供了程序的下载以及二维码图片，可以通过多种途径进行传播。。

OK，结束

		自动登录	找回密码
密码			注册

[讨论] 基于Rexsee项目中心的在线开发实现hello World，含代码