Download Defining Event Handlers [Backbase Manual]

& = ! "
#
# $%%&#
"
#'
( )
( # *+%& # &
,-&% !
!
#+ ,-&% &
8
!
./ 0--1
2
##
&
#
#
( ' "
#&3#
9
" (
( # ./ ' ,0 (#
(
%&#
/'
(
+##
( 4+
8
# $% &'
$5
*#
/
( 4 *%&# 5
3#
$ #
(
( $ %
,6
( 2##
(
#& 0--1
,6
( /5# #&
,6
( 7-(#
#&
,6
( "
6+#
#&
,6
( # #&
,6
( 4+ #&
8 ,6
( ,# #&
9 #& "
##
$''
( / $
' 4& :;
)
( #5&' #&
0-'
( #5&' #&
&#+' &+
#
8
8
8
8
8
8
8
) $% 8
,6
( -
# ' ++
'
<
6 -
# ((
(
$''
( ) "
##
-
#
,6
( 4 '&
,(=$
'=,% ' !3
(
$''
( -
# 2%(#
$''
( 66#
%#
( 1 >#5 ' +
(
8
9
9
9
99
* +,- !
-
)=,6
' #&
)=,6
' $## #
9
. /
/ 8 +%&#
(
8 1 +%&#
(
8 & #
(
?= @ $&& !(# !-'
9
& = 0 1
/ 9
9
9
9
,6
( *#
&
#=' &'#
,6
( &
)
( A-%#
8
2 $
'
26+
(
.2# 1 +%# &#5
?= @ $&& !(# !-'
& = %# = "
#'#
! "
#
# $%%&#
B#- 6 6#1 # & 1 '-&% # # :!"$; "
!"$@ # %
( '
&
#='@ &&1
( 5 # &' '5=
+@ ##- 1 # ## - + & '#% %%&#
#
#'#
=
& 1 %%&#
# !"$@ 5 #6 ' &#
## '& 1#
1 &+##
' # &+##
6 >/C ##-@ '5
+@ ' #+3 &
1 %%&#
< 6# ## >/ ' # 1 %&#6+ ' # %%#@
( & # '(=
'='% &+
#
%-' # 6&&1
( &#
# '' # &+##
D
D
!
:2; = # 2 # &
#=' $A$.
(
## ' ! "
#
# $%%&#
# #+ 2 #%# #
./ #( ' #
6+ #+ # # %
'
( ,0 ##
= ./ : #
& % ((; E
'&#-@ #(= ' )" &
((@ ## *#
' .>/ ./ #( ' ## #
' # ' )" +%
#@ '# ##@ -@ -
# '&
(@
' ++
' *#
./ *#
&C 5 # 5 1
#&@
-
#@ -@ ' ## #
$A$.@ $5
3-%# ' /@ #
&( # +%&+
# ! "
#
# $%%&#
$A$. #+ ' ( 1 '-&%+
# #
< 6
#
( ##- 1 %%&#
( + #
6 #
&(C .>/ '
6 %
#
( 6+#
@ # ,+
# 0 B# '& +
%&#' #( A-=
%# # '5
+&&5 '%&5 ' ## 1# # 6+#
%
#'@ # ./>##%!=
<# B# # *
( '# :
( ./; 5
&5 1# # 1 - $A$. %=
%&#
' <# # # 1 - # #- &5 # '# ## '' '
( 6 # '# :# %
##
;@ (
#' &
#=' '# # '' &# %#& %'# 6 # %%&#
@ ' # 6&& &' '#=
'-
<#=%
+'& +%&+
#' 1 %%&#
( #
:2"; +'&
"
#'
( B#- 6 # #
# *%&
# #& %# 6 # $A$.F
!"$ 6#1 # (- 5 --1 6 # #
&(5 6 5 ## '
( =
%# ' ' (# '#&@ 1# *+%& %-''@ # +
&
$A$. 6#1 &% 5 '-&% + ##- 1 %%&#
< #&# '(
' # -+ # 6&&1
( &&
(
D
D
D
D
D
1 +%# &#
#
( &( % 6 A-%# '
/ 6 #
'' : &; +%
#
%
'
( # + #+ 1#
( &1=&-& E%&+ (E '
/ 6 '-&%+
# #&
6#1 66 #
'' &#
6 && # &&
( '
# 6&&1
(
D
D
D
D
D
!+- 1 '66
!+' # #+
( 6 >/@ ' A-%# 5 ( #
*#
5#+ ## +%&6' $2" :#&&5 #( #' 6 $2";
2-' +
( ' & # +%&65 ++
#
%%# '# '
(
# ###- #6 &5 1# 6#= )" #&
)
'#
'
( ./ ' 2
?= @ $&& !(# !-'
& = 6#1 #
#1 6
'+
#& &'
( & # :2; ' # /
(( ./ E ./= ' '&#-
&
(( ## *#
' >/ # %-' '5
+ &
#=' ##
' -
./ #( ' ## # ' # ' )" +%
#@ '# ##@ -=
@ -
# '&
( ' ++
' *#
./ #
' 6 .#
&
% /
((@ ' # -&' ./ %%&#
./ #1 +%@ '=
#' 5 b: ' s: =#( &&5 - & # # '=@ 6 *+%& b:window
'6
#&@ ' =#( 5#+ #( ## # - &@ 6 *+%& s:task
2 # &
#=' #+ (
## #%# ./ #( ' ' # =
&# # 1 1
'1 2 A-%# %%&#
## &'' #+#=
&&5 # 1@ +%&#&5 #
%
# # # '= 0
#-#'@ # 2
#
&# # ./ # #+ # #
'' ,0=# :# ,0=# # 1E
#
& %
##
6 1 %(; ## '' 5 # 1 2 '
./ ' #- 1 #
&(5@ *#
( ,>/ #
&( :.>/@ A@
; +
6&&5 6
#
& 1#
./ %( G & 6&5 +* ./ 1#
.>/ ' 4
#
& 0--1
6&&1
( &&##
%-' --1 6 # - &5 # 6#=
1 ' # +%
#
+
4 +,
5
&5 *%&
' # 6&&1
( #
@ ##
( 6+ # ##+ %
5
,% %
#
# # 2 $&& 5 ' # 1 #
# &5 ## # %
#@ ' &#( 5 '
E# ## 1# # '#&5@ # +
5 6&5 '-&% 1## 15
( # %#
#& 1 +%# &#5 % &+
## && #
6 6 5 4 + 6+#
@ #
24( 5
?= @ $&& !(# !-'
& = ,%
+ %
@ # + ((#@ # 6
'#
6 # 6#=
1 ## +%&+
# # '&#- %(++
( +'& ./ #( #
&#' #
#- 1 ++
' $ 5 1
( '+
# %
#' 5 # #=
# :,0 ' ./ ;@ 5 ' 15 # '' %# 6 ## # # 1
.2# + .2# 6 6
'+
#& +%#
# ./ 1&' ' ' &+#
-51 "# & %-' ./ (
6 #
6+
( ./ &5=
& &' %##' -
# 5#+ -
# #(( # *#
6 +=
+
' -
# ' ++
' '6
' ( 4+&3' 2##
@ 1
=
- @ ## %-' ## ##
( ' 6 5 ' 06 @
5 & 5 *#
( A-%# '
,
%
# +# - & %# 6 #6 "# #
# /5#
(@ #&@ ='6
' #&@ ' ! 4+ #& /5#
%-' # -&& &5# 6 # %( :%
& ' 1
'1; #& #
##- &+
# #6 ## + #5&
( ' -@ 6 *+%&@ &#-1 :# & # &;@ + *@ &' G *#
' # #& ,=
-&% & # # 1
#& #& +' 5 # 1
)=,6
' #& $ %& #5% 6 #& # 4+ #&@ 1
%-' %%# 6 '#
& 6+@ %# -&'#
@ ' G & +&#+'
&+
# 4&@ A-@ ' # +' #5% ## %&(=
$ %
#
++
&5 ' 6
#
&#5 6 #
( #=
6 4 *+%&@ # 4 '& +%&+
#' #& # + #
#6 -( & ( # 5 ' 4 #- 1
1 #&@ #
1 +
( 6@ # 6 ,>/ #&@ 6 ' # +
(' %#&5
# & 6 # 4 (
&5 & #
6
#
&#5 6 66#
:
+#
;@ '(=
'='%@ 3
(@ ' 6+ -&'#
/
( % 1# # 1
1' ' 61' ##
' +
( & %%#'@ 6# =
+&&5 & =
#
- # +%&+
# & + ' #5&
( 6 '@ '% '=
1@ ' @ %# 6 # #5&
( =+%
# /'
( ./ '# 5
&5
1# ++
&5 6' # E$A$.E +%
# # 6 &'
(@ +=
%&#
(@ ' '
( 6 '# # # -& #( 6# 5 ''
( 6
=
#
&#5 6 ./ #
6+#
@ #
(@ ' '
( '# # #& :
#6 #&; 4#+@ # +%
# /5 +&&5 '# 6+
# $%%&#
/5
%
# 6 #& ## '-&% ' 6 66#- '-&%+
# =
", %&(=
6 & #'@ &%@ ' ,+1-@ 1&& 1=
' ' ((
( ' 6+#
#&
*+%& ! !'
"
# #
@ # ! !' ' # &&## # 6
#
& --1
! !' %%&#
## '%&5 '66
# ! 6' ' # 1 1
#& #5 -
?= @ $&& !(# !-'
& = +
4 611 6
G 6
' # %%&#
&
# http://www.backbase.com/demos/RSS
% %
= &5# 6 # ! ' =&&' ! &5#@ +
( #
3 1
5 3 # 1 1
'1@ ' && &+
3 5 # +
%
#( 5 ( %
& :b:panelset ' b:panel #(;@ 5 6* + &+
# #
1'# & % & 1# # +%&*@ '
%
& +%& # '6
:
' #5 1 +& # >/ 6+#;
$
# ##
( 6# 6 # ! !' ## 5 ( # +( %
# +( H
'1 5 &
( # #%=&6# ##
H
'1 # %#
## #-&5 %%#' 5 G & %#
6+ # "
##
/5@ '((
( ' 3
(@ # & &
(@ +
+3
( ' #
( 6&=
&1
( # 1 # H
'1 6 # ! !'
?= @ $&& !(# !-'
& = +
4" 6
-
$
# +%#
# &+
# 6 /5# #& (# ' 6 # #&@ &
# # *+%& # *%& *%& -& & # 1 #
:www.backbase.com;@ 5 #&&#
'#5 "# 6# && # =
#=6=#= * #&@ # 6&&1
( 6+ &+
#@ # @ #& @ '
* 1# ##
' # ! !' *+%&
?= @ $&& !(# !-'
8
& = +
4# +
%
= ) "
##
/5 6 # ##
#
%%&#
&( +%# # -&& &#5 7-(#
(' *=
+%& 6 5 1 #( %& 6 #&@ 5 +%&5 # 1 =
' 61' ##
# -(# #1
#&@ +%&+
#' 1# 61 &
6 '
"
''#
@ && #& +'@ 1 5 ## # )!/ %& 6+#
+
4( ,
H& 5 1@ # 6+#
' # :I; '5
+&&5 %'#' aid
# #& ",@ ' [10] # #5 '*
H
5E- &#' #&@ 5 ## # '66
# & : # =
&1; # 6 #6 &+
# +
(' 5 $ =
&#' #+ # ## ! ' # &
' # '66
# 6+##
( :
(
-;
?= @ $&& !(# !-'
9
& = +
4) 1
1
$
+#
' 66# & #(#61' # +%&+
# "
# ! !'@ -&
66# '@ 6 *+%& +# %
( 6 # 1
'1 $
+#
=
# &5 %#' #@ # # 6&&1
( &&##
(- 5 +%=
6 1# %%
1
5 % # & ##
# %
&' 15@
1& # #& &+
('&&5 *%
'
+
4* $, &
0 -&5@ 6
#
&#5 +# & # 1 #(# 7-(#
( #1
+( (' *+%& 0
# #& @ 5 6
' E
1 #&E ' E&' #&E ##
?= @ $&& !(# !-'
& = +
4. 7
5
8
$
79 H
5 & # E&' %#E ##
@ # &6# 5 # #& ##@ ' #
(# # ## 6# # ##
%'
+
40 1
"
# #& ##@ 5 ## # #& &#' # #& &# # ## 6 # #& &#'@ 1 '66
# #5& %%&' : &(# & =
(
'; H
# ##
%'@ # 6&&1
( %%
D
D
D
D
D
1 #& &'' # #& %
## 6 # &' #& # # '&#' ' + '
## 6 # 1 #& # # &#' ' # (# # & (
'
)!/ %'#' 1# 1 $#& '
#6@ ' 1 #5 '*
6@ # '-'& #
#((
( %
'66
# %# 6 #
%%&#
@ ( # ' 6
#
&#5 6+ # 4
'#
' # $%%&#
/5
/ %
= ! !' & + ,# /'
( #
+# - & =
#
# &'
( 6 1 #& -5 +
#@ # &
# %%&#
' <# #
# - # 1# # 1 #& "6 # 1 #&@ # +=
+ # (& ./ 6&@ # %%&#
% # #& # # (#=
' &+
@ ' (&(# 66# %%&'
?= @ $&& !(# !-'
& = +
42 / 7
5 $
& %-' 6
#
&#5 6 &'
( '+
' 4 *+%&@ # '-
'
%
& # &'' #& # &#' 0
# &''@ # #' # ' # &'' 06 @ 5 & %65 ## &' &''
-5 #+ # &#'@ ## # &'' %'&&5 H
# 5#+ &'
(@ #
% & # '%&5 &'
( +(@ # 6&&1
( # '+
## :
# +( # #% (#=
' ;
+
4 "
#'
( # ./ $6# '
( # %- #
@ 5 &' 5 1 - --1 6 # 6
#
=
&#5 %-'' 5 6#1 #
'&- '% # # 6 # (- --1 6 # '
( +'& ' *%&
1 ./ #( &''@ #=
%#'@ ' *#' %
' 1# # " ' "
+%
# # 6
#
& --1
?= @ $&& !(# !-'
& = +
4 /8 H
1 ' # (
3 ./ #(@ #6 # 2
##
&
#
:2; #
&# ./ # #- 1 ++
' $ (' 15 # -&3 # #
#
6 #1 # 1
# &&##
&1 # +%' 6 ./@ '
# # 6 >/ :# ,0=#; 2 #
&# # ./ # #
''
,0 @ 1 '' 5 # 1
$ %%&#
+'6 # ./ # 1
- +#
( ' # ( # #6 1#E 1 %&#
G &' 1 ./ &=
+
# # # #@ +- #+@ %5 #+@ #
6+ #+@ ' &&##
#@ &#E - & # '(=
'='% 6 '( #+@ 1# #&&5 %%
=
( ## #5 '((
( %# 6 # ./ # H
# #+ '%%' #
&#
@ # ./ 6(+
# #' # ./ # 1 &#
0
6 # 6# <#
## 5 +5 - J1 ' " &# '' %# 6 #
#KJ G ' # 5 1# 1
( # .2# &
(( .2# #
''3' 5 # H@ ' +%&+
#' .2# -
4 +
6+#
@ # #
"4 ' "4" .2# # &5 ' 6 #(#
( %# 6 # ./ ' ,0=#@ # # &
%6+ -#5 6 6
#
@ #
( +
%&#
' &&#
& #' 2=%6 *#
# .2# 4 + 6+#
@ #
$%%
'* # ./ !6
2,4
)
( # *+%& # &
+
& ' # %# 6 %%&#
'-&%+
# 1# @ '
%-' *+%& ## 5 #=
'=%# # ##=% %( # %# # #5 #
%# ' #5 # # ' 6 5&6
## 1#@ 5 ' # # ##=% 6& $ 1 %%&#
#
:2"; +'& 2" '#='-
<#=%
+'&C +'6#
6 # #6 < !
#' 6 @ =
?= @ $&& !(# !-'
& = &#
( +&& %'# ' '
( # %'# # *#
( %( : =
##
&# %'#;
'-&% 5 6# %%&#
' # *+%& # +
&
# 5 ##=% 6&@ 6 *+%& index.html@ # - 5 2" G # C:/Backbase/3_1_4/skeletons/basic-start-up.html ' "6
5 %5 # 6& # + '#5@ 5 # '#&5 0#1@ 5
' # ( # src ## # # script #(@ ' # onload ## # #
body #(@ # %65 # &#
6 # 2 &#- # # 6&
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<head>
<title>Backbase startup page</title>
<script type="text/javascript" src="../bpc/boot.js"></script>
</head>
<body onload="bpc.boot('../');">
<xmp b:backbase="true">
<div b:action="alert" b:value="You have a working Backbase installation">
Click here to see if your Backbase installation is working</div>
</xmp>
</body>
</html>
#=
'=%# # *+%& #1
# xmp #( 5 ##=% 6& '
#1
# xmp %' ' '' 5 # 2 (
"# + 1# 1
# #$ 5@% # 5 ' 5 ( # 6& 6+ 5 6& 5#+
# 6& 6+ 1 -@ 5 6# ' # ' + 6(#
4
+ 6+#
6(
( 5 1 - 1# @ # &
! 2,4 # C:/Backbase/3_1_4/docs '#5 : 2,4 ' 1 #
6( # $% ' "" 1 -@ # 5 5 1 -;
#
4" - 6 *%&
#
6 ##% 6&
,-&% !
&% 5 (# % # %' '-&%
( %%&#
@ # 6&&1
( '-&%
-& &
D
D
D
D
D
&'
= ##- ## 1# ' +%& 5 #5 #
' ##
1
: = +%& %%&#
'(
' # &% (# 5 ##'
'-&%
( + +%&* 1 %%&#
1,
= 5 #=
'=%# # *+%& %-'' # +
& # ##% 6& ' ##
6
= '#&' 6
6+#
# b: ' s:
#(@ ++
' ' -
#@ .2# ' A-%# 6
#
@ -& &
2,4 # C:/Backbase/3_1_4/docs '#5@ 0
&
>&% :
&;
= #+ '-&% #& ' ./ 6
'+
##
-& & H
5 - ( %%&#
@ % # & ##
#
'%&5 # +
+
4" 6
8
;
## L#
?= @ $&& !(# !-'
& = ## # ## +%& %%&#
'(
' # &% (# 5 ##'
'-&%
( + +%&* 1 %%&#
G # ' %-'' 5 #
## # 6 '-&%
( H %%&#
## # +%& %%&#
## '+
## 1'&5 ' #5% 6 H %%&#
## # &#' 6&' 5 Backbase/3_1_4/starterkits '#5@ '
'+
##
6 #+ %-'' # Backbase/3_1_4/docs '#5
Figure 1.14 - Forms Starter Kit
?= @ $&& !(# !-'
& = Figure 1.15 - Windows Starter Kit
Figure 1.16 - Portal Starter Kit
?= @ $&& !(# !-'
& = Figure 1.17 - Petshop Starter Kit
*%&
*%& 1 +%& 6 # %# *%&
' # )
& ## 6 # *%& '
#& # ## 6 # +
&@ 5 &5
=6
# *%& ##- #6 1 5 -1 ' #5 # +%& '@ ' '' 5 1
' G # *=
%& 6+ # 6&&1
( )!/
http://www.backbase.com/demos/explorer/
*%& & '&-' %# 6 5 #&&#
@ 5
Backbase/3_1_4/explorer '#5
?= @ $&& !(# !-'
& = Figure 1.18 - Backbase Explorer
!
#+ ,-&% &
#+ '-&% #& ## %-' '#&' 6+#
5 #+
1 %%&#
G # '-&% #& - # &
+
@ 1 -& & # 1 # #+ 5 %
( # & 5 2
( #
& 1 ' ' # +
6&&1
( +( 1 # & +
1
1
'1
Figure 1.19 - Backbase Tools
6&&1
( # & %-' --1 6 # -& & #&
/
/
9
1 &#' &+
# # '+
#
# ' %-' '#&' 6+#
## &+
#@ # >/ ./
'@ # ,0 ## #@ 1 #
?= @ $&& !(# !-'
8
& = /
&+
# '' 5 # 1 &5#
+
(@ # - # @ ' 6
&&5
# - & # # # '%&
/
9
& 6,
1 +
# #
*#' #
#+@ 1
6
# 1
5 -1 # &# 6 .2#
@ ' # &'
# 1 5 '' ' ./ ' # &#' &+
#
L5 ' ## $<
=8 # 6& ## # ' -'
' %-' # <# ' %
'#&
L5 ' ## $<
> $&&1 5 # (# 6+#
./
&+
# 5 +-
( # + - #
L5 ' ## $<"
6
# --1 6 # &'
( &
' # ##
6 5 1 %=
%&#
C -@ "'@ /#@ M6*=
#@ ' L5=
'
(
L5 ' ## $<#
!
%65 & 26
L5 ' ## $<(
,-&% &
/
9
%-' '#&' 6+#
&#' &+
# 5 '=
+
# "# +% # 6&&1
( %
D
D
D
1
= 5 &# &+
# 6 1 5 1
# # -1 # #+
'#& 5 &
( # &# :
# #% &6#=
' ; ' #
&
( #
&+
# # 1 $&#
#-&5@ 5 # .2# <5 # #
'+
# ' &# # &+
# 6+ # 1
6
# <5 #
% 6 # # &#' &+
#@ 1 # body #( 6 &+
# &#'
/,
= 5 -1 &#' &+
# # ; # @
'%
'
( 1# # &+
# %# 6 # ./ % >/ %@ #
&6#=
' ' %
&
,
/
= # (#=
' ' %
@ 5 -1 # 6&&1
( '#&'
6+#
# &+
# &#' # '+
# # :# ;
# ;
D / # 1 # ./ ' '6
' 6 # &+
#
D ; # 1 # .>/ ' '6
' 6 # &+
#
D /8 7
# 1 ,0 6+#
## # ' -&@
D ,
1%
# 1 # #5& %%# ## - +%#' 5
# &
# 1 &5# +
( # ' # B# %%#
'66 6 &5# +
(
D 9 # 1 # - ' 5 # &+
#
?= @ $&& !(# !-'
9
& = D
D ?
# 1 # - & # &+
# # # '%&
"
# ##+ (#=
' %
@ # /
9
& D 6,
# ## +
# ' &( # *#
6 5 #+
'@ ' '%&5 5 '6&# @ &@ @@ ' +(
G '' # debug="true" ## # &+
# - # &( #
#
## *#' #@ ' & # #+ +( 4 +
6+#
@ ' #$ :>% D 1
6
# 1 5 -1 # &# 6 .2# D &'
# 1 5 '' ' *# ./ ' #
&#' &+
#
"6 5 1
# # +
# && # #
*#' 5 %%&#
@ # debug="true"
# body &+
#
+
42 /
9
6&&1
( ' 1 # # /
9
' +%& # ##=% 6& ' '' # 6&&1
( '
<s:behavior b:name="alert">
<s:event b:on="command">
<s:task b:action="alert" b:value="You have a working Backbase installation" />
</s:event>
</s:behavior>
<b:box>
<a b:behavior="alert">Click here to see if your Backbase installation is
working</a>
</b:box>
!
# %%&#
5 1
2 & # %
# @ ' A /
9
$&#
#-&5@ 5 % $<
& # # #% &6#=
' # &# # : ' ' '#
# &#'; G 1 &# 5 &+
# # 1 1
'1
?= @ $&& !(# !-'
& = +
4 1
& # &
:# a &+
#; # 1 &+
# &#' # # ## 1 # ./ #
+
4 "
# / # @ -1 # ./ ' '6
' 6 # &#' &+
#
+
4" / & # /8 7
# # -1 # ,0 '6
' 6 # &#' &+
#
+
4# /8 7
?= @ $&& !(# !-'
& = 8 & # ,
1%
# # -1 # #5& %%# ## - +%#' 5 # &
# 1 &5# +
(@ 6 # &#' &+
#@ #
' # B# %%# '66 6 1 &5# +
(
+
4( ,
1%
9 & # 9 # # -1 # - ' 5 # &#' &+
#
+
4) 9 & # ?
# # -1 # - & ## '6
' ' & 6
# &#' &+
#
+
4* ?
26+ 6 5 '+
# 5 #
( .2# *%
@ 6 *+%&
D # //b:box ' % 1
D "
# 1
6
# @ & # &
' 1# # # ; # # -1
# ; / 6 # &#' &+
#
?= @ $&& !(# !-'
& = +
4. ; & # &'
# %
%-' &#
' ##
5 ' &=& # '' # # &'
# 4 *+%&@ '' #
6&&1
( ' ' & &'
# # ' :# ' #
&#' ';
D <s:setatt b:style="background: red" />
D <s:task b:action="alert" b:value="Hi!" />
./ *#' &+
# &#' # ./ #
1
D
D
D
#
*#' # 6,
"
# # @ &# # &
&+
# :a;
0%
# "
# &'
# @ # <s:setatt b:debug="true" /> ' &
&'
"
# @ # # ## # #
+
40 &'
D
D
0%
# 6,
"
# 1@ & # &
7# # #
## *#' '
&((' # 6,
?= @ $&& !(# !-'
& = +
4"2 6,
D
G ' &=& #
# 6,
# B+% # #
&+
# 1 # #
#((' # #
G 6 # #& '#& ( # 5 <
"F0 "
%#
=8 +
# 6& ## # ' -' & 6& # -1 # =
<# ' %
'#&
+
4" =8 N "
%#
> &&1 5 # (# 6+#
./ &+
# - 1 #
+ #&5 -
( 0%
# > ' +- # + : 5
# %
#
( '-; - &+
# # (# + 6+#
# &+
#E ## =
#
?= @ $&& !(# !-'
& = +
4" > !%#
# --1 6 # &'
( & ' # ##
6 5 1
#
C -@ "'@ /#@ M6*#@ ' L5=
'
(
%%&=
+
4"" 6
6&&1
( # & %-' --1 6 # %# -& &
6
/
9
# --1 6 && #&5 &''
- :++ ## ## '
-
# %# 6 -;
# --1 6 && #&5 &''
ids
# --1 6 && #&5 &''
tasklists $ #&# #
6 <
6 ++
' ## *#'
1
# #&# &&'
B'
1 +( ' 6 1'(# : (%
# &5 '6
' 6 # &' '
# # #&;
:
%
1 --1 6 && # 5 ##'
# ++
'
?= @ $&& !(# !-'
& = 26
%65 & 26
+
4"# !
*&'
( &
& &15 &'' 5 '6&# G *&' # #&
# b:devconfig="false" ## # # # >/ body #( 6&&1
5 ''
(
&',
4" &' <body onload="bpc.boot('/bpc/3_1_4/');" b:devconfig="false">
...</body>
G & ' # # # b:devconfig ## # 6 5 - '6
' #+ '-&%=
+
# 6(#
6& :tool_devconfig.xml;
6(
( &
tool_devconfig.xml 6& # 6(#
6& 6 # & G +'65 # 6& # ( %'6
' 5 ' ##@ 6 5 1 %%&#
&'5
5 ## 6&# 1# # ##@ ' # &&3 # +( ## %% # 6,
0%
# tool_devconfig.xml # /tools '#5 6 5 #&&#
#*# '#
'# # 6&&1
( #
6 # 6& # ( # 5 ' ##
<s:behavior b:name="TOOL_KEYBOARD">
<s:whenactive>
<s:keys b:keys="27" b:action="tool-toggle" b:target="menu" />
<s:keys b:keys="alt+49" b:action="tool-toggle" b:target="inspector" />
<s:keys b:keys="alt+50" b:action="tool-toggle" b:target="io_inspector" />
<s:keys b:keys="alt+51" b:action="tool-toggle" b:target="q_inspector" />
<s:keys b:keys="alt+52" b:action="tool-toggle" b:target="reporter"
b:report="default" />
<s:keys b:keys="alt+53" b:action="tool-toggle" b:target="settings" />
<s:keys b:keys="alt+54" b:action="tool-help" />
<s:keys b:keys="shift+r" b:action="tool-detail-refresh" />
</s:whenactive>
</s:behavior>
-& 6 # b:keys ## # # 5 # : (
';@ # '+& $"" -& 6 # 5 4 *+%&@ 27 # & 5 4 +
6+#
'6
( 5 ' ##@ () #$ @5% "6 5 ( # &#
6 5 6(#
6&@ 5 +# %65 # &#
# b:devconfig ## # # body #( 5 ##% 6& 4 *+%&
?= @ $&& !(# !-'
& = <body onload="bpc.boot('/bpc/3_1_4/');" b:devconfig="myRootDir/tool_devconfig.xml">
...</body>
8 #
( #+ (
"
5 '' #+ +( # 5 ' ( # b:action="msg" +=
+
' G -1 5 #+ +( # &# @ '' #+ # # !
#+
"
# 6&&1
( *+%&@ 5 # #+ +( ## # # +(
...generating a custom message@ ' #
( # #& %6
' #+
# ##
( # - # +( '%&5'
# ##=% 6& ' '' # 6&&1
( '
<a>Click here to generate a custom message...
<s:event b:on="command">
<s:task b:action="msg" b:value="...generating a custom message" />
</s:event>
</a>
!
# %%&#
5 1
2 & # %
# A !
"
# !
'&(@ &# # , *
+
4"( !
& # &
# (
# # #+ +( +( %% #
&# +
4") $
A /
9
8 0%
# 6,
# ' &# # , * 6&&1
?= @ $&& !(# !-'
& = +
4"* 6,
?= @ $&& !(# !-'
8
& = %# = )
'#
'
( ./ '
2
./ 0--1
./ #
' 6 #
& % (( ./ '&#-@ ./=
' &
(( 6 '-&%
( ! "
#
# $%%&#
:!"$; ./ - &5 *#
6 .>/ ## %-' #( 6 '&
( ' (&5 ##- 1
# G 6&5 +* ./ #( ' ## # 1# >/ ./ #( '6
'
# 6&&1
( +%
D
D
xmlns:b=http://www.backbase.com/b6 -& #( ' ## # :b: %6*'
#(;
xmlns:s=http://www.backbase.com/s6 5#+ #( :s: %6*' #(;
6+#
# #
#
'' # %-' 5 1# --1 6 # ./
&
(( #
# # 6 # +
& ( # '#& # # +# +%#=
# ./ #( ## 1#@ # ./ &
(( #(3' 6&&1
D
D
D
D
1%
, CDE = 6 '6
( -
# '&@ -@ 6*#5&@ 5 1
#&@ ' CDE = 6 #=6=# * #6 #&@ +
@ # @ #@ &'@ #6 #& :#+ &
# #&;
B
CDE = '6
6
#
&#5 6 %(++
(@ M)"
6
#
&#5@ # +
%&#
@ ' 6 +'& ## 5 %%&5 # && .>/
' ./ &+
#
&9
,, CDE = 6 '6
( # -
# ## #((' &+
#@ ' ++
' ## '6
# #
## # %& 1
# -
# #(('
6&&1
( ' -5 +%& *+%& # '+
## # 5 6# 6 ./ "
# *+%&@ # #6 # 6 b:box #& 1# .>/ &
&+
#
'6
' 1#
# * #& +%& &5# #& ## %-' '6&# #5&
(
' &5# 6 # #
# :
5 ./ .>/; 6# # &
6 ' '6
-
# '& 6 # command -
#
Example 2.1 - Simple BXML Example
<b:box>
<a>Click here to see if your Backbase installation is working
<s:event b:on="command">
<s:task b:action="alert" b:value="You have a working Backbase installation" />
</s:event>
</a>
</b:box>
H
# b:on="command" -
# #((' # &
&+
#@ ## 1
# & # &
@ # -
# '& #(('C &# '&( * %% 1# #
%6' -&
?= @ $&& !(# !-'
9
& = Figure 2.1 - Basic BXML Example
"6 -
# '6
' &+
#@ # command -
# # '6&# -
# ## #((' "
# - *+%& #6@ 1#
( <b:box><a>Click here to see if
your Backbase installation is working</a></b:box> <-&
#
5#+ ( :#(;
s: %6*' #( ' 6 5#+ #( D #( # 1
%6 ## # 6&&1
( &&##
%-' --1 6 # s: #(
?= @ $&& !(# !-'
& = +
4 1 #&
#& # -& #6 #& ## '6
' # b: +%
D #( # 1
%6 ## #@ ' 5 & %%&5 (
## # #
# &+
# 6&&1
( &&##
%-' --1 6 # #=
6=#= * #&
?= @ $&& !(# !-'
& = +
4" 89
9
5
M
$## #
M
## # '6
6
#
&#5 6 %(++
(@ M)" 6
#
&#5@ # +
%&=
#
@ ' # 6 +'& G & %%&5 (
## # # &+# 5 ./ .>/ 6&&1
( &&##
%-' --1 6 # (
## #
?= @ $&& !(# !-'
& = +
4# B
$
& 6(#
## #@ b:controlpath ' b:skinbase 4 +
6+#
@ #$ D<% -
# ' ++
'
-
# '' ##-#5 # 5 2" # -
# * +,
#$ D@% ## #((' 1
# ' +#
(@ &
( ##
@ # # &
)
' +,
#$ @G% ## # '#&5 ' 5 # @ 6 *+%& # construct -
# 6 1
%( ##' H
-
# # %&@ 5 '6
# #
@ ''!@ ## &' # %& 5 '6
( ,
! 6
# -
# 6&&1
( &&##
%-' --1 6 # ++
'
?= @ $&& !(# !-'
& = +
4( ,,
"
@ 5 ## -
# # 5 &+
# # )" G #
# -
#
'& # '#+
1# # %& 1
# -
# #(('@ 6 *+%& 1#
&' %%
1
& &
$
-
# '& #
6 *#
(
++
' -
# '& '& # -
# 5 *#
( ++
'@ 6
++
'
4 + 6+#
-
# '&
(@ - +,
.! #$ D>%
& 1'(#=%6 ++
' bufferdirty@ datepicker@ '
setpanelset
?= @ $&& !(# !-'
& = 2
##
&
#
2
##
&
# # ' (
M)" '
( (
@ 1
%-' '&#- &
#=' #+ 6 '-&%
( $A$. ! "
#
# $%%&#
2 %# && +
1@ &# &(# ' 6&&5 +%# & 1# H
#
'' & .>/@ @ A-%#@ ./@ ' .2# # # 6 #
&( +=
+
&5 6' # $A$. 2
##
&
# +# 1
0
#-#' 1#
# 1
1@ # 2 # &
#=' %
##
6+=
1@ 1 &' 6&# 6 ## +
(+
#@ -
# +
(+
#@ 5
%&&& %
(@ &
#=- 5
3#
' +
#& '# &'
( 6+1 #&3 # %
( %1 6 # && +
# '#&5 *# # 1
%%&#
O ##
' %
##
&( ' &&1 6 # #
##
6 (&
2( "
#6 :2"; $&#( # 2 '-&%' A-%#@ 5 ' # - #
1 A-%# # 1 1# 5 +%&5 '' ./ #( # 5 :.;>/
%(
#
( ' "
#&3#
##% 6& # ##
( %
# 6 5 1 %%&#
' &#' # # 6
5 #
O 1 %%&#
6&' ##% 6& +# #
# 5
#* # &'
# 2@ ' # *#
& ## #
# #
# ' '6
# #5& 6 5
1 %%&#
6&&1
( *+%& 6 +%& 2" ##% 6&
Example 2.2 - Startup File
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<head>
<title>Backbase startup page</title>
<script type="text/javascript" src="../bpc/boot.js"></script>
</head>
<body onload="bpc.boot('../');" b:controlpath="../controls/backbase/" b:skinbase="none">
<xmp b:backbase="true">
<div b:action="alert" b:value="You have a working Backbase installation">
Click here to see if your Backbase installation is working</div>
</xmp>
</body>
</html>
6&&1
( # & ' # &+
# 6 # ##% 6&
&
,
/
!DOCTYPE definition
.>/ #
'' '6
#
,+
# 5% ,6
#
"# ++
'' ## 5 .>/ ## ,,
7+%
"
# html #(@ # # .>/
+% ' # ./ +%
'&#
6 b: ' s: #(
<script>
"
# head #
6 # ##% 6&@
'6
# %# # '& # - & 6
#
( # 2
"
# *+%&@ # /bpc &#- %#
body
onload="bpc.boot('../');" &' #
2 1# &#- %# # # boot.js
?= @ $&& !(# !-'
& = &
,
/
body #( # bpc.boot +#'
1
# '+
# &'' +#' ('../') %+# 1 ' # '# # %# 6 # 2
b:controlpath="../controls/backbase/"
'# # %# # # #& 5 1
#
# @ b:skinbase # default.xml 6&
4 + 6+#
@ #$ D<% xmp
?= @ $&& !(# !-'
xmp #( + # ./ % b:backbase="true" ## # '# &&
./ s: ' b: #( +# %' '
'' 5 # 2 0#' # xmp #(@
5 #
'' >/ ' 1
+% 4 + 6+#
@ #$ 5@%
& = %# = "
#'
( # ./ (
( # ./ ' ,0
)
'#
'
( # " ' -/ " 6
'+
#& # '#
'
( 1 5
# '5
+ #
# %%&#
:!"$; B#- 6 # ./ '
# ,0 # + 5 '6
( &(& ## 6 '+
#@ ' # 15 '+
# ' ' +
%&#'@ # &&1 5 # '5
+&&5 ' %'#
# #
#@ ## ' #5& 6 '+
#
D
D
,+
# 0 B# '& :,0; %%&#
%(++
( #6 :$2";
6 -&' >/ ' 1&&=6+' ./ '+
# "
# ,0@ '+
# - &(& ## 1 -5 + & ## 6 #@ # #+ ,0 ./ # B# %
##
6 ./@ '6
' 1#
xmp #( $#
#+@ # 2
##
&
# :2; 6# % # ./ ' #
# ./ "# #
#
&# # ./ # #
'' ,0 ## '' 5 # 1
Figure 3.1 - Tree Manipulation
"
@ 5 +
%&# # B# # ./ ( # %# 6 (#
( &&1 5 # %
# #@ ' -(# #( B# # ./ # %6+ '5
+ #
%5@ +-@ +-@ ' # &' 1 '# =
#
# (#
( %6+' ( .2#
,0 # +'& '#' ' +
(' 5 # 1C # ./ # +'& '#' ' +
(' 5 # 2 :# ./ # %
##
6 5 ./ '; ,0 #
&#' 6+ # ./ # >/
%
##
6 # ./ ( 6@ 1
5 +
%&# # ./ @ #
,0 & #+#&&5 %'#' # 6&# # (' ##
0
1
2
'
'
3
?= @ $&& !(# !-'
456
-/
! '
& = #
177888$85$7-/7-/"% $
(#
(
"
6 # %# 6 # 2" +'& (#
( ' #(# %%&#
# &# B# # ./ ( @ 1# # B#-
# '5
+&&5 +'65 # %%
' #
# 6 # #6 4 *+%&@
#(#
( &&1 5 # %6+ #
'(=
'='%@ +-@ %5@ ' # &'
1 '# # *#
( %(
G '' ' # ./ # 1# .2# ( , #(#
(
D
D
6
9
= 5 ./ -(#
: 9 #$ G5G%
; #
'' # & ' # #@ 6 *+%& b:target="../.."
$
= 5 # ", &+
# ## 5 #
6
'#&5 4 *+%&@ 1 # &+
# ", id="element_id"@ 5 #(#
# &+
# ( b:target="id('element_id')"
7# .2# &&1 5 # -(# #( &+
# ' ## # ./
'+
# .2# *%
#
# '=#@ #
(@ &
@ + %%# # H :$; #
''
"# +%#
# 6 5 # + 6+& 1# .2# ' # #(#
( %# 5 6
# *+%& # +
& '+
## #(#
( 4 + 6+#
.2#
$*@ 9 #$ G5G%
' +9' #$ G5E%
@ .2# (
& H& .2# #& P##%FF1111&+F*%#FQ Figure 3.2 - Targetting
6&&1
( *+%& +%& '+
# ## #(#
( # 1 ' ' &=
+
#
Example 3.1 - Targeting
<b:box>
<h3>The Seven Samurai (1954)</h3>
<p>A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune.</p>
<p style="display: none" id="sbox-showhide">
The film takes place in war-ridden
?= @ $&& !(# !-'
8
& = 16th century Japan, where a village of farmers
hire seven ronin (lordless samurai) to
fight for them against a band of marauding robbers. The Seven Samurai is widely regarded as
one of the greatest Japanese films ever made.</p>
<p b:action="show-hide" b:target="id('sbox-showhide') | a">
<a style="display:none">&lt;&lt;&lt; Show less</a>
<a>Read more &gt;&gt;&gt;</a>
</p>
</b:box>
6&&1
( +( 1 # %( #& ##
Figure 3.3 - Show-Hide: Initial State
"
# *+%&@ # 6&&1
( &
'6
+%& -
# '& ## 1 ' #
&+
# # #(#@ ' # &+
#E # #$ G;5%
&',
"4 1,
&9
;
<p b:action="show-hide" b:target="id('sbox-showhide') | a" />
b:target #(#
( # #(# # &+
# 1 ' sbox-showhide@
' , #(#
( # #(# && a :&
; &+
# # #*# ' b:box #+ #& ' 6 &5# %%@ 1%%
( # #
# * ' %%&5
(
+%& #5&
(
Figure 3.4 - Show-Hide: Clicked State
(#
( # >/ %
$ %%&#
'6
' 1#
# xmp #( 6 5 (& %( #6 :2";
xmp #( + # C # ./ ' >/ &+
# ## %' 5 #
2 (
' '' # ./ 5 '6&#@ #(#
( 1 # &+
#
# ./ % >1-@ 1#
5 %%&#
@ 5 '+# ## &
( # # ." ( b:xhtml #(C &+
# 1#
# #( #
%' 5 # 2 2##
( &+
# # ." 6& 6 #(#
1# *=
#
( %%&#
@ ' # +%- %6+
5 ( .>/ 6 +%& +=% '
+%& )" &+
# :# #
# 6 #& &
( # # >/ %C 6
+ 6+#
@ - ." #$ GG;%
;
$ &+
# 1#
# b:xhtml #( # %'
?= @ $&& !(# !-'
5 # 2@ 5 #
5 '6&#
9
& = #(# # &+
# #5 ' # - '=# %
##
# ./
# & 5 # #(# &+
# # >/ %@ %-' # 6&&1=
( #+ .2# 6
#
1
8
D
D
html() = 6 #(#
( ' # >/ % html() 1& ## #
2 # ( # # %
##
# ,0 bxml() = &&1 5 # 1# 6+ # >/ % # # ./ %
&&## # '66
#1
# # # >/ ' ./ %@ # #
6&&1
( *+%&C # &# ./ 1# # '=#@ ' >/ 1#
6- ' # & # #(# # span &+
# # >/ %@ # &
&=
+
# -
# '& # html() 6
#
:# -
# '& %# # ' #
#
# &# '&( *;
Example 3.3 - HTML Space Example
<a b:action="alert" b:value="{following::b:xhtml/html()/div/span}">Click me</a>
<b:xhtml>
<div>
<span>HTML Space</span>
<b:bxml />
</div>
</b:xhtml>
"
# 6&&1
( *+%&@ &
( # ##
#(( -
# '& ## #(# &=
+
# # ./ ' >/ % # 1 ' ' # &+
#
Example 3.4 - Show-Hide HTML Space Example
<div style="background-color: #FE987E; width: 400px; height: 100px">These elements are in the
BXML space
<b:button>Click here to Show-Hide elements in the BXML and HTML Space
<s:event b:on="command">
<s:task b:action="show-hide" b:target="id('html_space')/html()/div/span" />
<s:task b:action="show-hide" b:target="id('bxml_space')/div[1]" />
</s:event>
</b:button>
<div id="bxml_space">
<div>Clicking the button toggles the display style property of this element in the
BXML Space</div>
</div>
</div>
<b:xhtml id="html_space">
<div style="background-color: #80FFB3; width: 400px; height: 100px">These elements are in
the HTML Space
<span>Clicking the button toggles the display style property of this element in the
HTML Space</span>
</div>
</b:xhtml>
"
# 6&&1
( *+%&@ # ' &
#(# &+
# # >/ % ( #
html() 1&@ ' # >/ % # #(# &+
# 1#
b:bxml &+
#
( # bxml() 1&
Example 3.5 - BXML Space Walker
<a b:action="alert" b:value="{following::b:xhtml/html()/div/span}">To HTML Space</a>
<span>|</span>
<a b:action="alert" b:value="{following::b:xhtml/html()/bxml()/b:bxml/b:box}">To BXML Space
within HTML Space</a>
<b:xhtml>
<div>
<span>This element is in the HTML Space</span>
<b:bxml>
<b:box>This box is in the BXML Space</b:box>
</b:bxml>
</div>
</b:xhtml>
"
# >/ %@ 5 +# #(# ## # ( # A-%# -
#
4
*+%&@ 5 #(# # class ## # ( # 5
#*
b:value="{html()/div/@myClassName}" : #(# # class ## # # ./
%@ # 5
#* bxml()/div/@class;
?= @ $&& !(# !-'
& = ++
' 6 # >/ %
G # && # ++
' -& & # ./ &
(( &+
# #
>/ % 6&&1
( &# 6 ++
' 5 &+
# # >/
% :
' ./ %;
D
D
D
D
D
D
D
D
D
D
D
visible@ invisible ' visible-invisible
show@ hide ' show-hide
maximize@ store ' restore
move ' remove
addclass ' removeclass
position
scrollto
send
opacity
focus
sort
++
' 6 # ./ %
6&&1
( &# 6 ++
' ## 5 # #(# &+
# # ./ %
:1 ./;@ ## *%# ./ %#
D
D
D
D
D
D
D
settext
set
move
remove
transform
xsl-transform
xml2string
G & .2# *%
## # 6 #5% #
( # #(# #
(
-&@ #*# '@ # ./ %@ >/ %@ ' ./ %
%&#
%&#
( # B# # ./ ( .2# # #(# &+
# 1# +
# #6 ##- ' '5
+ #
' 1 5 +
%=
&# # ./ # %5@ +-@ ' +- &+
# 1#
# ./ , # &+
# ' %
'
( &' ' 6+ &#
# ./
' # # ' # # &#
) + %5 6 &+
# #
&#
# ./ ' # # %5 6 # ' # # # &#
', '&# # &+
# # &#
# ./ & # +
%&# # #@ 5 ' # -&3 # ./ 2" '+
# # ##@ 1# 6+& (
'%
#F%
#F&'F &
( &#
% 6
# ./ ' .>/ ' (#
( &+
#@ ' %6+
( #
#+@ #
+ &#-&5 +%&
?= @ $&& !(# !-'
& = Figure 3.5 - Tree Manipulation
$# #+@ # 2 %6+ ./ # +
%&#
# &
#='@ 1##
%( &'
(
G %6+ # +
%&#
6&&1
D
D
D
% &
,
= # b:action="copy" ++
' 6 %5
( '@ s:render 6 %5
(@ +-
(@ #
6+
(@ ' ''
( '
9 &
,
= # b:action="move" ++
' 6 +-
( ' : #
movedown ' moveup ++
';
6
,9 &
,
= # b:action="remove" ++
' 6 +-
( '
%5
( &+
#
s:render #( &&1 5 # %5 &+
# $
&+
# 1 %' 6+ &=
#
# '+
# # # %# # (
& &#
@ 1 + # % &
# # -& % 6 # + &+
# s:render #( < # 6&&1
( #=
# #
D
D
b:destination = #(# # '#
#
:# -
( &+
#; 6 # %5 (
.2# *%
b:mode = %6 1 # '# #' 9
# # -
( &+
#
## # - # -& asfirstchild@ aslastchild@ before@ replace@
replacechildren :# '6&# 6 b:mode # %6';
"
# 6&&1
( *+%&@ #+ 5 & # span &+
# 1 #
# -
#
'& :s:event;@ # #
# # s:render #( %' ' %&' 6# # &=
+
# 1# # ' copyTarget
&',
"4) % &
,
<div>
?= @ $&& !(# !-'
& = <span>
<s:event b:on="command">
<s:render b:destination="id('copyTarget')" b:mode="aslastchild">
<div>
<b>Backbase Powered Web Applications</b>
</div>
</s:render>
</s:event>
Click Here To Copy
</span>
<div id="copyTarget"></div>
</div>
s:render #( &5 '# &' &+
# 6 s:event@ s:tasklist '
s:execute #(
G & # copy ++
' ## % &+
# b:source ## # # b:destination $(
@ # b:mode ## # %6 1 # '# #' &#-
# # #(# '#
#
-
( &+
#
G +- &+
# ' %
'
( &' ' ( # move@ movedown '
moveup ++
' :# &## #1 ++
' +
# # .2# #
' *%
;
move ++
' < # 6&&1
( ## #
D
D
b:destination = #(# # '#
#
:# -
( &+
#; 6 # %5 (
.2# *%
b:mode = %6 1 # '# #' 9
# # -
( &+
#
## # - # -& asfirstchild@ aslastchild@ before@ @ after@
replace@ replacechildren :# '6&# 6 b:mode # %6';
6&&1
( *+%& 6 1 # +- &+
#
&',
"4* 9 &
,
<h3>What are your favorite films?</h3>
Click the films to change the order...
<ol>
<li b:action="movedown" b:target=".">Seven Samurai</li>
<li b:action="movedown" b:target=".">Life is Beautiful</li>
<li b:action="movedown" b:target=".">2001: A Space Odyssey</li>
</ol>
/'
(
$ 1 %%&#
# :2"; +'&C '#='-
<#=%
+'& 1 +'6#
6 # #6 &# !
#' 6 ,5
+&&5 &'
( '# 6(+
# #6 #=
& # # 2" +'& H
5 &' '#@ 5 +
%&# # ./ 5 ''
(
' 6+ # - # '5
+&&5 ' %'# # #
#@ ## ' #5&
6 '+
# /'
( '# &&1 5 # (
3 1 %%&#
# +&& '#
6& ## &5 &'' 1
''
-& 15 # &' '# ( ./
D
D
D
D
s:include = &&1 5 # (
3 1 %%&#
# +&& '# 6& '
# 6& + 6&* &5 "
&'' 6& &'' 1
%' 5 # 2
load ++
' = ' # &' '# 6+ *#
& 6& 1
''@ '
%-' +%&# #& - 1# # &'@ 1
# &' #@ ' 1 #
./ # &'' '# '''
b:buffer = ' # '6 &'
( #& # 66 &+
# &#'@ #
66 #( &5 1 &' 6 ' #&@ 6 *+%& <b:buffer
b:url="data/file.xml" />
s:execute = '6
( # s:execute #( # # #( 6 5 &'' 6& ##
?= @ $&& !(# !-'
& = # 2 # # &'' 6& ##
# #' 6 ## #
# 6&@
(-
( 5 +%&# #& - 1# ' # %%
1
# 6& &'' 4
+ 6+#
@ 2 #$ <>%
G # s:loading #& # (- 6' # # # 5 &'
#
#
( %& 4 + 6+#
@ ! #$ E@%
"
&'
( 4&
$ 5 #
< 1
'-&%
( 2" %%&#
# %# 6
#
&#5 # '=
#
# +'&@ '6
' ./ 6&@ ' # &' # 6& # 5 %%&#
(
# s:include #( "
&' 6& 1&&=6+' ./ 6& ## #
./ ' >/
"
&' 6& #
@ 6 *+%&@ '#@ -@ ' #+ #& :#5&
( ' =
-;@ #5 #
+&& +'& %%
( # "
&' 6& & -5 &( ' #+&- #
+&#%& #' &' 6&
)
( # s:include #( # +# ++
15 # #- ' %& %%&#
'#
' H
# 2 6
' s:include #(@ # &' ' % # #
#
6 '
( # # 6 # %( G &' 6& ( # 6&&1
( 5
#*
&',
"4. +
<s:include b:url="your/data/file.xml" />
##
L#@
&#'
#
'6&#
#&&#
'#5
C:\Backbase\3_1_4\starterkits\@ '+
## # 6 s:include 4 *+%&@
# 4+ ## # starterkits\forms\forms.html ##% 6& # 6&&1
( =
&'
&',
"40 +
<s:include
<s:include
<s:include
<s:include
b:url="../../controls/backbase/default.xml" />
b:url="../../controls/backbase/b-button/b-button.xml" />
b:url="../../controls/backbase/b-window/b-window.xml" />
b:url="forms.xml" />
6# &' # default.xml #
( +&&
%%&#
- '
#5&
( :6 b:panel ' s:loading; ' ' #' &' # #+ #&
6& ## '6
- ' #5&
( 6 # ##
' 1
'1 #&@ ' # &# =
&' # # - ' -
# ' # 6+ ## # 6& &''@
%' ' '' 1
# %%&#
## %
/' ++
'
load ++
' &&1 5 # &' '# 6+ *#
& 6& ' %& # #
# 6
## 6& %6' &#
load ++
' # 6&&1
( ## #
D
D
D
b:url = #
# )!/ #(#
( # '# # &''
b:destination = #
.2# *%
#(#
( # '#
#
'
1 # 6& &'' "6 # *%
#(# +&#%& '@ # 6# &+
#
# ' &# '
b:mode = %6 1 # &'' #
# %&'@ &#- # # '#
#
5 '6&#@ # -& # # replacechildren
H
'1
##
L#@
&#'
#
'6&#
#&&#
'#5
\Backbase\3_1_4\starterkits\windows@ '+
## # 6 load ++
' starterkits\windows\windows.html ##% 6& # 6&&1
( load ++
'
'6
' 1#
&
#( H
5 & &
@ # 6& %6' # b:url ## # &'' # # %( # &# &' 6 # &+
# 1# # ' windowmanager
&',
"42 ,,
<a b:action="load" b:url="window-01.xml" b:test="not(id('window:news'))"
b:destination="id('windowmanager')" b:mode="aslastchild">News</a>
<br />
?= @ $&& !(# !-'
& = <a b:action="load" b:url="window-02.xml" b:test="not(id('window:finance'))"
b:destination="id('windowmanager')" b:mode="aslastchild">Finance</a>
<br />
<a b:action="load" b:url="window-03.xml" b:test="not(id('window:weather'))"
b:destination="id('windowmanager')" b:mode="aslastchild">Weather</a>
<br />
<a b:action="load" b:url="window-04.xml" b:test="not(id('window:movie'))"
b:destination="id('windowmanager')" b:mode="aslastchild">Movies</a>
<br />
66' /'
(
66' &'
( %#%
# &'
( 6 '# #& # ## 6 &+
# &#' 66' &'
( 6& 5 '6 &'
(@ #6 '
( #
#& &'
( #+ G 66' &'
( 6 # ' 1'(# ( # b:buffer
#( 4 *+%&
&',
"4 <b:deck id="buffer_spideck" class="b-deck">
<b:buffer b:url="data/seven.xml" />
<b:buffer b:url="data/2001.xml" />
<b:buffer b:url="data/bella.xml" />
</b:deck>
<b:button b:action="previous" b:target="id('buffer_spideck')">Previous</b:button>
<b:button b:action="next" b:target="id('buffer_spideck')">Next</b:button>
H
' #
66@ # &' # #
# 6 # )!/ '
#' 5 # b:url #=
# # 1
# &#' 6 # 6# #+ ' # #
# 6 # 6& ' ++5 4 + 6+#
# ' 1'(#@ - #$ =E% 66' &'
( # &' 6& ## - # s:execute #( # '+
# #
>/ ##
"6 5 # # b:htmlentities="true" ## # # body #(@ 5 '#5% 6
-' ./ '+
# &-' "6 # '#5% '&' # -'
./ 6&@ #
'' '#5% ''' ## 6
&& 6& :# entities.xml 6& # # 6 5 #&&#
'#5; ##
( +&& %6+
%
&#5 :# &# *# <# (
( # # -;@ #6 5 &' &5 # 1
5 =#
'' ./ ## :# '6&# 6&;
+##
( 4+
"
@ 5 +# 6+ ( # #
'' >/ 6+ +
@ (
=
&' 6+ +
"
# @ #
'' >2 ' 6 ++
=
#
#1
# 2 ' # 1 - ( # #
'' >/ action ' method
## # # '# %#-&5 # + 6 # 6& # ' # 6+ #
# #@ '
# +# +#' :post get; # '-
#( 6 ( 6+ +
@ # ## #
'' >/ 6+ =
+
@ ## # 6+ +
'
( $B* <# G #6 =
# # &# 6 # 6+ +
# # # %(@ # #
1# >/ 6+
+
## &# 6&& %( 6
#
#
# 6&&1
( B# ' ( 6+ +
D
D
D
D
D
!! ." 2' ' #$ <E%
2' ' #$ <E%
- 2 #$ <>%
* '
''! #$ <D%
! , #$ <@%
?= @ $&& !(# !-'
& = #
'' >/ 4+ +
"
@ 5 #
'' >/ 6+ +
1 # +# # 1 # ( # # %( 1
# 6+ '# %' <5 %+# 20 '#@ '%
'
( # 6+ +#' 6+ & ' 1 *#&5 =
+& >/ 6+@ 6 *+%&
&',
"4 1 ; +, 1,
<form id="main" action="response.php" method="post">
<table>
<tr>
<td>Name</td>
<td>
<input name="name" type="text" size="40" />
</td>
</tr>
<tr>
<td>Data</td>
<td>
<textarea name="data" />
</td>
</tr>
</table>
<input type="submit" value="Send" />
</form>
4 # +# ##
@ 5 # <input type="submit" value="Send"/>@ <button type="submit">Send</button>@ #5 # 1 # +
'6&# #5% 6 %# &+
# #*#@ ' # '6&# #5% 6 ##
&&5 +#@ &#( # -5 6+ 1 # 1 "# #6
++
'' # &15 %65 # #5% *%&#&5 6 5 ( # #
'' >/
&+
#
4+ +
'6
=
&' 6+ +
@ 5 +# '6
# 6&&1
( ## # # form &+
#
D
D
b:destination = .2# ##+
# ## #(# &+
# # ./ # #
%65 # 1 %
# 5 ./ '+
# # &# #' '#
#
6#
# 6+ #&6@ # 5 &+
# # '+
#
b:mode = #& 1 # &# 6 # <# #'@ &#- # # (-
b:destination 2 & -& C after@ asfirstchild@ aslastchild@ before@
replace :# '6&#;@ ' replacechildren
"6 5 ' # %65 b:destination 5 form@ #
'' >/ 6+ +##' ' 78 6+
& b:button #& ## 5 # +# # 6+ ## '=
6&# #5&
( %%&'@ #
''3
( # ##
O %%
1 b:button < ## 5 &(#&5 '66
# ## # # # #
'' %# #=
#
#5%
D
D
b:action="submit" = # #
## #(( # +##& %
b:target R < .2# *%
# '
#65 # 6+ ## +##'
:&&5 # %
# 6+;
6&&1
( *+%& 6 6+ +
&',
"4" +, 1,
<form id="main" b:destination="." b:mode="replace" action="response.php" method="post">
<table>
<tr>
?= @ $&& !(# !-'
& = <td>Name</td>
<td>
<input name="name" type="text" size="40" />
</td>
</tr>
<tr>
<td>Data</td>
<td>
<textarea name="data" />
</td>
</tr>
</table>
<b:button b:action="submit" b:target="id('main')">Send</b:button>
</form>
H
D
D
D
b:destination="." '6
## # %
#' # # #*#
' :# 6+;
b:mode="replace" '# # %
%& # 6+ &+
# # ./
#
b:button b:action="submit" b:target="id('main')" +# # &+
# 5
#(##
( # &+
# 1 id main :# 6+;
G & #(# # 6+ ( &#- .2# *%
@ 6 *+%&
../../form@ 5 ( "ancestor::form[1]"@ 1 ## 5 (# #
%
# 6+ +## 1 +
5 &+
# = #1
G #&&5 b:action="submit" b:target="id('main')" 5 &+
#
>1-@ 5 +# # # >/ input type="submit" &+
# #1 #
6+ # #1 + %%& # # >/ button &+
# ## & 6<
#&5
'6&# +# #
,6
( !%
4&
$ %
6& 2 6& ## # # %
1
6+ +##' ./ #
'' < ## # '+
# #
&5 # ' 1 '6
#
+% # 6& ' # ' #
./ '&#
@ ,0G2
'&#
6&&1
( *+%& 6 %
6& ## ' 1
6+ +##'
H
5 +# # 6+@ # &# 6 # <# %& # &+
#@ 6#
# form
&+
#@ ## #(#' ( # b:destination ## # &# 6 6+ =
+
+# .>/ ./ 4 *+%&
&',
"4# 6
+
<div id="formresponse" xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://www.backbase.com/b" xmlns:s="http://www.backbase.com/s">
<p>Thank you for entering your details...</p>
</div>
%
6& +# &' +% '&#
6 # .>/ ' ./
&+
# # #
"# (' %# # '& # .>/ ' ./ s: ' b:
+% # # &+
#@ -
6 # 6& ' # #&5 5 6 #
&+
#@ # &+
# ''' &# :7# ## 46*@ # 2 ''
./ +% # # ./ -
6 #5 # '&' >1-@ "
#
#
*%& # +% # '''@ #6 # '&
( # +% # &' # 6&;
- %
' 1# '#@ 1# # *+%& -@ 1# ##
#
5 '6
( # s:execute #( # # #( 6 5 %
6& s:execute ##
# 2 # # &'' 6& ##
# #' 6 ## '# 6&@ (-
( 5
+%&# #& - 1# ' # %%
1
# 6& &''
4 *+%&@ 1
6+ +##'@ 5 6#
1
# # &- # #6 # '
?= @ $&& !(# !-'
& = 6+ # @ ( 6 *+%& +'& '&(@ 1# # 6+ 1 6&&5
+##' 5 '6
( +'& '&( # %
## #@ 6+#
# &#
' # # # 6+ 6&&1
( %-' *+%& 6 '6
=
( %
6& ( s:execute :# %
'' # &# &' #
body &+
#;
&',
"4( 6
+
D
'
<s:execute xmlns:s="http://www.backbase.com/s" xmlns:b="http://www.backbase.com/b"
xmlns="http://www.w3.org/1999/xhtml">
<s:render b:destination="/*" b:mode="aslastchild">
<b:modal id="response-modal">
<b:modalhead>Form response</b:modalhead>
<b:modalbody>
<div>We have received your form. Thank you for your order.</div>
<br />
<div>Currently when you close this modal window, the form stays visible. In a
real
world application you would
use a command to overwrite
the form when the form was succesfully submitted.</div>
<br />
<br />
<br />
<center>
<b:button b:action="trigger" b:event="close"
b:target="ancestor::b:modal[1]">Close</b:button>
</center>
</b:modalbody>
</b:modal>
</s:render>
<s:task b:action="select" b:target="id('response-modal')" />
</s:execute>
s:execute #( #
&5 *#
#( ' *# # &'
++'#&5 6# ( %' H
5 '6
s:execute # # 6 %
6& &'' 5 6+ +
: load ++
';@ # '# 78 #' # #
%6' '#
#
# *#' ++'#&5 G +# #6 # s:render
#( # %65 1 # '# ' # %&' ( # b:destination ' b:mode
## #
)
( # +# ++
'
H
6+ +##'@ submit -
# #((' # 6+ &&1 5 # J
=
#%#J # 6+ +
' %6+@ 6 *+%&@ 6&' -&'#
6 +##
(
# 6+ %6+ 6&' -&'#
@ # %= +##& #
@ 5 ' # '6
-
# '& 6 # submit -
# G +# '' #+ ' # submit -
#
'& ## -&'# # 6+ ' '#+
1# # 6+ -&' ' #
# # - -
# '& +# & &' send ++
' # #&&5 +#
# 6+ 6# # -&'#
#
%&
6&&1
( *+%& 6+ # 4+ ## L# &#' # '6&# =
#&&#
'#5 C:\Backbase\3_1_4\starterkits\forms\form.html 6+
b:behavior ## # '# ## # 6+ - &&' form@ '6
' #
forms.xml 6&@ ## '6
-
# '& 6 # submit -
#
&',
"4) +, 1,
<form action="response.xml" b:destination="." method="post" b:behavior="form"></form>
submit -
# '& # forms.xml &' send ++
' ## #(('
1
# &# 6 # b:test 6& :6+ -&'#
+%&+
#' # 6+;
&',
"4* 1, &9
;
<s:behavior b:name="form">
<s:event b:on="construct"></s:event>
<s:event b:on="submit">
<s:choose>
?= @ $&& !(# !-'
8
& = <s:when b:test=".//b:step">
<s:task b:action="send" />
</s:when>
<s:otherwise>
<s:task b:action="trigger" b:target=".//input" b:event="validate" />
<s:choose>
<s:when b:test="not(.//input[@b:valid][@b:valid != 'true'])">
<s:task b:action="alert" b:value="valid" />
<s:task b:action="send" />
</s:when>
<s:otherwise>
<s:task b:action="alert" b:value="invalid" />
</s:otherwise>
</s:choose>
</s:otherwise>
</s:choose>
</s:event>
</s:behavior>
'
( ./ # # -
2 & ' ./ # # - ' ./ # # -@ #(# ./ &=
+
#@ # 6 &+
#@ ' # send ++
' # &+
# ' && '
'
(
&+
# -#' # ./ ' # ( # HTTP POST ++
' 1# # text/
xml '
( $
./=
&' - #
&' # ./ '#&5 # ./ '=
+
# :# &#
6 # - 6& '6
' ( # b:url ## #;
#
#' 1# # send ++
' '%
' 1 &+
# #(#'
send ++
' # b:source ## # # %65 1 &+
#@ &+
#@
' # # "6 form &+
# #(#'@ # 6+ +##' # '6&# 6+
+
"6 5 # &+
# #(#'@ # &+
# # ./
&&1 5 # #(# +&#%& ' :
#
( +&#%& # ';@ # (
=
#' ./ 1%%' b:backbase #( # # -&' ./ 4 *+%&
&',
"4. 1
1
9
<table>
<s:event b:on="command">
<s:task b:action="send" b:source="tbody/tr" b:url="receiveXML.php" />
</s:event>
<thead>
<tr>
<th>Movie</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Seven Samurai</td>
<td>Drama</td>
</tr>
<tr>
<td>The Godfather</td>
<td>Crime</td>
</tr>
</tbody>
</table>
" -' # - &',
"40 9
<b:backbase>
<tr>
<td>The Seven Samurai</td>
<td>Drama</td>
</tr>
<tr>
<td>The Godfather</td>
?= @ $&& !(# !-'
9
& = <td>Crime</td>
</tr>
</b:backbase>
?= @ $&& !(# !-'
& = %# = $5
*#
$5
*#
-
# '' ##-#5 # 5 2" 1
# ' +#
( -
# # %&
:&#( # & + -
# ## # '#&5 ' 5 # @ 6 *=
+%& # construct -
# 6 1
%( ##'; "
@ 5
## -
# # 5 &+
# # )" G +# #
# -
# '& #
'#+
1# # %& 1
# -
# #((' $
-
# '& #
6 *#
( ++
' "# '& # -
# 5 *#
( ++
'@ 6
++
'
$ %%&#
# ) +9 5#+ -
# ## #((' *#' ) ) %# #' 5 '6&#@ #6@ +&#%&
++
' #' #- # # + #+
"# +%#
# # &3@ 1-@ ## # ++
' '6
' 1#
-
# '&
*#' 5 '6&# ) ) H#
#' #6@ # ++
' @
5 '6&#@ *#' <
#&&5 :
5 ;
$&& ++
' & #(( -
# 6 # + + 4 *+%&@ &# ++
'
#(( &# -
# 4 + 6+#
@ - +,
.! #$ D>% G -& # '6&# 5
F5
++
' *#
( # 6&=
&1
( ./ #(
D
D
D
D
s:lock #( = 5 & # % #' %6' #(# &+
#@ 1 -
# #((' <' ' *#' 5
&5 "6@ #
+
#+@ -
# #((' &+
# ## ' # - & %%&'@ #
-
# *#' 5
&5 :# & &5 %%& # #(# &+
#
b:async ## # = 1#
#'@ 5 %65 ## ++
' *#
5
&5 5 ##
( # ## # b:async="true"
s:parallel = %65 ## s:fxstyle ++
' %&&&
s:sequential = %65 ## s:fxstyle ++
' <
#&&5
"
# 6&&1
( *+%&@ # - '6
-
# '& 6 # select@ ' 6 # deselect -
# #(( 1 ++
'@ *#' ) ) #
1
#' H#
# -
# '&@ # ++
' *#' ) )
Example 4.1 - Asynchronous Execution
<s:behavior b:name="diveffect">
<s:event b:on="select">
<s:fxstyle b:background-color="#ffff00" b:time="5000" b:async="true" />
<s:fxstyle b:width="~50px" b:height="~50px" />
<s:fxstyle b:left="~50px" />
<s:fxstyle b:left="~50px" />
</s:event>
<s:event b:on="deselect">
<s:fxstyle b:width="~-50px" b:height="~-50px" />
<s:fxstyle b:left="~-50px" />
<s:fxstyle b:left="~-50px" />
</s:event>
</s:behavior>
<p>
<a b:action="select" b:target="id('changingdiv')"> Click
Here to Start</a>
</p>
<div>
<div style="position: relative; background-color: #0000ff; height: 50px; width: 50px;"
b:behavior="diveffect" id="changingdiv"></div>
<p>
<a b:action="deselect" b:target="id('changingdiv')">
Click Here to
End</a>
</p>
</div>
H
5 & # &
J& > ##J@ # select ++
' #((' #
?= @ $&& !(# !-'
& = div &+
# id="changingdiv"@ 1 #
#(( # -
# '& '6
' #
- select -
# '& 5
&5 ( & :# s:fxstyle # b:async="true" ## #;@ ' # # fxstyles # ( 3 ' %#
*# 5
&5 66# ## # &+
#E (
' & (
(
-
1& # ( 3' ' +-'
H
5 & # &
J& > 'J@ # deselect ++
' #((' #
div &+
# id="changingdiv"@ 1 #
#(( # deselect -
# '&
'6
' # - 6*#5& *#' 5
&5C #
#
66#
' # ' 6 # *# ##' :"6 # 5
#
#
66# #&& =
( *#'@ -
# '&#' ##@ # &+
# 1&& #&& % (
( &;
4 + 6+#
66#@ "
#$ G;E%
&
,
D H
5 '& #
# 5
&5@ # &# 6 #
1 #' (
' 5 # 2 6@ 5 +# 6&&5 ' 1# #
%
@ +
( 6+ # s:fxstyle@ s:task@ s:parallel@ s:sequential '
s:event #( *#
'' 1# # b:async ## #@ 6&5 (
' 5 # 2
4 *+%&@ 5 set ++
' 5
&5 &
( 5 1
## # #' # + % # #(#
( &+
# 5 # %
# &# 6+ # ++
' = # 1 ## # -&
<
#& $
' 2&&& 2
(
G %65 1# # 2 # s:fxstyle ++
' %&&&@ <
=
#&&5 :
# #+;
"+%&#&5@ s:fxstyle ++
' *#' <
#&&5 1
5 # %#
s:fxstyle #( 6 #5& ## # 5 1
# # +#@ ## 5 %& #+ 6# # #@ # #
#
5 4 *+%&
&',
#4 1
F
!
<s:event b:on="select">
<s:fxstyle b:font-size="20px" />
<s:fxstyle b:color="#33FF33" />
</s:event>
G & +%&#&5 *# s:fxstyle ++
' %&&& 5 '6
( +&#%&
#5& (& s:fxstyle #(@ 1 && # #5& #
#
+#' %&&& 4 *+%&
&',
#4" 1%
&
<s:event b:on="select">
<s:fxstyle b:font-size="20px" b:color="#33FF33" />
</s:event>
G *%&#&5 #& 1# s:fxstyle :
' s:task #(; *#' %&&&
<
#&&5 5 (%
( #+ #1
s:sequential s:parallel #( "
# 6&=
&1
( *+%&@ # 6# #
#
6 (
( # 6
#=3 ' & ( %&=
&&@ ' 1
+%&#' # 6
#=3 ' # & #
# # (
& -& =
<
#&&5
&',
#4# 1
F
!
!
<s:event b:on="command">
<s:parallel>
<s:fxstyle b:font-size="20px" />
<s:fxstyle b:color="#ff0000" />
</s:parallel>
<s:sequential>
<s:fxstyle b:font-size="12px" />
<s:fxstyle b:color="#0000ff" />
</s:sequential>
</s:event>
7# <
#& # '6&#
-@ 5 +# # s:seqential #( 6+
?= @ $&& !(# !-'
& = # s:fxstyle #(
/
( 4 *%&# 5
3#
s:lock #( ' 6 #' &
( # %-
# #1 -
# *#
( +&#
=
&5@ 6
( # -
# # *# <
#&&5 G & 5 &+
# # '=
+
# # ( # b:target ## # *+%& &1 '+
## # %
%&
' &
(@ ' # $5
++
' *#
6 -
# *#
6&&1
( &# ' # &+
# '6
' # *+%& &1
D
D
D
- = # lock-move - #
#1 -
# '&@ # '&
# moverright -
#@ ' # # # moveleft -
# moveright -
#
'& & ## &#- .2# #(#
( # #(# &+
#
.>/ &
&+
# = # 6# a #( #
b:action #(( ++
' ## ' # #(( # moveright -
# b:target="~+table[1]/tbody/tr" .2# *%
## #(#@ ##
( 6+ # #*# ' :# a &+
#;@ #
6# &
( &+
# ## # & &+
#@ ' &# && # # & 1 &+
# # # & '5
.>/ # & &+
# = # 6# # & #
6 1@ ' 1 #
lock-move - ' # & # ## %@ +%#5 # & ## #
'#
#
#(# 6 # moveright -
#
Example 4.5 - Locking
<s:behavior b:name="lock-move">
<s:event b:on="moveright">
<s:lock b:target="..">
<s:task b:action="move" b:source="." b:destination="../../~+table[1]/tbody"
b:mode="aslastchild" />
<s:fxstyle b:cancel="false" b:time="500" />
</s:lock>
</s:event>
<s:event b:on="moveleft">
<s:task b:action="move" b:source="." b:destination="../../~-table[1]/tbody"
b:mode="aslastchild" />
<s:fxstyle b:cancel="false" b:time="500" />
</s:event>
</s:behavior>
<a b:action="trigger" b:event="moveright" b:target="~+table[1]/tbody/tr" style="position:
absolute;">Move rows to the right (locked)</a>
<a b:action="trigger" b:event="moveleft" b:target="~+table[2]/tbody/tr" style="position:
absolute;left:300px;">Move rows to the left (not locked)</a>
<table class="filmTable" style="position: absolute; top:25px;">
<thead>
<tr>
<th style="width: 150px;">Movie</th>
<th style="width: 60px;">Genre</th>
</tr>
</thead>
<tbody>
<tr b:behavior="lock-move">
<td>The Seven Samurai</td>
<td>Drama</td>
</tr>
<tr b:behavior="lock-move">
<td>City of God</td>
<td>Drama</td>
</tr>
<tr b:behavior="lock-move">
<td>Donnie Darko</td>
<td>Drama</td>
</tr>
<tr b:behavior="lock-move">
<td>The Godfather</td>
<td>Crime</td>
</tr>
</tbody>
</table>
<table class="filmTable" style="position: absolute;left: 300px; top:25px;">
?= @ $&& !(# !-'
& = <thead>
<tr>
<th style="width: 150px;">Movie</th>
<th style="width: 60px;">Genre</th>
</tr>
</thead>
<tbody />
</table>
moverright ' moveleft -
# *#' 6&&1
& # J- 1 # # (# :&';J &
# #(( # moverright -
#
-
# #(# # # & 1 # 6# # & :# #(# &+
# #6
#
'=#;
1 # # & #(( # moveright -
# '&@ '6
' # -
lock-move 6@ 6 1@ %# #' #' # '& #
-
# >1-@ # -
# '& & # tbody &+
# :
( .2#
#(#
(;@ #' 5
&5= #' +# +%&# 6 #
*# #' ##'
moveright -
# '& # # 6# # & 1 ' # # # # &#
'(
#' 5 # b:destination ## #@ # @ ../../~+table[1]/tbody
+
# -(# 6+ # #*# ' :# tr &+
# # 6# # &; % #1
&-& # # table &+
#@ 6
' # 6# &
( # &@ ' # # tr &+
#
# &# &' # tbody
H
# 6# # & 1 +-'@ # *# # -
# '& # *# tr
&+
#@ ' $
fxstyle '6
' # -
# '&@ '6
( #+ 6
+&&
'@ ## '&5 # '&
( 6 # -
# 66
#&5 6 5 # 1 -
# '& #((' '-'&&5@ ' +%&#' 6 #
*# -
# #(('@ #
( +#
66#
H
5 #(( # moveleft -
# '&@ *#&5 # + %%
#
moveright -
# '& 6 1@ %# #' #' # '& #
-
# >1-@ & %6'@ # *#
6 -
# 5
= && # -
# %' # # + #+ #
( 66#
## # 1 +-' &@ 1
6# #5 && +-' '-'&&5
$ #
(
G # # b:cancel ## # -& # false # %-
# # 6+ ( & #
#% s:fxstyle 66# H
5 # b:cancel="true"@ # '6&#@ # #%
# 66# 66# #%%' # # # &#
?= @ $&& !(# !-'
& = %# = #
( $%%&#
/5#
,6
( 2##
(
2##
( '#+
# &5# 6 # #6 G '6
%##
( ( +& .>/ #( <table>@ <div> ' <span>
G '6
'-
' %##
( ( # ./ #( b:panel ' b:deck@
' ( # &5# &
# #& b:window@ b:spacer@ b:modal@ b:box@ '
b:tile
2
&# ' 2
&
2
&# &&1 5 # '-' % # 1 &+
:
( b:row b:cols ## # $ %
&# #
6 %
&C 1 &+
%
&# %
#' 5 %
& G '6
# #
# # %
&
"
# 6&&1
( *+%&@ %
&# '6
' ## #
# 1 6#
:+%
5 >'
(; ' #' :## 6+#
; 1@ #
%
& ' 1
#' %
&# ## '6
# &+
@ ' 6 # &+
:7-(#
#
@ #
# #
@ ' #*# #- 6+#
#
; '6
' ( %
&
+
(4 !
1 ' &+
- # 6*' 1'#@ #5 - &#- 1'# (-
%
#( 6 # #&5 -& & 1'# 6 # %
&# %
# G %65
# 6&&1
( # 6 ++
# 6 1 ' &+
%
&#
D
D
D
D
D
% :%
#(; # &#- # # %
# &+
#
em ' ex # &#- # # '
( #*#
px :%*&; # &#- # # &#
pt :%
#; ' pc :%; %
# #
in@ cm ' mm :
@ #+# ' +&&+#; &
(# #
$&#
#-&5@ %
& 6&& % # +
( -& & % ( # 1&'' #
:S; (
G +# %65 && -& 6 6# 1&'' :#; ( # +
# 6 ++
# 4 *+%&@ b:cols="50px 100px *" -&' # 70 cols="50%
100px *"
?= @ $&& !(# !-'
& = G &5 '6
1 &+
@
#' %
&#;
# #
#@ 1#
%
&# :
#'@ '6
"
# 6&&1
( *+%&@ # # %
&# # 1C # #% 1 %*&@ #
##
1 %*&@ ' # +''& 1 # % # +
( % 1 # %
&# '6
' ( %
& +''& 1 #
#' %
&# ## '=
-' # 1 # # &+
C # 6# &+
8 %*&@ # &# &+
%*&@ ' # +''& 1 # % # +
( %
&',
(4 /
!
<b:panelset b:rows="40px * 20px" style="color: white;" b:minwidth="300px"
b:minheight="200px">
<b:panel style="background-color: #A8DAFF; color: #666; padding: 5px 0 0 5px">Company
heading</b:panel>
<b:panelset b:cols="80px * 130px">
<b:panel style="background-color: #E3F5A5; color: #666; padding: 5px 0 0
5px">Navigation section</b:panel>
<b:panel style="background-color: #64747F; color: white; padding: 5px 0 0
5px">Content section</b:panel>
<b:panel style="background-color: #FDF260; color: #666; padding: 5px 0 0 5px">Context
sensitive information</b:panel>
</b:panelset>
<b:panel style="background-color: #7D8FCE; color: white; padding: 5px 0 0 5px">Status
information</b:panel>
</b:panelset>
"
#
# *%& %6+ &1 6 # &+
# 6 %
&# - # #5&
## # height: 100% &- #@ # # %
# &+
#@ ## - T
(# T 1'#@ # overflow: auto overflow: hidden
,
$ ' &+
# ## '%&5 &5 6 # &'
# #+@ 1# # ++
%% 6 #
( # ' 13'=& #6 +%&+
# +%& # =&
'
D
D
D
# # #
6 # ' :&&5 div #( %# 6&; #
&' &+
# 6 # ' 06 # #
# '6&# #
#
## %% 6# 1
# ' #&&5 ''
# &
##
# 6&% #( # 'C ' '6
## # &@
3@ %#
(
$'' ++
' # # ##
# '' # -(#
6
#
&#5 6 #
' &' ++
' 6 *#@ %-@ &# %(@ 6# %(@
&#
@ '&#
@ ' &',
(4 /
/
<div>
<b:deck class="simpleDeck">
<div>1 This is a deck ...</div>
<div>2... a widget to create ...</div>
<div>3... multi-paged documents.</div>
</b:deck>
<a b:action="previous" b:target="../b:deck">&lt; Previous</a>
<a b:action="next" b:target="../b:deck">Next &gt;</a>
</div>
&' # #
# 6 '@ 1 #
#' %# 6&@ 5 # s:include #(@ &#( # # ''-
#( ## # 6& &'' +=
+'#&5 '&5 # &'
(@ 5 #' # b:buffer #( 4 + 6+=
#
66' &'
(@ ! ! #$ <=%
, &' &+
# 6&&1 # ## ( 6 5# # ' ' &# '&# #+&- 1
#5 &#' '&#' ( # b:followstate &=
#
% &&1 5 # '& +%&* &#
#1
'66
# #6
#& 18
#$ G;5%
?= @ $&& !(# !-'
& = #& 0--1
# #=6=#= *@ & #6 #& ##
%&# ++
%##
' - 6&&1
( &&##
%-' -=
-1 ' #(3#
6 # #&@ 1 ' ' # 6&&1
( #
+
(4 89
9
5
G ' # # # b:controlpath ## # # body #( # %65 # #& 5
1
# # 4 + 6+#
@ #$ D<% ,6
( /5# #&
?= @ $&& !(# !-'
& = ) # &5# #& # '#+
# &5# 6 # #6 G '6
'-
' %##
( ( # ./ &
# #& b:box@ b:modal@ b:spacer@
' b:window
*
$ * #& +%& +%
# ## &5 #
&
&+
# G (- #
(# 1'#C 6 3 %6'@ # 3 '-' 6+ # #
# G #5& # #
# 6 # * ( # b:style ## #
+
(4" '
&',
(4" ' <b:box style="width: 250px;" b:style="background-color: #CCFF00">
cult following among younger audiences."</b:box>
"Scarface developed a
'&
+'& #& %%=% 1
'1 H
%
'@ # # ## 1# #
# 6 # '+
# #& # +'& 1
'1 &' G %
# +'& '&( 5
#((
( :
( # trigger ++
'; # open -
#@ ' & # 5 #((
( #
close -
# '& & '6&# ##
# #% (#=
' 6 &
(
# 1
'1
+
(4# &',
(4# <div>
<p>
<a b:action="trigger" b:event="open" b:target="id('modal')">What is The Godfather
about?</a>
</p>
<b:modal id="modal">
<b:modalhead>The Godfather (1972)</b:modalhead>
<b:modalbody>
<p>The Godfather is a film adaptation of the novel of the same name (see The
Godfather novel) written by Mario Puzo, directed by Francis Ford Coppola and starring Marlon
Brando and Al Pacino.</p>
<a b:action="trigger" b:event="close" b:target="id('modal')">Close the Modal</a>
?= @ $&& !(# !-'
8
& = </b:modalbody>
</b:modal>
</div>
%
b:spacer #& - & &+
# ## ' # %# &+
# "# b:width ' b:height ## # ## %6 %
#( %*& -& % &&1
5 # %# #+ # %*& %
&',
(4( 1
<p>The following text has spacers inside.
<br />
Hello
<b:spacer b:width="200px" b:height="150px" />
there!
<b:spacer b:width="3em" />
How
<b:spacer b:width="10px" />
are
<b:spacer b:width="2px" />
you?
</p>
H
'1
$ b:window #( # 1
'1 ## 5 +-@ +& # 1
'1 '#% %=
%&#
&' #( b:windowhead ' b:windowbody '6
# ' ' '5 6
# 1
'1
+
(4( @5
"
# 6&&1
( *+%&@ #1 1
'1 #'@ 6 1 @ 5 '6&#@ %
'
##% 1
'1 #
##
# #% (#=
@ '6
' #
b:windowbuttons ## #@ 6 &
(@ +
+3
(@ ' +*+3
( # 1
'1 /
&+
# '6
' ## &&1 5 # %
# 1
'1 # trigger ++
' #((
b:event="open" # %
# 1
'1 %6' ( .2# *%
:b:target="id('win1')";
?= @ $&& !(# !-'
9
& = &',
(4) @5 <div style="position: relative; height: 100%; overflow:visible; border : 1px solid red;">
<a b:action="trigger" b:event="open" b:target="id('win3')">Open window 1</a>
|
<a b:action="trigger" b:event="open" b:target="id('win4')">Open window 2</a>
<b:window id="win3" b:open="true" style="top:100px; left:20px;">
<b:windowhead>Life Is Beautiful (La Vita è Bella)</b:windowhead>
<b:windowbody>A 1997 Italian language film which tells the story of an Italian
Jew...</b:windowbody>
</b:window>
<b:window id="win4" b:open="false" style="top:150px; left:100px;">
<b:windowhead>2001: A Space Odyssey</b:windowhead>
<b:windowbody>An influential science fiction film directed by Stanley Kubrick,
notable for combining episodes contrasting high levels of scientific and
technical realism with transcendental mysticism.</b:windowbody>
</b:window>
</div>
,6
( 7-(#
#&
) # -(#
#& # '#+
# -(#
& <+
# &5# 6
# #6 G '6
-(#
( # ./ &
# #&
b:contextmenu@ b:menubar@ b:navbox@ b:navpanel@ b:sidebar@ b:tabbox@ b:taskbar@
b:toolbar@ ' b:tree
#*#+
#*#+
#*#=
#- +
## %%=% 1
-
#@ #5%&&5 (#=+ ##
-
#@ #((' &+
# G # # +
5 #
(
b:contextmenu #(@ ' 5 '6
1 # +
( # b:contextmenurow
#( b:contextmenurow #( b:label ## # ## '6
# +
& &@ '
%#
&&5 b:shortcut ## # ## '' & & # '
# ## 5@ 6 #
+
:5 +# +%&+
# # 5 ( # s:keys #(;
Figure 5.6 - Backbase Contextmenu
"
# 6&&1
( *+%&@ (#=+ ##
:rmbup; -
# '& '6
' ## #=
(# # #*# +
!(#=& # '
( &+
# # -1 # %%=% +
Example 5.7 - Creating a Contextmenu Control
<div>
<h1>contextmenu</h1>
<s:event b:on="rmbup" b:bubble="false">
<s:task b:action="select" b:target="id('contextmenu')" />
<s:task b:action="position" b:type="place" b:target="id('contextmenu')"
b:destination="." b:position="at-pointer" />
</s:event>
<b:contextmenu id="contextmenu">
<b:contextmenurow b:label="Open" b:shortcut="ctrl + o" />
<b:contextmenurow b:label="Close this file" />
?= @ $&& !(# !-'
& = <b:contextmenurow b:label="Sub">
<b:contextmenu>
<b:contextmenurow b:label="Save" b:shortcut="ctrl+s" />
<b:contextmenurow b:label="Something" />
<b:contextmenurow b:label="Submenu">
<b:contextmenu>
<b:contextmenurow b:label="Something" />
<b:contextmenurow b:label="Something" b:shortcut="ctrl+a" />
<b:contextmenurow b:label="Something" />
</b:contextmenu>
</b:contextmenurow>
<b:contextmenurow b:label="Something" b:shortcut="ctrl+z" />
</b:contextmenu>
</b:contextmenurow>
<b:contextmenurow b:label="Sub">
<b:contextmenu>
<b:contextmenurow b:label="Save" b:shortcut="ctrl+s" />
<b:contextmenurow b:label="Something" />
<b:contextmenurow b:label="Submenu" b:disabled="true">
<b:contextmenu>
<b:contextmenurow b:label="Something" />
<b:contextmenurow b:label="Something" b:shortcut="ctrl+a" />
<b:contextmenurow b:label="Something" />
</b:contextmenu>
</b:contextmenurow>
<b:contextmenurow b:label="Something" b:shortcut="ctrl+z" />
</b:contextmenu>
</b:contextmenurow>
<b:contextmenurow b:label="Exit" b:shortcut="alt+F4" />
</b:contextmenu>
</div>
<div b:dragreceive="true"></div>
4 + 6+#
# +%&+
#
( 5@ () #$ @5% #& '%&5 +
+
5 %%&#
"# &&5
%
#' # # #% 6 # 1 %%&#
@ # 5 %#
# 51
+
(4* 6&&1
( *+%& ' # 5
#* # ## +
&',
(4. <s:include b:url="../controls/backbase/b-menubar/b-menubar.xml" />
<div style="width: 100%; height: 100%; position: relative">
<div style="border-color: #b8ced7; border-width: 1px 1px 0 1px; border-style: solid;
height:23px;overflow:hidden;">
<b:menubar>
<b:menurow b:label="File">
<b:menupopup>
<b:menupane>
<b:menurow>
<b:menucell>Open</b:menucell>
</b:menurow>
<b:menurow>
<b:menucell>Save</b:menucell>
</b:menurow>
<b:menurow>
<b:menucell>Export</b:menucell>
?= @ $&& !(# !-'
& = <b:menupopup>
<b:menupane>
<b:menurow>
<b:menucell>To gif</b:menucell>
</b:menurow>
<b:menurow>
<b:menucell>To png</b:menucell>
</b:menurow>
</b:menupane>
</b:menupopup>
</b:menurow>
<b:menurow>
<b:menucell>Save as ...</b:menucell>
</b:menurow>
</b:menupane>
</b:menupopup>
</b:menurow>
<b:menurow>
<b:menucell>Edit</b:menucell>
<b:menupopup>
<b:menupane>
<b:menurow>
<b:menucell>Copy</b:menucell>
</b:menurow>
<b:menurow>
<b:menucell>Cut</b:menucell>
</b:menurow>
<b:menurow>
<b:menucell>Paste</b:menucell>
</b:menurow>
</b:menupane>
</b:menupopup>
</b:menurow>
</b:menubar>
</div>
</div>
# +
#&@ 5 +# '' s:include # # %# 6 # #&@
6 *+%& s:include b:url="../controls/backbase/b-menubar/b-menubar.xml"
7- *
7- * #& 6& 6 1
( ' '
( &-& 6 =
-(#
' 6#
'#& $ b:navbox #
(& b:navhead ' b:navbody &+
#C &
( #
' *%
' &&% # '5 &+
# 1 # #
# '6
' - * & &-&@ +
( ## #5 %
#' # # ' %5
# # 1'# 6 7- * '(
' 6 '5 -(#
& %%C
- * %# &+
# ## #5%&&5 #
''#
& 6+#
&&5
&#' # # #
?= @ $&& !(# !-'
& = +
(4. 79'
&',
(40 79' <div style="background-color:#3399FF; width: 280px; padding: 10px; height: 300px">
<b:navbox style="width: 250px;">
<b:navhead>System Tasks</b:navhead>
<b:navbody>
<a>View System Tasks</a>
<br />
<a>Add or remove programs</a>
<br />
<a>Change a setting</a>
</b:navbody>
</b:navbox>
<br />
<b:navbox style="width: 250px;" b:open="true">
<b:navhead>Other Places</b:navhead>
<b:navbody>
<a>My Network Places</a>
<br />
<a>My Documents</a>
<br />
<a>Details</a>
</b:navbody>
</b:navbox>
<br />
<b:navbox style="width: 250px;">
<b:navhead>Details</b:navhead>
<b:navbody>
<a>My Computer</a>
</b:navbody>
</b:navbox>
</div>
7-%
&
7-%
& #& ## # *%
' &&% 5 &
( # ' '
' 6 # +
-(#
6 1 %%&#
-%
& + # 6&&
# (# ' 1'# 6 # %
# &+
# b:navpanelbody #
# #
# $
b:navpanel #5%&&5 +&#%& b:navpanelhead ' b:navpanelbody &+
#@ &5
6 1 &#' # 5 #+ &#
( #+#&&5 '&# # #=
?= @ $&& !(# !-'
& = +
(40 79
"
# 6&&1
( *+%&@ # -%
& #
# -%
&' ' -%
& '=
G # b:state ## # # '6
1 6 # ' %
' ##%
&',
(42 79
<div style="height: 500px; width: 200px">
<b:navpanel b:singular="strict">
<b:navpanelhead>The Seven Samurai (1954)</b:navpanelhead>
<b:navpanelbody>
<p>A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune.</p>
</b:navpanelbody>
<b:navpanelhead>2001: A Space Odyssey (1968)</b:navpanelhead>
<b:navpanelbody>
<p>An influential science fiction film directed by Stanley Kubrick.</p>
</b:navpanelbody>
<b:navpanelhead b:state="selected">Life Is Beautiful (1997)</b:navpanelhead>
<b:navpanelbody>
<p>A Italian language film which tells the story of an Italian Jew, Guido Orefice
(played by Roberto Benigni), who lives in a romantic fairy tale, but must learn how to use
that dreamy quality to survive a concentration camp with his young son Joshua (played by
Giorgio Cantarini).</p>
</b:navpanelbody>
</b:navpanel>
</div>
b:singular ## # '6
## &5 &' 6 &+
# &#' #
#+ H
# &' &#'@ # # &'
#+#&&5
'&#'
' *
' #& # ' #& ## 5 %#
-#&&5 # &6#=
'
' (#=
' ' 6 # $ # %#&5 - & 1
#-@ ' 6&&5 -=
& 1
#- G %65 # ## # b:width@ b:height@ b:top@ ' b:side
# '# 1# # %% right left :# '6&#; ) # b:img ## # # =
'# +( 6&
?= @ $&& !(# !-'
& = +
(42 1
'
6&&1
( *+%& 6 ' * #& :# & # #&@ & # #
## %
;
&',
(4 1
<b:sidebarbox b:width="400" b:height="250" b:top="100" b:side="left">
<b:sidebar b:img="menu.gif">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry....</b:sidebar>
<b:sidebar b:img="tools.gif">
It is a long established fact that a reader will
be distracted by the readable content of a page when looking at its layout.</b:sidebar>
<b:sidebar b:img="brushes.gif">
Contrary to popular belief, Lorem Ipsum is not
simply random text. </b:sidebar>
</b:sidebarbox>
+( ' # - *+%& -& & # Backbase\3_1_4\controls\backbase\b-sidebarbox '#5@ # 3_1_4\basic '#=
5
*
$ #& ## %-' # ' #6@ #
( '6
' 1#
b:tab #( b:tabbox #& %%# &35 &'
( 1
5 %65 # # #
# ( b:url@ # #
# &5 &'' # # ++
# & # # 6 # 6# #+
+
(4 '
"
# 6&&1
( *+%&@ 6 # '6
'
&',
(4 ' <b:tabbox style="height: 100%">
<b:tab b:label="2001" b:url="data/2001_short.xml" />
<b:tab b:label="Seven Samurai" b:url="data/seven_short.xml" />
<b:tab b:label="Life is Beautiful" b:state="selected" b:url="data/bella_short.xml" />
<b:tab b:label="The Godfather" b:url="data/godfather_short.xml" />
</b:tabbox>
?= @ $&& !(# !-'
& = H@ 6 *+%&@ # b:url="data/bella_short.xml #
# 6&&1
(
&',
(4" 6
+
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<h3>Life Is Beautiful (La Vita è bella, 1997)</h3>
<p>
Italian language film which tells the story of an Italian Jew,
Guido Orefice
(played by Roberto Benigni), who lives in a
romantic fairy tale, but must learn how to
use that dreamy quality to survive a
concentration camp with his
young son
Joshua.</p>
</div>
4 + 6+#
@ - 2 #$ <>% ' ?) ! #$ 5@% # #& ' # +
( 1
'1 "# # # # #
6 %
1
'1
##+ 6 #
+
(4 &',
(4# <b:panelset b:rows="27px * 27px">
<b:panel>
<a b:action="trigger" b:event="open" b:target="id('taskbar_win1')">Open window 1</a>
|
<a b:action="trigger" b:event="open" b:target="id('taskbar_win2')">Open window 2</a>
|
<a b:action="trigger" b:event="open" b:target="id('taskbar_win3')">Open window 3</a>
</b:panel>
<b:panel>
<b:windowarea style="height: 100%">
<b:window id="taskbar_win1" b:open="true" style="position: absolute; width:
350px; height: 200px; top:15px; left:30px;">
<b:windowhead>Life Is Beautiful (La Vita è bella)</b:windowhead>
<b:windowbody>
<p>A 1997 Italian language film which tells the story of an Italian Jew,
Guido Orefice who lives in a romantic fairy tale, but must learn how to
?= @ $&& !(# !-'
& = use that dreamy quality to survive a concentration camp with his
young son Joshua.</p>
</b:windowbody>
</b:window>
<b:window id="taskbar_win2" b:open="true" style="position: absolute; width:
350px; height: 200px; top:25px; left:60px;">
<b:windowhead>2001: A Space Odyssey</b:windowhead>
<b:windowbody>
<p>An influential science fiction film directed by Stanley Kubrick.</p>
</b:windowbody>
</b:window>
<b:window id="taskbar_win3" b:open="true" style="position: absolute; width:
350px; height: 200px; top:35px; left:90px;">
<b:windowhead>Seven Sumarai</b:windowhead>
<b:windowbody>
<p>The film takes place in war-ridden 16th century Japan, where a village
of farmers look for ways to ward off a band of marauding robbers.</p>
</b:windowbody>
</b:window>
</b:windowarea>
</b:panel>
<b:panel>
<b:taskbar>
<b:startbutton />
</b:taskbar>
</b:panel>
</b:panelset>
8 & & #& ' # %
# -(#
## #
+(@ ##
@
' &# : %
' &# *; &+
# ## %&' # #=
#
&5 &+#' (# ##
% # 6&& 1'# 6 +
(4" "
# 6&&1
( *+%&@ 1
# %( ##'@ # #+ # #& =
#' ( '6&# +( ## -& & 5 #& '#5 :#
.2# concat 6
#
' # 6
' # +( &#- # # b:controlpath # # body #(;
&',
(4( <xmp b:backbase="true" b:controlpath="..controls/backbase/">
<div>
<h1>Toolbar</h1>
<b:toolbar>
<b:toolbaritem>
<img alt="" style="height:14px; width:26px;">
<s:event b:on="construct" b:target="@src" b:action="set"
b:value="{concat($bpc_controlpath, 'image_repository/icon/send.gif')}" />
</img>
</b:toolbaritem>
<b:toolbaritem>
<img alt="" style="height:16px; width:20px;">
<s:event b:on="construct" b:target="@src" b:action="set"
b:value="{concat($bpc_controlpath, 'image_repository/icon/compose.gif')}" />
</img>
</b:toolbaritem>
<b:toolbaritem>
?= @ $&& !(# !-'
& = <img alt="" style="height:14px; width:19px;">
<s:event b:on="construct" b:target="@src" b:action="set"
b:value="{concat($bpc_controlpath, 'image_repository/icon/erase.gif')}" />
</img>
</b:toolbaritem>
<b:toolbaritem>
<img alt="" style="height:16px; width:16px;">
<s:event b:on="construct" b:target="@src" b:action="set"
b:value="{concat($bpc_controlpath, 'image_repository/icon/preview.gif')}" />
</img>
</b:toolbaritem>
</b:toolbar>
</div>
</xmp>
9 #& # +%& # ## G # # #& 5 +%&5 #
(
b:tree #( # # # '' # 5 b:tree b:label ## #
+
(4. 6&&1
( ' *+%& 6 # #&
&',
(4) <b:tree b:label="C:/" b:open="true" style="width: 250px">
<b:tree b:label="Games">
<b:tree b:label="Patience" />
<b:tree b:label="Solitaire" />
</b:tree>
<b:tree b:label="Music" />
<b:tree b:label="Program Files">
<b:tree b:label="Backbase">
<b:tree b:label="BPC" />
</b:tree>
<b:tree b:label="Firefox" />
<b:tree b:label="Internet Explorer" />
<b:tree b:label="Mozilla" />
<b:tree b:label="Opera" />
</b:tree>
</b:tree>
b:tree #& %%# &35 &'
( 4 + 6+#
@ ?) ! #$
H% ?= @ $&& !(# !-'
8
& = ,6
( "
6+#
#&
) # 6+#
#& # %-' ''#
& 6+#
# # G '6
6+#
#& ( # ./ &
# #& b:accordeon@ b:infobox@
s:loading@ b:statusbar@ ' b:tooltip
$'
$'
#& (% &#' 6+#
#(# "# #
' ' '5
&+
# ## '6
#+ # (% ' &+
# ' # #
#
#
' # '5 ' &15 - &C 5 *%
' &&% # '5 &=
+
# 5 &
( # ' &+
# 0
&5 6 # '5 &+
# &#' # #+C *%
'
( #+ #+#&&5 &&% # #&5 &#' #+ :
( +#
66#; H
&#'@ # '5 # # 3 6 # #
#
+
(40 $
"
# 6&&1
( *+%&@ # '
#
# '
' ' '
=
' G # b:state ## # # '6
1 6 # ' %
' #=
#%
&',
(4* $
<b:accordeon style="width: 500px">
<b:accordeonhead>The Seven Samurai</b:accordeonhead>
<b:accordeonbody>
<p>A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune.</p>
</b:accordeonbody>
<b:accordeonhead>
2001: A Space Odyssey (1968)</b:accordeonhead>
<b:accordeonbody>
<p>An influential science fiction film directed by Stanley Kubrick.</p>
</b:accordeonbody>
<b:accordeonhead b:state="selected">
Life Is Beautiful (1997)</b:accordeonhead>
<b:accordeonbody>
<p>An Italian language film which tells the story of an Italian Jew, Guido Orefice
(played by Roberto Benigni), who lives in a romantic fairy tale, but must learn how to use
that dreamy quality to survive a concentration camp with his young son Joshua (played by
Giorgio Cantarini).</p>
</b:accordeonbody>
</b:accordeon>
/'
(
&'
( #& # &5 &+
# ## '#&5 &'' 5 # (
1
-
##
# %& # 6+ # # 1# #
( %& H
# 6& 6
=
&'
(@ # >/ #+#&&5 +-' 6+ # '+
#
,6
# &'
( #& 6&&1
D
G '6
5 1
&'
( #& ( # s:loading #( # '6
#
>/ # '%&5 1& # %%&#
&'
( %
6&
D
"6 5 1
# # &'
( 1# #5&
( %%&'@ &' s:include #(
# 5 ##% 6& ( # 6&&1
( 5
#*
?= @ $&& !(# !-'
9
& = <s:include b:url="../controls/backbase/s-loading/s-loading.xml" />
H # b:url ## # 6 # # &#
6 #+ #& 5 #&&#
UU '#5
"
6 *
6 * #& %-' ''#
& 6+#
# # ## #5 ##
1# 6 * %% 1
# - ++
' # '%&5 ## 6+#
"
=
6 * #
#' 6 * ## #5 %
#& 5 & #' # 6 *
+
(42 '
"
# 6&&1
( *+%&@ # 6# 6 * ## %% #
&
# # =
6 * b:target ## # '6
1# # #(( 1# # select ++
' b:mode ## # '# 1 # 6 * %#
' # 6 * ' #
'%% 1
5 +- # +@ 5 ## # #
#@ 6 *+%& # &
# &
# # ' 6 *
&',
(4. ' <div>
<a b:action="select" b:target="id('info1')" b:mode="at-pointer">
Life Is
Beautiful</a>
<b:infobox id="info1" style="width: 250px">
<h2>La Vita è bella, 1997</h2>
<p>A Italian language film which tells the story of an Italian Jew, Guido Orefice
(played by Roberto Benigni), who lives in a romantic fairy tale, but must learn how to use
that dreamy quality to survive a concentration camp with his young son Joshua (played by
Giorgio Cantarini).</p>
<a b:action="select" b:target="id('info2')">More info &gt; &gt;</a>
</b:infobox>
<b:infobox id="info2" style="width: 250px">
<h2>La Vita è bella, 1997 (cont'd)</h2>
<p>Guido tries to comfort Joshua by pretending that their imprisonment is just an
elaborate game. The film also stars Nicoletta Braschi.</p>
</b:infobox>
</div>
## ## #& 6+#
&&5 %
#' # # ##+ 6 %%&=
#
V %65 # %#
( 6 #
## ( @ 6 *+%&
style="position: absolute; bottom:0; left:0; width:100%;" b:separator /
#( '-' 6 ## &',
(40 1 <b:statusbar style="position: absolute; bottom:0; left:0; width:100%;">
?= @ $&& !(# !-'
Online!
& = <b:separator />
Offline!
</b:statusbar>
&#%
$ #&#% %% 1
- - # &+
# 1 # '6
' # %-'
''#
& 6+#
# ## 1# # 6+#
@ ' &' +'1
-
#
# +%& #*# #&#%@ 5 '' b:tooltiptext ## # # &+# 5
.>/ ./ #( 4 *+%&
&',
(42 <p b:tooltiptext="This is a tooltip">Hover Here!</p>
# + +%&* #&#%@ # 1 +( 4& +- #' 6
B# %&
#*#@ # s:tooltip #( 1 5 '' .>/ #
# 4 *=
+%&
&',
(4 @ $ ,
<div>
<a>The Godfather
<s:tooltip>
<img src="data/corleone.jpg" />
<br />
Francis Ford Coppola (1972)
</s:tooltip>
</a>
and
<a>Scarface
<s:tooltip>
<img src="data/tony.jpg" />
<br />
Brian De Palma (1983)
</s:tooltip>
</a>
are two of the most important gangster films of the post-war era.
</div>
,6
( # #&
) # # #& # %
# 6+#
# G '6
# #& =
( # ./ &
# #& b:barchart@ b:orgchart@ ' b:linechart
0(
3#
#
0(
3#
# #& ' 6 '6
( & ##@ 6 *+%&
# '6
(
3#
b:orgchart #( ' # #% 6 # 5@ '
#
b:subordinate #( b:subordinate #' # # # 5
b:label ## # &(& #
( '6
( # * & &
?= @ $&& !(# !-'
& = +
(4" 8- &',
(4 8- <b:orgchart b:label="Acme Organization">
<b:subordinate b:label="Human Resources" />
<b:subordinate b:label="Development">
<b:subordinate b:label="Research" />
<b:subordinate b:label="Testing">
<b:subordinate b:label="Mike">
<b:subordinate b:label="Sarah"></b:subordinate>
</b:subordinate>
</b:subordinate>
</b:subordinate>
<b:subordinate b:label="Architecture" />
<b:subordinate b:label="Technical Support" />
<b:subordinate b:label="Technical Publications">
<b:subordinate b:label="Technical Writing" />
<b:subordinate b:label="Publishing" />
<b:subordinate b:label="Training">
<b:subordinate b:label="Instructor-Lead" />
<b:subordinate b:label="Online" />
</b:subordinate>
</b:subordinate>
</b:orgchart>
#
# #& # 6 6 & &' -#& ## 1 '66
# -&
6 = # ' # '%&5 (%&&5 # '66
?= @ $&& !(# !-'
& = +
(4# 6&&1
( *+%& 6 # #&
&',
(4" <b:barchart b:caption="backbase.com visitors from Russia from 9th of June 2005 till 13th of
June 2005" b:x-axis-label="Date" b:y-axis-label="Number of Visitors" b:name="name"
b:width="600" b:height="400">
<b:barchart-horizontal-values>
<b:barchart-value b:value="9 June 2005" />
<b:barchart-value b:value="10 June 2005" />
<b:barchart-value b:value="11 June 2005" />
<b:barchart-value b:value="12 June 2005" />
<b:barchart-value b:value="13 June 2005" />
</b:barchart-horizontal-values>
<b:barchart-series b:name="Visitors from Russia" b:color="ff0000">
<b:barchart-bar b:value="15" />
<b:barchart-bar b:value="23" />
<b:barchart-bar b:value="25" />
<b:barchart-bar b:value="22" />
<b:barchart-bar b:value="26" />
</b:barchart-series>
</b:barchart>
/
#
$ &
(% ' # 1 #
( '#C 1 #
( 66#' 5 # # + # & # 1 #
( (
( 5 # ' 6&& &
(% 1
?= @ $&& !(# !-'
& = +
(4( 6&&1
( *+%& 6 &
# #&
&',
(4# <b:linechart b:caption="backbase.com visitors from Russia, Bulgaria and England from 9th of
June 2005 till 13th of June 2005" b:x-axis-label="Date" b:y-axis-label="Number of Visitors"
b:width="600" b:height="400" b:name="name">
<b:linechart-horizontal-values>
<b:linechart-value b:value="9 June 2005" />
<b:linechart-value b:value="10 June 2005" />
<b:linechart-value b:value="11 June 2005" />
<b:linechart-value b:value="12 June 2005" />
<b:linechart-value b:value="13 June 2005" />
</b:linechart-horizontal-values>
<b:linechart-series b:name="Visitors from Russia" b:color="#990000">
<b:linechart-point b:value="15" />
<b:linechart-point b:value="23" />
<b:linechart-point b:value="25" />
<b:linechart-point b:value="22" />
<b:linechart-point b:value="26" />
</b:linechart-series>
<b:linechart-series b:name="Visitors from Bulgaria" b:color="#000099">
<b:linechart-point b:value="13" />
<b:linechart-point b:value="14" />
<b:linechart-point b:value="12" />
<b:linechart-point b:value="13" />
<b:linechart-point b:value="15" />
</b:linechart-series>
<b:linechart-series b:name="Visitors from England" b:color="#009900">
<b:linechart-point b:value="15" />
<b:linechart-point b:value="20" />
<b:linechart-point b:value="27" />
<b:linechart-point b:value="25" />
<b:linechart-point b:value="25" />
</b:linechart-series>
</b:linechart>
?= @ $&& !(# !-'
& = ,6
( 4+ #&
) # 6+ #& # '' &#5 # 6+= ' #6 G '6
6+ #& ( # ./ &
# #& b:button@ b:combobox@ b:datepicker@
b:selectbox@ b:slider@ ' b:spinner
##
$ ##
#& # #+3 &
+%
##
&+
# ## #
5 .>/
&',
(4( <b:button b:action="alert" b:value="Hello!">Alert!</b:button>
+ *
+ * #& #*# 6&' 1# '%='1
&# * #
( &#
#-
-& 6+ 6*' # b:combobox #( #
&' b:combo-option #( '6
(
# &# * b:combobox #( b:name ## # # + 6 # %# 6&' ## # 6+ +# G %65 #& -& ( # b:value ## #@ b:text # # # #& #*# ## %% # * b:combobox & - #
b:style ## # # '# # #5&
( 6 # %# 6&' b:combo-option #(
b:value ## # # -& 6 -&=%
##
%
+
(4) ,'
&',
(4) ,'
<b:combobox b:width="300px" b:name="fieldvalue" b:text="B">
<b:combo-option b:value="1">2001: A Space Odyssey (1968), dir. Stanley
Kubrick</b:combo-option>
<b:combo-option b:value="2">A Clockwork Orange (1971), dir. Stanley
Kubrick</b:combo-option>
<b:combo-option b:value="3">A Hard Day's Night (1964), dir. Richard
Lester</b:combo-option>
<b:combo-option b:value="4">A Room With A View (1986), dir. James Ivory</b:combo-option>
<b:combo-option b:value="5">A Streetcar Named Desire (1951), dir. Elia
Kazan</b:combo-option>
<b:combo-option b:value="6">Adam's Rib (1949), dir. George Cukor</b:combo-option>
<b:combo-option b:value="7">All About Eve (1950), dir. Joseph Mankiewicz</b:combo-option>
<b:combo-option b:value="8">All That Jazz (1979), dir. Bob Fosse</b:combo-option>
<b:combo-option b:value="9">Annie Hall (1977), dir. Woody Allen</b:combo-option>
<b:combo-option b:value="11">Annie Hall (1977), dir. Woody Allen</b:combo-option>
<b:combo-option b:value="12">Apocalypse Now (1979), dir. Francis Ford
Coppola</b:combo-option>
<b:combo-option b:value="13">Blade Runner (1982), dir. Ridley Scott</b:combo-option>
<b:combo-option b:value="14">Blue Velvet (1986), dir. David Lynch</b:combo-option>
<b:combo-option b:value="15">Bonnie And Clyde (1967), dir. Arthur Penn</b:combo-option>
<b:combo-option b:value="16">Bringing Up Baby (1938), dir. Howard Hawks</b:combo-option>
<b:combo-option b:value="17">Casablanca (1942), dir. Michael Curtiz</b:combo-option>
<b:combo-option b:value="18">Chinatown (1974), dir. Roman Polanski</b:combo-option>
<b:combo-option b:value="19">Citizen Kane (1941), dir. Orson Welles</b:combo-option>
<b:combo-option b:value="19">City Lights (1931), dir. Charles Chaplin</b:combo-option>
</b:combobox>
?= @ $&& !(# !-'
& = ,#%
'#% #& &&1 # &# '# 6+ &
' '#% # 6&&1
( ## #
D
D
D
D
b:type = inline '%&5 # &
' '
# # &+
#@ float :# '6&#;
'%&5 & & &
' b:input = # .2# *%
# # %# &+
# ## ' # '%&5 #
&#' '#
b:format = # '# 6+# '%&5' # %# &+
#@ 6 *+%& dddd dd
MMMM yyyy &# Wednesday 05 January 2005 4 + 6+#
'#
6+#@ # BXML Reference 2,4
b:value = #& -& 6 # %# &+
# :5 +# %65 '# ##
6+ # # '# 6+# ## %6' # b:format ## #
+
(4* /
6&&1
( *+%& 1 &
' 6&#
( '#%
&',
(4* /
<div style="position: absolute;left:20px;">
<h2>Datepicker Control (inline)</h2>
<input type="text" name="input1" />
<b:datepicker b:type="inline" b:input="../input[1]" b:format="dddd dd MMMM yyyy" />
</div>
<div style="position: absolute;left:300px;">
<h2>Datepicker Control (float)</h2>
<input type="text" name="input1" />
<b:datepicker b:input="../input[1]" b:format="dddd dd MMMM yyyy" />
</div>
&#
&# #& '%='1
&# G ( # -&@ 1
# #
%# 6&'@ 5 %
( # % ' '1
1 5@ ' 5 % # % #
& b:select #( #
&' b:option #( ## '6
#+ # &# b:select #( b:name ## # # + 6 # %# 6&' ## # 6+ =
+#@ ' # b:value ## # # # #& 6&' -& b:option #( b:value #=
# # # -& 6 -&=%
##
%
?= @ $&& !(# !-'
& = +
(4. 1
6&&1
( *+%& 6 #
( &# #&
&',
(4. 1
<b:select b:name="county" b:value="Sweden" b:width="30%">
<b:option b:value="1">England</b:option>
<b:option b:value="2">France</b:option>
<b:option b:value="3">Germany</b:option>
<b:option b:value="4">South Africa</b:option>
<b:option b:value="5">Italy</b:option>
<b:option b:value="6">Poland</b:option>
<b:option b:value="7">Sweden</b:option>
<b:option b:value="8">Denmark</b:option>
<b:option b:value="9">Netherlands</b:option>
<b:option b:value="10">Belgium</b:option>
</b:select>
&'
&' #& 3
#& -#& (( ## # &' 1#
'6
'
( ( '6
' ( # ## # b:start ' b:end@ ' # ## #
G (- # ( b:step -& '6
( +
# ' '+
# G '& # ( # &' ( # slide -
#
&',
(40 1
<div style="height:100%">
<input type="text" b:connect="id('slider1')" value="" />
<b:slider id="slider1" b:orientation="horizontal" b:start="1" b:end="10" value="5" />
</div>
G # 5 1
+( 6 # #& ( s:gfxset 4 + 6+#
@ # ./ !6
&
%
%
#& '%&5 % ' '1
1 # &&1 # # -(# #(
# -& -& &# :&&5 + ; "6 # # %# 6&'@ 5 & ( # -& 5 %
( # %F'1
1 5 G %65 # ## #
b:start@ b:value@ b:step@ b:end # %65 %#-&5 @ ' b:style
?= @ $&& !(# !-'
& = +
(40 1
&',
(4"2 1
<div>
Spinner control:
<b:spinner b:start="-5" b:value="4" b:step="1" b:end="5" b:style="width: 60px" />
</div>
8 ,6
( ,# #&
) # '# #& # +
%&# '# G '6
'# ( # ./ &
# =
#& b:datagrid@ b:detailviewer@ b:listview@ b:listgrid
' b:treelist
8 ,#('
,%&5 &&= ' # & '# ' %%# &#
(@ #
(@ %(
(@ ' '#
( 6
# '#@ ' 3 & 1 ' &+
b:datagrid &' &+
#
b:datagridhead ' b:datagridbody@ ' b:datatypes
b:datagridhead '6
# ' ' #
b:datagridrow 1 # '=
6 &+
'6
' ( b:datagridgridheadcell &+
#
b:datagridbody '6
# '5 &+
# #
# 6 # <b:datagridbody/>
>/ # & ## +# '5
+&&5 &'' # # '5 ( # b:url ## =
# G %65 # 6&&1
( 6 # b:url ## #
D
D
D
$
./ 6& ## #
1 ./@ ## #
6+' ( 6 # ./
'6
' # ## # b:template b:template-ie5
$
./ 6& ## #
>/ # & '5 :## # ' &'
;
$
5 # 6& #5%@ 2>2 $2@ ## #
' #
1 ./ ./ #
6+' ( 6 # ./ '6
' # ## # b:template b:template-ie5
b:datagrid & - b:datatypes &' &+
# ## '6
6+ &+
#
## %%&' # && 6 # & &&5@ 5 '6
5 >/ ./ 6+ &=
+
# ## 6# 1#
&&@ &# *@ #*# %# #5%@ b:spinner@ b:datepicker
+
(4"2 /
"
# 6&&1
( *+%&@ # b:url %6 ./ 6& #
( 1 ./@ ' # ./ # b:template ' b:template-ie5 # #
6+ # '#
6& # /controls/backbase/b-datagrid '#5 & 1 *+%& 6
# '#(' #&@ &'
( '6
( #*#+
6 1 %#
C #@ %5@
'&#@ '@ ' '#@ ' ./ ' ./ '# *+%&
&',
(4" /
<b:datagrid style="width:800px; height:350px;" b:url="datagrid_film.xml"
?= @ $&& !(# !-'
8
& = b:template="xsl/b-datagrid.xsl" b:ie5-template="xsl/b-datagrid-ie5.xsl">
<b:datagridhead>
<b:datagridrow>
<b:datagridheadcell />
<b:datagridheadcell>Title</b:datagridheadcell>
<b:datagridheadcell>Director</b:datagridheadcell>
<b:datagridheadcell>Genre</b:datagridheadcell>
<b:datagridheadcell>Language</b:datagridheadcell>
<b:datagridheadcell>Premiere</b:datagridheadcell>
</b:datagridrow>
</b:datagridhead>
<b:datagridbody />
</b:datagrid>
b:datagrid #& %%# %( ##
4 + 6+#
@ ''
' #$ DG% 8 ,#&1
,#&-1 #& %
# '#&' -1 6 '# # ' # %
#
#
& %'# '#& "# %
# # '# # & #
( 6 #1 &+
'=
%#
&+
' '#& &+
1 6 # # & '6
' ( &'
b:property #( ## b:label ## # # '6
# #*# -& 6 # &6#=
' '
&+
:'%#
;
+
(4" /
9
5
6&&1
( *+%& 6 '#&-1 #&
&',
(4" /
9
5
<b:detailviewer>
<b:property b:label="Movie" b:style="width: 400px">Finding Nemo</b:property>
<b:property b:label="Directors">Andrew Stanton
<br />
Lee Unkrich (co-director)
</b:property>
<b:property b:label="Genre">Animation / Comedy / Family</b:property>
<b:property b:label="Plot Outline">A father/son underwater adventure featuring Nemo, a
boy clownfish, stolen from his coral reef home. His timid father must then search the ocean
to find him.</b:property>
</b:detailviewer>
#
# 6 b:property 5 >/ +% G # # 1'# 6 # =
#
# &+
:(#=
' ' &+
;@ ( # b:style ## # &6#=
'
&+
3 # # #
# :b:label ## #; -& # -@ 5 ' #
( # &
8 /#-1
?= @ $&& !(# !-'
9
& = &#-1 #& %
# # & # & ## 5 && #( #& '66
# 6+ # #&@ ## # +%&+
#' -C 5 '' #
b:behavior="b-listview" ## # # >/ W# &X &+
# # + # # & 6&&5
# & :& &+
' # # # # & '
( # ## &+
;
+
(4" 9
5
8 /#('
,%&5 1= ' # & '#@ ' %%# &#
(@ %(
(@ ' '#
( 6 # '#@
' 3 & 1 ' &+
b:listgrid &' &+
#
b:listgridhead ' b:listgridbody@ ' - b:datatypes
b:datagridhead '6
# ' ' #
b:datagridrow 1 # '=
6 &+
'6
' ( b:listgridheadcell &+
#
b:listgridbody '6
# '5 &+
# #
# 6 # </b:listgridbody>
>/ # & ## +# '5
+&&5 &'' # # '5 ( # b:url ## =
# G %65 # 6&&1
( 6 # b:url ## #
D
D
D
$
./ 6& ## #
1 ./@ ## #
6+' ( 6 # ./
'6
' # ## # b:template b:template-ie5
$
./ 6& ## #
>/ # & '5 :## # ' &'
;
$
5 # 6& #5%@ 2>2 $2@ ## #
' #
1 ./ ./ #
6+' ( 6 # ./ '6
' # ## # b:template b:template-ie5
b:listgrid & - b:datatypes &' &+
# ## '6
6+ &+
#
## %%&' # && 6 # & &&5@ 5 '6
5 >/ ./ 6+ &=
+
# ## 6# 1#
&&@ &# *@ #*# %# #5%@ b:spinner@ b:datepicker
+
(4"" "
# 6&&1
( *+%&@ # b:url %6 ./ 6& #
( 1 ./@ ' # ./ # b:template ' b:template-ie5 # #
6+ # '#
6& # /controls/backbase/b-listgrid '#5 & 1 *+%& 6
# &#(' #&@ &'
( '6
( #*#+
6 1 %#
C #@ %5@
'&#@ '@ ' '#@ ' ./ ' ./ '# *+%&
&',
(4"" ?= @ $&& !(# !-'
8
& = <b:listgrid b:url="datasource.xml" b:template="b-listgrid.xslt"
b:ie5-template="b-listgrid-ie5.xslt">
<b:listgridhead>
<b:listgridrow b:width="100">
<b:listgridheadcell b:width="60px"
b:datatype="spinner">Spinner</b:listgridheadcell>
<b:listgridheadcell b:width="60px" b:datatype="text">Text</b:listgridheadcell>
<b:listgridheadcell b:width="60px"
b:datatype="numbers">Numbers</b:listgridheadcell>
<b:listgridheadcell b:width="60px"
b:datatype="letters">Letters</b:listgridheadcell>
<b:listgridheadcell b:width="60px" b:datatype="text">Text</b:listgridheadcell>
<b:listgridheadcell b:width="60px"
b:datatype="datepicker">Date</b:listgridheadcell>
</b:listgridrow>
</b:listgridhead>
<b:listgridbody />
</b:listgrid>
b:listgrid #& %%# %( ##
4 + 6+#
@ ''
' #$ DG% 8 &#
&# #& %
# '# & &#@ +&@ 6 *+%&@ # &# '
+& %%&#
5 '6&#@ 1 &' G %
# &'
5 &
(
# 1 b:treelistrow '6
1 # b:treelist ' '%&5' & >/ <tr> #( H#
# b:treelistrow@ 5 - + 6 b:treelistcell
#( '6
( &+
# #&# 1 G b:treelistchildren #(
#
# '+# b:treelistrow # ## %% # # + &-& #
5
+
(4"# G # 5 1
+( 6 # #& ( s:gfxset 4 + 6+#
@ # ./ !6
&
# #&# #&@ 5 +# '' s:include # # %# 6 # #&@ 6
*+%& s:include b:url="../controls/backbase/b-treelist/b-treelist.xml"
9 #& "
##
9 "+%&+
#
( 2(
( +
2(
( #& 6 &( '# # "# &&1 5 # #- &5 %# 6 # '
'# # # 5 #+@ ' # && 1' ' 61' #( # '# # %(=
5=%( G +%&+
# %(
( 6 # '# #& #
b:datagrid ' b:listgrid #&
?= @ $&& !(# !-'
8
& = +%&+
# %(
( 6 #&@ 5 ' #
D
D
,6
# 6&&1
( %(
( ## # 6 # #&
D b:items-in-total="1000" = &+# # ##& + 6 ' #
' # '# #
D b:page-size="20" = '6
# + 6 ' '%&5' -5 %(
D b:page-number="1" = '6
# #& %( ## '%&5' 1
# %(
##'
D b:page-cache="3" = '6
# + 6 %( #
' ++5 : '
#&;
D b:url="load.php" = '6
# -=' 6& ## +%&+
# # &( # '& # %(
( ## #
,6
b:pager #& ' # # # '# #& %( #& #
6 #&&
( # %(' #& 1 %( # &'@ # %( #& #
+
## # 1 # # %( #& ##
D b:pager b:observe="id('mytilelist')" = # # %( #& #
# #& ## < %(
(
D b:pager-item b:page-type="first" = '6
&
# %( # '# #
2 & -& first | previous | next | last
D
b:pager-numbers b:page-links="5" = '6
1 +
5 %( & &
-5 &' 6 # %(' &+
# %( + # & # '
#65 1
%( &'5 &'' 5 & - b:dirty ## # # + # % &
# 6 &' 6 %6 %(
D
"+%&+
# # -=' &( ## *## # ' 6+ '# #
' %&# # ' # %( < # 5
3#
6 #
&
#=- #& ##
@ ' # +%&+
##
'66 '%
'
( 5
=
' -
+
#
D $0
, ' A, , = 5
3#
1# #
- '&' #+#&&5 # &-
# - '+
##
D 2>2FA2 $2 = 5
3#
1# #
'' =
' '&' (
# b:url ## # ' 5 #
#
( # ## # -& ## ##' <5 #
( # # &
#& %(
( ## # &5 '6
1# # #& 1
# # -C 5 +#
+%&+
# 1# # #&&5 - # -=' +%&+
##
"
# 1'@
# #& ' && # '# # - 6+ # -
9 /35 /'
(
#& b:tree ' b:tabbox %%# &35 &'
( "
# 1'@ # #
#
# &'' 6 # #&&5 ' # +%&+
# &35 &'
(@ 5 ' #
# b:url ' # populate -
# b:url ## # ' # ' '# # #
- ## # -& #
#' ' ##' <5 #
( # # & $
b:dirty ## # ' # + &+
# 6 &'
( H
# b:dirty ## #
# # false &+
#@ # &+
# # &'' '#&5@ # &5 1
# =
6+#
'' (
6&&1
( ' %-' *+%& 6 1 # +%&+
# &35 &'
(
&',
(4"# -% <s:event b:on="open | select">
<s:if b:test="@b:dirty = 'true' or (not(@b:dirty) and not(node()))">
<s:task b:action="trigger" b:event="populate" />
</s:if>
<!--Write your control specific open code here-->
</s:event>
<s:event b:on="populate">
<!--In the BNS and BJS editions you extend this event-->
<s:task b:test="@b:url" b:action="load" b:url="{@b:url}" />
<s:setatt b:dirty="false" />
</s:event>
?= @ $&& !(# !-'
8
& = $''
( / $
' 4& :;
G '6
# & ' 6& 6 # ! ) "
#6 (
D
= ( %%&' # # .>/ ' ./ 4 + 6+=
#
@ H #
'' http://www.w3.org/Style/CSS/
D
s:setstyle = ' # '5
+&&5 (
#5& # )" &+
# %
#
-
# 4 *+%&
<s:setstyle b:background-color="green" b:width="200px" b:opacity=".2"
b:height="20px" b:top="0px"/>
D
- ## = 5 - # '6
# -& %
##
6 &+
# 1
6 # ## :
; 4 + =
6+#
@ ! BC #$ G;@%
D
$'' ' +- & = # addclass ++
' # '' & # &=
+
# :
+& %# %%&5;
<button b:action="addclass" b:value="heading" b:target="//h1" />
)
( #5&' #&
%-' #=6=#= * #6 #& ## %&# ++
%#=
#
' - #& -& & 1# '66
# :#5&
(;
#
( & # 6 #5& '6
#
## &&1 5 # ( # 1 %=
%&#
O & Y 6& 1## +%#
( ##
( 6
#
&#5 #& &#' 5 #&&#
3_1_4/controls/ '#5 ' -& & #
6&&1
( D
D
D
= %%& J+#&&J #5&
( # # #& =+'6 &
= %%& +%& #5&
( # # #& +'6 &
5#+ = %%& # #5&
( 6 5 %#
( 5#+ # # #&
6&&1
( &&##
1 # + b:modal #& ( # '66
# # :6
@ # 5#+ '66 '%
'
( 5 %#
( 5#+ #5&
(;
?= @ $&& !(# !-'
8
& = Figure 5.35 - Basic, Backbase, and System Skins
#5&
( %%& # #& #5& # +%
# 6 5 1
%%&#
@ # # # 1 %%&#
##
( # #& 2#
G +# # # b:controlpath ## # # body #( # '# # #6
#& 5 1
# # 5 '6&#@ 6 5 ' # %65 # b:controlpath@ # =
#& #
' # 3_1_4/controls/dynamic/ 6&' ' :"
'6&# #&&=
#
@ # /dynamic 6&' #
#& 1# ( %%&';
# # b:controlpath ( &#- %# # # #& '#5@ 6 *+%&
?= @ $&& !(# !-'
8
& = &',
(4") <body onload="bpc.boot('../');" b:controlpath="../controls/backbase/" b:skinbase="none" />
G &' %5=
'=%# # #& 5 1
# # #+#&&5 5 %%&#
# # 6&' %6' 5 # b:controlpath G & +- #& ## 5
# ( # +%- %6+
@ ' 5 & +* # #5&
( ' 6 '66
#
#&@ 6 *+%& 5 ( # 6 + #& #5&
( 6
#
"# ++
'' # # %# 6&' /controls '#5@ 6 *+%& /
custom/@ 1 # # 5 1
#+ #& 4 + 6+#
@ #$ GG;%
#&%# ##
( 6&
# +
' #&# #& # #&@ 5 +# '' s:include # # %# 6 # #&@ 6 *+%&
s:include b:url="../controls/backbase/b-menubar/b-menubar.xml"
b:skinbase ## # %6 1# # default.xml 6& # #&%# '=
#5 &'' # :%65 none default; default.xml 5 #&E =
6(#
6& ## #
'6&# -@ #5&
(@ ' &5# 6 6<
#&5 ' =
## infobox@ tooltip@ selectbox@ ' slider "# & #
'6
#
6
'6&# -&'#
- "# ++
'' # # 6& #& &#
1
5 &' +&&
- ' #5&
( /'
( # 6& #+#&&5 -
# 15 # 5 %%&#
'6&# & ' 6& # 6& J
=
&'J # # default.css &#' 5 #& '#5 6& & &',
(4"* /
11
* { font-size: 11px; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; color: rgb(102,
102, 102); }
default.css &'' 6# # +& &' -& # -@
# # b:skinbase="none" ## # default.xml@ ' #6 # default.css@ # &''
0-'
( #5&'
#&
G # #=6=#= * #& 1# E+#&&E #5&
(@ #5&
( %%&' 5 %65
( # b:controlpath ## #
=
% ,
@ *%# 6 %#
( #5& top@ left@
bottom@ right@ position@ width@ height@ ' float G -' # %%#
( &
#5&
#5&
( ## # font-size@ font-family@ ' background +#+
-&'
% ,
( &
#5& ' *#
& #5&# -&
# #5&
(@ 1# 5 1
& ' '' # -content 66* # # & + 4 *=
+%&@ # ( # #5&
( 6 # $'
#&
Example 5.38 - Overruling Basic Controls Styling: Defining
.b-accordeonhead-content { height: 22px; width: 100%; padding-left: 3px; background-image:
url(top_left.gif); background-position: 0 0; background-repeat: no-repeat; }
$%%&5 # ( 6&&1
Example 5.39 - Overruling Basic Controls Styling: Applying
<b:accordeonhead class="b-accordeonhead-content">The Seven Samurai</b:accordeonhead>
?= @ $&& !(# !-'
8
& = &#+' &+
#
G 5 :>/ +%# &; +&#=+' &+
#@ $'@ '@ '
M@ ./ #( ' #&@ 6 *+%&@ # 6& +#
5
%%&#
@ # 6&&1
( 5
#*
Example 5.40 - Flash Control
<b:flash b:url="tags.swf" b:width="300" b:height="300" />
?= @ $&& !(# !-'
8
& = %# = $%%&5
( ) "
##
,6
( -
# ' ++
'
-
# ' ++
' '' ##-#5 # 5 2" &&5@ ,
'6
@ J1
+#
( %%
J@ # ++
' J1# #
# %&J $
-
# -
# 5#+ -
#
D
D
&9
+# -
# # %& 1
# ' +#
(@ &
( &
1%
, &9
+ -
# # '#&5 ' 5 # @ 6 *+%& #
construct -
# 6 1
%( ##'
G #(( -
# 6 5 ./ .>/ &+
# G '6
1# %%
1
-
# #((' ,
! -
# '& '& # -
# 5 *=
#
( ++
'@ 6 ++
' 5 *#
( ++
' 5 @ 6 *=
+%& &' &+
#@ +- &+
#@ ( # -& '%&5 6 &+
#@ (
# &#
6 &+
#@ ' # ## # "
./@ ++
' '&' 1# #
b:action ## # ++
' # 1
## # ## 5 ' # %& #
#( # *# # ++
' 4 --1 6 # ++
' 5 @ '
'! #$ 55% b:on="..." ## # %6 # -
# ## #(('@ ' # b:action="..."
## # %6 # ++
' # *# 1
# &+
#Z ++
' -
# 6
-
# %%#' 5 &' # #
'' %%#' 5 A-%#@
click@ mouseover@ mousenter & #' # -
# dragreceive@ mousedeeper@ ' command
# ++
' #(( %
'
( -
# 4 *+%&@ b:action="alert"
++
' #(( alert -
# ## 5 %
' # ( b:on="alert"
>1-@ + ++
' load ' send ' # #(( -
# 4 +
6+#
@ # ++
' #
6 # ./ !6
,6
( -
# >
'&
G '6
-
# '& -& 15 6&&1
( &# # 15 ' 15 5
&' #+
D
D
= 6 5 .>/ ./ &+
#@ 5 '6
# b:action ## #
' %65 # ++
' %6 ## #
&9
= 5 '6
# s:event #( &
@ '# &' ' 6 .>/
./ &+
#@ 5 '6
# -
# 51 # '+
#@ 1 '6
( b:on ## # # &+
# #(( # -
# '&
-
# &
( ## -
# %' # %
# &+
# 4 +
6+#
@ +,
#$ G;<%
D
9 = 5 1% # -
# '& s:behavior@ 1 #
&+
# ' # 6
# - *%&#&5 ( # ## # b:behavior
:# -& # + 6 # -; - # 6+ #
-@ ' ' 5 -& &+
#
6&&1
( *+%& '6
( -
# '&
D
0
# &+
# #&6 :b:action ## #; "# *#' # -
# # %&@
1 +
## # -
# 6' 1
# & &+
#
<a b:action="alert" b:value="Hello">
Click me</a>
H
5 '6
++
' 1## -
#@ # b:on="command" -
# #
'6&# -
# ## #(('
D
$ # s:task &' &+
# 6 -
# '& 1 '&' 5 # s:event
?= @ $&& !(# !-'
8
& = #(
<a>Click me
<s:event b:on="command">
<s:task b:action="alert" b:value="Hello" />
</s:event>
</a>
D
$ # b:action ## # 6 # s:event #( #
' ##
6 #
*+%& -
<a>Click me
<s:event b:on="command" b:action="alert" b:value="Hello" />
</a>
D
$ # s:task &' &+
# 6 # s:execute #( %& -
# '& #((' # ++
# # 1&5 &'' '# %' 5 # 2 #+ "# +& # s:event b:on="construct"
<s:execute>
<s:task b:action="alert" b:value="Hello" />
</s:execute>
D
$ # s:task &' &+
# 6 # s:if@ s:when ' s:otherwise #( 1#
# s:if ' s:when #( *#' &5 1
# ## #6'
1#
# s:otherwise #( *#' 6 6 # s:when ## #6'
<s:choose>
<s:when b:test="id(@href)">
<s:task b:action="select" b:target="id(@href)" />
</s:when>
<s:otherwise>
<s:task b:action="load" b:url="{@href}" />
</s:otherwise>
</s:choose>
D
H%%' - ## '6
66# 1
# -
# #(('
<h1 b:behavior="font-resize">Resize Font</h1>
<s:behavior b:name="font-resize">
<s:event b:on="mouseenter">
<s:fxstyle b:font-size="5px" />
</s:event>
<s:event b:on="mouseleave">
<s:fxstyle b:font-size="30px" />
</s:event>
</s:behavior>
$ - # - ## -
# '& '6
' 6 # ,
-
# 4 + 6+#
@ , #$ G;@%
,6
( #+ -
#
G # trigger ++
' # # #+ -
# :
' & # #(( 5=
#+ -
#; ( # 5
#* b:action="trigger" b:event="myEvent" :# b:event #=
# '6
# + 6 # #+ -
#; "6 5 '6
-
# '& 6 5
#+ -
#@ 6 *+%& - # &+
# #&6@ # -
# #(('
1
- # trigger ++
' 6'
"
# 6&&1
( *+%&@ 6 #+ -
# -
# '6
' 5 ) #$
H% 1# # s:keys 5 #
#(( #+ -
# 1
# 5 %' -
# '& 6 # #+ -
# '6
' -@ ## &# &# '&(
* %%
( 1
# -
# #(('
&',
)4* , &9
<s:behavior b:name="write">
<s:event b:on="press_a_key">
<s:task b:action="alert"
</s:event>
<s:event b:on="press_c_key">
<s:task b:action="alert"
</s:event>
<s:event b:on="press_f_key">
<s:task b:action="alert"
</s:event>
<s:event b:on="press_g_key">
<s:task b:action="alert"
</s:event>
b:value="'A' is a hot key!" />
b:value="'C' is a hot key!" />
b:value="'F' is a hot key!" />
b:value="'G' is a hot key!" />
?= @ $&& !(# !-'
88
& = <s:whenactive>
<s:keys b:keys="a" b:action="trigger" b:event="press_a_key" b:target="id('dest')"
<s:keys b:keys="c" b:action="trigger" b:event="press_c_key" b:target="id('dest')"
<s:keys b:keys="f" b:action="trigger" b:event="press_f_key" b:target="id('dest')"
<s:keys b:keys="g" b:action="trigger" b:event="press_g_key" b:target="id('dest')"
</s:whenactive>
</s:behavior>
<div style="position: absolute;left:20px; top:55px;" id="dest" b:behavior="write">
<textarea style="width: 300px; height: 100px">Start writing and find the active
keys!</textarea>
</div>
' *+%& # #
2 +9
)?
#$ %
# *+%& 6 '6
( #+ -
#
/>
/>
/>
/>
%-'
"
%# -
#
6&&1
( # & ' # %# -
# 5 &9
/
active
%& &+
# 1
#@ &' '@ (# 6
blocked-mousedown
%& #' 6 +&
+'1
-
# 1
# &6# +
##
%' &+
# ## &' 6+ -
( %# -
#
blur
%& 1
6&' & 6
focus
%& 1
6&' (# 6
change
%& 1
# #
# 6 %#
6&' ('
child-lost
%& # %
# 6 &+
#
1 6&&5
'(('=
'='%%'@ +-'
click
%& 1
# &6# + ##
&' - &+
#
command
%& 1
&+
# &#'
5 %# :+ 5 ';
dblclick
%& 1
# &6# + ##
&' #1 - &+
#
drag-deeper
%& 1
&+
# ## (
'((' +-' 6+ %
# &+
# #
&' &+
# :'1
# ./ #
5; "# #((' # %
#
&+
#
drag-drop
%& 1
&+
# 6&&5
'%%' -
( &+
# "# #((' # &+
# ## (
'%%'
drag-enter
%& 1
# &+
# ## (
'((' +-' 6+ # %
# &+
#
# &' &+
# :'1
# ./ #
5; "# #((' # &+
#
?= @ $&& !(# !-'
89
& = &9
/
1 # '((' &+
# #
drag-leave
%& 1
# &+
# ## (
'((' +-' 6+ &' &+
# # %
# &+
# "# #((' # &'
&+
#
drag-receive
%& # &+
# 1 -
# &+
# ## '((' '
'%%'
drag-reenter
%& 1
# &+
# ## (
'((' +-' 6+ # &' &+
#
# %
# &+
# :% # ./ #
5; "# #((' # &+
#
1 # '((' &+
# #
drag-start
%& 1
# '( #
++
"# #((' # &+
#
## ( '(('
inactive
%& &+
# 1
#@ &' '@ & 6
mousedeeper
%& # +- - #
&'
6 &+
#
mousedown
%& &+
# - # +
%' '1
%#
mouseenter
%& 1
&+
# -' #
+ - %#
mouseleave
%& 1
&+
# - #
+ # %#
mouseup
%& 1
&+
# -' #
+ %' %#
mousereenter
%& 1
# %
#
( '-O
+- # 6 # &'
6 &+
# :# &- # &'
6
# &+
#E *;
receive
%& 1
&+
# - &+
# &# 6 copy@ move@ render #
resizewindow
%& 1
# 1 1
'1 3' :#((' # body #(;
rmbclick
%& 1
& &+
#
1# # (# + ##
rmbdown
%& 1
&+
# - #
(# + ##
%' '1
%#
rmbup
%& 1
&+
# -' #
(# + ##
%' %# 7#
G +# # # b:bubble ## # #
6& # body #( '#-# #
#
'' 1 %%=% +
?= @ $&& !(# !-'
9
& = &9
/
scrollwindow
%& 1
# 1 1
'1 &&'
slide
%& 1
# +- #
#+ 6 &' #&
-
# &
( ## -
# %' # %
# &+
# -
# &5 %%& # %# -
# 4 + 6+#
@ +,
#$ G;<%
&
(
5#+ -
#
6&&1
( # & ' # 5#+ -
# 5 &9
/
close
%& 1
' :
b:treelistrow; #&# &'
construct
%& 1
# 5#+ '
1#
%
( &+
#
deselect
%& 1
&+
# '&#'
disable
%& 1
&+
# ' &'
:
&+
#@ ' &'@ #
%
' # %# -
#@ ' &5
&' ( 5#+ -
#;
enable
%& 1
&+
# &'
:
&+
#@ ' &'@ #
%
' # %# -
#@ ' &5
&' ( 5#+ -
#;
load
%& 1
'+
# &''
' %' 5 # 2
open
%& 1
' #&# +
%
'
remove
%& 1
&+
# '#5' 5
+- ++
'
select
%& 1
&+
# &#'
submit
%& 1
6+ +##'
<
6 -
# ((
(
#
' # #& *#
' 6 -
# 6 ,
@
,
@ @ ' "# +%#
# # ++ ## 6 #
+&#%& -
# # #(('@ #5 #((' 5
&5 6 # -
# # *#
5
&5@ ## = 5=
@ # s:lock #( ' #(# &+
# ##
- # &
( &+
#
?= @ $&& !(# !-'
9
& = /6#= ##
, &=&
H
&6#=+
&1
8
9
##
' &=& #
# %&@ # -
# <
6&=
+'1
+%
++
'
&
+'1
:
# ";
+% :
# ";
++
' :
# ";
& :
# ";
' &&
!(#= ##
, &=&
H
(#=+
&1
+
+
+
+
+
+
+
##
' &=& #
# %&@ # -
# <
6&=
'1
%
&
'1
%
&
' &&
,(=$
'=,%
H
'(=
'='% #
# %&@ # -
# <
6&&1
'(=## :6 &+
# -';
&'=&#
'(='%
'(=-
&+
# !- 4
H
&+
# - 6@ # -
# <
6&&1 :# &+
# ## &
6 (# & -
#
&
6
$''
( ) "
##
-
#
) ## 1# # #6 ( # + ' 5 ' -
#
## #((' #
# E + #
@ 6 *+%& +-@ +=
'1
@ ' &@ ' 5 #%# 5 % 6+ # 5 '@ ' ' #
# #+@ ( # s:key #(
-
#
6&&1
( *+%& '+
## + -
# H
+ -
# # %&@ - ' # #+%&5 #-# # &# #+ %
'
( # # + #
## 1#
# div &+
#
&',
)4. /
&9
?= @ $&& !(# !-'
9
& = <div style="border: 1px solid #BBB; width: 250px; height: 100px;">
<s:event b:on="click" b:action="select" b:target="../ul/li[1]" />
<s:event b:on="dblclick" b:action="select" b:target="../ul/li[2]" />
<s:event b:on="mouseenter" b:action="select" b:target="../ul/li[3]" />
<s:event b:on="mouseleave" b:action="select" b:target="../ul/li[4]" />
Interact with this area to show the mouse events...
</div>
<ul>
<li b:behavior="mouse-active">Click</li>
<li b:behavior="mouse-active">Double click</li>
<li b:behavior="mouse-active">Area enter</li>
<li b:behavior="mouse-active">Area leave</li>
</ul>
<s:behavior b:name="mouse-active">
<s:state b:on="select" b:normal="mouse-active" />
<s:state b:on="deselect" b:normal="" />
<s:event b:on="select">
<s:fxstyle b:time="500" />
<s:task b:action="deselect" />
</s:event>
</s:behavior>
<style type="text/css">
.mouse-active {
color: red;
font-weight: bold;
}</style>
4 + 6+#
-
#@ +,
#$ D@% %#
( L5
G # s:keys #( # +% ++
' # 5@ 5 s:keys #( =
< # ## #@ b:keys ' b:action :$
5 ''#
& ## # 6+ # (=
+
# 6 # ++
'; -& 6 # b:keys ## # # 5 #
: (
';@ # '+& $"" -& 6 # 5 4 *+%&@ 27 # & 5
b:action '6
# ++
' ## *#' 1
# 5:; %'
s:whenactive #( 1%% 6 # s:keys #( # %-' # %%&#
#*#
6 1
# 5 #- 5 &5 #- 1
# &+
# # 1 #5
%%&' #- G '6
5 &
@ ' - : # #5 +# &=
15 #
' s:whenactive; 4 *+%&@ # '6
(& & 5@ 5 '6
#+ s:behavior ## ' # body &+
# # #- #(#
5 %%&#
6&&1
( +%& *+%& 6 1 # %# 5 H
# 6# #*# #=
-@ %
( # 3 5 #((& # &+
# 1# # ' keys
&',
)40 /
:
%
<div style="position: absolute;left:20px; top:55px;">
<textarea style="width: 300px; height: 100px">Press a or z keys to toggle a textarea
(when active)</textarea>
<s:whenactive>
<s:keys b:keys="a" b:action="show" b:target="id('keys')" />
<s:keys b:keys="z" b:action="hide" b:target="id('keys')" />
</s:whenactive>
</div>
<div id="keys" style="position: absolute;left:20px; top:105px;">
<textarea style="width: 300px; height: 100px">Pressing a or z keys shows and hides this
element</textarea>
</div>
4 + 6+#
# 5@ - 0,
() #$ @D%
' " #$ :E% 6&&1
( # & &# + 5 ' 5 ' # %
'
( $"" -&
:
%
?
?= @ $&& !(# !-'
9
& = :
%
?
4
4
4
4
4
4
4
8
48
9
49
4
4
4
/6# $1
)% $1
8
!(# $1
9
,1
$1
,6
( 4 '&
6 +'& &&1 5 # '6
# &+
# 5 #6 ## -(# #( ( 5 $
&+
# ## 6 %
' # 5 ' %#
5 '6&#@ >/ 6+ &+
# 6(% ' 6#+
G '6
&+
# ## (# 6 5 %&
( # 6&&1
( ./ ## #@ 1# #
-& true false@ &+
# ## # '6
5 6 6 &+
#
# ./ %
D
D
D
b:focusroot = '6
# +
6 #
:; G - +&#%& 6
# ' 5 %%&#
@ # # ( &-&
b:focusgroup = '6
(%
( 6 #+ ## (# 6 ' ## 5 -(# #(
b:focusitem = '
#65 &+
# ## (# 6 $
&+
# ## 6
%
' # 5 ' %# _focusCurrent - & #
# 6#+
## #&5 6 : && 1
&+
# 6;
## # '6
5 6 6 &+
# G # && &+
# &
(
# 5 -' 4 *+%&@ 6# - #' 6#@ 6(% - #' 6(%@ ' 6#+ #' 6#+ $
6(%@ 6#@ & 6#+
,6&# 5 (
' # # 6#@ 6(%@ ' 6#+ &+
# # &&1
5 # -(# 61' ' 1' #( # &+
# :+%&+
#' (
++
';
,,
/
:
%
focusitem-next
$1 L5 right ' down
?= @ $&& !(# !-'
9
& = ,,
/
:
%
focusitem-previous
$1 L5 left ' up
focusgroup-next
tab
focusgroup-previous
shift+tab
focusroot-next
ctrl+right
focusroot-previous
#&['1
focus-celldown
& ++
' # 6 # + &+
# *# 1 :
'6&#;
focus-cellup
& ++
' # 6 # + &+
# %- 1 :
'6&#;
7# 4 ++
' #(( -
# 6 # + +
6&&1
( *+%& '+
## -&&5 # 6 +'& 6 +'& &+
#
( & # '# # ## ( ## #((' 5 -(# #( #
&+
#
Example 6.10 - Focus Model
<s:behavior b:name="focusobject">
<s:event b:on="construct">
<s:setstyle b:padding="10px" b:background-color="#0099FF" />
<!--purple-->
</s:event>
<s:event b:on="active">
<s:setstyle b:background-color="#00D856" />
<!--green-->
</s:event>
<s:event b:on="inactive">
<s:setstyle b:background-color="#D85500" />
<!--red-->
</s:event>
<s:event b:on="focus">
<s:setstyle b:background-color="white" />
</s:event>
</s:behavior>
<div b:behavior="focusobject" b:focusroot="true">
<p>
This document demonstrates the backbase focus model. It contains two
focusgroups, 1 and 2. Focusgroup 1 contains focusitems 1.1 and 1.2. Focusgroup 2 contains
focusitems 2.1, 2.2, 2.3 and 2.4. You can set focus with the
<b>keyboard</b>
or the
<b>mouse</b>
.
</p>
<p>The tab and arrow keys are used for keyboard navigation:</p>
<ul>
<li>Use the
<b>Tab</b>
, or
<b>Tab+Shift</b>
, key to navigate between groups (the focusgroup remembers the focusitem that last had focus
within a group.)
</li>
<li>Use the up and down
<b>arrow keys</b>
change focus between items within a group.
</li>
</ul>
<p>
The focus system is hierarchical. Navigate through the groups and items and
watch how the color indicates all focus containers upwards in the hierarchy. When the page is
constructed, the color
<b>Purple</b>
is applied as the background. When events are triggered, the elements change color:
?= @ $&& !(# !-'
9
& = <b>Green</b>
indictates actived elements,
<b>Red</b>
indicates inactived elements, and
<b>White</b>
indicates the item that has focus (and is also active):
</p>
<div b:behavior="focusobject" b:focusgroup="true">Focusgroup 1
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
1.1</div>
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
1.2</div>
</div>
<div b:behavior="focusobject" b:focusgroup="true">Focusgroup 2
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
2.1</div>
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
2.2</div>
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
2.3</div>
<div b:behavior="focusobject" b:focusgroup="false" b:focusitem="true">Focusitem
2.4</div>
</div>
</div>
6&&1
( # 6 # ' *+%&
Figure 6.1 - Focus Model
4 -
#
-
# ' ++
' 6 # 6 +'& &&1 5 # %
' # ## ( &+
# ## 6 &
D
focus ' blur
focus ' blur -
# # %& 1
-(# #( 6#+
?= @ $&& !(# !-'
9
& = 5 6 +'& focus -
# # %& # 6#+ ## (# 6@
' blur -
# # %& # 6#+ ## &
( 6 :
&';
D
active ' inactive
$
&+
# - 6 # ## #- #- $
&+
# #-
1
# &' ' 6C ' &+
# #- 1
# &'
' ' # - 6 : &'; active ' inactive -
# # %&
&+
# 1
#5 ( # ##
D
enable ' disable
$
&+
# # 6 +'& :6 #@ (%@ #+; &' :# '=
6&#;@ ' &' : 5 ##
( # b:disabled="false" ## #; enable '
disable -
# # %& 1
&+
#E & ' &' ## (
:7 %# -
# #((' &+
# ## ' &'@ &5 5#+
-
#;
G ( # -& 6 # ## # ( # s:setatt #( : # s:with
#( # # ## # &+
# # #
# #;@ 6 *+%&
<s:event b:on="disable">
<s:setatt b:disabled="true" class="input-standard" />
</s:event>
G & # set@ remove ++
' 6 (
( +-
( ## #
-&
7# -
# &
( %%& # # -
# # 6 +'& -
# &
(
## -
# %' # %
# &+
#@ &#( 5 & #
-
# ( #((' ( # b:eventblock="false" ## # 4 +
6+#
@ +,
#$ G;<%
"+%&+
#
( # 4 '& # >/
%
G +%&+
# # 6 +'& 6 # & # >/ % 5 ''
( # ## #
b:focustype="htmltable" # # b:xhtml #( && 6 # # & #
6#+
## (# 6 ( # 5 ' 1 5 bpc_focusCurrentElement -=
& #
# 6#+ # >/ % ## #&5 6 : && 1
&+
# 6;@ ' # bpc_focusLastElement - & #
# 6 #+ ##
%-&5 6 : # 1
# blur -
# 6';
6&&1
( *+%& 1 # & '6
' 1#
# >/ % 7# & # focus
-
# #((' 1
# 6 #+ &#'
&',
)4 + ; 1
<s:behavior b:name="focusvariables">
<s:event b:on="focus" b:action="alert" b:value="{concat ('The current focus element is ',
$_focusCurrentElement, ' the previous was ', $_focusLastElement)}" />
</s:behavior>
<b:xhtml b:focusitem="true" b:focusindicator="true" b:focustype="htmltable"
b:behavior="focusvariables">
<table cellpadding="2" border="1">
<thead bgcolor="#9acd32">
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
<td>Heading 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
?= @ $&& !(# !-'
9
& = <td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
</b:xhtml>
(
( # ,6&# 7-(#
L5
-' # '6&# 5 ## ' # -(# #( 6#@ 6(%@
' 6#+@ 5 # s:whenactive #( 1 5 '6
s:keys &+
#@
1%% 6 '6
( 5 :# b:keys ## #X; ' # ++
' #5 #(( G
# #( &
@ ' -
"
# 6&&1
( *+%&@ # #*# '6
' ## - &&' focus1
- '6
## 1
6#+ ## # - (# 6@ ## #
# # # ' # [6# 5 :# '#-#' 5 # %&
( =
#
# #+; # -(# #1
#*# :&& 6+ &+
# #+#&&5 6=
(% ' 6# &+
#; "
#'@ 5 +# # &6# ' (# 1 5
+
)4 + &',
)4" / +
<s:behavior b:name="focus1" b:focusitem="true" b:focusindicator="true">
<s:whenactive>
<s:keys b:keys="right" b:action="focusgroup-next" b:bubble="true" />
<s:keys b:keys="left" b:action="focusgroup-previous" b:bubble="true" />
<s:keys b:keys="tab" b:bubble="false" />
<s:keys b:keys="tab+shift" b:bubble="false" />
</s:whenactive>
</s:behavior>
<div style="position: absolute;left:50px; top:50px;">
<textarea b:behavior="focus1">Textarea 1: Enter some text</textarea>
<textarea b:behavior="focus1">Textarea 2: Enter some text</textarea>
<textarea b:behavior="focus1">Textarea 3: Enter some text</textarea>
</div>
b:focusindicator ## # -&3 # 6' &+
# 5 #
( '##'
&
' # &+
# "
# *+%& -@ # 6 +'& +%&+
#' #
1&' # - & 1## b:focusindicator # # true
6&&1
( *+%& '+
## 1 5 +%&+
# # focus-cellup ' focus-cellup ++
' # &@ ' 1 5 -' # '6&# 5
&',
)4# /5 :
%
<s:include b:url="../controls/backbase/b-listview/b-listview.xml" />
<s:behavior b:name="focus" b:focusitem="true" b:focusindicator="true">
<s:whenactive>
<s:keys b:keys="up" b:action="focus-cellup" b:bubble="true" />
<s:keys b:keys="down" b:action="focus-celldown" b:bubble="true" />
?= @ $&& !(# !-'
98
& = </s:whenactive>
</s:behavior>
<div focusroot="true">
<table b:behavior="b-listview" style="position: absolute;left:20px; top:25px;">
<thead>
<tr>
<th>Movie</th>
<th>Genre</th>
</tr>
</thead>
<tbody b:focusgroup="true">
<tr>
<td b:behavior="focus">The Seven Samurai</td>
<td b:behavior="focus">Drama</td>
</tr>
<tr>
<td b:behavior="focus">City of God</td>
<td b:behavior="focus">Drama</td>
</tr>
<tr>
<td b:behavior="focus">Donnie Darko</td>
<td b:behavior="focus">Drama</td>
</tr>
<tr>
<td b:behavior="focus">2001: A Space Odyssey</td>
<td b:behavior="focus">Drama</td>
</tr>
</tbody>
</table>
</div>
G -(# #( # # & 1 ' &+
( # 1 5
+
)4" + D ,, :
%
,(=$
'=,% ' !3
(
,( ' '%@ ' 3 #1 *#+&5 6& ' 1'&5 ' 15 6 #
+
%&# )" &+
# 1# # + G + &+# 5 &+
# '(( &
' 3 & 1# ./ 4 *+%&@ 5 '( ' '% # & 1@ div &+
#@
&
%
&+
#@ &# #+@ ' 6+ &+
# "
@ # +%&+
#'
'&#-&5 6&&1
D
D
D
D
# # b:drag ## # # + &+
# '(( &
# # b:draggroup ## # # + (% 6 &+
# '(( & - 6
# &+
# # # b:dragreceive ## # # + &+
# - # '% '(( &
&+
#
# # b:resize ## # # + B# 3 &
G - & 1#
-
# '& '6
' 6 '(=
'='%
6
#
&#5 4 + 6+#
@ F #$ %
,((
( ' ,%%
( &+
#
+ &+
# '(( &@ '' b:drag ## # # # &+
# ' # &(&
?= @ $&& !(# !-'
99
& = #
( '
#6 # -&
"
# 6&&1
( *+%&@ 5 '(=
'='% # # # &@ ' & '(=
'='% 1 # # & # (
3 # # &@ # '( &+
# 6+ #=
& # # b:dragmode '# # %%
6 # '((' &+
# b:dragreceive # &+
# ## - '(( & &+
# :# -& # &(=
& #
( '
#6 6 # &+
# ## -';
&',
)4( /$/
<table b:behavior="b-listview" b:drag="outline-example" b:dragmode="real" style="position:
absolute; top: 30px; left: 30px;" width="400">
<thead>
<tr>
<th>Movie</th>
<th>Genre</th>
<th>Directory</th>
</tr>
</thead>
<tbody b:dragreceive="a">
<tr b:drag="a" b:dragmode="outline-none">
<td>The Seven Samurai</td>
<td>Drama</td>
<td>Akira Kurosawa</td>
</tr>
<tr b:drag="a" b:dragmode="outline-hidden">
<td>Donnie Darko</td>
<td>Drama</td>
<td>Richard Kelly</td>
</tr>
<tr b:drag="a" b:dragmode="outline-none">
<td>The Godfather</td>
<td>Crime</td>
<td>Francis Ford Coppola</td>
</tr>
<tr b:drag="a" b:dragmode="outline-hidden">
<td>Scarface</td>
<td>Crime</td>
<td>Brian De Palma</td>
</tr>
</tbody>
</table>
<table b:behavior="b-listview" style="position: absolute; top: 150px; left: 30px;"
width="400">
<thead>
<tr>
<th>Movie</th>
<th>Genre</th>
<th>Directory</th>
</tr>
</thead>
<tbody style="height: 10px" b:dragreceive="a">
<tr />
</tbody>
</table>
b:dragmode outline-hidden '# ## # '((' &+
# ++'#&5 =
+-' 6+ # #
( &+
#
+
)4# ;
/
?= @ $&& !(# !-'
& = b:dragmode outline-none '# ## +%#5 % %'
&+
# +
# #
( &+
# #& # '% +%&#'
5 # '(('
+
)4( 7
/
b:draggroup & '
#6 '(( & &+
# G # + &+
#
1
'1 '(( & ' %65 # &+
#@ # '@ ## # '((' 5 G '# # (%%
( %
# 6 '((
( 5 ##
( # b:drag ## #
# &+
# 1# # + '
#6 # b:draggroup ## #
$
&+
# -
( '(( & &+
# +%#5@ # # +# - # 1
% # ./ #
G %& '(=
'='% &+
# &#-@ ##@ &# %#
D
6
9
% ,
+# '%%' # -
(
(%@ #1 #5 #
# # ##
( %#
H
#5 '%%'
# # -
( (%@ #5 % # # %%%# %#
1#
# -
(
(%O 6&1 "6 #5 &( #
# -
( (% #5 1&& # -=
( (% # 3
D
$
% ,
+
1 #5 ( '%%' -
6
#5 # '%%' # -
( (% H
'%%' # -
( (%@
&#&5 %#
' &+
# ' # %# #+&- # # -
(
&+
#O 6&1
# b:overflowfix="true" # b:draggroup &+
# # %-
# "
#
#
*%& 6+ ( 1
( b:dragmode="real"
!3
( &+
#
G 3 5 &#-&5 &#&5 %#
' &+
# 5 ''
( # b:resize #=
# # # # G '' # b:resize ## # # -#&&5 5 .>/ #( =#(
H
5 +- 5 + # # '( 6 &+
# 1# # b:resize ## # '=
''@ # ( # 3 # '# # &+
# 3 & >&'
5 + ##
'1
' +- # # '' '#
# 3 # &+
#
$ # # &15 ' & 6 &+
# # &+#'&5 3 &@ 5 # #
b:minwidth ' b:minheight ## # # # # +
++ 1'# ' (# 6 &=
+
# %*&@ 6 *+%& 200px
-& 6 # b:resize ## # '# # '#
1 5 3 #
&+
#
D
D
D
D
D
D
D
D
all #%@ ##+@ &6# ' (# '
nw #% ' &6# ' &5
n #% ' &5
ne #% ' (# ' &5
e (# ' &5
se ##+ ' (# ' &5
s ##+ ' &5
sw ##+ ' &6# ' &5
?= @ $&& !(# !-'
& = D
D
D
w &6# ' &5
horizontal &6# ' (# ' &5
vertical #% ' ##+ ' &5
' &1 1 *+%& 6 3 & B# 5 & ##
( # ## #
b:resizemode # # -& line@ outline@ real
&',
)4) 6
- &
,
<div b:resize="all" class="MyClass">You can resize this border &lt;div&gt; IN ALL
DIRECTIONS</div>
<div b:resize="vertical" b:minheight="200px" class="MyClass">You can resize this border
&lt;div&gt; VERTICALLY</div>
<div b:resize="horizontal" b:minwidth="200px" class="MyClass">You can resize this border
&lt;div&gt; HORIZONTALLY</div>
<style type="text/css">
.MyClass {
position:relative;
border: 2px solid #000;
background: #00C0C0;
margin: 10px;
padding: 10px;
font-family: Verdana;
font-size: 10px;
}</style>
6&&1
( &# %
# ''#
& 6
#
&#5 ' 6+#
# 3
(
D
, -D 5 &+# # 3
( 6 &+
# ( # ## #
b:minwidth@ b:minheight@ b:maxwidth@ ' b:maxwidth@ ' 5 %65 .2# <5 1 1 # &+
# #
3 #' 6
b:resizeconstraint
D
b:resizemode="line" 1
5 %65 # ## # b:resizemode="line"@ 5
& # b:lineconstraint ## # # %65 &+
#@ ( .2#@
6+ 1 # &
(# # (# 1'# 6+
D
$bpc_resizeLine 5 # .2# - & # %65 # #5&
( 1
' # %%&' 1
&
=3
( : 5 '6&#@ # # # border:4px solid
#AAA;
D
!
-D # '6&# b:resizemode 6 %
&# 3
( line G
-' # 5 %6
( # b:resizemode # %
&# &+
# 5 1
#
# 3@ 6 *+%& 5 # # ##+ ' #% %
& # %#-&5
b:resizemode="real" ' b:resizemode="outline" G 3 %
& 1#
%
#(@ + ' %* $ %
& %6' 1# S # 3' H
5 =
3 %
#(@ # %
#( +
#
'
D
-D 1
3
( # &@ # ++
'' # %& -5 td '
div &+
# overflow:hidden # %-
# # &+
6+ ( 3' +&=
& #
# #
# ' G +# & # - %''
( # th td =
# # 3' ' (- # &#
b:columnmode ## # ## &5 %%& 1
5 3 # & 5 '6&#@
# # & (1 &( ' +&& 5 3 # &&+
H
5 %65
b:columnmode="fixed"@ # # & + 6*' ' 1
5 3 &+
@
&5 # &+
*# # # (1 +&& &(
"
+ ##
@ 3
( ' #&5 1 3
( # ##&5
% & 4 *+%&@ #5
( # 3 # 6&&1
( &+
# &# #
(
- = &&-& &+
#@ = &#- &# %#
' &+
#@ 3
# 6 = &# &+
#@ ' 3
( ' 6 &+
# ## 6*'
$''
( -
# 2%(#
-
# %%(#
&&1 5 # % -
# 6+ )" &+
# # # G
%%(# -
# 6&&1
D
D
D
b:followstate = &&1 5 # '6
&#
% ' 5
3 # ## 6
'66
# )" #& - &+
# 6&&1 # ## :&#' '&#'; 6 # -' &+
#
b:observe = % && -
# #((' # -' &+
# # # -
&+
# b:observe + (
+%&+
##
6 b:followstate@
1 &5 6&&1 # ## :&#' '&#'; 6 # -' &+
#
Event bubbling = ## -
# %' # %
# &+
# G ?= @ $&& !(# !-'
& = D
' & # - 5 ##
( # ## # b:bubble="false"
b:eventblock = '#-# -
# &+
# 1
''
##
$# 5 #+@ &+
# %%&#
## @ ## G %65 # '6&# ## 6 &+
# ( # b:state #=
# # :%65 -& selected deselected # ./ #( 1 - & #
'
( # # ##@ 6 *+%& +'& #- ' - & 1
# # &=
#' ##@ ' ''
1
# # '&#' ##
G - # '6
# -& %
##
6 &+
# 1
6
# ## :
; 4 + 6+#
@ , #$ G;@%
"6 &+
# #((' 5 select #
1& # &+
# &'5 #
&#' ##@ - -@ # &+
# -
# '& # #((' 4 *+%&
&',
)4* 1
1
<div b:state="selected">
<s:event b:on="select" b:action="show" />
<s:event b:on="construct" b:action="select" />
</div>
6&&1##
4&&1## &&1 5 # 5
3 &+
# ' ## ( G '' #
b:followstate ## # # &+
# :# -; # - ' # # #
&+
#O :# -'; ## ( b:followstate ## # -& .2#
*%
%
#
( # # -' &+
# - &+
# 6&&1 # ##
:&#' '&#'; 6 # -' &+
#
"
# 6&&1
( *+%&@ # &
-
# '& '6
' # ( # ## 6+
&#' # '&#' #+ # &
&' b:navbox &+
# 6&&1 #
## 6 # &
@ #6 &
( # &
%
' & # - *
&',
)4. +5
<div>
<a id="openclose" b:cursor="pointer">Open/Close All Boxes</a>
<s:event b:on="click">
<s:task b:action="select-deselect" b:target="id('openclose')" />
</s:event>
</div>
<br />
<div>
<b:navbox b:followstate="id('openclose')" style="width: 250px;">
<b:navhead>The Seven Samurai</b:navhead>
<b:navbody>
<p>A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune. The
film takes place in war-ridden 16th century Japan.</p>
</b:navbody>
</b:navbox>
</div>
<br />
<div>
<b:navbox b:followstate="id('openclose')" style="width: 250px;">
<b:navhead>2001: A Space Odyssey</b:navhead>
<b:navbody>
<p>An influential science fiction film directed by Stanley Kubrick.</p>
<a href="http://kubrickfilms.warnerbros.com/">More Info</a>
</b:navbody>
</b:navbox>
</div>
<br />
<div>
<b:navbox b:followstate="id('openclose')" style="width: 250px;">
<b:navhead>Life Is Beautiful</b:navhead>
?= @ $&& !(# !-'
& = <b:navbody>
<p>A Italian language film which tells the story of an Italian Jew who uses his
fantastical imagination to survive a
concentration camp with his young son
Joshua.</p>
</b:navbody>
</b:navbox>
</div>
-
b:observe ## # % && -
# #((' # -' &+
# # # =
- &+
# -& 6 # b:observe ## # .2# *%
#(#
(
# -' &+
# - &+
# - && # -
# 6 # - &=
+
# 4 # - &+
# # %
' # -' &+
# -
#@ 5 ' #
# -
# ' %6* # -
# + 1# observe-@ 6 *+%&
b:on="observe-command" b:observe + (
+%&+
##
6
b:followstate
&',
)40 8
9
<p id="observed" b:cursor="pointer">
<s:event b:on="command">
<s:task b:action="show-hide" b:target="*[2]" />
</s:event>
<div>Click here to show and hide the
<em>observed</em>
element
</div>
<div style="font-weight: bold; color: #04435E;">This is the observed element</div>
</p>
<p b:observe="id('observed')" b:cursor="pointer">
<s:event b:on="observe-command">
<s:task b:action="show-hide" b:target="*[2]" />
</s:event>
<div>The
<em>Observing</em>
element mimics the behavior of the observed element.
</div>
<div style="font-weight: bold; color: #CE0000;">...Observing Element</div>
</p>
-
# &
##
( # b:eventblock ## # # true &+
# ' & && %# -
#
# ' # &'
G # b:eventblock ## # # # +'& '&(
1 &5 # +'& '&( %
' # %# G -& # -
# & 5
( # blocked-mousedown -
#
&',
)42 &9
<div b:eventblock="true">
<s:event b:on="blocked-mousedown" b:action="alert" b:value="Please Close the Dialog!" />
<a>Click me</a>
</div>
-
# &
(
-
# &
( ## 1
-
# #(('@ ## # -
# %' # %=
# &+
# 4 *+%&@ 1
5 & ##
@ # & -
# #((' "6 -
# '& '6
' 6 ## &+
# 6 # & -
#@ # #((' &
-
# #
& #( # B# 5 #& # # #%=+# &-& :#
'+
# B#; ' #(( && -
# '& '6
' 6 # click -
#@ & 5
# ## # b:bubble="false"
"
# 6&&1
( *+%&@ b:on="click" -
# '& '6
' 1#
# div
?= @ $&& !(# !-'
& = id="parent" &+
# H
& 51 ' # div@ 6 *+%& =
#' div &+
#@ # & -
# J &J % # 5 &
( 6 -
# '&
6 # & -
# -
# &
( #6 && B# *%# 6 # div &=
+
# 1 #
# s:event #( *#
'' 1# # b:bubble="false" ## #
&
( 5 6 # # &+
# #(( &# * 1# # #*# \-
# &
(]O
&
Three ''#
& & -
# '& '6
' "# #((' 6# 6
-
# &
( # %&
&',
)4 &9
<div id="parent">
<s:event b:on="click" b:action="alert" b:value="Event bubbling!" />
<div>
<a>One</a>
</div>
<div>
<a>Two</a>
<s:event b:bubble="false" b:on="click" />
</div>
<div>
<a>Three</a>
<s:event b:on="click" b:action="alert" b:value="Local alert" />
</div>
</div>
-
# &
( %%& # %# -
# click@ command@ ' mouseover@
# # 6 -
# select ' show 4 + 6+#
@ * +,
#$ D@% $''
( 66#
$ #
#
-& 66# ## %&# % # + 6 #% 6+ ## # 6
15 ## # %% +#' $ #
#
6+' 5 + s:fxstyle
#( 1# + 66# #( '6
1 # &+
# ## #+ &'
-&&5 # # # -
# ## #(( # 66# #
%&' -
# '=
& #&#@ *#
'
( (-
&+
# 1# ''#
& -& %%#
Example 6.22 - Defining Effects
<s:behavior b:name="info-trans-example">
<s:event b:on="select">
<s:fxstyle b:height="100%" />
</s:event>
<s:event b:on="deselect">
<s:fxstyle b:height="0px" />
</s:event>
</s:behavior>
G # #
#
66# 6&&1
D
D
D
D
& ' #
-
#
#
^J6*#&J
& ' #
G 5 #5& ## *%' +&&5@ background-color font-size@ # # #
#
66# #5& 1 # *%' =
+&&5@ font-family background-attachment@ # ' s:fxstyle@ # # % & # &&# # % ## #-
#1 ## s:setstyle #( ' s:fxstyle #( +&C *%# 1# # 6+ # #
#
++'#@ ' 1# # &## # #
#
# %& + 6 #% - %' 6 #+@ 1 ( 6+ 61 '' +&&
' # -& +
#
-
"
# 6&&1
( *+%&@ #
#
66# #' 6 # (
' & G %=
?= @ $&& !(# !-'
& = %&5 # - # &+
#@ ( # 5
#* <tr b:behavior="fx-color"> H
mouseenter -
# # %&@ # (
' & 6 # &+
# ('&&5 ( #
# & #7d8fce - # 6 +&&
' H
mouseleave -
# #
%&@ # (
' & 6 # &+
# ('&&5 ( # # & #7d8fce -
# 6 +&&
'
&',
)4" /
<s:behavior b:name="fx-color">
<s:event b:on="mouseenter">
<s:fxstyle b:background-color="#7d8fce" b:time="250" />
</s:event>
<s:event b:on="mouseleave">
<s:fxstyle b:background-color="#ffffff" b:time="1000" />
</s:event>
</s:behavior>
#&&
( #
G %65 # 6&&1
( ## # # #& #
#
66#
D
D
D
b:time
"
'#@ +&&
'@ 1 &
( 66# # # +%&# ,%
'
( #
+
# 6 #+ (-
@ # #
#
1&& +%&#' + & #% + 6 #% # # # +%&# # #
#
# &&5 '#+
' 5 #
+
# 6 #+ (-
1-@ # & '#+
' 5 # % %' 6 #
+
1 # 1 ## %6+
( # #
#
6# #
+
@ # +# # #
#
1&& %%
b:motion
,#+
1 # '-'& #% 6 # #
#
&# # # "
&
#
#
:b:motion="linear";@ && #% 6 # #
#
6 <& 3@
# +#
%% +# ' <
#& $ &(#+ #
#
:b:motion="log";@ # # '@ ## ('&&5 ' 3 1#
#% # +#
# -5 &1 # 6#@ ' -5 %' # #
' G & 5 1
#+ A-%# 6
#
# '#+
1 #
+#
b:cancel
,#+
1# %%
1
#1 #'#5 66# #-#' # #
+ #+ 4 *+%&@ +(
## ##
-
# '& 6 mouseenter -
# 1 ## & #
#
"6 # + ##
#
-
# '& 6 mouseleave -
#@ 1 ## %%
( & #
#
@
#
5 - #1 6&#
( #
#
6 # +- # + # ' &- # ##
<&5 5 '6&#@ b:cancel true # 6#
#
#
++'#&5 #' 1
# ' #
#
#((' "6 #
b:cancel # # false6&@ #
# 6# #
#
&&1' # +%&#
6 # ' #
#
##'
8 %#
( 1 >#5 '
+
(
"
&# 2( "
#6 :2"; 1 #@ %( < )!/ )!/ ' # + 5 &#
@ ' # 1
( #5 B# &# 6 # )!/ # ' 5 -# #+ $
$A$. %%&#
(& 2( "
#6 :2"; ## (& )!/ :
#
# '5
+&&5 &'' # # + %(; +
( # '66&#
6 # # + %6 &#
+ ' %( -(#
%#
"
$A$. %%&#
@ # - & #
# 6 %( '#+
' '5
+&&5 ' # %#@ ' # ' # &15 %
' # +%&5 -(#
( # 1 #
#
4 *+%&@ %%&#
1 --1 6 %'# 1
' # 6&#
( #@ %'# ''
1
%%& 6&# %%' # %#
%( ( 1
%'# # )!/ # 6&5 # + &#
(& 2(
?= @ $&& !(# !-'
& = "
#6@ 5 - # # 6(+
# '
#6 6(+
# '
#6 # #
(
## %% 6# # I +@ ' # %# %'#' '5
+&&5 1## &'=
( # %( H
# 6(+
# '
#6 %'#'@ # 1 & '' # # #
#5@ # + +
+ #+#&&5 %%# # ' 61' ##
' # 6(+
# '
#6@ # %%&#
'#+
1 # #
G %# 1 #5 %1' 1 %%&#
( #
s:history ' # b:name="browser" ## # # %(+ # 1 ' #
41' -(#
##
( -
# ' # 4 *+%&
Example 6.24 - Browser History
<s:behavior b:name="history">
<s:event b:on="select">
<s:history b:name="browser">
<s:task b:action="select" />
</s:history>
</s:event>
</s:behavior>
H
# s:history %'@ # # # #
''' # # 1 #5
&# &#
( %'#' )!/ #
( # 6(+
# '
#6@ 6 *+%& #[0]@ #[1]@
' :-5 1 #5 #+ +
# # + ;
+
( 2" %%&#
< 5 # '
#65 ## ( 5 $A$.
# # &# # # %#
# '' #5 #+ G #
# + 5
''
( b:bookmark ## # # # s:history #( 4 *+%&
Example 6.25 - Bookmarking
<s:history b:name="browser" b:bookmark="{@id}">
<s:task b:action="select" />
</s:history>
#
# 6 # b:bookmark ## # ' 6 # + %# 6 # )!/ ## # #
#
(@ # &&5 # .2# *%
4 *+%&@
b:bookmark="{@id}" .2# # # # ", 6+ # &+
# # s:history #( %%&' # :G ## + '-
' + ( # # .2#
6
#
;
"
# 6&&1
( *+%&@ 5 + # # # * H
5 & #
# @ # ## # )!/ (@ 6 *+%& ...#SevenSamurai[2]@ &&1
( 5 #
+ # # - &&' #5 H
# &#'@ #
s:history #( # 1 #5 #+ 6 # # @ ( # id ## # # +
# # b:name="browser" ## # & # # -(# ' 61'
( # 1 #5 ##
b:on="construct" -
# #((' 1
# %%&#
:;&'' H
5
- +' 6 *+%& # # &&' -
+@ # # &#' (
# ", # + %
# # -& 6 # + ' ( #
$bpc_bookmark .2# - & : -& &5 #
# +@ ' #
%# 6 # )!/ # PQ #5 66* $&@ #' 6 &#
(@ 5 ' #=
#
( 1&&@ &'
( 6& 6+ %# # + %
# #;
6& ' # *+%& -& & 5 #&&#
explorer/data
'#5
Example 6.26 - Adding Bookmarks
<s:event b:on="construct" b:action="select" b:target="id($bpc_bookmark)" />
<s:behavior b:name="history" b:behavior="b-tab">
<s:event b:on="select">
<s:super />
<s:history b:name="browser" b:bookmark="{@id}">
<s:task b:action="select" />
</s:history>
</s:event>
</s:behavior>
<b:tabbox style="height: 100%">
?= @ $&& !(# !-'
& = <b:tab b:label="2001" id="2001" b:url="data/2001_short.xml" b:behavior="history" />
<b:tab b:label="Seven Samurai" id="SevenSamurai" b:url="data/seven_short.xml"
b:behavior="history" />
<b:tab b:label="Life is Beautiful" id="LifeisBeautiful" b:state="selected"
b:url="data/bella_short.xml" b:behavior="history" />
<b:tab b:label="The Godfather" id="llama" b:url="data/godfather_short.xml"
b:behavior="history" />
</b:tabbox>
7# b:behavior="b-tab" ## # ' # s:super #( # *+%& #
# + # # ' -(#
#& 1 %%&5@ #5 # &#' # =
#5 + "6 5 1
# # - = ##
#5 1## +@ +%&5
# #5 1## + ## #
8 #
( #+ >#5 7-(#
G # 5 1
#5 5 %65
( + # #
browser 6 #
s:history b:name ## # G +# #
%(+ # 5 1
' # 41'
-(#
##
( # forward ' backward ++
' 4 *+%&@ %& #
- - 1# # 6&&1
(
&',
)4* $ , ;%
<s:behavior b:name="history" b:behavior="b-tab">
<s:event b:on="select">
<s:super />
<s:history b:name="myHistory">
<s:task b:action="select" />
</s:history>
<s:task b:action="bookmark" b:value="{@id}" />
</s:event>
</s:behavior>
<s:event b:on="construct" b:action="select" b:target="id($bpc_bookmark)" />
<div>
<b:button b:action="backward" b:history="myHistory">&lt; Previous</b:button>
<b:button b:action="forward" b:history="myHistory">Next &gt;</b:button>
</div>
?= @ $&& !(# !-'
8
& = %# = 4+&3
( 2##
-
$ , (
## ' # %&# 6
#
&#5 6 @ ' # %=
# # ## 6 # '+
# 6+ # - G - # ' #
6&&1
(
D
D
D
D
,6
# -& %
##
6 &+
# 1
6 # ##@
@ ( # s:state #(
,6
# ##
:# ' ++
'; ## *#' 1
-
#
# %& :
( # s:event #(;
4 + 6+#
-
#@ - +,
.! #$ D>%
,6
# 5 ## #- 1#
&+
# s:whenactive
# # #& ## # 6 &+
# ( s:initatt
"
./@ 5 '6
- ( # s:behavior #( + 6 # -@ 6
*+%& s:behavior b:name="mybutton"@ ' # (
# - # )" &=
+
#@ 6 *+%& b:button b:behavior="mybutton" - # 6+ #
- &&1
( 5 # # 5 6 6<
#&5 ' -
# ' ++
'
!%
'
( # ## ( :;
G - # '6
# -& %
##
6 &+
# 1
6
# ## :
; H
# 6 # ##@ 5 %65@
1# &@ 1 # &+
# %% '
( # 6&&1
( + ##
D
D
D
D
b:normal = # #5& & # 1
# &+
# # ##
b:hover = # #5& & # 1
# + - - # &+
#
:%
' # - ' +- -
#;
b:press = # #5& & # 1
# &+
# ( %' :%
' #
# #- ' +'1
-
#;
b:disabled = # #5& & # 1
# &+
# ' &'
4 *+%&@ 5 (
& # ## 6 # &+
# # ( # &
Y 6& 6 &+
# 6&&1
&',
*4 /
1
9
<div b:behavior="statebehavior">
Click or hover here to see the
<code>s:state</code>
tag in action.
</div>
<s:behavior b:name="statebehavior">
<s:state b:on="deselect" b:normal="sb" b:hover="sb sb-hover" b:press="sb sb-press" />
<s:state b:on="select" b:normal="sb sb-selected" b:hover="sb sb-selected sb-hover"
b:press="sb sb-selected sb-press" />
<s:event b:on="command" b:action="select-deselect" />
</s:behavior>
<style type="text/css">
.sb {
border: 2px solid #889;
padding: .3em;
cursor: pointer;
}
.sb-hover {
background: red;
}
.sb-selected {
background: blue;
color: white;
}
.sb-press {
background: yellow;
}</style>
& ## %%&' # &+
# ( # s:state #( #
#' # *#
( & %%&' # &+
#
"
#
( -
$ - # - ## -
# '& '6
' 6 # ,
-
#
-
# 6# # s:super #( &5 %' 6# # *#
6 # #' =
-
"
# 6&&1
( *+%&@ #
- &&' movedown '6
-
# '& 6
?= @ $&& !(# !-'
9
& = +-
( B# '1
# B# 5 "# # # zoom - ## '&
# -& #5& ( s:super #( + ## # -
# 6 # + #5% # #' - %%&' 6 ##
( # # - ##
6
## -
#
&',
*4 9 <s:behavior b:name="zoom">
<s:event b:on="click">
<s:fxstyle b:font-size="15px" />
<s:fxstyle b:background-color="#B8B8B8" />
<s:fxstyle b:font-size="20px" />
<s:fxstyle b:background-color="#888888" />
</s:event>
</s:behavior>
<s:behavior b:name="movedown" b:behavior="zoom">
<s:event b:on="click">
<s:super />
<s:task b:action="movedown" b:target="." />
<s:task b:action="show-hide" b:target="span[@at='moveddown']" />
</s:event>
</s:behavior>
<div>
<p style="background-color: #F0F0F0; font-size=10;" b:behavior="movedown">Life is
Beautiful &gt;&gt;
<span at="moveddown">is an Italian language film which tells the story of an Italian
Jew who lives in a romantic fairy tale, but must learn how to use that dreamy quality to
survive a concentration camp with his young son Joshua.</span>
</p>
<p style="background-color: #F0F0F0; font-size=10;" b:behavior="movedown">2001: A Space
Odyssey &gt;&gt;
<span at="moveddown">is an influential science fiction film notable for combining
episodes contrasting high levels of scientific and technical realism with transcendental
mysticism.</span>
</p>
<p style="background-color: #F0F0F0; font-size=10;" b:behavior="movedown">The Seven
Samurai &gt;&gt;
<span at="moveddown">...takes place in war-ridden 16th century Japan, where a village
of farmers look for ways to ward off a band of marauding robbers.</span>
</p>
</div>
G %& # s:super #( &' &+
# 6 s:event@ s:parallel s:sequential #(
)=,6
' #&
G # s:htmlstructure #( # # 5 1
#& )
( >/ #=
# +%- # +%&+
##
6 '&#- #6 5 %%&5
( #& '6
=
#
6 #6 #& ' >/ ' <
G #
# 5
1 %%&#
( #+ #( :# b:name ## # 6 # s:htmlstructure #(;
#&@ &#' # C:\Backbase\3_1_4\controls\backbase '#5@
%-' *+%& 6 1 # +%&+
# # #(
&' ' 6 # s:htmlstructure #( &
( # # >/ % &+
# '
## # ## &
( # # ./ % # &'' 1#
# #(@ *%# 6
# b:behavior ## # *#
'
( >/ &+
#@ ' & # s:innercontent #(
4 + 6+#
@ , #$ G;@% ' 4 #$ 5@% #+&##
s:htmlstructure #( +% .>/ #( ' # ## #@ ' #
<s:innercontent /> 1 # %&&' 6 # #
# 6 # #+ #( ##
- # ##
?= @ $&& !(# !-'
& = <s:innercontent /> +# &15 - .>/ &+
# # %
#
s:htmlstructure #( +# - b:name ## # -& 6 # b:name ## =
# + # #+ #( + ## ' # - # ='6
' #& 6&&1
( *+%& 1 # >/ ## 6 ##
Example 7.3 - User-Defined Controls
<s:htmlstructure b:name="c:button">
<div style="position:relative;">
<div class="c-button-l"></div>
<div class="c-button-m">
<s:innercontent />
</div>
<div class="c-button-r"></div>
</div>
</s:htmlstructure>
# #&@ ( # 6&&1
( 5
#*
Example 7.4 - Using a Control
<c:button>The content of the button...</c:button>
<p>At runtime, the content of the
<code>&lt;c:button /&gt;</code>
tag is placed in the
<code>&lt;s:innercontent /&gt;</code>
tag
of the user-defined control.
</p>
./ +% -' ' +5 # ' 6 #+ #( H
5
# #&@ # #+ +% # #
b: s: 4 *+%&@
s:htmlstructure b:name="b:deck" # &&1'@ # 5 #' +%
6 5 1
@ 6 *+%& s:htmlstructure b:name="c:deck"
$%%&5
( ,6&# -
s:default #( ' # (- #( '6&# %
##
4 *+%&@ # =
#& # s:default #( 6 ##
( '6&# #5& ' - 6 #
#(
H
( @ #&#%@ +'&@ 6 * ' # 1'(# ' # ' %&
& -@ # &'5 # 6 # & Y 6& ' - 6
5 1 %%&#
O +%
#
s:default #( < # 6&&1
( ## #
D
D
D
b:tag = '6
# #( + :
&'
( # +% %6*; 6 1 #
s:default #(O ## # &' %%&5 #
b:attribute = #
( 1# # + 6 &+
#O ## # :%# # -&
b:behavior class;
b:value = #
#
( 1# # -& # #
6&&1
( *+%& &&## 6 * 1'(#@ 1 6&&1 # -
&',
*4( 1
/
<s:default b:tag="b:infobox" b:attribute="b:behavior" b:value="b-infobox" />
"
# *+%& -@ 5 6 * 1'(# 1&' 6&&1 %6
\ =
6 *O
$
# *+%& # &&## '66
# %%&#
@ +'&
#5&
- +'
* 1'(# 6&&1
( #
&',
*4) <s:default b:tag="b:modal" b:attribute="class" b:value="b-modal" />
?= @ $&& !(# !-'
& = "
# *+%& -@ 5 +'&
\ =+'&O & %%#
* 1&'
'' '
( # # %6 + 1'(# < '6&# @ 1 #
# #5& ' -
'6
#
1'(# # &'@ # '#%@ # +'& '&(@ # 6 *
' # #&#%
)=,6
' $## #
./ ./= ' &
(( 1 +
## 5 '' 5 1
## # #
&+
#@ '6
' 1#
< +% "
# 6&&1
( *+%&@ # b:tree =
#& #+ ## # '6
' # c: +% G +# #
++ # =
&'
+%
'&#
5
'+
#@
6
*+%&
xmlns:c="http://www.mysite.com/c" $ 1# 5 # ## #@ 5 #(# #
&+
# ( .2# ' ' # # -& "
# *+%&@ &
( # # '
#(( -
# '& '6
' 1#
- 1 # 6&&1
( # '6
'
D
6# # load ++
'C # url ## # &5 # _` # '=
# # # 2 # &- # .2# *%
' #
# &# #
( "
# @ # #(# # #+ ## # c:myurl ' #
# -& data.xml
b:destination '# 1 # #
# 6 # 6& &''C # &-
# -& 6 # #+ ## # c:mytarget@ 1 #&6 #
.2# *=
%
#(#
( # &+
# 1 id welcome@ ' &# # h2 &' &=
+
# 6 # &+
#
D
' # s:render ## '' #*#
' # # h2 &+
#@ # -&
6 1 & '-' 5 -&#
( .2# *%
:## #(# # -&
6 # b:label ## #@ # Films
Example 7.7 - User-Defined Attributes
<b:tree b:label="Films" b:behavior="loadindata" c:mytarget="id('welcome')" c:myurl="data.xml"
/>
<s:behavior b:name="loadindata">
<s:event b:on="command">
<s:task b:action="load" b:url="{@c:myurl}" b:destination="xpath(@c:mytarget)/div" />
<s:render b:destination="xpath(@c:mytarget)/h2">
<s:textnode b:label="{@b:label}" />
</s:render>
</s:event>
</s:behavior>
<div id="welcome">
<h2></h2>
<div></div>
</div>
H data.xml #
Example 7.8 - User-Defined Attributes
<?xml version="1.0" ?>
<table xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<thead>
<tr>
<th>Movie</th>
<th>Director</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Seven Samurai</td>
<td>Akira Kurosawa</td>
</tr>
<tr>
<td>Donnie Darko</td>
<td>Richard Kelly</td>
?= @ $&& !(# !-'
& = </tr>
<tr>
<td>The Godfather</td>
<td>Francis Ford Coppola</td>
</tr>
</tbody>
</table>
?= @ $&& !(# !-'
& = %# 8 = ,6
( ,# '
(
8 +%&#
(
./ #+%&#
( +
+ ' # #
6+ % 6 ./ 6+ # (
&
6+#@ # # ./ 6+#@ .>/@ ./@ ' #
6+#
%6+' ( #5&#@ ' # &# +-' # %6 #(# # %%&#
#( ' ./ #+%&#
( # + #( # ' ./@ *%# #
#( &- # s +% 6@ 6 5 6+& 1# ./@ # ./ #+%&#=
( +
+ ##-
./ #+%&#
( +
+ # 5 +%
# / 1
@ 1%
@ ' , ++
' '# # '# # #
6+'@
# #5&# %6+ # #
6+#
@ ' # #
6+ ++
' # #((
## ## # #
6+#
%
8 ,# % 6 ./ ## (# #
6+' 5 # #+%&#
( +
+ &&' # '#
'# %# ./ 6&@ # %# 6 # +
./
'5
)
( %# ./ 6& # '# # +# +%& ./ +#
1&&=6+'@ # # ' # < # - # & +% '&#
"#
+# & # ./ 6& "6 5 ( %%&#
-@ # ./ '# 6& '5
+&&5 (
#'
H
# '# %# 6 # +
./ '+
#@ # < %& #( # '=
&+# # # s:xml #( G +# %65 # b:name ## # 6 # s:xml #( G #
# + # <&5 6
# #
# 6 # s:xml #( +# 1&&=
6+'@ 1# 1
5 '6
# ./ %# ./ 6& 4 *+%&
&',
.4 /
<s:xml b:name="catalog">
<products>
<product>
<name>Apple</name>
<description>A Trendy Computer</description>
</product>
<product>
<name>PC</name>
<description>A Functional Computer</description>
</product>
</products>
</s:xml>
8 #5&#
$ #5&# ./ '6
( # 6 ##
## %6+ #
6+#
#5&# %# 6&@ # %# 6 # +
'5 6 ./ "
#
@ # s:stylesheet #( # # #(@ ' # b:name ## # ' # <&5
'
#65 #
#
# 6 # #5&# 6 #+%&#@ 1 .2# # +# %#
6 # '# H
+#'@ 6(+
# ' % 6 6+#
6+ # '#
#
%#' 1# %# 6 # #+%&# &# 6 # % =
#
' # # %%&#
' #' # # %6' '#
#
5 %%&5
( #=
#
# #5&#@ 5 #
6+ # '# 6+ # (
& 6+# # &=
+# 5 # 6+#
6&&1
( ./ #( %%#' 1#
# s:stylesheet #(
?= @ $&& !(# !-'
& = D
D
D
D
D
D
D
D
D
D
D
D
s:apply-templates = %#
& ## # select ## 5 '6&# # # node()
s:attribute = +
'#5 ## # name@ ' %#
& ## # select
s:call-template = +
'#5 ## # name
s:choose
s:copy-of = +
'#5 ## # select
s:element = +
'#5 ## # name
s:for-each = +
'#5 ## # select
s:if
s:otherwise
s:template
s:value-of = %#
& ## # select ## 5 '6&# # # *
s:when = +
'#5 ## # test
&',
.4 /
1%
<s:stylesheet b:name="product">
<s:template b:match="/">
<div style="height: 500px; border-width: 1px; border-style: solid;">
<s:apply-templates b:select="products/product" />
</div>
</s:template>
<s:template b:match="product">
<div>
<s:attribute b:name="innerHTML" b:select="name" />
</div>
</s:template>
</s:stylesheet>
#( ' # #+%&#
( +
+ +& # # # ./
#
'' 4 + 6+#
# ./ ##
' # #5&#@ &#
./ 6
(' 4 *+%& H&
P##%FF1111&+F*&F'6&#%Q 8 6+ ++
'
transform ++
' ' 6 '
( #+%&#
( #5&# "# %6 1#
#5&# # # #
6+ 1# % 6 '#@ ' 1 # '+
# # &#
%# transform ++
' # 6&&1
( ## #
D
D
D
D
b:stylesheet = %65 # + 6 # #5&# ( # 5
#*
$<stylesheetName>
b:datasource = %65 # + 6 # '# ( # 5
#*
$<dataSourceName>
b:destination = .2# ##+
# ' # '# # #(# &+
# #
'+
# # 1 # &# 6 # #
6+#
%&' 4 +
6+#
@ 9 #$ G5G%
b:mode = %6 1 # &# 6 # #
6+#
%&' &#- # #
#(# ## # - # -& asfirstchild@ aslastchild@ before@
replace@ replacechildren '6&# -& replace
&',
.4" , / 1%
<div id="output">
<s:event b:on="construct">
<s:task b:action="transform" b:stylesheet="$stylesheet" b:datasource="$datasource"
b:destination="id('output')" b:mode="aslastchild" />
</s:event>
</div>
8 /'
( ,# ' #5&# 6+ #
-
G &' ./ '# ' ./ #5&# 6+ # - ' #+ 6+ -=
& 6 &
#=' #
6+#
G # 6
#
&#5 # ' #
6+#
&
#='@ ( # %
-
6 6
#=
' # ?= @ $&& !(# !-'
& = #+%&#
( 5#+ ' ./@ # 5
#* # &
# # + ## ' 6
- #
6+#
# -='
6&&1
( ' *+%& #
6+ # %## ## # "# 1 1
./ '# ' ./ #5&# &'' ( load ++
' 4&&1
( # &'@
5 && # #5&# ' '# ( - & :$name;
&',
.4# / 1%
<s:task b:action="load" b:url="stylesheet.xml" b:destination="." />
<s:task b:action="load" b:url="catalog.xml" b:destination="." />
<s:task b:action="transform" b:stylesheet="$products" b:datasource="$catalog"
b:destination="id('main-content')" b:mode="aslastchild" />
H # stylesheet.xml #
# 6&&1
(
&',
.4( %
4',
<s:stylesheet b:name="products">
<s:template b:match="/">
<b:deck style="height: 400px;">
<s:apply-templates b:select="categories/category" />
</b:deck>
</s:template>
<s:template b:match="category" />
<!--see the Backbase\3_1_4\starterkits\petshop\stylesheet.xml file for the complete
stylesheet-->
</s:stylesheet>
$
' 1 catalog.xml #
# 6&&1
(
&',
.4) 4',
<s:xml b:name="catalog">
<categories>
<category>
<id>DOGS</id>
<name>Dogs</name>
<products>
<product>
<id>dog1-bulldog</id>
<name>Bulldog</name>
<desc>
General Appearance: The Bulldog is of
medium size and has a smooth coat, a heavy, thick-set, low-swung body, a massive short-faced
head, wide shoulders and sturdy limbs.
Height: 31-40 cm.
Weight: 24-25kg.
Temperament: The bulldog
is not a vicious dog breed and gets along well with both humans and sometimes other dog
breeds. Bulldogs are very friendly, but stubborn and protective.</desc>
<items>
<item>
<id>EST-6</id>
<desc>Medium size non-sporting dog</desc>
<listCost>18.5</listCost>
<unitCost>12.0</unitCost>
<image>dog1.jpg</image>
<attribute>Male Adult</attribute>
</item>
<item>
<id>EST-7</id>
<desc>Medium size non-sporting dog</desc>
<listCost>18.5</listCost>
<unitCost>12.0</unitCost>
<image>dog1.jpg</image>
<attribute>Female Puppy</attribute>
</item>
</items>
</product>
<!--see the Backbase\3_1_4\starterkits\petshop\catalog.xml file for the
complete datasource-->
</products>
</category>
</categories>
</s:xml>
?= @ $&& !(# !-'
& = 8 1 +%&#
(
1 #+%&#
( -&- ( # ./ 2 &# # # &
# 1 # #
=
6+ % 6 ./ 6+ # (
& 6+#@ # # ./ 6+#@ .>/@
( ./ +%&+
# 1 #+%&#
( @ 5 ' # '6
# 6&=
&1
(
D
D
D
$ '# ## %6 # '# # #
6+'
$ #5&# ## %6+ # #
6+#
# '#
$
' # xsl-transform ++
' ## #(( # #
6+#
%
H
5 +%&+
# 1 #+%&#
(@ 5 +# # # # # #+%&#
(
% &# 6 # &
# 1
D
"
#
# *%& ' 3&& 6&& ./ %%#@ &'
( 7+%@ #5&
# @ ' ./ &#=
./ 2 ' # # H
./ ' # H .2# !++
'#
D
"
#
# *%& ./ %%#C '%
'
( # ./ -
#&&'@
+ %%# ./ ' + ' #
D
"
#
# *%& & ./ %%#@
# 66& H ./ !++
'#
# # ./ %# 70 +%# & 1#
%-' # $bpc_xsltParser .2# - & # ## 6 1 #+%&# %=
%# :1# # ./ -
%%# ./ ./; G ' # '6
&#
#-
./ # @ '%
'
( # &# 6 # ##@ # %6+ # #
6+#
"+%&+
##
6 ./ '66 &(#&5 #1
3&& ' "
#
#
*%&
8 "+%&+
#
( 1 +%&#
(
#
' 1 5 +%&+
# 1 #+%&#
( % &# 5
%%&#
@ ' +%& *+%& ## 5 #
( ##=% 6& 1#
# 6&&1
( #
#
&',
.4* '4,
<xmp b:backbase="true" style="display:none">
<s:execute>
<s:task b:action="show" />
</s:execute>
<div b:behavior="browsertemplating"></div>
<s:behavior b:name="browsertemplating" b:focusgroup="true">
<s:event b:on="construct">
<s:variable b:name="data" b:scope="local" />
<s:variable b:name="xslt" b:scope="local" />
<!--s:variable b:name="string" b:scope="global"/-->
<s:choose>
<s:when b:test="$bpc_xsltParser">
<s:task b:action="load" b:destination="$xslt" b:url="table.xslt" />
</s:when>
<s:otherwise>
<s:task b:action="load" b:destination="$xslt" b:url="table-ie5.xslt" />
</s:otherwise>
</s:choose>
<s:task b:action="load" b:destination="$data" b:url="films.xml" />
<s:task b:action="string2xml" b:variable="$xslt" />
<s:task b:action="string2xml" b:variable="$data" />
<s:task b:action="xsl-transform" b:stylesheet="$xslt" b:datasource="$data"
b:destination="." />
<!--s:task b:action="set" b:target="@innerHTML" b:value="{$string}"/-->
</s:event>
</s:behavior>
</xmp>
index.html ##=% 6& '6
construct -
# '& 1#
?= @ $&& !(# !-'
- & = -
# '& #((' 1
# %%&#
##'@ # 6&&1
( +
=
#
D
D
D
B 9
= &&' data@ xslt@ ' string
5
= # $bpc_xsltParser .2# - & ' # ## 1# ./ %
# 1 %%# ' '%
'
( # &# &' # %#- ./ '
%# # &#
( #
( # # $xslt - &
,, = # &# '6
++
' #
D /' # '# films.xml ' %# # &#
( #
( # # $data
- &
D -# # $xslt - & 6+ #
( # ./
D -# # $data - & 6+ #
( # ./
D 6+ # #
# 6 # $data - & ( # $xslt - & '
+-' # %6 '#
#
#(# # %%&#
:
# *+%&@ #
#*# ';
# &# 6 load ++
' #
(@ 5 - # -# # #
( # ./
# + ./ '+
# ## # 1 6 #+%&#
(
4 ## %6+
@ # 6& # # # #
( # >/ %@ #'
6 # ./ % ' #@ # - *+%& ++
# # s:variable
b:name="string" b:scope="global"/ '&#
' # s:task b:action="set"
b:target="@innerHTML" b:value="{$string}"/ xsl-transform #
' #
%# # &# 6 # #
6+#
# # (& & - &@ b:destination="$string"@
1 ' 5 # set #
# % # &# # # >/ %
6&&1
( # table.xslt #5&# ' # *+%& - 6 ./ +%&
# 1 # #
6+ # '#
&',
.4. 4'
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" b:name="stylesheet"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:b="http://www.backbase.com/b">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<xsl:apply-templates select="*/*">
<xsl:sort select="spinner" order="ascending" data-type="number" />
</xsl:apply-templates>
</tbody>
</table>
</xsl:template>
<xsl:template match="*">
<tr>
<xsl:for-each select="*">
<xsl:value-of select="." />
</xsl:for-each>
</tr>
</xsl:template>
</xsl:stylesheet>
6&&1
( # table-ie5.xslt #5&# ' # *+%& - 6
## # 6&&5 ./ +%&
# # #
6+ # '#
1
&',
.40 (4'
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl"
xmlns:b="http://www.backbase.com/b">
<xsl:template match="/">
<table style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<xsl:apply-templates select="*/*" order-by="+ number(spinner)" />
</tbody>
</table>
</xsl:template>
<xsl:template match="*">
<tr>
?= @ $&& !(# !-'
8
& = <xsl:for-each select="*">
<xsl:value-of select="." />
</xsl:for-each>
</tr>
</xsl:template>
</xsl:stylesheet>
7# # '66
#1
# ./ +&5@ # '66
# +%
'&#
@ ' # xsl:output ' # xsl:sort #( -& & ./ 6&&1
( # films.xml '# ' # *+%& -
&',
.42 ,4',
<films>
<film>
<title>The Seven Samurai</title>
<director>Akira Kurosawa</director>
<genre>Drama</genre>
<language>Japanese</language>
</film>
<film>
<title>City of God</title>
<director>Fernando Meirelles</director>
<genre>Drama</genre>
<language>Portuguese</language>
</film>
<film>
<title>The Godfather</title>
<director>Francis Ford Coppola</director>
<genre>Crime</genre>
<language>English</language>
</film>
<film>
<title>Carlito's Way</title>
<director>Brian De Palma</director>
<genre>Crime</genre>
<language>English</language>
</film>
<film>
<title>Apocalypse Now</title>
<director>Francis Ford Coppola</director>
<genre>War</genre>
<language>English</language>
</film>
</films>
46* 1
% &+ ( 6& ( # .xslt *#
$% 1
-@ 1
# Content-Type application/xslt+xml $ &#
6 #@ 1
( # .xslt *#
# $% H -@ # '# # #
#=#5%
application/xml # mime.types 6& # conf '#5 6 $% # '' # *&#
*#
xml xsl xslt
$&#
#-&5@ 5 # .xsl *#
1 # +& application/xml
#
#=#5%
8 & #
(
"
./@ 5 *#
' +& # & 1# 6
#
&#5 "6 5 1
# # +
6 # & #
( 1# ./@ # 1 # & +# &15 #' # .>/
thead tbody &+
#@ - '# &'
6 # table &+
#
&#-1 #& & %
# # & # & ## 5 && #( 4 +
6+#
@ ,8 #$ >@% 8 #
( & && &
?= @ $&& !(# !-'
9
& = #
( # & +
(
3
( && # 1 ' # -& 6 # td &+
#
#
' #
)&&5 #
( # %& 1
# & &+
'
(@ =
( # (
' sort ++
' td &+
# ## %# 6 tr 1#
thead G ' # ' # %65 #(# 1
# ++
' '6
' 6 td
H
&&
( # sort ++
' 6+ 51 & # #6@ # b:target #=
# # &' %
# # # id 6 -&' &+
'
(
&',
.4 1 ?
<table class="TABLE-table" sortable="true">
<thead>
<tr>
<td b:action="sort" b:target="." id="name_header">Name</td>
<td b:action="sort">Email</td>
<td b:action="sort">Age</td>
</tr>
</thead>
<tbody>
<tr b:action="select-deselect" b:target=".">
<td>Michelle Werner</td>
<td>[email protected]</td>
<td b:sortvalue="32">thirty-two</td>
</tr>
<tr b:action="select-deselect" b:target=".">
<td>Staci Hamamoto</td>
<td>[email protected]</td>
<td b:sortvalue="26">twenty-six</td>
</tr>
</tbody>
</table>
<p />
<button b:action="sort" b:target="id('name_header')">Sort
by name</button>
8 #
( $&#
#- &
7+&&5 #
( # %& ' # #*# -& 6 # #
# 6 # td &+
#
$&#
#- #
( -& %6' ( # b:sortvalue ## # 6& 1 #@ 6 #
5@ %6*' # # #*#& -& 6 # & &&
&',
.4 1 $
9
?
<table>
<thead>
<tr>
<th b:action="sort">Item</th>
<th b:action="sort">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stamps (25pcs)</td>
<td b:sortvalue="15.00">€ 15.-</td>
</tr>
<tr>
<td>Pen</td>
<td b:sortvalue="1.75">€ 1.75</td>
</tr>
<tr>
<td>CD-Recordables (50pcs)</td>
<td b:sortvalue="20.00">€ 20.-</td>
</tr>
</tbody>
</table>
8 #
( 7+& &
"6 # # #*# -& 6 # && # -& 6 # b:sortvalue ## # =
6&&5 -#' # 6&#
( %
# #( + @ # #
( #
1&& #=
?= @ $&& !(# !-'
& = +#&&5 # # +& -& # # +%
6&&1
( ' 1&' &&1 # 2 # # b:sortvalue # # # J$(J
&+
@ #' 6 # #*#& -& 6 # # & &&
&',
.4" 1 7,
?
<td b:sortvalue="32">thirty-two</td>
?= @ $&& !(# !-'
& = %# 9 = &
#=' ,# '
/(
9 ,6
( *#
G '&#-&5 +%&+
# &
#=' &( ( # s:task #(
D
D
D
'#
& &( ( # s:choose@ s:when@ ' s:otherwise #(
'#
& ## ( # b:test #(
<
6 # ( s:tasklist@ s:parallel@ ' s:sequential
9 ,6
( &# # M% ++
'
G 1% -
# '& s:tasklist ## '6
:s:task #(; ## ' # 1
# -
# #(('
s:tasklist #( #
6 <
6 ++
' s:task #( ## *#' 1
# #&# &&' G -
#@ 5 ( # execute ++
'
D
D
6 ++
'
"
# 1'@ #
s:tasklist #
&& # #&# 6+
G && #&# 6+ -
# '& ( # 5
#*
b:on<EventName>="<myTaskListName>"@
G && # #&# ( # execute ++
'C # b:tasklist ## # #
%65 # + 6 # #&# # *#
<code>b:action="execute" b:tasklist="taskListName"</code>
+ 6 #&# &' < "6 +&#%& #&# 1# # + +
*#@ # &# '6
' #&# *#'
4 *+%&
&',
04 /
<input type="text" b:oninvalid="dob_invalid" />
<s:tasklist b:name="dob_invalid">
<s:task b:action="show" b:target="id('dob_invalid_msg')" />
<s:task b:action="hide" b:target="id('dob_required_msg')" />
</s:tasklist>
9 &
#=' &'#
-&'#
<+
# 6 %%&#
%6 6 %%&#
%-' (
&#
6 #
'' 6+ ' 6&' -&'#
@ ' %-' #+
-&'#
6& 6 # +# 6<
#&5 ( 6&' #
#
D
D
/
? 9 = %-' '6&# -&'#
- #
-&'# 6+ ' 6&' # default.xml 6&@ &#' 5 #&&#
Backbase/3_1_4/controls '#5
, ? = # forms.xml &#' 5 #&&#
C:/Backbase/3_1_4/backbase/controls '#5 #
./ 6&' -&'#
& 5 5 '#&5@ 1# 1 5 # 5 1
#+
-&'#
G # &
#=' #
# 6+ 6&'@ %65 %##
## 6&'
+# #65 ( (& *%
+# # 6+@ ' #
1# # <+
# +# # G & %-' -& # 6
# '# #5
default.xml &15 -& & & 5 # # b:skinbase ## # #
body #( # none
"
# 6&&1
( *+%&@ 6 %# 6&' '6
' : # # b:on="validate"
-
#;
?= @ $&& !(# !-'
& = Example 9.3 - Validation
<s:include b:url="../controls/forms.xml" />
<form action="data/succes.xml" method="get" b:destination=".">
<table>
<tbody>
<tr>
<td>Name:</td>
<td>
<input b:required="true" name="name" type="text" />
</td>
</tr>
<tr b:behavior="form-field-text">
<td>Year of Birth:</td>
<td>
<input b:on="validate" type="text" name="age" b:validation="year" />
</td>
</tr>
<tr b:behavior="form-field-text">
<td>Email Address:</td>
<td>
<input b:on="validate" type="text" name="email" b:validation="email" />
</td>
</tr>
<tr>
<td>Annual Income:</td>
<td>
<select name="income">
<option value="">Choose Income</option>
<option value="10_19">$10k to $19k</option>
<option value="20_29">$20k to $29k</option>
<option value="30_39">$30k to $39k</option>
<option value="40_49">$40k to $49k</option>
<option value="50_plus">$50k+</option>
</select>
</td>
</tr>
<tr>
<td />
<td>
<input type="submit" value="submit" />
</td>
</tr>
</tbody>
</table>
</form>
Example 9.4 - Response File
<xml version="1.0" encoding="UTF-8" />
<div>
The form has been submitted.</div>
"6 5 1
# # # 6
#
&#5 # forms.xml@ 5 +# s:include #
&' # 6& ,6&# - #
'6
' 6 # &+
# form@ input@ select@
' textarea
%-' # 6&&1
( ## # 6 -&'#
( 6+ 6&'
D
D
D
b:required = %65 1# # 6&' +
'#5 :true; %#
& false
b:valid = # # ## 6 6&' # true@ false@ required
b:pattern = %65 (& *%
:#
'' A-%# & 5;
%-' # 6&&1
( -
# 6 6+ 6&'
D
D
D
D
valid = # # b:valid ## # # #
invalid = # # b:valid ## # # 6&
required = # # b:valid ## # # <'
validate = 6&' 1# b:required ## #@ *# b:pattern ## #@
' %# # &# # b:valid ## #
%-' # 6&&1
( -
# 6 6+ :# +%&+
##
# default.xml 6&;
D
submit = 6 && # 6+ 6&' -&'@ #
# 6+ +##' "6 -&'@ ?= @ $&& !(# !-'
& = &# 1
% #( # #
'' -
# '& & #(('
Example 9.5 - Validate Event
<input type="text" b:required="true" />
<s:event b:on="validate">
<s:choose>
<s:when b:test="@value &gt;10">
<s:setatt b:valid="true" />
<s:task b:action="trigger" b:event="valid" />
</s:when>
<s:otherwise />
</s:choose>
<s:super />
</s:event>
9 ,6
( &
$ - & #+ 6 '# +' 5 '
#6 ' % ## '#+
1 # - & ' #
' 1 5 #@ @ '
(
- & ./ ' 6+ A-%# 6&&1
( - & -& & D
D
D
, = %-' &( + 6 %'6
' (& & '
&& - & - & '+
#' # 6
2,4
*!! , = 5 '& 5 1
- & ( # s:variable
&+
# '6
' 1#
-
# '&
A,
, = &&1 5 # (# # # &#' &+
# '
# ='6
' (& &@ &&@ ' #( - & 6+ &
A-%# 4
+ 6+#
@ * 1
'
#$ G:@%
G 2 .2# - & ' ='6
' - & ( # $ (
' #
+ 6 # - & G # assign ++
' # (
1 -& : '=
#; # - & G ## 1# - & '&' ( #
#+ .2# 6
#
declared() :#
true 6 # - & '=
&'@ #1 false;
s:variable #( # 6&&1
( ## #
D
D
D
b:name = %65 &(& + 6 # - &
b:select = %65 # &+
# ## &#' : 5 6
; ( .2#
##+
#
b:scope = %65 1 # - & '
D local = :# '6&#; && - & -& & 1#
# % 6 #
&+
# 1 #(('@ ' %' #+#&&5 &
( 1# 5
-
# && 1#
# -
# '& - & &' 6+ ++5
1
# (
& *#
#' '
D global = (& & - & -& & #(# 5 %%&#
' *#
6 # &6%
6 # %%&#
D tag = #( - & -& & 1#
# % 6 # &+
# 1 # '6
'@ ' *# 6 # &6%
6 # %%&#
G #
- & 5 #(#
( # &+
# 1 # '6
'
$ - & 6
: %
#; # '=#C (
( 1 -& # # - &
#6 %'# # '=# 6' # # - & 4 *+%&@ # 6&&1
(
' (& & - & # 1
# %( ##' ## &' 6
# #
&
( div &+
# :
' # &'
; &
( # &
#(( set ++
' ## #=
(# # - &@ %6&&5 #*# -& 6 &' ' "# &# # '=# (
%'#' 1# # -&
Example 9.6 - Variables Are By Reference
<div>
<s:event b:on="construct">
<s:variable b:name="byreference" b:select="following-sibling::div[1]"
b:scope="global" />
</s:event>
?= @ $&& !(# !-'
& = </div>
<div>Backbase
<div>Rich
<div>Internet
<div>Applications</div>
</div>
</div>
</div>
<a b:action="set" b:target="$byreference/div/div/text()" b:value="RIA">Click here to see the
node-set updated</a>
M& & - & + +# < 1#
# #*# 6 # # %%&#
@
' && ' #( - & + +# < 1#
# #*# 6 # &+
# 1 #5 '6
' 6&# #1
- & +@ '6
' ( '66
#
%@ &-' # ' 6 +%#
tag@ local@ global
9 M& & &
M& & - & -& & 1#
# % 6 5 # %%&#
"
# 6&&1
(
*+%&@ 5 '& (& & - & 1#
# &
&+
# command -
# '&
&',
04* /
B ?
<a>
<s:event b:on="command">
<s:variable b:name="test_global" b:select="'Hello World!'" b:scope="global" />
</s:event>
Click this link to create a global variable
</a>
H
5 - '&' # - &@ 5 6+ 51 5 %%&#
6&&1
&',
04. B
B ?
<a b:action="alert" b:value="{$test_global}">Click here to see the value contained in the
variable</a>
G (
1 -& # (& & - & ( # assign ++
' 6&&1
&',
040 $ 7
5 ?
?
<a b:action="assign" b:target="$test_global" b:select="'Hello Mum!'">Click here to assign a
new value to the variable</a>
9 /& &
$ && - & -& & 1#
# % 6 # &+
# 1 #(('@ ' %' #+#&&5 &
( 1# 5 -
# && 1#
# -
# '& "
# 15@
&& - & &&1 5 # % %+# 6+ - -
# '& # =
# $ && - & && # # # %
( #'@ 1
5 #(( =
# -
# 5 %%&#
1#
# #*# 1 # - & 1 #'@ #
&& - & 1&& & -& & # &&' -
# :$ && - & &' 6+
++5 1
# (
& *#
#' ';
6&&1
( *+%& #
#1 &
&+
#C # 6# &
&+
# mouseenter -
# '& ## '& && - & ' #(( command #
# ' &
C # && - & %' # # ' &
' -& & #
-
# '& 1 %# # && - & -& &# * &
( # ' &
@
1-@ &# .2# # && - & # -& & 1#
#
#*# 6 ## &+
#
&',
042 /
?
<a>
<s:event b:on="mouseenter">
?= @ $&& !(# !-'
& = <s:variable b:name="test_local" b:select="'Hello World!'" b:scope="local" />
<s:task b:action="trigger" b:event="command" b:target="id('trg1')" />
</s:event>
Click to register and trigger alert
</a>
|
<a id="trg1">
<s:event b:on="command">
<s:task b:action="alert" b:value="{$test_local}" />
</s:event>
Click here to try and access the local variable
</a>
G (
1 -& # && - & ( # assign ++
' 6&&1
&',
04 $ 7
5 ?
?
<a>Click here to assign a new value to the variable
<s:event b:on="command">
<s:task b:action="assign" b:select="'Hello Mum !'" b:target="$test_local" />
<s:task b:action="trigger" b:event="command" b:target="id('trg1')" />
</s:event>
</a>
9 ( &
$ #( - & -& & 1#
# % 6 # &+
# 1 # '6
'@ ' *=
# 6 # &6%
6 # %%&#
"
# 6&&1
( *+%&@ #( - & # 1
# %( ##' ## &' 6
# # &
( div &+
# :
' # &'
; &
( # &
#(( alert
++
' ## #(# # #( - & ' %# # -& &# *
&',
04 /
?
<div id="tagvar">
<s:event b:on="construct">
<s:variable b:name="test_tag" b:select="following-sibling::div[1]" b:scope="tag" />
</s:event>
</div>
<div>Backbase
<div> Rich
<div> Internet
<div>Applications</div>
</div>
</div>
</div>
<a>Click here to show me the tag variable (must target the element on which the tag is
defined)
<s:event b:on="command">
<s:task b:action="alert" b:value="{id('tagvar')/$test_tag}" />
</s:event>
</a>
G (
1 -& # #( - & ( # assign ++
' 6&&1 :
#
5 +# #(# # &+
# 1 # - & '6
';
&',
04" $ 7
5 ?
?
<div id="tagvar2">Powered by BPC</div>
<a>Click here to show me the tag variable (must target the element on which the tag is
defined)
<s:event b:on="command">
<s:task b:action="alert" b:value="{id('tagvar')/$test_tag}" />
<s:task b:action="assign" b:select="id('tagvar2')" b:target="id('tagvar')/$test_tag"
/>
<s:task b:action="alert" b:value="{id('tagvar')/$test_tag}" />
</s:event>
</a>
6&&1
( *+%& '+
## ## 5 # + #( - & + 1#
?= @ $&& !(# !-'
& = '66
# &+
#
&',
04# 1,
7,
<s:behavior b:name="x">
<s:event b:on="construct">
<s:variable b:name="tag" b:select="." b:scope="tag" />
</s:event>
</s:behavior>
<div id="div1" b:behavior="x">Backbase
<div id="div2" b:behavior="x"> Rich
<div id="div3" b:behavior="x"> Internet
<div id="div4" b:behavior="x">Applications</div>
</div>
</div>
</div>
<a b:action="alert" b:value="{id('div1')/$tag}">Get 1</a>
<a b:action="alert" b:value="{id('div2')/$tag}">Get 2</a>
<a b:action="alert" b:value="{id('div3')/$tag}">Get 3</a>
<a b:action="alert" b:value="{id('div4')/$tag}">Get 4</a>
9 )
( & 6 6+#
& & %#&&5 6& 6 %6+
( #
6+#
./ ./
' &
((@ #6 5 &' ./ # - & ' #
+
%&# # =
#
# 5 %6+
( #
remove ' set "
# 6&&1
( *+%&@ 5 &'
# ./ 6+ *#
& 6& # - &@ -# # #
# # ./@ +- &&
<genre> &+
#@ ' # # #*# 6 6 # &+
# $# #(@ &# *
1 5 # &#
&',
04( !
, ,
<div>Click here to see transformations</div>
<s:event b:on="command">
<s:variable b:name="data" />
<s:task b:action="load" b:url="data/films.xml" b:destination="$data" />
<s:task b:action="alert" b:value="{$data}" />
<s:task b:action="string2xml" b:variable="$data" />
<s:task b:action="remove" b:target="$data//genre" />
<s:task b:action="alert" b:value="{$data}" />
<s:task b:action="set" b:target="$data/films/film[1]/title/text()" b:value="The 5th
Element" />
<s:task b:action="alert" b:value="{$data}" />
</s:event>
H # #
# 6 # films.xml 6& 6&&1
&',
04) ,4',
<?xml version="1.0" ?>
<films>
<film id="1">
<title>The Fifth Element</title>
<release>1997</release>
<description>250 years in the future, life is threatened by the arrival of Evil, and
only "The Fifth Element" can save the world.</description>
<genre>Action</genre>
<genre>Adventure</genre>
<genre>Sci-Fi</genre>
<genre>Thriller</genre>
</film>
<film id="2">
<title>Blade Runner</title>
<release>1982</release>
<description>In a future where genetically manufactured beings called replicants are
used for dangerous and degrading work in Earth’s off-world colonies, specialist police units
–
Blade Runners – hunt down and retire (kill) escaped replicants on
Earth.</description>
<genre>Sci-Fi</genre>
<genre>Drama</genre>
<genre>Action</genre>
?= @ $&& !(# !-'
& = <genre>Thriller</genre>
</film>
<film id="3">
<title>American Beauty</title>
<release>1999</release>
<description>A 1999 drama film that explores themes of love, freedom, self
liberation, family, and the American Dream.</description>
<genre>Drama</genre>
</film>
</films>
4 6+#
( - & ./ #
6+#
@ "'
#$ GG<%
' 8 "'
#$ GG>% 9 M##
( ' ##
( & 6+ A-=
%#
G ='6
' (& &@ &&@ ' #( - & 6+ &
A-%# :#
s:script &+
#; ( # _vars['varName'][0] - & G & #
1 -& # - & ( # bpc.setVariable(sName, [sValue], sScope) 6
=
#
"
# 6&&1
( *+%&@ (& & - & #' 1
# %( ##'
&
( # &
*# A-%# &# * ## #
# #
( -& #
'
# - &
&',
04* B
?
391
<div id="my-div" b:myatt="Hello world!">
<s:event b:on="construct">
<s:variable b:name="myTag" b:scope="global" b:select="string(@b:myatt)" />
</s:event>
</div>
<a>Click here to get $myTag variable from JavaScript
<s:event b:on="command">
<s:script>
<!-- alert(_vars['myTag'][0]);-->
</s:script>
</s:event>
</a>
)
& 1
5 1
# # - & .2#@ 5 ,0 70 ' # %# $
'&& (
6 # - & +
"
# 6&&1
( *+%&@ (& & - & #' 1
# %( ##'
&
( # &
*# # bpc.setVariable() A-%# 6
#
## (
1
-& # # - &
&',
04. 1
?
391
<div id="my-div" b:myatt="Hello world!">
<s:event b:on="construct">
<s:variable b:name="myTag" b:scope="global" b:select="string(@b:myatt)" />
</s:event>
</div>
<div id="my-div2" b:action="alert" b:value="{$myTag}">Click to view $myTag variable</div>
<a>Click here to modify $myTag variable from JavaScript
<s:event b:on="command">
<s:script>
<!-- bpc.setVariable('myTag', [document.getElementById('my-div2')], 'global');-->
</s:script>
</s:event>
</a>
9 )
( A-%#
?= @ $&& !(# !-'
8
& = G '' 5 1
%# ( # 6&&1
( ./ &+
#
D
D
js ++
'
s:script #(
& %-' $2" 6
#
## &&1 5 # % 1 ./ # # 2
% 1# A-%# G && A-%# ' 6+ .>/ &+
# ( 2
++
' ' 5 & ## 1# # 2 #+ -
+
# 6+ 1#
A-%# 4 6+#
# A-%# 6
#
@ # ./
!6
2,4
9 )
( # B ++
'
G '' 5 1
%#@ 6 *+%& # ' +%&* &&#
@ ' &&
A-%# 6
#
6+ 5 %# 6 # #6 ( # js ++
' #
# 6
# b:value ## # -&#' 1
*#
( # js ++
' 4 *+%&
&',
040 G ,,
<span b:action="js" b:value="alert('Hello world!')">Click here</span>
G & #
'' -
# # && A-%# 6
#
@ 6 *+%&
&',
042 1 391
<span onclick="alert('Hello world!');">Click here</span>
A-%# ' ( # ./ % 5
&5 "6 5 1
# # 5
=
3 #
*#' 6+ ./ 1# #
*#' 6+ A-%# 5 # &
( +
+ :s:lock; "6 5 & # %%&#
# # ' ./
:<s:lock b:target="/*">;@ 5 #
'6
' 1#
# & ' 1# #& # A-=
%# #
+%&#
9 )
( # %# &+
#
s:script #( &&1 5 # %& &
A-%# 1#
./ 6
#
5
'6
1#
# %# -& & 1#
# #*# 6 # &+
# 1 # %#
'6
' '-
#( 6 &
A-%# ## 5 - && ## &&@ (& &@ '
#( - & # 5 '%& 5 - .2# G # - & (
# _vars A-%# - & ( # 6&&1
( 5
#* _vars['myvar'][0]
$&& - & '&# ' %
#' 5 6 -& 6@ -
6
# '&# &5 #
-&@ 5 - # #- # 6+ # 5@ 6 *+%&
( [0] G & # # ' ( # _current - & :
# *=
+%& &1@ # # div &+
#; 4 *+%&
&',
04 391 ?
<div>
<s:event b:on="construct">
<s:variable b:name="myvar" b:select=".." b:scope="local" />
<s:script>
<!-- _vars['myvar'][0].style.backgroundColor = 'blue'; _current.style.color =
'white';-->
</s:script>
</s:event>
This text will be white on a blue background
</div>
A-%# - & :_vars ' _current; &5 ' 1#
A-%#C 5 # #+ 1#
.2#
9 %
( A-%#
?= @ $&& !(# !-'
9
& = G +# &15 %%&5 % # &
A-%# #
' # s:script #( #=
1 # # 1#
5 ' ./ % "# ++
'' #
%&# # %# 1#
s:script #( ( ./ ++
#
&',
04 & 391 ,,
<s:script><!-</s:script>
Add your own JavaScript
-->
"6 5 %# #
./ #- # -- @ 5 +# % ( '6=
6
# 5
#* 4 *+%&@ ( # 5
#* alert(i--) &' # %
( C =
#'@ alert(i=i-1) alert(i-=1)
&',
04" & 391 1
9
<span>
<s:event b:on="command">
<s:script>
<!-- var i=3; alert(i-=1); alert(i=i-1); -->
</s:script>
</s:event>
Click to see alert with variable value
</span>
%'6
' ##5 6
./
D
D
D
D
D
&lt; %
# < :& #
;
&gt; %
# > :(# #
;
&amp; %
# & :+%
';
&apos; %
# ' :%#%;
&quot; %
# " :<##
+;
?= @ $&& !(# !-'
& = %# = $%%
'*
26+
(
#
#
(
& ++
'#
# +%- %6+
D
D
D
' &#
5@ &' &( 6& #' 6 -& +&& 6& (
s:include 4 *+%&@ '& # #& 5 ' +- # #& 5
' # ' %# #+ (& 6& ## &''
"
#
# *%& 66 *#+ %6+
# '
( # '
( 6
>/ &#' 1
5 # # #5& 1'# ' (# # T +5 &
1# &+
# ## - 1'# ' (# %6' %*& #
% &+@ '' # & div{overflow:hidden;} # 5 #5&# :$&& div
&+
# # ,0 # %% # 66#' 5 # C 6(##
( div
+5 #&& &# 6&& %6+
#
) +&& A-%# 6&@ bpc.js 6 %#+3
( 4 + 6+#
@
! A,
#$ %
2&'
( A-%#
A-%# & &' +&& A-%# 6&@ bpc.js@ ## 5 6 %#+3
( 1
%&
( &
# ##% 4& +& >/
H 2( bpc.js 6& %#&&5 &' # 2 1
# 1
1 ( &
5#+ ++
# # & # &
## &' # ##%
4&@ +# 6 # &'5 &''@ #6 +%-
( # %' 6 %(
'1
&'
(
6
# %# 6 # & #
%(@ +%-
( # '1
&' %6+
&'5 ' 1
&'
( # *#
&',
24 <xmldecl version="1.0" encoding="UTF-8" />
<doctype />
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<head>
<title>Traditional HTML Page</title>
<script type="text/javascript" src="/3_1_4/bpc/bpc.js"></script>
</head>
<body>
<h1>Traditional HTML Page</h1>
<p>For more information, please consult the Backbase DevNet on our web site.</p>
</body>
</html>
.2# .2# &
(( 6 ''
( %# 6 ./ '+
# 1 %# # =
##@ &(& ## 6 ./ '+
#@ # #
# 6 5
#* "# +'& ./ '+
# # 6 ' 1 6 '66
# #5%@ &+
# '@
## # ' ' #*# ' .2# & %-' 6&# 6 +
%&#
6
#
(@ + ' &
6+#
# #
'(
' # %-' --1 6 # .2# $*@
6
#
@ ' %# %%#' 5 @ ' %-' + +%& .2# *=
+%& 4 + 6+#
.2#@ # ./ !6
2,4@ H&
.2# #& P##%FF1111&+F*%#FQ .2# $*
?= @ $&& !(# !-'
& = $
* '6
'=# &#- # # # ' &#
%# # 6 + #%@ %#' 5 &@ ' &# &#- $
&#
&#
%# ## 1# & : F ; ' &#- &#
%# ' # 4 *+%&@
&# &#
%# /step/step/... ' &#- &#
%# step/step/...
#% -&#' (
# # ' # # '=#
5
#* 6 &#
#% axisname::nodetest[predicate]@ 1
D
D
D
* :'6
# #=&#
% #1
# &#' ' ' # #
';
'=## :'
#6 ' 1#
*;
3 + %'# :# 6# 6
# &#' '=#;
7*# # # #
'' .2# *@ #'' # 6&&1
( * ' #=
#
D
D
D
D
~- ## 6 # preceding-sibling *
~+ ## 6 # following-sibling *
object * ## & 5 # (# # -& 6 %%# 6 &#'
'
style * ## & 5 # (# %%# 6 &#' '
6&&1
( # & ' # .2# $*
$' 7,
= 1
7
/
child::
#
' "6 * #
%6'@ # child:: ' +%&#&5
&# && %6'
child::* &# && #
&'
6 # #*# ' &' &+
# # #*#
'
child::p[2] &# #
' p &' 6 # #*#
'
parent::
#
' ..
&# # %
# 6 #
#*# '
../.. &# #
(
'%
# 6 # #*#
'
ancestor::
&# && %6'
# :%
#@
(
'%
#@ ' ; 6
# #*# ' &# # :# %
#;
+ 6# # ' &#
ancestor::* &# &&
#
ancestor::table &# &&
# & #
ancestor::b:window[1]
&# # 6# b:window
#
ancestor-or-self::
&# # #*# '
' &&@ %6'@ 6 #
# :%
#@
(
'%
#@ ' ;
ancestor-or-self::*
ancestor-or-self::table
ancestor-or-self::b:window
attribute::
#
' @
&# && ## # 6 #
#*# '
@*&# && # ## #
6 # #*# '
@id &# # ' ## #
6 # #*# '
self::
#
' .
&# # #*# '
7# "6 5 ' # %65 b:target@ 5 '6&# #
#*# ' &#'
descendant::
#
' //
&# && '
'
#@
:&'
@ (
'&'
@
' ;
//p &# && p &'
6
# #*# '
descendant-or-self::
&# # #*# '
' && # '
'
#@
descendant-or-self::p
&# && p &+
# &1
?= @ $&& !(# !-'
1%' &',
& = $' 7,
= 1
7
/
1%' &',
:&'
@ (
'&'
@
' ;
# #*# ' ' #
#*# ' #&6 6 # & p &+
#
object::
&# # -& 6
4 *+%&@
%%# 6 &#' ' /div/span/object::width
: #+ $*;
&# # 1'# -& 6
# #(# '
style::
&# %%# 6
&#' ' : #+ $*;
preceding::
&# -5#
( #
preceding::
'+
# ## 6 #
## #( 6 # # '
preceding-sibling::
#
' ~-
&# && &
( 6
# #*# ' "6 #
#*# ' ## #
' +% '@
# * 1&& +%#5
~-*[3] #
# &
(
6 # #*# '
following::
&# -5#
( #
'+
# 6# # &
(
#( 6 # # '
following::
following-sibling::
#
' ~+
&# && &
( 6# # ~+*[1] #
# 6#
#*# ' "6 # #*# &
( 6# # #*#
' ## # ' '
+% '@ # * +%#5
4 *+%&
div/style::float
.2# 0%#
$
.2# *%
#
# '=#@ #
(@ &
@ + .2#
%# - + # + 15 +& %# # &
(( 5
' # %6+C #+#@ -& +%
@ (
& +%
@ ' +%=
@ ## &
@ ' # & %# ## + # 6 '
6&&1
( # & &# 6 %%#' .2# %#
8
/
a
)
## +%# //book | //cd
#1 '=#
!#
'=#
1# && ' '
&+
#
[
$''#
6 + 4
=
##
6 - 4
S
&#%&#
6 * 4
'-
,-
8 div 4
^
<&
price=9.80
# 6 % 98@
6& 6 % 99
]^
7# <&
price!=9.80
# 6 % 99@
?= @ $&& !(# !-'
&',
6
?
& = 8
/
&',
6
?
6& 6 % 98
W
/ #
W^
/ #
<& # price<=9.80
# 6 % 9@
6& 6 % 99
X
M# #
price>9.80
# 6 % 99@
6& 6 % 98
X^
M# #
<& #
price>=9.80
# 6 % 99@
6& 6 % 9
&
'B
#
:$ ;
price=9.80 or
price=9.70
# 6 % 98@
6& 6 % 9
'
&
B
#
:$ ' ;
price>9.00 and
price<9.90
# 6 % 98@
6& 6 % 8
+'
'& :'-
+
';
5 mod 2
<
<&
price eq 9.80
# 6 % 98@
6& 6 % 99
7# <&
price ne 9.80
# 6 % 99@
6& 6 % 98
&#
/ #
price lt 9.80
# 6 % 9@
6& 6 % 98
&
/ #
<& # price le 9.80
# 6 % 9@
6& 6 % 99
(#
M# #
price gt 9.80
# 6 % 99@
6& 6 % 98
(
M# #
<& #
price ge 9.80
# 6 % 99@
6& 6 % 9
0'
(F'
##5
../*[not(. is
+%
#1
current())]
'
&& &' &+
# 6
# %
# &+
#@
*%# # #
'
*%#
,66
6
../* except .
<
'' # 6
'
&& &' &+
# 6
# %
# &+
#@
*%# # #
'
##
"
&' ' # &# 6 # # # #1 #
&& <p> &+
# 6
# #*# '@
%-'' #5 '
'
# 6 #
' - &
$myvar>
price<9.80
following::p
intersect
$myvar//*
# 6 % 9@
6& 6 % 98
6&&1
( &# 6 ! D
D
D
D
castable as
instance of
treat as
?= @ $&& !(# !-'
& = D
D
D
D
D
D
D
D
cast as
return
every
some
then
else
for
to
.2# &+##
)
( .2# *%
## %# $7, #(# 5%
#' ## # &+
# + 1 .2# -' 1' ' (-
# &# *+%& 6 -' 1' %# + in eq
:)
( 5%
#
@value-of %+##'; "
# 6&&1
( *+%&@ .2#
# &- # #(# b:in-x ## #
&',
24 ;%
$
<div>
<s:event b:on="command">
<s:task b:action="alert" b:value="{boolean(@b:in-x = 'y')}" />
<s:setatt b:in-x="y" />
<s:task b:action="alert" b:value="{boolean(@b:in-x = 'y')}" />
</s:event>
@b:in-x="y"
</div>
.2# 4
#
.2# &' - &#=
6
#
# 6
#
6 #
( -&@ +
-&@ '# ' #+ +%
@ ' ' N7+ +
%&#
@ <
+
%&=
#
@ &
-&@ ' + 4 *+%&@ # id() 6
#
6<
#&5 ' # =
&# &+
# 5 # < ",C id('mainlayer')
%%#' .2# 6
#
'+
#' # ./ !6
2,4 7*# # #
#
'' .2# 6
#
@ #'' # 6&&1
( #+ ! D
D
D
D
D
D
current() = # 6
#
%# 6 ./ #
''@ # #
# # % & 1## #@ # 1 ''' # +%&+
##
6 .2# html() = 6 +-
( 6+ # ./ % # # >/ %
bxml() = 6 +-
( 6+ # >/ % # # ./ %
xpath() = -&# .2# *%
(-
#
( %+# 6 6
#
cookie() = (# 6&&1
( &# 6 ! D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
adjust-date-to-timezone
adjust-dateTime-to-timezone
adjust-time-to-timezone
base-uri
collection
data
default-collation
doc
document-uri
expanded-QName
idref
in-scope-prefixes
lang
namespace-uri
namespace-uri-for-prefix
namespace-uri-from-QName
nilled
normalize-unicode
resolve-QName
resolve-uri
?= @ $&& !(# !-'
& = D
D
D
substract-dates
substract-dateTimes
unordered
.2# *+%&
6&&1
( # & %-' + *+%& 6 #(#
(
! 1%'
&'
../..
self@ parent@ parent
## 6+ #*# ' :self; ' 1&
% #1 %
#
../../div
self@ parent@ parent@ +' child div
&+
#
## 6+ #*# ' :self; 1& %
#1 parents@ (# # children@ ' 6&#
# -5#
( # # div &+
#
~+*[3]
self@ ' third following sibling
## 6+ #*# ' :self; '
#- # third sibling 6# #
#*# '
~-*[2]
self@ 5 second preceding sibling
## 6+ #*# ' :self; '
#- # second sibling 6 #
#*# '
id('mylayer')/~+*[2]
unique id@ second sibling 1# # +
&+
# #5%
## 6+ # < ", &+
#@ '
##+%# # 6
' # ' &
( 6 #
+ #5% # &+
# 1# # <
", 4 *+%&@ 6 mylayer div@ #
#
# ' &
( div &+
#
../../div[2]
self@ parent@ parent@ +' child div
&+
#@ &# second child
## 6+ # #*# ' :self;@ 1&
% #( #1 %
#@ +# && div
&+
#@ ' &# # ' &'
&+
# # div &+
#
id('mainlayer')/div[@b:state='selected']
unique id@ children ## div
&+
# 1 ## # b:state selected
## 6+ # < ", &+
#@ '
#
&& &' &+
# 6 #5% div 1
# ## # b:state # # selected
id('mainlayer')/div
[@b:state='selected' and
@b:behavior='button']
unique id@ children ## div
&+
# 1 ## # b:state selected ## # b:behavior button
## 6+ # < ", &+
#@ '
#
&& div &' &+
# 1 #
## # b:state # # selected '
# ## # b:behavior # # button
id('mainlayer')/div[@b:state='selected'
unique id@ children ## div
and @b:behavior != 'list']
&+
# 1 ## # b:state ?= @ $&& !(# !-'
& = ! 1%'
&'
selected ' ## # b:behavior list
## 6+ # < ", &+
#@ '
#
&& div &' &+
# 1 #
## # b:state # # selected '
# ## # b:behavior # #
list
id('mainlayer')/div[@b:behavior='button'
unique id@ children children ## or @b:behavior='toolbutton']
div &+
# 1 ## # b:behavior
button toolbutton
## 6+ # < ", &+
#@ '
#
&& div &' &+
# 1 #
## # b:behavior # # button toolbutton
id('mainlayer')/@b:behavior
unique id@ #
# -& 6 ## #
b:behavior
## 6+ # < ", &+
#@ '
#
# -& 6 # ## #
b:behavior # &+
# 1# #
unique ID
) &5 # {} # -& 6 ./ ## # # '# ## # #
.2# *%
## < &-
(C # 2 #
-&# # #
# .2#
' #
# -& #
( 4 *+%&@ <a id="Hello" b:action="alert"
b:value="{@id}">Click me</a> -&# # ' ## # 6 # #*# ' :#
# &+
#; ' #
# -& &# '&( *
+& # ./ ( (& &5 # {xxx} # '# ## # #=
# # -& #
.2# *%
## < &-
( "# '66 6+ ./@
1-@ ## # -& +# ## 1# # %
( &5 _ # "6 5 1
# #
#
# #
(@ # concat() 6
#
1 +%# &#5
2
##
&
# :2; && +B 1 :"
#
# *%&@
3&&@ 46*@ ' 7#%; 4 %#+& *%
@ # ++
'' # ( -
6 # 1
%%# # 6&&1
( 1F%#
( 5#+ + #
@
5
8
1%
,
"
#
# *%& H
'1 98
H
'1 H
'1 7
"
#
# *%& H
'1
H
'1
H
'1
H
'1
98
7
"
#
# *%& H
'1
H
'1
H
'1
H
'1
H
'1
H
'1
98
7
.2
?= @ $&& !(# !-'
& = @
5
8
1%
,
3&& H
'1 98
H
'1 H
'1 7
H
'1 H
'1 .2
/
* L
& [
0 . [
3&& 46* = H
'1 98
H
'1 H
'1 7
H
'1 H
'1 .2
/
* L
& [
0 . [
7#% H
'1 98
H
'1 H
'1 7
H
'1 H
'1 .2
/
* L
& [
0 . [
7#% 8
H
'1
H
'1
H
'1
H
'1
H
'1
+
8
0 . [
?= @ $&& !(# !-'
98
7
.2
8