前几天写了一篇介绍关于Enyo框架结构的博客,今天开始翻译enyo的官方入门教程,因为本人英语水平不高而官方的英文教程语法和用词又比较晦涩,翻译的内容可能有差错,欢迎大家批评指出,括号内的内容为我自己的理解不保证正确性。另外如果有人学习enyo框架、翻译官方API、阅读源码或有什么学习体会,欢迎交流。
今天翻译官方入门文档的第一部分Getting Started。
第一部分:Enyo Tour
欢迎学习Enyo。本篇文档将介绍enyo框架的组织结构和每一部分的功能,希望读者能通过本文开始学习Enyo。
解压后的Enyo目录:
enyo---核心包(上一篇博客对enyo的source目录做了简单介绍)
lib---enyo的插件库
onyx---UI组件库,对enyo的基本组件在样式布局等方面进行了加强
layout---布局组件库
canvas---创建HTML5 Canvas画布的组件库(Enyo是为数不多的支持Canvas的移动Web开发框架)
extra---额外的一些实用工具组件
fu---这里面只有两个button和tab的简单示例,官网上没有提到这个文件夹和它的功能。
Enyo
框架的核心,也就是enyo文件夹下的源码,提供了很多有用的特性使我们可以使用模块化的方式开发复杂的应用:
对象的封装、继承和所有权的层次结构 - Kinds和Component(这是enyo中的对象)
视图和DOM部件模型 - UiComponent和Control(enyo中视图节点一般定义在Control中)
事件路由 - 事件发送机制和信号Signals
服务模型 - Async和Ajax
基本的HTML组件 - Base UI,在enyo中可以使用tag等将Control设置为基本的HTML节点,如div等,以保持enyo的灵活性,易用性和轻量级
触摸 - 提供触摸滚动和手势模拟
包装载 - enyo.depends()和package.js指明应用依赖的文件和包(js文件夹)
这些特性相互独立,可分别独立使用。下面介绍的是enyo的可选包,它提供了很多样式、布局、服务等方面的插件。
Onyx
Onyx类库为创建移动应用提供了很多漂亮的UI组件。这个类库还在不断扩展,现在包含以下部分:
Buttons(普通按钮、图标按钮、单选按钮、开关按钮等)
Inputs(文本输入框、文本域、富文本域等)
Popups 弹出框
Header bars 标题栏
Group boxes 分组框
Progress bars 进度条
Sliders 滑动框
现在可以到Onyx Sampler看一下Onyx的效果。
Layout
Enyo组件可以使用纯HTML/CSS来布局,也可以使用简单易用的Layout库完成一些常用的布局效果
Fittable Row and Columns,自适应的行/列布局
Lists,list布局
Panels,面板布局
你可以在这里阅读布局选项。
Canvas
Enyo的对传统UI的封装模型同样适用于结构化的Canvas组件,它提供了一个常见canvas基本组元的抽象类库,这个类库中的Enyo组件有:Canvas和CanvasControl,Shapes(Circle,Rectangel),Text,Image等。你可以轻易地扩展这些组件创建复杂生动的应用和优秀,例如Enyo提供的Pirate Pig canvas示例应用。
Extra
这个类库包含了一些实用组件,Enyo的很多示例和demo都用到了组件。
BootPlate
这是Enyo的一个模版,包含了开发Enyo应用所需要的所有的类库和文件,主要包括当前版本的Enyo和lib中的Onyx和Layout部分。
Learn More
下面是一些帮助你继续学习Enyo的建议:
如果想一步一步跟着教程学,继续tutorials。
要尽快开始写Enyo应用,请看Bootplate部分。
要学习更多关于Enyo应用结构的东西,请阅读Getting Started。
要查看文档的完整目录,请看Enyo documentation。