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 objects

Defining classes with TDL

Inheritance

Composition

The element tag

Properties

Property definition

Property getters

Property setters

A web lamp example

Methods

The argument tag

The body tag

Sliding thumbnails

Constructors and destructors

Composite widgets

Compose a pedestrian light

Order form building blocks

Inheritance

Yellow notes using inheritance

Interfaces

Extending BTL

Behaviors

Behavior example

Uses

The limits of creating UI components

TDL as a macro language

TDL as an object-oriented language

Squaring the circles

Namespaces

Conclusion

Summary

8. Widget Wrap-up

Action and menu widgets

button

contextMenu

menuBar

menuPopUp

toolBar

pager

Data-bound menus

The dataSource for a menu

The menuActivate event

dataContextMenu

dataMenu

Windows and dialogs

window

windowArea

taskbar

modal

Multimedia widgets

applet

flash

An example with menus and windows

Is the sq:windowMenu widget useful?

Miscellaneous commands

trace

alert

bookmark

Summary

9. Debugging, Optimization, and Deployment

Debugging

The Backbase debugger

Overview

The information/error bar

The debugger window

Console tab

The Model and View tabs

TDL tab

Network tab

Reports tab

Preferences tab

Help tab

Application optimization

Optimizing content

Making fewer HTTP requests

Making AJAX cacheable

Post- or preloading components

Reducing the number of DOM elements

Optimizing the server

Compression

Flushing the buffer early

Using GET for AJAX requests

Optimizing cookies

Optimizing JavaScript and CSS

Placing JavaScript code at the end of the page and CSS at the top

Minify JavaScript and CSS

Removing duplicate scripts

Minimizing DOM access

Developing smart event handlers

Optimizing images

The TDL Optimizer

Creating a configuration file for the optimizer

Running the TDL Optimizer

Deploying the optimized bindings

Deployment on a server

Install

Installation in a Java environment

Defining alias locations

Summary

10. Framework Comparison

The landscape of client-side technologies

Server-side and client-side

Client-side libraries and frameworks

Flash, Silverlight, and JavaScript-based frameworks

Client-side GUI framework and application framework

Backbase and other client-side GUI frameworks

Programming model

Widgets

Component model

Data binding

Standards support

Internationalization

Performance

Long-term viability

Conclusion

An integration example

AJAX toolkit reference

ASP.NET AJAX

Bindows

Cappuccino

Ext JS

The Dojo toolkit

Google Web Toolkit

Javeline

jQuery

MooTools

Prototype and Script.aculo.us

Prototype

Script.aculo.us

PureMVC

qooxdoo

SproutCore

The Yahoo User Interface (YUI) library

ZK

Summary

11. The Square Web Application

What is a square web application?

No global JavaScript functions

Make widgets data bound

Do not generate HTML at the server

Send only XML data from server to client

Make the layout modular

Use MVC throughout

The client is the view

Place the controller at the server

No business logic at the client

Complete the C3D example

C3D: make it work

The photo upload form

The dataComboBoxes

Handling the image upload

Add a Google map

C3D: make it right

C3D: make it fast

Initial page loading

Optimizing client runtime processing

Server-side issues

Usability aspects

Legacy integration

Progressive enhancement

Internationalization and localization

Accessibility

What will the future bring?

A square puzzle

Summary

Index

Backbase 4 RIA Development

Ghica van Emde Boas

Sergey Ilinsky

Backbase 4 RIA Development

Copyright © 2009 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2009

Production Reference: 1041209

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847199-12-6

www.packtpub.com

Cover Image by Vinayak Chittar (<[email protected]>)

Credits

Authors

Ghica van Emde Boas

Sergey Ilinsky

Reviewers

Deepak Vohra

Jerry Spohn

Peter Svensson

Acquisition Editor

Douglas Paterson

Development Editor

Dilip Venkatesh

Technical Editor

Wilson D'souza

Copy Editor

Ajay Shanker

Indexer

Hemangini Bari

Editorial Team Leader

Abhijeet Deobhakta

Project Team Leader

Priya Mukherji

Project Coordinator

Ashwin Shetty

Proofreader

Lynda Sliwoski

Graphics

Nilesh R. Mohite

Production Coordinator

Adline Swetha Jesuthas

Cover Work

Adline Swetha Jesuthas

About the Authors

Ghica van Emde Boas is an independent IT Consultant. She was employed by IBM in the Netherlands for 30 years as a relational database developer, as an IT Architect, and as a Java developer involved with the largest Java framework ever written—the IBM SanFrancisco Framework. She has been taking part in the development of object-oriented methodologies within IBM. She has been teaching these at IBM's Object Technology University in Belgium and the USA.

