FB LIKE JACKER

《Enyo框架之旅》第一部分:初始设置

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



本教程通过使用enyo框架建立一个简单的RSS阅读器应用的过程引导大家熟悉新的框架。

如果你想在自己的电脑上建立这个程序,你可以使用chrome、Safari这样对js支持效果好的浏览器进行。

enyo.js文件的路径(在index.html中<script>标签中标记的路径)将取决于本地机器Enyo安装的位置。

 

第一部分:初始设置

让我们试着做一个简单的RSS阅读程序。首先创建FeedReader文件夹,存放程序的源代码。在文件夹中新建index.html文件。内容如下:

<!doctype html>
<html>
<head>
<title>Enyo FeedReader</title>
<script src="../../enyo/0.6/enyo.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
new MyApps.FeedReader().renderInto(document.body);
</script>
</body>
</html>

在 <head>标记中包含<title>标记,用来表示应用程序的名字。

同样<script>标记定义了enyo框架文件的路径。(注意:如果您使用本地环境,请修改enyo.js的位置。)

<body>元素是调用一个实例创建一个新的FeedReader对象。并在浏览器上显示。

我们要想程序可以执行,首先要创建和修改一些文件。

首先是appinfo.json文件。他是一个JSON文件。

 

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

 

JSON建构于两种结构:

 

“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。

值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

 

 

appinfo.json文件列出了所有构成程序的文件。

以下为appinfo.json的内容


{
  "id": "com.palm.feedreader",
  "version": "1.0.0",
  "vendor": "HP",
  "type": "web",
  "main": "index.html",
  "title": "Enyo FeedReader"
}

以下是depends.js的内容:


enyo.depends(
  "source/FeedReader.js",
  "css/FeedReader.css"
);

此文件定义了程序所依赖的功能和样式文件的位置。

当我们要添加新的文件到程序中的时候,需要在depends.js文件中修改。

接下来,我们来创建FeedReader.js和FeedReader.css这两个文件。

FeedReader.js是实现程序主要功能的文件。其内容如下:


enyo.kind({
  name: "MyApps.FeedReader",
  kind: enyo.VFlexBox,
  components: [
  ]
});

分析以上的代码,FeedReader.js文件创建了一个MyApps.FeedReader。

简单的说就是创建了一个名为FeedReader的对象,此对象派生于MyApps实例。

kind属性告诉我们FeedReader对象是一种视图(view)对象继承于enyo.VFlexBox。

VFlexBox是一个方型容器,垂直显示内容。

css/FeedReader.css文件创建一个空文件即可。

当我们实例化一个FeedReader对象时,我们希望看到这样一个像表格一样可以现实东西的UI界面。

好了,现在我们就拥有了一个enyo框架的程序,倒是它不显示也不做任何事,不过这一切只是刚刚开始而已

声明:此教程有翻译不得当的地方欢迎指出!不吝赐教!

开发环境的构架请参照:搭建Enyo开发环境的教程感谢@911boyV

锋客网phonekr出品

锋客网开发小组组员redshiftkeying

« 关于Veer的最新情况!
【更新】Choorp工作室的CarbonOS主题多图+下载地址! »

About webOS新闻组

锋客网创始人,90后一名.接触webOS的时间很短,但是喜欢的也特别深,现用机型Pixi+.就一句了?翻滚吧!webOS!

» has written 102 posts

  • Joe_fz

    谢谢!加油哦,很喜欢这个网站。

    • webOS新闻组

      谢谢支持!:-)

  • Joe_fz

    英文资料是否可以共享一下呢,汉化速度太慢了。

    • webOS新闻组

      不好意思啊!其实是汉化完了,前两天有事就忘记发了! 不好意思啊!英文可以到http://ge.tt/69R2rpN下载!

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

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