Back Base

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 RIA

Browser-Based RIA

Approach : Make Ajax Enterprise Ready Custom Ajax Programming + Zero Install + Open Standards + Extend HTML + Native in - Cross-Browser 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 + in + Native 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 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:

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… Rich Internet Apps Blueprints

Value: Formalized UI Patterns (e.g. dashboard) Customizable of the Shelf Kick-start your Implementation Focus on Solving Business Problems

Visual Ajax Builder Extendable Widgets

Enterprise Ajax Platform

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

DEMO SESSION

THANK YOU