html5-img
1 / 11

JSF Menu Component

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.  JSF Menu Controls.

nikita
Télécharger la présentation

JSF Menu Component

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.  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).

  3.  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. • 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.  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.  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 • 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 Customers sub-panel  Orders sub-panel 

  6.  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 

  7.  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.

  8.  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

  9.  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

  10.  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.  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

More Related