STEP 17: Test Liferay Portlet with JSF Navigation

Test

In NetBeans...

• Click on the triangular green Run Main Project icon below the menu bar.


• A browser window will automatically open. If the window does not open, go to http://localhost:8080/web/guest/ in your web browesr.

In the web browser...

• Click on the Login as bruno link in the Current Users portlet.


• Hover over Welcome Bruno Admin! at the top right.


• Click Add Application.


• The Add Application portlet will appear.


• Click on ICEfaces Portlets in the The Add Application portlet to expand the node.


• Click Add next to ICEfaces: MyIcePortlet.


• The ICEfaces: MyIcePortlet will appear.

In the web browser...

• Click on the View, Edit, and Help buttons.


• Confirm that clicking on the View button navigates to the View portlet page.


• Confirm that clicking on the Edit button navigates to the Edit portlet page.


• Confirm that clicking on the Help button navigates to the Help portlet page.

Note that navigating between the VIEW, EDIT, and HELP pages should actually be handled by the portal container, as was demonstrated in STEP 11.

In the web browser...

• Confirm that the button navigation is working correctly.


• Click the Remove (X) icon at the top right of the ICEfaces: MyIcePortlet portlet.


• Are you sure you want to remove this component? OK


• Hover over Welcome Bruno Admin! at the top right.


• Click Sign Out.

In NetBeans...

• On the Output panel, click the Stop Server (X) icon.

STEP 16: Update web.xml

This is the final step.

Add Navigation Rules to faces-config.xml

Projects (tab) | Expand ICEfacesLiferay001 | Expand Configuration Files | Double Click web.xml | XML

Edit web.xml and add the <context-param> element, shown in bold, just before the closing </web-app> tag. Then save the file. This will turn off compression so that the JSF navigation we defined works.

    <context-param>
        <param-name>com.icesoft.faces.compressResources</param-name>
        <param-value>false</param-value>
    </context-param>


STEP 15: Handle Button Actions

The Managed Beans must produce the correct form-outcomes, as defined in faces-config.xml, for each button click.

Update MyIcePortlet_view.java

Projects (tab) | Expand ICEfacesLiferay001 | Expand Source Packages | Expand my.icefaces.liferay.portlet | Double Click MyIcePortlet_view.java

Edit MyIcePortlet_view.java and add the two methods as shown in bold, below. Note that these method names are referenced in the action attributes of the the <ice:commandButton> tags in MyIcePortlet_view.jspx. Also note that the method return values match the <from-outcome> values specified in faces-config.xml. After makeing these changes, save the file.

package my.ice.faces.liferay.portlet;

public class MyIcePortlet_view {

    public MyIcePortlet_view() {
    }
    public String goToEdit() {
        return "edit";
    }

    public String goToHelp() {
        return "help";
    }
}


Update MyIcePortlet_edit.java

Projects (tab) | Expand ICEfacesLiferay001 | Expand Source Packages | Expand my.icefaces.liferay.portlet | Double Click MyIcePortlet_edit.java

Edit MyIcePortlet_view.java and add the two methods as shown in bold, below. Note that these method names are referenced in the action attributes of the the <ice:commandButton> tags in MyIcePortlet_edit.jspx. Also note that the method return values match the <from-outcome> values specified in faces-config.xml. After makeing these changes, save the file.

package my.ice.faces.liferay.portlet;

public class MyIcePortlet_edit {

    public MyIcePortlet_edit() {
    }
    public String goToView() {
        return "view";
    }

    public String goToHelp() {
        return "help";
    }
}


Update MyIcePortlet_help.java

Projects (tab) | Expand ICEfacesLiferay001 | Expand Source Packages | Expand my.icefaces.liferay.portlet | Double Click MyIcePortlet_help.java

Edit MyIcePortlet_view.java and add the two methods as shown in bold, below. Note that these method names are referenced in the action attributes of the the <ice:commandButton> tags in MyIcePortlet_help.jspx. Also note that the method return values match the <from-outcome> values specified in faces-config.xml. After makeing these changes, save the file.

package my.ice.faces.liferay.portlet;

public class MyIcePortlet_help {

    public MyIcePortlet_help() {
    }
    public String goToView() {
        return "view";
    }

    public String goToEdit() {
        return "edit";
    }
}


STEP 14: Add Navigation Rules

Add Navigation Rules to faces-config.xml

