WireIt 0.4.0 released

The long awaited release of WireIt is finally here ! Awaited indeed, since a major bug was still present in version 0.3.0, preventing it to work on IE. It has been fixed for a long time on the repository but has discouraged many people using WireIt (hopefully not too much…).

What’s new in version 0.4.0 ?

  • inputEx integration: inputEx is another of my YUI libraries, to create fields and forms. Through a new class called “FormContainer”, you can now build WireIt containers using the advanced forms options from inputEx. The value is saved at the layer level for you through Layer.getWiring
  • WiringEditor: This is my favorite feature. While still largely incomplete, the Wiring Editor provide a full-blown interface to create visual languages. It takes care of most of the interface you might want to build a visual editor on top of WireIt. The language definitions are written in JSON, I hope this will greatly reduce the learning curve of WireIt.  The transparent ajax communication with the database is handled through a SMD webservice using YUI-RPC. WireIt provides a simple php backend that stores the JSON wiring states in MySql (used for the demos on wireit’s website).
  • new options:
    • terminals position in containers: {top: , left: , right: , bottom: } instead of [x,y]
    • Terminal.alwaysSrc : force this terminal to be the source element in every connected wires
    • Container.preventSelfWiring : prevent connections between two terminals of this container
  • API Documentation with YUI Doc (much more precise on properties and events)
  • Layer Map is now clickable and draggable. It will move the linked layer accordingly.
  • IE Bug fix ! (finally)
  • Moved to github for git repository and better wiki
Build visual languages applications !

It’s now pretty easy to build visual languages applications. (or at least, prototype them…).

You can follow some projects on http://github.com/neyric/wireit/network. I’m especially looking forward to LeifW XProc Visual Editor

Here is a little presentation that I published on WireIt’s homepage :



Posted in inputEx, WireIt, YUI Library | Tagged , , , , | 6 Comments

inputEx 0.2.2, SMD and YUI-RPC

0.2.2 release

Although we didn’t add any new field in this release, inputEx 0.2.2 still brings a new set of options and bugfixes. (see the changeset for details)

The most significant part of this version, which I’m pretty excited about, resides in the following components :

YUI-RPC or “What the heck is Service Mapping Description (SMD)” ?

Abstract from the proposal:

A Service Mapping Description (SMD) is a JSON representation describing web services. An SMD can defines the various aspects of a web service such that clients can coherently interact with the web services. An SMD can be used by generic tools to generate interfaces, human and programmatic, to access available web services. A wide array of web services can be described with SMD including REST services and JSON-RPC services. The SMD format is designed to be flexible, compact, simple, readable, and easily implemented.

SMD is basically a WSDL-like, but for JSON. It’s so much simpler to implement that I regret the time I spent on WSDL ! Instead of using XML, XML-RPC and SOAP, we are now able to play with technologies better suited for the browser environment: JSON, JSON-RPC, REST, JSONP etc…

Concerning the “programmatic interface”, the dojo framework already provides a remote procedure calls module. However, since I’m a YUI-user, I had to re-implement it on YUI, which gave birth to YUI-RPC.

How inputEx is playing with SMD

From the inputEx point of view, the best part of SMD is that the method parameters are defined using… JSON-Schema !

inputEx was already able to build a form from a JSON-Schema, so it was pretty trivial to implement an automated form generation to call webservices based on a SMD. Here is an example of such a form using a SMD for Yahoo! search.

I believe this will help a lot in decoupling interfaces and webservices. To prove my point, I quickly wrote some SMDs for popular webservices like Yahoo! search, pipes, Twitter, geonames, delicious, flickr, YQL and others, and built a tiny interface, the SMD-tester, to build the forms, call those webservices, and display the response.

Have fun !

Posted in inputEx, YUI Library | Tagged , , | 2 Comments

JSON Schema and inputEx

Proposed by Kris Zyp, JSON Schema takes the good ideas from XML Schema. From http://json-schema.org/ :

JSON Schema is a specification for a JSON-based format for defining the structure of JSON data. JSON Schema provides a contract for what JSON data is required for a given application and how it can be modified, much like what XML Schema provides for XML. JSON Schema is intended to provide validation, documentation, and interaction control of JSON data.

There are numerous similarities between inputEx and JSON Schema. If you are not convinced, here is an example of a JSON schema:

