neyric’s Javascript

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

I’m pleased to announce the first release of WireIt (version 0.1) !

WireIt is a javascript library that allows you to create cool wires like Yahoo Pipes. It is built upon:

• the CANVAS tag to render the wires
• the YUI Library v2.3.1
• excanvas for IE support

It comes with some examples (see the home page) and an application example, the Planar Game.

Why would you make such a library ? After playing a lot with Yahoo! Pipes, I realized how powerful it was to create mashups. I was already used to visual programming Languages like PureData or Mac OS Automator, but they’re definitly not able to do mashups.

However, Yahoo Pipes has this big inconvenient to run your pipes on their web servers. It has at least two disadvantages. First, it means we will always be restricted to the modules and types they implemented. You could always create a restful webservice and wrap it into a pipe, but the execution time blows up. Second disadvantage, you have to be careful with your data privacy. Indeed, I would like to create some Mashups that could mix with my private data in a more secure way.

That’s how I started to develop a Yahoo pipes-like application, and how I ran into this stumble block: “How the hell did they do those pipes ?”.

Waiting for your feedback,
Eric

I’ve been using Google Gears rather intensively (see Gears In Motion) during the last few months.

I started building an interface that uses all the components of Google Gears (Local Database, Local Server and WorkerPool), and implemented a synchronization engine. The result was a much more responsive offline application with many features that couldn’t have been easily implemented without the local database, and that works great !

Until… one of my coworker tried to import 20.000 records: It took 40 minutes to execute the SQL INSERT statements ! (approx. 120ms/insertion)

We then decided to write this 100 insertions test, which revealed to have surprising results :

• On MacOS 10.4.11: 2.6ms by insertion (approx. 385 insertions/second)
• On Windows XP and Vista: 107ms by insertion (approx. 9 insertions/second)

Please run the test and post your results as a comment indicating your OS/Browser version/Google Gears version.

Any idea why it is so slow on Windows ?

I just added a demo to show Gears In Motion in use:

Gears In Motion (v0.2.1) demonstration

I just released the v0.2 of
Gears In Motion. The project has also migrated to Google Code so that anyone can checkout the SVN version. We also plan to use the “Issue Tracker” so feel free to add any bug/comment/feature request etc…

You can download gim-standalone-0.2.zip and launch gim-standalone.html in Firefox >= 2.

Here is a quick changeset (without the many bugfixes…):

• Display GIM in a Panel (makes it easy to use in your own project)
• Improved element liaisons visualization
• SQL export is now displayed in a field so you can copy/paste it
• Script that generate the standalone version