Welcome to the MyEclipse Facelets tutorial. This tutorial
gives an overview of some of the Facelets-based features in
the MyEclipse. The project shown in the
examples that is used in this tutorial can be downloaded in ZIP
format. See the
Resources section below for more
Facelets is a light-weight, templating framework backed by
industry standard JavaServer Faces. Facelets provides a
highly performant, JSF-centric view technology without depending
on JSP pages. Facelets tries to correct many concerns with
JSF by focusing on templating, re-use, and ease of
development. For more information on learning about
Facelets in general see links in the
The MyEclipse tooling for Facelets includes support for creating
projects and editing XHTML page views using a new Visual JSF
Designer. The Visual JSF Designer supports WYSIWYG,
Code-Assist, and Validation for JSF and Facelets pages.
This tutorial is intended for developers who are somewhat
familiar with MyEclipse or Eclipse so you recognize navigation
within the IDE, and understand some of the more common views like
the debugger. It is also encouraged that the reader have a
basic understanding of JSF and how to create managed beans,
navigation rules, etc. If not, please see the JSF
documentation available elsewhere in the MyEclipse documentation
To learn more information about the topics presented in this
tutorial please have a look at the links in the
section. To learn more about MyEclipse in general, please
visit the product
This tutorial requires MyEclipse to have already been installed.
If you notice portions
of this tutorial looking different than the screens you are
let us know and we will make sure to
resolve any inconsistencies.
This tutorial gives an overview of the Facelets development
features and demonstrates how to quickly get started with Facelets
in MyEclipse. The first step in getting started with
Facelets is adding Facelets support to a MyEclipse Web Project or
MyEclipse JSF Project, see
Section 2.1 for more information. If
you are not familiar with MyEclipse Projects, please review the
MyEclipse Web Project
Once you have configured a project with Facelets support you can
begin to create Facelets XHTML pages using the new XHTML page
wizard and the MyEclipse JSF Designer. The JSF Designer is
a JSF/Facelets centric visual designer that is unique to
MyEclipse. It has support for WYSIWYG
development of advanced JSF components and Facelets pages.
Section 2.2 for more detailed information
on how to use this new JSF Designer.
Once your Facelets project is configured you can deploy to it to
your AppServer of choice. If you are not familiar AppServer
deployment in MyEclipse, please review the
Configuring a project with Facelets support provides your project
with access to all Facelet libraries needed for development and
runtime deployment. Also, Facelets code-assist and
validation will be available to projects configured with Facelets
There are 2 ways to add Facelets support to your project:
For existing JSF Projects, add Facelets support by using
"Add JSF Facelets capabilities..." wizard.
For existing Web Projects only, use "Add JSF
capabilities..." wizard and then include Facelets support.
Once you have indicated that you want to add Facelets support to
a project with either of the preview 2 options, you will see the
Facelets Capabilities wizard shown below:
The only option that you can configure in the Facelets
Capabilities wizards is what the default template files extension
should be. Based on this setting, MyEclipse will modify
your project's web.xml file and add the appropriate entries for
Special Note 1: As you can see in the Facelets
wizard, Tomcat users need to view the detailed documentation on
how to configure the web.xml to ensure proper operation.
For more information see the
Notice - Facelets, JSF 1.2 RI, and Tomcat.
Facelet pages can either be written as XHTML or JSPX
documents. In MyEclipse, to take advantage of all
editing features you will need to create your facelets pages as
To create a new Facelets pages, use the new XHTML Wizard and
select the Facelets Template as shown below:
All Facelets/XHTML pages need to be opened with the non-default
MyEclipse JSF/Facelets Designer. By default all XHTML pages
are opened in the MyEclipse Visual XHTML Designer. This is
just a generic XHTML designer and doesn't have any specific
support for Facelets development. Instead open
Facelets/XHTML pages by using the open-with menu to select the
MyEclipse JSF/Facelets Designer. After opening the file
using this method once, all subsequent openings of that file will
use the MyEclipse JSF/Facelets designer automatically.
The MyEclipse JSF/Facelets Designer features include a DnD palette, split view source/design, and related toolbar. The palette has JSF HTML and Core library support as well as the subset of JSTL supported by Facelets.
The new MyEclipse JSF/Facelets Designer supports visually editing advanced JSF components like h:dataTable. Notice in the figure below that you can resort columns by dragging and dropping them in design view.
The MyEclipse JSF/Facelets Designer offers Code-Assist for all Facelets, JSF, JSTL tags. Make sure that you have the proper namespace added to your <html> tag to enable CA.
Code-Assist is available for Facelets, JSF, JSTL taglibs and also all associated tag attributes.
Code-assist is also available for JSF variables.
Both TagLib and JSF Variable validation is also available for facelet pages.
Below are detailed instructions on how to get the Facelets Demo
project that was used to make this tutorial.
Download the demo to your disk drive:
Switch to MyEclipse perspective
Open the MyEclipse Servers view: Window > Show View >
Start the integrated MyEclipse Derby Server
Import this project into your workspace: File > Import, point
to downloaded archive file, Click Finish to import project.
Note: This project has JPA support that is already configured to
use the integrated MyEclipse Derby database and included sample
schema MYBLOG. Read the
JPA tutorial for
more information on JPA support in MyEclipse.
Explanation of project contents:
Configure Tomcat 6.x or Glassfish 2.x AppServer connector (note this are just 2 servers that have been tested and known to work)
To configured an appserver, go to Window > Preferences > MyEclipse > Application > (Tomcat 6.x / Glassfish 2.x) > Browse to installation location. Then switch server to enable, press OK.
- Deploy MyBlogFacelets to configured server
Right-click AppServer in Server view, select Manage Deployments, click Add, select MyBlogFacelets in dropdown, click Finish.
- Start Appserver from Server view.
- Test application using entry page: http://localhost:8080/MyBlogFacelets/
This section will list some of the more common questions that can
come up while performing the tasks outlined in this tutorial.
I'm getting strange deployment errors in Tomcat. What is wrong?
- There is a bug with some versions of Tomcat 5.x/6.x with the JSF 1.2 RI. If you are using this combination, please read this technical notice for more information.
In this section we want to provide you with additional links to
resources that supplement the topics covered in this tutorial.
While this is not an exhaustive list, we do make an effort to
point to the more popular links that should provide you with
diverse, high-quality information.
We would like to hear from you! If you liked this tutorial, has
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