V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


                             • Create a Web Site Navigation file for a Web site
             ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide



2.1. Prepare the Workspace
__ 1. Start IBM Rational Application Developer (V7 or later) with...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


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



...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


separate content from layout within your Web pages. Changes to a template change all of
the p...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ c. Click Finish.
    __ d. In the Patron.java editor, add the following two private me...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ d. Select /CreatePatronServlet in the URL Mappings list. Click Edit and type
         ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ b. This causes to errors to appears in the editor because processRequest does
        ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


__ 9. In DisplayPatron.jsp, add a <jsp:useBean> to retrieve the patron from the request
     ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ d. In the Insert JSP Get Property dialog, select patron                            fir...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


            http://localhost:9080/DemoLibrary/CreatePatron?firstName=Bob&lastNa
            m...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ b. A box will replace the default graphic that was in the editor area. Change the
    ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


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




__ 18. ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


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




    __ d. To cre...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


__ 22. Error.jsp can also appear when you attempt to login. Copy the Error.jsp shared
       ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


__ 24. Create a root template that will define the general layout of all of the Web pages.
  ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ b. Select the text you just entered. In the Properties view, click the Text tab if
   ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


        LibraryRootTemplate. The JSP page is then registered as a dynamic template.
        C...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ d. The Register as a Dynamic Page Template dialog appears. Keep the default
          ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide



2.6. Apply Page Templates to JavaServer Pages
In this part you create pages using one of the...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


               <td align="center"><input type="submit" value="Register"></td>
            </t...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


         • Replace:
            <p>Place ListPatronItemsBodyContent.jsp's content here.</p>
 ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


    __ b. If the Run On Server dialog appears, click Finish. A browser should open on the
   ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide


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




    __ ...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide



2.8. Creating A Web Diagram
In this part of the exercise, you will add some pages from Web n...
V4.1
                                                                                                   Instructor Exercis...
Instructor Exercises Guide



2.9. Clean up
The goal of this lab was to explore some of the functionality in Web Site Navi...
Upcoming SlideShare
Loading in...5
×

Lab 3) create a web application

