You are on page 1of 16

JBoss Ajax4jsf, RichFaces

JBoss Ajax4jsf, RichFaces


&
&
Apache Trinidad
Apache Trinidad
Marco Pehla Marco Pehla
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 2 2
explanation
explanation

all user interface (UI co!ponents for "a#a$er#er


all user interface (UI co!ponents for "a#a$er#er
%aces ("$%
%aces ("$%

"Boss &'ax('sf ) *ich%aces +ere pre#iously


"Boss &'ax('sf ) *ich%aces +ere pre#iously
co!!ercial pro,ucts of -xa,el
co!!ercial pro,ucts of -xa,el

&pache Trini,a, also .no+n as /racle &0% %aces


&pache Trini,a, also .no+n as /racle &0% %aces

all co!ponents are no+ open source


all co!ponents are no+ open source
( &0% 1 &pplication 0e#elop!ent %ra!e+or. ( &0% 1 &pplication 0e#elop!ent %ra!e+or.
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 2 2
"Boss &'ax('sf 34343
"Boss &'ax('sf 34343

&synchronous "a#a$cript an, 567 (&'ax support


&synchronous "a#a$cript an, 567 (&'ax support
for existing "a#a$er#er %aces ele!ents
for existing "a#a$er#er %aces ele!ents

partial re-ren,erble user interface (UI


partial re-ren,erble user interface (UI

no #isual UI co!ponents 8
no #isual UI co!ponents 8

tag library U*I


tag library U*I
https://ajax4jsf.dev.java.net/ajax
https://ajax4jsf.dev.java.net/ajax

online ,e!onstration
online ,e!onstration
http://labs.jboss.com/jbossajax4jsf/demo/
http://labs.jboss.com/jbossajax4jsf/demo/
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology ( (
&'ax lifecycle o#er#ie+
&'ax lifecycle o#er#ie+

( source: http://labs.jboss.com/jbossajax4jsf/ )
<html>
<%@ taglib uri="https://ajax4jsf.dev.java.et/ajax" prefix="a4j"%>
<f:vie!>
<head/>
<bod">
<a4j:form id="example#orm">
<a4j:regio id="ajax$egio">
<a4j:commad%i& actio="'(bac&ig)ea.geerate*"
ajax+igle="true" re$eder="status">
<h:graphic,mage value="img/geerate.gif" st"le="border: oe-"/>
</a4j:commad%i&>
</a4j:regio>
<a4j:status for="ajax$egio">
<f:facet ame="start">
<h:graphic,mage value="img/ajax.loader.gif" />
</f:facet>
</a4j:status>
<h:output/ext id="status" value="'(bac&ig)ea.status*"/>
</a4j:form>
</bod">
</f:vie!>
</html>
send only this form field not more
during Ajax request or
till respond message
is received
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 9 9
"Boss *ich%aces 24043
"Boss *ich%aces 24043

buil, on top of "Boss &'ax('sf


buil, on top of "Boss &'ax('sf

&'ax enable, UI co!ponents (+eb 240


&'ax enable, UI co!ponents (+eb 240

tab panels (li.e in %irefox 2 an, !enues


tab panels (li.e in %irefox 2 an, !enues

tree #ie+ (li.e the fol,er #ie+ in -xplorer


tree #ie+ (li.e the fol,er #ie+ in -xplorer

,rag ) ,rop support


,rag ) ,rop support

:oogle 6aps integration


:oogle 6aps integration

444
444

tag library U*I


tag library U*I
http://richfaces.ajax4jsf.org/rich
http://richfaces.ajax4jsf.org/rich

online ,e!onstration of all co!ponents


online ,e!onstration of all co!ponents
http://livedemo.exadel.com/richfaces-demo/
http://livedemo.exadel.com/richfaces-demo/

27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 7 7
*ich%aces exa!ple; tab
*ich%aces exa!ple; tab
<rich:tab0ael id="tab0ael%eft" s!itch/"pe="ajax"
header1ligmet="left">
<rich:tab bidig="'(iterface)ea.simulatio2escriptio/ab*" />
<rich:tab bidig="'(iterface)ea.geerated3lasses/ab*" />
<rich:tab bidig="'(iterface)ea.logs/ab*" />
<rich:tab bidig="'(iterface)ea.statistics/ab*" />
<rich:tab label="4xample /ab 5ot visible above6" />
<h:output/ext label="4xample /ext..."/>
</rich>
</rich:tab0ael>
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 8 8
*ich%aces exa!ple; !enue
*ich%aces exa!ple; !enue
<rich:drop2o!7eu value="+ettigs" >
<rich:meu8roup value="+ho!" >
...
<rich:meu,tem actio="'(iterface)ea.sho!9l"$ight/ab0ael*"
ajax+igle="true" re$eder="status:simulatio/ab9utput0ael">
<a4j:commad%i&>
<h:output/ext value="2iagrams ol""/>
</a4j:commad%i&>
</rich:meu,tem>
...
</rich:meu8roup>
</rich:drop2o!7eu>
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology < <
*ich%aces exa!ple; ,rag ) ,rop
*ich%aces exa!ple; ,rag ) ,rop
34
24
24
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 30 30
*ich%aces exa!ple; :oogle 6aps
*ich%aces exa!ple; :oogle 6aps
<rich:gmap gmap;ar="map" <oom="'(gm)ea.<oom*"
st"le="!idth:4==px-height:4==px" gmap>e"="'(gm)ea.gmap&e"*" />
<h:pael8roup>
<rich:tab0ael s!itch/"pe="ajax" !idth="?@=" height="4==">
<rich:tab label="Asig 8oogle 7ap 10,">
<h:pael8rid colums="B" colum3lasses="optio%ist">
<h:output/ext value="Coom:" />
<rich:iputDumber+lider id="<oom" sho!,put="false"
mi;alue="E" max;alue="EF" value="'(gm)ea.<oom*"
ochage="map.setCoom5this.value6"/>
...
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 33 33
*ich%aces exa!ple; tree
*ich%aces exa!ple; tree

ser#er (page refresh= &'ax (567>ttp*e?uest or


ser#er (page refresh= &'ax (567>ttp*e?uest or
client !o,e (pre-loa, !o,es are useable
client !o,e (pre-loa, !o,es are useable

to,o; i!ple!entation of your o+n tree ,ata structure


to,o; i!ple!entation of your o+n tree ,ata structure
(for e#ery no,e type8 e4g4 root=chil,s= chil,s of chil,s
(for e#ery no,e type8 e4g4 root=chil,s= chil,s of chil,s


1@ i!ple!entation is
1@ i!ple!entation is
#ery
#ery
ti!e-consu!ing
ti!e-consu!ing
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 32 32
*ich%aces exa!ple; tree
*ich%aces exa!ple; tree
<rich:tree s!itch/"pe="ajax" value="'(librar".data*"
var="item" ode#ace="'(item.t"pe*">
<rich:treeDode t"pe="librar"">
<h:output/ext value="'(item.t"pe*" />
</rich:treeDode>
<rich:treeDode t"pe="artist">
<h:output/ext value="'(item.ame*" />
</rich:treeDode>
<rich:treeDode t"pe="album">
<h:output/ext value="'(item.title*" />
</rich:treeDode>
<rich:treeDode t"pe="sog">
<h:output/ext value="'(item.title*" />
</rich:treeDode>
</rich:tree>

ore on exaples in !he online deons!ra!ion


27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 32 32
&pache Trini,a, 34043
&pache Trini,a, 34043

a,,itional UI co!ponents for "$%


a,,itional UI co!ponents for "$%

calen,er= color pic.er


calen,er= color pic.er

tree= na#igation
tree= na#igation

interesting;
interesting;

chart co!ponent creates $A: graphics


chart co!ponent creates $A: graphics

file uploa, co!ponent= can store file content in "a#a


file uploa, co!ponent= can store file content in "a#a
ob'ects in !e!ory instea, in files
ob'ects in !e!ory instea, in files

ba,;
ba,;

#34043 runs +ith a +or.aroun, next *ich%aces 24043


#34043 runs +ith a +or.aroun, next *ich%aces 24043

#34243 ,oes it
#34243 ,oes it
not
not
in !y case
in !y case
($A: 1 ($A: 1 scalable #ector graphics scalable #ector graphics
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 3( 3(
Trini,a, 34043 exa!ple; chart
Trini,a, 34043 exa!ple; chart

se#eral chart types= ani!ate, ren,ering


se#eral chart types= ani!ate, ren,ering
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 3B 3B
Trini,a, 34043 exa!ple; chart
Trini,a, 34043 exa!ple; chart
<tr:chart id="chart" ilie+t"le="!idth:4@=px- height: 4?=px-"
value="'(iterface)ea.chart;alues*"
bidig="'(iterface)ea.editor.compoet*"
aimatio2uratio="E==="
leged0ositio="bottom" gradietsAsed="true"
G7ajor8rid%ie3out="@" H7ajor8rid%ie3out="E"
H7ior8rid%ie3out=".E"/>
<%@ taglib uri="http://m"faces.apache.org/triidad"
prefix="tr" %>
<%@ taglib uri="http://m"faces.apache.org/triidad/html"
prefix="th" %>
27/08/07 27/08/07 BTU Cottbus - Chair of Internet Technology BTU Cottbus - Chair of Internet Technology 39 39
Chere to fin,D
Chere to fin,D

"Boss &'ax('sf
"Boss &'ax('sf
http://labs.jboss.com/jbossajax4jsf/
http://labs.jboss.com/jbossajax4jsf/

"Boss *ich%aces
"Boss *ich%aces
http://labs.jboss.com/jbossrichfaces/
http://labs.jboss.com/jbossrichfaces/

&pache Trini,a,
&pache Trini,a,
http://myfaces.apache.org/trinidad/
http://myfaces.apache.org/trinidad/