® IBM Software Group EGL/Web Project Quick. Start – 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 Web. Site Navigator to create a Site. Map for your application. © 2006 IBM Corporation
UNIT EGL/Web Quick. Start Topics: § Development Model – Terms and Concepts § Importing Database Schema § Creating Custom Business Logic § Creating the U. I. Model § Creating Dynamic Content Web Pages 2
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, website 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: 4 Site. Map – a graphical tree structure, that you use to design the web-site and layout the page navigation 4 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. 1. Data Access Model 2. Custom Business Logic 3. U. I. Model 4. Page Development 3
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 allcustomers 2, which in turn links to updatecustomer 2, 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. 4
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: 4 Open the Web-Site Navigator tool into the Content Area 4 Add New Pages to the Web Site § Name § Links to parent pages 4 Select all of the pages and apply a page template to them 5
Launch the Web-Site Navigator § 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. 6
Create a New Page in the Navigator § 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. § Name your new page: menu 7
Add a New Page as a Child of the Menu Page § To add a new page and link it to an existing page of a Site. Map (from the Palette), Left-Click (select) hold, drag and drop New Page on the bottom of the existing page. § Name the child page: allcustomers 2 Repeat the above steps, …add a child to allcustomers 2, named: updatecustomer 2 8
Add a Second Child to a Parent Page § To add a second child to an existing parent page Right-click over the parent page, and select: Add § New Page Name the child page: allorders 9 As Child
Add the Final Site Map New Page as a Child to allorders § Again, to add a new page and link it to an existing page of a Site. Map (from the Palette), Left-Click (select) hold, drag and drop New Page on the bottom of the existing page. § Name the child page: updateorder 10
Select the Site. Map and Apply a Page Template – 1 of 2 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… 11
Select the Site. Map and Apply a Page Template – 2 of 2 + Expand the Template folders From Family B select: B-01_blue. htpl Check: Design-time page template Click Finish 12
Topic Summary § Now that you have completed this topic, you should have: 4 Create a Site-Map using Website-Navigator § Added new pages to the site-map § Linked these pages 4 Selected a default Page Template for all of the pages in your web-site (for consistent look and feel, and ease of development) 13
Скачать презентацию IBM Software Group EGL Web Project Quick Start
92c4d04f3864d350e910e23613c1d426.ppt