Zk Liferay Integration
Hi guys,Zk, the best open source Java framework for building enterprise web and mobile apps.You can explore it here ZK. Liferay Portal is the leading open source portal for the enterprise, offering content management, collaboration, and social out-of-the-box.
One can develop sites with the this two powerful platforms with rich interface as simple and fast as authoring HTML pages.
Just check it out what you can do with this.... You will love it :)
So lets roll....
I have used Liferay 6.1 and ZK 6.0.1 for this demo portlet. In which I have include all the functionality which can be useful to web developers like ckeditor, internationalization,CRUDE operation that kind of stuffs ...but I will include that after making one simple zk-portlet, so it couldn't become hectic :).
Oh yes I'll also share my own problems and of course its solutions :) which i have faced while integration process.
- We need Liferay IDE for that you can refer this link Liferay IDE.
- Install zk-Plugin in IDE also refer this link for zul page detection in IDE.
- Create Liferay portlet.
- Create new Liferay project.
- Select Liferay MVC portlet option and click on finish.
- ZK related configurations
- Edit \WEB-INF\web.xml file.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>ZK-Sample-portlet</display-name>
<listener>
<description> Used to cleanup when a session is destroyed</description>
<display-name>ZK Session cleaner</display-name>
<listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
</listener>
<servlet>
<description>The ZK loader for ZUML pages</description>
<servlet-name>zkLoader</servlet-name>
<servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
<init-param>
<param-name>update-uri</param-name>
<param-value>/zkau</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<description>The asynchronous update engine for ZK</description>
<servlet-name>auEngine</servlet-name>
<servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.zul</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.zhtml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.svg</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.xml2html</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>auEngine</servlet-name>
<url-pattern>/zkau/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<jsp-config>
<taglib>
<taglib-uri>http://java.sun.com/portlet_2_0</taglib-uri>
<taglib-location>
/WEB-INF/tld/liferay-portlet.tld
</taglib-location>
</taglib>
</jsp-config>
</web-app>
- Edit below zk.xml file to /WEB-INF dir
<?xml version="1.0" encoding="UTF-8"?>
<zk>
<library-property>
<name>org.zkoss.zul.progressbox.position</name>
<value>center,center</value>
</library-property>
<library-property>
<name>org.zkoss.zk.portlet.PageRenderPatch.class</name>
<value>org.zkoss.zkplus.liferay.NonRootContextJQueryRenderPatch</value>
</library-property>
<library-property>
<name>org.zkoss.zkplus.liferary.jQueryPatch</name>
<value>1500</value>
</library-property>
<library-property>
<name>org.zkoss.theme.preferred</name>
<value>sapphire</value>
</library-property>
<system-config>
<label-location>/properties/zk-label.properties</label-location>
</system-config>
<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/zul/error.zul</location>
</error-page>
<session-config>
<device-type>ajax</device-type>
<timeout-message>Session timeout. Please reload the page.</timeout-message>
</session-config>
</zk>
- Update /WEB-INF/liferay-portlet.xml file as per given below.
<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>zk-hello-world</portlet-name>
<icon>/icon.png</icon>
<instanceable>false</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
<header-portlet-javascript>/zkau/web/js/zk.wpd</header-portlet-javascript>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>zk-hello-world-portlet</css-class-wrapper>
</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 /WEB-INF/portlet.xml as per given below
<?xml version="1.0"?>
<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" 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" version="2.0">
<portlet>
<portlet-name>zk-hello-world</portlet-name>
<display-name>ZK Hello World</display-name>
<portlet-class>com.liferay.zk.ZKPortlet</portlet-class>
<init-param>
<name>zk_page_view</name>
<value>/zul/view.zul</value>
</init-param>
<init-param>
<name>zk_page_edit</name>
<value>/zul/edit.zul</value>
</init-param>
<expiration-cache>0</expiration-cache>
<supports>
<mime-type>text/html</mime-type>
<portlet-mode>VIEW</portlet-mode>
<portlet-mode>EDIT</portlet-mode>
</supports>
<portlet-info>
<title>ZK Hello World</title>
<short-title>ZK Hello World</short-title>
<keywords>ZK 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>
4. Add below ZK libraries in /WEB-INF/lib directory
- zcommon.jar
- zel.jar
- zhtml.jar
- zk.jar
- zkbind.jar
- zkplus.jar
- zul.jar
- zweb.jar
- bsh.jar
- commons-fileupload.jar
- commons-io.jar
package com.liferay.zk;
import java.io.IOException;
import javax.portlet.PortletException;
import javax.portlet.PortletPreferences;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.PortletSession;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import org.zkoss.zk.ui.Session;
import org.zkoss.zk.ui.http.DHtmlLayoutPortlet;
import com.liferay.portal.kernel.util.WebKeys;
import com.liferay.portal.theme.ThemeDisplay;
/**
* The Class ZKPortlet.
*/
public class ZKPortlet extends DHtmlLayoutPortlet {
public static final String ZK_EDIT_PAGE = "zk_page_edit";
public static final String ZK_VIEW_PAGE = "zk_page_view";
private String strViewModePage;
private String strEditModePage;
public void init() {
this.strViewModePage = getInitParameter(ZK_VIEW_PAGE);
this.strEditModePage = getInitParameter(ZK_EDIT_PAGE);
}
@Override
protected boolean process(Session sess, RenderRequest request,
RenderResponse response, String path, boolean bRichlet)
throws PortletException, IOException {
setupSessionParameters(sess, request);
return super.process(sess, request, response, path, bRichlet);
}
protected void setupSessionParameters(Session sess, RenderRequest request) {
ThemeDisplay themeDisplay = (ThemeDisplay) request.getAttribute(WebKeys.THEME_DISPLAY);
PortletSession portletSession = request.getPortletSession();
PortletPreferences prefs = request.getPreferences();
sess.setAttribute("SESSION_ID", portletSession.getId());
sess.setAttribute("THEME_DISPLAY", themeDisplay);
sess.setAttribute("GROUP_ID", themeDisplay.getScopeGroupId());
sess.setAttribute("PORTLET_PREFERENCES", prefs);
sess.setAttribute("PORTLET_ID", themeDisplay.getPortletDisplay().getId());
sess.setAttribute("currentUser", themeDisplay.getUser().getScreenName());
}
@Override
protected void doEdit(RenderRequest request, RenderResponse response)
throws PortletException {
try {
if (this.strEditModePage != null) {
this.dispatch(this.strEditModePage, request, response);
} else {
this.doView(request, response);
}
} catch (IOException ex) {
// Exception Handling Code
}
}
@Override
protected void doView(RenderRequest request, RenderResponse response)
throws PortletException {
try {
if (this.strViewModePage != null) {
this.dispatch(this.strViewModePage, request, response);
}
} catch (IOException ex) {
// Exception Handling Code
}
}
protected void include(String path, RenderRequest renderRequest,
RenderResponse renderResponse) throws IOException, PortletException {
try {
PortletRequestDispatcher portletRequestDispatcher = getPortletContext().getRequestDispatcher(path);
if (portletRequestDispatcher != null) {
portletRequestDispatcher.include(renderRequest, renderResponse);
}
} catch (IOException ex) {
// Exception Handling Code
}
}
private void dispatch(String page, RenderRequest request,
RenderResponse response) throws IOException, PortletException {
PortletRequestDispatcher objDisp = this.getPortletContext().getRequestDispatcher(page);
if (objDisp != null) {
objDisp.include(request, response);
}
}
}
6. Create /docroot/zul folder and place below zul files in it.
- edit.zul
- error.zul
- view.zul
<zk>
<window title="ZK Demo Portlet" border="normal" width="200px">
<label value="Hello, World!"></label>
</window>
</zk>
like wise error.zul
<?page id="errorPage" title="Error Page" cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.zkoss.org/2005/zul"
xmlns:zk="http://www.zkoss.org/2005/zk"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<window id="wndErr" width="400px" border="normal" mode="modal" closable="true">
<caption id ="captErrWnd" label="Error" style="font-weight:Bold;" />
<vbox width="390px">
<separator />
<hbox style="align: center" width="390px">
<separator />
<image id="iconImg" src="/images/error.png"/>
<separator />
<separator />
<label id="lblErrMessage" value="Error while processing"/>
</hbox>
<div width="390px" align="center">
<button id="btnOK" label="OK" onClick="wndErr.detach()" width="80px" />
<button id="btnReload" label="Reload" onClick="Executions.sendRedirect(null)" width="80px" visible="false"/>
</div>
</vbox>
</window>
</zk>
and edit.zul
<zk>
<window title="ZK Demo Portlet" border="normal" width="200px">
<label value="Hello, World!"></label>
</window>
</zk>
Structure of the project
put this portlet from add menu of liferay portal and you will see below screen.
No comments:
Post a Comment