Blog Posts Process Management

XForms editor with JBoss VPE (and some jBPM)

Blog: PlanetjBPM's Weblog

For several years now, I’ve been using XForms in some projects. One of the main resons was that I can declarativly design my form. Some might say that XForms is not supported in browsers. Correct, but there are several solutions that run serverside or lately in a kind of hybrid mode (hate the term AJAX since I dislike the footballclub with the same name) My preference has always been Chiba, although others exist. Recently I started working on combining some of the more interesting frameworks and standards into something that could support ‘message’ oriented b2b communication. It should not matter if a message comes in from e.g. a ebMS system, or from a webinterface. In all cases the the message that is needed is xml. So what is easier to use a technology where you have an xsd, translate that to XForm and use that form to runtime produce xml messages that comply with the xsd (and more). Right?

Well, yes and no. Many of the forms generated from the xsd need some form of change. Luckily the binding of an input element to a specific element (or nodeset) in the xml instance is loosely coupled. You can place an input anywhere in a form and still have it mapped to the same element in the xml instance. No 1:1 mapping is needed. Cool if you want to have elements in your form grouped differently then they are in the xml instance. If you are really into the details of XForms it is possible to do this by hand as it is xml, but mistakes are easily made. So the first thing to do is to look for existing editors. There are a couple which I investigated (I hate reinventing the wheel) mentioned in the order of when I knew they existed.

All have their specific advantages or disadvantages. But none of them appealed to me. Why not? Well, IBM (on alphaworks) is not maintained anymore, OpenOffice XForms editing is not intuitive (to me), Orbeon is closely related to their forms format and so cannot be easily used with Chiba (and no I’m not going to change away from that), plus that it is written in XForms and not easily extendible ). That it is written in XForms is by itself a great compliment for those guys, eat your own doogfood… but to complex for me. Oryx uses SVG a lot, translating xforms elements to svg things. Also not realy extendible by me. In addition to this comes the disadvantage that neither of them is a full fleged xhtml editor which XForms leverages. So…..

I suddenly remembered the docbook example Trying it failed in more than one way, but the source of the JSF and Richfaces VPE templates/editors is also available and those combine xhtml with rendering custom components. XForms is to a large extend the same, so going with these as a basis proved to be a great kickstart for what I wanted. Without going into the details of what is done and what is not, I’ll show three screenshots and the Chiba original

This was what it looked like initially

Opening an XForm in the plain JBoss html editor

Opening an XForm in the plain JBoss html editor

Now with the XForms plugin

XForms 'aware' JBoss html editor

XForms ‘aware’ JBoss html editor

The preview

The preview in the xforms aware editor

The preview in the xforms aware editor

And what it should look like in Chiba

The select1 screenshot from Chiba

The select1 screenshot from Chiba

Yes, there are still some differences, the ‘popup’ with the 4 checkboxes are ‘dojo’ popups. Not sure how and if I’m going to render those. The required ‘star’ and the help (i) are just some css things I need to do, but don’t tell me I’m not getting close…

Next thing is getting XForms into jBPM (and this editor ofcourse(both shameless plugs 🙂 )) and finding a proper location for development (Max Andersen already proposed a JBoss Tools sandbox, sounds interesting)

Oh.. for anyone interested in trying (MD5: D2B3DBF36FBC0CAA29FA94C67192A2CE)

Edit: I exceeded the download limit (10) on rapidshare. I did not expect that. A new version will be uploaded in a few hours with a higher limit. Sourcecode will also be available shortly, working on that with JBoss

Edit 2: New version on  new download location

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples