2010年8月17日星期二

palm webos开发入门

# Copyright (C) 2010 ZenSpirt http://blog.19cn.com
# Released under GNU General Public License

不得不说,palm的网站真的是乱七八糟,一点条理性都没有(反正我是这么觉得的,点开一个教程的链接,居然还有其他链接,然后链接还有链接)。我们要做的事,就是简化他,从中获取我们想要的部分。以下文章都是我个人的理解,所以肯定有错的,请指正。

阅读提示:我会先讲原理,再来实例。因为原理就像骨头,你弄明白了之后,就可以随心所欲了。

1,基础原理
palm的webos是个嵌入式Linux系统(openembedded),然后自己搞了一个luna的gui。外加一个browser server。
然后 基于webkit浏览器<===>Browser Server<===>linux。 简单的来说,就是:
我们写的程序<==>BrowserServer<===>操作linux。
就好象我们用ie、firefox、opera、chrome等浏览器,访问一个web server(iis,apache,nginx等),然后web server在后台干活一样。
palm站点上,有两种应用程序。我们现在先以很基础的介绍,迟点或者我可能会出pdk的。这个文章介绍的,是Html+Css+JavaScript来写的。



2,开发环境
palm的网站提供了两种开发方式:Mojo sdk和ares。
Ares很方便,开发完成基于浏览器就可以了。
你只要注册一个账户,登录https://ares.palm.com/Ares/login.html 就可以开始开发了。
需要注意的是,他们只支持Safari 4.0+, Firefox 3.5+ and Chrome 3, 4浏览器。而且你的浏览器要支持java。
ares支持拖拽生成界面,就好象以前玩vb编程一样。
注意:这个也要装个sdk,不然怎么调试。

下面来说说mojo sdk
palm站点说的就是sdk+Eclipse。装sdk很方便调试。palm站点说来说去其实就Sdk+Eclispe(里面装了webos插件+Aptana插件)。其实这些都是为了方便你编写程序而已,只要你够牛,随便用记事本都能写。你往下读就知道为什么了。用这个方法来写的,你就最好打消拖拽的念头吧。
安装sdk 参考 http://developer.palm.com/index.php?option=com_content&view=article&layout=page&id=1788&Itemid=321
安装eclispe参考 http://developer.palm.com/index.php?option=com_content&view=article&id=1639&Itemid=36

3,webos应用程序结构

其实我一直考虑,是应该先说怎么配置开发环境,还是先说webos的应用程序结构。因为webos入门真的很容易,比你想象中容易。只要你抛开一些杂乱的东西,抓住几个重点。我是用Eclispe生成的应用,如图:



里面是文件的结构,你新建了就是这样,你想问为什么?其实也不为什么,就像一个健全的人,生出来有四肢和头一样。webos应用程序,生成就是这样的结构,你记住就是了。然后我们来分析里面的术语。里面涉及到几个术语。我会用我自己的理解去描述,可能会不恰当,但我觉得你会很容易就会记住了。

stage 舞台
assistant 导演,道具,剧本(这几个是我自己硬想像加上去的)
scene 场景

好了,webos的应用程序登场了,必须有一个舞台(stage),有了舞台了,那就要演戏了,我们将戏的连贯,分成一个个场景(scenes),最少也要有一个场景。然后怎么布局,怎么演戏就由assistant来决定了。

怎么样?是不是很容易理解。

好了,下面来个hellokitty的例子吧,不搞helloworld了。

=================淫荡的分割线==================
下面有些闷,写代码了。我会尽量让大家容易明白点,我读教程的时候,也是这么安慰自己的。
一个应用程序必须有一个舞台(stage)和场景(scene),一个类似场景助理(assistant)的javascript对象和一个场景外观(view widget),一段描述场景布局的html代码。

具体过程是:在舞台--->push(指定某个场景)--->场景--->表演



