FB LIKE JACKER

【开发教程连载】第一章第五讲:第一个小程序

2011 年Mar月 17 日由 发布 | 类别: MoJo开发, 实用webOS开发教程, 开发者社区 | Tags: , , ,

/*很抱歉,拖了这么久才更新教程。这段日子因为大四所以确实比较忙。

而且把这部分内容翻译了一部分之后发现,这本书翻译是如此的难,而且翻译出来读者看了也是一种折磨,因为外国人的表达方式确实和中国人相差好多,所以我只能推到重来,先自己把教程看懂,然后自己上手操作,最后再基于自己的那点理解来给原文一个合理的解释。

我会控制好自己的时间,尽快把这本书完结。而且由于我也只是个没太好基础本科生而已,所以文章中有错误或者任何毛病,希望您可以给我指出,先再次谢谢了!o(∩_∩)o  */

一.创建工程

动手创建第一个简单的小程序,首先创建工程。

打开eclipse,系统会提示指定项目保存的位置,也就是workspace,随意指定一个你记得的目录,OK,进入。

File->new->basic application(如图1-5-1)

图1-5-1

然后出现如图1-5-2所示的框,输入你的项目名称,这个随意,不过为了下面好讲解,请跟着我的来.项目名称输入HelloWorld.

图1-5-2

项目建立完成,然后左边的项目了栏会出现如图1-5-3所示的自动创建的目录。我们下面来看看这些目录和文件分别是干什么的。

图1-5-3

App-assistant文件夹:存放的是control,是JS文件

App-views文件夹:存放的是所有view文件,全部是html文件,views中的所有文件都要受assistant中的control控制。这里的文件分布正好和MVC模式对应,当然我们还可以在app中创建一个models文件来存储应用中的Model,一般只有应用程序复杂的时候才会创建model,否则model会合并到controller中。

Images文件夹:存放系统用到的一些图片资源。

Stylesheets文件夹:里面存放项目用到的css文件。

Appinfo.json文件:项目的配置文件

Framework_config.json文件:这个不用管。

Icon,png文件:程序图标文件。

Index.html文件:整个项目的启动入口。一般在里面引用css文件。

Sources.json文件:项目资源记录文件,比如说所有项目的js文件都配置在这个文件中,编译后项目会自动把这个文件记录的所有资源文件引用到各个页面上去。这样view中不用再一一引用这些文件。所以你手动加一个js文件的时候,就要把那个js文件记录在里面。

下面我们来建立一个小程序,程序功能如下:

程序有一个输入框可以让你输入,还有个按钮。在输入框输入你的名字,比如说“jiangzhouq”,然后按下按钮,系统则会跳出提示框上面显示“Hello,jiangzhouq”。

怎么样,简单吧?那就让我们开始把。

二.代码输入

我先一口气把要写的代码都说完,然后再讲每段代码的功能。

1.       我们要新建两个文件,一个html文件,放views文件夹下面的子目录里面。一个js文件,放assistant文件夹里面。

先在views文件夹下面新建个子文件夹:右击views文件夹,new->folder,给这个文件夹起个名字,叫”sayHello”.然后在这个子文件加下面新建html文件:右击这个新建的文件夹,new->file,给这个html起个名字.”sayHello-scene.html”.

右击assistant文件夹,new->file,然后给这个js文件起个名字”sayHello-assistant.js”

2.       打开”sayHello-scene.html”编辑界面输入如下代码:

<br><br>
<div x-mojo-element="TextField"></div>
<br><br>
<div x-mojo-element="Button"></div>

3.       打开”sayHello-assistant.js”输入代码如下:

function SayHelloAssistant() { };
SayHelloAssistant.prototype.txtNameModel = { value : "" };
SayHelloAssistant.prototype.setup = function() {
this.controller.setupWidget("txtName",
{ maxLength : 15 }, this.txtNameModel
);
this.controller.setupWidget("btnGreet", { }, { label : "Greet Me" } );
Mojo.Event.listen(this.controller.get("btnGreet"), Mojo.Event.tap,
this.greet.bind(this)
);
};
SayHelloAssistant.prototype.greet = function() {
this.controller.showAlertDialog({
onChoose : function(inValue) { },
title : "Greetings!",
message : "Hello, " + this.txtNameModel.value,
choices : [
{ label : "Ok", value : "" }
]
});
};

