From f4f504da26ba91e9ee0b992d191d61dae13ef28a Mon Sep 17 00:00:00 2001 From: Ben Luo Date: Mon, 16 Feb 2015 02:54:52 +0800 Subject: [PATCH 1/5] first translation --- developer-guide/getting-started/enyo-tour.md | 137 ++++++++----------- developer-guide/index.md | 112 +++++++-------- 2 files changed, 115 insertions(+), 134 deletions(-) diff --git a/developer-guide/getting-started/enyo-tour.md b/developer-guide/getting-started/enyo-tour.md index 8baa8da..c2e711b 100644 --- a/developer-guide/getting-started/enyo-tour.md +++ b/developer-guide/getting-started/enyo-tour.md @@ -1,64 +1,52 @@ -% Enyo: A Brief Tour +% Enyo: 简明教程 -Thanks for checking out Enyo! This document will help you familiarize yourself -with how the framework is organized and what each piece offers. +感谢下载Enyo！本文档帮助你熟悉这个框架是怎么组成的以及各个部分提供了什么。 -In a given Enyo release, you will find the following folders: +在一个 Enyo 发行版中，你会发现如下文件夹： -* **enyo** - The core -* **lib** - Where all plugins and add-on libraries live -* **moonstone** - A toolbox of UI components, optimized for TV -* **onyx** - Enyo's original UI library, optimized for mobile devices -* **spotlight** - A specialized library for handling focus state -* **layout** - A set of layout components -* **enyo-ilib** - A library providing localization services -* **canvas** - Components for building HTML5-based canvas views -* **extra** - Additional utility components +* **enyo** - 核心 +* **lib** - 所有插件，附加库放置的地方 +* **moonstone** - UI 组件工具箱，为电视优化过 +* **onyx** - Enyo 最初的 UI 库，为移动设备优化过 +* **spotlight** - 一个控制焦点状态的专用库 +* **layout** - 布局组件集合 +* **enyo-ilib** - 提供本地化服务的库 +* **canvas** - 用于生成基于 HTML5 canvas 视图的组件 +* **extra** - 增加的工具组件 ## Enyo -The core of the framework, known simply as `enyo` in the source code, provides -powerful features that enable complex applications and add-on libraries that -build on the Web stack in a modular way: - -* **Object encapsulation, inheritance, and ownership hierarchy** - Kinds and Components -* **View and DOM widget model** - UiComponent and Control -* **Event routing** - Dispatcher and Signals -* **Services model** - Async and Ajax -* **Data Modeling and Data Binding** - Model, Collection, Binding, and more -* **Basic HTML components** - Base UI -* **Touch support** - Touch scroller and gesture simulation -* **Package loader** - `enyo.depends()` and `package.js` - -These pieces are actually separable (it's easy to make micro-builds of Enyo), -but we believe they form a useful working set, so we provide them together as -the Enyo core. - -Everything else described below is an optional package built on top of the core. -You may choose to include these *à la carte* to fit your application's -needs. However, these are only reference libraries for what we envision will be -a large ecosystem of add-on libraries that bring different look and feel, layout -options, service wrappers, etc. Check out the [Enyo Community -Gallery](http://enyojs.com/gallery) to see just how easy it is to create and -share new components and add-on libraries. +框架核心，在源码中简单认为是 `enyo`，它提供了强大的特性来开发复杂的应用和附加库，这些都是以模块化的 Web 栈基础之上的： + +* **对象封装，继承，有等级的所有权** - 类和组件（Kinds and Components） +* **视图和DOM插件模型** - Ui组件和控制（UiComponent and Control） +* **事件路由** - 分发和信号（Dispatcher and Signals） +* **服务器模型** - Async and Ajax +* **基础的 HTML 组件** - 基础用户界面（Base UI） +* **触摸支持** - 触摸滚动和手势仿真 +* **包载入** - `enyo.depends()` 和 `package.js` + +这些部分实际上是分享的（它可以很容易地创建小型 Enyo），但我们相信它们形成了一个有用的工作集合，所以我们把它们作为 Enyo 核心呈现给大家。 + +以下所有东西都是基于核心的可选项。可以根据你应用的需要选择。不过，这些只是一个参考库，我们会有一个大生态圈，那里的插件可能会有不同的外观和感觉，布局选项，服务封装等。请到 [Enyo 社区像册](http://enyojs.com/gallery)去看看创建和分享一个组件或插件库是多么容易的事。 ## Moonstone -The Moonstone library provides a toolbox of beautifully-styled UI components for -building applications. Specially designed and optimized for TV-based apps, -Moonstone is ever-expanding, and currently includes the following: +Moonstone 库提供了一个美化过的图形界面组件，它特意为电视应用进行了设计和优化。它正在扩展，目前包括： -* **Buttons** (plain, icon, radio, and toggle buttons) -* **Inputs** (text input field, text area, rich text area) -* **Lists** -* **Popups** -* **Header bars** -* **Group boxes** -* **Progress bars** -* **Sliders** +* **按钮**（普通，图标，收音机按钮和触发按钮） +* **输入**（文本输入框，文本输入区域，富文本输入区域） +* **列表** +* **弹出菜单** +* **标题栏** +* **分组框** +* **进度条** +* **滑块** ## Onyx +Onyx 是原先和Enyo一起发布的UI库。虽说Moonstone大部分替代了它，但它偶尔也会露一手。 + Onyx, the original UI library that shipped with the Enyo framework, remains the library of choice for mobile device apps. While Moonstone has generated most of the publicity recently, new Onyx development is also in the works. We encourage @@ -74,15 +62,13 @@ remote control) or pointer mode (using a mouse or touchscreen). ## Layout -While Enyo components may be laid out using pure HTML/CSS techniques, we have -provided a Layout library that gives you easy-to-use, performant, cross-browser -compatible containers for your common layout needs: +Enyo 组件也许可以用纯 HTML/CSS 技术来布局，我们提供的布局库让你更容易，更高效而且跨浏览器地解决布局的需要： -* **Fittable Rows and Columns** -* **Lists** -* **Panels** +* **自适应的行和列** +* **列表** +* **面板** -You can read up on these layout options [here](https://github.com/enyojs/layout). +你可以在[这](https://github.com/enyojs/layout)看到有关布局的选项。 ## enyo-ilib @@ -92,26 +78,27 @@ essentially a compatibility layer, making it easy for Enyo app developers to access the powerful features of `iLib` without having to deal with messy, locale-specific details. -## Canvas +## 画布（Canvas） -Enyo's encapsulation model works equally well for structuring canvas-based -components as it does for traditional UI, and we have provided a library that -abstracts common canvas primitives as Enyo components: +Enyo 封装同样适用于以画布为基础的组件，它像传统UI一样工作，我们提供了一个库抽象了画布的通用功能象 Enyo 组件： + +* **画布和画布控制** +* **形状**（圆，矩形） +* **文本** +* **图像** -* **Canvas and CanvasControl** -* **Shapes** (Circle, Rectangle) -* **Text** -* **Image** You can easily extend these to create complex graphical applications and games, such as our [Pirate Pig](http://enyojs.com/samples/piratepig) canvas demo app. -## Extra +## 扩展（Extra） + +"extra"扩展库包括了一些有用的工具组件，范例中使用了这些组件。 -The "extra" library holds a number of useful utility-type components, which are -used in various samples and demo applications. +## 开始（Bootplate） -## Bootplate + +Bootplate 是一个模板，它给开发新 Enyo 应用提供了一个完整的解决方案，并且包括在每一个发行版中。它包括当前版本的 Enyo 和最常用的库（Moonstone 和 Layout），也包括了用来布置应用的最小化脚本，源码和附件。从这里开始使用 Bootlate。 The [Bootplate](bootplate.html) templates provide complete starter projects containing everything you need to develop and deploy Enyo apps out of the box. @@ -119,15 +106,9 @@ These templates contain current versions of Enyo, along with the most common libraries used by app developers (Moonstone or Onyx, Layout, etc.) and scripts to minify and create deployable versions of the source and assets. -## Additional Reading - -From here, there are several paths you can take to ramp up as an Enyo developer. -A few suggestions: +## 阅读更多 -* For a step-by-step introduction to Enyo, head to the [Moonstone App - Tutorial](moonstone-app-tutorial.html). -* To get off to the races writing Enyo apps, check out [Bootplate](bootplate.html). -* To learn more about the nuts and bolts of Enyo app structure, read [Planning - and Structuring Your App](planning-and-structuring-your-app.html). -* Can't make up your mind? See the [complete list](../index.html) of available - documentation. +* 如果你喜欢一步一步介绍 Enyo，这里是 [Moonstone 应用教程](moonstone-app-tutorial.md)。 +* 立即写 Enyo 应用，去 [Bootplate](bootplate.md)。 +* 了解更多 Enyo 应用结构细节，看[计划和构建你的应用指南](planning-and-structuring-your-app.md)。 +* 还不能满足你？看当前文档的[全部列表](../index.md)， diff --git a/developer-guide/index.md b/developer-guide/index.md index e21677b..d61d094 100644 --- a/developer-guide/index.md +++ b/developer-guide/index.md @@ -1,82 +1,82 @@ -% Enyo Developer Guide +% Enyo 开发者指南 -Welcome! Resources are available in the following areas: +欢迎！可用的资源有如下领域： -* Getting Started +* 开始 - * [A Tour of Enyo](getting-started/enyo-tour.html) - * [First Steps](getting-started/first-steps.html) - * [Bootplate: 0-60 with Enyo in 5 Minutes](getting-started/bootplate.html) - * [Planning and Structuring Your App](getting-started/planning-and-structuring-your-app.html) - * [Tutorial: Building a Moonstone App](getting-started/moonstone-app-tutorial.html) + * [Enyo 教程](getting-started/enyo-tour.md) + * [第一步](getting-started/first-steps.md) + * [Bootplate: 5 分种内0-60学会使用 Enyo](getting-started/bootplate.md) + * [计划和组织你的应用](getting-started/planning-and-structuring-your-app.md) + * [教程：创建 Moonstone 应用](getting-started/moonstone-app-tutorial.md) -* Enyo Essentials +* Enyo 精华 - * [Kinds](key-concepts/kinds.html) - * [Objects and Published Properties](key-concepts/objects-and-published-properties.html) - * [Components](key-concepts/components.html) - * [Controls](key-concepts/controls.html) - * [Event Handling](key-concepts/event-handling.html) + * [类型（Kinds）](key-concepts/kinds.md) + * [对象和发布属性](key-concepts/objects-and-published-properties.md) + * [组件](key-concepts/components.md) + * [控制](key-concepts/controls.md) + * [事件控制](key-concepts/event-handling.md) -* Managing Data +* 管理数据 - * [Building Data-Driven Apps](building-apps/managing-data/building-data-driven-apps.html) - * [Consuming Web Services](building-apps/managing-data/consuming-web-services.html) + * [创建数据驱动的应用](building-apps/managing-data/building-data-driven-apps.md) + * [Consuming Web Services](building-apps/managing-data/consuming-web-services.md) -* UI Layout +* 用户界面布局 - * [Fittables](building-apps/layout/fittables.html) - * [Scrollers](building-apps/layout/scrollers.html) - * [Lists](building-apps/layout/lists.html) + * [Fittables](building-apps/layout/fittables.md) + * [Scrollers](building-apps/layout/scrollers.md) + * [列表](building-apps/layout/lists.md) * [Data Lists](building-apps/layout/data-lists.html) - * [Drawers](building-apps/layout/drawers.html) - * [Panels](building-apps/layout/panels.html) + * [Drawers](building-apps/layout/drawers.md) + * [Panels](building-apps/layout/panels.md) -* Building TV Applications +* 创建电视应用 - * [Spotlight](building-apps/spotlight.html) - * [Buttons](building-apps/controls/buttons.html) - * [Checkboxes](building-apps/controls/checkboxes.html) - * [Headers](building-apps/controls/headers.html) - * [List Items](building-apps/controls/list-items.html) - * [Pickers](building-apps/controls/pickers.html) - * [Popups](building-apps/controls/popups.html) - * [Progress Indicators](building-apps/controls/progress-indicators.html) - * [Radio Items](building-apps/controls/radio-items.html) - * [Text Fields](building-apps/controls/text-fields.html) - * [Toggles](building-apps/controls/toggles.html) + * [Spotlight](building-apps/spotlight.md) + * [按钮](building-apps/controls/buttons.md) + * [检查按钮](building-apps/controls/checkboxes.md) + * [头](building-apps/controls/headers.md) + * [列表项](building-apps/controls/list-items.md) + * [Pickers](building-apps/controls/pickers.md) + * [弹出菜单](building-apps/controls/popups.md) + * [Progress Indicators](building-apps/controls/progress-indicators.md) + * [单选项](building-apps/controls/radio-items.md) + * [文本域](building-apps/controls/text-fields.md) + * [Toggles](building-apps/controls/toggles.md) -* Localization +* 本地化 - * [Localization](building-apps/localization.html) + * [本地化](building-apps/localization.md) -* Enyo and webOS +* Enyo 和 webOS - * [Using webOS Features](building-apps/using-webos-features.html) + * [Using webOS features](building-apps/using-webos-features.md) -* Testing and Debugging +* 测试和排错 - * [Browser-Based Debugging](building-apps/testing-and-debugging/browser-based-debugging.html) + * [基于浏览器的排错](building-apps/testing-and-debugging/browser-based-debugging.md) -* Deploying Apps +* 布署应用 - * [Platform-Specific Deployment](deploying-apps/platform-specific-deployment.html) - * [Enyo Apps on Windows 8](deploying-apps/enyo-apps-on-windows-8.html) - * [Cordova Native Functions](deploying-apps/cordova-native-functions.html) + * [Platform-Specific Deployment](deploying-apps/platform-specific-deployment.md) + * [Enyo Apps on Windows 8](deploying-apps/enyo-apps-on-windows-8.md) + * [Cordova Native Functions](deploying-apps/cordova-native-functions.md) -* Best Practices +* 最佳实践 - * [The API Reference: What Every Developer Should Know](best-practices/api-reference.html) - * [Enyo Dos and Don'ts](best-practices/dos-and-donts.html) - * [Encapsulation in Enyo](best-practices/encapsulation-in-enyo.html) - * [Coding Style Guide](best-practices/style-guide.html) + * [API 参考：每一个开发者应该知道](best-practices/api-reference.md) + * [Enyo 能做和不能做的](best-practices/dos-and-donts.md) + * [Enyo 封装](best-practices/encapsulation-in-enyo.md) + * [编码风格指南](best-practices/style-guide.md) -* Designing Apps +* 设计应用 - * [Design Guide](design.html) + * [设计指南](design.html) -* Reference +* 参考 - * [API Reference](../index.html) - * [Enyo Release Notes](release-notes.html) - * [Documentation for Previous Releases](previous-releases.html) + * [API 参考](api.html) + * [Enyo 发布声明](release-notes.md) + * [以前发行版的文档](previous-releases.html) From 4d7ea9b91195e7e9c9ee2139405d636aadce26fe Mon Sep 17 00:00:00 2001 From: Ben Luo Date: Mon, 16 Feb 2015 17:09:38 +0800 Subject: [PATCH 2/5] translation README and index.md --- README.md | 58 +++--- developer-guide/getting-started/bootplate.md | 78 +++++--- developer-guide/getting-started/enyo-tour.md | 1 - .../getting-started/first-steps.md | 136 ++++++------- .../getting-started/moonstone-app-tutorial.md | 182 ++++++++---------- .../planning-and-structuring-your-app.md | 12 +- developer-guide/index.md | 26 +-- 7 files changed, 242 insertions(+), 251 deletions(-) diff --git a/README.md b/README.md index c011a6b..52c59b1 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,40 @@ -#Enyo.js API Reference Generator +#Enyo.js API 参考生成器 -The purpose of this project is to coordinate the accumulation and generation of the API documentation reference for [enyo](https://github.com/enyojs/enyo) and its [public libraries](https://github.com/enyojs). It accomplishes this by leveraging available technologies, including itself, according to the limitations of its requirements at the time it was originally authored. +本项目的目的是为 [enyo](https://github.com/enyojs/enyo) 和它的[公共库](https://github.com/enyojs)积累和生成 API 参考文档。这个目的可以通过已有的技术力量，包括enyo自己， 根据那个时候要求自己编写的局限性。 -> In the future, [my hope](https://github.com/clinuz) is that the project will be able to better fulfill its ultimate purpose by coordinating all documentation and developer guidance into a single, normalized and cohesive source that is performant, extensible and comprehensive. For now, that is not possible. +> 这个项目的最终目的是协调所有文档和开发指南，让它们整合在一个单一，标准化和内聚的源内，这个源可展示，可扩展，可理解。今后，[我希望](https://github.com/clinuz) 这个项目能更好地满足这个目的。目前为止，这个愿望不可能实现。 -### System requirements +### 系统要求 -The developer guide requires a unix-y shell. If you wish to build the full docs you will need Linux or Mac OS X. If you're feeling adventurous, you can convert the shell task into a grunt task (possibly with grunt-pandoc or one of the pandoc node modules. +开发者指南要求 Unix 类的 shell。如果你希望创建完整的文档，你需要 Linux 或者 Mac OS X。如果你想冒险，你可以把 shell 任务转换成 grunt 任务（可能用 grunt-pandoc 或者 pandoc node 模块）。 -### Technologies +### 技术 -##### Required Core Technologies +##### 要求的核心技术 -- [Node.js](http://nodejs.org/) - Everything relies on `node` -- [npm](https://www.npmjs.org/) - Package manager for [Node.js](http://nodejs.org) (installed with node) -- [pandoc](http://johnmacfarlane.net/pandoc/) - A universal document converter, used to convert markdown to HTML. Be sure to make available on your path if it is not. (tip: 'brew install pandoc' on Mac) +- [Node.js](http://nodejs.org/) - 有关 `node` 的所有东西 +- [npm](https://www.npmjs.org/) - [Node.js](http://nodejs.org) 的包管理(已经与node一起安装) +- [pandoc](http://johnmacfarlane.net/pandoc/) - 通用文档转换工具，用来将markdown文件转换成HTML。确保它在你的路径中可以使用。(小窍门：'brew install pandoc' 在 Mac里用) -##### Global npm Requirements +##### 要求全局 npm -- [Grunt.js](http://gruntjs.com/) - Command line client: `npm install -g grunt-cli` -- [Bower](http://bower.io/) - Dependency management tool: `npm install -g bower` +- [Grunt.js](http://gruntjs.com/) - 命令行客户端： `npm install -g grunt-cli` +- [Bower](http://bower.io/) - 依赖管理工具： `npm install -g bower` -##### Incorporated Technologies +##### 集成技术 -Execute `npm install` and then `bower install` in the *enyo-docs* directory to install these additional requirements: +在 *enyo-docs* 目录下运行 `npm install` 然后 `bower install` 来安然更多需要的东西。 -- [JSdoc3](http://usejsdoc.org) - The backbone of our documentation syntax and parser/generator -- [Nunjucks](http://mozilla.github.io/nunjucks/) - The templating engine used to generate static HTML content +- [JSdoc3](http://usejsdoc.org) - 本文档最主要的语法和解析/生成工具 +- [Nunjucks](http://mozilla.github.io/nunjucks/) - 模板引擎，用于生成静态 HTML 内容 - [Grunt.js](http://gruntjs.com/) - Task runner to help automate certain portions of generating and building the site -- [Prism.js](http://prismjs.com/) - The code/syntax highlighter in the output -- [JQuery](http://jquery.com/) - The runtime progressive-enhancement JavaScript library used to interact with the static DOM +- [Prism.js](http://prismjs.com/) - 在输出时用的代码/语法高亮工具 +- [JQuery](http://jquery.com/) - 作为运行时的先进增强JavaScript库，用于静态 DOM 的交互 -### File System Setup +### 文件系统设定 -The enyo-docs scripts assume that enyo and its libraries will be siblings and the libraries will be in the *lib* directory in the standard Bootplate way. In other words: +enyo-docs 脚本假定 enyo 和它的库是兄弟关系，库是在 *lib* 目录中，像 Bootplate 标准的方式。换句话说： ``` Parent @@ -48,21 +48,21 @@ Parent +- spotlight ``` -Directories to be scanned (and other options for jsDoc) can be found in *jsdoc-conf.json* +被扫描的目录（和其它 jsDoc 选项）可以在 *jsdoc-conf.json* 里发现。 -### Building The Docs +### 创建文档 -To build the docs, simply execute grunt in the *enyo-docs* directory: +为了创建文档，简单地在 *enyo-docs* 目录中运行 grunt： ``` grunt ``` -Generated docs go into the *output* directory. +生成的文档会在 *output* 目录内。 -### Additional notes +### 更多注解 -Two special 'macros' are used within the enyo docs source: +两个特别的 'macros' 会用在 enyo 文档源中： -* `$api` - Converted into the relative location of the root document directory. Used primarily in the developer-guide to locate api references. -* `$dev-guide` - Converted into the relative location of the developer guide. Used primarily in the enyo source to point towards the developer guide articles. +* `$api` - 转换成文档根目录相对位置。主要用在 developer-guide 里定位 api 参照。 +* `$dev-guide` - 转换成开发者指南的相对位置。主要用于在 enyo 源内指向开发者指南的文章。 diff --git a/developer-guide/getting-started/bootplate.md b/developer-guide/getting-started/bootplate.md index 4ae2761..be0bcb4 100644 --- a/developer-guide/getting-started/bootplate.md +++ b/developer-guide/getting-started/bootplate.md @@ -1,15 +1,14 @@ % Bootplate -The enyojs project includes a set of application templates, known as "Bootplate" -(BOOTstrap + boilerPLATE) templates. These may be used to facilitate both the -creation of new projects and their ultimate deployment. +enyojs 项目包括一套注用模板，称为 "Bootplate" (BOOTstrap + boilerPLATE) 模板。 +templates. 它们既可以用于创建新项目，也可以用于对最终布署项目。 -## Quick Start with Bootplate +## Bootplate 快速启动 -While each Bootplate template lives in its own GitHub repo (e.g., -[bootplate](https://github.com/enyojs/bootplate) and -[bootplate-moonstone](https://github.com/enyojs/bootplate-moonstone)), we -provide two easy ways to use Bootplate without dealing directly with Git. +两个 Bootplate 模板有各自的 GitHub 仓库（例如： +[bootplate](https://github.com/enyojs/bootplate) 和 +[bootplate-moonstone](https://github.com/enyojs/bootplate-moonstone)）， +我们提供两个简单的方法来使用 Bootplate，不需要直接使用 Git。 ### generator-enyo @@ -46,15 +45,18 @@ installed on your Mac OS or Linux computer. yo enyo --mode=moonstone ``` -### The Other Way +### 另外的方法 -1. Download a bootplate zip archive from - [enyojs.com](http://enyojs.com/get-enyo/), unzip the archive, and open the - `bootplate-moonstone` folder (or `bootplate` folder, for the Onyx version). +1. 从[enyojs.com](http://enyojs.com/get-enyo/)下载 bootplate zip 文件，解压缩并 + 打开 `bootplate-moonstone` 文件夹（对于 Onyx 版本来说是 `bootplate` 文件夹）。 -2. Load `debug.html` in a browser and see "Hello World". +2. 在浏览器中载入 `debug.html` 然后看 "Hello World"。 -## Development +## 开发 + +到这里，你可以从模板提供的 `source/app.js` 文件来开始普通的开发、测试循环。随着应用会增长，它会包括越来越多的 JavaScript 和 CSS 文件，还包括自带 `package.js` 文件的库，别忘了把这些包括在你顶级的 `source/package.js` 文件中。 下面将要提到的 `deploy` 脚本会为了布署而整合他们进入优化过的 JavaScript 和 CSS 文件中。 + +出于本章的目的，让我们假设你已经完成了所有 "HelloWorld" 应用的工作，准备把注意力移到布署流程上来了。 At this point, you would refine your project through the normal cycle of development and testing, starting with the `source/app.js` file provided in the @@ -66,9 +68,9 @@ combine them all into optimized JavaScript and CSS files for deployment. For the purposes of this article, let's assume that you've completed all of your work on the "HelloWorld" app, and turn our attention to the deployment process. -## Deployment +## 开发 -### With generator-enyo +### 用 generator-enyo One advantage of installing `generator-enyo` is that it makes deploying your app extremely easy. Just enter the application directory and issue the command: @@ -84,9 +86,29 @@ Your project is now ready to deploy to various HTML5-ready targets. For details about deploying apps to specific platforms, see [Platform-Specific Deployment](../deploying-apps/platform-specific-deployment.html). -### The Other Way +### 另一种方法 + +如果你不用 `generator-enyo`，用下面的步骤布署应用： + + +1. 确认你已经在系统里安装了 node.js 。为了让布署脚本运行，你需要 0.8 或以上版本。你可以从 [nodejs.org](http://nodejs.org) 下载。 + +2. 用如下的办法生成布署方案： + + * 打开命令窗 (Windows) 或 终端 (Mac/Linux). + + * 在命令行，进入 bootplate 文件夹的根。 + + * 运行 `tools\deploy.bat` 脚本 (Windows) 或 `./tools/deploy.sh` (Mac/Linux)。 + + (注：在2.1.1版之前，进入 `tools` 文件后运行 `deploy.bat` 或 `./deploy.sh`) + +当构建完成，在 `build` 这个目录下，会有两个压缩的 JavaScript 文件，两个压缩的 CSS 文件；`app.js` 和 `app.css` 包含你的应用代码， `enyo.js` 和 `enyo.css` 包含框架代码。 + +`build` 文件夹和其它一套补充文件（ `index.html` 文件载入你的应用，应用使用的任何图像或者其它资源等）复制到最终的布署文件夹 `deploy`。 +3. 打开布署文件夹，在浏览器中载入 `index.html` ，会看到 "Hello World" (但是很快！)。 -If you're not using `generator-enyo`, deploy your app by following these steps: +现在你的项目为不同的 HTML5 可用的目标作好布署的准备。关于在特定平台上布署应用的细节，可以参见[特定平台布署](../deploying-apps/platform-specific-deployment.md)。 1. Make sure that you have the Node.js runtime (version 0.8 or later) installed on your system. @@ -112,17 +134,19 @@ If you're not using `generator-enyo`, deploy your app by following these steps: 3. Open the `deploy` folder, load `index.html` in a browser, and see "Hello World" (but faster!). -## Additional Notes on Bootplate Projects +## 有关 Bootplate 项目更多的说明 -### Embedded Enyo +### 嵌入的 Enyo +设置 Bootplate 项目来使用_嵌入的_ Enyo。换句话说， Enyo 库和其它依赖项完全储存在项目文件夹内。这些资源相对小，并把所有依赖项放在一起，这样可以让开发者控制版本，也可以轻易布署封装好的包（如：PhoneGap 建造）。 + Bootplate projects are set up to use _embedded_ Enyo. In other words, the Enyo library and other dependencies are stored completely inside the project folder. These resources are relatively small, and keeping all the dependencies together allows the developer to control versions and to easily deploy sealed packages (e.g., PhoneGap builds). -### Development vs. Deployment +### 开发与布署 When developing and debugging your project, it's common to need various source files and helper tools that are not needed in the final package. For this @@ -133,9 +157,9 @@ store or other method of distribution. An important feature of bootplate projects is that you can generate deployments from them with relative ease. -### Folder Structure +### 文件夹结构 -A bootplate project has the following structure: +Bootplate 项目有如下结构： ``` assets/ @@ -173,7 +197,7 @@ A bootplate project has the following structure: * `index.html` loads the application using built files only. If built files are not available, it will redirect to `debug.html`. -### Updating the Framework Code +### 更新框架代码 `generator-enyo` uses the latest stable version of each Bootplate template. (And each version of Bootplate, in turn, references a particular version of Enyo @@ -197,7 +221,7 @@ for a given application by entering the app's directory and issuing the command (Note that `generator-enyo` supports a number of additional options, which we will be documenting shortly.) -**Additional Reading** +**附加读物** -* [Moonstone App Tutorial](moonstone-app-tutorial.html) -* [Platform-Specific Deployment](../deploying-apps/platform-specific-deployment.html) +* [Moonstone 应用教程](moonstone-app-tutorial.html) +* [特定平台的开发](../deploying-apps/platform-specific-deployment.html) diff --git a/developer-guide/getting-started/enyo-tour.md b/developer-guide/getting-started/enyo-tour.md index c2e711b..3e05e3b 100644 --- a/developer-guide/getting-started/enyo-tour.md +++ b/developer-guide/getting-started/enyo-tour.md @@ -97,7 +97,6 @@ such as our [Pirate Pig](http://enyojs.com/samples/piratepig) canvas demo app. ## 开始（Bootplate） - Bootplate 是一个模板，它给开发新 Enyo 应用提供了一个完整的解决方案，并且包括在每一个发行版中。它包括当前版本的 Enyo 和最常用的库（Moonstone 和 Layout），也包括了用来布置应用的最小化脚本，源码和附件。从这里开始使用 Bootlate。 The [Bootplate](bootplate.html) templates provide complete starter projects diff --git a/developer-guide/getting-started/first-steps.md b/developer-guide/getting-started/first-steps.md index 8c042ef..423eb23 100644 --- a/developer-guide/getting-started/first-steps.md +++ b/developer-guide/getting-started/first-steps.md @@ -1,121 +1,101 @@ -% First Steps with Enyo +% 与 Enyo 的第一步 -## Preparing Your Development Environment +## 准备开发环境 -As an Enyo developer, you have a great deal of freedom in choosing the platform -and tools you use to code your applications. You may work in a Windows, Mac, or -Linux environment. Only a few simple tools are needed to get up and running. +作为 Enyo 开发者，你有很大的自由去选择开发平台和工具来写你的应用代码。你可能在 Windows, Mac, 或者 Linux 环境。仅需要一些简单的工具就可以弄好并运行了。 -### Text Editor +### 文本编辑 -To write Enyo code, the only requirement is a text editor. Just -about any text editor will suffice, including basic freeware options such as -[Notepad++](http://notepad-plus-plus.org/) (Windows) or -[TextWrangler](http://www.barebones.com/products/textwrangler/) (Mac). For what -it's worth, members of the Enyo team tend to use either [Sublime -Text](http://www.sublimetext.com/), which is available for Mac and Windows, or -the Mac-only [TextMate](http://macromates.com/). +写 Enyo 代码，只需要文本编辑器。任何一种编辑器都足够用，包括基础的自由软件如 +[Notepad++](http://notepad-plus-plus.org/)（Windows） 或者 +[TextWrangler](http://www.barebones.com/products/textwrangler/)（Mac）。 +对那些物有所值的软件，Enyo 团队倾向用 [Sublime Text](http://www.sublimetext.com/)， +该软件可在 Mac 和 Windows 下使用，或者 只能在 Mac 下使用 +的 [TextMate](http://macromates.com/)。 -### Git Client +### Git 客户端 -Currently, the primary mechanism for distribution of Enyo core, libraries, and -"bootplate" project templates is via GitHub, so you'll need to have a modern Git -client installed on your machine. In our documentation, we present git commands -on the command line, but you are free to use your favorite GUI Git client as -well. +目前发行 Enyo 核心、库和“bootplate" 用的主要是 GitHub，所以你需要有现代的 Git 客户 +端安装在机器里。在本文档里，我们用 git 命令行，但你也可以使用喜欢的 GUI git 客户端。 -You can download the latest Git client for your operating system at -[git-scm.com](http://git-scm.com/downloads). +你可以在 [git-scm.com](http://git-scm.com/downloads)下载你的操作系统对应的 git 客 +户端。 -(Note that the Enyo "bootplate" templates are also distributed in the **LG webOS -TV SDK** and may be generated using the `ares-generate` command line tool -included in the SDK, without the use of Git. If you are using the **LG webOS TV -SDK** and don't plan to version-control your application in Git, you won't need -to install a Git client. +（注意：Enyo "bootplate" 模板同样在 **LG webOS TV SDK** 中一起分发，它可能使用在 +SDK中的 `ares-generate` 命令生成，该命令不需要 Git。 如果使用 **LG webOS TV SDK** ， +而且不打算在你的应用中用 Git 来控制版本，你不需要安装 Git 客户端。） ### Node.js -The Enyo framework includes tools based on `Node.js` for minifying and deploying -your applications. `Node.js` is a server-side JavaScript runtime (similar to -the server-side interpreters for Perl, Python, Ruby, and other languages) used -for running JavaScript scripts on a server. It's even possible to use `Node.js` -itself as a barebones Web server (as we'll see below). +Enyo 框架包含了基于 `Node.js` 的工具来最小化和布署应用。 `Node.js` 是服务器端的 +运行时（像是服务器端的 Perl, Python, Ruby 和其他语言的解释器）用于在服务器上运 +行 JavaScript 脚本。甚至可以只用 `Node.js` 本身作为主 Web 服务器（下面会看到）。 -You can download the latest version of `Node.js` for your operating system at -[nodejs.org](http://nodejs.org/). +可以在 [nodejs.org](http://nodejs.org/) 下载你的操作系统对应版本的 `node.js`。 -### Web Browser and Web Server +### Web 浏览器和 Web 服务器 -During your development process, you may test your code using any modern Web -browser. While it is possible to test by loading files into the browser -directly from the local file system, we strongly suggest that you access the -application through an HTTP server. This approach provides numerous benefits, -including the ability to test from remote devices. +在开发过程中，你可以用任何现代浏览器来测试你的代码。也许在浏览器中可以直接打开本地 +文件，但我们还是强烈建议你通过 HTTP 服务器来打开应用。 这个建议有很多好处，其中包 +括有能力从远程设备进行测试。 -Running your app on a Web server will also let you avoid dealing with the Chrome -browser's AJAX security restrictions. If you choose to develop in Chrome *and* -load your app directly from the file system, you'll need to launch the browser -using the command-line switch `"--allow-file-access-from-files"`. (On Windows, -you can do this by creating a shortcut to `chrome.exe` and adding the switch to -the end of the shortcut's Target property. Then use the shortcut each time you -launch the browser. A similar approach should work on Mac and Linux as well.) +在 Web 服务器上运行你的应用可以避免 Chrome 浏览器对 AJAX 的安全限制。如果想选择 +在 Chrome 开发，*并且* 直接从文件系统打开你的文件，你需要在命令行启动浏览器并加 +上 `"--allow-file-access-from-files"` 这个参数。（在Windows中，你可以创建一个 +快捷链接到 `Chrome.exe` ,并把这个参数放在快捷链接的目标属性中。然后每次运行浏览 +器的时候都使用这个快捷链接。在 Mac 和 Linux 中有类似的解决办法。） -If you are not currently running a local Web server, you may find it convenient -to install an Apache/MySQL/PHP software bundle, such as [BitNami -WAMPStack](http://bitnami.org/stack/wampstack) (Windows) or -[MAMP](http://www.mamp.info/en/index.html) (Mac). +如果你目前没有运行本地 Web 服务器，你会发现安装 Apache/MySQL/PHP 软件套装很方 +便，比如 [BitNami WAMPStack](http://bitnami.org/stack/wampstack) (Windows) +或者 [MAMP](http://www.mamp.info/en/index.md) (Mac)。 -As mentioned earlier, another alternative is to create your own simple HTTP -server using `Node.js`. Here's how to do it: +像前面提到的，另外一个解决办法是用 `Node.js` 来创建自己的简单 HTTP 服务器。 +下面告诉你怎么做： -* Install `Node.js`. +* 安装 `Node.js`。 -* Use npm to install the `serve` package: +* 用 npm 安装 `serve` 包： ``` npm install -g serve ``` -* Create a directory to house your application files, then enter that directory - and start the server by running `serve`, e.g.: +* 创建一个目录用于存放服务器的脚本，进入该目录，然后运行 `serve` 来启动服务器， +例如： + `mkdir ` + `cd ` + `serve` -* Your application will be accessible on port 3000, at a URL such as `http://localhost:3000/debug.html`. +* 可以从 3000 端口来接入你的应用，用 URL 可以是 `http://localhost:3000/debug.html`。 -## Obtaining the Enyo Source Code +## 获取 Enyo 源代码 ### Bootplate -If you are new to Enyo development, you will want to obtain the Enyo source as -part of a ready-made project template. The enyojs project includes a number of -these, which we refer to as "bootplate" (BOOTstrap + boilerPLATE) templates. -Each bootplate template comes with the Enyo core code, one or more optional -libraries relevant to the project type, a "Hello World"-type application, and a -recommended folder structure for organizing your application files. For more on -bootplate templates, including setup instructions, see [Bootplate: 0-60 with -Enyo in 5 Minutes](bootplate.html). +如果你是 Enyo 开发的新人，你会希望把 Enyo 源代码作为现成的项目模板的一部分。 +这个 enyojs 项目包括这样一些我们称为 "bootplate" (BOOTstrap + boilerPLATE) 模板 +的东西。每个 bootplate 模板会和 Enyo 核心代码，一个或多个与项目相关的库，一个 +“你好世界”这种应用，和一个推荐的文件夹结构用来组织本应用中的文件。关于 +bootplate 模板，包括设置介绍，见[Bootplate：在5分钟内用 Enyo 从0到60](bootplate.md)。 -### Individual Repos +想用 Moonstone UI 库来启动应用，克隆 `bootplate-moonstone` 仓库到本地机器里： -Of course, you're also free to clone `enyo` or any of the library repos -individually, e.g.: +### 独立的代码仓库 + +当然，你也可以自由克隆 `enyo` 或者任何其它独立的库代码仓库，如： ``` git clone https://github.com/enyojs/enyo.git ``` -If you plan to submit changes back to a repository, be sure to create your own -fork of the repository and clone the fork to your local machine. +如果你计划把改变提交回代码库，请确定创建自己的代码仓库分支并在本地机器上克隆这个 +代码仓库分支。 -## Next Steps +## 下一步 -If you haven't already done so, read through the [Moonstone App -Tutorial](moonstone-app-tutorial.html). Now that you have all the necessary -tools, try following the steps in the tutorial to run the code on your own -computer. +如果你还没做，请通读 [Moonstone 应用教程](moonstone-app-tutorial.md)。现在你 +有了所有必需的工具，试着按照教程的步骤在你自己的机器里运行这些代码。 -If you get stuck, or you'd rather explore on your own, see the -[Bootplate](bootplate.html) documentation for some useful pointers. +如果你觉得有困难，或者你想要自己探索，参见 [Bootplate](bootplate.md) 文档中一 +些有用的提醒。 diff --git a/developer-guide/getting-started/moonstone-app-tutorial.md b/developer-guide/getting-started/moonstone-app-tutorial.md index ef35730..ae7b84a 100644 --- a/developer-guide/getting-started/moonstone-app-tutorial.md +++ b/developer-guide/getting-started/moonstone-app-tutorial.md @@ -1,66 +1,54 @@ -% Tutorial: Building a Moonstone App +% 教程：创建 Moonstone 应用 -## Introduction +## 介绍 -In this tutorial, we will build a basic TV application using the Moonstone UI -library. Our application will perform Flickr searches, and will follow -Moonstone's "always viewing" Panels pattern. +在本教程中，我们用 Moonstone UI 库来创建一个电视应用。该应用演示 Flickr 搜索， +并按照 Moonstone 的 ”总能看见“面板模式。 -We'll walk through the creation of "Search" and "Detail" panel views, crafting -subkinds of [enyo.Source]($api/#/kind/enyo.Source), -[enyo.Collection]($api/#/kind/enyo.Collection) and -[enyo.Model]($api/#/kind/enyo.Model) to meet the demands of the Flickr API, and -binding the returned data to our views--all typical things you will need to do -in an interactive, data-driven application. +我们将会演练创建 "Search" 和 "Detail" 面板视图，精心制作 + [enyo.Source]($api/#/kind/enyo.Source)， +[enyo.Collection]($api/#/kind/enyo.Collection) 和 +[enyo.Model]($api/#/kind/enyo.Model) 子类来满足 Flickr API 的需要，并绑定为视图 +返回的数据--这些都是在数据驱动的应用中，你需要在交互活动中处理的典型事件。 -If you'd like to get an idea of where we're heading, you can [view the completed -app](http://enyojs.github.io/moon-flickr) or [browse the completed -source code](https://github.com/enyojs/moon-flickr). +如果你想对我们最后会得到什么结果有个印象，你可以[查看完整的应用](http://enyojs.github.io/moon-flickr) 或 +[浏览完整的源代码](https://github.com/enyojs/moon-flickr)。 -## 1. Set up your development environment - -There are four main tools that make up the bread-and-butter of Enyo development: +## 1. 设置你的开发环境 -* Your favorite **code editor** -* A **Git client**, for checking out an Enyo bootplate template -* **Node.js**, a server-side JavaScript runtime, for minifying your finished - application -* A **Web browser** and **Web server**. Although not strictly required, the - server will let you avoid browser security restrictions in Chrome, among - other benefits. +有四种主要工具用来组成不可分割的 Enyo 开发： -[First Steps with Enyo](first-steps.html) provides detailed instructions for -obtaining and installing these tools, along with some suggested choices (where -appropriate). If you are already familiar with the tools, feel free to install -them on your own and move on to step 2. +* 你喜爱的 **代码编辑器** +* **Git 客户端**，用来签出 Enyo bootplate 模板 +* **Node.js**，服务器端的 JavaScript 运行时，用来最小化你完成后的应用 +* **Web 浏览器** 和 **Web 服务器**。虽然不是严格要求，服务器可以避免 Chrome 里对 +浏览器的安全限制，还包括其它好处。 -## 2. Get a "bootplate" project template +[和 Enyo 的第一步](first-steps.md) 提供了获得和安装这些工具的详细介绍，还有相应的建议选项（比较赞同的）。如果你已经熟悉这些工具，随你自己的想法安装并进入第2步。 -We'll start by cloning the `bootplate-moonstone` project template from GitHub. +## 2. 获取 "bootplate" 项目模板 -While this step is also covered in [First Steps with Enyo](first-steps.html), -there's no harm in repeating the essential Git command: +我们从克隆 GitHub 里的 `bootplate-moonstone` 项目模板开始。 + +虽然 [Enyo 第一步](first-steps.md) 包含了本步骤，但重新写一下 Git 的重要命令没有坏处： ``` git clone --recursive --branch 2.5.1 https://github.com/enyojs/bootplate-moonstone.git ``` -## 3. Customize app boilerplate +## 3. 定制应用的样本文件 -After cloning, we'll make some customizations to the template to accommodate our -new app. +克隆完成后，我们要对模板进行一些定制以适应新应用。 -* In `debug.html` and `index.html`, let's set the `` tag to - `"Moonstone Flickr"`. +* 在 `debug.html` 和 `index.html` 里，设定 `<title>` 标签为 `"Moonstone Flickr"`。 -* In `source/views/views.js`, let's establish a namespace (`"flickr"`) for our - custom kinds by renaming `myapp.MainView` to `flickr.MainView`. +* 在 `source/views/views.js` 中设置名字空间 (`"flickr"`)，我们定制的类就从 + `MyApp.MainView` 重命名成 `flickr.MainView`。 -* Likewise, in `source/app.js`, we'll change the names `myapp.Application` and - `myapp.MainView` to `flickr.Application` and `flickr.MainView`, - respectively. +* 同样，在 `source/app.js` 中相应地改变 `MyApp.Application` 和 `MyApp.MainView` 的 + 名字为 `flickr.Application` 和 `flickr.MainView`。 -**For your information:** The files we just modified comprise the set of +**仅供参考：** The files we just modified comprise the set of files involved in the startup of your bootplate app. When `debug.html` (or, after deployment, `index.html`) is opened, it first loads the Enyo core CSS and JavaScript files, along with the application's top-level `package.js`. The @@ -72,7 +60,7 @@ application. Finally, by default, `enyo.Application` automatically renders the "main view" upon instantiation--i.e., it creates and renders the `MainView` kind from `main.js`, thus starting your app. -## 4. Set up main view +## 4. 设置主视图 Since this app will be based on the Moonstone "Always Viewing" Panel pattern, let's set up our main view to have a [moon.Panels]($api/#/kind/moon.Panels) @@ -81,7 +69,7 @@ transitioning them left and right) and a single instance of [moon.Panel]($api/#/kind/moon.Panel), the base kind for views added to `moon.Panels`. -**Edit file: source/views/views.js** +**编辑文件： source/views/views.js** ```javascript enyo.kind({ @@ -100,9 +88,9 @@ Here we've created a simple kind named `flickr.MainView`, which is a subkind of property is specified). As per our plan, the main view contains an instance of `moon.Panels`, which in turn contains an instance of `moon.Panel`. -**Additional notes on this code:** +**本代码更多的注释：** -* **classes** +* **类** * The `moon` class applies standard Moonstone styling to the application. This is required at the top-level view of Moonstone apps. @@ -126,7 +114,7 @@ property is specified). As per our plan, the main view contains an instance of automatically pops panels off the stack (destroying them) once they are moved back offscreen. -**Expert tip:** Strictly speaking, `enyo-fit` will position the control within +**专家小窍门：** Strictly speaking, `enyo-fit` will position the control within the bounds of the control's "offset parent", which is an HTML term referring to the first parent element up the DOM hierarchy from the element that is either `position: absolute` or `position: relative`. This will skip over @@ -134,15 +122,15 @@ property is specified). As per our plan, the main view contains an instance of may be confusing at first. To force a parent to be a control's "offset parent", simply set `position: relative` on the intended parent's CSS. -**[View the code and results of Step 4 in JSFiddle](http://jsfiddle.net/enyojs/84DRr/)** +**[在 JSFiddle 中查看第4步代码的结](http://jsfiddle.net/enyojs/84DRr/)** -## 5. Create a panel for searching +## 5. 为搜索创建面板 In the previous step, we added a dummy `moon.Panel` instance as a child of the `moon.Panels`. Now, let's create a `moon.Panel` subkind to implement the view in which the user searches for photos and browses the results. -**Add to file: source/views/views.js** +**加入文件： source/views/views.js** ```javascript enyo.kind({ @@ -165,7 +153,7 @@ catches the `onInputHeaderChange` event that's generated, using a handler method called `search()`. We'll eventually use this method to fetch search results from the Flickr API. -**Additional notes on this code:** +**本代码更多的注释：** * **headerOptions** - Internally, `moon.Panel` contains a [moon.Header]($api/#/kind/moon.Header) as part of its "chrome" (a term we @@ -224,9 +212,9 @@ that we declared in Step 4. }); ``` -**[View the code and results of Step 5 in JSFiddle](http://jsfiddle.net/enyojs/d7dr3/)** +**[在 JSFiddle 中查看第5步代码的结果](http://jsfiddle.net/enyojs/d7dr3/)** -## 6. Add a grid to the search panel +## 6. 在搜索面板中加入网格布局 Next, let's add a [moon.DataGridList]($api/#/kind/moon.DataGridList) to the search panel. We'll use this to display thumbnails of the search results. @@ -291,9 +279,9 @@ from the previous step. That's because the DataGridList requires data in order to render items; right now, we have none. In the next step, we'll rectify this situation. -**[View the code and results of Step 6 in JSFiddle](http://jsfiddle.net/enyojs/45Zn4/)** +**[在 JSFiddle 中查看第6步代码的结](http://jsfiddle.net/enyojs/45Zn4/)** -## 7. Bind a data collection to the grid +## 7. 绑定数据集与网格 As we've just seen, a DataGridList requires a collection of data to drive the set of items rendered in the list. [enyo.Collection]($api/#/kind/enyo.Collection) @@ -306,7 +294,7 @@ collection. The model will then be set to the `model` property of the top-level control for each item, and bindings from the `model` property into the view properties will control how data from each model is represented in the view. -**For your information:** If you're interested in a complete overview of +**仅供参考：** If you're interested in a complete overview of Enyo's data-layer features, including bindings, observers, computed properties, models, collections, and data-aware controls (such as DataGridList), see [Building Data-Driven Apps](../building-apps/managing-data/building-data-driven-apps.html). @@ -316,7 +304,7 @@ panel is instantiated by overriding the `SearchPanel` control's `create()` method. We set the new collection as the value of an instance variable on the control, which we'll call "photos": -**Edit file: source/views/views.js** +**编辑文件：source/views/views.js** ```javascript enyo.kind({ @@ -333,7 +321,7 @@ control, which we'll call "photos": Next, we'll add a binding from that instance variable to the `collection` property of our DataGridList: -**Edit file: source/views/views.js** +**编辑文件：source/views/views.js** ```javascript enyo.kind({ @@ -352,7 +340,7 @@ the DataGridList) to properties on the `GridListImageItem`. Note that this assumes each model will have a schema that includes properties named `title` and `thumbnail`. -**Edit file: source/views/views.js** +**编辑文件：source/views/views.js** ```javascript enyo.kind({ @@ -374,7 +362,7 @@ Finally, let's give our new collection some placeholder data, to make sure it's all hooked up correctly. We'll remove this once we have actual data fetched from Flickr to use. -**Edit file: source/views/views.js** +**编辑文件：source/views/views.js** ```javascript enyo.kind({ @@ -384,9 +372,9 @@ from Flickr to use. this.inherited(arguments); this.set("photos", new enyo.Collection([ {title: "Photo 1", thumbnail: "http://lorempixel.com/300/300/?1"}, - {title: "Photo 2", thumbnail: "http://lorempixel.com/300/300/?2"}, - {title: "Photo 3", thumbnail: "http://lorempixel.com/300/300/?3"}, - {title: "Photo 4", thumbnail: "http://lorempixel.com/300/300/?4"} + {title: "Photo 2", thumbnail: "http://lorempixel.com/300/300/?2"}, + {title: "Photo 3", thumbnail: "http://lorempixel.com/300/300/?3"}, + {title: "Photo 4", thumbnail: "http://lorempixel.com/300/300/?4"} ])); }, ... @@ -395,7 +383,7 @@ from Flickr to use. The final `flickr.SearchPanel` implementation for this step should look like this: -**File: source/views/views.js** +**文件：source/views/views.js** ```javascript enyo.kind({ @@ -422,9 +410,9 @@ The final `flickr.SearchPanel` implementation for this step should look like thi this.inherited(arguments); this.set("photos", new enyo.Collection([ {title: "Photo 1", thumbnail: "http://lorempixel.com/300/300/?1"}, - {title: "Photo 2", thumbnail: "http://lorempixel.com/300/300/?2"}, - {title: "Photo 3", thumbnail: "http://lorempixel.com/300/300/?3"}, - {title: "Photo 4", thumbnail: "http://lorempixel.com/300/300/?4"} + {title: "Photo 2", thumbnail: "http://lorempixel.com/300/300/?2"}, + {title: "Photo 3", thumbnail: "http://lorempixel.com/300/300/?3"}, + {title: "Photo 4", thumbnail: "http://lorempixel.com/300/300/?4"} ])); }, search: function(inSender, inEvent) { @@ -433,7 +421,7 @@ The final `flickr.SearchPanel` implementation for this step should look like thi }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * **create()** - The `create()` function is called as part of every component's lifecycle. Superkinds of your controls will also have their `create()` @@ -450,7 +438,7 @@ The final `flickr.SearchPanel` implementation for this step should look like thi **[View the code and results of Step 7 in JSFiddle](http://jsfiddle.net/enyojs/D4qAD/)** -## 8. Create a data source for the Flickr API +## 8. 为 Flickr API 创建数据源 Dummy data does not make for an interesting app, so in the next few steps, we'll start making custom data-related kinds for interacting with the Flickr API. In @@ -504,7 +492,7 @@ This includes customizing the `callbackName` property to match the one expected by Flickr's API. We'll also set the `api_key` and `format` keys on the `params` hash, which will be expanded into query string parameters on the Jsonp request. -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -538,7 +526,7 @@ hash. **[View the code and results of Step 8 in JSFiddle](http://jsfiddle.net/enyojs/65hr7/)** -## 9: Create a collection subkind for searching +## 9: 为搜索创建子类的集合 Next, we'll create a subkind of `enyo.Collection` that uses our new `flickr.Source` to fetch a collection of image records based on search text that @@ -546,7 +534,7 @@ we give it. We'll start with a basic subkind, and tell it to use the `flickr.Source` by default: -**Add to file: source/data/data.js** +**在文件中加入： source/data/data.js** ```javascript enyo.kind({ @@ -556,14 +544,14 @@ We'll start with a basic subkind, and tell it to use the `flickr.Source` by defa }); ``` -*Note:* We use the name we registered for the source as the value of `source`. +*注：* We use the name we registered for the source as the value of `source`. Next, we'll add a published property called `searchText`, and a `searchTextChanged` handler, which will destroy any previously fetched records and then fetch more. `searchTextChanged` will be called automatically whenever the value of `searchText` is altered. -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -619,7 +607,7 @@ Ultimately, the search parameters need to be added to the `params` hash that our set these in a `params` hash on the collection; we'll update the source to look for these parameters and add them to the `params` that are passed along: -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -698,7 +686,7 @@ passed-in `data` argument (which reflects the raw data received) and return the array that we actually want to load into the collection--which, in this case, is `data.photos.photo`: -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -712,11 +700,11 @@ array that we actually want to load into the collection--which, in this case, is }); ``` -*Note:* By default, Enyo will not call the `parse` method unless you set the `parse` option to `true`. +*注：* By default, Enyo will not call the `parse` method unless you set the `parse` option to `true`. **[View the code and results of Step 9 in JSFiddle](http://jsfiddle.net/enyojs/PLqj6/)** -## 10: Create a model subkind for image records +## 10: 为图片记录创建模式子类 There's one last piece we need before we can hook everything up and see it all in action. That's an `enyo.Model` subkind to wrap the records that are fetched @@ -771,7 +759,7 @@ subkind of `enyo.Model` that uses computed properties to dynamically build a `thumbnail` URL and an `original` URL, based on other properties contained in the model data: -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -794,7 +782,7 @@ the model data: }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * **computed** - The `computed` array lets us define computed properties and their dependencies. Here, we provide the `thumbnail` and `original` @@ -810,7 +798,7 @@ Last, we'll tell our `flickr.SearchCollection` to wrap all records fetched, usin our new `flickr.ImageModel` (rather than the default `enyo.Model`) by specifying the `model` property on the collection: -**Edit file: source/data/data.js** +**编辑文件：source/data/data.js** ```javascript enyo.kind({ @@ -823,7 +811,7 @@ the `model` property on the collection: **[View the code and results of Step 10 in JSFiddle](http://jsfiddle.net/enyojs/8uvJE/)** -## 11: Connect the input, collection, and grid +## 11: 连接输入，集合和网格 At last, it's time to see all of our hard work in action. To recap what we've done so far: @@ -840,7 +828,7 @@ done so far: So, let's hook these pieces together. First, in our `flickr.SearchPanel`, we'll set the grid list's collection type to be our new `flickr.SearchCollection`: -**Edit file: source/view/views.js** +**编辑文件：source/view/views.js** ```javascript enyo.kind({ @@ -856,7 +844,7 @@ set the grid list's collection type to be our new `flickr.SearchCollection`: Next, when the `search` input change handler fires, we'll set the input text to the search collection's `searchText` property: -**Edit file: source/view/views.js** +**编辑文件：source/view/views.js** ```javascript enyo.kind({ @@ -883,7 +871,7 @@ Try it out by typing something into the input in the header and pressing **[View the code and results of Step 11 in JSFiddle](http://jsfiddle.net/enyojs/ktXWd/)** -## 12. Add a loading spinner to search panel +## 12. 在搜索面板内加入载入转盘 The Flickr API may take a bit of time to return the results of the search, so we'll add a [moon.Spinner]($api/#/kind/moon.Spinner) control to be shown while @@ -929,11 +917,11 @@ to test for the specific conditions we're interested in: That's all there is to it! Now, when you press **Enter** to start a search, you should see the spinner run until the data is returned and the list is updated. -*Note:* A transform is a handy way to convert data in one format to another, such as converting a string to a number. In this case, we could have looked up all the status codes for the collection that correspond to a busy state and converted that to the boolean we need, however, collection provides a convenience method called `isBusy()` that does exactly what we need. +*注：* A transform is a handy way to convert data in one format to another, such as converting a string to a number. In this case, we could have looked up all the status codes for the collection that correspond to a busy state and converted that to the boolean we need, however, collection provides a convenience method called `isBusy()` that does exactly what we need. **[View the code and results of Step 12 in JSFiddle](http://jsfiddle.net/enyojs/3D7BM/)** -## 13. Create a photo detail panel +## 13. 创建图片细节面板 Now that we have a fully functioning search panel, let's move ahead and add a photo detail panel. This will show a larger version of the image selected from @@ -956,7 +944,7 @@ data.) }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * **layoutKind** - As mentioned earlier, the default `layoutKind` for `moon.Panels` is `FittableRowsLayout`. Here we change the value to @@ -997,7 +985,7 @@ URL. So let's go ahead and set up bindings from the model's `title` and We can't see this panel yet because we haven't put it into the view. Let's move on to our next step and do that. -**[View the code and results of Step 13 in JSFiddle](http://jsfiddle.net/enyojs/pDU5r/)** +**[在 JSFiddle 中查看第13步代码的结果](http://jsfiddle.net/enyojs/pDU5r/)** ## 14. Add handlers for transitioning to detail page @@ -1052,7 +1040,7 @@ grid list items that will use this new event API: }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * **itemSelected()** @@ -1086,7 +1074,7 @@ bubble the event, passing the panel definition in the event payload: }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * **events** - By declaring `onRequestPushPanel` in the `events` block, we tell the framework (and anyone who uses the kind) that this kind will bubble that @@ -1110,7 +1098,7 @@ appear with the title set and the image displayed below the header. **[View the code and results of Step 14 in JSFiddle](http://jsfiddle.net/enyojs/PZBTC/)** -## 15. Get detailed photo information +## 15. 获得图片详细信息 Recall that we wanted to show some more detail on the photo detail page, such as the name of the user who took the photo and the date it was taken. Although @@ -1213,7 +1201,7 @@ properties bindable. Since we're interested in the `owner.realname` and }); ``` -**Additional notes on this code:** +**本代码更多的注释：** * Since `parse()` processes data returned from both the `search` API and the `getInfo` API, we need to ensure that the method works in both cases. @@ -1314,7 +1302,7 @@ information in the header as soon as the data is fetched. **[View the code and results of Step 16 in JSFiddle](http://jsfiddle.net/enyojs/Ld9HJ/)** -## 17. Add fullscreen image viewer +## 17. 添加全屏图像视图 The "Always Viewing" panels pattern used in this app is specially designed to provide a lightweight browsing interface in `moon.Panels` above fullscreen @@ -1392,7 +1380,7 @@ panels via the handle at the right edge. **[View the code and results of Step 17 in JSFiddle](http://jsfiddle.net/enyojs/AB7J6/)** -## 18. Final embellishments +## 18. 最后的润色 In our final app, you'll see that we made a few additional improvements: @@ -1413,7 +1401,7 @@ for features to improve the app! **View the finished [application](http://enyojs.github.io/moon-flickr) and [source code](https://github.com/enyojs/moon-flickr)** -## 19. Minify/deploy your app +## 19. 最小化/布署应用 When you are finished developing your app, you will want to "deploy" it. As you'll recall, we've been developing our app in the top-level `debug.html` file, diff --git a/developer-guide/getting-started/planning-and-structuring-your-app.md b/developer-guide/getting-started/planning-and-structuring-your-app.md index 8b04214..a38a45b 100644 --- a/developer-guide/getting-started/planning-and-structuring-your-app.md +++ b/developer-guide/getting-started/planning-and-structuring-your-app.md @@ -1,4 +1,4 @@ -% Planning and Structuring Your App +% 计划和组织你的应用 While an Enyo application may be as simple as single HTML5 file, once we start making more sophisticated apps, there are numerous resources to manage, versions @@ -10,7 +10,7 @@ application template (available in both [Onyx](https://github.com/enyojs/bootplate) variants), which you are encouraged to base your own apps upon. They are also described in some detail below. -## The Basic Scaffold +## 基本的脚手架 Enyo is designed so that plugin libraries, applications, and Enyo itself are all portable resources. The use of common folder conventions significantly @@ -86,7 +86,7 @@ The suggested setup for applications is similar, but includes some additions: `deploy` script to create a version of the app with the code minified and non-essential files removed. -## The lib Folder and Plugins +## 库文件夹和插件 Enyo's infrastructure is intended to support a wide variety of plugins. While it is not a technical requirement, the convention is to put plugins in a folder @@ -103,7 +103,7 @@ called `lib` that is a peer to `enyo`: Again, notice that the standard scaffold has been used for this plugin. -## Standard Snapshot +## 标准快照 If we combine the two preceding examples, we get the complete suggested folder structure: @@ -153,7 +153,7 @@ Here's the deployment tree for the suggested folder structure: Note that the `enyo` folder itself is not necessary for deployment. -## Sharing Enyo +## 分享 Enyo As mentioned previously, it's also possible to build applications that refer to shared copies of Enyo and/or plugins. In this case, shared resources are found @@ -178,4 +178,4 @@ plugins from `<shared-root>`: This type of setup is most useful when developing plugins, creating a suite of applications that will be deployed together, or working on the Enyo source -itself. \ No newline at end of file +itself. diff --git a/developer-guide/index.md b/developer-guide/index.md index d61d094..f966c48 100644 --- a/developer-guide/index.md +++ b/developer-guide/index.md @@ -21,16 +21,16 @@ * 管理数据 * [创建数据驱动的应用](building-apps/managing-data/building-data-driven-apps.md) - * [Consuming Web Services](building-apps/managing-data/consuming-web-services.md) + * [使用 Web 服务](building-apps/managing-data/consuming-web-services.md) * 用户界面布局 - * [Fittables](building-apps/layout/fittables.md) - * [Scrollers](building-apps/layout/scrollers.md) + * [自适应](building-apps/layout/fittables.md) + * [滚动条](building-apps/layout/scrollers.md) * [列表](building-apps/layout/lists.md) - * [Data Lists](building-apps/layout/data-lists.html) - * [Drawers](building-apps/layout/drawers.md) - * [Panels](building-apps/layout/panels.md) + * [数据列表](building-apps/layout/data-lists.html) + * [抽屉](building-apps/layout/drawers.md) + * [面板](building-apps/layout/panels.md) * 创建电视应用 @@ -39,12 +39,12 @@ * [检查按钮](building-apps/controls/checkboxes.md) * [头](building-apps/controls/headers.md) * [列表项](building-apps/controls/list-items.md) - * [Pickers](building-apps/controls/pickers.md) + * [选取器](building-apps/controls/pickers.md) * [弹出菜单](building-apps/controls/popups.md) - * [Progress Indicators](building-apps/controls/progress-indicators.md) + * [进度条](building-apps/controls/progress-indicators.md) * [单选项](building-apps/controls/radio-items.md) * [文本域](building-apps/controls/text-fields.md) - * [Toggles](building-apps/controls/toggles.md) + * [开关](building-apps/controls/toggles.md) * 本地化 @@ -52,7 +52,7 @@ * Enyo 和 webOS - * [Using webOS features](building-apps/using-webos-features.md) + * [使用 webOS 特性](building-apps/using-webos-features.md) * 测试和排错 @@ -60,9 +60,9 @@ * 布署应用 - * [Platform-Specific Deployment](deploying-apps/platform-specific-deployment.md) - * [Enyo Apps on Windows 8](deploying-apps/enyo-apps-on-windows-8.md) - * [Cordova Native Functions](deploying-apps/cordova-native-functions.md) + * [平台相关的开发](deploying-apps/platform-specific-deployment.md) + * [在 Windows 8 上的 Enyo 应用](deploying-apps/enyo-apps-on-windows-8.md) + * [Cordova 原生功能](deploying-apps/cordova-native-functions.md) * 最佳实践 From 2ec5bcb5e642224e1e663a6c18f0a3b606027cb4 Mon Sep 17 00:00:00 2001 From: Ben Luo <benluo@gmail.com> Date: Wed, 18 Feb 2015 09:21:46 +0800 Subject: [PATCH 3/5] modified 'first-steps.md' --- developer-guide/getting-started/bootplate.md | 15 +++-- developer-guide/getting-started/enyo-tour.md | 62 +++++++++---------- .../getting-started/first-steps.md | 31 +++++----- 3 files changed, 54 insertions(+), 54 deletions(-) diff --git a/developer-guide/getting-started/bootplate.md b/developer-guide/getting-started/bootplate.md index be0bcb4..b9a6054 100644 --- a/developer-guide/getting-started/bootplate.md +++ b/developer-guide/getting-started/bootplate.md @@ -1,24 +1,23 @@ % Bootplate enyojs 项目包括一套注用模板，称为 "Bootplate" (BOOTstrap + boilerPLATE) 模板。 -templates. 它们既可以用于创建新项目，也可以用于对最终布署项目。 +它们既可以用于创建新项目，也可以用于布署最终项目。 ## Bootplate 快速启动 两个 Bootplate 模板有各自的 GitHub 仓库（例如： [bootplate](https://github.com/enyojs/bootplate) 和 [bootplate-moonstone](https://github.com/enyojs/bootplate-moonstone)）， -我们提供两个简单的方法来使用 Bootplate，不需要直接使用 Git。 +我们提供两个简单的方法来使用 Bootplate，都不需要直接使用 Git。 ### generator-enyo -`generator-enyo` is the preferred method for starting an app with Bootplate. It -is implemented using [Yeoman](http://yeoman.io/), an open-source suite of Web -development tools. +我们推荐使用 `generator-enyo` 来开始 Bootplate 应用。它用 +[Yeoman](http://yeoman.io/) 来实现这个功能。Yeoman 是一个开源的 Web 开发工具 +套件。 -**Note:** To use `generator-enyo`, you will first need to have -[Node.js](http://nodejs.org) and the [Node Package Manager](https://npmjs.org) -installed on your Mac OS or Linux computer. +**注：** 要用 `generator-enyo`，你首先需要 [Node.js](http://nodejs.org) 和 + [Node 包管理器](https://npmjs.org) 已经安装在 Mac OS 或 Linux 电脑里。 1. Use the Node Package Manager `(npm)` to install `generator-enyo`: diff --git a/developer-guide/getting-started/enyo-tour.md b/developer-guide/getting-started/enyo-tour.md index 3e05e3b..1ae9def 100644 --- a/developer-guide/getting-started/enyo-tour.md +++ b/developer-guide/getting-started/enyo-tour.md @@ -16,7 +16,8 @@ ## Enyo -框架核心，在源码中简单认为是 `enyo`，它提供了强大的特性来开发复杂的应用和附加库，这些都是以模块化的 Web 栈基础之上的： +框架核心，在源码中简单认为是 `enyo`，它提供了强大的特性来开发复杂的应用和附加库， +这些都是以模块化的 Web 栈基础之上的： * **对象封装，继承，有等级的所有权** - 类和组件（Kinds and Components） * **视图和DOM插件模型** - Ui组件和控制（UiComponent and Control） @@ -26,13 +27,18 @@ * **触摸支持** - 触摸滚动和手势仿真 * **包载入** - `enyo.depends()` 和 `package.js` -这些部分实际上是分享的（它可以很容易地创建小型 Enyo），但我们相信它们形成了一个有用的工作集合，所以我们把它们作为 Enyo 核心呈现给大家。 +这些部分实际上是分享的（它可以很容易地创建小型 Enyo），但我们相信它们形成了一个有 +用的工作集合，所以我们把它们作为 Enyo 核心呈现给大家。 -以下所有东西都是基于核心的可选项。可以根据你应用的需要选择。不过，这些只是一个参考库，我们会有一个大生态圈，那里的插件可能会有不同的外观和感觉，布局选项，服务封装等。请到 [Enyo 社区像册](http://enyojs.com/gallery)去看看创建和分享一个组件或插件库是多么容易的事。 +以下所有东西都是基于核心的可选项。可以根据你应用的需要选择。不过，这些只是一个参 +考库，我们会有一个大生态圈，那里的插件可能会有不同的外观和感觉，布局选项，服务封 +装等。请到 [Enyo 社区像册](http://enyojs.com/gallery)去看看创建和分享一个组件或 +插件库是多么容易的事。 ## Moonstone -Moonstone 库提供了一个美化过的图形界面组件，它特意为电视应用进行了设计和优化。它正在扩展，目前包括： +Moonstone 库提供了一个美化过的图形界面组件，它特意为电视应用进行了设计和优化。 +它正在扩展，目前包括： * **按钮**（普通，图标，收音机按钮和触发按钮） * **输入**（文本输入框，文本输入区域，富文本输入区域） @@ -45,24 +51,19 @@ Moonstone 库提供了一个美化过的图形界面组件，它特意为电视 ## Onyx -Onyx 是原先和Enyo一起发布的UI库。虽说Moonstone大部分替代了它，但它偶尔也会露一手。 - -Onyx, the original UI library that shipped with the Enyo framework, remains the -library of choice for mobile device apps. While Moonstone has generated most of -the publicity recently, new Onyx development is also in the works. We encourage -you to check out the [Onyx source](https://github.com/enyojs/onyx), and stay -tuned. +Onyx 是原先和 Enyo 一起发布的UI库，对于移动设备应用，还是保持用这个库。虽说近期主 +要是在发布 Moonstone ， 但新的 Onxy 开发也在进行中。我们鼓励你到 +[Onyx 源](https://github.com/enyojs/onyx) 查看一下，并保持最新姿态。 ## Spotlight -The Spotlight library manages focus state, enabling users to navigate through -Enyo applications in either 5-way mode (using the directional arrow and Return -keys on a keyboard, or the corresponding buttons on a traditional television -remote control) or pointer mode (using a mouse or touchscreen). +Spotlight 库管理焦点状态，它能够让用户在五向模式（用键盘的方向键和回车键，或者传 +统的电视遥控器上的相应按钮）或指点器模式（用鼠标或触摸屏）下浏览 Enyo 应用。 ## Layout -Enyo 组件也许可以用纯 HTML/CSS 技术来布局，我们提供的布局库让你更容易，更高效而且跨浏览器地解决布局的需要： +Enyo 组件也许可以用纯 HTML/CSS 技术来布局，我们提供的布局库让你更容易，更高效而且 +跨浏览器地解决布局的需要： * **自适应的行和列** * **列表** @@ -72,11 +73,9 @@ Enyo 组件也许可以用纯 HTML/CSS 技术来布局，我们提供的布局 ## enyo-ilib -The `enyo-ilib` library provides localization support for the Enyo framework. -The heavy lifting is done by the open-source `iLib` library; `enyo-ilib` is -essentially a compatibility layer, making it easy for Enyo app developers to -access the powerful features of `iLib` without having to deal with messy, -locale-specific details. +`enyo-ilib` 库给 Enyo 框架进行本地化提供了支持。主要的工作由开源库 `iLib` 完成。 +`enyo-ilib` 主要作为兼容层来使 Enyo 应用的开发人员更轻松地使用 `ilib` 的强大 +特性，同时不需要处理很多与本地化相关的细节。 ## 画布（Canvas） @@ -87,27 +86,26 @@ Enyo 封装同样适用于以画布为基础的组件，它像传统UI一样工 * **文本** * **图像** - -You can easily extend these to create complex graphical applications and games, -such as our [Pirate Pig](http://enyojs.com/samples/piratepig) canvas demo app. +你可以轻松地扩展这些来创建复杂的图形应用和游戏，比如我们的 +[Pirate Pig](http://enyojs.com/samples/piratepig) 画布示范应用。 ## 扩展（Extra） -"extra"扩展库包括了一些有用的工具组件，范例中使用了这些组件。 +"extra" 扩展库包括了一些有用的工具组件，范例中使用了这些组件。 ## 开始（Bootplate） -Bootplate 是一个模板，它给开发新 Enyo 应用提供了一个完整的解决方案，并且包括在每一个发行版中。它包括当前版本的 Enyo 和最常用的库（Moonstone 和 Layout），也包括了用来布置应用的最小化脚本，源码和附件。从这里开始使用 Bootlate。 - -The [Bootplate](bootplate.html) templates provide complete starter projects -containing everything you need to develop and deploy Enyo apps out of the box. -These templates contain current versions of Enyo, along with the most common -libraries used by app developers (Moonstone or Onyx, Layout, etc.) and scripts -to minify and create deployable versions of the source and assets. +[Bootplate](bootplate.html) 模板，它给开发新 Enyo 应用提供了一个完整的解决方案。 +这些模板包含在当前的 Enyo 发行版中，同时还包含了应用开发人员最常用的库 +（Moonstone 或者 Onyx，Layout等），也包括了一些脚本用来最小化和创建源码和附件的 +发布版。 ## 阅读更多 * 如果你喜欢一步一步介绍 Enyo，这里是 [Moonstone 应用教程](moonstone-app-tutorial.md)。 + * 立即写 Enyo 应用，去 [Bootplate](bootplate.md)。 + * 了解更多 Enyo 应用结构细节，看[计划和构建你的应用指南](planning-and-structuring-your-app.md)。 + * 还不能满足你？看当前文档的[全部列表](../index.md)， diff --git a/developer-guide/getting-started/first-steps.md b/developer-guide/getting-started/first-steps.md index 423eb23..61570f2 100644 --- a/developer-guide/getting-started/first-steps.md +++ b/developer-guide/getting-started/first-steps.md @@ -2,7 +2,8 @@ ## 准备开发环境 -作为 Enyo 开发者，你有很大的自由去选择开发平台和工具来写你的应用代码。你可能在 Windows, Mac, 或者 Linux 环境。仅需要一些简单的工具就可以弄好并运行了。 +作为 Enyo 开发者，你有很大的自由去选择开发平台和工具来写你的应用代码。你可能在 +Windows, Mac, 或者 Linux 环境。仅需要一些简单的工具就可以弄好并运行了。 ### 文本编辑 @@ -15,29 +16,31 @@ ### Git 客户端 -目前发行 Enyo 核心、库和“bootplate" 用的主要是 GitHub，所以你需要有现代的 Git 客户 -端安装在机器里。在本文档里，我们用 git 命令行，但你也可以使用喜欢的 GUI git 客户端。 +目前发行 Enyo 核心、库和“bootplate" 用的主要是 GitHub，所以你需要有现代的 Git +客户端安装在机器里。在本文档里，我们用 git 命令行，但你也可以使用喜欢的图形界面 +git 客户端。 -你可以在 [git-scm.com](http://git-scm.com/downloads)下载你的操作系统对应的 git 客 -户端。 +你可以在 [git-scm.com](http://git-scm.com/downloads)下载你的操作系统对应的 git +客户端。 -（注意：Enyo "bootplate" 模板同样在 **LG webOS TV SDK** 中一起分发，它可能使用在 -SDK中的 `ares-generate` 命令生成，该命令不需要 Git。 如果使用 **LG webOS TV SDK** ， -而且不打算在你的应用中用 Git 来控制版本，你不需要安装 Git 客户端。） +（注意：Enyo "bootplate" 模板同样在 **LG webOS TV SDK** 中一起分发，它可能使用 +在 SDK 中的 `ares-generate` 命令生成，该命令不需要 Git。 如果使用 +**LG webOS TV SDK** ，而且不打算在你的应用中用 Git 来控制版本，你不需要安装 +Git 客户端。） ### Node.js -Enyo 框架包含了基于 `Node.js` 的工具来最小化和布署应用。 `Node.js` 是服务器端的 -运行时（像是服务器端的 Perl, Python, Ruby 和其他语言的解释器）用于在服务器上运 +Enyo 框架包含了基于 `Node.js` 的工具用来最小化和布署应用。 `Node.js` 是服务器端 +的运行时（像是服务器端的 Perl, Python, Ruby 和其他语言的解释器）用于在服务器上运 行 JavaScript 脚本。甚至可以只用 `Node.js` 本身作为主 Web 服务器（下面会看到）。 可以在 [nodejs.org](http://nodejs.org/) 下载你的操作系统对应版本的 `node.js`。 ### Web 浏览器和 Web 服务器 -在开发过程中，你可以用任何现代浏览器来测试你的代码。也许在浏览器中可以直接打开本地 -文件，但我们还是强烈建议你通过 HTTP 服务器来打开应用。 这个建议有很多好处，其中包 -括有能力从远程设备进行测试。 +在开发过程中，你可以用任何现代浏览器来测试你的代码。也许在浏览器中可以直接打开本 +地文件，但我们还是强烈建议你通过 HTTP 服务器来打开应用。 这个建议有很多好处，其 +中包括有能力从远程设备进行测试。 在 Web 服务器上运行你的应用可以避免 Chrome 浏览器对 AJAX 的安全限制。如果想选择 在 Chrome 开发，*并且* 直接从文件系统打开你的文件，你需要在命令行启动浏览器并加 @@ -75,7 +78,7 @@ Enyo 框架包含了基于 `Node.js` 的工具来最小化和布署应用。 `No 如果你是 Enyo 开发的新人，你会希望把 Enyo 源代码作为现成的项目模板的一部分。 这个 enyojs 项目包括这样一些我们称为 "bootplate" (BOOTstrap + boilerPLATE) 模板 -的东西。每个 bootplate 模板会和 Enyo 核心代码，一个或多个与项目相关的库，一个 +的东西。每个 bootplate 模板会有 Enyo 核心代码，一个或多个与项目相关的库，一个 “你好世界”这种应用，和一个推荐的文件夹结构用来组织本应用中的文件。关于 bootplate 模板，包括设置介绍，见[Bootplate：在5分钟内用 Enyo 从0到60](bootplate.md)。 From 69a283305228fc1899bc998d0a4140ff9c352608 Mon Sep 17 00:00:00 2001 From: Ben Luo <benluo@gmail.com> Date: Thu, 19 Feb 2015 01:31:24 +0800 Subject: [PATCH 4/5] translated "bootplate.md" --- README.md | 6 +- developer-guide/design.md | 14 +- developer-guide/getting-started/bootplate.md | 160 ++++++++---------- developer-guide/previous-releases.md | 7 +- developer-guide/release-notes.md | 22 +-- .../release-notes/migration-2.3-to-2.5.md | 49 +++--- enyo-jsdoc-syntax.md | 20 ++- 7 files changed, 133 insertions(+), 145 deletions(-) diff --git a/README.md b/README.md index 52c59b1..091eb73 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ 本项目的目的是为 [enyo](https://github.com/enyojs/enyo) 和它的[公共库](https://github.com/enyojs)积累和生成 API 参考文档。这个目的可以通过已有的技术力量，包括enyo自己， 根据那个时候要求自己编写的局限性。 -> 这个项目的最终目的是协调所有文档和开发指南，让它们整合在一个单一，标准化和内聚的源内，这个源可展示，可扩展，可理解。今后，[我希望](https://github.com/clinuz) 这个项目能更好地满足这个目的。目前为止，这个愿望不可能实现。 +> 这个项目的最终目的是协调所有文档和开发指南，让它们整合在一个统一的，标准化的和内聚的源内，这个源可展示，可扩展，可理解。今后，[我希望](https://github.com/clinuz) 这个项目能更好地满足这个目的。目前为止，这个愿望不可能实现。 ### 系统要求 @@ -15,7 +15,7 @@ - [Node.js](http://nodejs.org/) - 有关 `node` 的所有东西 - [npm](https://www.npmjs.org/) - [Node.js](http://nodejs.org) 的包管理(已经与node一起安装) -- [pandoc](http://johnmacfarlane.net/pandoc/) - 通用文档转换工具，用来将markdown文件转换成HTML。确保它在你的路径中可以使用。(小窍门：'brew install pandoc' 在 Mac里用) +- [pandoc](http://johnmacfarlane.net/pandoc/) - 通用文档转换工具，用来将 markdown 文件转换成 HTML 文件。确保它在你的可执行路径中。(小窍门：在 Mac里用 'brew install pandoc') ##### 要求全局 npm @@ -28,7 +28,7 @@ - [JSdoc3](http://usejsdoc.org) - 本文档最主要的语法和解析/生成工具 - [Nunjucks](http://mozilla.github.io/nunjucks/) - 模板引擎，用于生成静态 HTML 内容 -- [Grunt.js](http://gruntjs.com/) - Task runner to help automate certain portions of generating and building the site +- [Grunt.js](http://gruntjs.com/) - 任务运行器，用来帮助自动生成和创建网站那部分 - [Prism.js](http://prismjs.com/) - 在输出时用的代码/语法高亮工具 - [JQuery](http://jquery.com/) - 作为运行时的先进增强JavaScript库，用于静态 DOM 的交互 diff --git a/developer-guide/design.md b/developer-guide/design.md index f9e729e..9a790ff 100644 --- a/developer-guide/design.md +++ b/developer-guide/design.md @@ -1,12 +1,12 @@ -% Design Guide +% 设计指南 -We are pleased to offer the following resources to those designing apps using -the Enyo framework and Moonstone UI library: +我们很高兴地提供下面的资源给开发者，他们使用 Enyo UI 和 Moonstone UI 框架库来 +设计应用： -* [Design Principles](design/principles.html) +* [设计原则](design/principles.html) -* [UI Patterns](design/patterns.html) +* [UI 模式](design/patterns.html) -* [UI Controls](design/controls.html) +* [UI 控制](design/controls.html) -* [Styles](design/styles.html) \ No newline at end of file +* [风格](design/styles.html) diff --git a/developer-guide/getting-started/bootplate.md b/developer-guide/getting-started/bootplate.md index b9a6054..6d55bbf 100644 --- a/developer-guide/getting-started/bootplate.md +++ b/developer-guide/getting-started/bootplate.md @@ -16,27 +16,27 @@ enyojs 项目包括一套注用模板，称为 "Bootplate" (BOOTstrap + boilerPL [Yeoman](http://yeoman.io/) 来实现这个功能。Yeoman 是一个开源的 Web 开发工具 套件。 -**注：** 要用 `generator-enyo`，你首先需要 [Node.js](http://nodejs.org) 和 +**注：** 使用 `generator-enyo`前，你首先需要确定 + [Node.js](http://nodejs.org) 和 [Node 包管理器](https://npmjs.org) 已经安装在 Mac OS 或 Linux 电脑里。 -1. Use the Node Package Manager `(npm)` to install `generator-enyo`: +1. 使用 Node Package Manager `(npm)` 来安装 `generator-enyo`: ``` sudo npm install -g generator-enyo ``` - Note that this will install Yeoman, if it is not already installed. (Also - note that `sudo` may not be necessary on all platforms.) + 注意，如果 Yeoman 没有没有安装，会先安装它。（同时也要注意 `sudo` 不是在所有 + 平台上都是必需的。） -2. Run the generator, specifying the name of your new app: +2. 运行生成器，指定你的新应用的名字： ``` yo enyo <myApp> ``` - This will create the `<myApp>` directory and populate it with the necessary - files for an Enyo application. The Onyx UI library is included by default; - to choose a different UI library, use the `-m` or `--mode` flag, e.g.: + 这会创建 `<myApp>` 目录并在里面生成 Enyo 应用需要的文件。缺省包含 Onyx UI + 库；想要选择不同的 UI 库，用 `-m` 或 `--mode` 选项，如： ``` yo enyo -m=moonstone <myApp> @@ -53,44 +53,44 @@ enyojs 项目包括一套注用模板，称为 "Bootplate" (BOOTstrap + boilerPL ## 开发 -到这里，你可以从模板提供的 `source/app.js` 文件来开始普通的开发、测试循环。随着应用会增长，它会包括越来越多的 JavaScript 和 CSS 文件，还包括自带 `package.js` 文件的库，别忘了把这些包括在你顶级的 `source/package.js` 文件中。 下面将要提到的 `deploy` 脚本会为了布署而整合他们进入优化过的 JavaScript 和 CSS 文件中。 +到这里，你可以从模板提供的 `source/app.js` 文件来开始普通的开发、测试循环。随着应 +用增长，它会包括越来越多的 JavaScript 和 CSS 文件，还包括自带 `package.js` 文件 +的库，别忘了把这些包括在你顶级的 `source/package.js` 文件中。 下面将要提到 +的 `deploy` 脚本会为了布署而整合他们进入优化过的 JavaScript 和 CSS 文件中。 -出于本章的目的，让我们假设你已经完成了所有 "HelloWorld" 应用的工作，准备把注意力移到布署流程上来了。 +出于本章的目的，让我们假设你已经完成了所有 "HelloWorld" 应用的工作，准备把注意力 +移到布署流程上来了。 -At this point, you would refine your project through the normal cycle of -development and testing, starting with the `source/app.js` file provided in the -template. As your app grows to include more and more JavaScript and CSS files, -and libraries with their own `package.js` files, make sure to include these in -your top-level `source/package.js` and the `deploy` script described below will -combine them all into optimized JavaScript and CSS files for deployment. +现在你应该通过普通的开发和测试流程来改进你的项目，可以从模板提供的 `source/app.js` +文件开始。随着应用的增长，会包括越来越多的 JavaScript 和 CSS 文件，还有包括有自己 +`package.js` 的库，要确保在顶级 `source/package.js` 里包括这些内容，下面的 +`deploy` 脚本会把它们都组合进优化的 JavaScript 和 CSS 文件里用来布署。 -For the purposes of this article, let's assume that you've completed all of your -work on the "HelloWorld" app, and turn our attention to the deployment process. +出于本文章的目标，让我们假设已经完成了 “HelloWorld”应用，把注意力转到布署的 +流程上来。 ## 开发 ### 用 generator-enyo -One advantage of installing `generator-enyo` is that it makes deploying your app -extremely easy. Just enter the application directory and issue the command: +安装 `generator-enyo` 的一个优点就是可以让布署应用变得异常容易。只要进入应用目录 +然后执行命令： ``` yo enyo:deploy ``` -The optimized app will be created in a directory called `deploy` within the -application directory. +在 `deploy` 这个目录里会创建优化后的应用。 -Your project is now ready to deploy to various HTML5-ready targets. For details -about deploying apps to specific platforms, see [Platform-Specific -Deployment](../deploying-apps/platform-specific-deployment.html). +你的项目现在已经准备好布署到不同的 HTML5 可用的目标上。想要知道如何布署应用到 +特定的平台，见 [特定平台布署](../deploying-apps/platform-specific-deployment.html). ### 另一种方法 如果你不用 `generator-enyo`，用下面的步骤布署应用： - -1. 确认你已经在系统里安装了 node.js 。为了让布署脚本运行，你需要 0.8 或以上版本。你可以从 [nodejs.org](http://nodejs.org) 下载。 +1. 确认你已经在系统里安装了 node.js 。为了让布署脚本运行，你需要 0.8 或以上版 + 本。你可以从 [nodejs.org](http://nodejs.org) 下载。 2. 用如下的办法生成布署方案： @@ -102,59 +102,54 @@ Deployment](../deploying-apps/platform-specific-deployment.html). (注：在2.1.1版之前，进入 `tools` 文件后运行 `deploy.bat` 或 `./deploy.sh`) -当构建完成，在 `build` 这个目录下，会有两个压缩的 JavaScript 文件，两个压缩的 CSS 文件；`app.js` 和 `app.css` 包含你的应用代码， `enyo.js` 和 `enyo.css` 包含框架代码。 +当构建完成，在 `build` 这个目录下，会有两个压缩的 JavaScript 文件，两个压缩的 +CSS 文件；`app.js` 和 `app.css` 包含你的应用代码， `enyo.js` 和 `enyo.css` +包含框架代码。 + +`build` 文件夹和其它一套补充文件（`index.html` 文件载入你的应用，应用使用的任 +何图像或者其它资源等）复制到最终的布署文件夹 `deploy`。 -`build` 文件夹和其它一套补充文件（ `index.html` 文件载入你的应用，应用使用的任何图像或者其它资源等）复制到最终的布署文件夹 `deploy`。 3. 打开布署文件夹，在浏览器中载入 `index.html` ，会看到 "Hello World" (但是很快！)。 -现在你的项目为不同的 HTML5 可用的目标作好布署的准备。关于在特定平台上布署应用的细节，可以参见[特定平台布署](../deploying-apps/platform-specific-deployment.md)。 +现在你的项目为不同的 HTML5 可用的目标作好布署的准备。关于在特定平台上布署应用的 +细节，可以参见[特定平台布署](../deploying-apps/platform-specific-deployment.md)。 -1. Make sure that you have the Node.js runtime (version 0.8 or later) installed - on your system. +1. 确定你的系统里已经安装 Node.js 运行时（0.8或更新版）。 -2. Make a deployment build as follows: +2. 按以下方法制造布署版： - * Open a command prompt (Windows) or terminal window (Mac/Linux). + * 打开命令行（Windows）或者终端窗口（Mac/Linux）。 - * On the command line, navigate to root of your bootplate folder. + * 在命令行上转到 bootplate 文件夹的根目录。 - * Run the `tools\deploy.bat` script (Windows) or `./tools/deploy.sh` + * 运行 `tools\deploy.bat` 脚本（Windows）或者 `./tools/deploy.sh` (Mac/Linux). - When the build is complete, there will be two compressed JavaScript files - and two compressed CSS files in a folder called `build`; `app.js` and - `app.css` contain your application code, while `enyo.js` and `enyo.css` - contain framework code. + 当建造完成后，在 `build` 目录下会有两个压缩过的 JavaScript 文件和两个压缩过 + 的 CSS 文件；`app.js` and `app.css` 包含应用的代码， `enyo.js` 和 `enyo.css` + 包含框架代码。 - The `build` folder and a set of complementary files (an `index.html` file - that loads your app, any images or other resources used by the app, etc.) - are then copied into the final deployment folder, called `deploy`. + `build` 文件夹和相关的一套文件（`index.html` 文件用来载入应用，任何图像或 + 其它应用使用的资源等）复制到最终的布署文件夹 `deploy` 中。 -3. Open the `deploy` folder, load `index.html` in a browser, and see "Hello - World" (but faster!). +3. 打开 `deploy` 文件夹，在浏览器中载入 `index.html` 可以年到 "Hello + World" （但是更快）。 ## 有关 Bootplate 项目更多的说明 ### 嵌入的 Enyo -设置 Bootplate 项目来使用_嵌入的_ Enyo。换句话说， Enyo 库和其它依赖项完全储存在项目文件夹内。这些资源相对小，并把所有依赖项放在一起，这样可以让开发者控制版本，也可以轻易布署封装好的包（如：PhoneGap 建造）。 - -Bootplate projects are set up to use _embedded_ Enyo. In other words, the Enyo -library and other dependencies are stored completely inside the project folder. -These resources are relatively small, and keeping all the dependencies together -allows the developer to control versions and to easily deploy sealed packages -(e.g., PhoneGap builds). +设置 Bootplate 项目来使用_嵌入的_ Enyo。换句话说， Enyo 库和其它依赖项完全储存 +在项目文件夹内。这些资源相对小，并把所有依赖项放在一起，这样可以让开发者控制版 +本，也可以轻易布署封装好的包（如：PhoneGap 建造）。 ### 开发与布署 -When developing and debugging your project, it's common to need various source -files and helper tools that are not needed in the final package. For this -reason, we have the concept of making an application _deployment_. A -deployment refers to a final production package, ready for inclusion in an app -store or other method of distribution. +当开发和查错时，会需要各种各样的源文件和辅助工具，这些东西在最后的包中并不需要。 +因为这个原因，我们有了造应用_发布_版的概念。一个发布指最终生产用的包，已经可以 +在应用商店中或其它方法发行了。 -An important feature of bootplate projects is that you can generate deployments -from them with relative ease. +bootplate 一个最要的特性就是你能用相对容易的方法来生成发布版。 ### 文件夹结构 @@ -171,54 +166,47 @@ Bootplate 项目有如下结构： index.html ``` -* `assets` contains images or other data files for you projects. Files in this - folder are intended to be necessary for deployment. +* `assets` 包含图像或其它你项目的数据文件。在这个文件夹里的文件应该在布署的时 + 候用到。 -* `build` contains JavaScript and CSS source files that have passed through the - optimization script. If the `build` folder does not exist, it will be - created when the `deploy` script is run. +* `build` 包含 JavaScript 和 CSS 源代码文件，它们会交到优化脚本去。如果 `build` + 文件夹不存在，它会在运行 `deploy` 脚本时生成一个。 -* `enyo` contains the Enyo framework source files. This folder is only - necessary for debugging, and may be deleted for deployment. +* `enyo` 包含 Enyo 框架源代码方文件。这个文件夹只需要用来查错，可能会为布署而 + 删除。 -* `lib` contains various plugin files. Individual folders in `lib` may come - from various sources and may have custom rules for deployment. In general, - `assets` or `images` folders are required, and other files are only for - debugging. +* `lib` 包含不同的插件文件。在 `lib` 中不同的文件夹可能来自不同的源，也许有为 + 布署定制的规则。总得来说， `assets` 或 `images` 文件夹是需要的，其它文件 + 夹只为查错用。 -* `source` contains the code source files or other debug-only materials. +* `source` 包含源代码文件或其它只用于查错的材料。 -* `tools` contains the `deploy` shell script. +* `tools` 包含 `deploy` shell 脚本。 -* `debug.html` loads the application without using any built files; loading - `debug.html` is generally the easiest way to debug. +* `debug.html` 载入没有任何建造文件的应用；载入 `debug.html` 是查错最简单的方法。 -* `index.html` loads the application using built files only. If built files are - not available, it will redirect to `debug.html`. +* `index.html` 只载入使用建造文件的应用。如果建造文件不能用，它会重定位到 + `debug.html`. ### 更新框架代码 -`generator-enyo` uses the latest stable version of each Bootplate template. -(And each version of Bootplate, in turn, references a particular version of Enyo -core and each of its associated libraries.) From time to time, the Bootplate -versions specified by the `generator-enyo` tool will be updated, as new stable -builds become available. +`generator-enyo` 使用每个 Bootplate 模板最新的稳定版。（每个版本的 Bootplate +参考特定的 Enyo 核心版和相应的库。）当新的稳定版出来时，`generator-enyo` 工具 +特定的 Bootplate 版会更新。 -To check for updates to `generator-enyo`, use the command +检查 `generator-enyo` 更新可以用命令 ``` sudo npm update -g generator-enyo ``` -If an updated version was found and installed, you may update the framework code -for a given application by entering the app's directory and issuing the command +如果更新版被发现并安装，通过进入应用目录并执行以下命令，你可更新框架代码 ``` yo enyo:update ``` -(Note that `generator-enyo` supports a number of additional options, which we -will be documenting shortly.) +（注意 `generator-enyo` 支持很多附加选项，我们会在短期内写入文档。） **附加读物** diff --git a/developer-guide/previous-releases.md b/developer-guide/previous-releases.md index d9acd57..10b9590 100644 --- a/developer-guide/previous-releases.md +++ b/developer-guide/previous-releases.md @@ -1,7 +1,6 @@ -% Documentation for Previous Releases +% 上一次发布版的文档 -In addition to the [current release](/docs/), documentation is available for the -prior Enyo releases listed below. Note that this information is provided for -historical purposes only. +除了[当前发布版](/docs/)之外，Enyo 前一个发布版的文档也有。注意该信息仅为了 +记录历史的目的。 * [Enyo 2.4](/docs/2.4.0/) diff --git a/developer-guide/release-notes.md b/developer-guide/release-notes.md index 661255d..5aac95f 100644 --- a/developer-guide/release-notes.md +++ b/developer-guide/release-notes.md @@ -1,13 +1,13 @@ -% Release Notes +% 发布信息 -Release notes are available for the following Enyo releases: +发布信息在以下 Enyo 发行版中： -* [Enyo 2.5.1 Release Notes](release-notes/release-2.5.1.html) (December 11, 2014) -* [Enyo 2.5 Release Notes](release-notes/release-2.5.html) (Not released to public) -* [Enyo 2.4 Release Notes](release-notes/release-2.4.html) (April 14, 2014) -* [Enyo 2.3.0-pre.10 Release Notes](release-notes/release-2.3.0-pre.10.html) (October 16, 2013) -* [Enyo 2.2 Release Notes](release-notes/release-2.2.html) (February 21, 2013) -* [Enyo 2.1.1 Release Notes](release-notes/release-2.1.1.html) (November 28, 2012) -* [Enyo 2.1 Release Notes](release-notes/release-2.1.html) (October 26, 2012) -* [Enyo 2.0.1 Release Notes](release-notes/release-2.0.1.html) (August 30, 2012) -* [Enyo 2.0 Release Notes](release-notes/release-2.0.html) (July 18, 2012) +* [Enyo 2.5.1 发布信息](release-notes/release-2.5.1.html) (2014年12月11日) +* [Enyo 2.5 发布信息](release-notes/release-2.5.html) (没有公开发行) +* [Enyo 2.4 发布信息](release-notes/release-2.4.html) (2014年4月14日) +* [Enyo 2.3.0-pre.10 发布信息](release-notes/release-2.3.0-pre.10.html) (2013年10月16日) +* [Enyo 2.2 发布信息](release-notes/release-2.2.html) (2013年2月21日) +* [Enyo 2.1.1 发布信息](release-notes/release-2.1.1.html) (2012年11月28日) +* [Enyo 2.1 发布信息](release-notes/release-2.1.html) (2012年10月26日) +* [Enyo 2.0.1 发布信息](release-notes/release-2.0.1.html) (2012年8月30日) +* [Enyo 2.0 发布信息](release-notes/release-2.0.html) (2012年7月18日) diff --git a/developer-guide/release-notes/migration-2.3-to-2.5.md b/developer-guide/release-notes/migration-2.3-to-2.5.md index de9accc..e59779f 100644 --- a/developer-guide/release-notes/migration-2.3-to-2.5.md +++ b/developer-guide/release-notes/migration-2.3-to-2.5.md @@ -1,16 +1,15 @@ -% Enyo 2.3.0-rc.24 to 2.5.0 Migration Notes +% Enyo 2.3.0-rc.24 到 2.5.0 迁移注释 To ensure a smooth transition from Enyo 2.3.0-rc.24 to Enyo 2.5.0, please review the following list of changes that will likely require modifications to your existing Enyo applications. -## General +## 总览 -* In `enyo.Control`, the `resized()` method has been renamed as `resize()` and - the default event handler has been renamed from `resizeHandler()` to - `handleResize()`. If you have overloaded the event handler, you will need - to rename your overload method as `handleResize()`, and if you are calling - `resized()` you will instead need to call `resize()`. +* 在 `enyo.Control` 里，`resized()` 方法已经重命名成 `resize()`，缺省的事件处理器 + 也从 `resizeHandler()` 重命名成 `handleResize()`。 如果你重载过这个事件处理器， + 你需要重命名你的重载方法为 `handleResize()`，同时如果你调用 `resized()`，你应该 + 调用 `resize()`。 * The way in which bindings are initialized and resolved has been rewritten so that you no longer need to prefix the `to` and `from` properties with a dot @@ -18,14 +17,14 @@ existing Enyo applications. string parsing, so you should use the new syntax for a slight boost in performance. -Before the change: +变更前： ``` bindings: [ {from: '.myProp', to: '.$.myComponent.prop'} ] ``` -After the change: +变更后： ``` bindings: [ @@ -42,7 +41,7 @@ bindings: [ An example of an acceptable use case would be an `enyo.Application` that exposes its components to other nested components. -Before the change: +变更前： ``` enyo.kind({ @@ -62,7 +61,7 @@ bindings: [ ] ``` -After the change: +变更后： ``` enyo.kind({ @@ -87,7 +86,7 @@ bindings: [ the old behavior, you may need to make a few minor updates to your apps to make them function as before. -Before the change: +变更前： ``` // unfortunately you were able to incorrectly create a kind and then use it as your namespace, @@ -189,7 +188,7 @@ methods are backward-compatible.) * `removeObserver` -> `unobserve` * `notifyObservers` -> `notify` -Before the change: +变更前： ``` // before, this would return the a function reference that had been bound to the context @@ -200,7 +199,7 @@ var fn = this.addObserver('prop', method, context); this.removeObserver('prop', fn); ``` -After the change: +变更后： ``` // now we do not need to store the reference to the bound method to remove it @@ -213,7 +212,7 @@ this.unobserve('prop', method, context); * There is a new preferred way of declaring observers in a kind--as an array (the previous structure is still available, but has been deprecated): -Before the change: +变更前： ``` observers: { @@ -221,7 +220,7 @@ observers: { } ``` -After the change: +变更后： ``` observers: [ @@ -251,7 +250,7 @@ observers: [ * As in `enyo.ObserverSupport`, the `computed` property should now be declared as an array: -Before the change: +变更前： ``` computed: { @@ -259,7 +258,7 @@ computed: { } ``` -After the change: +变更后： ``` computed: [ @@ -314,13 +313,13 @@ that there has been a shift in terminology in that we refer to instances of For more information, see the documentation for the method. -Before the change: +变更前： ``` enyo.store.findLocal(ctor, opts, filterMethod); ``` -After the change: +变更后： ``` enyo.store.find(ctor, filterMethod, opts); @@ -444,7 +443,7 @@ enyo.store.find(ctor, filterMethod, opts); convenience methods `isBusy()`, `isError(),` and `isReady()`, which should be suitable for many general use cases (like the one below). -Before the change: +变更前： ``` enyo.kind({ @@ -459,7 +458,7 @@ enyo.kind({ }); ``` -After the change: +变更后： ``` enyo.kind({ @@ -494,7 +493,7 @@ enyo.kind({ function call, where the `enyo.Application` instance is created. It should also be noted that sources no longer interact with `enyo.Store` at all. -Before the change: +变更前： ``` enyo.store.addSources([ @@ -504,7 +503,7 @@ enyo.store.addSources([ new enyo.Collection({defaultSource: 'ajaxSource'}); ``` -After the change: +变更后： ``` enyo.AjaxSource.create({name: 'ajax'}); @@ -516,4 +515,4 @@ new enyo.Collection({source: 'ajax'}); the `options` hash passed to `fetch()`, `commit()`, or `destroy()` (when using a source) to pass the `params` property for the desired behavior. -**See also:** [Enyo 2.3.0-rc.24 to 2.5.0 Release Notes](release-2.3-to-2.5.html) \ No newline at end of file +**See also:** [Enyo 2.3.0-rc.24 to 2.5.0 Release Notes](release-2.3-to-2.5.html) diff --git a/enyo-jsdoc-syntax.md b/enyo-jsdoc-syntax.md index 3aba007..6a9eff1 100644 --- a/enyo-jsdoc-syntax.md +++ b/enyo-jsdoc-syntax.md @@ -1,20 +1,22 @@ -### Links +### 链接 -> We support a subset of the JSDoc3 standard link syntax. The reason we do not support all of the syntax is that it makes assumptions about output formatting but we keep that logic separate from the pragma. The other variants are superfluous to achieving the desired output. +> 我们支持 JSDoc3 标准链接语法的一个子集。 我们不支持所有语法的原因在于它设定了 +> 输出格式，但我们把这部分东西从程序中分享出来。另外的变量对保存预定的输出来说是 +> 多余的。 -##### Link to a symbol +##### 链接到符号 - {@link symbol} -- [caption]{@link symbol} +- [说明文字]{@link symbol} -##### Link to href (webpage) +##### 链接到超文本（网页） - {@linkplain http://full.path} - {@linkplain relative/path/to/internal} -- [caption]{@linkplain http://full.path} -- [caption]{@linkplain relative/path/to/internal} +- [说明文字]{@linkplain http://full.path} +- [说明文字]{@linkplain relative/path/to/internal} -##### Glossary term +##### 术语表 - {@glossary term} -- [caption]{@glossary term} \ No newline at end of file +- [说明文字]{@glossary term} From 43977c6ebae34ff256600fbd8641fe05c074317e Mon Sep 17 00:00:00 2001 From: Ben Luo <benluo@gmail.com> Date: Thu, 19 Feb 2015 22:04:21 +0800 Subject: [PATCH 5/5] translate planning and structuring your app. --- developer-guide/getting-started/enyo-tour.md | 2 +- .../planning-and-structuring-your-app.md | 123 ++++++++---------- developer-guide/index.md | 2 +- developer-guide/key-concepts/applications.md | 2 +- developer-guide/key-concepts/components.md | 22 ++-- developer-guide/key-concepts/controllers.md | 2 +- 6 files changed, 66 insertions(+), 87 deletions(-) diff --git a/developer-guide/getting-started/enyo-tour.md b/developer-guide/getting-started/enyo-tour.md index 1ae9def..b67ca69 100644 --- a/developer-guide/getting-started/enyo-tour.md +++ b/developer-guide/getting-started/enyo-tour.md @@ -106,6 +106,6 @@ Enyo 封装同样适用于以画布为基础的组件，它像传统UI一样工 * 立即写 Enyo 应用，去 [Bootplate](bootplate.md)。 -* 了解更多 Enyo 应用结构细节，看[计划和构建你的应用指南](planning-and-structuring-your-app.md)。 +* 了解更多 Enyo 应用结构细节，看[计划和组织应用](planning-and-structuring-your-app.md)。 * 还不能满足你？看当前文档的[全部列表](../index.md)， diff --git a/developer-guide/getting-started/planning-and-structuring-your-app.md b/developer-guide/getting-started/planning-and-structuring-your-app.md index a38a45b..9bbfcfc 100644 --- a/developer-guide/getting-started/planning-and-structuring-your-app.md +++ b/developer-guide/getting-started/planning-and-structuring-your-app.md @@ -1,22 +1,18 @@ -% 计划和组织你的应用 - -While an Enyo application may be as simple as single HTML5 file, once we start -making more sophisticated apps, there are numerous resources to manage, versions -and dependencies to track, and debug switches to control. To facilitate a -smooth workflow, the Enyo team has adopted a number of conventions regarding -application structure. These are embodied in the [Bootplate](bootplate.html) -application template (available in both -[Moonstone](https://github.com/enyojs/bootplate-moonstone) and -[Onyx](https://github.com/enyojs/bootplate) variants), which you are encouraged -to base your own apps upon. They are also described in some detail below. +% 计划和组织应用 + +Enyo 应用会像单页面 HTML5 文件一样简单，但当我们开始开发很炫的应用时，就会有很多 +不同的资源需要管理，版本和信赖项需要跟踪，查错的选项需要控制。为了提供流畅的工作 +流，Enyo 团队对于应用结构接受了一些约定。在 [Bootplate](bootplate.html) 应用模板 + (在 [Moonstone](https://github.com/enyojs/bootplate-moonstone) 和 + [Onyx](https://github.com/enyojs/bootplate) 不同) 中可以看到，我们鼓励你基于 + Bootplate 来开发。这些约定在下面也有详细描述。 ## 基本的脚手架 -Enyo is designed so that plugin libraries, applications, and Enyo itself are all -portable resources. The use of common folder conventions significantly -simplifies the management of these resources. +Enyo 的设计让插件库，应用和 Enyo 自己都可以移动。使用这些通用的文件夹约定可以极大 +地简化资源的管理。 -The suggested folder structure for a plugin library looks like this: +推荐的插件库文件夹结构像这样： <plugin> assets/ @@ -24,23 +20,18 @@ The suggested folder structure for a plugin library looks like this: package.js (readmes, licenses, nfos) -* `source` contains JavaScript modules, stylesheets, or other raw (code) materials - for the plugin. +* `source` 包含了 JavaScript 模块，样式表，或者给插件的别的原材料 -* `assets` typically contains images or other resources that the library will - need in both production and development/debug environments. There may be as - many of these folders as you like, and the folder name is not special--a - project might have folders called `images` and `json`, for example. - However, we suggest that you keep all such items in one folder called - `assets`, so end users will know right away that this folder is necessary - for final deployment. +* `assets` 典型地包含图像或者其它资源，它们既用在生产环境中，也用在开发/查错中。 + 你可以放任意多的文件夹，文件夹名称也没什么特别的--比如，工程中可能会有 + `images` 和 `json`文件夹。然而，我们建议你把这些项目话一个叫 `assets` + 的文件夹中，这样最终用户马上就能知道这个文件夹在最终布署时是需要的。 -* `package.js` is a manifest listing the files in the library. +* `package.js` 是一个清单，列明在这个库里的文件。 -* The `<plugin>` folder will often contain other items, such as readmes, - licenses, or other miscellaneous files. +* `<plugin>` 文件夹通常包含其它项目，比如读我，许可，或者别的文件。 -The suggested setup for applications is similar, but includes some additions: +推荐的应用设置也类似，但包括了一些增加项： <application> assets/ @@ -55,42 +46,36 @@ The suggested setup for applications is similar, but includes some additions: index.html package.js -* The `enyo` folder contains a copy of the Enyo framework source. As discussed - below, it's possible to reference `enyo` from a common location instead of - embedding it in the application proper, but for ease of versioning and - sealing, we recommend that you keep a copy of Enyo with your application. +* `enyo` 文件夹包含 Enyo 框架源代码的复件。像在下面讨论的，可以把 `enyo` 从别 + 的通用的位置引用过来，而不像下面那样嵌入在项目里，但是为了版本和完整性， + 我们建议你在自己的应用中保留一个 Enyo。 -* The `lib` folder contains any plugins or other resources used by the project. +* `lib` 文件夹包含所有插件或者其它项目中用到的资源。 -* The `build` folder is the home for _minified_ resources, which are JavaScript - and CSS files that have been optimized to remove comments, whitespace, and - other features not critical to functionality. In JavaScript files, syntax - is sometimes changed (e.g., variable names may be shortened) to reduce file - size. +* `build` 文件夹是_最小化后_资源的主目录，这些资源是优化过后的 JavaScript 和 + CSS 文件， 这些文件去除了注释，空格和其它对功能性没有决定性影响的特性。在 + JavaScript 文件里，语法有的时候会变化（例如：变量名称可能缩短）来缩小 + 文件尺寸。 - The minified files are produced when the `deploy` script is run. This - script reads configuration info from `deploy.json` and triggers a call to a - separate `minify` script, which performs the actual optimization. (Note - that it generally isn't necessary to call `minify` directly.) + `deploy` 脚本运行时会生成最小化的文件。该脚本从 `deploy.json` 中读取配置 + 信息然后激发不同的 `minify` 脚本，它才真正执行优化。（注意，一般情况下是没 + 必要直接调用 `minify`。） - After `deploy` is run successfully, the output in `build` consists of two - JavaScript files (`app.js`, with your app code, and `enyo.js`, with the - framework code) and two corresponding CSS files (`app.css` and `enyo.css`). + `deploy` 运行成功后，在 `build` 里的输出有两个 JavaScript 文件（`app.js` + 是你的应用代码，`enyo.js` 是框架代码）和两个相应的 CSS 文件（`app.css` 和 + `enyo.css`）。 -* The `tools` folder houses two versions of the aforementioned `deploy` script, - `deploy.bat` (for use on Windows) and `deploy.sh` (for Mac and Linux). +* `tools` 文件夹放置了上述两个版本的 `deploy` 脚本，`deploy.bat` (用于 + Windows) 和 `deploy.sh` (用于 Mac 和 Linux)。 - During development, you'll load the application directly from the `source` - folder. (If you're using a Bootplate template, you'll do this by loading - `debug.html`.) When you're ready to deploy the application, run the - `deploy` script to create a version of the app with the code minified and - non-essential files removed. + 在开发时，你从 `source` 目录中直接载入应用。（如果你在用 Bootplate模板，你 + 可以载入 `debug.html`。) 当你准备布署应用后，执行 `deploy` 脚本来创建应用 + 的一个版本，该版本的代码最小化同时删除了不重要的文件。 ## 库文件夹和插件 -Enyo's infrastructure is intended to support a wide variety of plugins. While -it is not a technical requirement, the convention is to put plugins in a folder -called `lib` that is a peer to `enyo`: +Enyo 的基础设施是倾向能支持各种广泛的插件。这不是技术的要求，这个约定是把插件 +放到一个叫 `lib` 的目录里和 `enyo` 相对应： <application> enyo/ @@ -101,12 +86,11 @@ called `lib` that is a peer to `enyo`: package.js (readmes, licenses, nfos) -Again, notice that the standard scaffold has been used for this plugin. +再次注意，标准文件结构用于这个插件。 ## 标准快照 -If we combine the two preceding examples, we get the complete suggested folder -structure: +如果我们组合两个上面的例子，我会得到完整建议的目录结构： <application> assets/ @@ -130,12 +114,10 @@ structure: package.js (readmes, licenses, nfos) -As touched upon earlier, to construct a production version of the app, duplicate -the folder tree and then run `deploy` to generate a deployment build with debug -and development resources removed. By default, this build will be created in a -folder called `deploy`. +如原来提到的，为组织应用的生产版，复制文件树然后运行 `deploy` 来生成布署版本里面 +去除子开发和查错的资源。缺省情况下，会在叫 `deploy` 中创建这个版本。 -Here's the deployment tree for the suggested folder structure: +这是布署树建议的文件结构： <application>/ deploy/ @@ -151,21 +133,19 @@ Here's the deployment tree for the suggested folder structure: (licenses) index.html -Note that the `enyo` folder itself is not necessary for deployment. +注意 `enyo` 文件夹本身对布署来说不是必需的。 ## 分享 Enyo -As mentioned previously, it's also possible to build applications that refer to -shared copies of Enyo and/or plugins. In this case, shared resources are found -in a common location: +正如前面提到的，也有可能创建一个应用指向共享的 Enyo 复本和/或插件。这个情况下， +共享的资源通常可以在以下位置找到： <shared-root>/ enyo/ lib/ aPlugin/ -The following structure shows two applications, both of which load Enyo and -plugins from `<shared-root>`: +下面的结构显示两个应用，两个都从 `<shared-root>` 载入 Enyo 和插件： <apps-root> app1/ @@ -176,6 +156,5 @@ plugins from `<shared-root>`: assets/ source/ -This type of setup is most useful when developing plugins, creating a suite of -applications that will be deployed together, or working on the Enyo source -itself. +这种类型的设置主要用在发布插件，创建一套一起布署的应用，或者为 Enyo 源代码 +本身工作。 diff --git a/developer-guide/index.md b/developer-guide/index.md index f966c48..0f40395 100644 --- a/developer-guide/index.md +++ b/developer-guide/index.md @@ -7,7 +7,7 @@ * [Enyo 教程](getting-started/enyo-tour.md) * [第一步](getting-started/first-steps.md) * [Bootplate: 5 分种内0-60学会使用 Enyo](getting-started/bootplate.md) - * [计划和组织你的应用](getting-started/planning-and-structuring-your-app.md) + * [计划和组织应用](getting-started/planning-and-structuring-your-app.md) * [教程：创建 Moonstone 应用](getting-started/moonstone-app-tutorial.md) * Enyo 精华 diff --git a/developer-guide/key-concepts/applications.md b/developer-guide/key-concepts/applications.md index 33ceb99..a93ca7b 100644 --- a/developer-guide/key-concepts/applications.md +++ b/developer-guide/key-concepts/applications.md @@ -1,2 +1,2 @@ -% Applications +% 应用 diff --git a/developer-guide/key-concepts/components.md b/developer-guide/key-concepts/components.md index d4a642b..8a45e9c 100644 --- a/developer-guide/key-concepts/components.md +++ b/developer-guide/key-concepts/components.md @@ -1,4 +1,4 @@ -% Components +% 组件 The Component object, [enyo.Component]($api/#/kind/enyo.Component), is the basic building block of the Enyo framework. Components encapsulate rich behavior and @@ -6,7 +6,7 @@ may be used together as modules to create complex applications. When coding an Enyo application, you'll create many of your own component and control kinds. The information in this document should help you get started. -## The Basics +## 基础 A component is an Enyo kind that can publish properties, expose events, and contain other components. It may be useful to think about components as owning @@ -60,7 +60,7 @@ As the name implies, this is a simple randomized timer component. Its kind is a couple of properties to control the firing frequency. As you can see, it's straightforward to expose properties and events. -## Properties +## 属性 Exposed properties are placed in a `"published"` block and may include a default value. @@ -97,7 +97,7 @@ do this by calling the property-changed method in `create()`. Since the need for initialization can vary from case to case, we leave this to the component writer's discretion. -## Events +## 事件 Similarly, events are placed in an `"events"` block. To fire an event, we call the associated `"do"` method, another convenience provided by Enyo. For @@ -106,7 +106,7 @@ single argument to the `"do"` method--an event object that will be passed along to the event handler. In this case, we send the current time in the event's `time` property. In a moment, we'll see how to handle this event. -## Components in Components +## 组件中的组件 First, though, we'll create another component kind, named `SimulatedMessage`: @@ -135,7 +135,7 @@ Users of the `SimulatedMessage` component do not have to concern themselves with the timer component. Its behavior is encapsulated inside `SimulatedMessage`. All components are considered to be private to their owner. -## Handling Events +## 处理事件 Having addressed the issue of component ownership, we can return our attention to the `onTriggered` event. Notice the string set for the `onTriggered` event @@ -153,7 +153,7 @@ properties convey information about the event. To learn more about events in Enyo, see [Event Handling](event-handling.html). -## Lifecycle Methods: create() and destroy() +## 生命周期方法：create() 和 destroy() Returning for a moment to our `RandomizedTimer` component, you'll notice that it includes the methods `create()` and `destroy()`. The `Component` kind @@ -225,14 +225,14 @@ object subject to garbage collection. For this reason, there is a `this.destroyed` flag on each component. If `this.destroyed` is `true`, the component has been uninitialized and the reference should be removed. -## Summary +## 总结 To review, components are basic building blocks that encapsulate behavior (often by using other sub-components) and expose an interface in the form of methods, properties, and events. -**Additional Reading** +**进一步阅读** -* [Controls](controls.html) +* [控制](controls.html) * [Kinds](kinds.html) -* [Event Handling](event-handling.html) +* [事件处理](event-handling.html) diff --git a/developer-guide/key-concepts/controllers.md b/developer-guide/key-concepts/controllers.md index 5d75333..9e0d38f 100644 --- a/developer-guide/key-concepts/controllers.md +++ b/developer-guide/key-concepts/controllers.md @@ -1,2 +1,2 @@ -% Controllers +% 控制器