ZK JSF Components 2.0 Released

Jeff Liu, Engineer, Potix Corporation
Feb. 19, 2008

Version

Applicable to zk-3.0.4-FL-2008-02-15 and later.

Applicable to JSF 1.2

Applicable to JSP 2.1

Introduction

JSF (JavaServer Faces), a technology for building user interfaces for JavaServer applications. ZK team has released the ZK JSF Components 1.0 for JSF 1.1 component. The latest version of JavaServer Faces technology is version 1.2, the final version of which has been released through the Java Community Process under JSR-252. You can download the 1.2 version of the specification from the JSR 252 web page. Due to some major changes in specification, unified expression language and etc., ZK team ports ZK JSF Components to JSF 1.2 and releases the ZK JSF Components 2.0.

ZK JSF Component 1.1

If you are not familiar with ZK JSF Component 1.0, please take a look the smalltalks "Enrich Your JSF Applications with ZK Today!"

Unified Expression Language

The primary new feature of JSP 2.1 is the unified expression language (unified EL), which represents a union of the expression language offered by JSP 2.0 and the expression language created for JavaServer Faces technology version 1.0. And, #{expr} is reserved as deferred evaluation expression. As a result, the #{expr} in JSF custom attribute is going to evaluated first than pass through verbatim. It will break the valuebinding in dynamic attribute.

EX:


	...
	The following valuebinding will not work in JSF 1.2 Specification 
		due to that the #{expr} in JSF custom attribute is going to evaluated first than pass through verbatim
	<mycomp my:value="#{MyBean.value}" />
	...

In "The Issue Regarding Unified Expression Language" from Sun, few methods to resolve this issue are explained. ZK team adapts those methods. Following is an example to demonstrate it.

Note: The original JSF demo can be found in "JSF for nonbelievers: JSF conversion and validations"

UserRegistration.jsp

	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.zkoss.org/jsf/zul" prefix="z"%>
<html>
<head>
<title>User Registration.jsp Form</title>
</head>
<body>
<f:view>
   <h2>User Registration Form v2</h2>
   <h:form id="userForm">
      <h:messages id="userMessages" showDetail="true" layout="table" />
      <z:page>
         <z:window>
            <z:grid width="800px">
               <z:rows>
                  <z:row>
                     <z:label value="First Name" />
                     <z:textbox id="firstName" f:value="\#{UserRegistration.user.firstName}">
                        <f:validateLength minimum="2" maximum="25" />
                     </z:textbox>
                     <h:message 
                        style="color: red; text-decoration: overline"
                        id="firstNameError" 
                        for="firstName" />
                  </z:row>
                  <z:row>   
                       <z:label value="Last Name" />
                       <z:textbox id="lastName" f:value="\#{UserRegistration.user.lastName}">
                        <f:validateLength minimum="2" maximum="25" />          
                        </z:textbox>             
                      <h:message 
                         style="color: red; text-decoration: overline" 
                         id="lastNameError" 
                         for="lastName"/>
                  </z:row>
                  <z:row>
                     <z:label value="Age"/>
                     <z:textbox id="age" f:value="\#{UserRegistration.user.age}">
                        <f:converter converterId="javax.faces.Short"/>
                        <f:validateLongRange maximum="150" minimum="0"/>  
                         </z:textbox>           
                     <h:message 
                         style="color: red; text-decoration: overline" 
                         id="ageError" 
                         for="age"/>
                  </z:row>
                  <z:row>
                     <z:label value="Zip Code" />
                     <z:textbox id="zipCode" f:value="\#{UserRegistration.user.zipCode}">
                        <f:validator validatorId="zipCodeValidator" />
                        <f:attribute name="plus4Optional" value="true" />
                     </z:textbox>
                     <h:message 
                        style="color: red; text-decoration: overline"
                        id="zipCodeError" 
                        for="zipCode" />
                  </z:row>
                  <z:row>
                     <z:label value="Email" />
                     <z:textbox id="email" 
                        f:value="\#{UserRegistration.user.email}" 
                        f:validator="\#{UserRegistration.validateEmail}" />                    
                     <h:message 
                        style="color: red; text-decoration: overline" 
                        id="emailError" 
                        for="email"/>
                  </z:row>
                  <z:row>
                     <z:label value="Birth Date" />
                     <z:textbox id="birthDate" f:value="\#{UserRegistration.user.birthDate}" >
                        <f:convertDateTime pattern="MM/yyyy"/> 
                     </z:textbox >                
                     <h:message 
                            style="color: red; text-decoration: overline" 
                            id="birthDateError" 
                            for="birthDate"/>
                  </z:row>
                  <z:row>
                     <z:label value = "phone" />
                     <z:textbox id="phone" f:value="\#{UserRegistration.user.phone}" >
                        <f:converter  converterId="PhoneConverter" />
                        <f:validator validatorId="PhoneValidator"/>
                     </z:textbox>       
                     <h:message 
                         style="color: red; text-decoration: overline" 
                         id="phoneError" 
                         for="phone"/>
                  </z:row>
               </z:rows>
            </z:grid>
         </z:window>
         <z:button id="register" label="register" f:action="\#{UserRegistration.register}" />
      </z:page>
   </h:form>
</f:view>
</body>
</html>

You can escape the characters in the page, you use the "\" character as follows:

	
...
<z:label value="Email" />
<z:textbox id="email" 
	f:value="\#{UserRegistration.user.email}" 
	f:validator="\#{UserRegistration.validateEmail}" />
...

Or, you can configure the page with the page directive to either accept the #{ characters as String literals with the deferredSyntaxAllowedAsLiteral attribute:

UserRegistration2.jsp

	
...
<%@page ... deferredSyntaxAllowedAsLiteral="true" %>
...
<z:label value="Email" />
<z:textbox id="email" 
	f:value="#{UserRegistration.user.email}" 
	f:validator="#{UserRegistration.validateEmail}" />
...

Download

zk-3.0.4-FL-2008-02-15

ZK JSF Components 2.0

zkdemo-jsf-myfaces

zkdemo-jsf-sunri

Summary

JSF is UI Component technology for building user interfaces for JavaServer applications. Now we update ZK JSF Components which let you run ZK Components in JSF 1.2 runtime, providing you an alternate way to build rich UI on your web application. We hope you enjoy this new feature and post feedback if you have any suggestions to make it better!

Comments

Bladimir

2008-02-23

well done!
I'm trying with this new components and it works so good.
What about a NetBeans 6.0 Visual Web JSF Application Integration with ZK?, are there a way to make it works?
Thanks a lot.

Jim

2008-03-19

Fred, Sun, has enabled the plugin for NetBeans 6.0.
http://sourceforge.net/projects/rem1/

Kito D. Mann

2008-03-28

Hmmm... it looks like you guys need to update your tag libs to integrate with JSP 2.1. If you do that, there's no need to escape the expressions, since the JSP 2.1 container returns a ValueExpression or MethodExpression object directly to the tag handler.
Requiring that users escape all of the expressions is non-standard, and won't work well with JSF-enabled IDEs...
Kito D. Mann
jsfcentral.com

Preview Your Comment

Leave a Reply

Name (required) *Name

Mail (will not be published)(required) *Mail

Website

(Case Insensitive)

*Verification

*Content

Documentation

Small Talks