Sugestions

[Deva Satyam]

First of all, this looks great! I like it, otherwise I wouldn't have
bothered to check the source nor to write this message. I am a QA guy
(quality assurance) so I always looks for bugs, nothing personal, Ok?

a) Define your own namespace. Something like:

YAHOO.namespace('Neyric.inputEx');

or

YAHOO.namespace('widget.inputEx');

b) Use more of YAHOO.lang. Instead of

typeof something == 'function'

use

YAHOO.lang.isFunction(something)

c) make field extend YAHOO.widget.Element. All new YAHOO.widgets
inherit from Element so they all provide a standard base API. Only
the widgets prior to Element don't, and I am sure that will change in
the future.

Element already has some of the functionality you provide plus:

- It inherits from AttributeProvider, which gives you better
handling of configuration attributes
- AttributeProvider itself inherits from EventProvider which makes
it easier to declare and fire events.

d) Include the version number in your distribution folder, just as
YUI does so two versions of the library can coexists and you can
switch a page at a time.

e) Field options should be handled through AttributeProvider

Perhaps I should explain this better. AttributeProvider assembles a
list of Attribute objects. Look at the properties of
YAHOO.util.Attribute. You can set a validator for the attribute, set
read-only or wirte-once options and, most important, set a method
which will be called when the value is changed so that it can
immediately do something to the object. You cannot do with pasive
object properties since JavaScript does not provide getter and setter
methods. AttributeProvider is what allows, for example, in the
DataTable, if you do:

myDataTable.set('caption','this is the caption');

The datatable, already drawn in the browser, will suddenly show a
caption, because there is an Attribute method associated with that
property which is immediately triggered. Thus, setToolTipMessage,
could be converted into a toolTipMessage configuration attribute and
you could put the current code as the method property for that one
which would have immediate effect.

f) to be skinnable, your CSS file should have all selectors preceeded
by a skin name, like in yui-skin-sam. That allows any page to change
skins on-the-fly just by changing the className of the top-most
skinnable element, instead of having to load a different style sheet.

g) this is more like an idea: in a group, the optional property, if
the value is a string, all those with the same string value should be
grouped under that name in the screen so instead of just one optional
set of fields, you can several optional groups. If the value for
optional is boolean then you would do as now, making it backward
compatible.

h) If groups were enclosed in a fieldset element, a legend property
could be added.


i) enclose each object definition in an anonymous function so as to
define shortcuts inside

(function () {
var Dom = YAHOO.util.Dom, lang = YAHOO.lang
})();

That will shorten your code and will allow the YUI compressor to
minimize it even more since it can't minimize global variables but can
play freely with local variables.

j) This will allow the YUI Compressor to make even shorter code:

inputEx.Group.prototype = {
initEvents: function() {
YAHOO.util.Event.addListener(this.optionsLabel, "click",
this.onClickOptionsLabel, this, true);
},

/**
* Handle the click on the "Options" label
*/
onClickOptionsLabel: function .....

The YUI compressor cannot compact references like
inputEx.Group.prototype.initEvents since they are public and need to
be accessible by that name from external code.

You can also use YAHOO.lang.augmentObject pretty much in the same way.


k) add a YAHOO.register call at the end so it can registers properly
and it can be used with the YUI Loader.

l) Use more shortcuts within your methods. Instead of:

if(this.options.ajax) {
this.options.ajax.method = this.options.ajax.method || 'POST';
this.options.ajax.uri = this.options.ajax.uri || 'default.php';
this.options.ajax.callback = this.options.ajax.callback || {};
this.options.ajax.callback.scope =
this.options.ajax.callback.scope || this;
}
};

do:

var ajax = this.options.ajax;

and then use that shortcut all over.

Anyway, if you use Element, this would be:

var ajax = this.get('ajax');

m) use CSS floats instead of tables to order elements

n) make classNames out of field names so users can tailor fields/
groups/forms.

o) not yet, I'll get to the o eventually ;-) Actually, I just looked
at the examples and browsed the code. I'll try the library tomorrow.
I liked it so far. After all, notice that all this suggestions are to
make it more YUI-like. The library works fine as it is.

Satyam

[Dav Glass]

I agree with most of what Satyam says except this:

YAHOO.widget.Element, should be YAHOO.util.Element

You should use this namespace call:

YAHOO.namespace('inputEx');

Then your namespace will be:

YAHOO.inputEx..

You want to stay away from putting things under the widget namespace,
that's where YUI puts it's widgets ;)

Dav

[neyric]

Hi !
It's great to have such good advices. Please continue :)
"make it more YUI-like", I like the idea !

a) Define your own namespace: definitely a todo (add an alias for
backward compatibility ?)

b) Use more of YAHOO.lang: done for every typeof (on the svn)

c) make field extend YAHOO.widget.Element: I didn't considered it
first because the component
was beta. But now that I look closer at the Element API, it seems
like an urging thing to do :)

d) Include the version number in your distribution folder: done

e) Field options should be handled through AttributeProvider: I
consider this as a part of c)

f) be skinnable: inputEx CSS is still incomplete and needs a lot of re-
factoring anyway.
(Memo: Add a skinname like in yui-skin-sam)

