Chapter 3. Getting Started

3.1. Required Installations
3.2. Rapid View
3.2.1. Project Creation
3.2.2. JSF Tools Configuration File Editor
3.2.3. Creating JSP Pages
3.2.4. JSF Tools Rapid View Template

The following sections detail the installations required to use JSF Tools and provide a quick overview of the tool and its use.

JBoss Developer Studio JSF Tools 3.0 requires the following installations to be present on the user's system:

OR ALTERNATIVE. I prefer the above as easier to maintain and the number of links not confined to two per product


Section Feedback

JBoss Developer Studio Project Creation describes the steps to create a new project in JBoss Developer Studio.

Procedure 3.1. JBoss Developer Studio Project Creation

Continue by defining the JSF Tools project type as described in JSF Tools Project Creation:

Procedure 3.2. JSF Tools Project Creation

  1. Define the Project Type

    1. Click on the JSF Project label by expanding the JBoss Tools WebJSF folders.

    2. Click the Next button to proceed.

    Result:

    The New JSF Project - Create JSF Project screen displays.

    Figure 3.2. JSF Tools Project Attributes


  2. Define the Project Attributes

    Define the JSF Project Attributes according to the options displayed in Table 3.2, “New JSF Project”




  3. Access the Web sub-screen

    Click Next to proceed.

    Result:

    The New JSF Project - Web screen displays.

    Figure 3.3. JSF Tools New JSF Project - Web


  4. Define the Web Attributes

    Define the JSF Project Web Attributes according to the options displayed in Table 3.5, “New JSF Project - Web”



  5. Open the Web Development perspective.

    1. Click the Finish button to complete the project setup.

      Result:

      A dialog will appear prompting the user to open the relevant perspective.

      Figure 3.4. JSF Tools Open Perspective Dialog


    2. Click the Yes button to display the Web Development perspective.

      Result:

      The project is configured and the Web development perspective is displayed.

      Figure 3.5. JSF Tools Web Development Perspective


Section Feedback

The main configuration file faces.config.xml can be opened in a custom editor. Accessing the JSF configuration file editor details the steps to open the editor.

Procedure 3.3. Accessing the JSF configuration file editor

  1. Access the Editor

    1. Access the faces-config.xml file by expanding the Project NameWebContentWEB_INF folders in the Package Explorer view

    2. Double click on the faces-config.xml file.

    Result:

    The faces-config.xml file is opened in its custom editor, defaulting to the Diagram view

    Figure 3.6. JSF Tools faces-config.xml Editor


    For an example of the use of the Diagram view to create pages refer to Section 3.2.3, “Creating JSP Pages”

  2. Explore the different views

    1. Click on the Tree tab to render the Tree view.

      Result:

      The faces-config.xml file is opened in the Tree view

      Figure 3.7. JSF Tools faces-config.xml editor - Tree view


    2. Click on the Source tab to render the Source view.

      Result:

      The faces-config.xml file is opened in the Source view

      Figure 3.8. JSF Tools faces-config.xml editor - Source view


Section Feedback

JSP pages can be created in JBoss Developer Studio by using the Diagram view of the faces-config.xml editor.

Procedure 3.4. Creating JSF Tools Pages

  1. Access the Diagram view

    Once the steps outlined in Step 1 of Accessing the JSF configuration file editor are completed, click on the Diagram tab to render the Diagram view.

    Result:

    The faces-config.xml file is opened in its custom editor, defaulting to the Diagram view

    Figure 3.9. JSF Tools faces-config.xml Editor


  2. Access the New View dialog.

    1. Right click within the editor and select Rule from the displayed menu.

      Result:

      The New View dialog is displayed.

      Figure 3.10. JSF Tools New View - JSF process View


    2. Enter the file's relative path and chosen name in the From-View-ID: textbox.

  3. Define the Project Attributes

    Select the page Template to use from the available options displayed in Table 3.7, “Template”


  4. Generate the page.

    Click the Finish button to generate the required page.

    Result:

    The page is displayed graphically in the Diagram view.

    Figure 3.11. JSF Tools Graphical representation of the generated page.


  5. Begin working with the page.

    1. Access the login.jsp file by expanding the Project NameWebContentWEB_INFpages folders in the Package Explorer view.

      The pages folder corresponds to the path defined by the user in the New View dialog of Figure 3.10, “JSF Tools New View - JSF process View”.

    2. Double click on the login.jsp file.

    Result:

    The login.jsp file is opened in the JSP editor.

    Figure 3.12. JSP Editor


    The file can now be edited and previewed in a single screen by clicking the Visual/Source tab or edited and previewed individually by clicking the Source and Preview tabs respectively. For further details regarding the JSP editor refer to Section 9.2.1, “Placeholder for a link”

Section Feedback

A description of a "rapid view" following on from the previous view or possibly a new "rapid view" that is considered important enough to discuss.

Procedure 3.5. (Feature) (Procedure) rapid view

  1. Define the Project Type

    1. Click on the JSF Project label by expanding the JBoss Tools WebJSF folders.

    2. Click the Next button to proceed.

    Result:

    The New JSF Project - Create JSF Project screen displays.

    Figure 3.13. JSF Tools Project Attributes


  2. Define the Project Attributes

    Define the JSF Project Attributes according to the options displayed in Table 3.8, “New JSF Project”




  3. Access the Web sub-screen

    Click Next to proceed.

    Result:

    The New JSF Project - Web screen displays.

    Figure 3.14. JSF Tools New JSF Project - Web


  4. Define the Web Attributes

    Define the JSF Project Web Attributes according to the options displayed in Table 3.11, “New JSF Project - Web”



  5. Open the Web Development perspective.

    1. Click the Finish button to complete the project setup.

      Result:

      A dialog will appear prompting the user to open the relevant perspective.

      Figure 3.15. JSF Tools Open Perspective Dialog


    2. Click the Yes button to display the Web Development perspective.

      Result:

      The project is configured and the Web development perspective is displayed.

      Figure 3.16. JSF Tools Web Development Perspective


    Feature name

    Futher details regarding the feature are available in the following procedures:

Section Feedback
Section Feedback