Projects (tab) | Expand ICEfacesLiferay001 | Expand Configuration Files | Double Click faces-config.xml | XML (button above diagram)

Edit faces-config.xml and add the three <navigation-rule> elements as shown in bold, below. Then save the file.

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="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">
    <managed-bean>
        <managed-bean-name>MyIcePortlet_view</managed-bean-name>
        <managed-bean-class>my.ice.faces.liferay.portlet.MyIcePortlet_view</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>MyIcePortlet_edit</managed-bean-name>
        <managed-bean-class>my.ice.faces.liferay.portlet.MyIcePortlet_edit</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>MyIcePortlet_help</managed-bean-name>
        <managed-bean-class>my.ice.faces.liferay.portlet.MyIcePortlet_help</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>

    <!-- **************** -->
    <!-- *              * -->
    <!-- *  NAVIGATION  * -->
    <!-- *              * -->
    <!-- **************** -->

    <navigation-rule>
        <from-view-id>/MyIcePortlet_edit.jspx</from-view-id>
        <navigation-case>
            <from-outcome>help</from-outcome>
            <to-view-id>/MyIcePortlet_help.iface</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>view</from-outcome>
            <to-view-id>/MyIcePortlet_view.iface</to-view-id>
        </navigation-case>
    </navigation-rule>

    <navigation-rule>
        <from-view-id>/MyIcePortlet_help.jspx</from-view-id>
        <navigation-case>
            <from-outcome>edit</from-outcome>
            <to-view-id>/MyIcePortlet_edit.iface</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>view</from-outcome>
            <to-view-id>/MyIcePortlet_view.iface</to-view-id>
        </navigation-case>
    </navigation-rule>

    <navigation-rule>
        <from-view-id>/MyIcePortlet_view.jspx</from-view-id>
        <navigation-case>
            <from-outcome>edit</from-outcome>
            <to-view-id>/MyIcePortlet_edit.iface</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>help</from-outcome>
            <to-view-id>/MyIcePortlet_help.iface</to-view-id>
        </navigation-case>
    </navigation-rule>

</faces-config>

Note: Because each page is represented by both a *.jspx and a *.iface extension, the page flow diagram in NetBeans can be confusing and should not be used. Therefore it is better to use the XML view of faces-config.xml to manage the ICEfaces JSF page flows.

STEP 13: Add Buttons to VIEW, EDIT, and HELP JSF Pages

Now we will add buttons to the JSF pages that, for example purposes, will navigate between the VIEW, EDIT, and HELP pages we created earlier. However, please note that navigating between the VIEW, EDIT, and HELP pages should actually be handled by the portal container, as was demonstrated in STEP 11.

Update MyIcePortlet_view.jspx

Projects (tab) | Expand ICEfacesLiferay001 | Expand Web Pages | Double Click MyIcePortlet_view.jspx

Edit MyIcePortlet_view.jspx and add the the <table> element as shown in bold, below. Then save the file.

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component">
    <html>

        <head>
            <title>VIEW: My ICEfaces Portlet</title>
        </head>

        <body>
            <ice:portlet>
                <ice:form id="iceform">

                    VIEW: Hello World ICEfaces Portlet

                    <table width ="100%">
                        <colgroup>
                            <col width="33%"/>
                            <col width="33%"/>
                            <col width="33%"/>
                        </colgroup>
                        <tr>
                            <td align="center">
                                <!-- No Button -->
                            </td>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_view.goToEdit}"
                                                 id="editButton"
                                                 style="color: orange; width: 50%"
                                                 value="Edit"/>
                            </td>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_view.goToHelp}"
                                                 id="helpButton"
                                                 style="color: blue; width: 50%"
                                                 value="Help"/>
                            </td>
                        </tr>
                    </table>

                </ice:form>
            </ice:portlet>
        </body>

    </html>
</f:view>



Update MyIcePortlet_edit.jspx

Projects (tab) | Expand ICEfacesLiferay001 | Expand Web Pages | Double Click MyIcePortlet_edit.jspx

