<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:
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, 3. Drag a Hyperlink component onto the page, type Next Page, and press Enter.
|
) in the Visual Designer.
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.
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.
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.
For More Information
-
From the main menu, choose Help > Help Contents to open the Help viewer. Then, in the Contents pane, choose Web Applications > Creating Web Applications > About Creating Web Applications.
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:
-
You add a link component, such as the Hyperlink component, to the page, or add a Tree Node component to a Tree component or a Tab component to a Tab Set component. Then you set the component's url property to /faces/page-name.jsp. When you use the url property for navigation, the form data is not submitted. The web application simply navigates to the destination.
-
You use the Page Flow editor to map actions to pages, and the Visual Designer and the Java Source editor to create action handling methods. When you use action handling methods for page navigation, the form data is submitted and processed before the web application navigates to the specified destination.
To access the Page Flow editor, right-click the page background in the Visual Designer and choose Page Navigation.
The Page Flow editor shows page icons,
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.
2. Drag a Hyperlink component onto LinkPage1, type Next Page, and press Enter.
3. Drag a Button component onto LinkPage2, type Go, and press Enter.
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.
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.
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.
8. Double-click the case1 connector label to change to edit mode, type nextPage and press Enter.
9. Use similar steps to create a connector from the button on LinkPage2.jsp back to LinkPage1.jsp, and name the connector go.
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.
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."
12.Change the start page to LinkPage1.jsp. Press F6 to run the application and try out the new page navigation.
Click OK if the following window displayed.
------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
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.
Code Completion. Code completion enables you to type a few characters and then choose from a list of possible classes, methods, variables, and so on to automatically complete the expression. To display the code completion box, press Ctrl-Space. The code completion box also appears when you pause after typing a period that follows a package name, a variable, or a method call, as shown in the following figure.
Javadoc. The code completion feature also displays any related Javadoc. In addition, you can right-click a type, a field, or a method and choose Show Javadoc to see the Javadoc for that item, if the Javadoc is available. To see the available Javadoc, choose Help > Javadoc References. You can also pressShift-F1 to display a Javadoc Index Search tool.
Fix Imports. Press Ctrl-Shift-I to add necessary import statements automatically.
Error detection. Red error indicator appears in the left margin of all statements that will not compile. Hover the mouse over the box to see the description of the error, as shown in the following figure.
The IDE also displays an error strip on the right margin.
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.
Java Editor Keyboard Shortcuts. You can invoke many common editing tasks with a simple key combination as shown in the following examples. To learn more about the shortcuts, choose Help > Help Contents from the main menu to open the Help viewer, and then in the Contents pane choose IDE Basics > Keyboard Shortcuts > Editor Shortcuts.
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-[ |
Code Templates. Code Templates are short groups of characters that expand into a full word or phrase when you press the spacebar, as shown in the following examples. To see the full list of code templates, choose Tools > Options on a Microsoft Windows system or NetBeans > Preferences on a Macintosh system, and then choose Editor > Code Templates and click any field in the Abbreviation column for the Code Templates property. Some examples:
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 |
Code Clips. When you have the Java editor open, the Palette window provides many useful code clips that you can drag and drop onto your source file.
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.
Quick Search. If you click in the Navigator window and start typing the name of a method or a field, a Quick Search dialog box appears and the IDE highlights the first matching entry in the list. Press Enter to position the Java editor in the source code at that entry's declaration.
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.
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.
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.
Click the Navigator window's tab and then double-click destroy() to position the source code on that method.
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.
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.
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.
The IDE inserts setText() after the period and positions the cursor inside the parentheses. Type "hello", press End, and type ;.
Start a new line, type serr and press Tab to expand the abbreviation to System.err.println("").
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.
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.
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.
Hover over the icons in the editing toolbar and try each one out.
Right-click in the Java source and choose Code Folds from the pop-up menu. Try the various actions in the submenu.
Try dragging code clips from the Palette to see what they offer.
For More Information
From the main menu, choose Help > Help Contents to open the Help viewer, and then in the Contents pane choose Java Applications > Editing Source Files > About Editing Source Files.
From the main menu, choose Help > Help Contents to open the Help viewer, and then in the Contents pane choose IDE Basics > Keyboard Shortcuts > General Editor Shortcuts.
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.
2. Drag a Text Field component onto the page. In the Properties window for the Text Field component, select the required property's checkbox.
3. Drop a Label component above the Text Field component, type Price: and press Enter.
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.
5. In the Palette, expand the Validators section. Drag a Double Range Validator and drop it on the Text Field component.
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.
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.
7. Add a Message component to the page. Press Ctrl-Shift on the component and drag to the Text Field component.
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.
-----------------------------------------------------------------
9. Make the page the start page and run the application.
10.Try clicking the button with no price entered,
11.With 1.5 entered,
12.With a non-numeric value,
13.And with a price greater than $10.00.
14.Finally, type $1.50 in the text field and click the button.
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.
For More Information
-
Converting and Validating Data in Visual Web JSF Applications (http://wiki.netbeans.org/WebTutorialStatus)
Continue on next tutorial, Part 3.