1,161

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,161
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Lab 3) create a web application

  1. 1. V4.1 Instructor Exercises Guide EXempty Exercise 2. Create a Web Application with the Web Site Navigation Editor Estimated time 01:00 What this exercise is about IBM Rational Application Developer provides a rich set of tools for organizing and visualizing the navigation flow of a Web application. One such feature is the IBM Rational Application Developer Web Site Designer. This feature allows you to create a Web site with automatically generated navigation links, and it allows you to view a map of file relationships. Page templates may be applied to your Web site to provide a consistent layout and style for your Web site. Another tool is the IBM Rational Application Developer Web Diagram editor, which allows you to connect together visual and non-visual dynamic components to create pages, create page data, and define page 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 create JSPs • Update the template to add navigation controls, allowing navigation of 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 © 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.
  2. 2. Instructor Exercises Guide • 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, a cascading 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 in the Page Designer. Using the Web Site Navigation option is at the heart of this lab. Because Rational Application Developer automates so much of this process it is easy for a student to lose the overview of what is being done. Steps then become a blind execution of instructions. It is a good idea to warn students about this before they begin the lab, and urge them to think about each step as they do it. The same could be said of the sections where the template is added, except that this is more straight-forward and easier to follow. As a wrap-up for this lab, it is recommended that the instructor do a whiteboard overview of the two processes. 2-2 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  3. 3. V4.1 Instructor Exercises Guide 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 Web application that will be built later. Create a Web site navigation for the pages, then add a template to give a homogeneous look-and-feel to the Web site. Modify the template according 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 them in the Web diagram editor. The following reference in the exercise instructions represents the directory location of the labs on your workstation: • <LAB_FILES>:C:LabFiles70 © 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.
  4. 4. Instructor Exercises Guide 2.1. Prepare the Workspace __ 1. Start IBM Rational Application Developer (V7 or later) with the workspace of the previous exercise, or use a new workspace. In the Workspace Launcher dialog, specify <LAB_FILES>workspace as the workspace directory. __ a. Click OK to open the workspace. 2-4 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  5. 5. V4.1 Instructor Exercises Guide EXempty 2.2. Create a New Dynamic Web Project __ 2. Create a new Dynamic Web Project called DemoLibraryWeb. This goal of this demo project is to gain an understanding of the layout of the Web application that will 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. 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.
  6. 6. 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. 2-6 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  7. 7. V4.1 Instructor Exercises Guide 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.
  8. 8. 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. 2-8 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  9. 9. V4.1 Instructor Exercises Guide 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 the request, and forwards to a JSP. The goal of this step is to show you how to create these different 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. Generate accessors 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 © 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.
  10. 10. 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. __ 5. Create the com.ibm.library.servlets.CreatePatronServlet in the DemoLibraryWeb project. Create doPost and doGet method stubs. Change the URL Mapping to /ProcessLogin. __ a. Right-click the DemoLibraryWeb project and select New Servlet. 2-10 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  11. 11. V4.1 Instructor Exercises Guide EXempty __ b. In the Create Servlet dialog enter the following information: • Java package: com.ibm.library.servlets • Class name: CreatePatronServlet __ 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.
  12. 12. Instructor Exercises Guide __ d. Select /CreatePatronServlet in the URL Mappings list. Click Edit and type /CreatePatron. Click OK. __ e. Click Next. 2-12 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  13. 13. V4.1 Instructor Exercises Guide 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, but does not define a a serial version ID. Click the light bulb in the margin and double-click Add generated serial version ID. __ 7. In the CreatePatronServlet, create the method processRequest(HttpServletRequest, HttpServletResponse) that is called 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 following code: processRequest(request,response); © 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.
  14. 14. Instructor Exercises Guide __ b. This causes to errors to appears in the editor because processRequest does not exist. Click the light bulb in the margin and select Create method. Note that you can also click the red underline and press CTRL+1. Both use code assist to generate 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 the following code: (Note: you can copy from <LAB_FILES>Websnippetssnippet-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 in processRequest about unhandled exceptions. __ f. Save your changes. __ 8. Create the DisplayPatron.jsp. In the New Web Page dialog, click Options to set the Document Markup, Document Type to HTML 4.01 Strict. __ a. In Project Explorer, right-click DemoLibraryWeb and select New Web Page. 2-14 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  15. 15. V4.1 Instructor Exercises Guide 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.
  16. 16. Instructor Exercises Guide __ 9. In DisplayPatron.jsp, add a <jsp:useBean> to retrieve the patron from the request context. __ 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 the Design tab. <jsp:useBean id="patron" type="com.ibm.library.model.Patron" scope="request"> </jsp:useBean> 2-16 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  17. 17. V4.1 Instructor Exercises Guide 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.
  18. 18. 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. 2-18 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  19. 19. V4.1 Instructor Exercises Guide 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 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.
  20. 20. Instructor Exercises Guide http://localhost:9080/DemoLibrary/CreatePatron?firstName=Bob&lastNa me=Smith 2-20 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  21. 21. V4.1 Instructor Exercises Guide 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.
  22. 22. Instructor Exercises Guide __ b. A box will replace the default graphic that was in the editor area. Change the Navigation 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 adding existing pages. __ a. Click the left arrow on the pages to collapse the panel. __ 16. Add the child page Register.jsp to index.jsp 2-22 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  23. 23. V4.1 Instructor Exercises Guide 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 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.
  24. 24. Instructor Exercises Guide __ 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 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. __ b. Right-click either Search.jsp or ListPatronItems.jsp and select Group. 2-24 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  25. 25. V4.1 Instructor Exercises Guide 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 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.
  26. 26. Instructor Exercises Guide __ 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 the Navigation editor move the cursor beside the ListItems.jsp page until a vertical bar 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 Navigation editor, you can share a page to make it available to other pages 2-26 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  27. 27. V4.1 Instructor Exercises Guide 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 next to 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 bar appears, drop the Error.jsp. __ b. The diagram should look as follows: © 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.
  28. 28. 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. __ b. Save your changes. __ 23. The entire diagram should now look as follows: 2-28 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  29. 29. V4.1 Instructor Exercises Guide 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 template and 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 the template 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, template inheritance is used to define the two types of pages: • Pages with sub headers • Pages without sub headers © 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.
  30. 30. 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%. 2-30 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  31. 31. V4.1 Instructor Exercises Guide 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.) __ 27. In the first cell, enter IBM Library System as an h1 heading. __ a. Place the cursor in the first cell and type IBM Library System. © 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.
  32. 32. 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. 2-32 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  33. 33. V4.1 Instructor Exercises Guide 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 from LibraryRootTemplate.jsp. The page is created as a JSP page that implements the © 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.
  34. 34. Instructor Exercises Guide 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 __ 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. 2-34 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  35. 35. V4.1 Instructor Exercises Guide 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.
  36. 36. Instructor Exercises Guide __ d. The Register as a Dynamic Page Template dialog appears. Keep the default template name: LibraryWithSubHeadingTemplate. Click OK. __ e. Save your changes. __ f. In the Project Explorer, double-click DemoLibraryWeb WebContent LibraryNoSubHeadingTemplate.jsp. __ g. In the Dynamic Page Template dialog, click NO __ h. From the main menu, select File Page Template Register as Dynamic Page Template. __ i. The Register as a Dynamic Page Template dialog appears. Keep the default template 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 the LibraryRootTemplate.jsp. <tiles-definitions> <definition name="LibraryRootTemplate" path="/LibraryRootTemplate.jsp"> </definition> <definition name="LibraryWithSubHeadingTemplate" extends="LibraryRootTemplate"> <put name="documentTitle" value="LibraryWithSubHeadingTemplate" type="string"> </put> </definition> 2-36 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  37. 37. V4.1 Instructor Exercises Guide EXempty <definition name="LibraryNoSubHeadingTemplate" extends="LibraryRootTemplate"> <put name="subHeadingArea" value="" type="string"> </put> <put name="documentTitle" value="LibraryNoSubHeadingTemplate" type="string"> </put> </definition> </tiles-definitions> © 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.
  38. 38. Instructor Exercises Guide 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 as follows: • subHeadingArea(Text content): <h2>Register A New Patron</h2> • bodyArea(New or existing fragment file): RegisterBodyContent.jsp __ a. In the Project Explorer, double-click Web Site Navigation in the DemoLibraryWeb 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 <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.) 2-38 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  39. 39. V4.1 Instructor Exercises Guide EXempty __ g. Click OK. Save your changes. 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>Websnippetssnippet-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.
  40. 40. Instructor Exercises Guide <td align="center"><input type="submit" value="Register"></td> </tr> </table> __ 34. In the Navigation editor for DemoLibraryWeb, use the LibraryNoSubHeadingTemplate for ListPatronItems.jsp. Configure the content areas as follows: • bodyArea(New or existing fragment file): ListPatronItemsBodyContent.jsp __ a. In the Project Explorer, double-click Web Site Navigation in the DemoLibraryWeb project. __ b. In the Navigation editor, double-click ListPatronItems.jsp. 2-40 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  41. 41. V4.1 Instructor Exercises Guide 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 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.
  42. 42. Instructor Exercises Guide • Replace: <p>Place ListPatronItemsBodyContent.jsp's content here.</p> • With: (Note: you can copy from <LAB_FILES>Websnippetssnippet-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> __ 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 the JSP 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 the JSP page. __ 37. Update the LibraryRootTemplate to display the heading on the side, from top to bottom. __ a. In the Project Explorer, double-click DemoLibraryWeb WebContent LibraryRootTemplate.jsp. 2-42 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  43. 43. V4.1 Instructor Exercises Guide 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>Websnippetssnippet-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.
  44. 44. Instructor Exercises Guide __ b. If the Run On Server dialog appears, click Finish. A browser should open on the JSP 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 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. 2-44 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  45. 45. V4.1 Instructor Exercises Guide 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, for bodyArea, type indexBodyContent.jsp as the New or existing fragment file. Click OK. __ e. In Page Designer, remove the text: Place indexBodyContent.jsp's content here. __ 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 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.
  46. 46. Instructor Exercises Guide __ 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. 2-46 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  47. 47. V4.1 Instructor Exercises Guide 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.
  48. 48. Instructor Exercises Guide 2.8. Creating A Web Diagram In this part of the exercise, you will add some pages from Web navigation to the Web diagram. 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 a powerful tool that will be used in later exercises. __ 41. In the Navigation editor, show index.jsp, Register.jsp, and ListPatronItems.jsp in the Web Diagram editor. __ a. In the Navigation editor, multi-select index.jsp, Register.jsp, and ListPatronItems.jsp. __ b. Right-click one of the selected pages and select Show Page in Web Diagram editor. __ 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 Diagram editor 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. 2-48 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  49. 49. V4.1 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. __ 43. Save any changes. © 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.
  50. 50. 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 2-50 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

×