JSF Portlets with Liferay, ICEfaces, and Netbeans

STEP 17: Test Liferay Portlet with JSF Navigation

2009-10-28T18:52:00.000-07:00

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

2009-10-28T18:33:00.000-07:00

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

2009-10-28T12:30:00.000-07:00

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

2009-10-27T16:52:00.000-07:00

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

2009-10-27T16:47:00.000-07:00

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

2009-10-26T20:57:00.000-07:00

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

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

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

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

2009-10-24T23:12:00.000-07:00

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.

STEP 10: Create an ICEfaces Portlet in Liferay

2009-10-24T14:54:00.001-07:00

Create ICEfaces Project in NetBeans

File | New Project

Categories: Java Web

Projects: Web Application

Project Name: ICEfacesLiferay001

Server: Liferay 5.2.3 (Tomcat 6.0.18)

Java EE Version: Java EE 5

Context Path: /ICEfacesLiferay001

Select the frameworks you want to use in your web application.

Checked: ICEfaces

ICEfaces Configuration...

Checked: Validate XML

Checked: Synchronous Update

Checked: Concurrent DOM View

Un-Checked: welcomeICEfaces.jspx

Un-Checked: welcomeICEfaces.xhtml (Facelets Only)

Finish

Create JSF Portlet Page

Projects (tab) | Expand ICEfacesLiferay001 | Right Click WebPages | New | Other

Categories: Java Server Faces

File Types: JSF JSP Page

JSP File Name: MyIcePortlet_view

Project: ICEfacesLiferay001

Location: WebPages

Folder: (blank)

Created File: (automatically populated)

Options: JSP Document (XML Syntax)

Finish

A new file called MyIcePortlet_view.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>VIEW: My ICEfaces Portlet</title>
        </head>

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

                    VIEW: Hello World ICEfaces Portlet

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

    </html>
</f:view>

Categories: XML

File Types: XML Document

File Name: portlet

Project: ICEfacesLiferay001

Folder: web/WEB-INF

Created File: (automatically populated)

Selected: Well-formed Document

Finish

A new file called portlet.xml will be created. Replace the entire contents of this file with the following. Then save the new 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>

        <supports>
            <mime-type>text/html</mime-type>
            <portlet-mode>VIEW</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>

Update liferay-portlet.xml

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

Edit liferay-portlet.xml and add the the <portlet> element as shown in bold, below. Then save the file.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 5.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_5_2_0.dtd">
<liferay-portlet-app>


    <portlet>
        <portlet-name>MyIcePortlet</portlet-name>
        <instanceable>true</instanceable>
        <render-weight>1</render-weight>
        <ajaxable>false</ajaxable>
    </portlet>


    <role-mapper>
        <role-name>administrator</role-name>
        <role-link>Administrator</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>guest</role-name>
        <role-link>Guest</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>power-user</role-name>
        <role-link>Power User</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>user</role-name>
        <role-link>User</role-link>
    </role-mapper>
</liferay-portlet-app>

Update liferay-display.xml

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

Edit liferay-display.xml and update the the <category> element as shown in bold, below. Then save the file.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE display PUBLIC "-//Liferay//DTD Display 5.2.0//EN" "http://www.liferay.com/dtd/liferay-display_5_2_0.dtd">
<display>


    <category name="ICEfaces Portlets">
        <portlet id="MyIcePortlet"/>
    </category>


</display>

Update web.xml

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

