Building the Navigation Controls for the Application Views

As stated in Preparing Your Views For Adding Navigation Controls, the navigation controls for the application are in the header.view file. As a result, to build the navigation for your views, you update the header.view file. This section describes how to set up different navigation controls for each role.

Previous Procedure

Building Application Navigation Files For Each Role

Basic Steps

Decide the type of Webapp control you want to use for your navigation. The header.view file that Designer creates has a Static Menus control. You can change it if you want. For the sample, change the Static Menus control to a Popup Menus control.

Set up the Webapp control that Designer creates for one of the roles in your application.

Designer creates the header.view with an appNavBean managed bean that exposes the navigation that you define in the app-nav.xml file. To have the Webapp control provide links to the views defined in the app-nav.xml file, bind the Webapp control’s App Nav Bean property to the appNavBean managed bean.

For the sample, the app-nav.xml file defines the navigation for the admin role. To have this Webapp control (which was changed to a Popup Menus control) provide links to the views for the admin role, bind the Popup Menus control’s App Nav Bean property to the appNavBean managed bean.

For each additional role that you want to provide separate navigation for:

Add another Webapp control to the header.view.

Add a managed bean to the header.view that you will configure to expose the navigation you define for the role. When defining the managed bean, set the Superclass to com.webmethods.caf.faces.bean.nav.xml.XMLAppNavBean to indicate that it is an application navigation bean.

For the sample, you add a managed bean named userAppNav, and configure it to expose the navigation you defined in the app-nav-user.xml file. For more information on this file, see step 3 and step 4 in Building Application Navigation Files For Each Role.

Bind the App Nav Bean property of the Webapp control you added to the new managed bean that you added.

Add security roles to your application with names that match names of the roles in the underlying application server.

For sample the prerequisite setup required two roles in the underlying application server, an admin role and a tomcat role. So for the sample, add two application security roles, one named “admin” and one named “tomcat”.

To identify the users for which the application is to display a navigation control, bind the Rendered property of that Webapp control to a security role. The application only displays the control if the logged in user is a member of the security role.

To further prevent unauthorized users from directly accessing pages by directly typing their URLs into a Web browser, add security restraints to the web.xml file.

Detailed Step-By-Step Instructions

1	From the Project view, open the header.view (Project > WebContent > header.view).

2	Change the Static Menus control to another type of Webapp control if you want. For the sample, change the Static Menus control to a Popup Menus control.

a	Right click the Static Menus control on the design canvas and select Change Control Type.

b	In the Control Type Editor, select Webapp > Popup Menus.

c

Click OK.

3	Set up the existing Webapp control (now a Popup Menus control) for one of your roles by binding it to the appNavBean managed bean that already exists in the header.view.

The appNavBean that is already in the header.view exposes the navigation that you define in the app-nav.xml file. For the sample, the app-nav.xml file contains the navigation for the admin role, so set up the Popup Menus control for the admin role.

a	On the design canvas, select the Popup Menus control.

b	In the Properties view, select the Value tab.

c	In the App Nav Bean property field, type a binding expression to bind the property to the appNavBean managed bean:

#{HeaderView.appNavBean}

Tip! To easily form the binding expression, click for the App Nav Bean property field. Designer displays the Expression Binding wizard. In the wizard, select App Nav Bean and click OK. Designer forms the binding expression for you and fills in the App Nav Bean property field in the Properties view.

4	Add a WebApp control for another role and set up the control.

For the sample, add another Popup Menus control that you set up for the tomcat role.

a	From the Palette view, drag a Popup Menus control (Control > Webapp > Popup Menus) on to the design canvas next to the existing Popup Menus control.

b	Add a managed bean to the header.view that you will use to expose the navigation for the tomcat role, which you defined in the app-nav-user.xml file in Building Application Navigation Files For Each Role.

1	From the Bindings view, right click Managed Beans > header and select New > Managed Bean.

2	On the Managed Bean window, specify the following and click Next.

 

For this field...	Specify...	Notes
Managed Bean Name	userAppNav	Specify a name for how you want to reference this bean within your application.
Managed Bean Scope	request	Use request scope, which is the same setting used for the default application navigation page bean. You can change the scope if you want.

3	On the Java Type window, specify the following and click Finish.

 

For this field...	Specify...
Package	com.webmethods.caf
Name	A name for the Java class, for example, wm_rolebased_navigationUserAppNav.
Superclass	com.webmethods.caf.faces.bean.nav.xml.XMLAppNavBean

c	Configure the new managed bean so that it exposes the navigation that you defined for the role.

For the sample, the navigation for the tomcat role is in the app-nav-user.xml file. So configure the new managed bean to expose the navigation in this file.

1	From the Solutions view, open the User Interfaces > Project > Faces Configuration (faces-config.xml) file.

2	Click the ManagedBean tab.

3	In the Managed Bean Elements tree on the left, select the new manage bean (e.g., request > userAppNav).

4	In the Initialization section of the screen on the right, click Add.

5	In the Add Managed Bean Property window, specify the following and click OK:

 

For this field...	Do this...
Property Name	Select configFile to indicate that you want to use the application navigation configuration file itself to initialize the managed bean.
Value type	Select value from the list.
Value	The path to the application navigation configuration file that you created, for example: /WEB-INF/app-nav-user.xml

d	Bind the new Webapp control in the header.view to the new managed bean.

1	Open the header.view.

2	Select the Webapp control. For the sample, select the new Popup Menus control.

3	In the App Nav Bean property field, type a binding expression to bind the property to the new managed bean, for example:

#{HeaderView.userAppNav}

5	Repeat step 4 for each role that requires separate navigation.

6	Add security roles to your application. You need one security role for each role you want to use for navigation controls.

For example, in the sample that illustrates this use case, the underlying server has two roles, “admin” for administrative users and “tomcat” for general users. Add these two roles:

a	In Bindings view, expand the Implicit Variables node.

b	Right click Application Security Roles, and select Add > Application Security Roles.

c	In the Role Name field, type the name of the role, for example, admin. The role name you type must match the name of the role in the underlying application server.

d	Click Finish.

e	Repeat to add an application security role named tomcat.

7	Bind each Webapp control’s Rendered property to its corresponding application security role. By doing so, when a user accesses the application, the application displays the navigation bound to the role that the user is a member of.

For the sample, bind the first Popup Menus control to the admin security role and the second to the tomcat security role.

a	From the Bindings view, drag the Implicit Variables > Application Security Roles > admin node on to the first Popup Menus control in the header.view. Designer adds the binding expression to the Popup Menus control’s Rendered property.

To view the binding expression, with the Popup Menus control selected on the design canvas, select the General tab in the Properties view to see the Rendered property. The binding expression will be the following:

#{securityRoles["admin"]}

b	Similarly to bind the second Popup Menus control to the tomcat security role, from the Bindings view drag the Implicit Variables > Application Security Roles > tomcat node on to the second Popup Menus control. The binding expression that Designer adds is:

#{securityRoles["tomcat"]}

8	Add security constraints to the web.xml file for the application to prevent non-authorized users from accessing views by directly typing the URLs into a Web browser.

For the sample, you want to prevent general users (those in the tomcat role) from accessing the administrative views by directly typing the URL to one of the administrative views. The following shows how to update the web.xml file.

a	From the Project view, open the Project > WebContent > WEB-INF > web.xml file.