Posted by: kukeltje | 25 February, 2009

XForms editor with JBoss VPE (and some jBPM)

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.

  • IBM (Eclipse based)
  • OpenOffice
  • Orbeon (browser based)
  • Oryx (browser based)

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

About these ads

Responses

  1. This effort looks very promising. Though i’m not a big fan of Eclipse i understand that it makes a lot of sense to build upon the JBoss XHTML editor for the reasons you gave. The Chiba developers will surely give a helping hand if needed and will be happy to push that thing forward as we planned an editor ourselves.

    You mentioned the details of rendering like helps and those popups. Though these look iike tiny details i believe a full solution should be able to render Dojo too – just think of the great layout containers Dojo provides. You’ll likely want to use them in serious app design and to give you a realistic look of the page you’ll need to show their rendering. One thing to note about Chiba 3 is that it’s not simply XForms any more but offers the full Dojo toolkit for the rest of the story that XForms is not intended to do like layout and the concrete rendering of widgets in an accessible and consistent way.

    But even now your approach seems to be best i’ve seen for a while maybe with the exception of Oryx which runs in a plain browser which i think it an advantage for ‘design users’ that are not familiar with such complex IDEs like Eclipse. But i agree that extensibility seems limited except for those who have initially designed it ;)

    To circumvent this problem with Eclipse (and setting it up with the right dependencies) it would be great to deploy the final thing (one day) as a Eclipse RCP app.

    • Joern,

      If you strip eclipse to the barebones and create a good perspective, it looks and works a lot like dreamweaver. Something many ‘design users’ are familiar with. So I think that argument is not realy valid.

      Regarding the dojo toolkit, I can see it can be used to do more than initially with plain xhtml/xforms. There is a problem hower and that is related to the way dojo works. It does most of it functionality runtime by (ab) using the body onload and runtime parsing the dom. So in a designer that is realy difficult to circumvent. But…. there is a possible workaround for Chiba since there is a xslt afterwards anyway. If you guys would not have a problem changing e.g. each div (or other tag) which has a dojoType on to dojo:div (ns prefix), a lot can be done.

  2. Hi kukeltje.

    This is one of the Oryx authors. You mention the Oryx Editor not being really extensible, although we’re trying to keep it as extensible as possible.
    What features or extension points did you miss exactly? If you found any deficiencies, please consider filing bugs, or feature requests on our Google Code site.

    • @Martin,

      Don’t take me wrong. The bpmn (and maybe jpdl?) usage of Oryx is great and I’m sure it’s extensible in that area. I just do not see it becomming a full fleged xhtml (+xforms) editor with full wysiwyg etc.. without a lot of work. (I tried it a little so I do have some experience) Maybe I should have formulated it in this way (it was late lastnight when I posted), so sorry for that. Keep up the good work.

  3. Hi kukeltje,

    Looks great and great discussion on jboss tools forum about it too (http://planetjbpm.wordpress.com/2009/02/25/xforms-editor-with-jboss-vpe-and-some-jbpm/ )

    I was wondering what issues you had with the docbook editor since you write: “Trying it failed in more than one way” ?

    • @Max,

      Ok, not formulated great. I should have said ‘Trying it showed that it was not sufficient’ (non-native English speaker you know) There were three issues
      – I tried to make a version that could parse one element and I got an error trying to open any form with it. In the end (when working with a jsf/richfaces based template) it failed to. The ‘open with’ gave me an error which eventually was caused by not mapping the .xform extension fully to the html editor. That needs to be done in two places.
      – XForms has the label inside an element and you cannot do that with the basic template stuff, you need java classes for that
      – The numer of functions available (which is a vpe issue, not the docbook temlate) is to limited for what you need to do to parse XForms (this also helped: http://www.exadel.com/exadelstudio/help/vpe/JSPVisualEditorTemplates.pdf. Came by it by accident, but it helped.

      So in the end it was only slightly limited to the docbook example. But extending that to include some java classes would be nice

    • Oh… max… you mean the Jboss Tools Forum: http://www.jboss.org/index.html?module=bb&op=viewtopic&t=151107 :-) Nice plug of my blog on my blog

  4. Thanks, all feedback is appreciated :-)

    Right, Oryx is focussing on graphical modeling languages, which is why SVG is a good fit. In that respect, i heard of jpdl only recently. I will have a look at it.

    If there is anything else, or if you have questions or comments, don’t hesitate to email either me or the Oryx Editor mailing list.

  5. Great start kukeltje. I was looking into the latest chiba release as well. We should kickstart a dicussion in the dev forum. Because I had a task management prototype on my plate for the next release cycle (>Mar1) anyway.

  6. Great post.. i will give it a try and create a post about that too.. with some application examples!

  7. also the link in rapidshare is broken.. can you upload it again?

  8. The link is not broken, I uploaded via an fully anonymous way, only 10 downloads allowed… cool… Also nice is the spike in this blog view count… :-)

    I’ll upload a new one, which also has preliminary support for XFormsForHTML, a somewhat more limited subset of xForms that will most likely go into XHTML 2.0

    Now also supported:
    – parsing of relevant, readonly (partial), constraint and required attributes
    – More support of the chiba xforms css (http://chiba.sourceforge.net/CSSReference.pdf)
    – basic css included

    Next:
    – support the output element
    – support for the textarea
    – graphically support datepicker
    – graphically support ‘range’

    I’ll make a new version and upload with again

  9. FYI:

    A new download location for a binary is available as is the source


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: