Develop Web Applications

In this tutorial, you will use netbeans Visual Web pack 5.5 to create and run a simple web application "Hello web ". This example application requires you to enter a name and then display the message using this name. First, use an input field to implement this page. Then, replace the input field with a drop-down list from which you can select a name. The drop-down list is filled with names in the database table.

Directory - Create a project - Design page - Add actions - Run the application - Replace text fields with the drop-down list - Bind the drop-down list to the database table - Add actions - Run the application - Perform more operations

 

This tutorial uses the following technologies and resources

Assumerver faces component/ Java EE platform	1.2/Java ee 5 * 1.1/J2EE 1.4
Travel Database	Required
Blueprints Ajax Component Library	Not Required

* When this tutorial is published, Only Sun Java System Application Server supports Java ee 5.

This tutorial is tailored to use sun java application server PE 9.0 Update Release 1 and tomcat 5.5.17. If you are using another server, refer to the release notes and FAQ to learn about known issues and solutions. For more information about supported servers and Java EE platforms, see release notes.

Create a project

1. Select "file"> "new project" from the main menu ".
2. In the new project wizard, select "Web" from the "category" list, and then select "Visual Web application" from the "project" list ".
3. Click "Next ".

4. Name the projectHelloWebAnd then click Finish ".

   The project is displayed and its initial Page opens in the visual designer (Page1).

Design page

First, design a page, as shown in.

Figure 1: Page1 Design

1. In the "properties" window, type in the "title" attribute text boxHello Web, As shown in.

   When the browser accesses this page, the value of the "title" attribute appears in the title bar of the browser.

   Figure 2: Page properties in the "properties" Window

   
   Tip:By selecting a component in the visual designer or summary window, you can access the properties of the component in the Properties window. By clicking a blank position on the page, you can access the properties of the page.

2. If you have not expanded the "Basic" node in the "component panel" window, expand it now.

   All components used in this example are located in the "Basic" category of the component panel.

   If the component panel is invisible, select "window"> "component panel" to display it.

3. Drag a tag component from the "Basic" category of the component panel to the left of the page in the visual designer, and typeName:And press Enter.

   Note that the components are aligned with the grid on the page. Note that in the "properties" windowtextThe property value isName:.

   Tip:Right-click the component and select "edit text" from the pop-up menu to switch the component to the editing mode.

4. Drag a text field component from the "Basic" category of the component panel to the visual designer, TypeEnter Your NameAnd press Enter.
5. In the "properties" windowidAttributetextField1ChangenameField.

6. Select the tag component, press Ctrl-shift, and drag a line from the tag component to the text field component.

   Note thatforThe property is now setnameField.

7. Drag a button component to the right of the text field component and typeSay HelloAnd press Enter.
8. In the "properties" windowidAttributebutton1ChangehelloButton.
9. Drag a static text component to the label component.
10. SetidAttributestaticText1ChangehelloText.

11. Drag a message group component to the edge of the page, such as below the static text component.

    Adding a message group component (displaying runtime errors and other types of messages) is a good way to diagnose programming errors.

12. On the editing toolbar, click "jsp" to switch to the editor.

    Browse the code and note how the changes made in the "properties" window are saved. When a page is displayed in a browser for the first time, the page looks exactly the same as the content indicated by the tag in the JSP page. If the page bean contains code to change the property value, such changes will only occur when the page is submitted and then re-displayed.

Add some actions in this section. You will add the code to re-display the page Hello<Input name>. To this end, an event handler is added, which is called by the application whenever the button is clicked. This event handler adds textSet the property to "hello" message, and then re-display the page to display the text.

1. On the editing toolbar, click design to switch to the visual designer.

2. Double-click the button component.

   The Edit area switches to the Java editor and the page1 page bean is displayed. Button event handlerhelloButton_actionAlready added to the page bean.

