BACKBASE

Agenda
Product Information
Features
Utility
Compatibility
Limitations
Download details and Demo
Loading Data From Server
Desktop Look and Feel
Performance Improvement
 1. Product Information
Leading provider of enterprise software for
creating AJAX-based Rich Internet
Applications (RIAs).
Backbase was founded in 2003
Has headquarters in San Mateo, California,
USA.
Backbase has been consistently profitable
since 2004 —
with many Fortune 2000 companies.
More than three million copies of the Ajax
Framework are
 2. Features
The User Interface
Evolution
RIA Adoption : 60% of all Apps will be
RIA

By 2010, at least 60
percent of new
application development
projects will
include RIA technology,
and at least
RIA Market : “Plug-in” and
“Browser” based

AJAX
BACKBAS
E

Install Separate Player No Install Needed

Replace HTML Extend HTML

Proprietary / Vendor Lock-in Standards Based

Plug-in Based Browser-Based

RIA RIA
Approach : Make Ajax Enterprise
Ready
Custom Ajax Backbase
Programming Framework
+ Zero Install + Zero Install
+ Open + Open
Standards Standards
+ Extend HTML + Extend HTML
+ Native in
- Cross-Browser +
+ Native in
Cross-Browser Compatible
Incompatibility + OO / Inheritance
-JavaScript Spaghetti + Structure / Re-use
-Poor Maintainability + Enable Standards (W3C)
-Lack of Standards + Enforce Governance
-No Governance + Easy to learn XML Tags
- Difficult to Learn + Complete + Integrated Widget
-Hotchpotch of Widgets Lib
-Lack of Behaviors + Pre-build Behaviors / Best
-Lack of Patterns Practices
-Lack of Tooling + Best Practices
-Lack of Server-side + Integrated Dev Tooling
integration + Server-side Integration
-No Vendor Support
Introduction to
AJAX
 Basics of AJAX
 XMLHttpRequest object to exchange XML data asynchronously with the web
server, using the HTTP protocol.

 The client does not have to wait for the data exchange to complete

 Further user interaction with the application is possible.

 A completely new page request is not required

 The user interface appears more reactive to user input.

 The JavaScript in the client updates only those parts of a web page that
need updating by manipulating the DOM without refreshing the complete
page
 MPI Model

Ø Multi-Page Interface (MPI) is synonymous with a

classical web application model.

Ø Each request to the server results in a complete

page refresh.
 SPI Model

Ø An SPI only has one web page

Ø The client takes more control of the
presentation layer.
Ø The Backbase Client Runtime requests
discrete amounts of data, and the server only
returns those small bits.
Ø The entire page is not reloaded, and the
Enterprise AJAX Framework

ØDelivers unmatched flexibility by offering

developers and businesses a true choice of
technologies and methodologies.

ØIt removes many of the complexities of

custom Ajax development.

ØIt works with all server-side environments

including JSF, Struts, Spring MVC – and a Data
Services module.
 Visual Ajax Builder

•An add-on for Backbase Enterprise Release Candidate :

Ajax March 2008
General Available: April 2008
(beta)
• Includes a true WYSIWYG designer

• Allows developers to lay out their

 Rich Applications

These pre-built applications can

easily be customized to meet your
specific needs.
Ø Rich Dashboard

Ø Rich Forms

Ø Co-Browse and Chat

Backbase Client Framework

Ø Managed by a lightweight Client Runtime

embedded in the client web browser

Ø Provides a complete suite of reusable,

extensible widgets

Ø Provides an extensive events system that

allow you to efficiently build rich AJAX
applications.
Communicating with Web Services

There are 2 ways by which you can connect to web services

Ø Connecting to a Web Service with JavaScript
Ø Connecting to a Web Service Using with XEL and Command

SMIL Animation
Ø SMIL stands for Synchronized Multimedia Integration Language
Ø SMIL is an XML XML-based language that allows interactive multimedia
presentations.
 Supported Browsers
 Adobe Air 1.0
 Firefox 1.5
 Firefox 2
 Firefox 3
 Internet Explorer 6
 Internet Explorer 7
 Netscape 9
 Opera 9.27
 Safari 3
 Although all modern browsers support the XMLHttpRequest
object, their implementations of it vary.
 
 Advanced JavaScript and CSS knowledge is required to make
sure that AJAX widgets have standard behavior and presentation in
different web browsers.

 Extensive development time is needed to create dynamic

