Rich Portlet UI Development with ZK

Ron Bense Enterprise Portal Solutions Architect Xtivia, Inc.

Friday, May 13, 2011

Xtivia, Inc. Diamond Sponsor at ECS

Founded: 1992 Locations: Colorado, New Jersey, New York and Texas Management: Top management team members are with the company & part of the team for over 10 years Employees: 100+ employees Clients: 250+ active Clients in North America, about 50 international Clients (Work performed in the last 18 months) Lines of business: Consulting Services, Software Resell Consulting services: Portal, Enterprise Application Development/ Integration, Database solutions, Data Warehousing & ETL, Business Intelligence. Quick Liferay-related facts:

Liferay Certified Gold Level Partner Liferay consulting, architecture, support and end-to-end implementation Ability to service clients after implementations through Xtivias 24x7x365 database and Application/Web Server support services. (www.virtual-asa.com; www.virtualdba.com)

Friday, May 13, 2011

ZK - An Introduction
ZK is a leading enterprise Ajax+Mobile framework with an Open Source Community base. A lightweight Ajax framework with hundreds of supported components to speed development. A Java based solution with no need for JavaScript or extensive binding configurations. Provides the option of using ZUML, a powerful markup language that enables the interface to be described in XML with no Java code at all. Combined with frameworks such as JPA, Hibernate, Spring and CDI provides a full MVC solution.

Friday, May 13, 2011

ZK - An Introduction

Friday, May 13, 2011

ZK - An Introduction

Friday, May 13, 2011

ZK - An Introduction

Friday, May 13, 2011

ZK - An Introduction

Friday, May 13, 2011

ZK - An Introduction

Friday, May 13, 2011

ZK Is A Mature Technology
Many leading companies around the world use the ZK Framework

Friday, May 13, 2011

Why ZK?
Compared to a solution like GWT which requires backend service implementations such as GWT RPC, GWTs JSON, and GWTs XML, ZK is a much less complex solution. ZK does not expose business logic to the browser and is designed to protect against XSS and CSRF attacks. Provides hundreds of UI components (widgets) such as select boxes, input controls, and grids. Promotes a strong MVC approach, especially when coupled with frameworks like Spring, CDI, JPA, or Hibernate.

Friday, May 13, 2011

ZK Gets to Market Faster

So why choose ZK?
ZK allows existing Java developers to work with what they know, using information they are already familiar with -Simple tag approach -Simplified Swing-like approach -Ability to utilize Ajax controls directly from Java code. A simple CSS theming capability The ability to utilize various languages in the ZSCRIPT tags: (Java, Javascript, Ruby,Groovy, etc) Zero configuration (no annotations, XML config, etc) Compile time error checking (when using Java)

Friday, May 13, 2011

