MyEclipse Logo
 

MyEclipse Facelets Tutorial

Table of Contents

download the latest MyEclipse version

help and support
 

1. Introduction

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

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 Resources section.

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.

 


1.1 Suggested Audience

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 or online.

To learn more information about the topics presented in this tutorial please have a look at the links in the Resources section.  To learn more about MyEclipse in general, please visit the product Documentation  available online.


1.2 System Requirements

This tutorial requires MyEclipse to have already been installed.

If you notice portions of this tutorial looking different than the screens you are seeing, please let us know and we will make sure to resolve any inconsistencies.


2. Getting Started with Facelets

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 Development tutorial.  

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.  See the 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 AppServer Deployment Tutorial


2.1 Facelets Project Support

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

There are 2 ways to add Facelets support to your project:

  1. For existing JSF Projects, add Facelets support by using "Add JSF Facelets capabilities..." wizard.



  2. 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 Facelets development.

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 Technical Notice - Facelets, JSF 1.2 RI, and Tomcat.


2.2 Designing Facelet Pages with XHTML

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

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.


2.3 Facelets Code-Assist and Validation

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.


3. Running the Facelets Demo Project

Below are detailed instructions on how to get the Facelets Demo project that was used to make this tutorial.

  1. Download the demo to your disk drive: MyBlogFacelets.zip (right-click save-as)

  2. Switch to MyEclipse perspective

  3. Open the MyEclipse Servers view: Window > Show View > Servers

  4. Start the integrated MyEclipse Derby Server



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

  6. Explanation of project contents:



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

  8. Deploy MyBlogFacelets to configured server

    Right-click AppServer in Server view, select Manage Deployments, click Add, select MyBlogFacelets in dropdown, click Finish.

  9. Start Appserver from Server view.

  10. Test application using entry page:  http://localhost:8080/MyBlogFacelets/

4. FAQ

This section will list some of the more common questions that can come up while performing the tasks outlined in this tutorial.

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

5. Resources

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.


6. Feedback

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