Académique Documents
Professionnel Documents
Culture Documents
1
Instructor Exercises Guide
Estimated time
01:00
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-1
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
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, a
cascading style sheet, and a dynamic page template with navigation.
Requirements
This exercise has no requirements.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-3
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ d. Click Next.
Information
Many of the Wizards in the tool have a Help icon in the bottom left hand corner. Clicking
the question mark displays a new Help panel in the right region of the dialog. Help and
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-5
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
dynamic Help (which updates as the context changes), can be accessed from this new
panel.
Information
The next page of the dialog sets up the project facets for the enterprise application. Project
facets allow you to add and remove functionality from a project. In this case, the project can
be deployed to an IBM® WebSphere® Application Server (V6.1 and later). You can select
a facet to display a description. You can right-click a facet and select Show Constraints to
show the other facets that it depends on. You can also click Show Runtimes to display the
available runtimes.
EXempty __ e. On the Projects Facets page select Default style sheet (CSS file) and
Dynamic 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 not
require 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 register
are defined in here.
Tiles allows you to specify content areas in JSP pages. The actual JSP does not contain
HTML or JSP code. JSP fragment files are placed in the content areas. This allows you to
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-7
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
separate content from layout within your Web pages. Changes to a template change all of
the pages that use it and any templates that extend it.
__ f. On the Web Module page, change the Context Root to DemoLibrary. Click
Finish.
__ g. When prompted to switch to the Web perspective, select the Remember my
selection 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 a
template is created later on in the exercise, the warning will disappear.
__ 3. Close the WebDiagram.gph editor that automatically appears.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-9
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ c. Click Finish.
__ d. In the Patron.java editor, add the following two private member instance fields
firstName and lastName 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 and
Setters. Click Select All and then click OK.
__ g. Right-click again inside the editor and select Source Generate Constructor
using Fields. Click Select All and then click OK. The following code should be
generated:
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 the
Navigator toolbar button . This helps you determine the location of the file that you are
working with in an editor.
__ c. Click Next.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-11
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ d. Select /CreatePatronServlet in the URL Mappings list. Click Edit and type
/CreatePatron. Click OK.
__ e. Click Next.
EXempty __ f. Verify that the doGet and doPost check boxes are selected.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-13
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
request.setAttribute("patron", patron);
request.getRequestDispatcher("DisplayPatron.jsp").forward(request,
response);
EXempty __ b. In the New Web Page dialog, type DisplayPatron as the File Name. Verify
that 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 HTML
4.01 Strict, which is recommended for new Web pages and when CSS is being
used.
__ f. Click Close.
__ g. Click Finish and the JSP Page Designer will open.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-15
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ b. Click OK.
__ c. The following useBean is added to the JSP. A useBean icon appears on the
Design tab.
<jsp:useBean
id="patron" type="com.ibm.library.model.Patron"
scope="request">
</jsp:useBean>
EXempty
Information
There are many different ways to add a bean to the page. Another way is to use content
assist 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 and
attribute 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
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-17
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 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 the
ProcessLoginServlet and pass the firstName and lastName parameters.
__ b. In the Run On Server dialog, select the Set server as project default check
box 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:
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-19
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
http://localhost:9080/DemoLibrary/CreatePatron?firstName=Bob&lastNa
me=Smith
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. You
then use templates and template inheritance to "dress up" each page. JSP pages need to
be 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 Site
Navigation to open it in the editor.
__ 14. Add an index.jsp page that represents the start page to access the other pages
within 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.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-21
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ b. A box will replace the default graphic that was in the editor area. Change the
Navigation label:
- from: newpage
__ 15. Close the Pages to add panel in the Navigation editor, as you will not be adding
existing pages.
__ a. Click the left arrow on the pages to collapse the panel.
__ 17. Add some more child pages to index.jsp. In the real application, these pages
provide 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 a
vertical bar appears.
__ c. Click in the editor to create the page. Change the name to Login.jsp.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-23
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 18. Search.jsp and ListPatronItems.jsp are Utility pages that allow you to search and
list items without logging in. Create a Utilities group to create a logical organization
of these pages. Grouped items appear differently in navigation items, such as a
drop-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 the
marquee 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.
__ 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 the
cursor below the Register.jsp page until a horizontal bar appears.
__ b. Click in the editor to create the JSP page. Rename the page to
RegistrationSuccess.jsp.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-25
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ d. To create NoListItems.jsp, click the New Page icon in the Palette view. In the
Navigation editor move the cursor beside the ListItems.jsp page until a vertical
bar appears.
__ 20. Error.jsp may be the result of many pages within the application. In the Navigation
editor, you can share a page to make it available to other pages
__ b. Another Error.jsp, with an arrow in the bottom left-hand corner, will appear next
to the original Error.jsp.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-27
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 22. Error.jsp can also appear when you attempt to login. Copy the Error.jsp shared
page and paste it as a child of Login.jsp. (Note that many of the other pages could
also 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.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-29
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 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
__ c. Click Finish.
__ 25. A Create Page Template dialog appears to indicate that templates must have one
or more content areas. Click OK.
__ 26. In the Page Designer for LibraryRootTemplate.jsp, insert a table with one column
and three rows. Set the table width to 100%.
EXempty __ a. From the main menu, select Table Insert Table. Enter the following and click
OK:
- Rows: 3
- Columns: 1
- Table width: 100% (Note it is pixels by default.)
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-31
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ b. Select the text you just entered. In the Properties view, click the Text tab if
necessary, and select Heading 1 from the Paragraph drop-down.
__ 28. Add a content areas called subHeadingArea and bodyArea to the remaining cells
in 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.
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.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-33
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ c. Click Finish.
__ d. The Dynamic Page Template dialog appears. Click Yes to configure the content
areas.
__ e. In the Configure Content Areas of Dynamic Pages Template dialog, click the
subHeadingArea in the Content Area list.
EXempty __ f. Click Text content, and leave the text area blank. This will create a page without
a sub-heading.
__ g. Do not configure the bodyArea, as this will be configured by the JSP page that
implements 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 content
areas. 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 the
menu 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 Dynamic
Page Template.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-35
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ d. The Register as a Dynamic Page Template dialog appears. Keep the default
template name: LibraryWithSubHeadingTemplate. Click OK.
Information
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-37
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 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 <h2>Register A New Patron</h2> as
the Text content
- Select bodyArea and enter RegisterBodyContent.jsp as the New or
existing fragment file. (Note: this files is created automatically.)
Note
Page Designer supports direct editing of JSP fragment files embedded inside of the main
JavaServer page. When you click the embedded JSP fragment, Page Designer will then
edit the fragment instead of the main page. Clicking the Source tab will then show the
source 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 the
existing HTML in RegisterBodyContent.jsp. Verify results in the Design tab and
save your changes.
• Replace:
<p>Place RegisterBodyContent.jsp's content here.</p>
• With: (Note: you can copy from <LAB_FILES>\Web\snippets\snippet-2.txt)
<table border="1" height="100%" width="100%">
<tr>
<td>First Name:</td>
<td><input type="text" name="nameText" size="20"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="nameText0" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="nameText00" size="38"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="nameText000" size="20"></td>
</tr>
<tr>
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-39
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ 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 the
New or existing fragment file.
__ g. Click OK.
__ 35. In Page Designer, click in the third row and then click the Source tab to replace the
existing HTML in ListPatronItemsBodyContent.jsp. Verify in the Design tab and
save your changes.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-41
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
• Replace:
<p>Place ListPatronItemsBodyContent.jsp's content here.</p>
• With: (Note: you can copy from <LAB_FILES>\Web\snippets\snippet-3.txt)
<table border="1" width="100%" height="100%">
<tr>
<th>Title</th>
<th>Due Date</th>
</tr>
<tr>
<td>Fishing</td>
<td>10 April, 2007</td>
</tr>
</table>
Note
If you get an Error 500, click Publish in the Servers view and try step a) again.
EXempty
Note
To edit the template, you could have also clicked within the JSP page that uses the
LibraryRootTemplate.
.
__ b. In Page Designer, click the Source tab and update the HTML.
• Replace: (Note: you can copy from <LAB_FILES>\Web\snippets\snippet-4.txt)
<td><h1>IBM Library System</h1>
</td>
</tr>
<tr>
<td><tiles:insert attribute="subHeadingArea"></tiles:insert></td>
• With:
<td width="90%">
<tiles:insert attribute="subHeadingArea"></tiles:insert>
</td>
<td rowspan="2">
<div style="writing-mode: tb-rl; white-space: nowrap">
<h1>IBM Library System</h1>
</div>
</td>
__ 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.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-43
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ b. If the Run On Server dialog appears, click Finish. A browser should open on the
JSP page.
Note
As you can see in the two preceding images, changes to the root template are propagated
down to the child templates. This facilitates the maintenance of your Web pages.
__ g. Drag the Site Map component onto the Page Designer it in the table cell where
you deleted the text:
Place indexBodyContent.jsp's content here.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-45
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
__ h. Accept the default setting in the Insert Site Map dialog, click Finish.
EXempty __ c. If the Run On Server dialog appears, click Finish. A browser should open on the
JSP page.
__ d. Experiment by clicking the links. Pages that have not been created cannot be
navigated to.
__ e. Optional: Implement Error.jsp using the LibaryNoSubHeadingTemplate and
setting the bodyArea to the text content: error. Test the page. Can you access
all of the error.jsp shared pages as well?
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-47
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
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 the
Beans used in the page.
© Copyright IBM Corp. 2004, 2007 Exercise 2. Create a Web Application with the Web Site Navigation 2-49
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Instructor Exercises Guide
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 the
Web 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