1. ® IBM Software Group © 2006 IBM Corporation Creating JSF/EGL Template Pages This section describes how to create.JTPL (Java Template Pages) using the Page Designer software. And how to integrate with EGL Server-Side U.I. logic.

2. 2 Last update: 12/04/2007 Effective Web Site Design with JSF and EGL  The elements of effective Web Site Design include: .CSS file:  Covered earlier in this course, your shop’s.css will control all HTML text and color  Website-Navigation:  Covered in the EGL Foundation course, you will create a site-map for your application that provides an architect’s view of the user page-navigation experience. Note that you also may use the SiteMap to manipulate page/template assignment – and for prototypes, to create live page-links.  Template pages:  You will create your own.JTPL and.HTPL pages from scratch –Alternatively, you may want to start with the IBM template pages, just to learn some basic page design patterns

3. 3 Last update: 12/04/2007 What is a Template Page?  A template is a special web page that allows you to create a customized page framework, that can consist of:.HTPL Template pages - Static text - Static graphics - HTML controls and a consistent page layout (typically through HTML tables and DIV tags).JTPL Template pages - All of the above + - Dynamic text and graphics – available through EGL and JSF components - JSF Components  Once created, you may use Template pages to provide your EGL/JSF project web pages with:  A consistent look and feel  Boilerplate onConstruction processing – (.JTPL pages only)  Let’s have a look at a project Web Page that uses a custom.JTPL page

4. 4 Last update: 12/04/2007 Our Target Web Page – with a Template Page Can you spot all the JSF and EGL elements here?

5. 5 Last update: 12/04/2007.JTPL Template Page Elements  HTML table 4 rows/3 columns  Top row:  Static Graphic  Static Text  EGL variable  2 nd row  Static text  Horizontal rule  3 rd row  An embedded HTML table – 3 rows/1 column  A custom menu  Static text  White background  4 th row  A boilerplate web footer Let’s follow the steps to build a custom template page like this!

6. 6 Last update: 12/04/2007  Create a New Custom.JTPL Template Page  From Project Explorer, right- click over \WebContent\ and select:  New  Web Page Template  Name the page template:  myTemplate  Note – do note type the.jsp extension you use on a web page (this is a template)  Check  Design-time Template  Click Finish Note – you will get a warning to add a Content Area to the template. Which you will do, so just click OK to clear the warning and continue.

7. 7 Last update: 12/04/2007  Create the JSFHandler for the Custom Template  Right-click over the template page and select Edit Page Code…  As you can see, you can add EGL to template pages to perform dynamic processing  Add the two statements shown here, to the boilerplate JSFHandler code:   Comments optional  Press Ctrl/S and close the JSFHandler (return to Page Designer)

8. 8 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Add the HTML Table  Your new template page will open in Page Designer, and you will get a warning to add a Content Area to the template. Content Areas are JSF tags that allow pages that use this template to add their own content (JSF components, EGL variables, etc.). All areas of a.JTPL outside of the Content Area will be “read-only” for pages that use the template.  Add a 4X3 HTML table  Width: 950 pixels

9. 9 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Customize the Top Row  In the top row of the HTML table (as shown below) add a:  Static Graphic (from the \WebContent\images\ folder) – (see notes on the File property)  Static text  Optionally customize the text size and font (we’re using Verdana)  An Enhanced Faces Component – Output text  Right-justify the right-hand cell

10. 10 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Customize the 2 nd Row  In the second row of the HTML table (as shown below):  Select all three cells. Right-click and from the Table menu, join the selected cells  Make this new row’s vertical alignment top (from Properties)  From the Page Template drawer in the Palette, add a Content area  Modify the default text in the Content Area, and with the Static text shown below  Optionally customize the text size and font (we’re using Verdana)  Add a Horizontal Rule below the static text  Delete any superfluous blank links

11. 11 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Customize the 3 rd Row – 1 of 2  In the 3 rd row of the HTML table (as shown below) do the following:  Select all three cells. Right-click and from the Table menu, join the selected cells  Make this new row’s alignment top (from Properties)  From the Page Template drawer in the Palette, add another Content area to the 3 rd row  Inside the new Content Area add a 2 nd HTML table: 1 row/2 columns, width: 100%  In the right-hand column of the row, add the text and line breaks as shown  The next slide details out how to build the vertical menu bar

12. 12 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Customize the 3 rd Row – 2 of 2  In the left-hand column of the 3 rd row:  Align top, and add a new Menu Bar component. From the menu’s Properties: The initial Orientation will be Horizontal. Select Vertical from the combo-box From -Items  Add 2 Output links.  Then add a Sub-panel with two more output links (you will need to click on the new sub-panels area to access - Items within the sub-panel).  When you’ve added the sub-panel, reselect the outer items area.  Add two more output links as shown in the screen capture  Select the “Non Showing Link” – and go to Properties/All Attributes. Specify the render property. Bind its value to the vis field in the JSFHandler (which will hide the Non Showing Link at run-time, when vis is false.  Add one more option (see picture below)  Note: you can customize the links as shown – make up your own link labels, etc. The details are not as important as having a menu on the page (and doing the rendered link is useful)

13. 13 Last update: 12/04/2007  Create a New Custom.JTPL Template Page – Customize the Bottom Row  In the bottom row of the HTML table (as shown below):  Select all three cells. Right-click and from the Table menu, join the selected cells  From some web site ( we’ve used IBM’s www.ibm.com ) copy down a graphic to insert into this new row. Note your \images\ folder may also have this graphicwww.ibm.com  Optionally center the graphic in the row

14. 14 Last update: 12/04/2007  Customize the.JTPL Template Colors  Select the entire outer HTML table and specify: #E7E7E7  Border: 0, Color: #E7E7E7  Select the middle cell in the inner table, and make it white

15. 15 Last update: 12/04/2007  Customize the.CSS Colors and Fonts It’s usually a good idea to get all of your page’s fonts and colors in agreement. Optionally do the following:  From \theme\ open stylesheet.css.headerClass  Scroll down to find.headerClass  Change the fonts and colors to line up with your.JTPL’s  #E7E7E7  #E7E7E7 – background color  Verdana  Verdana – font-family Ctrl/S  Save your changes (Ctrl/S)

16. 16 Last update: 12/04/2007  Create a New Web Page using the Custom.JTPL Template myTemplate.jtpl  Create a new Web Page, selecting myTemplate.jtpl 

17. 17 Last update: 12/04/2007  Create the JSFHandler for the Web Page  Right-click over the template page and select Edit Page Code…  Add the statements shown here, to the boilerplate JSFHandler code:   Note: Add the customers variable declaration –Press Ctrl/Shift/O – which resolves imports  Press Ctrl/S and close the JSFHandler (return to Page Designer)

18. 18 Last update: 12/04/2007  Add the customers dataTable  From Page Designer/Page Data – drag and drop customers onto the page.  Create a read/only dataTable with only the first 5 columns *** SEE ADDITIONAL INSTRUCTIONS IN THE NOTES ***  Optionally add a JSF Link to the LastName field *** SEE ADDITIONAL INSTRUCTIONS IN THE NOTES ***

19. 19 Last update: 12/04/2007  Run the Page on the Server Note that none of the links will work, unless you’ve entered URL properties…