Ghica has co-organized several workshops on Generative Model Transformations at OOPSLA (Object-oriented Programming, Systems, Languages, and Applications) conferences, the place where it all happened: objects, design patterns, modeling wars (UML), eXtreme programming, and Agile development. She now specializes in PHP, MySQL, and web application development. She helped write the client framework documentation for Backbase.

Ghica has written two books in Dutch about PHP and MySQL for Pearson Education, and has contributed considerably to the Dutch translation of "Foundations of Ajax", by Ryan Asleson and Nathaniel T. Schutta, Apress. While at IBM, Ghica participated in writing two Redbooks and published two articles, one in the IBM Journal of Research and Development and the other in the IBM Systems Journal.

Ghica lives and works in the Netherlands. She is married and has three children. She likes rowing on the Spaarne River.

First of all, I would like to thank Dimitra Retsina, Jouk Pleiter, and Gerbert Kaandorp from Backbase for their enthusiasm about this book-writing project and for supporting me by allowing access to all information about the Backbase framework that I needed.

Sergey Ilinsky deserves my gratitude for his spontaneous offer to be a co-author and for the fierce discussions we had, which were always interesting.

Without the help of the R&D crew at Backbase, this book would contain a lot more errors and fewer examples. Thanks!

The Planning & Scores group at the ROC Eindhoven (a very large school in the Netherlands) helped me by developing widgets that I could use in the sample application, while Geert Broekmans wrote the PHP database framework used in the sample application of the book.

I am truly grateful for the help and useful comments from the reviewers and the staff at Packt Publishing.

Of course writing this book would not have been possible without the ongoing support for my information technology related adventures, from my husband, Peter.

Sergey Ilinsky is a senior UI engineer at Nedstat BV and a Tech Lead for an open source project at Clientside OY. He has worked for Backbase for three years, evangelizing open-standards based software development, while engineering and developing core parts of the Backbase Client Framework.

Having been heavily involved with client-side development since 2003, he became an expert in many standard and proprietary web technologies. He is also a contributor to some of the modern web-related specifications. Sergey can frequently be found on AJAX or client-side technology related forums, or he can be met at international developers' conferences where he occasionally gives talks.

I would like to thank Backbase for the opportunity they gave me to work and improve on this beautiful piece of software—the Backbase Ajax Client Framework—and later for letting me join the project of writing this book.

Thanks to Ghica van Emde Boas, the main writer of the book, who I had the pleasure to work with and who never sent me a third email reminder whenever I delayed my part.

Thanks to the staff of Packt Publishing involved in this book project.

I would like to express special gratitude to my girlfriend, Elena O., for her tolerance and ongoing support.

About the Reviewers

Deepak Vohra is a consultant and a principal member of the NuBean.com software company. Deepak is a Sun Certified Java Programmer and Web Component Developer, and has worked in the fields of XML and Java programming and J2EE for over five years. Deepak is the co-author of the book "Pro XML Development with Java Technology", Apress and was the technical reviewer for the book WebLogic: The Definitive Guide", O'Reilly. Deepak was also the technical reviewer for the book "Ruby Programming for the Absolute Beginner", Course Technology PTR and the technical editor for the book "Prototype and Scriptaculous in Action", Manning Publications. Deepak is also the author of the books "JDBC 4.0 and Oracle JDeveloper for J2EE Development", Packt Publishing and "Processing XML Documents with Oracle JDeveloper 11g", Packt Publishing.

Jerry L. Spohn is a Manager of Development for a medium-sized software development firm in Exton, Pennsylvania. His responsibilities include managing a team of developers and assisting in architecting a large, multilingual, multi-currency loan accounting system, written in COBOL and Java. He is also responsible for maintaining and tracking a system-wide program database documentation web site, for which he uses DotNetNuke as the portal.

Jerry is also the owner of Spohn Software LLC, a small consulting firm that helps small businesses in all aspects of maintaining and improving their business processes. This includes helping with the creation and maintenance of websites, general office productivity issues, and computer procurement. Spohn Software, as a firm, prefers to teach their clients how to solve their own problems internally, rather than require a long-term contract, thereby making the business more productive and profitable in the future.

Jerry currently resides in Fleetwood, Pennsylvania. He enjoys spending time with his two sons, Nicholas and Nolan.

Peter Svensson is a developer, architect, father, and runs his own company—Greener Grass AB. When he's not arranging the Scandinavian Web Developer Conference or managing the Stockholm Google Technology User Group, he develops rich web applications using the Dojo AJAX Toolkit and no Flash whatsoever. He's also the author of "Learning Dojo", Packt Publishing.