我们先建立一个场景,叫first吧(File->New->Basic Scene),然后看见,系统自动生成了一个first-assistant.js的脚本和一个first-scene.html的文件,如上图。
first-assistant.js相当于后台处理,处理用户的数据之类。
first-scene.html相当于前台处理,是负责界面的,和用户沟通的。

我们再看看first-assistant.js里面的内容吧。里面系统已经帮我们固定地建立了一个function和四个事件。
这四个分别是setup activate deactivate cleanup
其实我很不想解析,因为这看上去很明显,我怕我一解释,会解释错了。
setup搭建场景时候,初始化的一些动作
active 演戏时
cleanup 清场

我们要做的hellokitty程序很简单,就是按一下button,访问我们的站点http://blog.19cn.com
step 1 我们先在场景布局的html搞widget先,编辑first-scene.html,加入一个webview和button。代码如下:
<!-- first-scene.html code -->
<div id="wvid" x-mojo-element="WebView" ></div>
<div id="btnid" x-mojo-element="Button"></div>

step 2 我们在FirstAssistant.prototype.setup里面初始化这两个widget,关于widget的一些属性,方法,可以参考一下palm官方网站http://developer.palm.com/index.php?option=com_content&view=article&id=1935&Itemid=313
下面是整个first-assistant.js的代码(红色部分是我自己加上去的,其余系统自己生成)。
function FirstAssistant() {
}

FirstAssistant.prototype.setup = function() {
//初始化webview
 this.controller.setupWidget("wvid",
     this.attributes = {
         url:    'http://blog.19cn.com/about/'
     },
     this.model = {
     }
 );
//初始化button
     this.controller.setupWidget("btnid",
 this.attributes = {
  },
  this.model = {
   label : "BUTTON",
   disabled: false
  }
 );
//监听button的tap动作,然后运行handleOk()来处理
 Mojo.Event.listen(this.controller.get("btnid"),Mojo.Event.tap, this.handleOk.bind(this));
};
//新建一个handleOk来处理,openURL是webview的一个方法。用来打开url的。
FirstAssistant.prototype.handleOk = function() {
 this.controller.get("wvid").mojo.openURL("
http://blog.19cn.com");
}


FirstAssistant.prototype.activate = function(event) {

};

FirstAssistant.prototype.deactivate = function(event) {

};

FirstAssistant.prototype.cleanup = function(event) {
//清场的时候,别忘记清垃圾
 this.controller.stopListening("wvid", Mojo.Event.tap, this.handleOk.bind(this));
};

 

step 3 先打开模拟器,然后按Eclipse里面的运行。点button,有以下效果

 

到此,这个文章已经结束。如有错误,请指正。欢迎任何发言。
忘记一件很重要的事了。在stage-assistant.js里面的StageAssistant.prototype.setup
StageAssistant.prototype.setup = function() { 

    this.controller.pushScene('first'); 

}

打包程序:
在cmd下 cd x:\Program Files\Palm\SDK\bin
然后运行 palm-package C:\Users\xblue\workspace\hellokitty
会在Program Files\Palm\SDK\bin下生成ipk

7 条评论:

  1. 学习了~~~
    按照文章里写的 一步一步做 最后在模拟器里运行直接开网页 没有出现button……

    回复删除
  2. 你把网页下拉会看到button。现在已经说明webview已经成功了。其实你已经成功运行了例子。

    回复删除
  3. 哈哈 看到button了~还是我太粗心~

    回复删除
  4. 学习了!谢谢啊~

    PS:你文章里的代码的引号是用中文的,所以我直接复制粘贴也出现和 @smilepig 的问题,看不到按钮!不过改成英文就可以了!

    回复删除
  5. 为什么文中提到的网站我全打不开?

    回复删除
  6. Palm网站乱死了啊。。。

    想用站内搜索看看WebView的文档,结果愣说没找到。。。最后还是Google到的WebView的官方文档。。。

    回复删除