Edit MyIcePortlet_edit.jspx and add the the <table> element as shown in bold, below. Then save the file.

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component">
    <html>

        <head>
            <title>EDIT: My ICEfaces Portlet</title>
        </head>

        <body>
            <ice:portlet>
                <ice:form id="iceform">

                    EDIT: Hello World ICEfaces Portlet

                    <table width ="100%">
                        <colgroup>
                            <col width="33%"/>
                            <col width="33%"/>
                            <col width="33%"/>
                        </colgroup>
                        <tr>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_edit.goToView}"
                                                 id="viewButton"
                                                 style="color: green; width: 50%"
                                                 value="View"/>
                            </td>
                            <td align="center">
                                <!-- No Button -->
                            </td>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_edit.goToHelp}"
                                                 id="helpButton"
                                                 style="color: blue; width: 50%"
                                                 value="Help"/>
                            </td>
                        </tr>
                    </table>

                </ice:form>
            </ice:portlet>
        </body>

    </html>
</f:view>



Update MyIcePortlet_help.jspx

Projects (tab) | Expand ICEfacesLiferay001 | Expand Web Pages | Double Click MyIcePortlet_help.jspx

Edit MyIcePortlet_help.jspx and add the the <table> element as shown in bold, below. Then save the file.

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component">
    <html>

        <head>
            <title>HELP: My ICEfaces Portlet</title>
        </head>

        <body>
            <ice:portlet>
                <ice:form id="iceform">

                    HELP: Hello World ICEfaces Portlet

                    <table width ="100%">
                        <colgroup>
                            <col width="33%"/>
                            <col width="33%"/>
                            <col width="33%"/>
                        </colgroup>
                        <tr>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_help.goToView}"
                                                 id="viewButton"
                                                 style="color: green; width: 50%"
                                                 value="View"/>
                            </td>
                            <td align="center">
                                <ice:commandButton action="#{MyIcePortlet_help.goToEdit}"
                                                 id="editButton"
                                                 style="color: orange; width: 50%"
                                                 value="Edit"/>
                            </td>
                            <td align="center">
                                <!-- No Button -->
                            </td>
                        </tr>
                    </table>

                </ice:form>
            </ice:portlet>
        </body>

    </html>
</f:view>


STEP 12: Create JSF Managed Beans

Create Managed Bean for JSF View Page

Projects (tab) | Expand ICEfacesLiferay001 | Right Click Source Packages | New | Other

• Categories: Java Server Faces


• File Types: JSF Managed Bean

Next

• Class Name: MyIcePortlet_view


• Project: ICEfacesLiferay001


• Location: Source Packages


• Package: my.icefaces.liferay.portlet


• Created File: (automatically populated)


• Configuration File: WEB-INF/faces-config.xml


• Name: MyIcePortlet_view


• Scope: request

Finish

A new file called MyIcePortlet_view.java will be created. Also a <managed-bean> element for MyIcePortlet_view will be added to faces-config.xml in the WEB-INF folder.


Create Managed Bean for JSF Edit Page

Projects (tab) | Expand ICEfacesLiferay001 | Expand Source Packages | Right Click my.icefaces.liferay.portlet | New | JSF Managed Bean

• Categories: Java Server Faces


• File Types: JSF Managed Bean

Next

• Class Name: MyIcePortlet_edit


• Project: ICEfacesLiferay001


• Location: Source Packages


• Package: my.icefaces.liferay.portlet


• Created File: (automatically populated)


• Configuration File: WEB-INF/faces-config.xml


• Name: MyIcePortlet_edit


• Scope: request

Finish

A new file called MyIcePortlet_edit.java will be created. Also a <managed-bean> element for MyIcePortlet_edit will be added to faces-config.xml in the WEB-INF folder.


Create Managed Bean for JSF Help Page

Projects (tab) | Expand ICEfacesLiferay001 | Expand Source Packages | Right Click my.icefaces.liferay.portlet | New | JSF Managed Bean

• Categories: Java Server Faces


• File Types: JSF Managed Bean

Next

• Class Name: MyIcePortlet_help


• Project: ICEfacesLiferay001


• Location: Source Packages


• Package: my.icefaces.liferay.portlet


• Created File: (automatically populated)


• Configuration File: WEB-INF/faces-config.xml


• Name: MyIcePortlet_help


• Scope: request

Finish

A new file called MyIcePortlet_help.java will be created. Also a <managed-bean> element for MyIcePortlet_help will be added to faces-config.xml in the WEB-INF folder.

STEP 11: Create the Edit and Help Portlet Pages

We have created and tested the portlet's VIEW page. Now we will add the EDIT and HELP pages and test the poral server's navigation between these pages.


Create the Edit JSF Portlet Page

Projects (tab) | Expand ICEfacesLiferay001 | Right Click WebPages | New | JSF JSP Page...