Thanks to my loving family for supporting my crazy stunts, frequent flights, and benevolent maniacal schemes.

Preface

This book is about squaring the circles of web applications. It deals with the Backbase Client Framework.

Before you put this book away because you think that squaring circles is rather vague and mathematically impossible, let's hasten to say that this book will give you a solid foundation in web application programming using the Backbase Client Framework.

Now, before you again think of putting this book away because you are not sure why you should use the Backbase framework instead of one of the many other JavaScript frameworks or libraries out there, give us a chance to briefly explain what squaring the circles of web applications means and what the Backbase framework has to do with this.

Here is a set of rhetorical questions: Would it not be nice if you have an extensive library of UI widgets that could be used in the same way as HTML? If you could extend HTML with new widgets and components in any way you like? If you could use AJAX almost transparently? If you could bind data retrieved dynamically from a server in flexible ways to any widget, in particular to complex data grids?

Of course, that would be nice for a number of reasons. First of all, XML-based UI definition languages such as HTML have been proven to be a very effective and natural way to lay out web pages. UI designers are familiar with them and have good tools to help them make good designs.

Therefore, the UI designer or the developer who plays this role should be able to define the UI using an XML-based UI definition language directly. It should not be necessary to generate the HTML or UI definition in complex ways using a server scripting language such as PHP or JSP; even worse is constructing the DOM tree to define the UI using JavaScript. This is because it is very hard to predict what the final result on the web page will be from the perspective of the UI designer. Yet, this is a common practice today.

Rich UI widgets will have rich interaction with each other and with a server. For example, to retrieve new data dynamically from a database to be displayed in a table, a drop-down list, or a report, and so on. Common interaction patters involve also submitting form data that can be used for updates on a server.

Creating rich interaction is a programmer's job. On the client side, you will want to use JavaScript and on the server side, you have a choice of options according to your preference or that of your developers. The question is how do you prevent polluting your nice, clean, square-bracketed XML-based UI definition language with the round JavaScript objects that you need to implement the desired behavior?

The answer is the Backbase Client Framework. For details of how this happens and how you really square the circles, we refer to the rest of this book. But let's briefly introduce the framework here: the Backbase Client Framework is a standards-based, server independent, cross-browser framework to create Rich Internet Applications (RIAs).

RIA development is usually associated with either Adobe Flex or Microsoft Silverlight. Although both have similar XML-based UI definition languages, the main difference with the Backbase framework is that they need a plugin to run, whereas the Backbase framework does not because it is developed in JavaScript.

Backbase allows the development of web applications that run within all major browsers, whereas developers are able to use established standards for XHTML, DOM, CSS, XPath, and XSLT, even if the browser used does not support them. The transparent use of AJAX technologies, for example to submit forms or to retrieve updates for data grids, can be taken for granted with the Backbase framework.

This book teaches you how to use the Backbase framework effectively from Hello Backbase to complex custom-defined UI components. The book contains a complete overview of all UI libraries available within the Backbase framework and shows examples for each element described. It teaches you how to develop your own widgets, providing a comprehensive overview of the Backbase Tag Definition Language (TDL) and by showing interesting, non-trivial examples.

Significant attention is given to the architectural aspects of designing a web application, showing sample applications using a Model-View-Controller approach.

What this book covers

Here is a summary of the chapter contents:

Chapter 1: Hello Backbase!, walks you through the steps to set up your development environment.

The famous Hello World is shown in many variations: with only basic JavaScript, a Backbase UI widget together with basic JavaScript, a Backbase Tag Library widget together with the Backbase XML Execution Language, and finally using AJAX communication with a server script.

This chapter teaches you something about XML namespaces.

Chapter 2: User Interface Development, provides a closer look at the Backbase UI markup languages and their XML namespaces. We give an overview of the Backbase Tag Library (BTL) and details about the UI layout widgets in BTL.

The proper layout of an application user interface involves styling with CSS. We describe how CSS can interact with the BTL widgets and how you can go about styling in your web application.

Chapter 3: Writing the Application Logic, provides more details about the execution logic of a web application. We look at the Backbase programming model and the various APIs it provides. In particular, we look at the Backbase XML Execution Language and at the Command Functions.

We add a few new BTL widgets to our repertoire: the Info and Notify widgets.

Chapter 4: Client-server Communication and Forms, covers subjects that range from low level details about asynchronous communication between client and server, to high level web application architecture.

