YUIConf 2011年初禽流注册现已开放
珍妮·唐纳利在发展 ,2011年9月30日下午09:31 , YUI事件 | 4评论早鸟为YUIConf 2011年注册现在Eventbrite开放!今年的赛事将于11月2-4日在雅虎的伟大的美国校园。 我们很高兴为您带来的全天手培训研讨会(三)由两充满高科技会谈约锐(星期四/星期五)两天之后。 会议注册费$ 75,今年50元的早期鸟类率。 注册讲习班将是会议和细节即将分开。
我们正忙着排队伟大的主题,包括:
- YUI组件的深海潜水,包括拨号和日历
- 在移动环境下的锐
- 测试使用YUI
- 现实世界中的移民故事
- 和很多很多!
会议会议将一如既往,录影,并提供锐剧院和我们的YouTube频道,所有享受。
希望看到你!
(重要内部Yahoos族雅虎员工票,请注册,并提供您的工作电子邮件地址。)
共享和扩展: 书签del.icio.us Digg它! | reddit!
锐3.4.1现住
艾伦拉比诺维奇,2011年9月27日下午2:37 | 开发 | 8评论
锐3.4.1周期短,现已推出基于CDN和下载 ,提前一周多! 下面是这个版本的几个亮点:
- 控制器 , 面板 , 数据表 , 日历 ,和其他模块的数量超过150的 bug修复 。
- 错误修复Y.substitute(),由YUI的贡献萨蒂扬 。
- 日本语言支持日历和控制台 ,YUI贡献礼貌龙一奥村 。
- 杂项微调的文档和例子。
您可以还可以查看锐3.4.1组件的历史文件中指出的所有变化的总结,以及锐3.4.1发展过程中解决门票的完整列表 。 一如既往,我们将非常感谢您提出的任何建议,你可能有缺陷,你会发现在我们的车票数据库。 在YUI 3票数据库,可输入反馈锐3.4.1 。
我们也想宣布,在下一版本锐, DataType.Date,DataType.Number和DataType.XML将被废弃在赞成Y.Date,Y.Number,Y.XML,分别。 向后兼容性将保留一个版本,给大家一个机会切换。
哦,还有一件事:我们的道路上以及在YUI Theater内容迁移到YouTube 。 对于初学者来说,Douglas Crockford的系列讲座“克罗克福德的JavaScript” -字幕完整!
共享和扩展: 书签del.icio.us Digg它! | reddit!
在开源大奖总决赛投票锐
9月26日,珍妮·唐纳利2011 9:21 PM | 杂记 | 1条评论感谢大家Packt出版开源奖提名锐锐现在投票为您最喜爱的JavaScript库!
共享和扩展: 书签del.icio.us Digg它! | reddit!
锐3.4.1 PR1的现在可以在加
9月22日1:35 PM,在2011年由珍妮·唐纳利| 开发 | 1评论3.4.1锐PR1的是现在社区测试和反馈。 这是在雅虎的CDN的http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js ,你可以看到的变化,从检查的门票清单到3.4.1 在释放 。
3.4.1版本将是一个更小的错误修正版本缩短开发周期,定于10月5日去生存。 请文件中的错误和回归的票YUILibrary.com数据库由9月26日(星期一)上午,这样我们就可以确保任何关键的问题是一般发布之前解决。 如果没有迫切的问题报告,我们会早在9月27日发布的3.4.1。
共享和扩展: 书签del.icio.us Digg它! | reddit!
锐:周四年9月第15届营业时间
9月12日,2011 9:58 PM由卢克·史密斯在发展 , 营业时间 | 2评论Satyam的MakeNode扩展
如果你不知道萨蒂扬 ,你必须是新的了YUI。 锐2初期以来,他一直是锐界的支柱。 对YUIBlog他的文章,都是一些最阅读并简称为“如何真正地使用图书馆”的风格内容来源。 如果你看到,萨蒂扬写的,它是值得阅读,最有可能的,重新阅读和书签。
7月,他发布了一个伟大的文章MakeNode部件扩展,旨在简化建立小工具时,使用的一些常见的模式,并使其更容易避免常见的失误。 该模块已被添加到库 ,只是今天早些时候,他张贴了他原来的文章更新 。
这正是我们将要谈论。 的特点,历史和推理。 如果你已经使用的组件基础设施,并在特定的, Y.Widget ,你可能会遇到至少萨蒂扬载,以解决一些障碍MakeNode 。 这将是最好的做法巨星,所以把你的记事本,和自己的经验分享。
时间及详情
我们会在线上周四从上午10时至上午11时PDT。
录音
共享和扩展: 书签del.icio.us Digg它! | reddit!
提交2011年为YUIConf交谈
珍妮·唐纳利,2011年9月12日下午03:48,在发展中, YUI事件 | 评论炫耀的代码,你已经或共享的东西,你已经学会使用YUI工作的工作! 您的建议提交2011年9月23日,星期五,YUI事件(在)雅虎inc.com。 一定要包括:
- 标题
- 描述
- 目标受众
- 你的名字
- 一个简短的生物
雅虎的加利福尼亚州圣克拉拉校园YUIConf 2011年将举行11月3日和4日。 你的介绍应该持续大约45分钟。 我们将有长达15分钟后您介绍Q&A 发表在评论中有任何疑问,或直接发送电子邮件YUI事件(在)雅虎inc.com。
共享和扩展: 书签del.icio.us Digg它! | reddit!
更新时间:“MakeNode”部件扩展
2011年9月12日,在下午03:18萨蒂扬在发展 , YUI 3画廊 | 8评论 在我以前的文章中, 一个YUI 3应用配方 ,我表明方式使用Y.substitute一个非常基本的模板处理器。 从那里生活的想法了,从#YUI IRC频道乡亲的建议,我做了一个Widget的延伸,是对YUI画廊,被称为MakeNode 。 MakeNode是不是一个通用的模板处理器,它不意味着为一体。 另一方面,它紧密集成与YUI 控件的基础类,包括ClassName和事件佣工和国际化。 在这篇文章中,我将采取微调的例子,并修改它从我以前的文章遵循的指导方针和使用MakeNode MakeNode是作为一个画廊组件以及修改微调组件, 例如在这篇文章中,将使用。
扩展你的组件
要加载MakeNode你需要包括在你的模块YUI().use()使用的名称'gallery-makenode'或声明,如果确定通过模块YUI.add()作为上市requires阵列。 然后,延长你的widget,你列出的第三个参数Y.Base.create()像这样:
Y.Spinner = Y.Base.create( “微调”, Y.Widget, [Y.MakeNode] { / /实例成员... }, { / /静态成员 } );
您可以添加任何合适的扩展部件,如WidgetParent,WidgetChild,WidgetStdMode,沿MakeNode等MakeNode增加了两个被用于开发,保护的方法_makeNode和_locateNodes,它会读取从几个静态属性,如果发现。
这个扩展的所有成员是protected或private,因为他们是为了组件的开发和使用这些组件的实施者,谁不应该与他们的困扰。 查看API文档时,记得检查“显示受保护”的选项。
定义模板
你通常会做的第一件事是定义为您的组件的模板。 对于微调,我们的模板将是:
_template: <input type="text" title="{s input}" class="{c input}">“ “<button type="button" title="{s up}" class="{c up}"> </按钮>” “<button type="button" title="{s down}" class="{c down}"> </按钮>” 。加入('\ N'),
通常会被命名为默认模板_TEMPLATE和沿线的其他类的静态属性,如宣布ATTRS 。 如果没有其他明文规定,MakeNode将使用此模板。 模板是纯HTML加上一系列括在大括号中的占位符,每个单个字符(加工代码)和一个或多个参数。 占位符和他们生产什么是:
{@ attributeName}配置属性的值{p propertyName}实例的属性值{m methodName arg1 arg2 ….}给定的方法的返回值。 后跟由空格隔开的参数的方法名称和任何数量的加工代码。{c classNameKey}CSS类名从生成_CLASS_NAMES静态属性(见的_CLASS_NAMES财产下文){s key}字符串从strings属性,子属性使用key。{? conditionvalueIfTrue valueIfFalse很像?:valueIfTruevalueIfFalse} ?:JavaScript的运营商,评估,以valueIfTrue如果条件是truish的,否则valueIfFalse。{1 condition valueIfOne valueIfMore }用于生产的基础上,条件值的单/复数的话。{}任何其他值将处理就像Y.substitute不。
例如, {@ value}将转化到this.get('value') {p value}转换为this['value']
当占位符参数,如{m} {?}和{1}字符串必须括在双引号。 数字,布尔值null null (所有非上市),将被解析到正确的数据类型。 占位符可以嵌套。 {?}和{1}占位符通常会包含嵌套的占位符为条件,很可能对他们的价值观,例如:
{数量} {1 {数量}“单位”,“单位”} 如果该属性的qty是1,它会评估"1 unit" ,2个或更多,它会返回"2 units"等。 处理零一个更详细的版本将是:
{? {数量}“{数量} {1 {数量}”单位“,”单位“}”,“无”}
请注意,必须在其自己的一套引号括起来,处理内占位符,如果一个字符串的结果。
包括一个双引号内的引号的字符串,请使用\\"因为JavaScript解释一个单一的一个丢弃它之前,它得到到MakeNode只允许使用双引号。MakeNode不eval() eval eval()的双反斜线解析器是有限的,但安全。什么,但数字, null ,布尔和双引号字符串将被忽略。
{?}占位符也是得心应手地使用复选框和单选按钮。 它可以用来产生字符串"checked"根据真值的处理指令的代码如下。 因此, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/>将产生显着的复选框,如果getLength方法返回什么,但零。
为{c}占位符,我们需要定义有1 _CLASS_NAMES财产。
进一步占位符,可以添加到MakeNode加入到他们_templateHandlers哈希。
_CLASS_NAMES财产
沿着与ATTRS和_TEMPLATE静态属性,我们可以定义1 _CLASS_NAMES静态属性,它指向一个字符串数组。 这些字符串都将被用来生成一个类的。 因此_CLASS_NAMES: ['input']会产生的className "yui3-spinner-input" 。 那些类名存储实例属性this._classNames 。 {c input} "yui3-spinner-input" {c input}上面的模板中的占位符将被替换。 我呼吁在列出的字符串_CLASS_NAMES ,如'input' ,“的className 键 ”,因为它们可以作为一个重要参考实际的className或包含这些类名的元素使用,稍后我们会看到。
你可以使用_CLASS_NAMES属性来生成任意数量的类名,你是否在模板或不使用他们。 你仍然可以达到从内部this._classNames这些额外的类名。 使用yui3前缀NAME的静态属性的价值,产生的className转为小写,然后在给定的的字符串_CLASS_NAMES (这一次将不会变成小写),全部由连字符分隔。 _classNames哈希也将包含为boundingBox类名和的contentBox ,下"boundingBox"关键的第一下第二"content"键。 部件分配到boundingBox NAME在继承链中的每个类的属性的值派生的类名,开始yui3-widget 。 MakeNode存储到this._classNames只有最顶级的className boundingBox 。
MakeNode,如果WidgetStdMod模块被加载,也会产生项的HEADER , BODY和FOOTER节与那些相同的密钥,这也是在同一模块中定义的常量。
如果一个组件是几个层次,从Widget一样, SuperSpecialSpinner从的继承SuperSpinner从继承从继承Spinner Widget, _CLASS_NAMES this._classNames Spinner Widget,如果其中的任何或全部定义_CLASS_NAMES属性,MakeNode将产生所有的类名,并存储在他们this._classNames 。 你不必包括在每个级别的名字已经宣布,在以前的水平。 事实上,它是更好的,你不会因为在每个级别的类名,使用该级别的属性值的NAME 。 因此, SuperSpecialSpinner , {c input}仍将导致的"yui3-spinner-input"和"yui3-superspecialspinner-input" ,所以它会保持你的CSS文件仍然有效。
{}占位符
构件有strings配置属性定义,虽然它不与任何值初始化。 此属性是为了保存字符串(或通过屏幕阅读器,阅读)的用户是可见的。 重要的是,你永远不包括直接在模板中可见字符串。 这是不是的MakeNode的要求 - 在所有它从来就不是一个好主意。 应始终被视为或读取用户的所有字符串放置在strings属性。 strings属性包含了每一个人的文字是由位于其关键的哈希。 微调器组件有以下字符串,你可以看到在上面的模板使用。
字符串:{ 值:{ 输入:“按箭头/向下键轻微的增量,页/主要增量。” 了起来:“增量” 下来:“减” } },
这样做的最好的部分是组件可以使用您的组件的开发本地化为其他语言很容易。 当创建一个微调的实例,你可以这样做:
mySpinner =新的微调({字符串:Y.Intl.get('微调')}); 以这种方式设置的配置属性strings取代与使用先前定义的语言,从语言资源文件的默认strings值。 {s}占位访问存储在字符串strings属性,无论是默认的或翻译的,如果设置。 {s xxxx}占位符几乎是一样使用{@ strings.xxxx}除了本地化替换字符串可以有占位符,这将进一步处理。 这是翻译的重要,因为语法为了从语言到语言不同,这使得改述的文字,包括其占位符,以适应任何语言。 使用{@ strings.xxxx.yyyy.zzzz}这将允许访问嵌套更深下来的字符串,并防止进一步的替换字符串也可以访问。 大括号可以包含在一个文本使用{LBRACE} {RBRACE}作为占位符。
使用在renderUI _makeNode
我们使用模板来创建我们的组件的标记。 这样做,我们可以调用MakeNode的_makeNode方法,是这样的:
renderUI:函数(){ 。this.get(“contentBox)追加(this._makeNode()); },
这将填补我们的部件在contentBox处理模板的标记。 _makeNode方法返回一个实例Y.Node可追加或插入任何地方,或只是为以后使用而举行。 它不返回一个字符串,它产生一个Node实例。 (如果你需要一个字符串,而不是一个节点,你可以使用的_substitute方法,这就要求你在模板中通过。)
_makeNode方法有两个可选参数:一个参考模板和对象,以填补在占位符,,作为Y.substitute 。 在我们简单的微调例如,有一个单一模板的整体部件,但其他部件可能需要位和几个模板件。 在这种情况下,你通常会致电_makeNode的主要部分没有参数,调用不同的模板,再次填补多余的部分。 例如包含此renderUI方法:
renderUI:函数(){ this._makeNode的fieldset =(); this.each(函数(项目){ fieldset.appendChild(this._makeNode(MultipleTemplates.RADIO_TEMPLATE项)); }); 中this.get(“contentBox)追加(字段集); }
_makeNode第一次调用返回一个Node实例存储在变量中fieldset 。 样品组件也延伸与Y.ArrayList所以RADIO_TEMPLATE将被从存储在数组列表中的项目和所产生的附加 的节点值填充fieldset前最后追加到contentBox 。 如特殊的占位符{@} {p}仍将主要对象的属性或属性。 正如Y.substitute将嵌套的项目将被处理。
_locateNodes方法
MakeNode进一步提供_locateNodes方法,将尽力找到所有的元素在声明的类名_CLASS_NAMES 。 找到特定的元素,您可以通过任意数量的className键,否则, _locateNodes尝试他们所有。 对于每个发现的className的每个元素中, _locateNodes会产生一个私人的实例的属性,使用下划线前缀键的名称和"Node"后缀。 因此,我们飞旋例如, _locateNodes会生成的属性_inputNode , _upNode和_downNode 。 如果有多个元素具有相同的className, _locateNodes将返回一个引用到他们的第一。 如果一个元素没有被发现,没有变量将被创建。
在微调组件,我们使用_locateNodes后创建的标记:
renderUI:函数(){ this.get(CBX公司)追加(this._makeNode()); this._locateNodes(); },
_EVENTS的静态属性
一个进一步的属性可以被定义沿线_TEMPLATE和_CLASS_NAMES ,是_EVENTS 。 _EVENTS将包含类名键,每个包含一个事件的类型和方法来处理它们的哈希散列。 这是更好地用一个例子来解释:
_EVENTS:{ 输入:'变',/ /调用this._afterInputChange boundingBox的: { “钥匙”,类型: FN:“_onDirectionKey',/ /调用this._onDirectionKey 参数:(Y.UA.opera“下来:”:!“记者:”)+“38,40,33,34” }, “的mousedown'/ /调用this._afterBoundingBoxMousedown ] 文件:“的mouseup',/ /电话this._afterDocumentMouseup中, Ÿ:'broadcastingObject:someEvent'/ /调用这个[的“_afterYBroadcastingObject:someEvent的”] },
_EVENTS是任意数量的条目对象(哈希)。 属性的名称,即哈希键,确定节点的事件,我们会听取。 他们是相同的className定义键_CLASS_NAMES 。 有一些额外的特殊功能键:
"boundingBox"参考边界框本身。"document"是指包含此部件的文件。"THIS"指的widget本身"Y"指YY实例。
如果部件已经WidgetStdMod以及延长,钥匙HEADER , BODY和FOOTER将参考这些部分,因为他们将可在_classNames哈希。 JavaScript并不需要被引用的键,如果他们是有效的标识符,因此上述没有被引用。
处理后_EVENTS renderUI , bindUI和syncUI方法,被称为widget的预期,因此已经插入文档正文内"document" _EVENTS财产,否则, "document"标识将失败。
对于每个元素有一个事件标识符或事件标识符的数组。 可确定事件由事件来听或进一步的细节的对象的类型。 MakeNode默认情况下,将使用一个名为使用方法监听器"_after"前缀,由它的第一个字符的元素标识符资本化与资本的第一个字符的事件类型。 上面的代码块显示每个事件调用的方法。
事件标识符,也可以是一个属性的对象type , fn args args 。 该type是强制性的,并表示正在监听的事件类型。 fn属性给出的方法,将收听到的事件,从而避免了自动命名的名称。 由于_EVENTS是一个静态属性,它有没有上网this因此它不能采取实际的参考方法,只是它的名字。 args参数可以用来传递key事件,这需要一个键规范,如与来电的进一步论据。
MakeNode将使用Node.delegate听内的元素的事件boundingBox ,而它会使用Node.after听从事件boundingBox和笔体。 它将使用this.after听下THIS关键和Y.after根据上市听众Y关键事件。 所有事件都听过因为他们是为了使部件响应事件的事件侦听器后 ,不过滤的对象,让他们在任何情况下,这些事件可以被阻止或停止触发的行为。 (注:听任何嵌套元素的key事件,仅适用于版本3.4.0pr1及以上,因为代表团的key事件是之前所有其他功能的工作以及与以前的版本。)。
_EVENTS声明是累积性的,当组件从一个继承。 继承链中的每个类都会有其自己的_EVENTS声明分开处理。
_ATTRS_2_UI的静态属性
活动是双向的,从UI组件从组件到UI。 首先是处理由_EVENTS属性。 然后有由属性值的变化,必须体现在用户界面中引发的事件。 正如我在前面的文章,有任何改变配置属性的辅助疗效时提到,他们应改变事件监听器处理,而不是可选的setter方法的属性,它应该只处理正常化设置的值。 UI应该反映配置属性的状态,首先在syncUI时被初始化,然后对每一个属性更改事件。 对于后者,我们需要附加一个事件监听器,我们通常会在bindUI做。 部件已经提供了一种机制,使这个简单,我在上一篇文章的评论。
部件使用,它包含一个与另外两个性质,对象_UI_ATTRS SYNC和BIND实例属性_UI_ATTRS 。 这些是一个数组,列出最初同步时的配置属性的名称,然后听取以反映当前值保持UI。 部件预计每个条目有一个与之关联的方法,由前缀属性名后的第一个字符转换为大写有骆驼的情况下适当的方法名称的属性名称的命名_uiSet 。 因此,如果"value"在任何上市_UI_ATTRS阵列( SYNC或BIND )的Widget希望找到一个_uiSetValue方法。 这种方法将收到两个参数的value设置和src的变化。 这是为我们的微调代码_uiSetValue方法:
_uiSetValue:功能(价值,SRC){ 如果(SRC ===界面){ 返回; } this._inputNode.set(值,this.get(格式化)(值)); },
你在这段代码中看到对应的字符串常量的所有大写字母标识符宣布在其他地方,让YUI压缩到更好地完成其工作。 ,基本上,该方法设置的value在HTML属性<input>中的新值集,被格式化后。 被由_locateNodes提供参考文本框。 src参数的初步检查,看看是否设置为字符串值'ui' 如果是这样的,将采取任何行动。 这是为了避免无休止的循环。 如果用户在输入框中输入的东西,其价值将进入value的配置属性,然后将火的事件valueChange ,会得到_uiSetValue呼吁,如果不加以控制,然后去改变输入框的值,将再次引发整个过程。 因此, _uiSetValue ,如果我们知道的变化,从UI,我们什么也不做,所以打破循环。 然而,这需要另一块代码的其他地方。 在DOM事件监听器,当我们设置的配置属性,我们使用的第三个可选参数设置,像这样:
_afterValueChange:功能(EV){ this.set(值,ev.newVal {SRC:用户界面}); }
这是我们确保,因此,从用户界面的变化标记,然后检查相同的标志,以避免环路。 不要使用标识src时,设定值的属性,而不是source这将不被认可。
这一切说,我还没有谈到在本节的标题中提到的静态属性_ATTRS_2_UI 。 正如我在以前的文章显示评论(通过我在他们的失误),确保正确列出的所有属性影响的UI是有些凌乱。 你永远不应该初始化_UI_ATTRS以来从头部件已经列出了一大堆的属性和那些会丢失。 你有新的属性名称串连在现有的,这有点很难记得如何做是正确的。 为了简单,MakeNode将读取静态属性_ATTRS_2_UI并为你做什么,串联。 它将连接所有这些清单,以便从继承链中的每一类,每一级,每一类可以处理自己的属性。 在微调,我们有:
_ATTRS_2_UI:{ BIND的:价值, 同步:VALUE },
MakeNode将接受的名称数组或一个单一的属性名称,在这种情况下。
问题自然会产生,为什么两份名单,结合其他同步? SYNC使用第一时间解决,后renderUI和bindUI方法,如果它们存在,被称为中列出的那些而syncUI前BIND将势必为以后的变化,相应的属性。 SYNC阵列往往比少BIND列表项和,这是因为组件的模板可能已经有很相同的配置属性的默认值,有没有必要做一个初步的同步。 因此,如果的value配置属性的默认值是一个空字符串的<input>在模板中的元素没有value属性,那么有没有必要在初始化同步。
中列出的属性BIND将有其_uiSet Xxxx任何顺序方法,可以在任何顺序设置属性。 中列出的属性SYNC将在它们上市之前,他们传承祖先的顺序调用一次,因此如果一个依赖于另一个(他们不应该),顺序可能很重要。
MakeNode将检查这些阵列中的任何重复的条目。 如果任何出现的,它意味着已经处理此属性和任何新的声明将最有可能超越我们的组件1类继承_uiSet Xxxx为它的处理程序。 顺便说一下,MakeNode重复的条目,在_CLASS_NAMES ,这也可能导致在一些冲突,但并非所有的情况下,还检查。 MakeNode会写消息到任何这样的错误日志。
_PUBLISH财产
最后,的_PUBLISH静态属性将列出这些事件有公布。 它包含一个哈希使用的名称作为键的事件和对象的配置属性,其值的字面。 它会公布所有的继承链中的任何此类财产中列出的所有事件。 相同的事件名称可以发表在一个类中,在任何类从它继承,这将使后来者的配置属性覆盖那些在旧的。 例如,你可能想使现有的全球赛事转播。 正如与_EVENTS属性,因为_PUBLISH是一个没有访问静态属性,指定功能时,它是该方法的名称,作为一个字符串,需要给予。 this
结论
MakeNode提供了一个非常简单的模板处理器,功能高度集成与Widget的基础类。 它也提供了辅助的方法来创建类名在模板中使用,并使用这些名称来查找和参考节点。 它还提供了挂接到由UI组件本身所产生的事件和与之相关的每一个方法的手段。 它所有这些东西,同时注意尊重直线上升Widget和任何级别的类,你可以定义继承链。
它不提供绝对的所有可能性,但涵盖了他们良好的范围。 然而,它并不妨碍你增加额外的功能。 你可能很少有写bindUI或syncUI方法,如果你使用由MakeNode提供胶水,但你可以这样做,因为MakeNode不使用它们。
作为奖励那些有耐心去阅读,到目前为止,我还修改安东尼Pipkin的图库组件的按钮集和一个手风琴和TimeSpinner的组成部分,所有可用的画廊 。
共享和扩展: 书签del.icio.us Digg它! | reddit!

