MyEclipse Logo

MyEclipse Visual JSF Designer Overview


Table of Contents

  1. Introduction
  2. JSF Content Detection
  3. Editor Overview
  4. Design Support for JSF
    1. Selection and Drag-and-Drop Support
    2. Design Palette
    3. Context Menu
    4. Non-Visual Components
    5. Properties View
    6. Outline View
  5. Source Editing
    1. Code Assist
    2. Validation
  6. User Feedback

1. Introduction

This overview covers some of the important features in the new Visual JSF Designer available in MyEclipse 5.5 and later.

While MyEclipse has offered a Visual JSP Designer in the past, the advanced Visual JSF designer now available in MyEclipse 5.5 and later offers many new features to JSF developer like dynamic analysis of build path to determine the taglibs available on the palette, and rendering of advanced components, e.g. dataTables and panelGrid. 

2. JSF Content Detection

When opening a JSP file, MyEclipse will try to determine if it is a JSF file.  If a JSF file is detected, the Visual JSF Designer which has advanced JSF support will be used instead of the default Visual JSP Designer.  So for most JSF files, simply double-clicking on the file and it will be opened by the Visual JSF Designer.  All other JSPs will be opened in the standard Visual JSP/HTML Designer.

If the JSF Content Type detection does not properly detect a JSF file that has been opened, then simply open the JSF file by using the open > with menu and choosing the MyEclipse Visual JSF Designer.


Figure 2.1

3. Editor Overview

The editor layout of the JSF Designer features a split-page with Design and Source by default.  There is a Preview page that can be invoked to see a preview of the current page.  Within the Design view there is a embedded toolbar and palette that can be used.


Figure 3.1

The Palette that is embedded in the Design view has all the JSF HTML and Core components that are needed for JSF development.

The editor contains a smart sash bar in between the source and design views that can be used to quickly rearrange the layout of the editor, either by maximizing the source or design views.

The Preview page shows a preview of the JSF page and will try to render the components are close as possible to their runtime behavior.

 

4. Design Support for JSF

This section highlights the design support the designer has for working with JSF components.  This includes a WYSIWYG Design view that renders the JSF components approximate behavior at runtime.  Many advanced editing features are available directly in design view and are exposed by context menu and properties view.

  1. Selection and Drag-and-Drop support
  2. Designing from Palette
  3. Context menu
  4. Non-Visual Components
  5. Properties View

4.1 Selection and Drag-and-Drop support

Selection of any visual and some non-visual components can be selected by simply clicking on the element in the design view.  The current selection is always shown by a selection box that surrounds the selected element.  The supporting views like outline and properties will be synchronized to this selection immediately. 

Anywhere the cursor is placed over a component, the tool tip text will display the tag name. 


Figure 4.1.1

Non-visual components are also given a visual representation in the design view and can be selected to show more information.


Figure 4.1.2

Components in the design view support advanced Drag-and-Drop support that is shown below.  In Figure 4.1.3, a h:column component is being rearranged to be placed in front of another h:column under the h:dataTable component.  After dragging there are multiple visual cues that show what is being dragged and where the drop location will be.  Notice how the tool tip gives precise information on where the drop is going to occur.


Figure 4.1.3

4.2 Designing Palette

The JSF HTML and JSF Core components are available in the Palette.  To add them to the design view, simply Drag and Drop them from the Palette to the Design area.  A drop location will be shown before the drop occurs as shown in Figure 4.2.1.


Figure 4.2.1

For complex layouts with multiple nested components, the Design view makes the location of the boundaries of various nested components clear.


Figure 4.2.2

Also, when dropping a component, there is drop location feedback shown to make a precise drop possible.  This makes designing complex JSF layouts much easier.


Figure 4.2.3

4.3 Context menu

When in the Design view, the context menu is a valuable tool for editing JSF components.  For each JSF component the context menu will show specific edit actions that are available for that JSF component.  Figure 4.3.1 shows just some of the edit actions available in the context menu.


Figure 4.3.1

For JSF dataTables, there are several important context menu actions that make sense in the table context. 


Figure 4.3.2

4.4 Non-Visual Components

Many JSF components can have nested non-visual tags.  In some cases, the JSF Designer allows these non-visual tags to be edited within the design view.  In Figure 4.4.1, notice that the selected tag has a nested JSF core tag that is visible in the design view.


Figure 4.4.1

For some non-visual child components such as converters and validators can be seen as a semi-transparent icon located at the top-right of the element as shown in Figure 4.4.2.


Figure 4.4.2

To edit these non-visual components, select the element and notice the "pin" icon is shown at the top-right of the element.  By clicking this "pin", now the non-visual component icon can be selected, see Figure 4.4.3.


Figure 4.4.3

4.5 Properties View

As selections are made with the JSF Designer, the properties view is synchronized to allow editing and inspection of that elements attributes.  The "Quick Edit" mode shows the most frequently used attributes. The "Attributes" tab provides a full list of all the element's attributes.  The Properties view modes are shown in Figures 4.5.1 and 4.5.2.  


Figure 4.5.1


Figure 4.5.2

When an element is selected, in the properties view at the top-right hand corner, there is an element navigation drop-down that allows selection of the element's parent hierarchy, see Figure 4.5.3.    Selecting any element in this list will allow editing of that elements attributes.


Figure 4.5.3

4.6 Outline View

When the JSF Designer is open, the outline view allows visual inspection of the DOM structure.  Elements can be selected in the outline view and also edited through context menu.  It also allows elements to be dragged and dropped within the view to reorder the DOM structure.


Figure 4.6.1 JSF Designer Outline View


Figure 4.6.2 Outline View Context Menu


5. Source View

The JSF Designer source view offers Code assist and validation.  There is code-assist for EL attributes and errors or warnings are shown in both editor rulers and Problems view as shown in Figure 5.1.


Figure 5.1 Source View

5.1 Code Assist

Enhanced JSF EL Code-Assist 

Code-assist and validation of EL contexts.  One specific new feature is that row variables (var="") in a dataTable are now validated and the Designer provides Code-Assist for EL variables.

Example of how dataTable variables (var="") is now both validated and Code-Assist is provided.

Advanced code-assist is also available for the h:dataTable var argument, providing content-assit inside the scope of the h:dataTable tag for the variable defined with the var attribute.

In addition, if the var is from a strongly-typed collection (e.g. List<Person>) then the content-assist for the var argument inside the h:dataTable tag will provide additional insight into the argument's properties.

Content-assist for valid navigation-cases is also available in the JSF editor, allowing you to autocomplete the action value of tags like commandLink

5.2 Validation

The JSF Designer source view supports validation by marking errors and warnings in editor rules, editor source, and the problems view.  There is also "as-you-type" validation of JSF attributes in the source editor as shown in Figure 5.2.1.


Figure 5.2.1 JSF Validation Support

In addition to these forms of validation, the JSF editor will also provide validation of valid navigation-cases as defined in the faces-config.xml file, marking any invalid navigation cases used in the JSP page.

6. User Feedback

If you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum.