Lab-3) Create a Web Application

8/8/2019 Lab-3) Create a Web Application

1/50

Instructor Exercises Guide

Course materials may not be reproduced in whole or in partwithout the prior written permission of IBM.

Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-1

.

EXempty Exercise 2. Create a Web Application with theWeb Site Navigation Editor

Estimated time01:00

What this exercise is about

IBM Rational Application Developer provides a rich set of tools fororganizing and visualizing the navigation flow of a Web application.One such feature is the IBM Rational Application Developer Web SiteDesigner. This feature allows you to create a Web site withautomatically generated navigation links, and it allows you to view amap of file relationships. Page templates may be applied to your Website to provide a consistent layout and style for your Web site.

Another tool is the IBM Rational Application Developer Web Diagrameditor, which allows you to connect together visual and non-visualdynamic components to create pages, create page data, and definepage flow.

In this lab, you:

Create a dynamic Web project Create a servlet that forwards to a Java Server Page (JSP) page

Use Web Site Navigation to create a demo Web site

Create a dynamic template and use template inheritance to createJSPs

Update the template to add navigation controls, allowing navigationof your newly created pages

Convert the Web Site Navigation to a Web diagram

Test what you have built using the test environment

What you should be able to do

At the end of this exercise, you will be able to:

Create a simple Web project

Invoke a servlet that will forward to a JSP

Enable Web Site Designer support for a Web project


2/50



2-2 Developing Web Applications Copyright IBM Corp. 2004, 2007

Create a Web Site Navigation file for a Web site

Change the page template used by your Web site

Convert the Web Site Navigation to a Web Diagram

Use the Web Diagram tool to see the properties of a page

Introduction

In this exercise, you work with the code for a simple library Web site.This project uses various Web resources, as well as JSPs, acascading style sheet, and a dynamic page template with navigation.

Requirements

This exercise has no requirements.

Instructor exercise overview

This lab will create simple Web pages for testing. It concentrates on organizing pages inthe Page Designer.

Using the Web Site Navigation option is at the heart of this lab. Because RationalApplication Developer automates so much of this process it is easy for a student to lose theoverview of what is being done. Steps then become a blind execution of instructions. It is agood idea to warn students about this before they begin the lab, and urge them to thinkabout each step as they do it.

The same could be said of the sections where the template is added, except that this ismore straight-forward and easier to follow. As a wrap-up for this lab, it is recommended thatthe instructor do a whiteboard overview of the two processes.


3/50




.

EXempty Exercise instructions

Preface

Add a Dynamic Web project to the workspace and create the files to populate the Web site.

This DemoLibraryWeb project will be used to gain an understanding of the complete Webapplication that will be built later. Create a Web site navigation for the pages, then add atemplate to give a homogeneous look-and-feel to the Web site. Modify the templateaccording to the specific needs of this site. Test the Web site in the IBM WebSphere Test Environment. Add Web site navigation components to a Web diagram, and view themin the Web diagram editor.

The following reference in the exercise instructions represents the directory location of thelabs on your workstation:

:C:\LabFiles70


4/50




2.1. Prepare the Workspace

__ 1. Start IBM Rational Application Developer (V7 or later) with the workspace of theprevious exercise, or use a new workspace. In the Workspace Launcher dialog,specify \workspace as the workspace directory.

__ a. Click OK to open the workspace.


5/50




.

EXempty 2.2. Create a New Dynamic Web Project

__ 2. Create a new Dynamic Web Project called DemoLibraryWeb . This goal of thisdemo project is to gain an understanding of the layout of the Web application thatwill be built in later exercises.

__ a. From the main menu, select File New Project .

__ b. In the New Project dialog, choose Dynamic Web Project . Click Next .

__ c. Enter the following information:

Name: DemoLibraryWeb EAR Project: DemoLibraryEAR (default name is DemoWebLibraryEAR)

__ d. Click Next .

Information

Many of the Wizards in the tool have a Help icon in the bottom left hand corner. Clickingthe question mark displays a new Help panel in the right region of the dialog. Help and


6/50




dynamic Help (which updates as the context changes), can be accessed from this newpanel.

Information

The next page of the dialog sets up the project facets for the enterprise application. Projectfacets allow you to add and remove functionality from a project. In this case, the project canbe deployed to an IBM WebSphere Application Server (V6.1 and later). You can selecta facet to display a description. You can right-click a facet and select Show Constraints toshow the other facets that it depends on. You can also click Show Runtimes to display theavailable runtimes.


7/50




.

EXempty __ e. On the Projects Facets page select Default style sheet (CSS file) andDynamic Page Template Support (Struts Tiles) . Click Next.

Information

The default style sheet Master.css file is added to the WebContent/theme folder.Dynamic templates depend upon Tiles. Although usually paired with Struts, Tiles does notrequire a Struts Web application.

The file struts.jar will be added to Web App Libraries .

A tiles-defs.xml file is added to the WEB-INF folder. The templates you create and registerare defined in here.

Tiles allows you to specify content areas in JSP pages. The actual JSP does not containHTML or JSP code. JSP fragment files are placed in the content areas. This allows you to


8/50




separate content from layout within your Web pages. Changes to a template change all ofthe pages that use it and any templates that extend it.

__ f. On the Web Module page, change the Context Root to DemoLibrary . ClickFinish .

__ g. When prompted to switch to the Web perspective, select the Remember myselection check box and click Yes .

__ h. If the Confirm Enablement dialog appears, click OK.

__ i. Ignore the warning about a broken link in the tiles-defs.xml file. When atemplate is created later on in the exercise, the warning will disappear.

__ 3. Close the WebDiagram.gph editor that automatically appears.


9/50




.

EXempty 2.3. Forward from a Servlet to a JSP

In this step, you create a Servlet that instantiates a Patron, places the patron in therequest, and forwards to a JSP. The goal of this step is to show you how to create thesedifferent components and test them in the WebSphere test environment.

You will start off by creating the Patron class.

__ 4. In the DemoLibraryWeb project, create the com.ibm.library.model.Patron class.Add two String instance member fields firstName and lastName . Generateaccessors and a two argument constructor that initializes the fields.

__ a. Right-click the DemoLibraryWeb project and select New Class .

__ b. Enter the following information:

Package : com.ibm.library.model Name : Patron


10/50




__ c. Click Finish .

__ d. In the Patron.java editor, add the following two private member instance fieldsfirstName and lastNam e of type String.

public class Patron {

private String firstName ;private String lastName ;

}

__ e. Ignore the warnings about the fields never being read locally.

__ f. Right-click inside the editor and select Source Generate Getters andSetters. Click Select All and then click OK.

__ g. Right-click again inside the editor and select Source Generate Constructorusing Fields. Click Select All and then click OK. The following code should begenerated:

public Patron (String firstName, String lastName) {super();this.firstName = firstName;this.lastName = lastName;

}

__ h. Save your changes and close the editor.

Information

In the Project Explorer view, you can click the Link open editors with content in theNavigator toolbar button . This helps you determine the location of the file that you areworking with in an editor.

__ 5. Create the com.ibm.library.servlets.CreatePatronServlet in theDemoLibraryWeb project. Create doPost and doGet method stubs. Change theURL Mapping to /ProcessLogin .

__ a. Right-click the DemoLibraryWeb project and select New Servlet .


11/50




.

EXempty __ b. In the Create Servlet dialog enter the following information:

Java package : com.ibm.library.servlets Class name : CreatePatronServlet

__ c. Click Next .


12/50




__ d. Select /CreatePatronServlet in the URL Mappings list. Click Edit and type/CreatePatron . Click OK.

__ e. Click Next.


13/50




.

EXempty __ f. Verify that the doGet and doPost check boxes are selected.

__ g. Click Finish to create the servlet and open it in a Java editor.

__ 6. A warning appears in the editor because the servlet implements Serializable, butdoes not define a a serial version ID. Click the light bulb in the margin anddouble-click Add generated serial version ID .

__ 7. In the CreatePatronServlet , create the methodprocessRequest(HttpServletRequest, HttpServletResponse) that iscalled by doPut or doPost .

Add code to processRequest that

extracts the request parameters firstName and lastName creates a Patron with the firstName and lastName forwards to DisplayPatron.jsp

__ a. Replace the // TODO comments in both doGet and doPost with the followingcode:

processRequest(request,response);


14/50




__ b. This causes to errors to appears in the editor because processRequest doesnot exist. Click the light bulb in the margin and select Create method. Note thatyou can also click the red underline and press CTRL+1. Both use code assist togenerate the missing method. Your code should look as follows:

protected void doGet (HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {processRequest (request,response);

}protected void doPost (HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {processRequest (request,response);

}

private void processRequest (HttpServletRequest request,HttpServletResponse response){

//TODO ...}

__ c. Replace the // TODO comment in the processRequest method with thefollowing code: (Note: you can copy from \Web\snippets\snippet-1.txt)

String firstName = request.getParameter("firstName");if(firstName==null || firstName.equals("")) {

firstName="empty";}String lastName = request.getParameter("lastName");if(lastName==null || lastName.equals("")) {

lastName="empty";}Patron patron = new Patron(firstName, lastName);

request.setAttribute("patron", patron);request.getRequestDispatcher("DisplayPatron.jsp").forward(request,response);

__ d. Right-click in the editor and select Source Organize Imports .

__ e. Use quick fix (light bulb) to Add throws declaration to clear the errors inprocessRequest about unhandled exceptions.

__ f. Save your changes.

__ 8. Create the DisplayPatron.jsp . In the New Web Page dialog, click Options to setthe Document Markup , Document Type to HTML 4.01 Strict.

__ a. In Project Explorer, right-click DemoLibraryWeb and select New Web Page .


15/50




.

EXempty __ b. In the New Web Page dialog, type DisplayPatron as the File Name . Verifythat JSP is selected as the Template .

__ c. Click Options .

__ d. In the New Web Page Options dialog, click the Style Sheets node. The css file/theme/Master.css should appear in the Style Sheets list.

__ e. Click the Document Markup node and change the Document Type to HTML4.01 Strict , which is recommended for new Web pages and when CSS is beingused.

__ f. Click Close .

__ g. Click Finish and the JSP Page Designer will open.


16/50




__ 9. In DisplayPatron.jsp, add a to retrieve the patron from the requestcontext.

__ a. Click JSP Insert Bean . In the Insert JSP Bean dialog, enter the following:

ID: patron Type : Bean Scope : Request Type : Click Browse From Project , type patron and select

com.ibm.library.model.Patron and click OK.

__ b. Click OK.

__ c. The following useBean is added to the JSP. A useBean icon appears on theDesign tab.


17/50




.

EXemptyInformation

There are many different ways to add a bean to the page. Another way is to use contentassist in the Source tab of Page Designer.

On an empty line, press CTRL+SPACE , type jsp:u , and select jsp:useBean

Inside of the useBean element, press CTRL+SPACE for the attributes andattribute values .

__ 10. In DisplayPatron.jsp body, display the firstName and lastName of the patron. __ a. In the Design tab, place the cursor after the useBean icon and press ENTER.

__ b. Type " First name: " (be sure to add a space after the colon)

__ c. From the main menu, select JSP Insert Get Property


18/50




__ d. In the Insert JSP Get Property dialog , select patron firstName . Click OK.

__ e. Place the cursor after the getProperty icon and press ENTER.

__ f. Type " Last name: " (be sure to add a space after the colon)

__ g. From the main menu, select JSP Insert Get Property.

__ h. In the Insert JSP Get Property dialog , select patron lastName . Click OK.

__ i. Save your changes.

__ j. Ignore the warning about the local variable patron never being read.

__ 11. Test the application in the WebSphere Test Environment. Invoke theProcessLoginServlet and pass the firstName and lastName parameters.


19/50




.

EXempty __ a. In the Project Navigator, right-click DemoLibrary Deployment Descriptor Servlets CreatePatronServlet and select Run As Run On Server .

__ b. In the Run On Server dialog, select the Set server as project default checkbox and click Finish .

This will:

- Start the default WebSphere Application Server if it is not already started

- Add the DemoLibraryEar to the server

- Start the DemoLibraryEar

- Open a Web browser with the following URL:

http://localhost:9080/DemoLibrary/CreatePatron

__ c. In the Web browser, change the URL to pass a first name and a last name:


20/50




http://localhost:9080/DemoLibrary/CreatePatron ?firstName=Bob&lastName=Smith


21/50




.

EXempty 2.4. Create a Web Site Navigation for the Catalog Pages

In this part of the exercise, you lay out Web pages and then implement some pages. Youthen use templates and template inheritance to "dress up" each page. JSP pages need tobe used to support dynamic templates.

__ 12. Make sure that Project Build Automatically is selected in the main menu.

__ 13. Create the Web Site Navigation.

__ a. In the Project Explorer view, double-click DemoLibraryWeb Web SiteNavigation to open it in the editor.

__ 14. Add an index.jsp page that represents the start page to access the other pageswithin the demo Web application

__ a. Click the New Page icon in the Palette view and then click anywhere within the

Navigation editor to create the page.


22/50




__ b. A box will replace the default graphic that was in the editor area. Change theNavigation label:

- from: newpage

- to: index.jsp and press ENTER.

__ 15. Close the Pages to add panel in the Navigation editor, as you will not be addingexisting pages.

__ a. Click the left arrow on the pages to collapse the panel.

__ 16. Add the child page Register.jsp to index.jsp


23/50




.

EXempty __ a. Right-click index.jsp and select Add New Page As Child .

__ b. Change the name to Register.jsp .

__ 17. Add some more child pages to index.jsp . In the real application, these pagesprovide an entry point into the Web application. Add Login.jsp , Error.jsp ,Search.jsp , and ListPatronItems.jsp .

__ a. Click the New Page icon in the palette view.

__ b. In the Navigation editor, move the cursor next to the Register.jsp page until avertical bar appears.

__ c. Click in the editor to create the page. Change the name to Login.jsp .


24/50




__ d. Repeat a), b) and c) for Error.jsp , Search.jsp and ListPatronItems.jsp .

__ 18. Search.jsp and ListPatronItems.jsp are Utility pages that allow you to search andlist items without logging in. Create a Utilities group to create a logical organizationof these pages. Grouped items appear differently in navigation items, such as adrop-down list, a navigation bar, a navigation trail, or a site map.

__ a. Click in the editor to the bottom-right of the ListPatronItems.jsp , drag themarquee to the top-left of Search.jsp and click. This selects both Search.jsp and ListPatronItems.jsp within the marquee. Both pages should be selected.

__ b. Right-click either Search.jsp or ListPatronItems.jsp and select Group .


25/50




.

EXempty __ c. Click the Group name Group and change it to Utilities .

__ 19. Create more child pages to indicate how the application will flow. Add:

- RegistrationSuccess.jsp to Register.jsp

- ListItems.jsp and NoListItems.jsp to Login.jsp

__ a. Click the New Page icon in the Palette view. In the Navigation editor, move thecursor below the Register.jsp page until a horizontal bar appears.

__ b. Click in the editor to create the JSP page. Rename the page toRegistrationSuccess.jsp .


26/50




__ c. Repeat a) and b) to add ListItems.jsp as a child of Login.jsp.

__ d. To create NoListItems.jsp , click the New Page icon in the Palette view. In theNavigation editor move the cursor beside the ListItems.jsp page until a verticalbar appears.

__ e. Click to create the page. Change the name to NoListItems.jsp .

__ 20. Error.jsp may be the result of many pages within the application. In the Navigationeditor, you can share a page to make it available to other pages


27/50




.

EXempty __ a. Right-click Error.jsp and select Share This Page .

__ b. Another Error.jsp , with an arrow in the bottom left-hand corner, will appear nextto the original Error.jsp .

__ 21. Drag the shared Error.jsp page to make it a child of Register.jsp .

__ a. Drag the shared Error.jsp next to RegistrationSuccess.jsp. When a vertical barappears, drop the Error.jsp.

__ b. The diagram should look as follows:


28/50




__ 22. Error.jsp can also appear when you attempt to login. Copy the Error.jsp sharedpage and paste it as a child of Login.jsp . (Note that many of the other pages couldalso result in an error, but you will only do Login.jsp.)

__ a. CTRL-Click the shared Error.jsp page and drag it to the right of NoListItems.jsp.

When a vertical bar appears, drop the Error.jsp page. Release the CTRL key.

__ b. Save your changes.

__ 23. The entire diagram should now look as follows:


29/50




.

EXempty 2.5. Create Page Templates for the JSP Files

Templates define the look and feel of Web pages. In this part, you create a master templateand two child templates. JSP pages can leverage Tiles to create these reusable templates.

How it works: A file called tiles-defs.xml defines templates that specify the layout and content

area(s) of a page.

Individual JSP files specify page fragments that fill the content areas of thetemplate they implement.

JSP fragments contain the actual HTML for a specific content area.

This is how Tiles allows you to separate content from layout. In DemoLibraryWeb, templateinheritance is used to define the two types of pages:

Pages with sub headers Pages without sub headers


30/50




__ 24. Create a root template that will define the general layout of all of the Web pages.Create a Dynamic Page Template called LibraryRootTemplate .

__ a. Right-click DemoLibraryWeb and select New Web Page Template .

__ b. In the New Web Page Template dialog:

- Enter LibraryRootTemplate as the File Name

- Click Dynamic Page Template

- Keep Basic Templates JSP as the Template


__ 25. A Create Page Template dialog appears to indicate that templates must have oneor more content areas. Click OK.

__ 26. In the Page Designer for LibraryRootTemplate.jsp , insert a table with one columnand three rows. Set the table width to 100%.


31/50


32/50




__ b. Select the text you just entered. In the Properties view, click the Text tab ifnecessary, and select Heading 1 from the Paragraph drop-down.

__ 28. Add a content areas called subHeadingArea and bodyArea to the remaining cellsin the table.

__ a. In the Palette view, click the Page Template drawer and click the Content Area icon. In Page Designer, click the second cell to drop the content area there.


33/50




.

EXempty __ b. In the Insert Content Area for Page Template dialog, type subHeadingArea as the Content area name . Click OK.

__ c. Repeat a) and b) to create the Content area bodyArea in the third cell.

__ d. Save your changes.

__ 29. Create the child template LibraryNoSubHeadingTemplate.jsp that inherits fromLibraryRootTemplate.jsp . The page is created as a JSP page that implements the


34/50




LibraryRootTemplate . The JSP page is then registered as a dynamic template.Configure the subHeadingArea to have an empty text content.

__ a. Right-click DemoLibraryWeb and select New Web Page .

__ b. In the New Web Page dialog enter the following

- File name : LibraryNoSubHeadingTemplate.jsp

- Template : MyTemplates LibraryRootTemplate


__ d. The Dynamic Page Template dialog appears. Click Yes to configure the contentareas.

__ e. In the Configure Content Areas of Dynamic Pages Template dialog, click thesubHeadingArea in the Content Area list.


35/50




.

EXempty __ f. Click Text content, and leave the text area blank. This will create a page withouta sub-heading.

__ g. Do not configure the bodyArea , as this will be configured by the JSP page thatimplements this template.

__ h. Click OK and save your changes.

__ 30. Repeat the previous step for the other template,LibraryWithSubHeadingTemplate.jsp . However do not configure the contentareas. In the Dynamic Page Template dialog, click NO. Save your changes.

__ 31. The last step to turn the JSP pages into template is to register them.

__ a. Make sure that Page Designer is open for both of the templates. Otherwise themenu entry in the main File menu will not appear.

__ b. In the Project Explorer, double-click DemoLibraryWeb WebContent LibraryWithSubHeadingTemplate.jsp.

__ c. From the main menu, select File Page Template Register as DynamicPage Template.


36/50




__ d. The Register as a Dynamic Page Template dialog appears. Keep the defaulttemplate name: LibraryWithSubHeadingTemplate . Click OK.

__ e. Save your changes.

__ f. In the Project Explorer, double-click DemoLibraryWeb WebContentLibraryNoSubHeadingTemplate.jsp.

__ g. In the Dynamic Page Template dialog, click NO

__ h. From the main menu, select File Page Template Register as DynamicPage Template.

__ i. The Register as a Dynamic Page Template dialog appears. Keep the defaulttemplate name: LibraryNoSubHeadingTemplate . Click OK.

__ j. Save your changes.

Information

Both templates have now been added to DemoLibraryWeb WebContent WEB-INF tiles-defs.xml .

Note the extends keyword that indicates that the two templates inherit from theLibraryRootTemplate.jsp.


37/50




.

EXempty


38/50




2.6. Apply Page Templates to JavaServer Pages

In this part you create pages using one of the two templates that were created.

__ 32. In the Navigation editor for DemoLibraryWeb , use the

LibraryWithSubHeadingTemplate for Register.jsp. Configure the content areas asfollows:

