Non-visual Tag Decorators

Summary

JSP tags, and JavaServer Faces (JSF) tag in particular, have numerous non-visual nested tags that can change the appearance and behaviour of their parents. Consider the following JSF example:

<h:commandButton value="Submit">
    <f:actionListener type="com.company.MyActionListener" />
</h:commandButton>

In this situation, an instance of 'com.company.MyActionListener' will be created and receive action events when the commandButton is pressed.

However, the 'f:actionListener' tag has no visual representation in HTML and so does not appear in the WYSIWYG editor. This forces a user to leave the visual environment and switch to a text or XML editor to:

• discover what nested non-visual tags are present
• learn the attribute settings of each non-visual tag
• select, modify and interact with these tags in the properties and outline views

We believe this is a usability problem that can be solved, at least partially, by using visual decorators.

Formal Statement of Requirements

The visual page designer shall support the ability for tags that support child tags that do not have a visual HTML representation to decorate their canvas image to aid the end-user in interacting with the child tags.

Basic requirements

The decorator design shall allow a user the ability to:

1.1: Quickly determine what non-visual child tags a visual tag contains.

1.2: Obtain a visual representation of the tag that has similar interaction capabilities as a visual tag on the canvas.

Usability requirements

In addition to the basic requirements, the following usability issues shall be addressed:

2.1: The decorators will be as non-intrusive as possible.

2.2: The end-user should be able control when decorators are available and hide them if they wish.

Technical requirements

3.1: The visual page designer is a GEF-based editor. The solution must be designed and implemented within that framework.

3.2: The solution must take into account the ITagConverter interface used to derive WYSIWYG rendering information from the source JSP/JSF markup.

Solution Summary

The decorators are implemented as canvas feedback that can be pinned to the canvas through user interaction. A tag may expose its non-visual children through a new method on the ITagConverter interface (requirement 3.2). These children are absorbed as model children of the parent tag's EditPart. This causes the system to treat the non-visual parts as child EditParts (requirement 1.2).

To ensure that the non-visual decorators are non-intrusive (requirement 2.1), the visual figure (IFigure) representation of each child EditPart is moved to a visual editor layer instead of the figure for the parent Editpart as is normally the case.

A user can quickly determine the non-visual children of a visual tag (requirement 1.1) by rolling the mouse over the visual tag's representation on the editor canvas. If there are visual children, a decorator will appear at the top-right corner as shown below for an h:commandButton JSF tag: