Scribd
Upload
181 views69 pages

Back Base Concepts and Introduction

The document provides an introduction to the Backbase framework for developing rich internet applications. It discusses key concepts including: - BXML (Backbase XML) is a declarative language that extends XHTML for building rich user interfaces. The BXML code is translated into a standard DOM tree at runtime. - The Backbase Presentation Client (BPC) is a JavaScript library that manages the user interface and processes BXML code on the client-side within browsers. - The BXML code is parsed into a BXML tree that is then translated into a corresponding DOM tree for rendering in the browser. Tree manipulation functions allow dynamically updating the interface.

Uploaded by

bayoubgoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
181 views69 pages

Back Base Concepts and Introduction

The document provides an introduction to the Backbase framework for developing rich internet applications. It discusses key concepts including: - BXML (Backbase XML) is a declarative language that extends XHTML for building rich user interfaces. The BXML code is translated into a standard DOM tree at runtime. - The Backbase Presentation Client (BPC) is a JavaScript library that manages the user interface and processes BXML code on the client-side within browsers. - The BXML code is parsed into a BXML tree that is then translated into a corresponding DOM tree for rendering in the browser. Tree manipulation functions allow dynamically updating the interface.

Uploaded by

bayoubgoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 69

Subject: Concepts and Introduction

Version: 22-June-2005
Backbase Concepts and Introduction

0. Objectives
I. The Backbase Foundation
A. Understanding BXML and BPC
B. Introducing the BXML-Tree
C. Asynchronous Command Execution

II. The Rich User Interface


D. Creating the Application Layout
E. Applying User Interactions
F. Formalizing Patterns
Backbase Concepts and Introduction
III. Client-Side Data and Business Logic
G. Defining Data Bindings
H. Implementing Client-Side Business Logic
I. Rich Forms

IV. Development and Debugging Tools


J. Development Tools
K. Debugging Tools
0. Objectives
• Rich Internet Applications
– Rich and Real-time Interfaces
– Single Page Interface (SPI)
– Client-side Intelligence
• Embrace and Extend Web Standards (AJAX)
– Zero Install, Small Footprint
– Cross-Browser Compatibility
– Works with (X)HTML, JS, CSS, XML, XSLT
• Easy Integration with .NET, J2EE, and PHP
– Data-driven Integration
– Align RIA with SOA
• Developer Productivity
– Declarative Language
– Easy to Learn for HTML Developers
I. The Backbase Foundation
A. Understanding BXML and BPC
1. BXML
2. BPC
3. Booting and Initialization

B. Introducing the BXML-Tree


4. Managing the BXML-Tree and DOM-Tree
5. Tree Manipulation
6. Targeting
7. Loading
8. Get, post, submit

C. Asynchronous Command Execution


9. Asynchronous Commands Manipulate Tree
10. Locking for Explicit Synchronization
1. Backbase XML (BXML)

• BXML stands for Backbase eXtensible Markup Language, a


declarative, XML-based language for developing Rich
Internet Applications (RIA).
– BXML interfaces are valid XML.

• The BXML vocabulary is an extension of XHTML that


provides tags (in namespaces) for declaring rich and highly
interactive web sites.
– xmlns:b=http://www.backbase.com/b for visual tags.
– xmlns:s=http://www.backbase.com/s for systems tags.
2. Backbase Presentation Client (BPC)

• The Backbase Presentation Client (BPC) is a JavaScript


based GUI management system that runs within standard
web browsers.
– BPC enables client-side processing of presentation logic.

• Once activated, the BPC receives BXML and translates the


BXML at runtime into a standard DOM-tree that is rendered
by the browser.

• Existing DHTML technologies (XHTML, JS, CSS) remain fully


functional within BXML pages.
Understanding BXML and BPC
3. Booting and Initialization
• The BPC is a JavaScript library included in the BXML start-
up page.
– script type="text/javascript" src="/backbase/3_0/bpc/boot.js"

• Initially only the core library of about 30K, that contains the
most frequently used features, is loaded
• Additional features are loaded automatically in separate
modules on demand (to limit download size)
• The <xmp> tag is used to indicate to the BPC where the
BXML area of a web page starts and ends
– Use the <xmp b:backbase=“true”> tag to separate BXML from
(potentially) non valid HTML code.
Example 01 - My First BXML Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML and
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/b" namespace
xmlns:s="http://www.backbase.com/s">
definition
<head>
<title>Example 01 - My First BXML Page</title>
<script type="text/javascript" src="/backbase/3_0/bpc/boot.js"></script>
</head>
Include and
initialize the
<body onload="bpc.boot('/backbase/3_0/');">
<xmp b:backbase="true"> BPC engine
<b:infopane style="border: 1px solid #DDDDDD;">
<b:infonav b:action="select-deselect" style="background-color: #EEEEEE;">
Click to open.
</b:infonav>
<b:infoview style="background-color: #CCCCCC;"> BXML and
Hello <strong>World!</strong> XHMTL tags
</b:infoview>
</b:infopane>
</xmp>
</body>

</html>
I. The Backbase Foundation
A. Understanding BXML and BPC
1. BXML
2. BPC
3. Booting and Initialization

B. Introducing the BXML-Tree


4. Managing the BXML-Tree and DOM-Tree
5. Tree Manipulation
6. Targeting
7. Loading
8. Get, post, submit

C. Asynchronous Command Execution


9. Asynchronous Commands Manipulate Tree
10. Locking for Explicit Synchronization
4. Managing the BXML- and DOM-Tree

• The BPC translates BXML client-side at runtime into a


standard DOM-tree that is rendered by the browser

• The first step in the translation process is to parse the BXML


and create the BXML-Tree.

• The second step in the translation process is to build the


corresponding DOM-Tree that can be rendered by the
browser.
Managing the BXML-tree & DOM-tree
5. Tree Manipulation

• The objective of tree manipulation is to dynamically add-,


move or remove elements within the BXML-tree.

• Tree Manipulation is done by BXML-tags such as:


– <s:render> for copying, moving, and transforming
– <s:include> for loading additional nodes
– <s:task b:action=“remove”> for removing nodes

• Tree manipulation happens client-side without page re-


loading.
6. Targeting
• To manipulate nodes in the B-Tree, you need to be
able to address the nodes.

• Different nodes within the BXML-Tree can be targeted


using XPath (W3C standard:
http://www.w3.org/TR/xpath)

• Targeting can be relative or absolute


– Relative targeting is done by XML navigation: b:target="../..“
– Absolute targeting is done by setting and referencing IDs:
id=“element_id” - b:target="id('element_id')“
Absolute and Relative Targeting
Example 02 - Move Source/Destination
Source (you can move nodes to the destination by clicking on them):
<ol>
<li>
<a b:action="move" b:source=".." b:destination="../../../ul"
b:mode="aslastchild">Node 1</a>
</li> Move action
<li>
<a b:action="move" b:source=".." b:destination="../../../ul" on sources
b:mode="aslastchild">Node 2</a>
</li>
<li>
<a b:action="move" b:source=".." b:destination="../../../ul"
b:mode="aslastchild">Node 3</a>
</li>
</ol>
<p>Destination:</p>
Destination
<ul/>
7. Loading

• Manipulates the B-Tree by inserting additional nodes from the


server

• Allows you to organize a web application in smaller data files


and to reuse these files more flexibly.

• Tags: Include, buffer, and load:


– <s:include b:url="data/file.xml" /> inserts data when executed
– <b:buffer b:url="data/file.xml" /> is used to defer loading until parent
element is selected (e.g. tabs in a deck)
– <… b:action="load" b:url=“data/file.xml“…> is used to load data within
events, tasks, etc. The “load” command provides complete control
over what and when to load.
8. Get, post, submit, send

• Standard HTTP is used for communication between the BPC


and the web server
• Actions: load, submit, send
– <... b:action=“load” b:url=“{concat(‘load.jsp?product=’, @prod)}" /> is
used to retrieve new dynamic data
– <... b:action=“submit" /> is used to submit a form, the standard html
form attributes define the actions to do (default is get)
– <... b:action=“send" b:url=“data/file.xml“ …> is used to send any part of
the tree to the server as an xml document, this is always done with
‘post’ instead of ‘get’

• Server can respond either with data or with an instruction set


– The distinction is made using the root node of the response file (use
<s:execute> for instructions)
I. The Backbase Foundation
A. Understanding BXML and BPC
1. BXML
2. BPC
3. Booting and Initialization

B. Introducing the BXML-Tree


4. Managing the BXML-Tree and DOM-Tree
5. Tree Manipulation
6. Targeting
7. Loading
8. Get, post, submit

C. Asynchronous Command Execution


9. Asynchronous Commands Manipulate Tree
10. Locking and Aborting for Synchronization
9. Asynchronous Commands Manipulate Tree
• Tree Manipulation happens through the Asynchronous
Command Execution system.

• Each event triggers a new command, executed asynchronously


in its own thread.
– At any given time, multiple command threads can be active.
– By default, all active command threads execute asynchronously. They
can be synchronized using <s:lock>.
10. Commands Consist of Sequential Steps

• Each command consists of execution steps (<s:task>).

• By default, the steps within a command thread are executed


sequentially.

• They can be parallelized by using <s:parallel>


Asynchronous Command Execution
Example 03 - Asynchronous and Lock
trigger without lock
<s:event b:on="mouseenter">
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|in 1| </s:render>
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|in 2| </s:render>
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|in 3| </s:render>
</s:event>
<s:event b:on="mouseleave"> Trigger
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|out 1| </s:render>
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|out 2| </s:render> No lock
<s:render b:destination="id('output_notlocked')" b:mode="aslastchild">|out 3| </s:render>
</s:event>

<div id="output_notlocked">Output no lock goes here:</div>

trigger with lock


<s:event b:on="mouseenter">
<s:lock>
<s:render b:destination="id('output_locked')" b:mode="aslastchild">|in 1| </s:render> Trigger
<s:render b:destination="id('output_locked')"
<s:render b:destination="id('output_locked')"
b:mode="aslastchild">|in 2| </s:render>
b:mode="aslastchild">|in 3| </s:render>
With lock
</s:lock>
</s:event>
<s:event b:on="mouseleave">
<s:lock>
<s:render b:destination="id('output_locked')" b:mode="aslastchild">|out 1| </s:render>
<s:render b:destination="id('output_locked')" b:mode="aslastchild">|out 2| </s:render>
<s:render b:destination="id('output_locked')" b:mode="aslastchild">|out 3| </s:render>
</s:lock>
</s:event>

<div id="output_locked">Output with lock goes here:</div>


II. The Rich User Interface
D. Creating the Application Layout
11. Define Screen Partitioning
12. Adding Client Controls
13. Adding Look & Feel (CSS)
14. Multimedia Elements
E. Applying User Interactions
15. Adding Event & Commands
16. Adding User Interaction Events
17. Drag and Resize
18. Adding Tasks
19. Adding Event Propagation
20. Adding Effects
21. Adding For- & Backward Button Support
F. Formalize Patterns
22. Behaviors: Custom Events & Commands
23. Custom Client Controls
24. Stylesheets
11. Define Screen Partitioning

• Screen Partitioning determines the basic layout of the user


interface.
• Basic Screen Partitioning is done using normal XHTML tags
such as <table>, <div> and <span>.
• Advanced Screen Partitioning is done with BXML tags such
as <b:panel>, <b:window>, <b:border> and <b:deck>.
Example 04 - Panels
Outer panel set:
Fixed top / bottom
<b:panelset id="rows" b:rows="80px * 40px">
<b:panel id="top" style="background-color: #E8E8E8">Header</b:panel> resizing middle
<b:panelset id="columns" b:cols="80px *">
<b:panel id="left" style="background-color: #989898">Left</b:panel>
<b:panel id="right" style="background-color: #C8C8C8">Right</b:panel>
</b:panelset>
<b:panel id="bottom" style="background-color: #E8E8E8">Footer</b:panel> Inner panel set:
</b:panelset>
Fixed left
resizing right
12. Client Controls

• Client Controls are the interactive elements of the web


application.

• Client Controls can be placed in the screen partitioning by


simply using the appropriate BXML-tags such as: <b:tree>,
<b:menu>, <b:modal>, <b:infopane>, <b:slider> and
<b:navbox>.
Client Controls
13. Adding Look & Feel

• The look & feel of the Rich User Interface can be defined with
CSS
– W3C standard: http://www.w3.org/Style/CSS/

• The CSS skinning can be applied to both XHMTL and BXML

• <s:setstyle> is used to dynamically assign styles to UI


elements in response to events:
– <s:setstyle b:background-color="green" b:width="200px" b:opacity=".2"
b:height="20px" b:top="0px"/>
14. Multimedia Elements
• Include any (HTML compatible) multi-media element in
BXML and in Backbase controls
– Flash, audio, video
– SVG
– Etc.

• Add icons to controls:


– <b:button b:icon="next“…

• Add custom graphics to controls:


– Assign tag using:
<s:gfxset b:directory="{concat($bpc.path, 'controls/backbase/slider/')}"
b:tag="b:slider" b:name="slider-hor">
<s:gfx b:type="grippy" b:normal="horizontal_grippy.gif" />
</s:gfxset>
II. The Rich User Interface
D. Creating the Application Layout
11. Define Screen Partitioning
12. Adding Client Controls
13. Adding Look & Feel (CSS)
14. Multimedia Elements
E. Applying User Interactions
15. Adding Event & Commands
16. Adding User Interaction Events
17. Drag and Resize
18. Adding Tasks
19. Adding Event Propagation
20. Adding Effects
21. Adding For- & Backward Button Support
F. Formalize Patterns
22. Behaviors: Custom Events & Commands
23. Custom Client Controls
24. Stylesheets
15. Adding Events & Commands

• Elements of the user interface can respond to events (actions


of an end-user).

• Events can be standard JavaScript events such as “click” or


“mouseover” or additional Backbase events such as
“dragreceive”, “validate”, “command” and “destroy”.

• Event handlers are declared to execute one or more


commands in case an event is triggered. Example commands
are: “show”, “hide”, “select”, “next” and “previous”.
Example 05 - Events and Commands
Event
<div> handler
<s:event b:on="command">
<s:task b:action="alert" b:value="Hello" />
</s:event> Command
Click to trigger command event and show alert box
</div> execution
16. Adding User Interaction Events

• Users interact with the interface using the mouse and


keyboard

• Backbase triggers events in reaction to users’ mouse action


such as mouse-over, mouse-down, and click

• Backbase also triggers events in reaction to users’ keyboard


strokes such as key-down, key-up or reacting to specific
keys.
17. Drag and Resize

• Drag & drop and resize are two extremely useful and widely
used ways for users to manipulate UI elements with the
mouse.

• Backbase provides both models in a simple declarative


fashion:
– Set the “b:drag” attribute to make an element draggable.
– Set the “b:dragreceive” attribute to make an element a receiver to drop
draggable elements.
– Set the “b:resize” attribute to make an object resizable.
– In both cases you can specify additional parameters such as minimum
size or which elements can be dropped where.
Example 06 - Drag and Drop
Drag 1 only

<xmp b:backbase="true">
<div b:drag="drag1" style=" …; background:#CF0;">Drag me to drag-receive1</div>
<div
<div
b:drag="drag1 drag2" style=" …; background:#C0C0C0;">Drag me anywhere</div>
style="clear:both;height:20px;"></div>
Drag 1 or 2
<div b:dragreceive="drag1" style=" …; background:#CF0;">drag-receive 1</div>
<div b:dragreceive="drag2" style=" …; background:#0FC;">drag-receive 2</div>
</xmp>
Drag-receive
elements
1 and 2
Example 07 - Resize
<xmp b:backbase="true">
<div b:resize="all" style=" …; background:#CF0;">Resize me</div> Resize to
</xmp> any size
18. Adding Tasks
• Commands are actions making an interface interactive
• Commands are defined as tasks and will be executed when an
event occurs
– <s:task b:action="select-deselect" b:target="." />

• Use tasklists to define a series of commands


– <s:tasklist b:name="tasklist">
<s:task b:action="moveto" b:target="id('target_1')"
b:destination="id('destination_1')" b:mode="asfirstchild" />
<s:task b:action="moveto" b:target="id('target_2')"
b:destination="id('destination_2')" b:mode="aslastchild" />
</s:tasklist>

• Tasks are usually executed sequentially (within an


asynchronous command thread model).
– Use <s:parallel> for explicit parallel task execution
19. Adding Event Propagation

• With event propagation developers can pass events on to


additional UI elements.
• Use “followstate” and “observe” to synchronize UI elements.
– b:followstate="id('followed')" links the state of the 2nd element to that of
the 1st
– b:observe="id('observed')" passes all events triggered on the 1st
element on to the 2nd
• Event bubbling ensures that events are passed to parent
elements, this behavior can be disabled:
– <s:event b:on="click" b:bubble="false" />
• Deactivate events on elements when needed:
– b:eventblock
20. Adding Effects

• Effects are specific tasks for visual animation defined with


<s:fxstyle>.

• The objective of effects is to manipulate the appearance or


the position of UI elements. Any (CSS) style attribute can be
used (e.g.: height, width, color, font).

• The execution can be managed via attributes such as “time”


(duration of transition) or “motion” (linear, logarithmic).
Example 08 - FXStyle
<div style="position:absolute; background-color:#FFFF00;
height:30px; width:60px" b:behavior="fx-parseq" />

<s:behavior b:name="fx-parseq">
<s:event b:on="click"> Color
<s:parallel> effect
<s:sequential>
<s:fxstyle b:background-color="#FF0000" b:time="200"/> with time
<s:fxstyle b:background-color="#FFFF00" b:time="2000"/>
</s:sequential>
<s:sequential>
<s:fxstyle b:left="~100px" />
Position
<s:fxstyle b:left="~-50px" /> effect
</s:sequential>
</s:parallel>
</s:event>
</s:behavior>
21. Adding For- & Backward Support

• Internet users are accustomed to navigating between pages using the


back and forward buttons.
• Backbase provides an analogous mechanism inside the single page
interface (SPI) by pushing UI state into the browser history.
• The s:history tag is used to program the back and forward buttons.
Typically, the s:history tag is a child node of an s:event tag.
– <s:event b:on="select">
<s:setstyle b:background-color="#FF0000" />
<s:history b:name="browser">
<s:task b:action="select"/>
</s:history>
</s:event>
– Multiple history stacks can be built using the b:name attribute
II. The Rich User Interface
D. Creating the Application Layout
11. Define Screen Partitioning
12. Adding Client Controls
13. Adding Look & Feel (CSS)
14. Multimedia Elements
E. Applying User Interactions
15. Adding Event & Commands
16. Adding User Interaction Events
17. Drag and Resize
18. Adding Tasks
19. Adding Event Propagation
20. Adding Effects
21. Adding For- & Backward Button Support
F. Formalize Patterns
22. Behaviors: Custom Events & Commands
23. Custom Client Controls
24. Stylesheets
22. Behaviors: Custom Events & Commands

• The objective of a Behavior is to combine multiple events


(including their related commands) into a single Behavior that
can be re-used across multiple GUI elements.
• A new Behavior has its own name (e.g. “mybutton”) which is
used to assign it to GUI elements that require this behavior.
– <s:behavior b:name="mybutton">
• Behaviors can inherit from other behaviors allowing the BXML
programmer to create a hierarchy of frequently used events
and commands.
– <s:behavior b:name=“parent">
– <s:behavior b:behavior=“parent" b:name=“child">
Example 09 - Behaviors
<s:behavior b:name="mybutton">
<s:event b:on="command">
<s:task b:action="alert" b:value="You've clicked the button" />
Defining
</s:event> behavior
</s:behavior>

<div b:behavior="mybutton">Button 1: using behavior</div>


<div b:behavior="mybutton">Button 2: also using behavior</div>
Using
<div b:behavior="mybutton">Button 3: and also using behavior</div> behavior
23. Custom Client Controls

• The objective of a Custom Client Control is the creation of a


new UI element that can be re-used across multiple Rich
Internet Applications.

• A Custom Client Control is a combination of XHTML, CSS


and Behaviors.

• Custom Client Controls are defined using the


<s:htmlstructure> tag and are assigned a name which
becomes a new tag in BXML:
– <s:htmlstructure b:name="b:window">
<div class="b-window"><s:innercontent /></div>
</s:htmlstructure>
Example 10 - Custom Controls
<style type="text/css">
.b-button-outer-1 {
cursor: pointer; CSS style
position: relative;
border: 1px solid #b9cfd8; }
definitions
<…>
</style>

<s:behavior b:name="b-button">
<s:state b:on="deselect" Behavior
b:normal="b-button-outer-1" b:hover="..." b:press="..."/>
</s:behavior> definitions
<s:htmlstructure b:name="b:buttonbar">
<table class="b-buttonbar" cellspacing="2" cellpadding="0" border="0">
<tbody>
<tr>
<s:innercontent/>
</tr>
</tbody>
</table> Custom control
</s:htmlstructure>
definitions
<s:htmlstructure b:name="b:button"> with HTML
<td>
<div class="b-button-outer-2"> and placeholder
<div class="b-button-inner">
<s:innercontent/>
</div>
</div>
</td>
</s:htmlstructure>

<b:buttonbar>
<b:button> Button A </b:button>
Using the
<b:button> Button B </b:button> new tags
</b:buttonbar>
24. Stylesheets

• Formalize frequently used transformations as stylesheets


• The syntax is XSL-like within the Backbase s namespace:
– <s:stylesheet b:name="deck">
<s:template b:match="product">
<div class="item-view" b:name=“dog" b:price="5">
<img>
<s:attribute b:name="src" b:select="items/item/image" />
</img>
<s:if b:test="items/item/image">(Image is here)</s:if>
<div>
<s:value-of b:select="name[position() = 1]" />
</div>
</div>
</s:template>
</s:stylesheet>
III. Client-Side Data and Business Logic

G. Defining Data Bindings


25. Loading Data
26. Client-Side Transformation (Templating)
27. Sorting

H. Implementing Client-Side Business Logic


28. Define Task Execution
29. XPath Functions
30. Script Functions

I. Rich Forms
31. Rich Form Controls
32. Client-Side Validation
25. Loading Data

• Load XML data from the server and bind it to UI elements


• Include, buffer, and load:
– <s:include b:url="data/file.xml" /> inserts data when executed
– <b:buffer b:url="data/file.xml" /> is used to defer loading until parent
element is selected (e.g. tabs in a deck)
– <… b:action="load" b:url=“data/file.xml“…> is used to load data within
events, tasks, etc. The “load” command provides complete control
over what and when to load.
26. Client-Side Transformation (Templating)

• Uses XSL-like stylesheets


• To transform any XML data client-side
• Can transform:
– Client-side XML data sections
– XML data loaded from server
– Output of transformation (chaining)
Example 11 - Data Binding and Transformation
<s:xml b:name="datasource">
<thing>
<name>A</name>
<description>1</description>
</thing>
<thing>
<name>B</name> Inline XML
<description>2</description> datasource
</thing>
<thing>
<name>C</name>
<description>3</description>
</thing>
</s:xml>

<s:stylesheet b:name="stylesheet">
<s:template b:match="/">
<div style="border-width: 1px; border-style: solid;">
<s:apply-templates b:select="thing" />
</div> Stylesheet
</s:template>
<s:template b:match="thing"> with two
<div> templates
<s:attribute b:name="innerHTML" b:select="name" />
</div>
</s:template>
</s:stylesheet>

<div id="destination"></div>

<div>
<s:event b:on="construct">
<s:task b:action="transform" b:stylesheet="b:xml('stylesheet')"
Transforming
b:xmldatasource="b:xml('datasource')" datasource
</s:event>
b:destination="id('destination')" b:mode="replacechildren" />
with stylesheet
</div>
27. Sorting

• Sorting is a special case of transformation for which


Backbase provides specific commands

• Sort any XHTML structure using sort command:


– <s:task b:action="sort" b:source="*" b:target="." b:attribute="b:val" />

• Sort tables using sort command:


– <th b:action="sort" b:cursor="hand">Item</th>

• Use tiling to arrange the sorted items in a grid (if positioned


absolutely)
– <s:task b:action="fxtile" b:target="./*" b:destination="."
b:orientation="cols"/>
III. Client-Side Data and Business Logic

G. Defining Data Bindings


25. Loading Data
26. Client-Side Transformation (Templating)
27. Sorting

H. Implementing Client-Side Business Logic


28. Define Task Execution
29. XPath Functions
30. Script Functions

I. Rich Forms
31. Rich Form Controls
32. Client-Side Validation
28. Define Task Execution
• You can declaratively implement client-side business logic
using <s:task>:
– Conditional logic with <s:choose>, <s:when>, <s:otherwise>
– Conditional tests using <b:test>
– Sequences of tasks using <s:tasklist>, <s:parallel>, <s:sequential>
Example 12 – Task Execution
<s:behavior b:name="truefalse">
<s:event b:on="command">
<s:lock b:target="/">
<s:choose>
<s:when b:test="@success='true'">
<s:setatt success="false"/>
<s:task b:action="alert" b:value="Setting success to false"/>
</s:when> Conditional
<s:otherwise>
<s:setatt success="true"/>
logic and tasks
<s:task b:action="alert" b:value="Setting success to true"/>
</s:otherwise>
</s:choose>
</s:lock>
</s:event>
</s:behavior>

<div b:behavior="truefalse" success="true">True - False</div>


29. XPath Functions

• You can also use various functions within XPath expressions.


• Standard functions (arithmetic and string processing)
– {count(id('z')/span[@b:value = 'a'])}
– {100 mod (4 * 4 - 3) - 9}
– {concat('tr', @b:something, 'e')}
• BPC functions and variables
– {concat($bpc.path,'tools/skin/tools.css')}
– $bpc.version
– bpc(‘drag’), bpc(‘mouse’)
• Setting and getting variables
– <s:task b:action="set" b:target="@innerHTML"
b:value="{concat('tr', @b:something, 'e')}" />
30. Script Functions

• And you can easily interface with JavaScript for executing


more complex client-side logic and calculation.
• Call JavaScript functions from BXML
– b:action="js" b:value="alert('Hello world!')“

• Call JavaScript through standard JS events


– <span onclick="alert('Hello world!');">

• Call BXML from JavaScript


– bpc.move('<div>text</div>','replacechildren',"id('myID')");
– bpc.execute('<s:task b:action="alert" b:value=“ok" />');
– bpc.setXpathVar('myvar',‘myvalue');
III. Client-Side Data and Business Logic

G. Defining Data Bindings


25. Loading Data
26. Client-Side Transformation (Templating)
27. Sorting

H. Implementing Client-Side Business Logic


28. Define Task Execution
29. XPath Functions
30. Script Functions

I. Rich Forms
31. Rich Form Controls
32. Client-Side Validation
31. Rich Form Controls

• Standard HTML form fields such as text field, text area, select
boxes, etc. are available
– Input type=“…”

• Backbase provides additional rich form controls:


– <b:slider> for entering values from a scale

• Backbase provides tags for dividing forms into steps


– <b:step>
– With a simple way to summarize the previous steps.
32. Client-Side Validation

• Events are triggered for validation of fields and of the entire


form.

• Use regular expressions, XPath, or other client-side business


logic for field and form validation.

• Use pre-defined expressions for standard field validation.


– b:required="true“
– b:validation="email"
Example 13 – Rich Forms
<b:panelset b:cols="16em *" >
<b:panel class="b-step-overview b-panel" id="step-overview" style="color:#999999;">
<b b:test="id('step1')/@b:mark='true'" b:action="select" b:target="id('step1')"
b:followstate="id('step1')" b:behavior="navigate">Personal Details</b>
<div b:step="1" style="padding:2px 0px 10px 6px;color:#33333;"><br/></div> Summary
<b b:test="id('step2')/@b:mark='true'" b:action="select" b:target="id('step2')"
b:followstate="id('step2')" b:behavior="navigate">Address</b>
of steps
<div b:step="1" style="padding:2px 0px 10px 6px;color:#33333;"><br/></div>
</b:panel>
<b:panel class="b-panel" style="overflow: auto;">
<form action="response.xml" b:destination="." method="post" b:behavior="form">
<b:step b:step="1" id="step1" b:state="selected">
<div class="stepHeader">Personal Details</div>
<div class="label">First Name <div class="form-field">
<input type="text" name="firstname" b:required="true" /></div></div> Input fields
<div class="label">Last Name <div class="form-field">
<input type="text" name="lastname" b:required="true" /></div></div>
of step 1
<div class="label">Email Name <div class="form-field">
<input type="text" name="email" b:required="true" b:validation="email" /></div></div>
<b:buttonbar style="margin-left: 350px; margin-top: 20px;">
<b:button b:action="trigger" b:target="ancestor::b:step[1]" b:event="next">
<span style="padding:3px 10px 3px 10px">Next</span> Next
</b:button> button
</b:buttonbar>
</b:step>
<b:step b:step="2" id="step2">
<div class="stepHeader">Address</div>
<…>
IV. Tools
J. Development Tools
33. IDE Integration

K. Debugging Tools
34. BXML Debugging
35. I/O Debugging
33. IDE Integration

• Develop BXML pages using standard editing tools:


– Visual Studio
– Eclipse
– Dreamweaver

• Syntax Highlighting

• Code Completion
IDE Integration
IV. Tools
J. Development Tools
33. Integration

K. Debugging Tools
34. BXML Debugging
35. I/O Debugging
34. BXML Debugging
• BXML Inspector: Show current B-Tree
35. I/O Debugging
• Runtime Tracer: Show BPC actions

You might also like