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