4.       修改stage-assistant.js文件如下

function StageAssistant() {
}
StageAssistant.prototype.setup = function() {
this.controller.pushScene("sayHello");
}

5.       修改source.json文件如下

[
{
"source": "app\/assistants\/stage-assistant.js"
},
{
"source": "app\/assistants\/sayHello-assistant.js", "scenes": "sayHello"
}
]

6.       OK,编译运行。运行过程是这样的,先运行你的模拟器,上面有说过步骤,确保模拟器在运行后,在eclipse里面run->run as->mojo application。如图1-5-4

这时候你就可以在模拟器中看到这个程序了~(如图1-5-5)

三.简单讲解

用我的理解简单解释下这些代码

1.首先我们来看 sayHello-scene.html文件,这里面的代码其实就是网页代码,上一个div定义一个输入框,下一个div定义一个按钮。用到HTML和CSS的相关知识。但是我们在这里编写HTML文件的时候没必要编写一个完整的HTML文档,里面好多HTML常见的标签我们都没看到,这只是个HTML框架,

2.再来看sayHello-assistant.js

function SayHelloAssistant() { };

定义了一个SayHelloAssistant() {}的JS函数。按照习惯这里的函数名字就是scene的名字,除了第一个字母大写。

SayHelloAssistant.prototype.txtNameModel = { value : "" };

指定txtNameModel,也就是那个输入框的初始状态为空。

SayHelloAssistant.prototype.setup = function()

定义了一个setup成员函数,然后它下面的{}之间的内容定义了这个函数的函数体。一般当程序载入这个函数是自动引用的。


this.controller.setupWidget("txtName",
{ maxLength : 15 }, this.txtNameModel
);

定义叫“txtName”的控件的属性,我们在scene里面可以看到id=”txtName”,在scene里定义了那个输入框的id叫“txtName”,所以在这里设置属性的时候也是指定给那个id叫txtName的控件的。这里定义了输入框的最大长度为15.

this.controller.setupWidget("btnGreet", { }, { label : "Greet Me" } );

定义了id叫btnGreet的控件的属性,就是那个按钮,按钮上显示的文字为“Greet Me”

Mojo.Event.listen(this.controller.get("btnGreet"), Mojo.Event.tap,
this.greet.bind(this) 

这里定义了一个监听线程,当检测到你按下btnGreet这个按钮时,系统就调用Greet函数。

SayHelloAssistant.prototype.greet = function()

定义了叫Greet的函数

this.controller.showAlertDialog({
onChoose : function(inValue) { },
title : "Greetings!",
message : "Hello, " + this.txtNameModel.value,
choices : [
{ label : "Ok", value : "" }
]
}); 

Greet函数的函数体,显示的是“Hello”+输入框里你输入的值。

3. stage-assistant.js,这个JS文件在程序载入的时候就会被调用。

StageAssistant.prototype.setup = function() {
this.controller.pushScene("sayHello");
}

在pushScene成员函数里面,传递的是scene的名称,也就是sayHello。然后系统会自动调用steup函数。

4.

[
{
"source": "app\/assistants\/stage-assistant.js"
},
{
"source": "app\/assistants\/sayHello-assistant.js", "scenes": "sayHello"
}
]

这里是把JS文件和HTML关联起来。我们平时在写HTML代码的时候,如果要引用外部JS文件,就得在文件一开始就说明要引入这个文件。但是先前在写HTML文件的时候并没有注明,那系统怎么知道哪个JS文件对应哪个HTML文件呢,这就要在资源文件里面把他们相互关联起来。

四.源代码下载

115网盘源代码下载地址:点这里

——————————————————————————————————————————————

任何不足,敬请指正!

译者:jiangzhouq

PhoneKr出品

« HP Summit—3月14日高层会议宣传片!
[2.3.3 for HTC Hero] Elelinux-7.0.0-RC2-Hero-v1.5 »

About QiiQiii

» has written 12 posts

  • xingtianxixi

    html中没有定义id啊……

  • pete

    有群吗?

  • yin

    问一下,只支持js吗?jq不行?

  • 木木在呢

    HTML文件中要定义一下ID吧

  • 92palm

    需要定义id=” “吗?

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

Buy me a coffee~ ;-)
閃開│讓專業的來 沒辦法│我這個人就是太正直了