Comments on: Building Your Own Widget Library with YUI

By: Stephen Nelson

Stephen Nelson — Sat, 10 Apr 2010 02:40:33 +0000

I’ve been attempting to follow this example to create my own custom YUI component. At least with YUI 2.8, the initAttributes() method on Element appears to be an empty stub which does not call its superclass. I can work around it by providing the oConfigs values to the attributeConfig ‘value’ param directly. Was this changed?

By: Baron Roberts

Baron Roberts — Sun, 31 Jan 2010 23:10:40 +0000

Is it possible to use this technique to create a component that internally uses a layout to organize its HTML elements? If it is, do I call the layout’s render method in my component’s render method?

By: Satyam

Satyam — Wed, 26 Aug 2009 09:35:27 +0000

Dennis, Good question, I should have addressed that. In the future that won't be an issue any more, ECMAScript 5 will have setters and getters on all properties and many browsers already support that via proprietary solutions, and there are very good reasons for that. Check out the the properties of Attribute, they provide getter, setter, validator and conversion functions, all features that might be desirable for a regular property but that the language, so far, does not provide. Currently, properties are totally passive. If you have, say, a width property, the change won't be reflected until the widget is redrawn, if you have a width attribute, the change can be effected immediately. In the case you mention, the array is like a table of constants, it is not meant to be changed except, possibly, for developers who might add other field types. For the developer using the library, it is meant to be read-only, as if it was a constant, something JavaScript currently does not provide. It could have been declared (not really, but just for the sake of an example) as an attribute with its readOnly flag set, but that would have complicated access to it. In JavaScript we lack constants and private variables, we rely on naming conventions or documentation to declare the intent so, in the case of field types, we trust they'll be properly used.

By: Dennis McCarthy

Dennis McCarthy — Tue, 25 Aug 2009 14:27:53 +0000

I notice that in some cases you use configuration attributes, while in other you use ordinary JavaScript properties (e.g., the fields property of the Fields control). How do you decide when to use a configuration attribute and when to use a property?

Dennis

By: Satyam

Satyam — Fri, 07 Aug 2009 06:11:26 +0000

Element has many of the methods that help in dealing with a widget but it is not a widget itself, it is not in the YAHOO.widget branch but in YAHOO.util, and it doesn’t have a render method or a destroy one. It really doesn’t deal with the lifetime of the widget as a whole but it helps with plenty of common tasks such as configuration and event handling.

All the newest widgets are derived from Element. The container family uses a Config object, a forerunner of Attribute and AttributeProvider, earlier widgets as TreeView barely use anything at all. In YUI3, Element turns into Node though far more powerful.

So, Element is the way to go.

By: Roman

Roman — Thu, 06 Aug 2009 20:52:22 +0000

Hi,

According to Element documentation one should defer dom manipulation with Element. So am I right that the call to render method should be deferred? What is the best concept for widget rendering? I tried to look through widgets, but they are implemented in different ways.

Thank you!

By: Jenny Han Donnelly

Jenny Han Donnelly — Fri, 08 May 2009 22:34:22 +0000

@Charles Scott

A better place to ask this type of support question would be the YUI forum at http://tech.groups.yahoo.com/group/ydn-javascript/. It’s a lively community of YUI developers who will likely be able to give you some advice.

Cheers,
Jenny

By: Charles Scott

Charles Scott — Tue, 05 May 2009 22:02:09 +0000

I am using the latest version of YUI. So far it is awesome! I am using the template found in the “menu” folder. The problem I am having is getting it to accept and 3rd level of menu? I see the nested template and am thinking it is possible, but I cannot seem to figure this one out.

Ideas?

By: A.R

A.R — Sun, 05 Apr 2009 14:28:22 +0000

Hi,
I finally got inheritance working. I was also able to create my own “widget”. However I am unable to mix Scriptaculous syntax with YUI. Examples:
1) Unable to create a new scriptaculous “Element”
//Scriptaculous:
var elem = new Element(“div”,{class:”yui-g”});
2) Unable to use Scriptaculous inheritance syntax
with yui
//Scriptaculous
MyView = Class.create(YAHOO.widget.Panel,{
initialize($super,args)
{
$super(this,args);
…
}
show:function()
{
…
}
};
then elsewhere var myView = new MyView(args);

By: A.R

A.R — Sat, 04 Apr 2009 20:31:17 +0000

Doesn’t work anywhere except on your server.
Where are the examples?