|
|
This overview covers some of the important features in the
Visual JSF Designer available in MyEclipse.
MyEclipse's advanced Visual JSF designer contains many features to speed
JSF development. Examples of these include dynamic
analysis of the build path to determine the taglibs available on the
palette, and rendering of advanced components, e.g. dataTables
and panelGrid.
|
|
|
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-click 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 Open with action
|
|
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 MyEclipse Visual JSF Designer
The Palette that is embedded in the Design view
has all the JSF HTML and Core components that are needed for JSF
development.
Figure 3.2 Palette View
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.
Figure 3.3 Maximize Pane
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.
Figure 3.4 Preview page
|
|
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.
-
Selection and Drag-and-Drop support
-
Designing from Palette
-
Context menu
-
Non-Visual Components
-
Properties View
|
|
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 Tooltip text
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 Design view
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 Advanced Drag-and-Drop
support
|
|
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 Designing Palette
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 Nested Elements
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 Drop location
|
|
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 Context menu actions
For JSF dataTables, there are several important context menu
actions that make sense in the table context.
Figure 4.3.2 Table context menu actions
|
|
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 Nested JSF core tag
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 Non-visual child components
To edit these non-visual components, select the element and
notice the "pin" icon is shown at the top-right of the
element. The non-visual component icon can be selected by clicking this "pin", see Figure 4.4.3.
Figure 4.4.3 Select non-visual component
|
|
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 Properties View - Quick Edit tab
Figure 4.5.2 Properties View - Attributes tab
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 Element navigation drop-down
|
|
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
|
|
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
|
|
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.
Figure 5.1.1 Data Table variable validation
Advanced code-assist is also available for the h:dataTable var argument, providing content-assist inside the scope of the h:dataTable tag for the variable defined with the var attribute.
Figure 5.1.2 Content-assist inside the h:dataTable tag
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. 
Figure 5.1.3 Content-assist showing argument 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 
Figure 5.1.4 Content-assist for valid navigation-cases
|
|
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. 
Figure 5.2.2 Validation of valid navigation-cases
|
6.
User Feedback
If you have comments or suggestions regarding this document
please submit them to the
MyEclipse
Documentation Forum.
|
