![]()
Backbase 4 RIA Development
![]()
Table of Contents
Backbase 4 RIA Development
Credits
About the Authors
About the Reviewers
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Errata
Piracy
Questions
1. Hello Backbase!
What is Backbase?
What can Backbase do for me?
The Backbase Explorer
Setting up a web development environment
The web server and a server scripting language
The browser
Using an IDE
Download the Backbase framework
The Backbase page skeleton
"Hello Backbase" in four variations
Verifying the installation of the Backbase framework
"Hello World" using a Backbase balloon
The JavaScript balloon
The XEL balloon
Hello Server!
The page with the form
The PHP response
XML and namespaces
Why do we need XML namespaces?
Declaring XML namespaces
Use of namespaces with Backbase
A basic page layout
Summary
2. User Interface Development
Squaring the circles of web applications
The Backbase Reference
UI markup languages
Where is the source code?
XHTML
The Backbase Tag Library
Backbase Tag Library widget overview
The BTL abstract elements
Abstract element inheritance structure
element
visualElement
positionElement
dimensionElement
cardStack and card
The layout widgets
Accordion
Box
deck
navBox
panelSet
tabBox
The BTL utility elements
codeHighlighter
label
populator
skinSettings
xhtml and xml
Styling techniques for GUI widgets
Using CSS
Skinning
The BTL skinSettings widget
Height problems
A BTL Exerciser
The application structure
index.html
app.xml
Tab panel content
The menu in each tab panel
Summary
3. Writing the Application Logic
The application programming model
Overview of the Backbase APIs
The bb object
Low level APIs—the W3C DOM family
The Document Object Model
Traversing the document tree
Modifying the document tree
Dealing with events
Events
DOM event flow and cancelable events
Registering event handlers
Using markup with an XEL handler element
Using markup with XEL handler attributes
Using JavaScript and the DOM events API
APIs relevant for dealing with events
Event types
BTL widget custom events
Custom event creation
Backbase utility functions
The bb object utility functions
Backbase Commands
The Backbase XML Execution Language (XEL)
XEL features
Variables in XEL
Declaring variables
Variable scope
Retrieving variable values
Setting properties and variables
Getting and setting attributes
Conditional execution in XEL
Conditional logic
Iterators
Functions in XEL
Calling a function or method
Passing a function argument
Passing context
Using JavaScript in XEL
XPath
Evaluating attribute values
String mode
XPath mode
Commands to manipulate the DOM or elements
Manipulating elements
focus and blur
fireEvent
position
scrollTo
setText
show, hide, and showHide
sort
tile
transform
param
Manipulating the DOM
copy
create
attribute
copy-of
value-of
destroy
move
Info and Notify BTL widgets
balloon
infoBox
loadingMessage
toolTip
A Backbase Command Exerciser
Summary
4. Client-server Communication and Forms
AJAX
Asynchronous communication
The XMLHttpRequest object
The JSONRequest object
The load command
header
The JavaScript load command
Working with forms
The forms profiles
Form elements
The extended form element
The extended input element
fileInput
The abstract BTL form elements
focusableElement
dropDown
formField, formList, and rangeFormField
The BTL form widgets
calendar
checkBoxGroup
comboBox
listBox
slider
spinner
suggestBox
Validating input fields
Required fields
Data type validation
AJAX and architecture
Model-View-Controller
Implementing MVC on the server
The server controller
The server model
The server view
Scriptlets
The C3D travel blog site
Requirements for the C3D site
Design
Data model
Page layout
Good use of IDs
Server application structure
The C3D controller
The C3D model
The C3D view
Login and logout
Add a trip
Summary
5. Data-bound Widgets
Why is data binding important?
The server-side of data binding
Data-binding fundamentals
dataSource
Local data sources
Remote data sources
Static data sources
dataObserver
The dataUpdate method
Make an HTML element data bound
Creating the data source
Define the new widget
The dataUpdate method
Show the data-bound bulleted list
The data-bound widgets
dataGrid
Grid editing and fieldEditor
The eleven features of dataGrid
Common header menu
Header context menu
Data paging
Column drag-and-drop
Column freezing
One-click editing
Editing and focusing together
Instant editing
Collapsible info block
Form editing
Live scrolling
Continue the development of the C3D application
Adding a trip entry
Show trips and trip entries
Summary
6. More Dynamic Behavior
Behaviors
Drag-and-drop
dragBase
drag
dragTarget
Basic dragging and dropping with widgets
Drag constraints
dragItem
dragGroup
useDragClass
dragConstraint
Reverting a dragged element
Advanced dragging and dropping with widgets
Drag-and-drop columns inside a table
Resize
Using the resize behavior
resizeEdges
resizeMin and resizeMax
resizeType
resizeConstraint
Resize custom events
Custom Grippies
Resizing table columns
Commands for the behaviors
addBehavior
removeBehavior
setBehavior
Broadcaster/observer
Animating the UI
SMIL animation
Adding animation to the C3D example application
Summary
7. Creating UI Components
Component models and technologies
Introduction to the Tag Definition Language (TDL)
Widgets
The advantages of using TDL
Object-orientation
Object-oriented concepts
OO and TDL
OO and web applications
Model-View-Controller
Widget creation with TDL
Overview of the TDL elements
Simple widgets
Building a TDL widget definition
The template, attribute, and resource tags
Templates
The content tag
Templates with JavaScript
Attributes
Positioned yellow notes
Changers and mappers
Resources
The yellow notes example using resources
Named resources
Widget event handling
The handler tag
Updatable yellow notes
Widgets as object...
