WYSIWYG Web Form Builder with JavaServer Faces (JSF)


November 12, 2010 by huionn

Most of my time in this week is being used to develop a functional prototype of web-based form builder with JSF. This is one of the new requirements for the new platform.

I get some initial ideas from JotForm. It has very nice user interface which I try to imitate.

After some exploration, it turns out that the WYSIWYG UI of form builder is not hard to develop with RichFaces.

RichFaces has

  1. drag and drop support for input components
  2. inline editing for label
  3. modal dialog for input component properties
  4. context menu for delete, shrink and expand the columns

After I complete the UI part, there is another problem to solve: how to display the generated form?

Unlike JSP, the lifecycle of JSF requires that the components tree to be built before rendering the view. This means the components cannot be generated on runtime.

Although the solution in http://confluence.highsource.org/display/~lexi/Programmatic+usage+of+Facelets is not applicable for my use case, it provides very informative explanation for advanced topic in facelets.

After eliminating possibility of runtime component rendering, I still have another option – rendering the facelets when user saves/updates the form. It turns out to be a simple task. The facelets xhtml can be easily generated with FreeMarker. FreeMarker is a Java template engine to generate text output. seam-gen uses it to generate the codes and views.

After I developed and integrated everything, I thought facelets can pick up newly generated xhtml on the fly. Unfortunately, it is not that straightforward. My application code cannot write to deployed folder returned by ServletContext.getRealPath(). So, I have to use a CustomResourceResolver as explained in http://seamframework.org/Documentation/HowDoILoadAFaceletsViewTemplateFromASharedJAR. I map a virtual path in request URL to a specific directory (configurable in database).

Everything should be working now – I can drag and drop input components into a form builder template, save the form and then view the rendered JSF form.

Nevertheless, I still have to look into the potential performance issue and concurrent issue. In addition, I also need to figure out how to handle versioning – especially there are conflicting changes.


2 thoughts on “WYSIWYG Web Form Builder with JavaServer Faces (JSF)

  1. Hi,
    How many files are created when a new form is generated? Only one xhtml file ou both xhtml + java bean files?
    I am wondering if it is better to have only one xhtml file and use a key to show the correct form. I think it is what JotForm does.
    Could you share code examples of what you got?
    My best regards,

    • huionn says:

      Only one xhtml is generated. The ‘bean’ is a Map object.
      I agree with you that it is better to have only one xhtml. but as far as I know, due to JSF lifecycle, it is impossible to do it in JSF.
      I think for Form Builder, JSF may not the best solution.

      Regarding the code, as I have left the company last year, I don’t have the source code now. Sorry about that.

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

%d bloggers like this: