Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Building a Web Application in Netbeans

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - JavaServer™ Faces Web Applications

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Building a Web Application in Netbeans

Now that we have presented the JSP file, the page bean file and the resulting XHTML web page sent to the web browser, we discuss the steps to create this application.

Building a Web Application in Netbeans

 

Now that we have presented the JSP file, the page bean file and the resulting XHTML web page sent to the web browser, we discuss the steps to create this application. To build the WebTime application, perform the following steps in Netbeans:

 

Step 1: Creating the Web Application Project

 

Select File > New Project... to display the New Project dialog. In this dialog, select Web in the Categories pane, Visual Web Application in the Projects pane and click Next. Change the project name to WebTime. In the Project Location field, specify where you’d like to store the project. These settings will create a WebTime directory to store the project’s files in the parent directory you specified. Keep the other default settings and click Finish to create the web application project.

 

Step 2: Examining the Visual Editor Window of the New Project

The next several figures describe important features of the IDE, beginning with the Visual Editor window (Fig. 26.5). Netbeans creates a single web page named Page1 when a new project is created. This page is open by default in the Visual Editor in Design mode when the project first loads. As you drag and drop new components onto the page, Design mode allows you to see how your page will be rendered in the browser. The JSP file for this page, named Page1.jsp, can be viewed by clicking the JSP button at the top of the visual editor or by right clicking anywhere in the Visual Editor and selecting Edit JSP Source. As men-tioned previously, each web page is supported by a page bean file. Netbeans creates a file named Page1.java when a new project is created. To open this file, click the Java button at the top of the Visual Editor or right click anywhere in the Visual Editor and select Edit Java Source.

 

The Preview in Browser button at the top of the Visual Editor window allows you to view your pages in a browser without having to build and run the application. The Refresh button redraws the page in the Visual Editor. The Show Virtual Forms button allows you to see which form elements are participating in virtual forms (we discuss this concept in Chapter 27). The Target Browser Size drop-down list lets you specify the optimal browser


resolution for viewing the page and lets you see what the page will look like in different screen resolutions.

 

Step 3: Examining the Palette in Netbeans

 

Figure 26.6 shows the Palette displayed in the IDE when the project loads. Part (a) dis-plays the beginning of the Basic list of web components, and part (b) displays the remain-ing Basic components, as well as the list of Layout components. We discuss specific components in Fig. 26.6 as they are used throughout the chapter.


Step 4: Examining the Projects Window

Figure 26.7 displays the Projects window, which appears in the upper-left corner of the IDE. This window displays the hierarchy of all files included in the project. The JSP files for each page are listed under the Web Pages node. This node also includes the resources folder, which contains the CSS stylesheet for the project and any other files the pages may need to display properly, such as image files. All of the Java source code, including the page bean file for each web page and the application, session and request scope beans, can be found under the Source Packages node. Another useful file displayed in the project win-dow is the Page Navigation file, which defines rules for navigating the project’s pages based on the outcome of some user-initiated event, such as clicking a button or a link. The Page Navigation file can also be accessed by right clicking in the Visual Editor while in Design mode and selecting Page Navigation.

 

Step 5: Examining the JSP and Java Files in the IDE

 

Figure 26.8 displays Page1.jsp—the JSP file generated by Netbeans for Page1. [Note: We reformatted the code to match our coding conventions.] Click the JSP button at the top of the Visual Editor to open the JSP file. When it is first created, this file contains some tags for setting up the page, including linking to the page’s style sheet and defining the necessary JSF libraries. Otherwise, the JSP file’s tags are empty, as no components have been added to the page yet.


 

Figure 26.9 displays part of Page1.java—the page bean file generated by Netbeans for Page1. Click the Java button at the top of the Visual Editor to open the page bean file.

This file contains a Java class with the same name as the page (i.e., Page1), which extends the class AbstractPageBean. As previously mentioned, AbstractPageBean has several methods that manage the page’s life cycle. Four of these methods—init, preprocess, prerender and destroy—are overridden by Page1.java. Other than method init, these methods are initially empty. They serve as placeholders for you to customize the behavior of your web application. The page bean file also includes get and set methods for all of the page’s elements—page, html, head, body and link to start. You can view these get and set methods by clicking the plus (+) sign on the line that says Managed Component Definition.

 

Step 6: Renaming the JSP and JSF Files

 

Typically, you’ll want to rename the JSP and Java files in your project, so that their names are relevant to your application. Right click the Page1.jsp file in the Projects Window and select Rename… to display the Rename Class Page1 dialog. Enter the new filename Time. If Preview All Changes is checked, the Refactoring Window will appear at the bottom of the IDE when you click Next >. Refactoring is the process of modifying source code to im-prove its readability and reusability without changing its behavior—for example, by re-naming methods or variables, or breaking long methods into shorter ones. Netbeans has built-in refactoring tools that automate some refactoring tasks. Using these tools to re-name the project files updates the name of both the JSP file and the page bean file. The refactoring tool also changes the class name in the page bean file and all of the attribute bindings in the JSP file to reflect the new class name. Note that none of these changes will be made until you click Do Refactoring in the Refactoring Window. If you do not preview the changes, refactoring occurs when you click Next > in the Rename Class Page1 dialog.


Step 7: Changing the Title of the Page

 

Before designing the content of the web page, we give it the title "Web Time: A Simple Ex-ample". By default, the page does not have a title when it is generated by the IDE. To add a title, open the JSP file in Design mode. In the Properties window, enter the new title next to the Title property and press Enter. View the JSP to see that the attribute title = "Web

