写在前面
和前一篇一样，这篇翻译转载自：http://benluo.tumblr.com/post/20338758482/post-onyx-tutor，也是“偶尔思考”的博客。英文原文：https://github.com/enyojs/enyo/wiki/Tutorial-2。后面我会继续翻译，翻译的效果么肯定没有转载的这两篇这么好，如果有错误欢迎大家指出批评。我的enyo交流群：260786735，欢迎交流。
扩展教程：增加 Onyx 和 布局
在第一个教程中，我们只使用了 Enyo 2.0 的核心库。这个教程上线后，我们发布了 称为 Onyx 的控制和风格集。让我们用这些控制来更新第一个教程，让应用有好的外观 和体验。
装载 Onyx
Onyx 是一个与 Enyo 独立的库，所以它必须与它自己的脚本和链接标签。
Onyx 通常是按库来载入，也就是说在 package.js 里加入 onyx 引用。我们更新 第一个教程中的 package.json 文件如下：
enyo.depends( "$lib/onyx", "$lib/extra/jsonp", "Tweet.js", "OnyxTwitterSearchApp.js" );
目前 Onyx 与 Enyo 紧密同步，所以我们更新链接为 2.0b3 版。
更新应用
为了让 Onyx 风格正确显示，你需要在应用对象中增加 “onyx” 类。你可以用 下面这样一行
classes: "onyx",
加在你的应用 kind 定义中。如果你已经用了其它类，只要把 “onyx” 加在列表末尾 即可。
TwitterSearchApp kind 有一个像下面这样的组件块
components: [ { tag: "input", name: "searchTerm" }, { tag: "button", content: "Search", ontap: "search" }, { tag: "div", name: "tweetList" } ], 按键和输入栏是纯 HTML 控制。要把这些转成 Onyx 相等的控制，需要删除标签属性并 使用适当的 Onyx kind 名，只要加入 kind 名，让这个块如下所示
components: [ { kind: "onyx.Input", name: "searchTerm" }, { kind: "onyx.Button", content: "Search", ontap: "search" }, { tag: "div", name: "tweetList" } ],
用 Onyx 控制来添加特性
本应用的头等问题之一是在搜索栏里没有提示告知用户如果使用。 onyx.Button 是基于 enyo.Button，我们可以使用占位的属性，该属性可以 在用户没有任何输入的时候以灰色文本的方式在输入栏显示提示信息。
{ kind: "onyx.Input", name: "searchTerm", placeholder: "Search on Twitter" },
然而更好的方式是使用搜索按键。在我们的 OnyxSampler 应用中有这样一类的例子， 我们从那里复制并做一点修改。
components: [ {kind: "onyx.InputDecorator", components: [
{kind: "onyx.Input", name: "searchTerm",
placeholder: "Search on Twitter", onkeydown: "searchOnEnter"},
{kind: "Image", src: "search-input-search.png", ontap: "search"} ]},
{ tag: "div", name: "tweetList" }
],
...
searchOnEnter: function(inSender, inEvent) {
if (inEvent.keyCode === 13) {
this.search();
return true;
}
},
InputDecorator 类知道如何把 onyx.Input 对像与其它控制组合成一个单一框架。 对于搜索按钮用的 PNG 文件，我们从 OnyxSampler 应用中复制一个到本地。
我们把 search 方法同时钩连在点击查找图标和 在输入框输入时，对于第二个，我们是拦截onkeydown 事件并查找keyCode 值等于13。返回“真”，那样可以 防止继续处理“键按下” 事件。
把搜索放在一个漂亮的盒子里
搜索盒在页顶看着很孤单，把它放在框内会显眼。Onyx 提供了一些漂亮的组选项。 我们用 onyx.ToolBar 类给应用一个可见的名字，在 名字旁一些空白处放置搜索盒。这需要把输入控制包进一个新类，如下：
components: [
{kind: "onyx.Toolbar", components: [
{content: "Twitter Search", style: "padding-right: 30px"},
{kind: "onyx.InputDecorator", components: [
{kind: "onyx.Input", name: "searchTerm",
placeholder: "Search on Twitter", onkeydown: "searchOnEnter"},
{kind: "Image", src: "search-input-search.png", ontap: "search"}
]}
]},
{ tag: "div", name: "tweetList" }
],
修复工具条
现在应用有一个大问题。如果你得到的结果超过页面，滚动看全部内容时会遮盖 工具条。我们用 layout/fittable 库来修复这个问题。
在 package.js 中加入 “$lib/layout/fittable” 引入这个方法。layout 文件夹 实际保存不同布局库的集合，但目前只需要公开 fittable.
fittable 背后的理念是你有一组的行或列，大部分项目有自己自然的尺寸，但有一个 扩展到剩余的空间。那个扩展的项目用有 fit:true 属性的标签。
对于我们的应用，把基础 kind TwitterSearchApp 从enyo.Control 改为enyo.FittableRows。我们还可以增加属性 layoutKind: “FittableRowsLayout” 并保留enyo.Control 类型。在插件流行的时代，Enyo 控制有 layoutKind 属性作为增加布局行为的一个方法。在表面现象背后是 enyo.FittableRowsLayout kind 在工作，它测量所有它的子对象的尺寸，然后调整”fit” 对象来使用剩下的空间。
我们同时把 tweetList 包在 enyo.Scroller 类型中，并给它一个 fit: true 属性。这样可以让用户根据设备使用滚动条 或触摸屏滚动 tweets 列表的全部。
{ kind: "enyo.Scroller", fit: true, components: [
{ tag: "div", name: "tweetList" }
]}
为了 fitting 行为能工作，enyo.FittableRows 控制需要填充一定量的空白。对于 应用程序，它能工作是因为当控制渲染成 <body> 标签时，Enyo 自动添加 enyo-document-fit 类到 body 并把 enyo-fit 和 enyo-stretch 类到应用程序的 div，该 div 再插入 body。如果你在应用程序的某项中使用 fittable 布局，你需要给控制明确的宽度和高 度风格或有其父控制的尺寸。一个常见的错误是让 enyo.FittableRows 或enyo.FittableColumns 成为你 kind 的子类， 让 fit:true 控制的尺寸为0个像素。
总结
你可以在http://enyojs.com/tutorial/onyx/search.html 找到更新的应用。 和 原始版 相比，你可以 看到好的控制和风格如何真正让应用更具功能性并且更易使用。