Book Image

Backbase 4 RIA Development

Book Image

Backbase 4 RIA Development

Overview of this book

Backbase is a very powerful and complex JavaScript library, with many user interface components to help make web development easier. It allows the development of Rich Internet Applications (RIA) that run within all major browsers but its powers and complexity mean that the choice of component can be overwhelming. Understanding when and how to use the right component might not always be straightforward. This book makes that easier. This is a practical book that teaches you how to use the Backbase Client Framework effectively, with a complete overview and many examples. A core developer of the framework puts the technologies used into a wider perspective of existing web standards and a seasoned software architect explains why XML-based UI definition produces better web applications. 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. Packed with examples, the book shows you how to get the most from the library of UI components, and then extend the library with its own custom language. With this book in hand, it is easy to enable AJAX within your web application. You will be able to use the Backbase framework effectively, from basic applications to complex, custom-defined UI components. This book contains a complete overview of all the UI libraries available within the Backbase framework and shows examples for each element described. The Backbase framework offers an innovative Tag Definition Language (TDL), which allows developers to create new UI components that can be used as XML elements, in the same way as using the built-in GUI library. Using TDL brings considerable development advantages, and this book explains how. Significant attention is also given to architectural aspects of designing a web-application, showing sample applications using a model-view-controller approach.
Table of Contents (16 chapters)
Backbase 4 RIA Development
About the Authors
About the Reviewers


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.


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:

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="">
The server says: Hello <strong>John Doe</strong>! - 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:

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


Warnings or important notes appear in a box like this.


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

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.


Downloading the example code for the book

Visit to directly download the example code.

The downloadable files contain instructions on how to use them.


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


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 with a link to the suspected pirated material.

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


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