subHeadingArea(Text content): Register A New Patron

bodyArea(New or existing fragment file): RegisterBodyContent.jsp

__ a. In the Project Explorer , double-click Web Site Navigation in theDemoLibraryWeb project.

__ b. In the Navigation editor, double-click Register.jsp .

__ c. In the New Web Page dialog, select My Templates LibraryWithSubHeadingTemplate for the Template .

__ d. Click Finish .

__ e. Click Yes to configure the content areas.

__ f. In the Configure Content Areas of Dynamic Page Template dialog

- Select subHeadingArea and enter Register A New Patron asthe Text content

- Select bodyArea and enter RegisterBodyContent.jsp as the New orexisting fragment file . (Note: this files is created automatically.)


39/50




.

EXempty __ g. Click OK. Save your changes.

Note

Page Designer supports direct editing of JSP fragment files embedded inside of the mainJavaServer page. When you click the embedded JSP fragment, Page Designer will thenedit the fragment instead of the main page. Clicking the Source tab will then show thesource for the fragment, and not the main page.

In the preceding example, you can edit RegisterBodyContent.jsp from within Register.jsp.RegisterBodyContent.jsp can be found in the tilesContent folder.

__ 33. In Page Designer, click in the third row, and then click the Source tab to replace theexisting HTML in RegisterBodyContent.jsp. Verify results in the Design tab andsave your changes.

Replace:

Place RegisterBodyContent.jsp's content here.

With: (Note: you can copy from \Web\snippets\snippet-2.txt)

First Name:

Last Name:

Email:

Password:


40/50




__ 34. In the Navigation editor for DemoLibraryWeb , use theLibraryNoSubHeadingTemplate for ListPatronItems.jsp. Configure the contentareas as follows:

bodyArea(New or existing fragment file): ListPatronItemsBodyContent.jsp

__ a. In the Project Explorer , double-click Web Site Navigation in theDemoLibraryWeb project.

__ b. In the Navigation editor, double-click ListPatronItems.jsp .


41/50




.

EXempty __ c. In the New Web Page dialog, select My Templates LibraryNoSubHeadingTemplate for the Template .

__ d. Click Finish .

__ e. Click Yes to configure the content areas.

__ f. In the Configure Content Areas of Dynamic Page Template dialog

- Select bodyArea and enter ListPatronItemsBodyContent.jsp as theNew or existing fragment file .

__ g. Click OK.

__ 35. In Page Designer, click in the third row and then click the Source tab to replace theexisting HTML in ListPatronItemsBodyContent.jsp. Verify in the Design tab andsave your changes.


42/50




Replace:

Place ListPatronItemsBodyContent.jsp's content here.

With: (Note: you can copy from \Web\snippets\snippet-3.txt)

TitleDue Date

Fishing10 April, 2007

__ 36. Test Register.jsp and ListPatronItems.jsp in the WebSphere Test Environment.

__ a. In the Project Explorer, right-click DemoLibraryWeb WebContent listpatronitems.jsp and select Run As Run On Server.

__ b. If a Save Resource dialog appears, click Yes .

__ c. If the Run On Server dialog appears, click Finish . A browser should open on theJSP page.

Note

If you get an Error 500, click Publish in the Servers view and try step a) again.

__ d. In the Project Explorer, right-click DemoLibraryWeb WebContent register.jsp and select Run As Run On Server.

__ e. If the Run On Server dialog appears, click Finish . A browser should open on theJSP page.

__ 37. Update the LibraryRootTemplate to display the heading on the side, from top tobottom.

__ a. In the Project Explorer, double-click DemoLibraryWeb WebContent LibraryRootTemplate.jsp.


43/50




.

EXemptyNote

To edit the template, you could have also clicked within the JSP page that uses theLibraryRootTemplate..

__ b. In Page Designer, click the Source tab and update the HTML.

Replace: (Note: you can copy from \Web\snippets\snippet-4.txt)

IBM Library System

With:

IBM Library System

__ c. Save your changes.

__ 38. Test Register.jsp and ListPatronItems.jsp in the WebSphere Test Environment.

__ a. In the Project Explorer, right-click DemoLibraryWeb WebContent listpatronitems.jsp and select Run As Run On Server.


44/50




__ b. If the Run On Server dialog appears, click Finish . A browser should open on theJSP page.

