neyric’s Javascript

It’s finally time !

I just finished the first public version of inputEx. I had this project in my bag since summer 2007.

Visit the website at http://javascript.neyric.com/inputex . Here is a short introduction from the documentation :

Introduction

inputEx is a javascript library to build fields and forms.
It can also be considered as an interface framework, since it provides a good structure to create you own fields.

It is built on top of the YUI library, and we tried to be as close as possible to the YUI philosophy.

It is of course fully skinable using CSS and currently supports Firefox 1.5+, Safari 2.0+, IE 7.0 and Opera 9+.

A unique field library

With so many form libraries out there, why would we create another one ?

• HTML fields/forms are very limited
• no existing good input library for YUI (let me know if I’m wrong !), except YUI widgets
• it’s not all about validation !

Here are the features we implemented that makes inputEx unique :

• json configuration for each field
• complex data structures (list/objects/tree/list of urls/objects of objects etc…)
• composition between the fields (for “meta”-fields such as InPlaceEdit,List,Tree,Pair,…)
• javascript object mapping for greater interactivity
• a common “updated” event to handle different browsers and different field interactions

No HTML ?

InputEx uses no html (it is the opposite of unobtrusive librairies): all the fields and forms are configured using json, then rendered by manipulating the DOM.
It is therefore a library to create javascript web applications, not webpages.

This approach has a great advantage: adding/modifying a field is made in one place only. Combined with
the json configuration that can be stored server-side, it makes customization of your web application very easy.

Help Us

It is very easy to help us improving the library :

• Extend the library: send your custom fields to the wiki, it might help others !
• Give your feedback on the forum
• Report any bug

Other resources

If you didn’t find what you were looking for, please visit these websites :

• Examples - many examples for each field
• Forum - discussions about inputEx
• Blog - inputEx news
• Wiki - community ressources
• Contact the author: inputex@neyric.com

inputEx is an open-source javascript form library, built on top of the Yahoo! User Interface (YUI) Library. It is still under development and will be released real soon, under the MIT License.

Another Form Library ?

Why would I create another form library, when we already have so many of them ?

I really like the way the YUI Library is built and I wanted a form library to be very close to the YUI philosophy. I believe the YUI library is really missing something: it has a lot of useful widgets, but you have to integrate them yourself within your forms, over and over again…

Have you ever created a web application or website without any input field ?

Unobtrusive ?

No ! I want the opposite. I hate HTML (although I’m still writing HTML every day for 10 years…). With inputEx, you describe your forms using json !

It’s not all about validation

Validation has been the main milestone for many form libraries. inputEx aims to tackle other issues, such as:

• Form creation: each field will include its own configuration form. Thanks to a “type” field, we can then provide a form to create forms !

• Extendability: form libraries always miss the field you need. A good form library should make it easy to create new fields easily. This pitfall has a unique solution: a good documentation !

Please be patient !

In every web application that intensivly uses javascript: errors may occur !
Since I’m not able to fully-test my web-application each time a modification is made, I decided to report javascript
errors to the server. It proved to be very useful to detect bugs very quickly.

Here’s an example on how to do so with YUI :

window.onerror = function(msg, href, lineNo) {
  var postData = 'msg='+msg+'&file='+href+'&line='+
		lineNo+'&infos='+navigator.userAgent;
 YAHOO.util.Connect.asyncRequest('POST', 'report_error.php',
              { success: function(o){}, failure: function(o){} }, postData);
}

I just added “navigator.userAgent” to the parameters of window.onerror, so you know
which browser generated the error.

“The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.”

I found YUI very helpful for my applications. It’s not the most complete framework that exists (look at BackBase for example) but it is very promising. You can make new Components easily ( with YAHOO.util.Dom, YAHOO.util.Event ), ajaxified behaviour (with YAHOO.util.Connect.asyncRequest ) etc…
I recommand two web sites :

• YUI Home Page (examples, good documentation and downloads)
  
• Jack Slocum’s Blog (Using the YUI library - Beyond the Examples)

For WordPress users, you can even use YUI to for the comments system.