close

Вход

Забыли?

вход по аккаунту

код для вставкиСкачать
®
IBM Software Group
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.
© 2006 IBM Corporation
 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.
 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).
Last update: 12/04/2007
2
 JSF Menu Controls – Design the Page and Menu
 Add an Enhanced Faces Component Menu Bar
near the top of the page
Menu
Bar 
…This will add the long, thin gray rectangle with the reminder in it seen above.
 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
Last update: 12/04/2007
3
 JSF Menu Controls – Design the Page and Menu – Top Menu Options
 From the Menu’s Properties, select the Items sub-tab,
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
Last update: 12/04/2007
4
and -
 JSF Menu Controls – Design the Page and Menu – Customers/Orders Menu Options
Click the Customers sub-panel (the 2nd 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
Customers sub-panel 
Orders sub-panel 
 Click the Orders sub-panel (the 3rd 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
Last update: 12/04/2007
5
 JSF Menu Controls – Design the Page and Menu – Miscellaneous Menu Options
Click the Miscellaneous sub-panel (the 4th 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 
Last update: 12/04/2007
6
 JSF Menu Controls – Design the Page and Menu – Function Menu Options
Click the Functions sub-panel (the 5th 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.
Last update: 12/04/2007
7
 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:
 <pagename>.faces – example: registration.faces
 Run menuPage on the server
Last update: 12/04/2007
8
 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:
1. Select the link you want to hide/show
 Select Customer Detail
 From Properties/All Attributes view:
 For the rendered attribute
 Select Compute…
 Select the vis – Boolean field
2. Select the Menu Option you want to
hide/show
 Select Order Pages
 From Properties/All Attributes view:
 For the rendered attribute
 Select Compute…
 Select the vis2 – Boolean field
Last update: 12/04/2007
9
 JSF Menu Controls – Menu Work – Final Steps
 Run menuPage on the server
 Click the showHide Submit Button
Last update: 12/04/2007
10
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.
 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
Last update: 12/04/2007
11
1/--страниц
Пожаловаться на содержимое документа