widgets and advanced functionality such as drag-and-drop, data
binding, and skinning.

 It is tedious and time consuming to build a custom JavaScript

function library

 Bookmarking and browser history functionality can be difficult

where the browser cannot track changes to a section of a web page.

 Web developers can create web applications with any text editor.
However, you should use the Eclipse IDE, because Backbase
We can download the below mentioned softwares
from the URL
http://bdn.backbase.com/download-a

 Backbase Client Framework

 Visual Ajax Builder

 Backbase JSF Framework

Hello World
1. Boot Phase
Ø You need to include the JavaScript library file called boot.js
Ø boot.js is the JavaScript library that loads the Client Runtime
Ø Boot.js identifies your browser and loads the corresponding client runtime

2. Build Phase
Ø Include the Client Framework bindings xml file (config.xml)
Ø By including this file, the Client Framework engine can recognize these
elements and process them appropriately.
Ø The Client Runtime processes all script blocks in the page with the
attribute application/backbase+xml.
Ø Other content in your page is processed by the browser
3. Runtime Phase

Ø User interaction with the application is communicated to the Client

Runtime through event handling and dispatching.

Ø Loading an XML fragment or retrieve database information, it does so by

automatically managing the XMLHttpRequest object

Ø The engine properly manages the representation and view of the data
structure.

Ø It also limits the number of round trips to the server, which improves the
responsiveness of the application.
About XEL
 XEL is a programming language that application developers will use with
the Client Framework to define handlers and execute functional logic
 An alternative to java script.
 Gives developers the built-in ability to target elements using XPath.
 Gives developers access to the Command Functions declarative API

Usage of XEL
 Adding an event handler to an element
 Implementing logic
 Extending a widget instance
 Creating and destructing elements
 Allowing one widget to communicate with another widget
 Loading data asynchronously
Loading an External XML Fragment
 Widgets are the fundamental building blocks of web applications.

 Backbase complete component library with over 250 pre-built widgets

and functions.

Examples of Widgets
 Buttons
 input fields
 windows.

Widget Categories
 Visual - Widgets that have a presentation
 Containers - Widgets such as tabBox that have dependent child widgets
 Dependent - Widgets such as tab that must be nested within parent widgets
 Non-Visual - Widgets that provide non-visual functionalities
Reasons for Extending a Widget
 change a widget's presentation
 create your own skin to create a consistent presentation for multiple
widgets
 provide additional behavior
 add a new handler for an event
 restrict events or behaviors
 add validators or converters

Reasons to crate a new widget from scratch

 create a widget that does not currently exist
 combine two or more existing widgets
BTL Widget Factory
BB Client Framework –
Widgets
Automatic Loading
 Using the include tag is a type of automatic loading
 When the BPC finds an s:include tag, it loads and parses the content before rendering the rest of the
page.
 The included files are loaded, parsed and rendered when the application starts up.

Example:
<s:include b:url="../../controls/backbase/default.xml" />

Lazy Loading
 Defer initialization of an object until the point at which it is needed.
 More efficient when appropriately used.
 Controls such as b:tree and b:populator support lazy loading.

Example:
<div>
Click me to load data from the loadfiledata.xml file!
<b:populator url="data/loadfiledata.xml" events="click" />
</div>
Desktop Look and Feel
Menubar
Desktop Look and Feel
Context Menu

Right click on the

form and you will
get the context
menu. On the
selection of a
specific color from
the menu, the form
background color
 Balance out the amount of client side business logic
  Reduce the number of files (on production server)
  Less HTTP Requests
  Use deferred/lazy loading
  Prefer Javascript over XEL
  Use CDN( Content Distribution Network) for static files
  Use the optimized backbase client framework
  Enable GZip on the web server (reduces the file size to 1/4th)
  Stripping of comments, redundant space and empty lines from
the source code
 The Backbase
Advantage…

Summary
The Backbase Advantage…
Value: Formalized UI Patterns (e.g. dashboard)
Rich Internet Apps Customizable of the Shelf
Kick-start your Implementation
Blueprints Focus on Solving Business Problems

Value: Developer Productivity

Visual Ajax Builder Consistent Look & Feel (UX)
Customizable & Extendible Widgets
Empower non-JS developers !!!
Extendable Widgets Faster Time To Market

Value: Cross Browser Equalization

Avoid Ajax Plumbing
Enterprise Ajax Generic RIA Services
Platform Structure & Governance
Open & Extendible Platform
Standards Based
DEMO SESSION
THANK YOU