Time: A Simple Example" was automatically added to the webuijsf:head tag.

 

Step 8: Designing the Page

 

Designing a web page is simple in Netbeans. To add components to the page, you can drag and drop them from the Palette onto the page in Design mode. Like the web page itself, each component is an object that has properties, methods and events. You can set these properties and events visually using the Properties window or programmatically in the page bean file. Get and set methods are automatically added to the page bean file for each component you add to the page.

 

The IDE generates the JSP tags for the components you drag and drop using a grid layout, as specified in the webuijsf:body tag. The components are rendered using absolute positioning—they appear exactly where they are dropped on the page. As you add compo-nents, the style attribute in each component’s JSP element will include the number of pixels from the top and left margins of the page at which the component is positioned.

 

This example uses two Static Text components. To add the first one to the page, drag and drop it from the Palette’s Basic components list to the page in Design mode. Edit the component’s text by typing "Current time on the web server:" directly into the component. The text can also be edited by changing the component’s text property in the Prop-erties window. Netbeans is a WYSIWYG (What You See Is What You Get) editor— whenever you make a change to a web page in Design mode, the IDE creates the markup (visible in JSP mode) necessary to achieve the desired visual effects seen in Design mode. After adding the text to the web page, switch to JSP mode. You should see that the IDE added a webuijsf:staticText element to the page body, which is bound to the object staticText1, in the page bean file and whose text attribute matches the text you just entered. Back in Design mode, click the Static Text component to select it. In the Proper-ties window, click the ellipsis button next to the style property to open a dialog box to edit the text’s style. Select 18 px for the font size and click OK. Again in the Properties window, change the id property to timeHeader. Setting the id property also changes the name of the component’s corresponding property in the page bean and updates its binding attribute in the JSP accordingly. Notice that font-size: 18 px has been added to the style attribute and the id attribute has been changed to timeHeader in the com-ponent’s tag in the JSP file. The IDE should now appear as in Fig. 26.10.

 

Drop a second Static Text component onto the page and set its id to clockText. Edit its style property so that the font size is 18 px, the text color is yellow, and the back-ground color is black. Do not edit the component’s text, as this will be set programmat-ically in the page bean file. The component will display with the text Static Text in the IDE, but will not display any text at runtime unless the text is set programmatically. Figure 26.11 shows the IDE after the second component is added.

 

Step 9: Adding Page Logic

After designing the user interface, you can modify the page bean file to set the text of the clockText element. In this example, we add a statement to method prerender (lines 170–



174 of Fig. 26.3). Recall that we use method prerender to ensure that clockText will be updated each time the page is refreshed. Lines 164–165 of Fig. 26.3 programmatically set the text of clockText to the current time on the server. For this statement to work, you’ll also need the two imports shown in lines 14–15 of Fig. 26.3.

 

We would like this page to refresh automatically to display an up-to-date time. To accomplish this, add <webuijsf:meta content = "60" httpEquiv = "refresh" /> to the JSP file, before the end of the webuijsf:head tag. This tag tells the browser to reload the page automatically every 60 seconds. You can also add this tag by dragging a Meta com-ponent from the Advanced section of the Palette to your page, then setting the component’s content attribute to 60 and its httpEquiv attribute to refresh. If you do this, the Meta component will show up in the Outline window.

 

Step 10: Examining the Outline Window

 

Figure 26.12 displays the Outline window in Netbeans. The Time node representing the page bean file is expanded and shows the contents of the component tree. The request, session and application scope beans are collapsed by default, as we have not added any properties to these beans in this example. Clicking an item in the page’s component tree selects the item in the Visual Editor.


Step 11: Running the Application

After creating the web page, you can view it several ways. First, you can select Build > Build Main Project, and after the build completes, select Run > Run Main Project, to run the appli-cation in a browser window. You can run a project that has already been built by pressing the Run Main Project icon (  ) in the toolbar at the top of the IDE. Note that if changes are made to a project, the project must be rebuilt before they will be reflected when the ap-plication is viewed in a browser. Because this application was built on the local file system, the URL displayed in the address bar of the browser when the application is run will be  http://localhost:8080/WebTime/ (Fig. 26.3), where 8080 is the port number on which the test server—Sun Java System Application Server (SJSAS)—runs by default. [Note: The port number will depend on the server to which you deploy your web application.]

Alternatively, you can press F5 to build the application, then run it in debug mode— the Netbeans built-in debugger can help you troubleshoot applications. If you type F6, the program executes without debugging enabled.

Finally, you can run your built application by opening a browser window and typing the web page’s URL in the Address field. Since your application resides on the local file system, you must first start the Sun Java System Application Server. If you have previously run the application using one of the methods above, the server will already be started. Oth erwise, you can start the server from the IDE by opening the Runtime tab (located in the same panel as the Projects), expanding the Servers node, right clicking Sun Java System Application Server 9 and selecting Start. Then you can type the URL (including the port number for the application server, 8080) in the browser to execute the application. For this example it is not necessary to type the entire URL,  http://localhost:8080/ WebTime/faces/Time.jsp. The path to the file Time.jsp (i.e., faces/Time.jsp) can be omitted, because this file was set by default as the project’s start page. For projects with multiple pages, you can change the start page by right clicking the desired page in the Projects window and selecting Set As Start Page. The start page is indicated by a green arrow next to the page’s name in the Projects window.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.