JSF2_AJAX
35
Copyright © Clarity Training, Inc.2009 JavaServer Faces 2.0 1 Implementing Ajax components David Geary Clarity Training, Inc.
Transcript of JSF2_AJAX
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 1/35
Copyright © Clarity Training, Inc.2009
JavaServer Faces 2.0
1
Implementing Ajax components
David Geary
Clarity Training, Inc.
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 2/35
Copyright © Clarity Training, Inc. 2009
David Geary
JSF
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 3/35
Copyright © Clarity Training, Inc. 2009
Clarity Training
corewebdevelopment.com
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 4/35
Copyright © Clarity Training, Inc. 2009
Based on
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 5/35
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
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 6/35
Copyright © Clarity Training, Inc. 2009
Demonstration
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 7/35
Copyright © Clarity Training, Inc. 2009
This session
Composite components
Ajax with JSF 2
Ajax validation
Ajax progress bar
Ajax components
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 8/35
Copyright © Clarity Training, Inc. 2009
Composite components
Composite components…
...are simple to implement
...require no configuration
...support fast iterative development (without redeploying the application)
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 9/35
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 10/35
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>
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 11/35
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>
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 12/35
Copyright © Clarity Training, Inc. 2009
Demonstration
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 13/35
Copyright © Clarity Training, Inc. 2009
This session
Composite components
Ajax with JSF 2
Ajax validation
Ajax progress bar
Ajax components
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 14/35
Copyright © Clarity Training, Inc. 2009
The JSF lifecycle
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 15/35
Copyright © Clarity Training, Inc. 2009
execute
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 16/35
Copyright © Clarity Training, Inc. 2009
render
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 17/35
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"/>
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 18/35
Copyright © Clarity Training, Inc. 2009
Demonstration
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 19/35
Copyright © Clarity Training, Inc. 2009
This session
Composite components
Ajax with JSF 2
Ajax validation
Ajax progress bar
Ajax components
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 20/35
Copyright © Clarity Training, Inc. 2009
Ajax validation
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 21/35
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}" >
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 22/35
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
}
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 23/35
Copyright © Clarity Training, Inc. 2009
Demonstration
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 24/35
Copyright © Clarity Training, Inc. 2009
This session
Composite components
Ajax with JSF 2
Ajax validation
Ajax progress bar
Ajax components
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 25/35
Copyright © Clarity Training, Inc. 2009
Ajax progress bar
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 26/35
Copyright © Clarity Training, Inc. 2009
setting the event handler
<h:selectOneMenu id="menu" value="#{place.zoomIndex}">
<f:ajax render ="image" onevent="zoomChanging"/>…
</h:selectOneMenu>
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 27/35
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}
}
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 28/35
Copyright © Clarity Training, Inc. 2009
Demonstration
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 29/35
Copyright © Clarity Training, Inc. 2009
This session
Composite components
Ajax with JSF 2
Ajax validation
Ajax progress bar
Ajax components
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 30/35
Copyright © Clarity Training, Inc. 2009
Google maps
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 31/35
Copyright © Clarity Training, Inc. 2009
gmaps4jsf
Blog: jroller.com/HazemBlog
Download: code.google.com/p/gmaps4jsf
Documentation: http://code.google.com/p/gmaps4jsf/wiki/TagLibraryDocumentation
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 32/35
Copyright © Clarity Training, Inc. 2009
plug in the component
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 33/35
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"/>
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 34/35
8/4/2019 JSF2_AJAX
http://slidepdf.com/reader/full/jsf2ajax 35/35
The End
35
