View
1.111
Download
0
Category
Preview:
Citation preview
Copyright © Clarity Training, Inc.2009
JavaServer Faces 2.0
1
Implementing Ajax components
David Geary
Clarity Training, Inc.
Copyright © Clarity Training, Inc. 2009
David Geary
JSF
Copyright © Clarity Training, Inc. 2009
Clarity Training
corewebdevelopment.com
Copyright © Clarity Training, Inc. 2009
Based on
Copyright © Clarity Training, Inc. 2009
Code
http://code.google.com/p/geary-nfjs
svn co http://geary-nfjs.googlecode.com/svn/trunk/ geary-nfjs-read-only
Copyright © Clarity Training, Inc. 2009
Demonstration
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
Copyright © Clarity Training, Inc. 2009
Composite components
Composite components…
...are simple to implement
...require no configuration
...support fast iterative development (without redeploying the application)
Copyright © Clarity Training, Inc. 2009
Using composite components
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:util="http://java.sun.com/jsf/composite/components/util"> ... <util:icon .../> ...</html>
Copyright © Clarity Training, Inc. 2009
Using an icon
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:util="http://java.sun.com/jsf/composite/components/util">
<util:icon image="#{resource['images:disk-icon.png']}" actionMethod="#{sourceViewer.showSource} styleClass="icon"/> </html>
Copyright © Clarity Training, Inc. 2009
Implementing the icon: attributes
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface> <composite:attribute name="image" required="true" /> <composite:attribute name="styleClass" default="icon" /> <composite:attribute name="actionMethod" method-signature="java.lang.String action()" /> </composite:interface> <composite:implementation> <h:form> <h:commandLink action="#{cc.attrs.actionMethod}"> <h:graphicImage url="#{cc.attrs.image}" styleClass="#{cc.attrs.styleClass}" /> </h:commandLink> </h:form> </composite:implementation> </html>
Copyright © Clarity Training, Inc. 2009
Demonstration
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
Copyright © Clarity Training, Inc. 2009
The JSF lifecycle
Copyright © Clarity Training, Inc. 2009
execute
Copyright © Clarity Training, Inc. 2009
render
Copyright © Clarity Training, Inc. 2009
Using <f:ajax>
<h:inputText id="name" value="#{user.name}">
</h:inputText>
…
<h:outputText id="echo" value="#{user.name}"/>
<f:ajax event="keyup" execute="@this" render="echo"/>
Copyright © Clarity Training, Inc. 2009
Demonstration
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
Copyright © Clarity Training, Inc. 2009
Ajax validation
Copyright © Clarity Training, Inc. 2009
markup
<h:inputText value="#{user.name}"
</h:inputText>
<f:ajax event="blur" render="nameError"/>
<h:outputText id="nameError" value="#{user.nameError}" style="color: red"/>
valueChangeListener="#{user.validateName}">
Copyright © Clarity Training, Inc. 2009
validator
public class User { private String nameError;
public void setNameError(String error) {nameError = error;} public String getNameError() {nameError;}
}
public void validateName(ValueChangeEvent e) { UIInput nameInput = (UIInput)e.getComponent(); // validate nameInput’s value, and store error msg in nameError }
Copyright © Clarity Training, Inc. 2009
Demonstration
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
Copyright © Clarity Training, Inc. 2009
Ajax progress bar
Copyright © Clarity Training, Inc. 2009
setting the event handler
<h:selectOneMenu id="menu" value="#{place.zoomIndex}"> <f:ajax render="image" onevent="zoomChanging"/> … </h:selectOneMenu>
Copyright © Clarity Training, Inc. 2009
the event handler (JavaScript)
function zoomChanging(data) { …
if (data.status == "begin") { // hide menu and show progress bar } else if (data.status == "success") { // hide progress bar and show menu }}
Copyright © Clarity Training, Inc. 2009
Demonstration
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
Copyright © Clarity Training, Inc. 2009
Google maps
Copyright © Clarity Training, Inc. 2009
gmaps4jsf
Blog: jroller.com/HazemBlogDownload: code.google.com/p/gmaps4jsfDocumentation: http://code.google.com/p/gmaps4jsf/wiki/TagLibraryDocumentation
Copyright © Clarity Training, Inc. 2009
plug in the component
Copyright © Clarity Training, Inc. 2009
markup
<m:map id="placeMap" width="420px" height="400px" address="#{location.address}" zoom="#{location.zoomIndex}"…>
</m:map>
<m:mapControl id="smallMapCtrl" name="GSmallMapControl" position="G_ANCHOR_BOTTOM_RIGHT"/>
<m:marker id="placeMapMarker"/>
<m:mapControl id="smallMapTypeCtrl" name="GMapTypeControl"/>
Copyright © Clarity Training, Inc. 2009
Demonstration
The End
35
Recommended