Comments on: Creating Custom Modules with YUI Using the YUI Module Control http://yuiblog.com/blog/2007/12/19/custommodules/ News and Artilces about Designing and Developing with Yahoo! Libraries. Fri, 18 Jul 2008 23:18:30 +0000 http://wordpress.org/?v=2.3.3 By: Cyril Doussin http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305953 Cyril Doussin Fri, 15 Feb 2008 15:30:31 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305953 @Mike: 1. yes the value is already set. You can this in container.js (in YUI 2.4.1), within the Config.setProperty function line 285 (the handler will get called by the firing of the property event: "this.fireEvent(key, value);", line 287. Please note that the handler won't be called if the setproperty function is called with "true" as its third (called "silent") parameter. 2. in container.js (YUI 2.4.1), line 183, within the Config.addProperty function, you can see that the "silent" parameter is set to true when calling Config.setProperty, which means that the handler will not be called when the property is added using addProperty. The handler is basically useful as a listener which will get called whenever the value for a config property is changed. It allows you to attach a listener at a per-config property level, when then Config.configChangedEventgets fired no matter which property had its value modified. No problem, good to see you interested in YUI. YUI has many other powerful features which are little known, feel free to inspect the source code and ask questions on the mailing-list. @Mike:

1. yes the value is already set. You can this in container.js (in YUI 2.4.1), within the Config.setProperty function line 285 (the handler will get called by the firing of the property event: “this.fireEvent(key, value);”, line 287. Please note that the handler won’t be called if the setproperty function is called with “true” as its third (called “silent”) parameter.

2. in container.js (YUI 2.4.1), line 183, within the Config.addProperty function, you can see that the “silent” parameter is set to true when calling Config.setProperty, which means that the handler will not be called when the property is added using addProperty.

The handler is basically useful as a listener which will get called whenever the value for a config property is changed. It allows you to attach a listener at a per-config property level, when then Config.configChangedEventgets fired no matter which property had its value modified.

No problem, good to see you interested in YUI. YUI has many other powerful features which are little known, feel free to inspect the source code and ask questions on the mailing-list.

]]> By: Mike http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305730 Mike Fri, 15 Feb 2008 08:46:08 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305730 Thanks Cyril, that's exactly what i did. But i'm still a little confused. Questions i have in mind are: 1.) Is the property already set in this.cfg when the handler is called? I suppose yes but in some configHandlers i see another call to setProperty(). 2.) Is the handler also called when a new object is created with configuration attributes in the constructor call? I'm still not quite sure, in which cases such a handler would be useful. Some "real life" problem would be great. Oh, and i forgot: Thanks for this great article of course. It really opened my eyes on how to unleash the full power of YUI. Thanks Cyril, that’s exactly what i did. But i’m still a little confused. Questions i have in mind are:

1.) Is the property already set in this.cfg when the handler is called? I suppose yes but in some configHandlers i see another call to setProperty().

2.) Is the handler also called when a new object is created with configuration attributes in the constructor call?

I’m still not quite sure, in which cases such a handler would be useful. Some “real life” problem would be great.

Oh, and i forgot: Thanks for this great article of course. It really opened my eyes on how to unleash the full power of YUI.

]]> By: Cyril Doussin http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305268 Cyril Doussin Thu, 14 Feb 2008 16:46:33 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305268 You are completely right Mike, sorry for the omission. You can see examples of config handler functions in the source code of container.js in the YUI itself. You are completely right Mike, sorry for the omission.
You can see examples of config handler functions in the source code of container.js in the YUI itself.

]]> By: Mike http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305148 Mike Thu, 14 Feb 2008 12:15:16 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-305148 In your Example 3 you use a custom config property like this: this.cfg.addProperty("num_contacts", { handler: this.configNumContacts, [...] Shouldn't you also supply the <b>configNumContacts()</b> method? It would be nice to also have an example for it. In your Example 3 you use a custom config property like this:

this.cfg.addProperty(”num_contacts”, {
handler: this.configNumContacts,
[…]

Shouldn’t you also supply the configNumContacts() method? It would be nice to also have an example for it.

]]> By: Eric Miraglia http://yuiblog.com/blog/2007/12/19/custommodules/#comment-265610 Eric Miraglia Mon, 24 Dec 2007 23:38:31 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-265610 @BirBal -- For this article, we used Alex Gorbatchev's SyntaxHighlighter (http://code.google.com/p/syntaxhighlighter/). You may also be interested in checking out http://duartes.org/iris/highlight.html. Regards, Eric @BirBal — For this article, we used Alex Gorbatchev’s SyntaxHighlighter (http://code.google.com/p/syntaxhighlighter/). You may also be interested in checking out http://duartes.org/iris/highlight.html. Regards, Eric

]]> By: BirBal http://yuiblog.com/blog/2007/12/19/custommodules/#comment-265551 BirBal Mon, 24 Dec 2007 21:37:13 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-265551 I just wrote a Login Module for YUI at http://lamp.techbirbal.com/2007/12/24/yui-login-box/ What code highlighter are you using on ur blog ?? I just wrote a Login Module for YUI at http://lamp.techbirbal.com/2007/12/24/yui-login-box/