{"description":"A person",
"type":"object",

"properties": {
"name": {"type":"string"},
"born" : {

"type":["integer","string"],
"minimum":1900,
"maximum":2010,

"format":"date-time",
"optional":true
},
"gender" : {"type":"string",
"options":[

{"value:"male","label":"Guy"},

{"value":"female","label":"Gal"}]},
"address" : {"type":"object"
,
"properties":{

"street":{"type":"string"},
"city":{"type":"string"},
"state":{"type":"string"}
}
}

}
}

inputEx users should be comfortable writing a form for this schema :

{

type: “group”,

fields: [

{type: "string", inputParams: {name: "name", required: true}},

{type: "date", inputParams: {name: "born"} },

{type: "select", inputParams: {name: "gender", selectOptions:["Guy", "Gal"], selectValues: ["male", "female"]}},

{type: “group”, inputParams: {

name:”address”,

fields: [

{type: "string", inputParams: {name: "street"}},

{type: "string", inputParams: {name: "city"}},

{type: "string", inputParams: {name: "state"}}

]    }  }  ] }

The main difference is that the JSON schema ontology is data-centric, wheras the inputEx JSON schema ontology is form-centric, but as you can see, they are very similar.

Another similarity is the self-descriptive ability of JSON Schema and inputEx. JSON Schema has its own schema, a schema for itself. inputEx has the same kind of self reference: the TypeField contains forms to describe the options of each field (you can see this at the end of TypeField.js). This self-referencing property has very nice implications: it gives the opportunity to create a form to build forms, and that’s exactly what the inputEx Builder is: a form which outputs inputEx JSON.

inputEx implementation of JSON Schema

In version 0.2.0, I added a (very) light implementation of a JSON Schema to inputEx JSON. Hopefully, Brad Clements saw the advantages of having automatic form generation from JSON schemas and took the prototype one (big) step forward by implementing JSON referencing. We are now able to create atomic schemas and combine them in nested schemas.

At the current state, inputEx doesn’t implement all the validation that can be described in JSON Schema, but we are on the way. On the other hand, inputEx has many options concerning the form interface, that are not necessary in JSON Schema, which focuses on data validation. Brad suggested an extension to JSON Schema by adding an “_inputex” property to type definition. It allows to set the additionnal interface options for inputEx within the schema.

Both of these features are demonstrated in this example which is built from this schema (JSON schema with inputEx extension).

The last feature that we’re missing is the extending capability (“extends”:{“$ref”:”person”}), but the implementation should be pretty straightforward.

Round-trip: defining JSON-Schema through forms, and Persevere backend

Up to now, we focused on converting JSON schemas to inputEx forms, but the other way is perfectly conceivable ! Leveraging the inputEx Builder, we would have a nice interface to build JSON schemas and associated forms at the same time. Combined with the Persevere framework backend, we could provide a very nice administration interface, that let you edit models through the inputEx Builder, then edit the data through the generated inputEx forms. You could argue that some fields should not be visible in forms, but if you take a closer look at inputEx fields, two of them are perfect for this case: the HiddenField, which is not visible at all, or the UneditableField which lets you use a custom rendering method for an uneditable field.

I think this might end up in a more effective interface than the current Persevere database explorer because it creates the form interfaces at the same time, and make them reusable within your application.

A last idea, we could provide json-schemas for defining method parameters. inputEx could then automatically generate forms to call these methods (through JSON-RPC or locally).

Of course, if you’re interested in the following developments, we urge you to contact us through the forum.

Have fun !

Posted in inputEx, Server-side javascript | Tagged , , , | 3 Comments

inputEx 0.2.1 released

We were so focused on developping very cool web applications with inputEx, that we delayed this released many times. Here it is !

Beyond the usual bug fixes, we received very cool contributions:

  • MapField: Thanks to David Janes. It can handle MS Virtual Earth, Yahoo! Maps or Google Maps. It returns the latitude/longitude coordinates but also the zoom level.
  • MenuField: Thanks to Maxime Réty. Useful solution using the YUI Menu widget instead of grouping dropdown menus.
  • Italian localization by alexodus. If you speak Spanish or German, it will take only a few minutes to translate and post it on the forum.
  • Json-schema referencing by Brad Clements. (see below)

Other things in this release :

  • VectorField. I use this one for storing positions or any kind of vectorial information.
  • FileField-beta. It only works if you’re using a POST method to submit the form, but might be useful for you.
  • The inputEx Builder can now export the generated code to a page, and load a form from a inputEx Json definition or a json schema !
  • We also moved the repository to GitHub, although the wiki has not moved yet.

Click here to view the complete release notes.

Have fun !

Posted in inputEx, YUI Library | Leave a comment

Moving to GitHub

GitHub

We received queries on the inputEx forum to switch our repository to Git.

The YUI library recently moved to GitHub, so I decided to move both of the YUI-based libraries, inputEx and WireIt, to the same plateform.

Here are the two new repositories: inputEx and Wireit.

The GitHub interface is friendly, it displays nice stats, has a cool API, and Git ! (But I’m missing a ticket system)

The good news is that it is really easy to import a SVN repository, and keeps the commit history.

See you on GitHub !

Ah… and Happy New Year !

Posted in inputEx, WireIt, YUI Library | Tagged , | 3 Comments

inputEx 0.2.0 released

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
  • ClicRDVfor open-sourcing this library
  • And many others – for bug reports

Have fun !

Posted in inputEx, Javascript, YUI Library | Tagged | Leave a comment

WireIt reloaded 0.3.0 !

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 !

Tarpipe

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 !

Posted in WireIt, YUI Library | Leave a comment

How to setup a mysql data source for Persevere

Persevere logo

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 !

Posted in Server-side javascript | Tagged , , | 17 Comments

WireIt removed from distribution

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.

Posted in WireIt, YUI Library | 5 Comments

inputEx version 0.1.0 released

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 :

Posted in inputEx, YUI Library | Tagged , , , | 4 Comments