December 2004 [Revision number: V1-2004Q2-U5]
In this walkthrough, you use the Sun Java Studio Creator integrated development environment (IDE) to create a simple example, Hello Web. The example asks you to input your name and then repeats it back to you.
Contents
-
-
-
-
-
Before you use this tutorial, you should have the Java Studio Creator development environment installed on your system and understand the basic parts of the IDE. A familiarity with the Java programming language and with object-oriented concepts is also helpful. Getting Started With Java Studio Creator is a useful introduction to the Sun Java Studio Creator development environment.
Create a Project
Choose Create New Project from the Welcome screen, or select File > New Project.
A dialog box appears, asking you to name your project.
Name the project HelloWeb and click OK.
Your project appears with the initial page (Page1.jsp) open in the Visual Editor.
Design the Page
Drag a Text Field component from the JSF Standard Components section of the Palette onto your page in the Visual Editor.
If the Palette is not visible, choose View > Palette to display it. Click the Standard button at the top of the Palette to view the JSF components. All the components you will use in this example are in the JSF Standard Components section of the Palette.
Note that the components snap to the grid on the page.
Drag a Button and an Output Text component onto the page.
Extend the size of the Text Field and Output Text components to be approximately three inches long (ten boxes on the grid).
Figure 1 shows the layout of the page so far.
Figure 1: HelloWeb Design: First Pass.
Edit the Properties
Select the Button component from the Visual Editor or the Application Outline.
The properties for that button appear in the property sheet (Figure 2).
Figure 2: Properties.
Change the value property of the Button from Submit (the default) to Say Hello.
Properties that have text values can be changed either by choosing the ... button and changing the text in the dialog box that appears, or by selecting the text in the property sheet directly, making your changes, and pressing Enter to save those changes. If the property sheet is displayed, a shortcut for for editing the value of many components (Button, Text Field, Output Text, among others) is to select that component in the Visual Editor and simply start typing. The value property in the property sheet is automatically selected, and the value is changed. Press Enter to save your changes.
Change the id property of the button from button1 to hello.
The id property is an internal identifier for teach component, separate from that component's value. Changing the id of the button does not change its appearance in the Visual Editor, but this will have an effect later on when you add Java code to handle the button action.
Change the value property of the Text Field component to read Enter Your Name.
For the Output Text component, the value is empty. Leave that value as it is. No text will be displayed for that component by default, although the word Text appears in the Visual Editor to help you view the Output Text component on the page.
Figure 3 shows the page after these properties were modified:
Figure 3: HelloWeb design: After Modifying Properties.
Add Some Behavior
Double-click the Button component.
The Java Editor appears in a new tab in the editing area, showing the page bean for that page. A new method has been added to the page bean: hello_action. This method is executed when the page is submitted to the server using the Button component.
Note that the action method is named for the id property of the button (hello) with the word action on the end.
Because the Java event handlers are named for the id properties of the components to which they refer, it is a good idea to give descriptive names to your components. In larger applications it is easier to remember which action goes with which button when the event methods are named save_action, delete_action, or update_action, as opposed to button1_action, button2_action, or button3_action.
Add the event handler code to the hello_action method.
Here we modify the hello_action method to handle a button action event for the page. We do two simple things in this method:
Get the value property of the Text Field component – that is, the name that the user enters, using the getValue method.
Put that value into the Output Text component, along with some extra text to make it look friendly, using the setValue method.
Add the following lines of code to the hello_action method:
Code Sample 1
public String hello_action() {
//TODO Replace with your code
String name = (String)textField1.getValue();
name = "Hello, " + name + "!";
outputText1.setValue(name);
return null;
}
The first line in bold gets the value property of the Text Field component (textField1) using the getValue method. That value is an object of type Object, which we need to be a string, so we cast it as a String object, and then assign it to the name variable.
In the second line we change name to include Hello at the start and an exclamation point at the end. If the original name was Fred, the new string is Hello, Fred! In the final line, we set the value of the Output Text component to be that final string.
You can also collapse these the lines into one, with the same result, like this:
Code Sample 2
outputText1.setValue("Hello, " + textField1.getValue() + "!");
Run the Application
Make sure that your Java code does not contain any errors in the Java Editor (indicated by red underlines or red boxes along the left side).
Your project will not build if there are errors in the code.
Click the green arrow at the top of the screen, or choose Build > Run Project.
All your files are saved and the project begins to build (you can also save all your files at any time by choosing File > Save All). The Build Output window appears at the bottom of the screen, and displays relevant status messages. Once your application is built and deployed, the IDE launches your web browser (if it is not already running), and your web application appears (Figure 4).
Figure 4: HelloWeb, Final Page.
Enter your name and click the Say Hello button.
The browser submits the form to the web server, which calls your web application. Your button action method is executed, the page elements are updated, and the same page with changed data is sent back to the web browser. Figure 5 is the result if the name submitted was Miriam.
Figure 5: Hello Web, With Result.
Summary
In this walkthrough, you learned how to create a visual design for your page with components, to modify the properties of those components, and to add an event handler for a button.
The example in this tutorial continues in Linking Components to Data.
See Also
About Components for more information on the standard JavaServer Faces components.
About Converters for more information on converter components.
Using Validators and Converters for more information on using validators and converter components.