What code highlighter are you using on ur blog ??

]]> By: Federico Feroldi’s blog » Blog Archive » links for 2007-12-20 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262764 Federico Feroldi’s blog » Blog Archive » links for 2007-12-20 Thu, 20 Dec 2007 20:19:58 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262764 [...] Creating Custom Modules with YUI Using the YUI Module Control » Yahoo! User Interface Blog This article looks at the process of extending YAHOO.widget.Module in order to build such a Control. Our example will be a potentially long list of contacts, which we will turn into a customisable, paginated list. (tags: javascript yui module howto tutorial library) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...] […] Creating Custom Modules with YUI Using the YUI Module Control » Yahoo! User Interface Blog This article looks at the process of extending YAHOO.widget.Module in order to build such a Control. Our example will be a potentially long list of contacts, which we will turn into a customisable, paginated list. (tags: javascript yui module howto tutorial library) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]

]]> By: reza http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262644 reza Thu, 20 Dec 2007 17:26:32 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262644 I am wondering why resizeable overlay is not as part of standard containers shipped by YUI? How difficult is to add one more config option like "resizeable:true" as part of Overlay family? I know that in panel-resize.html in examples, but is that better to put this one in overlay as standard feature? Thanks -- Reza I am wondering why resizeable overlay is not as part of standard containers shipped by YUI?

How difficult is to add one more config option like “resizeable:true” as part of Overlay family?

I know that in panel-resize.html in examples, but is that better to put this one in overlay as standard feature?

Thanks
–
Reza

]]> By: Cyril Doussin http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262481 Cyril Doussin Thu, 20 Dec 2007 11:44:59 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262481 Sorry, my comment was partly truncated. I meant: "You would extend Element to create widgets more based on one HTMLElement, which is more self-sufficient. Element is used as the base for DataTable and Charts. Both provide you with different functionality and you should go with one or the other depending on the type of widget you wish to create." Sorry, my comment was partly truncated. I meant:

“You would extend Element to create widgets more based on one HTMLElement, which is more self-sufficient. Element is used as the base for DataTable and Charts.

Both provide you with different functionality and you should go with one or the other depending on the type of widget you wish to create.”

]]> By: Cyril Doussin http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262478 Cyril Doussin Thu, 20 Dec 2007 11:42:14 +0000 http://yuiblog.com/blog/2007/12/19/custommodules/#comment-262478 Thanks for the positive comments. @Greg: Extending Module and extending Element are two different ways of creating your own custom "widgets". Module as its name states is more appropriate to create "content-containing" widgets, potentially with a header/body/footer structure, and many other elements in its body part. You would extend Element to create widgets more based on one HTMLElement, which is more self-sufficient. Element is used as the base for DataTable and Both provide you with different functionality and you should go with one or the other depending on the type Please also note that, even though it is used internally, Element is officially in beta, so parts of its API may change in future releases. If you need to create an independent piece of logic code, which doesn't necessarily have a representation in the DOM, you could still use AttributeProvider, which is part of Element.js, to handle all its properties in a very structured and powerful way. Look out for more on this topic in the future :) Thanks for the positive comments.

@Greg:

Extending Module and extending Element are two different ways of creating your own custom “widgets”.

Module as its name states is more appropriate to create “content-containing” widgets, potentially with a header/body/footer structure, and many other elements in its body part.

You would extend Element to create widgets more based on one HTMLElement, which is more self-sufficient. Element is used as the base for DataTable and

Both provide you with different functionality and you should go with one or the other depending on the type

Please also note that, even though it is used internally, Element is officially in beta, so parts of its API may change in future releases.

If you need to create an independent piece of logic code, which doesn’t necessarily have a representation in the DOM, you could still use AttributeProvider, which is part of Element.js, to handle all its properties in a very structured and powerful way.
Look out for more on this topic in the future :)

]]>