<Visual Web JSP & JSF Application 1 |Java & Friends |Visual Web JSP & JSF Application 3 >


 

 

 

Getting Started with Visual Web JSF Application Development Part 2

 

 

 

Building and Testing a Web Application

 

When you are ready to test a project, press F6 or choose Run > Run Main Project from the main menu. The IDE takes the following actions:

  • Saves any files that need saving.

  • Compiles any files that need to be compiled. If there are complications, the IDE displays the related error messages in the Output window (shown in the following section) and does not continue with the build-and-run process. Click the link in the error message to go to the source code that caused the compilation error.

  • Starts the application server if it is not already started.

  • Deploys the application to the application server. If there are any complications, the IDE displays the related error messages in the Output window and does not continue with the build-and-run process.

  • Opens a browser and sends the URL for the deployed application to the browser which, in turn, displays the start page.

  • Note: If you added components to a page other than the start page, at this point in the tutorial you will not see them in the web browser. See the Try It section below for a way to set up navigation from the start page to another page in your application.

 

If you have made a lot of changes or deleted several items, or if you are seeing some unexpected behavior, you can choose Build > Clean and Build Main Project from the main menu. The IDE cleans out the project's build directory and dist directory, un-deploys the web application, and then builds and deploys the application.

 

Building and Testing a Web Application: Try It

 

1.     If your project has less than two pages, create a new one by right-clicking the Web Pages node in the Projects window and choosing New > Visual Web JSF Page.

2.     Open the start page (the page with the arrow badge,start page badge) in the Visual Designer.

3.     Drag a Hyperlink component onto the page, type Next Page, and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

4.     In the Properties window for the Hyperlink component, click the ellipsis button, for the url property, select a different page in the project, and click OK. Notice how the IDE sets the url property to /faces/page-name.jsp.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

5.     Press F6 to build and run the web application.

6.     Watch the messages that appear in the Output window during the build process. Also notice that output from the server's log appears in the server's tab.

7.     Note the URL that the IDE sends to the browser.

8.     When the start page appears in the browser, click the Next Page link.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

9.     Return to the IDE, and, in the Services window, expand Servers and expand the server's node, and then expand Applications > Web Applications and note that there is a node for your project, as shown in the following figure.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

Connecting Web Pages and Handling User Actions

 

When a user types a URL, clicks a link, or clicks a button, the browser sends a request to the server. The server maps the request to a JSP page and uses that JSP page and its associated page bean to render a response. You can specify page navigation in one of two ways:

 

To access the Page Flow editor, right-click the page background in the Visual Designer and choose Page Navigation.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

The Page Flow editor shows page icons,

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

for all the pages in the project. When you click the + element of a page icon in the Page Flow editor, the icon expands and shows all its action components, components that have an action property, such as a Button, a Hyperlink, or a Tab. Next to each component is a connector port. In the image below the hyperlink's connector port resembles a chain and the button's shows an arrow. You drag from the connector port to a page icon to create the mapping between that action's request and the page to be rendered as a response to the request. When you release the mouse, the IDE adds a visual representation of that connection, as shown in the connection labeled nextPage in the following figure.

Note: When a page is submitted, the web application performs conversions and validations before it executes action methods. If a conversion or validation fails, the action methods do not get called. You should put Message Group components on a page during development so that you can catch any unexpected conversion or validation error that might prevent an action method from being invoked.

 

Connecting Web Pages and Handling User Actions: Try It

 

1.     Create two pages named LinkPage1 and LinkPage2. Right-click LinkPage1 and choose Set As Start Page to make it the start page.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

2.     Drag a Hyperlink component onto LinkPage1, type Next Page, and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

3.     Drag a Button component onto LinkPage2, type Go, and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

4.     Double-click the Button component to access the button's action method.

Notice that the action method returns null. When an action method returns null, the application redisplays the page.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

5.     Click Design in the toolbar to switch to the Visual Designer.

6.     In the Visual Designer, right-click LinkPage2's page background and choose Page Navigation.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

