1. ® IBM Software Group © 2006 IBM Corporation EGL/Web Project QuickStart – 3 of 4 – Creating the U.I. Layer These slides walk you through the process of creating a simple C.R.U.D. (Create, Read, Update and Delete) dynamic data content web application. This section shows you how to use the workbench tooling, specifically the WebSite Navigator to create a SiteMap for your application.

2. 2 UNIT  Development Model – Terms and Concepts  Importing Database Schema  Creating Custom Business Logic Creating the U.I. Model  Creating the U.I. Model  Creating Dynamic Content Web Pages Topics: EGL/Web QuickStart

3. 3 The EGL Project Model – Still at the 10,000 Foot View  After generating and customizing the Data Access model, and in parallel with work done on the business logic model (coding your functions, calls, services, etc.) your graphic artists, web- site designers – which may well be you, - will start to create the U.I. Model. This often happens in parallel (different project team members) – as different tools and very different skills and talents are required for U.I. design.  The U.I. Model consists of:  SiteMap – a graphical tree structure, that you use to design the web-site and layout the page navigation  Page templates – web page backing patterns that consist of: Static text, static graphics  We will be covering both of these resources in-depth, in the next course in this series on EGL and JSF. For now we’ll get a flavor for this by watching a Viewlet and of course, doing the lab. 2. Custom Business Logic 1. Data Access Model 3. U.I. Model 4. Page Development

4. 4 The Web Site Map  A web Site Map is simply an architectural blueprint for your site. It depicts all of the web pages as icons, and shows how they are connected through links (site organization and navigation).  You will need a Site Map for every web-site you create, in order to handle the complexity inherent in doing this kind of work, and to understand the user-experience (“too many clicks to the buy screen”?)  RBD allows you to create Site Maps using Web-Site Navigator  Here’s an example of a Site Map. The menu page will link to allcustomers2, which in turn links to updatecustomer2, etc.  Note that all of the Site Map icons are simply that – small, graphical representations – not the actual web pages. Later you will use the Site Map to create pages. For now, let’s see how to build a Site Map, using RBD.

5. 5 Create a Simple Site Map for an EGL Web Application  Follow the steps on the next slides to create the following Web Site Map, for an EGL Web application. You will:  Open the Web-Site Navigator tool into the Content Area  Add New Pages to the Web Site  Name  Links to parent pages  Select all of the pages and apply a page template to them

6. 6  Launch the Web-Site Navigator expand your project and Double-Click Web Site Navigation  From Project Explorer, expand your project and Double-Click Web Site Navigation – the RBD tool to build your Site Map.  Using the Navigator you can add new pages to a Web Site and link them to existing pages. This is all done using Drag & Drop development.

7. 7 Left-Click Hold, Drag and Drop New Page into the Content Area.  From the Palette, Left-Click (select) Hold, Drag and Drop New Page into the Content Area. This creates a new web page icon in the Site Map and prompts you to name the page. menu  Name your new page: menu  Create a New Page in the Navigator

8. 8  To add a new page and link it to an existing page of a SiteMap (from the Palette), Left-Click (select) hold, drag and drop New Page on the bottom of the existing page. allcustomers2  Name the child page: allcustomers2  Repeat the above steps, updatecustomer2 …add a child to allcustomers2, named: updatecustomer2  Add a New Page as a Child of the Menu Page

9. 9 Right-click over the parent page, and select:  To add a second child to an existing parent page Right-click over the parent page, and select: Add  New Page  As Child  allorders  Name the child page: allorders  Add a Second Child to a Parent Page

10. 10  Again, to add a new page and link it to an existing page of a SiteMap (from the Palette), Left-Click (select) hold, drag and drop New Page on the bottom of the existing page. updateorder  Name the child page: updateorder  Add the Final Site Map New Page as a Child to allorders

11. 11 encircle the entire Site Map Using your mouse, encircle the entire Site Map (Left-click from the top-left area) – hold and drag to the bottom-right, and release. This will select all pages as shown in the graphic on the right  With all pages selected, Right-click and select: Set Template > Apply Template…  Select the SiteMap and Apply a Page Template – 1 of 2

12. 12 + Expand the Template folders Family B From Family B B-01_blue.htpl select: B-01_blue.htplCheck:  Design-time page template Finish Click Finish  Select the SiteMap and Apply a Page Template – 2 of 2

13. 13  Now that you have completed this topic, you should have:  Create a Site-Map using Website-Navigator  Added new pages to the site-map  Linked these pages  Selected a default Page Template for all of the pages in your web-site (for consistent look and feel, and ease of development) Topic Summary