enyo官方开发入门教程翻译一Getting Started之Starting Enyo App Development

作者: 来源: 更新时间:2013-01-08 19:20:22 点击:
开发环境

     作为一个Enyo开发者,你可以自由选择开发平台和编码工具。你可以使用windows、mac、linux等环境,只需要一个文本编辑器来编写enyo代码即可。所有的文本编辑器都满足这一需求,包括免费的产品如windows上的notepad或者mac上的textwrangler。

      在你的开发过程中可能需要web浏览器来测试代码。尽管测试时可以直接从本地文件系统加载文件到浏览器,我们强烈建议你从http服务器访问应用。这种方法具有多种优势,包括从远程设备进行测试的能力。

      如果你现在没有可运行的本地web服务器,你可以非常方便的安装Apache/MySQL/PHP软件包,例如windows的WAMPStack或mac的MAMP。

      注意:由于安全限制,如果你选择使用chrome开发并且直接从文件系统加载你的app,你需要在浏览器启动命令行加上加上“--allow-file-access-from-files”。在windows上,你可以直接创建一个chrome.exe的快捷方式然后把语句加在快捷方式的末尾。然后使用快捷方式启动浏览器。在mac和linux上也可以使用类似的方法。

获取enyo源码

      注意:可以从 Bootplate和Dupliforking获取enyo源码和尽快开始编写app的文档教程。这篇文章提供了更详细的信息,你可以在使用bootplat templat之前通读一次并从中受益。

Enyo的源码可以从enyojs.com下载zip文件或者从github的enyojs project下载。

(后面讲解在git客户端中使用命令行获取enyo的部分省略掉了。译者注)

 

Enyo的核心和插件

     不管你使用哪种方式获取源码,如果你要开发一个应用,你必须将enyo的核心源码嵌入到app中。为了方便,源码应放在应用目录下的enyo文件夹下。

     由于enyo的核心库是开发的基础,多思考enyo项目底层的代码也是有益处的。一个典型的enyo应用通常由两层构成,一个由可以重用的类库或插件组成,另一个是实际应用的具体源码。

      插件代码可能来自enyo项目本身(onyx工具类库等)或其他开源社区,或其他开发者的努力成功。方便起见,插件应当放在lib目录下。我们下面给出app的结构

<app>

    enyo/

    lib/

    注意:更详细的关于应用结构的讨论在 Managing Your Project一章。

Starting an App

    现在万事俱备,开始写一个enyo应用。你的第一个应用可以是一个简单的HTML文件。

例如,我们在可以在index.html文件写入以下代码来中创建一个HelloWorld应用。

<!doctype html>

<html>

<head>

    <title>Enyo Hello</title>

    <!-- load debug version of Enyo -->

    <script src="enyo/enyo.js"></script>

    <!-- load debug plugin -->

</head>

<body>

    <script>new enyo.Control({content: "Hello From Enyo"}).write();</script>

</body>

</html>

截图:

    现在我们的app文件夹看起来是这样的

<app>

    enyo/

    lib/

    index.html

    如果我们要使用插件,我们可以直接使用<script>标签加载。

<!doctype html>

<html>

<head>

    <title>Enyo Hello</title>

    <!-- load debug version of Enyo -->

    <script src="enyo/enyo.js"></script>

    <!-- load debug version of plugin -->

    <script src="lib/aPlugin/source/package.js"></script>

</head>

<body>

    <script>

        // make a custom Control based on CoolKind from aPlugin

        enyo.kind({

            name: "App",

            kind: "aPlugin.CoolKind",

            coolness: true

        });

        new App().write();

    </script>

</body>

</html>

      注意我们加载了一个package.js文件。Enyo的资源可以使用package.js文件作为manifest(用来描述哪些插件需要加载)。通常,它是一个scripts和stylesheets的列表。(package.js在它单独的一章里有更详细的讨论)

Factoring into Files

      在开发的早期阶段,通常并不会直接在html文件里创建大量的应用。然而,我们很快会发现单一的文件变得很难管理,我们希望把它的内容拆分放在各个单独的文件里。

      Enyo框架通常把应用的源码放在一个source子文件夹中。这个source目录通常有一个包含应用源码的app.js文件和一个app.css的样式文件。

      一旦应用源码和样式文件被分解出来,我们的项目结构就变成这样

    <app>

    enyo/

    lib/

    source/

        App.js

        App.css

index.html

Index.html文件包含下面的内容

<!doctype html>

<html>

<head>

    <title>Enyo Hello</title>

    <!-- load debug version of Enyo -->

    <script src="enyo/enyo.js"></script>

    <!-- load debug version of plugin -->

    <script src="lib/aPlugin/source/package.js"></script>

    <!-- load our application css -->

    <script src="source/App.css"></script>

    <!-- load our application source -->

    <script src="source/App.js"></script>

</head>

<body>

    <script>new App().write();</script>

</body>

</html>

      注意应用变得复杂起来,<head>部分包含的文件也变得复杂起来。

 

package.js

    我们原来看到在加载的插件中aPlugin有一个 package.js文件,现在创建一个有意义的package.js文件:

enyo.depends(

    "$lib/aPlugin/source",

    "App.css",

    "App.js"

);

    这个文件要注意的一些地方:

        $lib:enyo使用$作为别名以简化路径。默认还有两个类似的别名,$enyo指向enyo的根文件夹,$lib指向lib文件夹

        加载插件时会为插件创建一个别名。在加载package.js文件后,我们可以使用$aPlugin别名。这样的别名在使用指向文件夹的static部分时很有用。

        对包含package.js的文件夹使用非绝对路径,所有App.js和App.css在package.js的相同文件夹下。

        如果你的应用增加文件,确保将新的文件添加到package.js中。

Ready for Growth

     现在我们的HTML文件:

<!doctype html>

<html>

<head>

    <title>Enyo Hello</title>

    <!-- load debug version of enyo -->

    <script src="enyo/enyo.js"></script>

    <!-- load debug version of application-->

    <script src="source/package.js"></script>

</head>

<body>

    <script>new App().write();</script>

</body>

</html>

    我们的应用文件结构:

<app>

    enyo/

    lib/

    source/

        MyView.js

        App.css

        App.js

        package.js

    index.html

     在项目结构这一点上,我们的应用程序的结构类似于Managing Your Project 和bootplate template 中的应用架构。这个阶段是通过现在的设置使项目能够扩展到任意层次的复杂性。在source(或其中的子目录)中可以添加和排列源文件,可以添加额外的库,项目的正确设置是部署前优化(个人理解:使用package.js可以良好的管理应用的文件和其中的依赖关系)。