Simple Page Fragment Menu example

Introduction

This example builds on The Tutorial Divas' Example but solves a few problems relating to maintaining menu state. You can download the sample project for JSC 2 update 1 here (when I figure out how to do this). It should import into VWP without problems.

The sample app contains

• a single line of hand entered working java code (plus one line that does logging)
• one hand type binding expression for each top level tab
• one hand typed sessionBean property and one that you can enter from the bean editor.

Unfortunately the navigation editor is not usable for this type of navigation and you have to hand type the Navigation.xml

Contents

Creating the fragment and tabset.

• Create a page fragment
• Place a TabSet onto the page fragment and call it primaryTabset.
• Create 4 or 5 top level tabs.
• For the 1st and 2nd tab create 2 or 3 child tabs.
• If you need help refer to the more basic tutorials from Sun.
• Delete each page layout component that the IDE creates for you.
• Create target pages for each bottom level tab
• Place a static text component on each page. Set the static text's text property to "page1" "page2" etc so you can see which page comes up.

Action handler

Place the following action handler into your header's java file.

public String universalTab_action() {
        
         String selected = getPrimaryTabSet().getSelected();
     log ("navigation to "+selected);
        return selected;
    }

Select all the tabs and assign the universalTab_action to them.

At this point your app will send the id of each tab to the navigation handler as you click it.

Navigation handler

Now we will tell the navigation handler which page to display when it receives a tab's id. Right click your page and edit the page navigation. Go to the xml source. Now edit it to look like the following:

    <navigation-rule>
    <from-view-id>/*</from-view-id>
        <navigation-case>
            <from-outcome>tab5</from-outcome>
            <to-view-id>/Page5.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>tab6</from-outcome>
            <to-view-id>/Page6.jsp</to-view-id>
        </navigation-case>
        ....
        ....
    </navigation-rule>

Note: I've organised the sample application so that tab1 has a corresponding Page1.jsp. In a real app you will, no doubt, want to use more meaningful names for the tabs and pages.

Tab state

TabSet state

In order for your TabSet to maintain states between requests you need a SessionBean property to store the select tab in. Right click SessionBean1 in the explorer and choose Add. Add a string type bean named tabSetHolder and make it read and write access.

Child tab state.

We will use a Map property to store the tab child state. This allows us to add more tabs at a later date without changing our storage size. Double click the SessionBean1 and type in the following:

  /**
     * Holds value of property childHolder.
     */
    private Map childHolder = new HashMap();

    /**
     * Getter for property childHolder.
     * @return Value of property childHolder.
     */
    public Map getChildHolder() {

        return this.childHolder;
    }

    /**
     * Setter for property childHolder.
     * @param childHolder New value of property childHolder.
     */
    public void setChildHolder(Map childHolder) {

        this.childHolder = childHolder;
    }

Binding the TabSet

Bind the selected property of the primaryTabSet to the tabSetHolder in SessionBean1.

Binding the Tabs

Choose the jsp editor and bind the selectedChildId property of each tab as follows:

selectedChildId="#{SessionBean1.childHolder['tab1']}" ...>

Repeat this binding for each tab changing the tab1 to match the name of the tab.

That's it!

Your menu system should now work!

More to do

Immediate property

Reset state

If you do some navigation outside the menu system (eg from a master to a detail page) you will want to reset the menu state when you've finished. Add the following to your save or cancel button:

return getValue("#{_header.primaryTabSet.selected}").toString();

Initially selected Tab

The first top level tab will be initially selected. You will probably want the first second level tab to be initially selected. This is easy to do: open your SessionBean and change the tabSetHolder definition to be:

private String tabSetHolder = "tab5";

More to Explore

Divas' blog entry

-- Main.khumalo - 05 Dec 2006