3. SethelloButton_actionThe subject of the method is replaced with the followingBoldThe displayed code line. Then, press Ctrl-shift-F to reset the code format.

   Code Example 1: hellobutton_action () Code

   public String helloButton_action() { String name = (String)nameField.getText(); helloText.setText("Hello, " + name + "!"); return null;

   ToBoldThe first line shown usesgetTextMethod to obtain the text field componentnameFieldOftextAttribute Value. This value is of the typeObjectIt must be a string, so it is convertedStringObject. Then, assign the objectnameVariable.

   ToBoldThe second line is set.helloTextStatic Text ComponenttextAttribute Value. This value includes the text field component that the user enters.nameField. For exampleFred, This line of code willtextSet propertyHello, Fred!.

Run the application

1. Make sure that your Java code in the Java editor does not contain any errors.

   The error is marked by a red underline or a red box on the left of the Code. If the Code contains errors, the project is not generated.

   Tip:Place the cursor in the red box on the left of the Code to see the error description.

2. Click "run main project.

   IDE saves the file and generates the project. The "output" Window of the generated project appears at the bottom of the screen and displays related status messages. After the application is generated and deployed, the IDE starts the web browser (if not run) and displays the web application.

3. Enter your name and click "Say hello ".

   The browser submits the form to the Web server, which will call your web application. The application will execute the button operation method, update the page elements, re-render the same page with the changed data, and send the page back to the Web browser. Yes.Gus TownsendIs displayed.

   Figure 3: Hello web and its results

Replace text fields with the drop-down list

The rest of this tutorial describes how to use the drop-down list component instead of text fields to obtain user input, as shown in. This drop-down list of components from the bundledPERSONDatabase Table to obtain its selection list.

Figure 4: Hello web, final version

1. On the editing toolbar, click design to switch to the visual designer.
2. In the visual designer, right-clicknameFieldText field component, and then select "delete" from the pop-up menu ".

3. Drag a drop-down list component from the "Basic" category of the component panel to the page in the visual designer. Move this component to the original area of the text field component.

   Note that the "Overview" window displays a dropdown1 component and a dropdown1defaultoptions object, as shown in. Drop-down list componentitemsThe property identifier contains the objects selected from the list. When you add a drop-down list component to the page, IDE creates a default option object (dropDown1DefaultOptions), And set this object asitemsAttribute Value. Only the drop-down list components are visible in the visual designer. The default option object is only available in the list. Later in this tutorial, you will modify the drop-down list component to obtain its options from other sources.

   Figure 5: Components in the "summary" Window

4. In the Properties windowidChangenameDropDown.

5. Select the tag component, press Ctrl-shift, and drag a line from the tag component to the drop-down list component.

   Note thatforThe property is now setnameDropDown.

Bind the drop-down list to the "running environment" window on the left of the IDE workspace where the database table contains a "Database" node. The database node displays all the database drivers and connections added to the IDE.

The netbeans Visual Web pack 5.5 comes with a sample travel database. The travel database is displayed below the database node. In this section, you will use the person table in the travel database to provide options for the drop-down list component.

1. In the "running environment" window, expand the "Database" node and check whether the database is connected to the travel database.

   If the JDBC node of the travel database is marked as disconnected and cannot be expanded, it indicates that the IDE is not connected to the database. To connect to the travel database, right-click the JDBC node of the travel database and select "Connect" from the pop-up menu ". If the "connection" dialog box appears, entertravelAs a password, select "Remember password during this session" and click "OK ". If you do not see the JDBC node of the travel database, see the netbeans Visual Web pack installation instructions to learn how to provide available databases for the IDE.

2. Expand the "table" node.

   Under the "table" node, you can see the nodes of each table in the database, such as "carmarshal" and "flight ". The "running environment" Window of the "table" node is displayed.

   Figure 6: "Running environment" Window

3. Drag and Drop the person table from the "running environment" window to the drop-down list.

   The content displayed in the list isitem1ChangeabcThis indicates that the bound data is displayed in the list, and the displayed data isStringType.

   IDE adds a non-visual persondataprovider component to the database table. The persondataprovider component is displayed in the overview window. IDE will alsopersonRowSetAdd the property to sessionbean1.

4. Right-click the drop-down list component and select "bind to data" from the pop-up menu ". The "bind to data" dialog box appears, as shown in.

   Figure 7: Bind data to the drop-down list

   
   When binding data to the drop-down list component, you must specify the content (Value Field) to be displayed in the list, and specify the value (display field) to be used in the underlying program ). Generally, you need to display meaningful values (such as names) in the database table and use a unique identifier (such as person ID) in the underlying program ). However, for this application, we bind the "value field" and "display field" to the same database column, that is, the person. Name column, as described in the next two steps.

5. Set "Value Field" in the dialog boxPERSON.NAME.
6. Keep the "display field" settingPERSON.NAME.
7. Click OK ".

Add actions

1. In the visual designer, double-click the button component.

   The editing area switches to the Java editor and moveshelloButton_actionMethod.

2. SethelloButton_actionThe subject of the method is replaced with the followingBoldThe code displayed.

   Code Example 2: hellobutton_action replacement code

   public String helloButton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); helloText.setText("Hello, " + splitnames[1] + "!"); return null;

   The first line usesgetSelectedMethod to obtain the current value of the drop-down list (that is, the name currently selected in the list ).

   Because the data<Last Name>,<Name>Is stored in the database. Therefore, you must modify the string before displaying it. Otherwise, the application will output "hello,<Last Name>,<Name>!" The second line usessplitMethod to divide a string into an array, which uses commas as the separator. The first entry in the array (in position 0) contains the last name, and position 1 contains the first name.

   In the third linetextProperty is set to a value containing the name.

   Note::This method assumes that all values in the table are represented as"<Last Name>, <First Name>Format. Therefore, it cannot properly process strings that do not use this format.

3. Add the following codeprerenderMethod. This Code sets the first item in the list as the default option.

   Code Example 3: prerender method code

   public void prerender() { // If no selection, set default selection if (nameDropDown.getSelected() == null) { personDataProvider.cursorFirst(); nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); } }

Run the application

1. Click "run main project.

   IDE will generate and deploy the application, and then display the page in the Web browser.

2. Select a name from the list and click "Say hello ".

   The browser will send the selected value of the drop-down list component to the server, and then the server will executehelloButton_actionMethod.

Perform more operations

Try it.The list box component is similar to the drop-down list component. Replace the drop-down list component with the list box component. In the application, do not selectmultipleAttribute, because only one item can be selected at a time. Remember to bind the list box to the database table and change ithelloButton_actionMethod to obtain the selected value of the list box.

Try it.Use a step similar to the one learned in this tutorial to generate a web application that has a drop-down list component that displays all the description values in the triptype table. When you click "show type ID", the page displays the trip type triptypeid. Therefore, you must bind the "display field" of the drop-down list component to triptype. description, and bind the "value field" of the component to triptype. triptypeid.

The general workflow for designing web pages in IDE includes the following steps:

1. Create page.
2. Place components (such as text field components and button components) on the page.
3. Edit the attributes of a component to change its appearance and behavior.
4. When conditions are met, bind the component to its data connection.
5. Edit the Java source code to control server-side behaviors, such as event processing.
6. Generate and test the application.

This article from http://www.netbeans.org/kb/55/vwp-helloweb_zh_CN.html