This document presents an overview of JSF features available in
get a better feel for MyEclipse and learning more about it,
please check out our product
Documentation for more
In order to create a JSF project, first it requires an existing
MyEclipse Web Project. Then JSF Project capabilities can be
added to that project to give it JSF support. The JSF
Support includes configured web.xml, generated faces-config.xml,
and all necessary JSF runtime libraries. For more overview
information visit the following topics:
JSF Capabilities Wizard
JSF Runtime libraries
JSF Project support can be added to an existing MyEclipse Web
Project by using the "Add JSF Capabilities..." menu
entry in the MyEclipse menu. This menu item starts the
"Add JSF Capabilities" wizard.
Figure 2.1.1: Add JSF Capabilities to Web
The JSF Capabilities wizard allows selection of the JSF
implementation, and config path, servlet name and URL
pattern. Optional support for Facelets can also be added.
Figure 2.1.2: JSF Capabilities Wizard
Once the JSF Capabilities wizard completes, the Web Project will
be configured with JSF runtime libraries, web.xml will be
configured with necessary configuration, and a new
faces-config.xml file will have been added to the project as
shown in Figure 2.1.3.
Figure 2.1.3: Initial JSF Project Contents
MyEclipse comes bundled with multiple JSF implementations that
are configurable through the Project Capabilities preference
page. For each JSF Library module, the list of jars
associated with the library module can be modified. Other
options related to add JSF capabilities to a project can also be
Figure 2.2.1: JSF Runtime Libraries
MyEclipse has an advanced visual Faces Config editor that is the
default editor for faces-config.xml files. So simply
double-clicking the file will open the MyEclipse JSF Config
Figure 4.1: MyEclipse JSF Config Editor
registered for faces-config.xml files
There are 3 different features of the JSF Config Editor that are
covered in the following sections.
The JSF Config editor opens by default in the flow page.
This shows a visual representation of your
faces-config.xml. Each element can be selected and modified
by dragging-and-dropping around the design palette.
Figure 4.1.1 JSF Config editor's flow page
For an selected element, either navigation node or connection,
the context-menu will bring up actions that allow editing the
element or adding additional navigation rules.
Figure 4.1.2 Context-Menu for navigation node
New navigation nodes can be added to the flow page by selecting
the navigation node element in the palette and then
dragging-and-dropping onto the design view.
Figure 4.1.3 Adding a new navigation node
New navigation cases can be added by selecting the Navigate case
tool and then drawing a new connection between two existing
navigation nodes as shown in Figure 4.1.4.
Figure 4.1.4 Adding new navigation case
The flow page of the Visual JSF Config Editor contributes
several toolbar actions to the eclipse toolbar that are used for
the currently open design page.
Figure 4.1.5 JSF Config Editor Toolbar actions
Design page provides a form-based editing experience for the JSF configuration elements.
Figure 4.2.1 Form-based managed bean properties editing
The source page of the JSF Config Editor is based on the
MyEclipse XML Editor but has some additional features that are
shown in this section. One additional feature is
code-assist for class names for the managed-bean-class element as
shown in Figure 4.3.1.
Figure 4.3.1 Code-Assist for Managed Bean class
Because the JSF Config Editor is based on the MyEclipse XML
Editor, it also picks up code-assist, documentation, and
validation for all faces-config elements. Code-assist for
JSF 1.2 schema is shown in Figure 4.3.2.
Figure 4.3.2 Code-Assist for JSF 1.2 Schema
Validation for faces-config XML elements is also available in the
JSF Config Editor as shown in Figure 4.3.3.
Figure 4.3.3 Validation for faces-config XML
JSF Config Editor has an advanced outline page that is associated with the
Figure 4.4.1 Advanced JSF Config Editor Outline
All elements in the outline view can be edited by selecting the "Properties" action from the context-menu of
Figure 4.4.2 Edit actions to invoke property editor
Below is the JSF managed bean editor that is opened when the
"Properties" action in the previous figure is selected.
Figure 4.4.3 Managed Bean editor
MyEclipse provides basic and advanced wizards for all of the JSF
config elements. These wizards can be invoked from the
outline view of JSF Config Editor and also from the tree page.
New Managed Bean wizard allows configuration of Name, scope and
properties. Code-assist is available for existing Java
classes that are going to be declared as managed beans.
This wizard can also create new managed beans by specifying a new
class name and then selecting the "Generate Source
Figure 5.1.1 Manage Bean Wizard
New Navigation rule wizard allows browsing for the source JSF view.
Figure 5.1.2 New Navigation Rule Wizard
New validator wizard.
Figure 5.1.3 New Validator Wizard
New Converter Wizard.
Figure 5.1.4 New Converter Wizard
New Referenced Bean Wizard
Figure 5.1.5 New Referenced Bean Wizard
New Component Wizard
Figure 5.1.6 New Component Wizard
New RenderKit Wizard
Figure 5.1.7 New RenderKit Wizard
New JSF pages that use JSP can be created by using the JSP
(Advanced templates) wizard and then selecting the "Default
Figure 5.2.1: JSF Wizard Page 1
On page 2 of the new JSP Page wizard, in the "template to
use" field select the "Default JSF Template"
Figure 5.2.2: JSF Wizard Page 2
For existing JSF Projects, add Facelets support by using
"Add JSF Facelets capabilities..." wizard.
Figure 6.1 Add JSF Facelets Capabilities Wizard
Facelets support can also be directly added to a project at the
same time as JSF is being added in the JSF capabilities wizard as
shown in Figure 6.2.
Figure 6.2 Add Facelets support at the same time
as adding JSF support
To create a new Facelets page, start the new XHTML File wizard
from MyEclipse category and in the XHTML Wizard there is a new drop
down available for creating a Facelets XHTML page.
Figure 6.1.1 Facelets XHTML Page Wizard
The MyEclipse Visual JSF Designer will now support visually
editing Facelets XHTML pages. Below you can see opening a
Facelets XHTML page. And below that notice that
JSF/Facelets components are supported.
Figure 6.2.1 Visual JSF Designer also supports
Figure 6.2.2 Drag-and-Drop Design view works for
Facelets just the same as normal JSF
Code-Assist is now available for Facelets, JSF, JSTL taglibs and
also all associated tag attributes for XHTML pages in Facelets
Figure 6.3.1 Code-Assist for Facelets in JSF
Code-assist is also available for JSF variables in Facelets
Figure 6.3.2 Code-Assist for JSF-EL Variables
Both taglib and JSF Variable validation is also available for
Figure 6.3.3 Taglib/JSF Variables validation for
We would like to hear from you! If you liked this overview, have
some suggestions or even some corrections for us please let us
know. We track all user feedback about our learning material in
Please be sure to let us know which piece of MyEclipse material
you are commenting on so we can quickly pinpoint any issues that