We show you the details of forms support, including validation options, in the Backbase framework and list the widgets available in this category.

We will start applying the knowledge acquired in these four chapters to design and develop a sample application for a travel blog site, the C3D sample application.

Chapter 5: Data-bound Widgets, deals with data binding which is an interaction between a data source, usually residing on a server (for example, a database), and a data observer is usually an object on the client that can map this data to a UI widget.

In this chapter we discuss data binding, the data-bound widgets in the Backbase framework, and how you can make your own widget.

The most powerful data-bound widget in the Backbase framework is the dataGrid. With 11 examples, we explore many details of using this grid.

Chapter 6: More Dynamic Behavior, talks about:

Behaviors: Generic functionality that you can attach to any Backbase element.

The built-in behaviors, in particular the drag-and-drop behavior: how you can influence the dragging of elements and the things you can do when the element is dropped. We also discuss the resize behavior with its options.

Command functions to add, remove, or set behaviors dynamically.

The broadcaster/observer elements and functions.

Animation with the Synchronized Multimedia Integration Language (SMIL).

Chapter 7: Creating UI Components, gives a lot of detail about the Tag Definition Language (TDL), the most interesting and unique feature of the Backbase framework. We show that you can build powerful UI components using TDL, which promises new ways of doing web application development.

Chapter 8: Widget Wrap-Up, covers almost all the remaining BTL widgets and command functions. We will look in detail at actions, menus, and windows.

Chapter 9: Debugging, Optimization, and Deployment, shows that the Backbase tool set, especially the debugger, has an advantage over other tools because it works with all browsers. In addition, the Backbase debugger allows you to inspect your Backbase application structure and all custom built widgets easily.

Using the guidelines set forth by the YSlow tool, we describe what you can do to optimize a Backbase web application.

We look at deploying the Backbase framework libraries, optimizing the TDL bindings, and using the optimized versions of the bindings delivered with the Backbase package.

Chapter 10: Framework Comparison, is a rather theoretical chapter that will show you a way to look at the various JavaScript frameworks available and how to categorize them.

We illustrate with an example the difference in coding style for a pure JavaScript framework as opposed to the Backbase framework using XML for UI layout. We also illustrate how easy it is to integrate other frameworks into the Backbase framework.

Chapter 11: The Square Web Application, formulates what a square web application is and how to develop one.

This last chapter provides a last look at the C3D travel blog sample application. It shows changes and updates according to the make it work, make it right, make it fast principle. The details of uploading an image and of including a Google map are included.

We end the chapter by developing a square puzzle.

What you need for this book

This book includes many examples. All examples are provided in the sample code for this book in an easily operational form. Many examples only require a browser to run. You will need a web development environment, as explained in Chapter 1, to run the examples where server interaction is involved. Later in the book, you will need to set up a database to run the C3D sample application.

Who this book is for

This book is for web developers who want to develop applications using the Backbase Client Framework. It may also be interesting for web developers and web application architects who want to know more about XML-based web application architectures.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: We can include other contexts through the use of the include directive.

A block of code is set as follows:

1.0 encoding=UTF-8?>

The server says: Hello John Doe! - on:

Friday 30th of May 2008 12:50:43 PM

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

xmlns:e=http://www.backbase.com/2006/xel

event=click type=text/javascript>

alert('Backbase says hello!');

Click me

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: clicking the Next button moves you to the next screen.

Note

Warnings or important notes appear in a box like this.

Note

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an email to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Tip

Downloading the example code for the book

Visit http://www.packtpub.com/files/code/9126_Code.zip to directly download the example code.

The downloadable files contain instructions on how to use them.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or web site name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Hello Backbase!

In this chapter, we will say hello! to the Backbase Client Framework. We will explain how to download the framework and how to install it. Then, we will discuss how to set up a new application that'll show Hello World!. At the end of this chapter, we will also show a simple page layout using a Backbase panelSet widget. We will expand this page into a client web application in later chapters.

In each chapter, we will cover some background information that will help you understand how the Backbase framework works. In this chapter we will look at the following subjects in more detail:

What are Backbase, AJAX, and RIA?

Setting up your development environment, downloading the Backbase Client Framework, and installing it

The Backbase Explorer

The Backbase page skeleton that is needed to load the client runtime of the framework

Hello Backbase examples

Namespaces and how they are used in the Backbase framework

A basic page with a panelSet

What is Backbase?

The Backbase Client Framework is a standards based, server independent, cross-browser solution to creating web applications, ranging from traditional to desktop-like. It uses AJAX technologies to easily develop and deploy Rich Internet Applications.

