Developing Faces (JSF) applications

Though there are several Web technologies that you can work with to create dynamic Web applications, JavaServer Faces (JSF) gives you the ability to create form-based applications easily. Several views allow you to easily implement JavaServer Faces technology in your Web application. The Page Data view (shows the defined data sources), and the Enhanced Faces Components and Standard Faces Components drawers in the Palette view, let you add user interface (UI) components and define data sources together for the page. The Data and Services drawer in the Palette view lets you define new data sources and drag data components such as JavaBeans™ and relational record lists to the page.

Remember: The terms JSF and Faces are used interchangeably. The phrases JSF page, Faces JSP, and JSF enabled JSP are used interchangeably.

Remember: The following browsers are supported for displaying Faces components: Microsoft® Internet Explorer 5.5 or above, Mozilla 1.3 or above, or Netscape 6.1 or above.

To create a JSF application:

1. Create a JSF enabled dynamic Web project. The Web project is the container for all of your Web application resources.

2. Create Faces JSP files in that project. A JSF enabled JSP file becomes a Web page in your dynamic Web project.

3. Create page content. Add data viewing components to the JSP file. From the Data and Services drawer on the Palette view, drag a component to your Web page. You can add general data components, such as Java™ beans or Web services, or you can add relational database records.

4. Continue to design your page by dragging other JSF components from the palette to the page. You can drop components such as input fields, command buttons, hyperlinks, tabbed panels, and media players.

   For more information about how to add a specific component refer to:

   • Adding data viewing components to a JSF page.

   • Adding page components to a JSF page.

   • Adding navigation components to a JSF page.

   • Adding input components to a JSF page

   • Adding output components to a JSF page

   • Adding panel components to a JSF page

   • Adding behaviors to JSF components

   • Adding AJAX components to a JSF page

   • Adding sub tags to a JSF page

   • Adding event handlers to a JSF component

5. Edit the properties for each component. When you have focus on a component in the Design or Source page of Page Designer, the Properties view displays the properties available for that component. If you add a Faces component directly from the palette, you can bind the component to a defined data source in the Properties view for the component.

6. Use the Quick Edit view to add scripted events to your Web pages. For example, you can assign actions to Faces components in your Faces JSP file.

7. Test your JSP files periodically as you develop your pages using Faces components. Because Faces components use dynamic data, you should run on server to preview. The preview page (located on the tab at the bottom of the Faces JSP file) will not be as accurate.

8. Run the Web project on the server. In the Enterprise Explorer, right-click the file and select

   Run As | Run on Server. Refer to the server documentation to learn more about testing and deploying your Web application.

Restriction: To link to a Faces JSP file from a HTML file change the referenced filename from <filename>.jsp to <filename>.faces in the HTML page. Do not rename the actual Faces JSP file extension. When you change the referenced link to a .faces extension in the HTML file, Links Builder will not work.

To learn more about the steps to creating a cohesive Web site, refer to Creating a Web site.

To learn more about displaying dynamic information in JSF enabled Web pages, do the following tutorial:

Tutorial: Display dynamic information on Web pages with JavaServer Faces. This tutorial will teach you how to design a dynamic Web site that functions as a newspaper's classified advertising section. The Web site is a complete J2EE Web application that uses JavaServer Faces (JSF) components and Service Data Objects (SDO) components. The Web application uses JSF technology to create dynamic Web pages that link to a database that stores classified advertising data.

Tutorial: Display dynamic information on Web pages with JavaServer Faces. This tutorial will teach you how to design a dynamic Web site that functions as a newspaper's classified advertising section. The Web site is a complete J2EE Web application that uses JavaServer Faces (JSF) components and Service Data Objects (SDO) components. The Web application uses JSF technology to create dynamic Web pages that link to a database that stores classified advertising data.

You can also find more information on JSF in the developerWorks® JSF forum.

Latest headlines from developerWorks

 

Related concepts

What is JavaServer Faces?

Tools for JSF development

 

Related reference

Adding JSF client side support to an HTML page

---