随笔分类 - enyo
1
摘要：ButtonsOnyx提供了种类丰富的button。本文将介绍最常用的几类button。onyx.Buttononyx.Button直接从enyo.button继承而来，提供同样的基本功能。{kind:"onyx.Toolbar",components:[{kind:"enyo.Button",content:"enyo.Button"},{kind:"onyx.Button",content:"onyx.Button"}]}当点击onyx.Button时会触发ontap事件，你可以指定处理方法
阅读全文
摘要：Drawersonyx.Draweronyx.Drawer是根据open属性来显示或隐藏的control。Open属性是默认为true（可见）的boolean类型。Drawer的显示和隐藏滑动动画方向默认由orient属性决定。Orient的默认值是“v”，表明drawer沿着垂直方向open和close。要创建水平方向的drawer只需将orient属性设置为“h”。从enyo2.1开始，onyx.Drawer多了一个animated属性，将该属性设置为false可以取消滑动动画。VerticalDrawers一个实现了垂直drawer的例子：enyo.kind({name:"VD
阅读全文
摘要：Panels enyo.Panelskind用来满足常用的多种应用布局。使用enyo.Panels，control可以使用carousel（旋转木马，一组折叠的panels），在panels之间消失切换的卡片布局或一个grid网格。Behavior任何一个enyo的control都可以放在enyo.Panels内部，方便起见我们把这些control称为panel。在enyo.Panels的一组panel中，只有一个是活动的。可以通过setIndex方法设置活动的panel。每次设置activepanel真正的panel布局都会改变，所以新的activepanel拥有最高的优先级。如果layo.
阅读全文
摘要：FittablesFittable包帮助你创建布局更合理的使用可用空间（app都有这样的布局需求，但使用以前的web技术很难做到这一点）。个人观点，现在移动Web开发框架中有很多都支持自适应布局，如senchatouch，但是enyo的这种方式在创建复杂的页面时依旧很容易实现。FittableColumnsandFittableRowsFittableColumns和FittableRowscontrol使你可以定义视图的各子部分的行列布局。在一个view中你可以使用可用空间来扩展一个child，而它的兄弟保留原来的大小样式。要标记一个childcontrol的大小范围，须将它的fit属性设置
阅读全文
摘要：Lists 大多数应用需要展示一组数据。 创建一个拥有大量数据项的界面并且在渲染滚动方面表现良好的跨平台listcontrol是很有挑战性的。由此，enyo提供了两种处理list数据的策略。当应用需要处理密切相关的少量数据项目时（10~100）应当使用enyo.Repeater。当应用需要处理大量的相对简单的数据时（百万级），应当使用enyo.List。Repeater enyo.Repeater是一个简单的listcontrol。Repeater重复内部包含的controlset。Repeater组件都复制创建的item项，隐藏在item的control中。每个control都可以放在...
阅读全文
摘要：回到杭州后开始找工作同时继续更新enyo官方入门教程，将剩下的Building Apps部分翻译完，这部分都是关于enyo各属性和组件的简单使用，把我学习和翻译时用到的demo拿出来分享一下方便新人学习时参考一下，下载链接https://skydrive.live.com/redir?resid=D2B942A93F4E3307!240&authkey=!AHUmFno9K2pdd0c，以后有时间的话再放一些复杂点的demo。另外今天在官方教程目录里突然发现新增加了一篇关于使用enyo开发win8 App的教程，需要win8和VS2012，这篇就不翻译了吧。enyo.Scrollere
阅读全文
摘要：User InputNormalized User InputEnyo提供了一套规范的跨平台的事件，以使开发者的应用使用同一套事件处理代码即可运行在各种手机和平板平台上。Normalized Input Events 在Enyo核心包中，dom(drag.js,gesture.js) 和(gesture.js,msevents.js,touch.js)制订了标准事件。 下面的标准事件是由DOM事件合成的：Down--指针被按下时产生Up--当指针释放时产生Tap--指针按下后释放产生。底层DOM元素同时收到down和up事件Move--当指针移动时产生Enter--当pointer进入以D..
阅读全文
摘要：从本篇开始，不再按Enyo官方教程的顺序翻译，先翻译一些我还没有弄明白的部分---与服务器通信、触摸事件和与phonegap的集成。官方教程的顺序是布局方法、通用UI的Control类的使用、主题、国际化、debug方法，然后才是现在翻译的这部分。 在本文中，我们将看到基于Enyo框架的app如何使用传统的web通信方法和在特定情况下的WebService通信方法。 在Enyo中，通过enyo.Ajax或enyo.WebService发送Web请求。enyo.Ajax直接继承自enyo.Async---处理异步操作的基类。enyo.WebService使用enyo.Ajax或enyo....
阅读全文
摘要：PublishedPropertiesenyo.Objectenyo.Object实现了enyo框架属性的公共方法（前面有一篇简单介绍enyo.Object类源码的博客）。published属性定义在enyo.kind内部的published表中。所有声明为published的属性都自动添加了get和set方法。Published属性的set方法都会触发<propertyName>Changed的可选方法。 在下面的例子中，myValue成为“MyObject”原型的常规属性，并继承了set方法： 1 enyo.kind({ 2 name: "MyObject"
阅读全文
摘要：EventHandling Enyo采用了消息传递策略来间接地在不同组件之间通信。我们把这些信息作为事件，这与常见的DOM用法一直。一般事件按照child-parent顺序在组件树中冒泡。在使用dom包时，DOM事件和自定义事件是一致的。 使用事件的关键在于component组件设计的封装。大部分时候，一个component的children不应当知道他们的父类。所有child发出的事件应当由父类决定是否处理而不应在child中调用父类的方法处理事件。 虽然由child向parent发送事件是enyo的标准，但在一些情况下这种实现模式效率低下且代码笨拙。因此enyo还提供了另一种通信方法...
阅读全文
摘要：ObjectLifecycleLifecycleMethodsinEnyoATrivialKindEnyo的kind使用常规的js原型。一个kind有简单的生命周期。1 var MyKind = enyo.kind({2 kind: null, // otherwise it will default to 'Control'3 constructor: function() {4 // do any initialization tasks5 }6 }); 现在MyKind是一个可以使用new方法创建实例的函数了。MyKind函数是一个调用构造函数的...
阅读全文
摘要：CreatingKindsenyo.kind enyo.kind是enyo框架生成kind的方法。一个kind是一个拥有高级特性(如原型链)的原型构造函数。 Kind生成器的扩展能力包括插件系统，构造函数允许执行自定义的子类操作。 在本片文章中，我们将会看到当enyo.kind方法被调用时会发生的几件事。要学习调用过程中发生什么你需要一个实例化的object，参考ObjectLieftcycle。SpecialPropertyNames 通常，定义在inProps对象的属性都是直接拷贝到生成原型中，但是一些属性名会进行特殊的处理。一些特殊属性中例子：Name：在全局命名空间中定义的构造...
阅读全文
摘要：CreatingControlsenyo.Control enyo.Control是控制DOM节点的组件。control通常都是可见的,用户经常与他们直接交互。诸如按钮和输入框显然是control，但是在enyo中control可能变得像整个应用程序一样复杂。TheBasics在下面的例子中，我们定义了一个名为Circle的control，稍后它会用在一个名为TrafficLight的control内部： 1 enyo.kind({ 2 name: "Circle", 3 kind: "Control", 4 published: { 5 color:.
阅读全文
摘要：enyo.Object类是Enyo的基类，它实现了框架属性的一些公共方法。官方API文档给出了该类中几个方法的名称、参数和作用。destroyObject: function(inName) 销毁名为inName的对象getProperty: function(n) 返回名称为‘n’的属性的值setProperty: function(n, v) 将名称为‘n’的属性赋值为‘v’log: function() 向控制台发送log信息warn: function() 和log类似，但是使用的是控制台的warn方法（如果存在该方法）error: function() 和log类似，但是使用的是..
阅读全文
摘要：CreatingComponents enyo.Component对象是组成enyo的基本构件。Components封装了丰富的特性，可以作为modeles组合起来使用,创造复杂的应用。当编写enyo应用时，你通常会创建大量自己的component和controlkinds。TheBasics 一个组件是一个Enyo的kind，它可以发布属性、绑定事件、包含其他组件。可以把组件看做是一个包含其他组件、输入（方法和属性的set方法）、输出（事件和属性的get方法）的集合。一个组件控制自己的content并将信息以事件的形式发送给它的父组件或拥有者。下面是一个示例：enyo.kind({nam..
阅读全文
摘要：写在前面和前一篇一样，这篇翻译转载自：http://benluo.tumblr.com/post/20338758482/post-onyx-tutor，也是“偶尔思考”的博客。英文原文：https://github.com/enyojs/enyo/wiki/Tutorial-2。后面我会继续翻译，翻译的效果么肯定没有转载的这两篇这么好，如果有错误欢迎大家指出批评。我的enyo交流群：260786735，欢迎交流。扩展教程：增加 Onyx 和 布局 在第一个教程中，我们只使用了 Enyo 2.0 的核心库。这个教程上线后，我们发布了 称为 Onyx 的控制和风格集。让我们用这些控制来更新第一.
阅读全文
摘要：写在前面这篇翻译转载自：http://benluo.tumblr.com/post/16805078591/enyo-2-0。我自己也翻译了一下这一部分，后来在学习的过程中发现了“偶尔思考”的这篇翻译，对比一下发现人家比我翻译的通顺易懂多了，于是直接把他翻译的教程转过来了。Enyo 2.0 教程Enyo 2.0 教程欢迎来到 Enyo 2.0! 如果你在看本教程，你可能希望看到 Enyo 能怎样帮助你开发网络软件。 我们就用几步来演示如何开发简单的应用，该应用显示不同的 Twitter 搜索结果。空白板 作为开始，我们需要在你的桌面创建一个应用的文件夹。这个文件夹将保存你应用的 HTML...
阅读全文
摘要：开发环境 作为一个Enyo开发者，你可以自由选择开发平台和编码工具。你可以使用windows、mac、linux等环境，只需要一个文本编辑器来编写enyo代码即可。所有的文本编辑器都满足这一需求，包括免费的产品如windows上的notepad或者mac上的textwrangler。 在你的开发过程中可能需要web浏览器来测试代码。尽管测试时可以直接从本地文件系统加载文件到浏览器，我们强烈建议你从http服务器访问应用。这种方法具有多种优势，包括从远程设备进行测试的能力。 如果你现在没有可运行的本地web服务器，你可以非常方便的安装Apache/MySQL/PHP软件包，例如wind...
阅读全文
摘要：前几天写了一篇介绍关于Enyo框架结构的博客，今天开始翻译enyo的官方入门教程，因为本人英语水平不高而官方的英文教程语法和用词又比较晦涩，翻译的内容可能有差错，欢迎大家批评指出，括号内的内容为我自己的理解不保证正确性。另外如果有人学习enyo框架、翻译官方API、阅读源码或有什么学习体会，欢迎交流。 今天翻译官方入门文档的第一部分Getting Started。 第一部分：Enyo Tour 欢迎学习Enyo。本篇文档将介绍enyo框架的组织结构和每一部分的功能，希望读者能通过本文开始学习Enyo。 解压后的Enyo目录： enyo---核心包（上一篇博客对enyo的s...
阅读全文
摘要：enyo是惠普开发的开源框架，原来是为WebOs设计的，后来开源支持各种平台和浏览器，设计方向转为手机Web应用，跨平台、轻量级、易扩展、简单易学，就是惠普的文档写的太烂，看文档学习着实费力。 enyo官网：http://enyojs.com/ enyo在github的地址：https://github.com/enyojs 到2013年1月4日，enyo最新版本为2.1.1版。enyo自2.0之后比较稳定，可以拿来开发网站或应用了。下载enyo后解压，进入enyo\source目录下，这里是enyo的核心。 ajax提供了ajax异步请求、Jsonp、WebServic...
阅读全文
1