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

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

Install Separate Player Replace HTML Proprietary / Vendor Lock-in No Install Needed Extend HTML Standards Based

Plug-in Based RIA

Browser-Based RIA

Approach : Make Ajax Enterprise Ready
Custom Ajax Programming + Zero Install + Open Standards + Extend HTML + Cross-Browser - Native in Incompatibility -JavaScript Spaghetti -Poor Maintainability -Lack of Standards -No Governance - Difficult to Learn -Hotchpotch of Widgets -Lack of Behaviors -Lack of Patterns -Lack of Tooling -Lack of Server-side integration -No Vendor Support Backbase Framework + Zero Install + Open Standards + Extend HTML + Native in + Cross-Browser Compatible + OO / Inheritance + Structure / Re-use + Enable Standards (W3C) + Enforce Governance + Easy to learn XML Tags + Complete + Integrated Widget Lib + Pre-build Behaviors / Best Practices + Best Practices + Integrated Dev Tooling + Server-side Integration

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 Ajax • Includes a true WYSIWYG designer • Allows developers to lay out their

Release Candidate : March 2008 General Available: April 2008 (beta)

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
 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


 The included files are loaded, parsed and rendered when the application starts up.

<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.

<div> Click me to load data from the loadfiledata.xml file! <b:populator url="data/loadfiledata.xml" events="click" /> </div>

Desktop Look and Feel

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…

The Backbase Advantage…
Rich Internet Apps Blueprints
Value: Formalized UI Patterns (e.g. dashboard) Customizable of the Shelf Kick-start your Implementation Focus on Solving Business Problems Value: Developer Productivity Consistent Look & Feel (UX) Customizable & Extendible Widgets Empower non-JS developers !!! Faster Time To Market Value: Cross Browser Equalization Avoid Ajax Plumbing Generic RIA Services Structure & Governance Open & Extendible Platform Standards Based

Visual Ajax Builder Extendable Widgets

Enterprise Ajax Platform