7.     In the Page Flow editor, click the icon for LinkPage1.jsp to expand the page's icon, and then drag a link from the hyperlink1 component's connector port to the icon for LinkPage2.jsp.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

8.     Double-click the case1 connector label to change to edit mode, type nextPage and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

9.     Use similar steps to create a connector from the button on LinkPage2.jsp back to LinkPage1.jsp, and name the connector go.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

10.Click XML in the editing toolbar to view the actual mapping XML that is deployed to the server, and then close the Page Flow editor and click Save when asked whether to save the changes.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

11.In LinkPage2, double-click the Button component to access the button's action method.

Notice that the action method now returns the string "go". The mapping that you created in the Page Flow editor instructs the server to display LinkPage1.jsp whenever LinkPage2.jsp returns "go."

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

12.Change the start page to LinkPage1.jsp. Press F6 to run the application and try out the new page navigation.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Click OK if the following window displayed.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

1.     Either open the Navigation Editor and press F1, or from the main menu, choose Help > Help Contents to open the Help viewer, and then in the Contents pane choose Web Applications > Creating and Editing Web Applications > Pages > About the Page Flow Editor.

 

Editing Java Code

 

The IDE's Java editor is packed full of features to facilitate the programming process, many more than can be discussed in this introductory tutorial. If you click inside a Java editor window and press F1, you can get help on most of the features of this editor. The following descriptions cover a few of the more useful editing features.

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

The IDE also displays an error strip on the right margin.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

This strip represents the whole file, not just the lines of code that are visible. Red lines in the error strip identify errors in the code. Double-click a red line to jump to the erroneous statement. When you compile files, all compilation errors appear in the Output window. Click an error message to display the erroneous code in the Java Editor.

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Action

Shortcut

Format code

Alt-Shift-F

Remove current line

Ctrl-E

Move insertion point to highlighted matching bracket

