1. ® IBM Software Group © 2006 IBM Corporation JSF Menu Component How to create and use JSF Menu components to add custom static and programmatic (dynamic) menu-ing capabilities to your web application.

2. 2 Last update: 12/04/2007  JSF Menu Controls  You can create a set of menus for pages, with JSF controls – easily and quickly. And even programmatically render/hide individual menu or sub-menu options.  Here’s an example – using the pages we’ve built so far: Let’s do a workshop and create a custom menu. menuPage.jsp  Start by creating a new web page named: menuPage.jsp  Customize the page header  Replace the code in the JSFHandler with the EGL statements in the Notes (below). Read through the EGL comments (we will be using Boolean variables to hide/show menu options programmatically).

3. 3 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu  Add an Enhanced Faces Component Menu Bar near the top of the page …This will add the long, thin gray rectangle with the reminder in it seen above. Properties  Click the Properties tab:  Let’s discuss these menu options:  A Request Link is a JSF Request Hyper link (we won’t be using these)  An Output Link – is a direct HTML Link (this what we’ll use for the actual page links)  A Command – adds a command button (kind’a 90’s if you ask us)  A Sub-panel - is a menu category that opens onClick – to show a group of links tied to a category (like a sub-menu)  A Separator – is a thin line that you can use to organize groups of sub-menu options Menu Bar 

4. 4 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu – Top Menu Options  From the Menu’s Properties, select the Items sub-tab, and - add the to your menu following (see screen capture below) Sub-Panel – Label: Customer Pages Sub-Panel – Label: Orders Pages Separator Output Link – Label: Registration Output Link – Label: Login Separator Sub-Panel – Label: Miscellaneous Sub-Panel – Label: Functions

5. 5 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu – Customers/Orders Menu Options  Click the Customers sub-panel (the 2 nd rectangular box from the top). And from Properties/Items, add the following (see screen capture below) Output Link – Label: All Customers Output Link – Label: Customer Detail  Click the Orders sub-panel (the 3 rd rectangular box from the top). And from Properties/Items, add the following (not shown above) Output Link – Label: All Orders Output Link – Label: Order Detail Customers sub-panel  Orders sub-panel 

6. 6 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu – Miscellaneous Menu Options  Click the Miscellaneous sub-panel (the 4 th rectangular box from the top). And from Properties/Items, add the following (see screen capture below) Output Link – Label: Graph Page Output Link – Label: Dynamic Selection Separator Output Link – Label: Form Controls Output Link – Label: HTML Controls Separator Sub-Panel – Label: Tab Page Miscellaneous sub-panel 

7. 7 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu – Function Menu Options  Click the Functions sub-panel (the 5 th rectangular box from the top). And from Properties/Items, add the following (see screen capture below) Add Command: showHideOptions  Next bind the showHideOptions function to the command button inside of the menu control.

8. 8 Last update: 12/04/2007  JSF Menu Controls – Design the Page and Menu – Add Links  Finally, for each of the actual Output links in your menu:  Select the link in the menu  From Properties/hx:outputLinkEx – specify: faces – example: registration.faces .faces – example: registration.faces  Run menuPage on the server

9. 9 Last update: 12/04/2007  JSF Menu Controls – Programmatically Hiding Menu Options  Recall that there are two boolean variables in the JSFHandler. You can use these to hide/show menu options programmatically. As follows : link 1. Select the link you want to hide/show  Select Customer Detail  From Properties/All Attributes view: rendered  For the rendered attribute  Select Compute… vis  Select the vis – Boolean field Menu Option 2. Select the Menu Option you want to hide/show  Select Order Pages  From Properties/All Attributes view: rendered  For the rendered attribute  Select Compute… vis2  Select the vis2 – Boolean field

10. 10 Last update: 12/04/2007  JSF Menu Controls – Menu Work – Final Steps  Run menuPage on the server  Click the showHide Submit Button When you’re finished: 1. Return to Page Designer, 2. Select the entire Menu control, 3 Change the Orientation to Vertical. 4. Re-run the page.

11. 11 Last update: 12/04/2007  Optional JSF Menu Controls – Add a Command Link to the Menu  You may wish to have a menu fire off an EGL JSFHandler function that responds to a user-action without necessarily forwarding. Or before forwarding. To do this:  From the EGL JSFHandler, add a function that does some processing, then forwards to the next JSP page (or add any other processing as needed)  Add a Command item to your menu  This will create a new Submit Button and an area for you to add the Command Link  (From the Palette) Add a Command Link into (beside or next to) the Submit Button  (From Properties/All Attributes) Specify the Command link's action  Compute/Select the EGL JSFHandler function to invoke upon click of the Command Link  Delete the Submit button  Test