__ c. In the Project Explorer, right-click DemoLibraryWeb WebContent register.jsp and select Run As Run On Server.

__ d. In the Run On Server dialog, click Finish . A browser should open on the JSPpage.

Note

As you can see in the two preceding images, changes to the root template are propagateddown to the child templates. This facilitates the maintenance of your Web pages.


45/50




.

EXempty 2.7. Improve the Home Page

__ 39. Add a site map to index.jsp. Use the LibraryWithSubHeadingTemplate.

__ a. Double-click the index.jsp page icon in the Navigation editor to load the JSP

page in Page Designer. __ b. In the New Web Page dialog, choose the LibraryNoSubHeadingTemplate and

click Finish .

__ c. In the Dynamic Page Template dialog, click Yes to configure the content area.

__ d. In the Configure Content Areas of Dynamic Page Templates dialog, forbodyArea , type indexBodyContent.jsp as the New or existing fragmentfile . Click OK.

__ e. In Page Designer, remove the text: Place indexBodyContent.jsp's contenthere.

__ f. In the Palette view, expand the Web Site Navigation drawer.

__ g. Drag the Site Map component onto the Page Designer it in the table cell whereyou deleted the text:

Place indexBodyContent.jsp's content here.


46/50




__ h. Accept the default setting in the Insert Site Map dialog, click Finish .

__ i. Save the changes and close index.jsp .

__ 40. Test index.jsp in the WebSphere Test Environment.

__ a. In the Project Explorer, right-click DemoLibraryWeb WebContent index.jsp and select Run As Run On Server.

__ b. If the Save Resource dialog appears, click Yes .


47/50




.

EXempty __ c. If the Run On Server dialog appears, click Finish . A browser should open on theJSP page.

__ d. Experiment by clicking the links. Pages that have not been created cannot benavigated to.

__ e. Optional: Implement Error.jsp using the LibaryNoSubHeadingTemplate andsetting the bodyArea to the text content: error . Test the page. Can you accessall of the error.jsp shared pages as well?


48/50




2.8. Creating A Web Diagram

In this part of the exercise, you will add some pages from Web navigation to the Webdiagram. You will also reverse-engineer the project to add DisplayPatron.jsp.

The Web Diagram editor allows you to build dynamic Web applications visually. This is apowerful tool that will be used in later exercises.

__ 41. In the Navigation editor, show index.jsp , Register.jsp , and ListPatronItems.jsp inthe Web Diagram editor.

__ a. In the Navigation editor, multi-select index.jsp, Register.jsp, andListPatronItems.jsp.

__ b. Right-click one of the selected pages and select Show Page in Web Diagrameditor .

__ c. In the Add Pages to the Web Diagram File dialog , select the default/WebDiagram.gph . Click OK.

__ d. In the Web Diagram editor that opens, close the Welcome to the Web Diagrameditor hover panel.

__ e. Right-click in the Web diagram editor and select Arrange All.

__ 42. In the Web Diagram editor, reverse-engineer the project.

__ a. Right-click in the Web Diagram editor and select Reverse Engineer Project .

__ b. This adds all of the JSP pages and templates from the project.

__ c. Navigate down to the last JSP page: DisplayPatron.jsp.


49/50




.

EXempty __ d. Double-click the down arrow to display the bean that is included in the page.

Note

In the preceding step, you used the Web Diagram editor to parse a JSP and display theBeans used in the page.

__ 43. Save any changes.


50/50


2.9. Clean up

The goal of this lab was to explore some of the functionality in Web Site Navigation,Templates, and Web Page Designer.

The DemoLibraryEAR and DemoLibraryWeb can be used to understand the layout of theWeb application you are going to build.

The DemoLibraryEAR and DemoLibraryWeb will not be needed in subsequent labs.

__ 44. Remove DemoLibraryEAR from the server.

__ a. In the Servers view, expand the WebSphere Application Server.

__ b. Right-click DemoLibraryEAR and select Remove .

__ 45. Close the DemoLibraryEAR and DemoLibraryWeb projects.

__ a. In the Project Explorer, right-click DemoLibraryEAR and select Close Project .

__ b. In the Project Explorer, right-click DemoLibraryWeb and select Close Project .

End of exercise

Documents

Lab-3) Create a Web Application