< Previous | Next >

Lesson 3: Populate the Web site with Web pages

This lesson illustrates how to populate the Web site with Web pages

Once you have your Web site laid out using page icons in Web Site Designer, you are ready to begin creating your pages. The page icons are currently bordered by broken lines; this indicates that the file represented by the page icon, or the actual page, does not exist. After the files are created, the page icons will have solid lines as borders

  1. For this tutorial, you need to have the Base Faces Support facet installed for your project. If you did not select this facet when you created the project, you can do so now by selecting Project > Properties > Project Facets. This facet enables you to create JSP Web pages that are enabled to use JavaServer Faces technology.
  2. Right click the page icon for the View All Classifieds page, and from the pop-up menu click Create Page. The New Web Page wizard appears.

    JavaServer Faces is a technology developed by Sun Microsystems that helps you build user interfaces for dynamic Web applications that run on a server. The JavaServer Faces framework manages UI state across server requests and offers a simple model for the development of server-side events that are activated by the client. JavaServer Faces is based on a model-view-controller (MVC) framework. For JavaServer Faces, this means that the controller is a servlet, the model is represented by JavaBeansTM, and the view is comprised of JavaServer Faces components with little or no application code. The goal of this model is to separate content from presentation.

    In Rational® Software Development Platform, tools such as Faces components/are available to help you use this technology in your Web applications. There is a JavaServer Page (JSP) custom tag library for expressing a JavaServer Faces interface within a page that the Rational Software Development Platform has conveniently used to create a Faces JSP wizard. This wizard helps you create JSP files that are enabled to use the Faces components. Faces components let you develop a Web application by dragging components from a Faces drawer in the Palette view and dropping them on the Web pages you are creating.

    For example, you can quickly drag an input text field and drop it to a form on the page. Then you can drag a Submit button next to the input text field. Finally, you can connect the input text field to your data source. This would enable end users to enter data from the Web application to your data source.

    Another benefit of applications built using Faces components is that the user interface is rendered independently of the underlying program logic. This means you can visually create an application that can dynamically access data and run equally well on a browser or hand-held device.

    You can also learn how to use Faces components to add data connections to your Web site in the Display dynamic information on Web pages with JavaServer Faces tutorial.
  3. Accept the default folder (/ClassifiedsTutorial/WebContent).
  4. In the File Name field, type the name for your new file, all_records. Though it can be convenient to name your file the same as the navigation label you assigned the page when laying out your site, you can also name your files in a way that makes sense for the resources on your local system, and use the navigation labels only as a naming convention for your future navigation.
  5. Ensure that HTML is selected in the Markup Language field, which you can view by selecting the Options button. For the rest of the fields, accept the defaults.
  6. Click Finish. The new file is opened in Page Designer. Save and close the file. The Web Site Designer appears again.
  7. You can now see that the View All Classifieds icon has a solid border and a small blue diamond icon (diamond icon) to indicate that a JSP file has been associated with it, while the other page icons still have a broken border to show that files have not yet been created for them.

  8. Continue creating JSP pages for the other page icons in the same manner. For this tutorial, follow this naming convention:
    • Post a Listing - new_record
    • Update Listing - update_record
    • Filtered Listings - filtered_records
  9. Press Ctrl+S to save the Web Site Navigation.
When you are finished creating the four pages, your Project Navigator view shows all of the new resources under the WebContent folder:

You have now created blank pages for each of the pages you will have in your Web site. To start the next lesson, click Next

< Previous | Next >