Ctrl-[

Select the block between a pair of brackets

Ctrl-Shift-[

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Code

Abbreviation

for (Iterator it = collection.iterator(); it.hasNext();)

{Object elem = (Object) it.next();}

forc

for (int i = 0; i < arr.length; i++) {}

fori

try { | } catch (Exception ex)

{log("Error Description", ex); } finally {}

trycatch

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

The code clips do not appear for managed bean source files, such as the source file for an application bean or a request bean.

Note: If you click JSP in the toolbar to open the JSP editor, you see JavaScript tooltips in the Palette window that you can use in the JSP file.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

 

Editing Java Code: Try It

 

Note: The following exercises have you to type code in the destroy method. The code that you type is meant to illustrate the editing features. You would not normally put code like this in this method. After you complete the steps, you should remove the code.

 

  1. Create a page or open an existing page. Drop a Hyperlink component onto the page. Click Java in the editing toolbar to display the Java source code.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Right-click in the left margin and choose Show Line Numbers. Press Ctrl-G in the Java source, type 100 in the Go To Line dialog box, and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

 

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Click the Navigator window's tab and then double-click destroy() to position the source code on that method.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

In the destroy() method, typegetSessionBean1() and pause. The Code Completion box appears. Type d to see the box narrow the list down to destroy(). Press Enter to use that selection.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Press Ctrl-Space. Now type this.getH, and pause for the Code Completion box to appear. Move the cursor down to getHyperlink1() and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Type the period, pause for the Code Completion box, and type set. After the Code Completion box narrows the list to all methods that start with set, type te to narrow the list to setText(Object text) and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

The IDE inserts setText() after the period and positions the cursor inside the parentheses. Type "hello", press End, and type ;.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Start a new line, type serr and press Tab to expand the abbreviation to System.err.println("").

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Remove the semi-colon from the end of the line. Press F9 to compile the file. The Output window displays several links to errors. Click the first link that appears in the window. The IDE displays the statement that caused the error. Replace the semi-colon that you just removed.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Start a new line, type getSes and press Ctrl-K. The IDE replaces the string with the first matching word from the source code above the current line.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. To clean up the code, place the cursor on the first line in the destroy method body and press Ctrl-E to remove that line. Use Ctrl-E to remove the remaining lines in the method body.

  2. Hover over the icons in the editing toolbar and try each one out.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Right-click in the Java source and choose Code Folds from the pop-up menu. Try the various actions in the submenu.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Try dragging code clips from the Palette to see what they offer.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

 

Handling User Input

 

The IDE provides validator and converter objects to facilitate input checking and formatting. These objects can be found in their respective sections in the Palette.

You bind a validator to an input component, such as a Text Field component, by dropping the validator onto the input component. For example, after you add a Text Field component to a page in the Visual Designer, you can drag a Length Validator from the Validators section in the Palette and drop it on the Text Field.

Alternatively, you can drop the validator onto the page and set the input component's validator property to that validator object. For example, you can drop a Long Range Validator on a blank spot on the page, which adds longRangeValidator1 to the Navigator window. You can then select an input component in the Visual Designer, such as the Text Field component, and choose longRangeValidator1 from its validatorExpression property's drop-down list. You can use the same validator for more than one component.

The mechanisms are similar for converters. You can also associate converters with output components, such as the Static Text component. Note that when you bind a component to a data provider field, the conversions are done automatically. You learn about binding to data providers in the Connecting to Databases section.

You use the validator's Properties window to set the validation rules, such as the minimum and maximum value or the minimum and maximum length. Similarly, you use the converter's Properties window to set the conversion rules, such as the pattern that the value should match or the method to call to do the validation. The Number converter has a special wizard that appears when you first drop the Number Converter onto the page or onto a visual component.

The Basic section of the Palette provides the Message component and the Message Group component for automatically displaying conversion errors, validation errors, and required-field messages. The Message Group component displays global error messages, runtime errors and, optionally, all the component error messages. A Message component displays only the messages for the component to which it is bound. You bind a Message component to another component by setting the Message component's for property or by pressing Ctrl-Shift on the Message component and dragging the mouse to the component to which you want to bind the Message component.

You can programmatically send custom error messages to the Message Group component using the error, warn, fatal, and info methods in any Page Bean. To learn more about these methods, choose Tools > Javadoc Index Search, type FacesBean in the text field for the drop-down list, and click Find.

 

Handling User Input: Try It

 

1.     Create a new Visual Web JSF Page name it as MyPage and drag a button onto the page. Set the button's text to Go.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

2.     Drag a Text Field component onto the page. In the Properties window for the Text Field component, select the required property's checkbox.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

3.     Drop a Label component above the Text Field component, type Price: and press Enter.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

4.     In the Properties window for the Label component, select textField1 from the drop-down list for the for property. Note how the label in the Visual Designer shows an asterisk to indicate that input is required for its associated Text Field component.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

5.     In the Palette, expand the Validators section. Drag a Double Range Validator and drop it on the Text Field component.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

In the Navigator window, select the newly created doubleRangeValidator1 node. In the Properties window for the validator, set the maximum to 10.0 and set the minimum to 1.0, as shown in the following figure.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

6.     In the Palette, expand the Converters section. Drag a Number Converter and drop it on the Text Field component. A Number Format dialog box appears, as shown in the following figure. Select currency from the Type drop-down list, select English (United States) from the Locale drop-down list, and click OK.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

7.     Add a Message component to the page. Press Ctrl-Shift on the component and drag to the Text Field component.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Notice that the IDE sets the Message component's for property to the Text Field component's id.

8.     Add a Message Group component to the page.

 

-----------------------------------------------------------------

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

9.     Make the page the start page and run the application.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

10.Try clicking the button with no price entered,

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

11.With 1.5 entered,

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

12.With a non-numeric value,

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

13.And with a price greater than $10.00.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

14.Finally, type $1.50 in the text field and click the button.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Notice how the application rejects all values that do not conform to the number format and that do not fall within the specified range. Notice the different messages that appear in the Message and Message Group components.

15.Experiment with setting the showGlobalOnly checkbox for the Message Group component.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

Continue on next tutorial, Part 3.

 

 

 

 

Java Web JSP & JSF Apps:Part 1 |Part 2 |Part 3


<Visual Web JSP & JSF Application 1 |Java & Friends |Visual Web JSP & JSF Application 3 >