Visual JSF Page Designer

Features of the Visual Page Designer planned for the WTP 2.0 release

Overview

JSF-JSP Page Editor

The JSF-JSP Page editor, in WTP 2.0 release, will be a multi-page editor that includes a Visual Page Designer (VPD) in addition to the feature-rich Source editor that is available in the current release. VPD will provide an intuitive close- to-WYSIWIG editing experience. This document details the features of VPD planned for the WTP 2.0 release.

The JSF-JSP Page editor is composed of the following:

• A multi-page editor view that consists of the following pages
  • A Visual Page Designer (VPD) to visually edit the layout of a JSF page.
  • A Source Editor (SE) page. Contents in VPD and SE are kept in sync.
  • A Preview page that displays the page close to the way it would be displayed in a browser at runtime
• An Outline view displays the contents of the current page in a hierarchical form. The outline view supports all the edit operations and supports drag & drop
• A property view to set the attribute values of the selected tag
• A Palette view to display tags, styles etc.

Visual Page designer

This section lists the features in the Visual Page designer. The features are grouped by the function they perform. Some of these features require additional meta-data on the tags. A separate document will cover the use of design-time meta-data in the JSF Tools project.

Add tags to the page

• The editor will support adding both visual and non-visual tags to the page
• Drag & drop tags from the component palette to the page. Double-click on the tag icon in the palette will add the tag at the current insertion point or appropriate location in the page.
• Context Menu on the page canvas will allow adding tags at the current insertion point. Options will be provided to add before or after a tag. Tags that contain other child tags will have context menus to add the child tag
• The tag is initialized with appropriate, customizable default values for required attributes. The Editor will, optionally, popup a customizable wizard to prompt/guide user to help in the creation of the tag.
• The editor will allow only valid tags to be added. The editor will visually indicate invalid drop targets. Context menus will list only valid tags to add.

Render tags on the page

• Visual components are rendered as faithfully as possible to the way they would be rendered in a browser. The editor, by default, will not require design-time rendering support from the component. The default rendering by the editor for a component can be enhanced by providing design-time rendering information.
• Non-visual components are rendered as objects or decorations on the design time canvas.
• Editor will provide an option to show/hide a component. Hidden components are not rendered. Instead they are represented as decorations on the canvas to enable user to select and make them visible.
• Facets are visually distinguished from their container and the components they contain
• Included pages and subviews are rendered read-only in the including page.
• The CSS visual elements are rendered as faithfully as possible.

Select tags on the page

• Visual components can be selected by direct interaction
• Hidden components are represented as decorations on the canvas and can be used to select them.
• Non-visual components will have decorations to help select them including those nested inside a visual component
• Editor will provide decorations to access visually layered elements of a component such as components inside the facet of a datatable.
• Editor will allow selection of multiple components
• Editor will have ‘crumbtrail’ on the canvas to display the containment hierarchy of the selected component. This will also aid in selecting the parent component.
• Context-menus on the selected tag will display its children and aid in selecting them.

Edit tag properties

• The editor will support in-place editing in select cases
  • Edit HTML text on the canvas directly
  • Edit labels of components such as commandbutton, outputtext, outputlabel
• The Property View is typically used to edit component properties. Each component can provide a customized version of the property sheet for its properties.
• Context menus on the component allow common editing
• Editor supports linking tool that allows visual association of one component to another for "for" type properties.
• Selected components can be repositioned by drag & drop
• Facets are editable on the visual canvas.

Delete tag

• Selected components can be deleted by direct interaction or through context menus on the component

Validate

TBD

Undo changes

• The editor will support undo (and redo?) of changes in the current page.

Navigate to related artifacts

• Context menu on the component to navigate to appropriate section in the application configuration resource file
• Context menu on the component to navigate to associated Java class
  • Managed bean class
  • Listener class
  • Validator class

Preview page

• Display the page close to the way it would be displayed in a browser at runtime

Component Palette

• Component Palette displays the icons for all the tags in the project classpath.
• The view can be filtered by library, component Type, valid tags based on current insertion context or custom
• Palette supports drag & drop of tags on to the page designer canvas
• Palette can be configured to be a fly-out or separate view

CSS Support

• Style palette will display the Style classes grouped by the css file name. The palette will pick files from the ‘WebContent’ folder and sub-folders of the project.
• Link a CSS file to the current JSF page
  • Drag & drop from the Style Palette
  • Drag & drop the css file from the Package explorer / Navigator view
  • Drag & drop a style class from the Style Palette to a tag on the page. This should set the styleclass attribute of the tag (meta-data?) and should add the link tag at the top of the page.
• Set the styleClass attribute of a tag
  • Drag & drop a style class from the Style Palette to the tag
  • Select the style class from the context menu on the tag
  • Set the style class in the Property view. Browse the list of classes in the project

Support for Resource Bundles

TBD

Extensions

TBD

Some extra ideas

Here are some areas I think would need special attention:

• Unit tests!
• Support for general purpose HTML editing outside of the context of web tools projects (this would require a better split of the features in separate bundles)
• Support for Ajax toolkits (see ATF WTP sub-project)
• General code cleanup and review of API and internals

--PhilippeOmbredanne