ZK Support
Supported Enterprise version of ZK is available Enterprise version extra features -Comet Push capability -On-demand rendering - performance enhancement for large data sets within components -Master Detail drop-down component in grids Active development Active community Built-in support for clustered environments if guidelines are followed (http://books.zkoss.org/wiki/ZK%20Developer's %20Reference/Clustering/Programming%20Tips)

Friday, May 13, 2011

ZUML
ZKs markup language is a natural extension of the backing Java components and provides a quick easy method for providing certain classes of solutions or prototyping.
<window title="My First Window" border="normal" width="200px"> Hello, World! </window>

Friday, May 13, 2011

ZUML
An active Hello World utilizing ZSCRIPT.
<?page title="ZK Hello World" contentType="text/html;charset=UTF-8"?> <zk> <window title="ZK active Hello World" border="normal" width="250px"> <zscript>boolean display = true;</zscript> <vbox width="100%" > <button id="l1" width="120px" label="Say Hello?" onClick="doClick()" /> <cell align="center"> ! <label id="layout" /> </cell> <zscript> void doClick() { layout.value = display ? "Hello There!" : "Goodbye."; l1.label= display ? "Say Goodbye?" : "Say Hello?"; display = !display; } </zscript> </vbox> </window> </zk>

Friday, May 13, 2011

ZUML
An active Hello World utilizing ZSCRIPT.
<?page title="ZK Hello World" contentType="text/html;charset=UTF-8"?> <zk> <window title="ZK active Hello World" border="normal" width="250px"> <zscript>boolean display = true;</zscript> <vbox width="100%" > <button id="l1" width="120px" label="Say Hello?" onClick="doClick()" /> <cell align="center"> ! <label id="layout" /> </cell> <zscript> void doClick() { layout.value = display ? "Hello There!" : "Goodbye."; l1.label= display ? "Say Goodbye?" : "Say Hello?"; display = !display; } </zscript> </vbox> </window> </zk>

Friday, May 13, 2011

ZUML
An active Hello World utilizing ZSCRIPT.
<?page title="ZK Hello World" contentType="text/html;charset=UTF-8"?> <zk> <window title="ZK active Hello World" border="normal" width="250px"> <zscript>boolean display = true;</zscript> <vbox width="100%" > <button id="l1" width="120px" label="Say Hello?" onClick="doClick()" /> <cell align="center"> ! <label id="layout" /> </cell> <zscript> void doClick() { layout.value = display ? "Hello There!" : "Goodbye."; l1.label= display ? "Say Goodbye?" : "Say Hello?"; display = !display; } </zscript> </vbox> </window> </zk>

Friday, May 13, 2011

The Server Side - Java

On the server side, ZK has the same intuitive feel of ZUML, making transitioning between the two styles very simple. To use the Java only approach, all that is required is a simple ZUL file that indicates which class should be used to instantiate the window.
<?page title="ZK Java Hello World" contentType="text/html;charset=UTF-8"?> <zk> <window title="ZK Java Hello World" use="com.xtivia.JavaHello2"/> </zk>

Friday, May 13, 2011

The Server Side - Java

Java solution using an anonymous inner class
public class JavaHello2 extends Window { private static final long serialVersionUID = 1L; private boolean display = true; public JavaHello2() { this.setBorder("normal"); this.setWidth("250px"); Vbox box = new Vbox(); box.setWidth("100%"); final Button button = new Button("Say Hello?"); final Label layout = new Label(); button.addEventListener(Events.ON_CLICK, new EventListener() { @Override public void onEvent(Event event) throws Exception { layout.setValue(display ? "Hello There!" : "Goodbye."); button.setLabel(display ? "Say Goodbye?" : "Say Hello?"); button.setVisible(display); display = !display; } }); box.appendChild(button); box.appendChild(layout); this.appendChild(box); } }

Friday, May 13, 2011

The Server Side - Java

Java solution using an anonymous inner class
public class JavaHello2 extends Window { private static final long serialVersionUID = 1L; private boolean display = true; public JavaHello2() { this.setBorder("normal"); this.setWidth("250px"); Vbox box = new Vbox(); box.setWidth("100%"); final Button button = new Button("Say Hello?"); final Label layout = new Label(); button.addEventListener(Events.ON_CLICK, new EventListener() { @Override public void onEvent(Event event) throws Exception { layout.setValue(display ? "Hello There!" : "Goodbye."); button.setLabel(display ? "Say Goodbye?" : "Say Hello?"); button.setVisible(display); display = !display; } }); box.appendChild(button); box.appendChild(layout); this.appendChild(box); } }

Friday, May 13, 2011

The Server Side - Java

Java solution using an anonymous inner class
public class JavaHello2 extends Window { private static final long serialVersionUID = 1L; private boolean display = true; public JavaHello2() { this.setBorder("normal"); this.setWidth("250px"); Vbox box = new Vbox(); box.setWidth("100%"); final Button button = new Button("Say Hello?"); final Label layout = new Label(); button.addEventListener(Events.ON_CLICK, new EventListener() { @Override public void onEvent(Event event) throws Exception { layout.setValue(display ? "Hello There!" : "Goodbye."); button.setLabel(display ? "Say Goodbye?" : "Say Hello?"); button.setVisible(display); display = !display; } }); box.appendChild(button); box.appendChild(layout); this.appendChild(box); } }

Friday, May 13, 2011

The Server Side - Java

Java solution using an anonymous inner class
public class JavaHello2 extends Window { private static final long serialVersionUID = 1L; private boolean display = true; public JavaHello2() { this.setBorder("normal"); this.setWidth("250px"); Vbox box = new Vbox(); box.setWidth("100%"); final Button button = new Button("Say Hello?"); final Label layout = new Label(); button.addEventListener(Events.ON_CLICK, new EventListener() { @Override public void onEvent(Event event) throws Exception { layout.setValue(display ? "Hello There!" : "Goodbye."); button.setLabel(display ? "Say Goodbye?" : "Say Hello?"); button.setVisible(display); display = !display; } }); box.appendChild(button); box.appendChild(layout); this.appendChild(box); } }

Friday, May 13, 2011

Comparison of ZUML to Java

Developing with ZUML is fast and easy. In many ways it is very similar to JSP development. No compilation step or server restart is needed. ZUML can be combined with ZSCRIPT which allows for Java, Ruby, Python, Groovy etc, even supporting multiple scripting languages on a single page. ZUL pages using ZSCRIPT are not recommended in clustered environments. ZSCRIPT is great for POCs. Java allows for many errors to be caught at compile time, ZUML/ ZSCRIPT can only be checked at runtime. The Java approach allows for easy debugging, component extensions and code reuse.

Friday, May 13, 2011

ZK in a Portal Environment
ZK OOB comes with the DHtmlLayoutPortlet, which supports the only doView method. This allows easy and fast integration of ZK web apps into a portal environment, or the development of a ZK portlet. Limitations in a portal environment:

-All ZK components should be wrapped in a base window component -The wrapping window component should use the embedded mode -Changing displayed components should be done within the context of
the base window component

-Redirects will refresh the entire page.

Friday, May 13, 2011

ZK In Liferay Portal
A few additional steps need to be taken for ZK portlets to successfully run in the Liferay Portal server.
In portal-ext.properties, set:
speedfilters=false

Each portlet in liferay-portlet.xml must add:

<header-portlet-javascript>/zkau/web/js/zk.wpd </header-portlet-javascript>

Each portlet defined in portlet.xml should add a portlet preference for zk_page pointing to the starting ZUL page for the portlet.
<portlet-preferences> <preference> <name>zk_page</name> <value>/portletview.zul</value> </preference> </portlet-preferences>

Friday, May 13, 2011

Introducing a Simplified Portlet Solution

ZK requires that all applications reside in a window object within a portlet environment. This window should remain visible for the full lifecycle of the page. To simplify and standardize the design, a base framework for portlets is presented

Friday, May 13, 2011

Simplified Portlet Solution - contd

`

PortletView

PortletPanel 1 PortletPanel 2 PortletPanel 3 PortletPanel n

Friday, May 13, 2011

JSR-168 Compliance
ZKs provided DhtmlLayoutPortlet does not support the edit and help modes. During Ajax calls there is no access to the request attributes, portlet preferences nor any vendor specific attributes. To rectify these shortcomings, we extend the DhtmlLayoutPortlet and utilize the PortletView to enable access to these items during the lifecycle of the page.

Friday, May 13, 2011

FullDhtmlPortlet
Extends the DhtmlLayoutPortlet to provide implementations for the doEdit and doHelp methods. Default zul pages are edit.zul and help.zul, both of which can be overridden in portlet.xml:
! ! ! ! ! ! ! ! ! ! ! ! ! ! <portlet-preferences> ! <preference> ! ! <name>zk_page</name> ! ! <value>/portletview.zul</value> ! </preference> ! <preference> ! ! <name>zk_edit_page</name> ! ! <value>/portletviewedit-base.zul</value> ! </preference> ! <preference> ! ! <name>zk_help_page</name> ! ! <value>/portletviewhelp-base.zul</value> ! </preference> </portlet-preferences>

Friday, May 13, 2011

Portal Preferences Support

The PortletView class stores the request attributes and portlet preferences for use by Ajax calls during the lifecycle of the window. The PortletView class does not store the request parameters. A window lifecycle lasts for the duration of the session or when the window goes out of scope, which ever is shorter.

Friday, May 13, 2011

Demo
Demo
ZUML Java Components PortletWindow FullDhtmlLayoutPortlet Edit and Help modes

Friday, May 13, 2011

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the clients certification programs, each with their own supporting community. Used ZK for custom portlet development for quick turnaround while achieving rich, intuitive and easy-to-maintain User Interfaces. Used agile development approach with 1-2 week functional cycles and multiple 2-3 week production release cycles after initial portal launch. Build out and on-ramping of a new certification program is rapid and done by the operations and business teams with minimal IT intervention.

Friday, May 13, 2011

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the clients certification programs, each with their own supporting community. Used ZK for custom portlet development for quick turnaround while achieving rich, intuitive and easy-to-maintain User Interfaces. Used agile development approach with 1-2 week functional cycles and multiple 2-3 week production release cycles after initial portal launch. Build out and on-ramping of a new certification program is rapid and done by the operations and business teams with minimal IT intervention.

Friday, May 13, 2011

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the clients certification programs, each with their own supporting community. Used ZK for custom portlet development for quick turnaround while achieving rich, intuitive and easy-to-maintain User Interfaces. Used agile development approach with 1-2 week functional cycles and multiple 2-3 week production release cycles after initial portal launch. Build out and on-ramping of a new certification program is rapid and done by the operations and business teams with minimal IT intervention.

Friday, May 13, 2011

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the clients certification programs, each with their own supporting community. Used ZK for custom portlet development for quick turnaround while achieving rich, intuitive and easy-to-maintain User Interfaces. Used agile development approach with 1-2 week functional cycles and multiple 2-3 week production release cycles after initial portal launch. Build out and on-ramping of a new certification program is rapid and done by the operations and business teams with minimal IT intervention.

Friday, May 13, 2011

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the clients certification programs, each with their own supporting community. Used ZK for custom portlet development for quick turnaround while achieving rich, intuitive and easy-to-maintain User Interfaces. Used agile development approach with 1-2 week functional cycles and multiple 2-3 week production release cycles after initial portal launch. Build out and on-ramping of a new certification program is rapid and done by the operations and business teams with minimal IT intervention.

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

EHR Certification Portal contd

Administrative portlet screenshots

Friday, May 13, 2011

Q&A
Links:
ZK: http://www.zkoss.org -http://www.zkoss.org/zkdemo -http://books.zkoss.org/wiki/Documentation -http://books.zkoss.org/wiki/Small_Talks -http://blog.zkoss.org Liferay: http://www.liferay.com Xtivia: http://www.xtivia.com

Visit the Xtivia ECS booth to learn more about Xtivias services and how our Liferay experts can help you! Post-ECS: info@xtivia.com or 888-685-3101 option 2

Friday, May 13, 2011