Rich Portlet UI Dev With ZK - R. Bense

Rich Portlet UIDevelopment with ZKRon Bense Enterprise Portal Solutions ArchitectXtivia, Inc.

Friday, May 13, 2011

Xtivia, Inc. – Diamond Sponsor at ECS

Founded: 1992Locations: Colorado, New Jersey, New York and TexasManagement: Top management team members are with the company & part of the team for over 10 yearsEmployees: 100+ employeesClients: 250+ active Clients in North America, about 50 international Clients (Work performed in the last 18 months)Lines of business: Consulting Services, Software ResellConsulting 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 Xtivia’s 24x7x365 database

and Application/Web Server support services. (www.virtual-asa.com; www.virtual-dba.com)

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.

ZK Is A Mature Technology

Many leading companies around the world use the ZK Framework

Why ZK?

Compared to a solution like GWT which requires backend service implementations such as GWT RPC, GWT’s JSON, and GWT’s 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.

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 capabilityThe 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)

ZK Support

Supported Enterprise version of ZK is availableEnterprise 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 developmentActive communityBuilt-in support for clustered environments if guidelines are followed (http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/Clustering/Programming%20Tips)

ZK’s 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>

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>

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>

Java solution using an anonymous inner classpublic 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); }}

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.

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.

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>

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

Simplified Portlet Solution - cont’d

PortletView PortletPanel 1

PortletPanel 2

PortletPanel 3

PortletPanel n

JSR-168 Compliance

ZK’s 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.

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>

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.

ZUMLJava ComponentsPortletWindow FullDhtmlLayoutPortletEdit and Help modes

Case Study: EHR Certification Portal

Created a Portal infrastructure on Amazon EC2 with the ability to host multiple, branded portals for each of the client’s 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.

EHR Certification Portal cont’d

Administrative portlet screenshots

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.comXtivia: http://www.xtivia.com

Visit the Xtivia ECS booth to learn more about Xtivia’s services and how our Liferay experts can help you!Post-ECS: [email protected] or 888-685-3101 option 2

Rich Portlet UI Dev With ZK - R. Bense

Documents

Transcript of Rich Portlet UI Dev With ZK - R. Bense