Tuesday, October 27, 2009

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>

1 comment:

  1. Thanks for the useful blog. I am using ICEFaces 2.0 with Liferay 6.0. I am able to follow the blog till this step, however, when I place the content highlighted in red, there is a runtime NullPointerException encountered... looks like the MyIcePortlet_edit is coming null for me... just a guess... Any suggestions?

    ReplyDelete