Learn JSF with jAstrologer
By johnc on May 18, 2006
I'm working on a new series of tutorials for JSF in NetBeans IDE. We're going to put together an application called jAstrologer, which will take your name and birthday, query a database, call a web service, and spit out:
- Your zodiac sign
- Your birthstone
- The chinese year you were born in
- A daily horoscope
The first thing is - I hate the name. Anybody out there have a better name? Is there a famous astrologer that we could name this after? A quick search on Wikipedia brings up a certain Guido Bonatti from Forli (which happens to be the arch-nemesis of my town in Italy, Ravenna. Something like Springfield and Shelbyville in the Simpsons.) But I'm not sure about calling it BonattiVision or something.
But I digress... Here's the basic outline of what we want to cover in the series of articles:
- Getting Started
- Creating project
- Creating JSP and declaring taglibs
- Adding view and form tags
- Basic navigation
- Backing bean with simple operation
- Validating Data and Showing Error Messages
- Making the birthday field convert to a date, checking for valid entry
- Checking that the birthday is in the past, not the future
- Showing error messages for above validation
- Querying a Database
- Create an action to take the info, validate, and query db for astrological data
- Showing data from a data source
- Localizing and Formatting
- Extract all display text to properties files
- Using a CSS to do better formatting
- Adding Custom Components
- Incorporating Tomahawk components (inputDate for the date)
- Setting up the shared libraries on the server
- Web Service Integration
If anyone has any ideas about things that aren't covered, etc., let me know. So let's just right in and get started. Flash video coming soon.
First we're going to create the simplest web applicaiton possible. We'll just have one JSP page that asks for a name and birthday, then a success page that displays a success page. We'll have the web application display the success page no matter what the user writes in the fields, just to keep things simple.
Creating the Web Application
- Create a new Web Application project called jAstronomer. On the third page
of the New Web Application wizard, choose to add the Java Server Faces project
and leave the rest of the information at its default. Create the project.
Creating the Greeting Page
The IDE creates the web application with a default index.jsp and a welcomeJSF.jsp page. We'll ignore both of these pages and create our own greeting page.
- Rright-click the project node and choose New > JSP, name the file greeting, and click Finish.
- Now we need to declare the JSF tag libraries in the JSF file. Change the
<%-- <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>
To the following:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
Notice that you can use the code completion to help put in not just the tag name and attributes, but also the URIs of the tab libraries.
- Change the contents of both the title and h1 tags to Welcome to jAstrologer.
- Now let's add a JSF form to the file. In the Palette, click the JSF Form
button, drag it to below the h1 tag, and release. In the dialog box, leave
Empty Form selected and click OK. The IDE fills in the following code in bold:
<h1>Welcome to jAstrologer</h1> <f:view> <h:form> </h:form> </f:view> </body>
- We are going to use inputText components to get the user input
and a commandButton component to submit the form. In the Source Editor,
change the contents of the h:form element to the following:
<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>
Creating the Success Page
Now we're going to create a page that simply says congratulations.
- Create a new JSP file as described below. Name the file success.
- Change the contents of the file to the following:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Congratulations</title> </head> <body> <h1>Congratulations</h1> <p>You've successfully registered with jAstrologer.</p> </body> </html>
Notice that we're just using straight HTML here, so there's no need to declare the JSF tag libraries yet.
Setting Page Navigation
Page navigation in JSF is controlled by the faces-config.xml file, which is located under the Configuration Files node in the Projects window. For each page you set up a navigation rule which contains one or more navigation cases. Like we said above, we're just going to map the submit action from the commandButton to success.jsp, no matter what the user enters in the fields.
- Double-click faces-config.xml to open the file in the Source Editor.
- 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.
The following code is enterd in faces-config.xml:
<navigation-rule> <description> handle user input </description> <from-view-id>/greeting.jsp</from-view-id> </navigation-rule>
- Right-click inside faces-config.xml and choose Java ServerFaces
> Add Navigation Case. Set the following:
- From View: /greeting.jsp
- From Outcome: submit
- To View: /success.jsp
Click OK. The IDE enters the following code in faces-config.xml:
<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>
Configuring and Running the Application
Now let's set the IDE to display greeting.jsp when it runs the application and, finally, test out the application.
- Right-click the project and choose Properties.
- Click the Run node and type /faces/greeting.jsp in the Relative URL field. Then click OK.
- Right-click the project and choose Run. The IDE builds the project, starts
the application server, deploys the application, and shows the following page
in the external browser:
When you click the Submit button, you see the following:
So that's it for the very basic intro. Not rocket science, I know. But we've got the basics down and tomorrow we'll start doing more interesting stuff, like hooking it up to a backing bean and so forth. So stay tuned.