2/19/2011

A Step by Step Tutorial for an ICEfaces "Hello World" Portlet on Liferay

Preparation


So, here it is: The ultimate way to create your first ICEfaces Portlet. In the end you will have a first ICEfaces 1.82 Portlet that you can develop in eclipse and use in Liferay. We will use Eclipse 3.6 and Liferay 6.05 CE.


To develop portlets in Eclipse, we will use the Liferay IDE. All you need to know is here: : http://www.liferay.com/de/community/wiki/-/wiki/Main/Liferay+IDE .


Liferay IDE will only work if you have the Community Edition of Liferay and it needs a plugins-sdk:


http://sourceforge.net/projects/lportal/files/Liferay%20Portal/6.0.5/liferay-plugins-sdk-6.0.5.zip/download


Download it, and unzip it to a folder of your choice.


If you installed Liferay IDE then click on "New Liferay Portlet":






Give your first nice portlet a name and click on "Finish". Now you should have a deployable JSP - Portlet. If you do not want to use ICEfaces, then you´re finished here.




Adding ICEfaces to your JSP - Portlet




There already is a "HelloWorld" portlet available for ICEfaces, which we will use here to get the libs and the correct configuration. Download the following war file:


http://en.sourceforge.jp/projects/sfnet_lportal/downloads/Liferay%20Plugins/5.2.0/sample-icefaces-jsf-1.2-sun-facelets-portlet-5.2.0.1.war/


This is basically as we need. Now copy all libs from WEB-INF/lib to your WEB-INF/lib folder.


Change your portlet.xml to only include the following:



<?xml version="1.0"?>

<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" version="2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd">
<portlet>
<portlet-name>HelloWorld</portlet-name>
<display-name>Hello World</display-name>
<portlet-class>com.icesoft.faces.webapp.http.portlet.MainPortlet</portlet-class>
<init-param>
<name>com.icesoft.faces.VIEW</name>
<value>/View.iface</value>
</init-param>
<supports>
<mime-type>text/html</mime-type>
<portlet-mode>edit</portlet-mode>
<portlet-mode>help</portlet-mode>
</supports>
<portlet-info>
<title>Hello World</title>
<short-title>Hello World</short-title>
<keywords>Hello World</keywords>
</portlet-info>
<security-role-ref>
<role-name>administrator</role-name>
</security-role-ref>
<security-role-ref>
<role-name>guest</role-name>
</security-role-ref>
<security-role-ref>
<role-name>power-user</role-name>
</security-role-ref>
<security-role-ref>
<role-name>user</role-name>
</security-role-ref>
</portlet>
</portlet-app>

Change your Web.xml to only include the following:


<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<context-param>
<param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.compressResources</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.concurrentDOMViews</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.delegateNonIface</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.hiddenPortletAttributes</param-name>
<param-value>THEME_DISPLAY</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.synchronousUpdate</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.uploadDirectory</param-name>
<param-value>C:\Uploads</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.uploadDirectoryAbsolute</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.uploadMaxFileSize</param-name>
<param-value>1024</param-value>
</context-param>
<listener>
<listener-class>com.icesoft.faces.util.event.servlet.ContextEventRepeater</listener-class>
</listener>
<servlet>
<servlet-name>Blocking Servlet</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>File Upload Servlet</servlet-name>
<servlet-class>com.icesoft.faces.component.inputfile.FileUploadServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>Persistent Faces Servlet</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Blocking Servlet</servlet-name>
<url-pattern>/block/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>File Upload Servlet</servlet-name>
<url-pattern>/uploadHtml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Persistent Faces Servlet</servlet-name>
<url-pattern>*.iface</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Persistent Faces Servlet</servlet-name>
<url-pattern>/xmlhttp/*</url-pattern>
</servlet-mapping>
<resource-ref>
<res-ref-name>mail/MailSession</res-ref-name>
<res-type>javax.mail.Session</res-type>
<res-auth>Container</res-auth>
</resource-ref>
<security-constraint>
<web-resource-collection>
<web-resource-name>Page Sources</web-resource-name>
<url-pattern>*.jsp</url-pattern>
<url-pattern>*.jspx</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</web-resource-collection>
<auth-constraint>
<role-name>nobody</role-name>
</auth-constraint>
</security-constraint>
<security-role>
<role-name>nobody</role-name>
</security-role>
</web-app>

Last step: Your first XHTML file. Add the file View.xhtml to your WEB-APP folder. It should contain the following:


<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:liferay-faces="http://liferay.com/tld/faces">
<ice:portlet>
<ice:form styleClass="sample-icefaces-portlet">
<ice:outputText value="hello world"/>
</ice:form>
</ice:portlet>
</f:view>

That should be all: You now have an ICEfaces - enabled portlet. Use it as a blueprint for other ICEfaces portlets.



If you liked this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.