Alchemist

Creating the Greeting Page

1. In the Projects window, right-click the project node and choose New > JSP. Name the file greeting. Make sure the JSP File (Standard Syntax) option is selected and click Finish. The IDE creates the new JSP file and opens it in the Source Editor. Also, note that the file is added to the Web Pages node in the Projects window.
2. In the Source Editor, declare the JSF tag libraries in greeting.jsp. Do this by adding the following code to the top of the file:

   <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
   <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

   Note that you can make use of the IDE’s built-in support for code completion. As you type, press Ctrl-Space to list suggestions based on the context. In this manner, code completion can help you add tag names and attributes, such as the URIs of the tab libraries.

3. Change the contents of both the title and h2 tags to Welcome to jAstrologer.
4. Now add a JSF form to the file. In the Palette (Ctrl-Shift-8), expand the JSF category. You can drag-and-drop items from the Palette directly into the Source Editor. Click the JSF Form button, drag the item to a point below the h2 tags, and release the mouse button. In the dialog box that displays, leave Empty Form selected and click OK. The IDE fills in the following code (shown in bold):

   <h2>Welcome to jAstrologer</h2>
   
   <f:view>
       <h:form>
       </h:form>
   </f:view>

5. You can use inputText components to get user input and a commandButton component to submit the form. In the Source Editor, change the contents of the <h:form> tags to the following (changes in bold):

   <f:view>
       <h:form>
           <p>Enter your name: <h:inputText value="name" /></p>
           <p>Enter your birthday: <h:inputText value="birthday" /></p>
           <h:commandButton value="Submit" action="submit" />
       </h:form>
   </f:view>

   To format your code, right-click in the Source Editor and choose Format (Alt-Shift-F)

Creating the Success Page

1. Now create a JSP page that says ‘Congratulations’.
2. Create a new JSP file as described above. Name the file success.
3. Change the contents of the file to the following:

Setting Page Navigation

Page navigation in the JSF framework is controlled by the faces-config.xml. For each JSP page in the project, you set up a navigation rule in faces-config.xml which contains one or more navigation cases. Here, you can simply map the submit action from the commandButton to success.jsp, so that the user sees a success message no matter what is entered in the fields.

1. In the Projects window, double-click faces-config.xml to open the file in the Source Editor. In the toolbar above the file, click XML to display the file in plain XML.
2. Right-click anywhere in the file and choose Java ServerFaces > Add Navigation Rule. Type /greeting.jsp in the Rule from View field and optionally enter a description of the rule.

Click Add. The following code is entered into faces-config.xml:

<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
</navigation-rule>

———————————————————–

• From View: /greeting.jsp
• From Outcome: submit
• To View: /success.jsp

<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
    <navigation-case>
        <from-outcome>submit</from-outcome>
        <to-view-id>/success.jsp</to-view-id>
    </navigation-case>
</navigation-rule>