• JSP File Name: MyIcePortlet_edit


• Project: ICEfacesLiferay001


• Location: WebPages


• Folder: (blank)


• Created File: (automatically populated)


• Options: JSP Document (XML Syntax)

Finish

A new file called MyIcePortlet_edit.jspx will be created. Replace the entire contents of this file with the following. Then save the new file.

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component">
    <html>

        <head>
            <title>EDIT: My ICEfaces Portlet</title>
        </head>

        <body>
            <ice:portlet>
                <ice:form id="iceform">

                    EDIT: Hello World ICEfaces Portlet

                </ice:form>
            </ice:portlet>
        </body>

    </html>
</f:view>


Create the Help JSF Portlet Page

Projects (tab) | Expand ICEfacesLiferay001 | Right Click WebPages | New | JSF JSP Page...

• JSP File Name: MyIcePortlet_help


• Project: ICEfacesLiferay001


• Location: WebPages


• Folder: (blank)


• Created File: (automatically populated)


• Options: JSP Document (XML Syntax)

Finish

A new file called MyIcePortlet_help.jspx will be created. Replace the entire contents of this file with the following. Then save the new file.

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component">
    <html>

        <head>
            <title>HELP: My ICEfaces Portlet</title>
        </head>

        <body>
            <ice:portlet>
                <ice:form id="iceform">

                    HELP: Hello World ICEfaces Portlet

                </ice:form>
            </ice:portlet>
        </body>

    </html>
</f:view>


Update portlet.xml

Projects (tab) | Expand ICEfacesLiferay001 | Expand Web Pages | Expand WEB-INF | Double Click portlet.xml

Edit portlet.xml and add the elements shown in bold, below. Then save the file.

<?xml version="1.0"?>

<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"
             version="1.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd">

    <portlet>

        <portlet-name>MyIcePortlet</portlet-name>
        <display-name>MyIcePortlet</display-name>
        <portlet-class>com.icesoft.faces.webapp.http.portlet.MainPortlet</portlet-class>

        <init-param>
            <name>com.icesoft.faces.portlet.viewPageURL</name>
            <value>/MyIcePortlet_view.iface</value>
        </init-param>

        <init-param>
            <name>com.icesoft.faces.portlet.editPageURL</name>
            <value>/MyIcePortlet_edit.iface</value>
        </init-param>

        <init-param>
            <name>com.icesoft.faces.portlet.helpPageURL</name>
            <value>/MyIcePortlet_help.iface</value>
        </init-param>

        <supports>
            <mime-type>text/html</mime-type>
            <portlet-mode>VIEW</portlet-mode>

            <portlet-mode>EDIT</portlet-mode>
            <portlet-mode>HELP</portlet-mode>

        </supports>

        <portlet-info>
            <title>ICEfaces: MyIcePortlet</title>
            <short-title>MyIcePortlet</short-title>
            <keywords>ICEfaces My Ice Portlet</keywords>
        </portlet-info>
        
    </portlet>

</portlet-app>


Test

In NetBeans...

• Click on the triangular green Run Main Project icon below the menu bar.


• A browser window will automatically open. If the window does not open, go to http://localhost:8080/web/guest/ in your web browesr.

In the web browser...

• Click on the Login as bruno link in the Current Users portlet.


• Hover over Welcome Bruno Admin! at the top right.


• Click Add Application.


• The Add Application portlet will appear.


• Click on ICEfaces Portlets in the The Add Application portlet to expand the node.


• Click Add next to ICEfaces: MyIcePortlet.


• The ICEfaces: MyIcePortlet will appear.


• Click the (...) icon at the top right of the ICEfaces: MyIcePortlet portlet.


• Select Preferences.


• The EDIT page will appear.


• Click the Return to Full Page link at the top right of the portlet.


• The VIEW page will appear again.


• Click the (...) icon at the top right of the ICEfaces: MyIcePortlet portlet.


• Select Help.


• The HELP page will appear.


• Click the Return to Full Page link at the top right of the portlet.


• The VIEW page will appear again.

In the web browser...

• Confirm that the VIEW, EDIT, and HELP portlet pages are displayed.


• Click the Remove (X) icon at the top right of the ICEfaces: MyIcePortlet portlet.


• Are you sure you want to remove this component? OK


• Hover over Welcome Bruno Admin! at the top right.


• Click Sign Out.

In NetBeans...

• On the Output panel, click the Stop Server (X) icon.