neyric’s Javascript Blog

inputEx 0.2.0 is finally available for download !

This version of the YUI-based json form framework brings a great set of fixes and enhancements:

• 11 new fields
• 3 new widgets
• 25 enhancements on previous fields
• cross-browser enhancements (IE 6 is on the way…)

I strongly suggest you take a look at the complete changeset, and our new list of examples.

Note: For those who were already using version 0.1.0, we wrote a description of the json API changes between 0.1.0 and 0.2.0.

Finally, I would like to thank:

• Maxime R. - for his bug fixing !
• Daniel Barreiro (alias Satyam) - for his help with YUI’s style
• mingfai - for his work on interactions and validations
• unomi - for his ideas, bug reports and forum help
• ClicRDV - for open-sourcing this library
• And many others - for bug reports

Have fun !

WireIt is back !

On June 19th, WireIt was removed from distribution for copyright infringements. After discussions with the Yahoo! User Interface and Yahoo! Pipes teams, a project started to provide the wiring widgets as a YUI module. (Note: I don’t work for Yahoo! so it is NOT an official annoucment…)

I’m very happy with this decision and I can’t wait having this integrated into YUI. However, the quality concerns of YUI requires very detailed attention to cross-browser support and YUI integration. It will take some time before it appears on the YUI roadmap.

Meanwhile, I’ve been contacted by many WireIt users, who where anxious about using code with copyright infringements, and about seing no more bugfixes/new features. Therefore, I decided to release this new version that does not contain any coprighted code/assets anymore !

If you use WireIt <= 0.2.1, you MUST upgrade to 0.3.0.

WireIt get sponsored !

Among WireIt users, Tarpipe decided to sponsor the WireIt library. I am grateful to them, for helping revive the project.

What’s new in version 0.3.0 ?

• Removed copyrighted images and code
• New drawing methods (straight lines and arrows, thanks to Marcin Iwa?ski)
• CanvasElement class (WireIt.Wire now inherits this class)
• Scissors class (for the scissors widget)
• LayerMap-beta (minimap to visualize/naviguate the layer)
• API Documentation much nicer and usable
• WireIt.Layer: “clear” and “setWiring” methods
• Bug fixes (including the much awaited positionning issue)

I also started an interactive presentation, to demonstrate WireIt features.

Have fun !

If you don’t know Persevere yet, check out its impressive list of features (JSONPath/JSON-RPC/Comet support, etc…).

Here is a short tutorial to expose your MySQL tables through the persevere JSON REST interface.

1. Download persevere and unzip it.
2. Download the JDBC driver for MySQL and put the jar file into the “persevere/lib” folder.
3. Create a new file in “persevere/WEB-INF/config” named “myDatabase.json”
4. We will now configure the data source: (replace “myDatabase” and “myTable” by your database and table names.)
({
"id":"myDatabase.json",
"sources": [
{
"name":"myTable",
"sourceClass":"org.persvr.datasource.DatabaseTableDataSource",
"driver":"com.mysql.jdbc.Driver",
"connection":
"jdbc:mysql://localhost/myDatabase?user=myDbUser&pass=",
"table":"myTable",
"idColumn":"id",
"dataColumns": [
"lastname",
"firstname",
...and so on with your table columns
],
“schema”:{
“data”:{”$ref”:”../myTable/"}
}
}
]
}Don’t forget to change your database user name and password !
5. run persevere (”java -jar start.jar”) and visit the following pages:
   • http://localhost:8080/myTable
   • http://localhost:8080/myTable/
   • http://localhost:8080/myTable/1

What to do next ?

• Add other tables: “sources” is an array !
• Use UTF8: Adds the following at the end of the connection string: &useUnicode=true&characterEncoding=utf-8&mysqlEncoding=utf8
• Add methods to the class or to its prototype (take a look at WEB-INF/config/examples.json)
• Write a script to auto-generate the config file from a database structure (and post it on the persevere forum)
• Read the Persevere Javascript Client Documentation and start coding applications !

Have fun !

Due to copyright infringement with parts of its source code, the WireIt library has been removed from distribution.

However, it is good news for WireIt and YUI developpers: the component might be adapted into a YUI widget in a close future.

Subscribe to the rss feed to keep in touch with the project.

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 !

I made a few updates this week-end. They mostly concern the Container
and Layer classes.

Here are the changes:

• new Layer.getWiring function to save the state of the wiring. It
  can be customized by overriding Container.getConfig
• jsBox updated to use the Layer.getWiring function
• no default width for containers so they can auto-adjust to the
  content
• Layer.addContainer and Layer.addWire now returns the created
  instance
• Added the method Container.redrawAllWires and
  Terminal.redrawAllWires
• Added Layer.removeAllContainers
• adds a “body” div to the container
• CSS updates on Containers and Layers
• adds a focus CSS class on the last mousedown-ed container in the
  layer
• bugfixes (events “addWire” and “removeWire” added to WireIt.Layer,
  offset in the connections)

I just released the new 0.2.0 version. You can download it here.

Here are the main changes:

• 2 new classes were added: WireIt.Container and WireIt.Layer
  Every project you might start using WireIt needs a widget that could contain Terminals, and that could be moved around. This is the goal of WireIt.Container.
  The Layer class creates a DIV element that can contain multiple containers and wires. It will be useful to save the state of the containers and connections between the terminals. (It also provide an extensible frame with scrollbars.)
• Custom events added to create richer interactions when editing the wires.
• A minified version built with YUI Compressor.
  This javascript minifier is almost perfect: I just wish you could have multiple input files…
  The result file is just below 20k.
• jsBox: This is a sample application using WireIt.
  Create boxes containing javascript functions, connect them together, and run your program !
• Many new configuration options, configurable CSS class names, and some new methods in the Wire and Terminals classes.

Don’t forget to give your feedback in the forum !

Have fun !

The google gears team recently announced the features that will be added in gears 0.3

One of them particularly caught my eyes: the Desktop API. It provides a simple method that lets you create a shortcut icon on the user desktop, to launch your web application. Is’s particularly interesting for an offline-enabled web application, and improves the user experience while making web applications one step closer to Rich Desktop Applications.

However, google doesn’t provide the 0.3.2.0 version yet. If you want to try it, you’ll have to compile it yourself from the gears svn version. (There’s a tutorial to build it under windows, for MacOS, a simple “make” will work)

As the compilation procedure was not so straightforward under windows, here are the xpi files (firefox only) from the latest svn revision (revision 638) :

• gears-osx-opt-0.3.2.0.xpi (Mac OS X)
• gears-win32-opt-0.3.2.0.xpi (Windows)

Once you’ve installed it, you can try this snippet : (it won’t work unless you change the icon urls to REAL icon files)

var desktop = google.gears.factory.create('beta.desktop');
desktop.createShortcut("Test Application",
       "An application at http://www.test.com/index.html",
       "http://www.test.com/index.html",
      {"16x16": "http://www.test.com/icon16x16.png",
       "32x32": "http://www.test.com/icon32x32.png",
       "48x48": "http://www.test.com/icon48x48.png",
       "128x128": "http://www.test.com/icon128x128.png"});

I’m now impatient to be able to launch firefox without the browser chrome (like Prism) ! I think I’ll have to wait for Firefox 3