This is a mouthful of a definition. Let's look at the meaning of those terms first:

Standards based: XHMTL, CSS, XML, and JavaScript are used according to defined standards.

Server independent: The Backbase Client Framework is server agnostic, as it does not know which server or which server language it is communicating with.

AJAX: Asynchronous JavaScript and XML is an enabling technology for creating Rich Internet Applications. We will provide an overview in Chapter 4.

RIA (Rich Internet Applications): This is what you can build using the Backbase Client Framework—web applications that have a rich user interface, and allow a user to interact with the application. In addition to AJAX as a communication enabler, there is also an extensive library with UI widgets available.

In addition to the Client Framework, Backbase offers a set of extensions for the Java environment. It includes a JavaServer Faces (JSF) extension, a generic connector for JSP or Struts, and a Data Services extension. These extensions are not discussed in this book.

What can Backbase do for me?

If you are like us and like many web developers, you may have started writing simple HTML when developing web applications. After a while, you may have decided to separate presentation from structure and to give your web pages a better look using CSS. The next thing in your evolution as a web developer would have been making your pages more user friendly and interactive, by creating tool tips, pop-up windows, tab boxes, and by validating forms before submitting. Maybe you did this using little pieces of JavaScript downloaded from the Web or by building your own JavaScript function libraries. On top of this, you may have tried to give your web applications the look and feel of a desktop application by using AJAX, requiring more JavaScript everywhere.

Now, what happened to the source code of your web pages? Again, if you are like us, over time the HTML code became littered with many pieces of JavaScript. It became difficult to see what the structure of the page was, even more so when you tried to generate the HTML code from PHP or JSP or some other server-side scripting language. Perhaps, you found out too that it is really hard to make a web page that will show well in all major browsers.

Would it not be nice if there was...

A framework that has the tool tips and the tab boxes readily available for you and will allow you to code these widgets as if they were HTML tags?

A framework that has AJAX support almost transparently built in?

A framework that allows you to bind data from a database to widgets on your page, such as a data grid with paging, sorting, and more?

A framework that allows you to extend the provided widgets or build your own widgets, and then use these widgets in exactly the same way as the widgets provided with the framework?

And finally, a framework that runs in standard browsers without requiring a plugin?

The Backbase Client Framework is such a framework. We will call it Backbase most of the time, which is also the name of the company that built the framework. Backbase can be used freely. There is no difference between the commercial and the community edition, except for the license, which states that you should not deploy it commercially on a server with more than two processors.

This book is intended to make you an expert in using the Backbase framework. We will cover just enough of AJAX, XML, XHTML, namespaces, XPath, CSS, and the Document Object Model (DOM) to make the Backbase framework easier to use, and to understand why Backbase is built like it is. While doing so, we hope that we can increase your knowledge of the core client web technologies and how they relate to each other. With this knowledge, you can evaluate Backbase against other frameworks and decide which one suits your purpose the best.

To round off this introduction, let's summarize the advantages of using the Backbase Client Framework:

The framework is written in JavaScript. Therefore, it runs on all modern browsers and requires no plugin or prior installation.

The framework is XML based. This means that you can define your GUIs using XML tags. This is very important for clarity of code and design, and is more familiar to UI developers.

The widgets that are built-in or that you create are objects, in the meaning of being object oriented. This means that you can use object-oriented design methods effectively to design a Backbase application.

The framework itself is built using a Model-View-Controller (MVC) architecture. You are encouraged to similarly design your applications using MVC.

The framework is standards based and provides cross-browser functionality. This means that the Backbase framework allows you to use standards, such as DOM 3 events or SMIL that may not be available in all browsers.

Another transparent feature is the AJAX communication built into several UI widgets. For example, you do not need to create XMLHttpRequest objects to submit a form. The framework will do this automatically for you if and when you tell it where the response should go.

There is an Eclipse IDE plugin available to help with the syntax of UI widgets.

The framework easily integrates with third-party widgets.

The Backbase Explorer

Let us first take a look at what the Backbase framework contains. On the Developer Network site of Backbase, there is a set of demos that you can view online or download for further inspection. The URL for this site is http://bdn.backbase.com/client/demos.

These demos include Sample Application Layouts, a Progressive Enhancement Demo, a Rich Forms Demo, and Coexistence Demos. You can take a look at those and run them online, but according to our opinion, they are only mildly interesting, except for the Backbase Explorer.

The Backbase Explorer allows you to view all UI widgets from the Backbase Tag Library ( BTL); you can see the source code that is needed to show the example, and you can change the source code to see what happens.