JavaServer Faces 2 - GOTO...
Transcript of JavaServer Faces 2 - GOTO...
![Page 1: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/1.jpg)
Copyright © Clarity Training, Inc.2009
JavaServer Faces 2.0
1
Implementing Ajax components
David Geary
Clarity Training, Inc.
![Page 2: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/2.jpg)
Copyright © Clarity Training, Inc. 2009
David Geary
JSF
![Page 3: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/3.jpg)
Copyright © Clarity Training, Inc. 2009
Clarity Training
corewebdevelopment.com
![Page 4: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/4.jpg)
Copyright © Clarity Training, Inc. 2009
Based on
![Page 5: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/5.jpg)
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
![Page 6: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/6.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 7: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/7.jpg)
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
![Page 8: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/8.jpg)
Copyright © Clarity Training, Inc. 2009
Composite components
Composite components…
...are simple to implement
...require no configuration
...support fast iterative development (without redeploying the application)
![Page 9: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/9.jpg)
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>
![Page 10: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/10.jpg)
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>
![Page 11: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/11.jpg)
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>
![Page 12: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/12.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 13: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/13.jpg)
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
![Page 14: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/14.jpg)
Copyright © Clarity Training, Inc. 2009
The JSF lifecycle
![Page 15: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/15.jpg)
Copyright © Clarity Training, Inc. 2009
execute
![Page 16: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/16.jpg)
Copyright © Clarity Training, Inc. 2009
render
![Page 17: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/17.jpg)
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"/>
![Page 18: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/18.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 19: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/19.jpg)
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
![Page 20: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/20.jpg)
Copyright © Clarity Training, Inc. 2009
Ajax validation
![Page 21: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/21.jpg)
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}">
![Page 22: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/22.jpg)
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 }
![Page 23: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/23.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 24: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/24.jpg)
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
![Page 25: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/25.jpg)
Copyright © Clarity Training, Inc. 2009
Ajax progress bar
![Page 26: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/26.jpg)
Copyright © Clarity Training, Inc. 2009
setting the event handler
<h:selectOneMenu id="menu" value="#{place.zoomIndex}"> <f:ajax render="image" onevent="zoomChanging"/> … </h:selectOneMenu>
![Page 27: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/27.jpg)
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 }}
![Page 28: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/28.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 29: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/29.jpg)
Copyright © Clarity Training, Inc. 2009
This session
Composite componentsAjax with JSF 2Ajax validationAjax progress barAjax components
![Page 30: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/30.jpg)
Copyright © Clarity Training, Inc. 2009
Google maps
![Page 31: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/31.jpg)
Copyright © Clarity Training, Inc. 2009
gmaps4jsf
Blog: jroller.com/HazemBlogDownload: code.google.com/p/gmaps4jsfDocumentation: http://code.google.com/p/gmaps4jsf/wiki/TagLibraryDocumentation
![Page 32: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/32.jpg)
Copyright © Clarity Training, Inc. 2009
plug in the component
![Page 33: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/33.jpg)
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"/>
![Page 34: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/34.jpg)
Copyright © Clarity Training, Inc. 2009
Demonstration
![Page 35: JavaServer Faces 2 - GOTO Conferencegotocon.com/dl/...JavaServerFaces20ImplementingAjaxComponents.pdf · The End 35. Title: jsf-ajax Author: David Geary Created Date: 10/5/2009 7:45:40](https://reader030.fdocuments.us/reader030/viewer/2022021722/5c66c05a09d3f230488ca556/html5/thumbnails/35.jpg)
The End
35