MyEclipse Logo
 

MyEclipse JSF Development Overview

Table of Contents

download the latest MyEclipse version

help and support
 

1. Introduction

This document presents an overview of JSF features available in MyEclipse.

To get a better feel for MyEclipse and learning more about it, please check out our product Documentation for more material.


 

2. Adding JSF Support to Web Projects

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:

  1. JSF Capabilities Wizard
  2. JSF Runtime libraries


2.1 JSF Capabilities Wizard

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 Project

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


2.2 JSF Runtime Libraries

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 configured.


Figure 2.2.1: JSF Runtime Libraries


3. Visual JSF Designer

See Visual JSF Designer Overview


4. Visual Faces-Config Editor

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 Editor. 


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.

  1. Flow Page
  2. Design Page
  3. Source Page


4.1 Flow Page

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


4.2 Design Page

Design page provides a form-based editing experience for the JSF configuration elements.


Figure 4.2.1 Form-based managed bean properties editing


4.3 Source Page

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 elements.


4.4 JSF Config-Editor Outline Page

JSF Config Editor has an advanced outline page that is associated with the editor.


Figure 4.4.1 Advanced JSF Config Editor Outline page

All elements in the outline view can be edited by selecting the "Properties" action from the context-menu of the node.


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


5. JSF Wizards

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.


5.1 JSF Elements wizards

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 code".


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


5.2 New JSF Page Wizard

New JSF pages that use JSP can be created by using the JSP (Advanced templates) wizard and then selecting the "Default JSF Template".


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" option.


Figure 5.2.2: JSF Wizard Page 2


6. Facelets Support

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


6.1 Facelets XHTML Page Wizard

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


6.2 Facelets Support in JSF Designer

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 Facelet pages


Figure 6.2.2 Drag-and-Drop Design view works for Facelets just the same as normal JSF


6.3 Code-Assist/Validation available for Facelets

Code-Assist is now available for Facelets, JSF, JSTL taglibs and also all associated tag attributes for XHTML pages in Facelets enabled projects.


Figure 6.3.1 Code-Assist for Facelets in JSF Designer

Code-assist is also available for JSF variables in Facelets pages.


Figure 6.3.2 Code-Assist for JSF-EL Variables

Both taglib and JSF Variable validation is also available for Facelets pages.


Figure 6.3.3 Taglib/JSF Variables validation for Facelets pages


7. Feedback

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 our Documentation Forum.  Please be sure to let us know which piece of MyEclipse material you are commenting on so we can quickly pinpoint any issues that arise.