g) make group options "groupable": very good idea ! :)

h) If groups were enclosed in a fieldset element, a legend property

could be added: todo, make it optional ?

i) enclose each object definition in an anonymous function so as to

define shortcuts inside: yes ! However I have an issue with my API-
documentation
tool (JSDoc Toolkit). It won't be able to recognize the classes and
methods correctly.
I asked on the mailing-list (http://tech.groups.yahoo.com/group/ydn-
javascript/message/29192)
if there was a way to use YUI documentation tool.
I might switch to jGrouseDoc as Denis suggested in response.

j) same issue as i). I started like that, but ended up writing all the
blabla.prototype for each
method because of my doc tool :(

k) use the YUI.Loader: Dav Glass proposed his help to help me do that
(http://groups.google.com/group/inputex/browse_thread/thread/
1692d9222175e343)

l) Use more shortcuts within your methods: would be a part of c)

m & n) use CSS floats instead of tables to order elements

make classNames out of field names so users can tailor fields/
groups/form

might be included in the CSS re-factoring


Summary:
--------

1) Make inputEx.Field extend YAHOO.widget.Element:
- events => EventProvider
- field options => AttributeProvider
- use shortcuts

2) CSS:
- skinnable
- use CSS floats instead of tables to order elements
- make classNames out of field names so users can tailor fields/
groups/form

3) Optimization:
- switch to jGrouseDoc
- enclose components in anonymous functions
- use prototype={} or YAHOO.extend(...,...,{ methods: });

4) Other
- YAHOO.namespace
- make group options "groupable"
- fieldset in forms
- YUI Loader

Eric

[Deva Satyam]

On May 12, 11:07 am, neyric <eric.abo...@gmail.com> wrote:
> Hi !
> It's great to have such good advices. Please continue :)
> "make it more YUI-like", I like the idea !

Man, you are fast!

>
> a) Define your own namespace: definitely a todo (add an alias for
> backward compatibility ?)

Sure, you can do:

var inputEx = YAHOO.namespace('inputEx');

but that would still use the global namespace so it might be better to
put a note for individual users who need it to do it themselves in
their code, not part of the library itself.

>
> b) Use more of YAHOO.lang: done for every typeof (on the svn)
>

I just refreshed my checkout of the svn library and it is still the
same as yesterday

> c) make field extend YAHOO.widget.Element: I didn't considered it
> first because the component
>         was beta. But now that I look closer at the Element API, it seems
> like an urging thing to do :)
>
> d) Include the version number in your distribution folder: done
>
> e) Field options should be handled through AttributeProvider: I
> consider this as a part of c)

Indeed

>
> f) be skinnable: inputEx CSS is still incomplete and needs a lot of re-
> factoring anyway.
>                                           (Memo: Add a skinname like in yui-skin-sam)
>
> g) make group options "groupable": very good idea ! :)
>
> h) If groups were enclosed in a fieldset element, a legend property
> could be added: todo, make it optional ?

Sure, legend should be optional

>
> i) enclose each object definition in an anonymous function so as to
> define shortcuts inside: yes ! However I have an issue with my API-
> documentation
> tool (JSDoc Toolkit). It won't be able to recognize the classes and
> methods correctly.
> I asked on the mailing-list (http://tech.groups.yahoo.com/group/ydn-
> javascript/message/29192)
> if there was a way to use YUI documentation tool.
> I might switch to jGrouseDoc as Denis suggested in response.

Are there any news when will YUI docs tool released, Dav?

>
> j) same issue as i). I started like that, but ended up writing all the
> blabla.prototype for each
>    method because of my doc tool :(
>
> k) use the YUI.Loader: Dav Glass proposed his help to help me do that
> (http://groups.google.com/group/inputex/browse_thread/thread/
> 1692d9222175e343)

By the way, your regular, non-minified source file should be called
inputEx.js, not inputEx-all.js. The way the loader is made, it
expects the -min file by default, then it derives the raw file from
the minified file name by stripping the -min and derives the debug
file by replacing the -min with -debug. You can add your own filters
to fiddle with file names to the YUI Loader but then you would have to
document their use.

>
> l) Use more shortcuts within your methods: would be a part of c)

Actually, this is a plain JavaScript optimization technique,
independently of what library you use it with. Of course, what the
shortcuts are do depend on what are you shortcutting, but it can be
done anyway and it is also a good idea whether the file will be
compressed or not.

>
> m & n) use CSS floats instead of tables to order elements
>                  make classNames out of field names so users can tailor fields/
> groups/form
>
>                  might be included in the CSS re-factoring
>

Satyam

[Deva Satyam]

>
> > b) Use more of YAHOO.lang: done for every typeof (on the svn)
>
> I just refreshed my checkout of the svn library and it is still the
> same as yesterday
>

Sorry, the aggregate file inputex-all is still the same, the
individual ones in the js folder are not.

Satyam

[neyric]

> Are there any news when will YUI docs tool released, Dav?

It will ? Great ! I can't wait...

[Dav Glass]

I don't know when it will be released, it's not on the roadmap right
now ;)