https://www.zkoss.org/_w/index.php?title=Small_Talks/2008/February/ZK_JSF_Components_2.0_Released&feed=atom&action=history
Small Talks/2008/February/ZK JSF Components 2.0 Released - Revision history
2024-03-28T14:11:48Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=Small_Talks/2008/February/ZK_JSF_Components_2.0_Released&diff=14802&oldid=prev
Char: /* ZK JSF Component 1.1 */
2010-12-14T01:58:20Z
<p><span dir="auto"><span class="autocomment">ZK JSF Component 1.1</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:58, 14 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l14" >Line 14:</td>
<td colspan="2" class="diff-lineno">Line 14:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=ZK JSF Component 1.1=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=ZK JSF Component 1.1=</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>If you are not familiar with ZK JSF Component 1.0, please take a look the smalltalks "[<del class="diffchange diffchange-inline">http:</del>//<del class="diffchange diffchange-inline">docs.zkoss.org/wiki</del>/Enrich_Your_JSF_Applications_with_ZK_Today<del class="diffchange diffchange-inline">%21 </del>Enrich Your JSF Applications with ZK Today!]" </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>If you are not familiar with ZK JSF Component 1.0, please take a look the smalltalks "[<ins class="diffchange diffchange-inline">[Small_Talks</ins>/<ins class="diffchange diffchange-inline">2007</ins>/<ins class="diffchange diffchange-inline">August</ins>/Enrich_Your_JSF_Applications_with_ZK_Today<ins class="diffchange diffchange-inline">! | </ins>Enrich Your JSF Applications with ZK Today!<ins class="diffchange diffchange-inline">]</ins>]"</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Unified Expression Language=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Unified Expression Language=</div></td></tr>
</table>
Char
https://www.zkoss.org/_w/index.php?title=Small_Talks/2008/February/ZK_JSF_Components_2.0_Released&diff=7765&oldid=prev
Elton776: moved Small Talks/ZK JSF Components 2.0 Released to Small Talks/2008/February/ZK JSF Components 2.0 Released
2010-09-21T01:41:11Z
<p>moved <a href="/wiki/Small_Talks/ZK_JSF_Components_2.0_Released" class="mw-redirect" title="Small Talks/ZK JSF Components 2.0 Released">Small Talks/ZK JSF Components 2.0 Released</a> to <a href="/wiki/Small_Talks/2008/February/ZK_JSF_Components_2.0_Released" title="Small Talks/2008/February/ZK JSF Components 2.0 Released">Small Talks/2008/February/ZK JSF Components 2.0 Released</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:41, 21 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2008/February/ZK_JSF_Components_2.0_Released&diff=6721&oldid=prev
Elton776: /* Unified Expression Language */
2010-09-14T04:17:46Z
<p><span dir="auto"><span class="autocomment">Unified Expression Language</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:17, 14 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l32" >Line 32:</td>
<td colspan="2" class="diff-lineno">Line 32:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>In "[http://java.sun.com/javaee/5/docs/tutorial/doc/bnahq.html#bnaid 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.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>In "[http://java.sun.com/javaee/5/docs/tutorial/doc/bnahq.html#bnaid 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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><gflash width="800" height="300"><del class="diffchange diffchange-inline">http://docs.zkoss.org/images/3/34/</del>Jsf2.swf</gflash></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><gflash width="800" height="300">Jsf2.swf</gflash></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Note: The original JSF demo can be found in "[http://www.ibm.com/developerworks/java/library/j-jsf3/ JSF for nonbelievers: JSF conversion and validations]"</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Note: The original JSF demo can be found in "[http://www.ibm.com/developerworks/java/library/j-jsf3/ JSF for nonbelievers: JSF conversion and validations]"</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l168" >Line 168:</td>
<td colspan="2" class="diff-lineno">Line 168:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> f:validator="#{UserRegistration.validateEmail}" /></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> f:validator="#{UserRegistration.validateEmail}" /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> ...</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> ...</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></source> <del class="diffchange diffchange-inline"> </del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Download=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Download=</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2008/February/ZK_JSF_Components_2.0_Released&diff=6334&oldid=prev
Elton776: Created page with '{{Template:Smalltalk_Author| |author=Jeff Liu, Engineer, Potix Corporation |date=Feb. 19, 2008 |version=Applicable to zk-3.0.4-FL-2008-02-15 and later. ::Applicable to JSF 1.2 …'
2010-09-13T08:24:43Z
<p>Created page with '{{Template:Smalltalk_Author| |author=Jeff Liu, Engineer, Potix Corporation |date=Feb. 19, 2008 |version=Applicable to zk-3.0.4-FL-2008-02-15 and later. ::Applicable to JSF 1.2 …'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Jeff Liu, Engineer, Potix Corporation <br />
|date=Feb. 19, 2008 <br />
|version=Applicable to zk-3.0.4-FL-2008-02-15 and later.<br />
::Applicable to JSF 1.2<br />
::Applicable to JSP 2.1<br />
}}<br />
<br />
<br />
=Introduction=<br />
<br />
[http://java.sun.com/javaee/javaserverfaces/ 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.<br />
<br />
=ZK JSF Component 1.1=<br />
<br />
If you are not familiar with ZK JSF Component 1.0, please take a look the smalltalks "[http://docs.zkoss.org/wiki/Enrich_Your_JSF_Applications_with_ZK_Today%21 Enrich Your JSF Applications with ZK Today!]" <br />
<br />
=Unified Expression Language=<br />
<br />
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.<br />
<br />
EX:<br />
<br />
<source lang="xml" ><br />
...<br />
The following valuebinding will not work in JSF 1.2 Specification <br />
due to that the #{expr} in JSF custom attribute is going to evaluated first than pass through verbatim<br />
<mycomp my:value="#{MyBean.value}" /><br />
...<br />
</source><br />
<br />
In "[http://java.sun.com/javaee/5/docs/tutorial/doc/bnahq.html#bnaid 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.<br />
<br />
<gflash width="800" height="300">http://docs.zkoss.org/images/3/34/Jsf2.swf</gflash><br />
Note: The original JSF demo can be found in "[http://www.ibm.com/developerworks/java/library/j-jsf3/ JSF for nonbelievers: JSF conversion and validations]"<br />
<br />
<br />
*UserRegistration.jsp<br />
<br />
<source lang="xml" > <br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><br />
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><br />
<%@ taglib uri="http://www.zkoss.org/jsf/zul" prefix="z"%><br />
<html><br />
<head><br />
<title>User Registration.jsp Form</title><br />
</head><br />
<body><br />
<f:view><br />
<h2>User Registration Form v2</h2><br />
<h:form id="userForm"><br />
<h:messages id="userMessages" showDetail="true" layout="table" /><br />
<z:page><br />
<z:window><br />
<z:grid width="800px"><br />
<z:rows><br />
<z:row><br />
<z:label value="First Name" /><br />
<z:textbox id="firstName" f:value="\#{UserRegistration.user.firstName}"><br />
<f:validateLength minimum="2" maximum="25" /><br />
</z:textbox><br />
<h:message <br />
style="color: red; text-decoration: overline"<br />
id="firstNameError" <br />
for="firstName" /><br />
</z:row><br />
<z:row> <br />
<z:label value="Last Name" /><br />
<z:textbox id="lastName" f:value="\#{UserRegistration.user.lastName}"><br />
<f:validateLength minimum="2" maximum="25" /> <br />
</z:textbox> <br />
<h:message <br />
style="color: red; text-decoration: overline" <br />
id="lastNameError" <br />
for="lastName"/><br />
</z:row><br />
<z:row><br />
<z:label value="Age"/><br />
<z:textbox id="age" f:value="\#{UserRegistration.user.age}"><br />
<f:converter converterId="javax.faces.Short"/><br />
<f:validateLongRange maximum="150" minimum="0"/> <br />
</z:textbox> <br />
<h:message <br />
style="color: red; text-decoration: overline" <br />
id="ageError" <br />
for="age"/><br />
</z:row><br />
<z:row><br />
<z:label value="Zip Code" /><br />
<z:textbox id="zipCode" f:value="\#{UserRegistration.user.zipCode}"><br />
<f:validator validatorId="zipCodeValidator" /><br />
<f:attribute name="plus4Optional" value="true" /><br />
</z:textbox><br />
<h:message <br />
style="color: red; text-decoration: overline"<br />
id="zipCodeError" <br />
for="zipCode" /><br />
</z:row><br />
<z:row><br />
<z:label value="Email" /><br />
<z:textbox id="email" <br />
f:value="\#{UserRegistration.user.email}" <br />
f:validator="\#{UserRegistration.validateEmail}" /> <br />
<h:message <br />
style="color: red; text-decoration: overline" <br />
id="emailError" <br />
for="email"/><br />
</z:row><br />
<z:row><br />
<z:label value="Birth Date" /><br />
<z:textbox id="birthDate" f:value="\#{UserRegistration.user.birthDate}" ><br />
<f:convertDateTime pattern="MM/yyyy"/> <br />
</z:textbox > <br />
<h:message <br />
style="color: red; text-decoration: overline" <br />
id="birthDateError" <br />
for="birthDate"/><br />
</z:row><br />
<z:row><br />
<z:label value = "phone" /><br />
<z:textbox id="phone" f:value="\#{UserRegistration.user.phone}" ><br />
<f:converter converterId="PhoneConverter" /><br />
<f:validator validatorId="PhoneValidator"/><br />
</z:textbox> <br />
<h:message <br />
style="color: red; text-decoration: overline" <br />
id="phoneError" <br />
for="phone"/><br />
</z:row><br />
</z:rows><br />
</z:grid><br />
</z:window><br />
<z:button id="register" label="register" f:action="\#{UserRegistration.register}" /><br />
</z:page><br />
</h:form><br />
</f:view><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
You can escape the characters in the page, you use the "\" character as follows:<br />
<br />
<source lang="xml" ><br />
...<br />
<z:label value="Email" /><br />
<z:textbox id="email" <br />
f:value="\#{UserRegistration.user.email}" <br />
f:validator="\#{UserRegistration.validateEmail}" /><br />
...<br />
</source><br />
<br />
<br />
Or, you can configure the page with the page directive to either accept the #{ characters as String literals with the deferredSyntaxAllowedAsLiteral attribute:<br />
<br />
<br />
*UserRegistration2.jsp<br />
<br />
<source lang="xml" ><br />
...<br />
<%@page ... deferredSyntaxAllowedAsLiteral="true" %><br />
...<br />
<z:label value="Email" /><br />
<z:textbox id="email" <br />
f:value="#{UserRegistration.user.email}" <br />
f:validator="#{UserRegistration.validateEmail}" /><br />
...<br />
</source> <br />
<br />
=Download=<br />
<br />
* <tracker url="http://downloads.sourceforge.net/zk1/zk-bin-3.0.4-FL-2008-02-15.zip?use_mirror=osdn" > zk-3.0.4-FL-2008-02-15</tracker><br />
* <tracker url="http://downloads.sourceforge.net/zk1/zk-JSFComps-bin-2.0.0.zip?use_mirror=osdn" > ZK JSF Components 2.0</tracker><br />
* <tracker url="http://downloads.sourceforge.net/zkforge/zkjsf-demo-myfaces.rar?use_mirror=osdn" > zkdemo-jsf-myfaces</tracker><br />
* <tracker url="http://downloads.sourceforge.net/zkforge/zkjsf-demo-sunri.rar?use_mirror=osdn" > zkdemo-jsf-sunri</tracker><br />
<br />
=Summary=<br />
<br />
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!<br />
<br />
<br />
<comment>/smalltalks/zuljsf2/index.dsp</comment><br />
<br />
[[Category:Small Talk]]<br />
[[Category:Overview]]<br />
[[Category:ZK Component]]<br />
[[Category:ZK]]<br />
[[Category:JSF]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation <br />
}}</div>
Elton776