Edit web.xml. Search for <servlet-name>Faces Servlet</servlet-name> that has the element <url-pattern>/faces/*</url-pattern>. Replace <url-pattern>/faces/*</url-pattern> with <url-pattern>*.jspx</url-pattern> as shown in bold, below. Then save the file.


    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>


        <url-pattern>*.jspx</url-pattern>


    </servlet-mapping>

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...

Verify that the portlet is 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.

STEP 9: Add Tomcat to NetBeans

2009-10-24T11:48:00.001-07:00

These are instructions to add the standalone Tomcat server to NetBeans. Netbeans comes bundled with an older version of Tomcat, but this is how to add the latest version.

Create New Server

In NetBeans...

Tools | Servers | Add Server

Server: Tomcat 6.0

Name: Tomcat 6.0.20

Server Location : /usr/local/apache-tomcat-6.0.20

User Name: admin

Password: adminadmin

Checked: Create user if it does not exist

Finish | Close

Test

In NetBeans...

Services (tab) | Servers | Right Click: Tomcat 6.0.20 | Start

In a web browser, go to...

http://localhost:8080

In NetBeans...

On the Output panel, click the Stop Server icon.

STEP 8: Install Tomcat

2009-10-24T11:41:00.000-07:00

These are instructions to install the standalone Tomcat. This Tomcat should be installed after Liferay bundled with Tomcat is installed.

DOWNLOAD: apache-tomcat-6.0.20.tar.gz
FROM URL: http://tomcat.apache.org/

Install

Open a terminal window, and enter the following commands. Replace [download location] with the directory where you downloaded the software. Note that your login id will be added to the users group, and that access to the Tomcat server installation will be granted to members of the users group.

$ cd [download location]
$ sudo adduser `whoami` users
$ newgrp users
$ sudo tar -zxvf apache-tomcat-6.0.20.tar.gz -C /usr/local
$ sudo chown -R root:users /usr/local/apache-tomcat-6.0.20
$ sudo chmod -R g=u /usr/local/apache-tomcat-6.0.20

STEP 7: Add Liferay (Glassfish) to NetBeans

2009-10-24T11:32:00.000-07:00

These are instructions to add the Liferay portal server (running on Glassfish) to NetBeans.

Create New Server

In NetBeans...

Tools | Servers | Add Server

Server: Liferay Portal Server 5.1.x/5.2.x

Name: Liferay 5.2.3 (GlassFish 3)

Server Type: GlassFish / Sun Java System AppServer

GlassFish Home: /usr/local/liferay-portal-5.2.3/glassfish

Domain Dir: /usr/local/liferay-portal-5.2.3/glassfish/domains/domain1

Domain: domain1

User Name: admin

Password: adminadmin

Http Port: 8080

Admin Port: 4848

Portal Context: /

Portal Deploy Dir: /usr/local/liferay-portal-5.2.3/glassfish/domains/domain1/applications/liferay-portal

Checked: Directory Deployment Enabled

Finish

Auto Deploy Dir: /usr/local/liferay-portal-5.2.3/deploy

Apply | Close

Test

In NetBeans...

Services (tab) | Servers | Liferay 5.2.3 (GlassFish 3) | Start

In a web browser, go to...

http://localhost:8080/web/guest

In NetBeans...

On the Output panel, click the Stop Server icon.

STEP 6: Add Liferay (Tomcat) to NetBeans

2009-10-24T11:27:00.001-07:00

These are instructions to add the Liferay portal server (running on Tomcat) to NetBeans.

Create New Server

In NetBeans...

Tools | Servers | Add Server

Server: Liferay Portal Server 5.1.x/5.2.x
Name: Liferay 5.2.3 (Tomcat 6.0.18)

Server Type: Tomcat 6.x
Catalina Home: /usr/local/liferay-portal-5.2.3/tomcat-6.0.18
Catalina Base: /usr/local/liferay-portal-5.2.3/tomcat-6.0.18
Java Home: JDK 1.6 (Default)(/usr/lib/jvm/java-6-sun)
Http Port: 8080
Debug Port: 11589

Portal Context: /
Portal Deploy Dir: /usr/local/liferay-portal-5.2.3/tomcat-6.0.18/webapps/ROOT
Checked: Directory Deployment Enabled
Un-Checked: Run in Developer Mode

Finish

Auto Deploy Dir: /usr/local/liferay-portal-5.2.3/deploy

Apply | Close

Test

In NetBeans...

Close the Start page if it is open.

Services (tab) | Servers | Liferay 5.2.3 (Tomcat 6.0.18) | Start

In a web browser, go to...

http://localhost:8080/web/guest

In NetBeans...

In the Output panel, click the Stop Server icon.

STEP 5: Install Liferay (Glassfish)

2009-10-24T11:04:00.000-07:00

These are instructions to install Liferay with Glassfish.

DOWNLOAD: liferay-portal-glassfish-5.2.3.zip
FROM URL: http://www.liferay.com/web/guest/downloads/portal

Install

Open a terminal window, and enter the following commands. Replace [download location] with the directory where you downloaded the software. Note that your login id will be added to the users group, and that access to the liferay server installation will be granted to members of the users group.

$ cd [download location]
$ sudo adduser `whoami` users
$ newgrp users
$ sudo unzip -o liferay-portal-glassfish-5.2.3.zip -d /usr/local
$ sudo chown -R root:users /usr/local/liferay-portal-5.2.3
$ sudo chmod -R g=u /usr/local/liferay-portal-5.2.3
$ cd /usr/local/liferay-portal-5.2.3/glassfish/bin/; for file in `ls -1 | grep -v "\\."`; do sudo chmod ug+x $file; done; cd -

Test

Open a new terminal window, and enter the following commands.

$ cd /usr/local/liferay-portal-5.2.3/glassfish/bin
$ ./startserv

In a web browser window, go to...

http://localhost:8080/web/guest

In the terminal window...

CTRL-C

STEP 4: Install Liferay (Tomcat)

2009-10-24T10:31:00.000-07:00

These are instructions to install Liferay with Tomcat.

DOWNLOAD: liferay-portal-tomcat-6.0-5.2.3.zip
FROM URL: http://www.liferay.com/web/guest/downloads/portal

Install

Open a terminal window, and enter the following commands. Replace [download location] with the directory where you downloaded the software. Note that your login id will be added to the users group, and that access to the liferay server installation will be granted to members of the users group.

$ cd [download location]
$ sudo adduser `whoami` users
$ newgrp users
$ sudo unzip -o liferay-portal-tomcat-6.0-5.2.3.zip -d /usr/local/
$ sudo chown -R root:users /usr/local/liferay-portal-5.2.3
$ sudo chmod -R g=u /usr/local/liferay-portal-5.2.3

Test

Open a new terminal window...

$ cd /usr/local/liferay-portal-5.2.3/tomcat-6.0.18/bin
$ ./catalina.sh run

If a web browser window does not open automatically, go to...

http://localhost:8080/web/guest

In the terminal window...

CTRL-C

STEP 3: Install NetBeans Portal Pack

2009-10-24T09:42:00.000-07:00

These are instructions to install the NetBeans PortalPack to build portlet applications. Ultimately, I will show how to develop an ICEfaces portlet for Liferay using NetBeans.

DOWNLOAD: portal-pack-plugin-3_0_2_all.zip
FROM URL: http://portalpack.netbeans.org/
OR FROM URL: http://netbeans.org/projects/contrib/downloads/directory/portalpack/

Open a terminal window, and enter the following commands. Replace [download location] with the directory where you downloaded the software to.

$ cd [download location]
$ unzip portal-pack-plugin-3_0_2_all.zip

In NetBeans...

Tools | Plugins | Downloaded | Add Plugins...

Navigate to [download location]/portalpack_3_0_2_all

Install (use CTRL-A to select all)...

orgnetbeansmodulesportalpackcms.nbm
orgnetbeansmodulesportalpackcommons.nbm
orgnetbeansmodulesportalpackcommonspalette.nbm
orgnetbeansmodulesportalpackportletsgenericportlets.nbm
orgnetbeansmodulesportalpackportletsspring.nbm
orgnetbeansmodulesportalpacksaw.nbm
orgnetbeansmodulesportalpackserversbase_psframework.nbm
orgnetbeansmodulesportalpackserversopensourcepc.nbm
orgnetbeansmodulesportalpackserverssunps.nbm
orgnetbeansmodulesportalpackserverswebsynergy.nbm
orgnetbeansmodulesportalpackwebsynergypalette.nbm
orgnetbeansmodulesportalpackwebsynergyportlets.nbm
orgnetbeansmodulesportalpackwebsynergyservicebuilder.nbm

In the terminal window...

$ rm -rf portalpack_3_0_2_all

STEP 2: Install NetBeans JSF Plugins

2009-10-24T09:17:00.000-07:00

Install NetBeans ICEfaces Plugins

Although the ICEfaces for NetBeans libraries are available through the Plugins tool in NetBeans, these steps will allow you install the latest version of the libraries.

DOWNLOAD: ICEfaces-1.8.2-NetBeans-6.7-modules.zip
FROM URL: http://www.icefaces.org/main/downloads/

Open a terminal window, and enter the following commands. Replace [download location] with the directory where you downloaded the software to.

$ cd [download location]
$ unzip ICEfaces-1.8.2-NetBeans-6.7-modules.zip -d ICEfaces-1.8.2-NetBeans-6.7-modules

In NetBeans...

Tools | Plugins | Downloaded | Add Plugins...

Navigate to /ICEfaces-1.8.2-NetBeans-6.7-modules/nbms

Install (use CTRL-A to select all)...

org-icefaces-netbeans-modules-lib.nbm
org-icefaces-netbeans-modules-web-frameworks.nbm

In the terminal window...

$ rm -rf ICEfaces-1.8.2-NetBeans-6.7-modules

STEP 1: Install NetBeans

2009-10-24T08:40:00.000-07:00

These are instructions to install NetBeans on Kubuntu. These instructions are a prequel to setting up ICEfaces and Liferay on NetBeans. Ultimately, I will show how to develop an ICEfaces portlet for Liferay using NetBeans.

Install the JDK

Open a terminal window and enter the following commands...

$ sudo apt-get install sun-java6-jdk
$ sudo update-alternatives --config java

Select /usr/lib/jvm/java-6-sun/jre/bin/java

Install NetBeans

DOWNLOAD: netbeans-6.7.1-ml-linux.sh
FROM URL: http://www.netbeans.org/

Open a terminal window and enter the following commands. Replace [download location] with the directory where you downloaded the software to.

$ cd [download location]
$ chmod +x netbeans-6.7.1-ml-linux.sh
$ sudo ./netbeans-6.7.1-ml-linux.sh

The standard look and feel of NetBeans is quite outdated. Nimbus is a nicer, more modern look and feel. The following commands will set-up your NetBeans configuration to use Nimbus.

$ sudo cp /usr/local/netbeans-6.7.1/etc/netbeans.conf /usr/local/netbeans-6.7.1/etc/netbeans.conf.original
$ sudo sed -i 's|-J-Dsun.java2d.noddraw=true|--laf com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel -J-Dswing.aatext=true|g' /usr/local/netbeans-6.7.1/etc/netbeans.conf

Update NetBeans

Start NetBeans and click on...

Tools | Plugins | Updates | Update

NetBeans Fonts

Liberation is an excellent easy-to-read font, and I highly recommend it.
Open a terminal window and enter the following command...

$ sudo apt-get install ttf-liberation

In NetBeans...

Tools | Options | Fonts & Colors Category: Default Font: Liberation Monospace 12

NetBeans Browser Fix

NetBeans does not launch the web browser. Here is the configuration for Firefox.

In NetBeans...

Tools | Options | General Web Browser : Firefox Edit Arguments: {URL} OK | OK

INTRODUCTION: ICEfaces JSF Portlets in Liferay using NetBeans

2009-10-24T08:00:00.000-07:00

In this Blog, I will post concise instructions to setup and develop JSF based portlets with ICEfaces and Liferay using NetBeans.

The steps outlined in this Blog should be followed in sequence. I will try to make the steps very straightforward, explicit, and easy to follow. To help get you up-and-running as quickly as possible, I will not offer too many explanations or wordy comments for each of the steps.

Background

Initially, I spent a great deal of time trying to install the Liferay portlet development environment. I tried the Liferay SDK and the EXT environment. I found that the Liferay documentation was outdated in many cases, the steps were not explicitly clear, and the organization of the documentation made it difficult to find the right instructions for someone who simply wanted to get started developing portlets for Liferay.

The most surprising thing I discovered, when I had finally built and deployed my first ICEfaces portelt into Liferay, was that I didn't even need the Liferay EXT environment or the Liferay SDK!

IDE

After much trial and error with Eclipse, I found that NetBeans has a very straightforward and effortless portal server integration. Portal servers can be started and stopped within NetBeans. Also, you can do all of your work in the NetBeans IDE and don't have to execute command line scripts to code Liferay portelts. In contrast, I found that Eclipse + Liferay integration required me to pull in build scripts and dependencies form the EXT environment, and I never could get past missing library references within the IDE. As a result of this experience, my initial posts will focus on using NetBeans. (At some point in the future I will give Eclipse another try, since it seems others have had success with this environment, and I will post step-by-step instructions for Eclipse at that time).

JSF

In addition to using Liferay, I wanted to use JSF to create portlets, because JSF provides a rich tag library for building user interfaces and has a very nice MVC (Model View Controller) paradigm, which cleanly separates the presentation layer (JSFs) from the business layer (Managed Beans).

Since SUN has abandoned Woodstock, they have recommended migrating to ICEfaces. Yet again, I was faced with the lack of clear documentation on creating JSF (or ICEfaces) based portlets for Liferay. ICEfaces facilitates developing portlets through a NetBeans / Liferay plugin, and the ICEfaces framework does not rquire a JSF/Portlet bridge, like other JSF/portlet implentations.

Platform

The software versions used in developing these instructions are as follows. I expect future versions of the software to be backward compatible, so these instructions should be usable for some time. I will attempt to update these instructions as newer versions of the software are released.

SUN JDK 1.6.0_16
Liferay 5.2.3 for Tomcat 6.0.18
Liferay 5.2.3 for Glassfish 3 (optional)
Tomcat 6.0.20 (optional)
NetBeans 6.7.1
NetBeans PortalPack 3.0.2
ICEfaces 1.8.2

The development hardware I am using is a 64 Bit Intel CPU with 4GB, running Kubuntu 9.04 x64 Linux (http://www.kubuntu.org/). I'm sure these instructions will work for other hardware and Linux distributions, as well. For Windows installations, the sequence of steps and downloads needed are probably accurate, but you will have to use alternatives for some of the Linux commands I have listed. (For example, in Windows, use Notepad to edit files, instead of the Linux sed "search and replace" command; use WinZip to extract files; and ignore the chown and chmod commands that set Linux file permissions and ownership).

Conventions

Finally, to save save time and help list required steps concisely, I have adopted the following conventions in my posts...

$...

Execute something on the command-line.
For example, $ ls
Of course, you should not copy the command prompt "$" when cutting/pasting these commands

| (pipe)...

Separates left mouse button click actions.Whenever a right mouse click is necessary, it is explicitly stated.
For example, K | System Settings | Advanced | Login Manager | Cancel means click on the K menu, then select System Settings, then click on the Advanced tab, then click on the Login Manager icon, then click on the Cancel button.

DOWNLOAD:...

The file you should download

FROM URL:...

Where you should download the file from