David Botterill's Weblog

You can see that the Hyperlink has the category name and the number of items in that category.  In the Plugin Portal code, I needed the category name so I could show a category list of that category.  To pass that name to the method that would deal with the selection, I used the "Hyperlink.type" property.  The "type" property is used to set the MIME type of the hyperlink.  Since we are handling the link, we don't care about the MIME type so we can use this property to pass values.

So here is some code that creates the Hyperlinks using the type property.

        /**
         * Now create the hyperlinks to add
         */
        Hyperlink dynamicHyperlink1 = new Hyperlink();
        dynamicHyperlink1.setText("list1(" + list1.size() + ")");
        dynamicHyperlink1.setType("list1");
        Hyperlink dynamicHyperlink2 = new Hyperlink();
        dynamicHyperlink2.setText("list2(" + list2.size() + ")");
        dynamicHyperlink2.setType("list2");
        Hyperlink dynamicHyperlink3 = new Hyperlink();
        dynamicHyperlink3.setText("list3(" + list3.size() + ")");
        dynamicHyperlink3.setType("list3");
        
        /**
         * Create a grid panel so we have one column.
         */
        
        HtmlPanelGrid listPanel = new HtmlPanelGrid();
        listPanel.getChildren().add(dynamicHyperlink1);
        listPanel.getChildren().add(dynamicHyperlink2);
        listPanel.getChildren().add(dynamicHyperlink3);
        /**
         * Add the list grid panel to the layout panel.
         */
        dynamicPanel.getChildren().add(listPanel);

Mapping the Hyperlink to Backing Beans Methods

Now to the difficult part, at least before knowing what I'm about to show you.  Many times you want Hyperlinks to invoke some action on your Java backing bean.  To accomplish this, you'll need to know how to create a "MethodExpression".  A Hyperlink component has two properties for dealing with an action:

• ActionListenerExpression
• ActionExpression

The ActionExpression is the method JavaServer Faces uses to determine page navigation.  The ActionListenerExpression will wrap the Hyperlink in the event and let us use the "Type" field as a way to pass data.  When a user clicks on the Hyperlink, the methods will be called in this order.

1. ActionListener method
2. Action method

To create a MethodExpression, you need the "ELContext".  You can get the "ELContext" from the "FacesContext".  You use the "ExpressionFactory" from the "Application" to create the MethodExpression.

So here's the code to create the ActionListenerExpression.

       /**
         * Create the MethodExpressions for the Hyperlinks
         */
        
        /**
         * First get the ExpressionFactory from the Application
         */
        
        ExpressionFactory expressionFactory = this.getApplication().getExpressionFactory();
        
        /**
         * Next get the ELContext
         */
        
        ELContext elContext = FacesContext.getCurrentInstance().getELContext();
        
        /**
         * Now create the MethodExpressions
         */
        MethodExpression listenerMethod = expressionFactory.createMethodExpression(elContext,
                "#{Page1.category_action}",
                null,
                new Class[] {ActionEvent.class});
        
        MethodExpression actionMethod = expressionFactory.createMethodExpression(elContext,
                "#{Page1.category_action}",
                String.class,
                new Class[] {});
        
        dynamicHyperlink1.setActionListenerExpression(listenerMethod);
        dynamicHyperlink1.setActionExpression(actionMethod);
        dynamicHyperlink2.setActionListenerExpression(listenerMethod);
        dynamicHyperlink2.setActionExpression(actionMethod);
        dynamicHyperlink3.setActionListenerExpression(listenerMethod);
        dynamicHyperlink3.setActionExpression(actionMethod);

Lastly, you need to create the methods that will be invoked by clicking the link.  These methods will go on the page bean.  

Let me talk about the "createMethodExpression" method signature for a moment because that's important for understanding the methods.

The first parameter is the ELContext.  We've already discussed that.

The second parameter is the binding expression.  If you look at the code above, you'll see that the page is hard coded in the binding expression.

#{Page1.category_action}

You will also notice the method name "category_action".  

The third parameter is the method return type.  You'll notice in the code above for the ActionListener, we don't define a return type.  For the Action we do define a "String".  This method signature, "String action_method()" called by an action will cause JavaServer Faces navigation to check the outcome to see if a navigate is needed.

The fourth parameter of the "createMethodExpression" call is the list of arguments that will be passed to the method.  Again notice for the ActionListener the "ActionEvent" is passed.  Remember this is how we will pass data.

Here are the methods you need to define on the page.

    public String category_action() {
        return "page2";
    }
    
    public void category_action(ActionEvent ae) {
        String selectedListName = ((Hyperlink)ae.getComponent()).getType();
        getRequestBean1().setSelectedList(selectedListName);
        return;
    }

You can see the "return "page2"" in the Action method.  This corresponds to this navigation file which will cause a page navigation to "Page2".

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlnssi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <navigation-rule>
        <from-view-id>/Page1.jsp</from-view-id>
        <navigation-case>
            <from-outcome>page2</from-outcome>
            <to-view-id>/Page2.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/Page2.jsp</from-view-id>
        <navigation-case>
            <from-outcome>case1</from-outcome>
            <to-view-id>/Page1.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

Conclusion

So here's what the page will look like.