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

The Backbase page skeleton

There is one more thing we would like to take care of before we really start. It will save a lot of useless book space if we can explain what a typical starter page for the Backbase framework looks like and then forget about it. Of course, the examples that are supplied with this book are all ready to execute and therefore this source code will repeat the skeleton page code where required.

For any Backbase enabled page, you need an HTML file, usually named index.html, which looks like this:

<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xmlns:xi="">
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>The Title of your Application</title>
<script type="text/javascript" src="../../backbase/4_4_1/engine/boot.js" >

<script type="application/backbase+xml">
<xi:include href="../../backbase/4_4_1/bindings/config.xml">



The version number of the Backbase Client Framework release is specified in the [version] folder name (for example, 4_4_1). If your version of the Backbase Client Framework is different from the one shown here, you must adapt the code samples accordingly.

There are some interesting points:

  • If you are including third-party libraries or your own JavaScript libraries, you should include them in the head section of the HTML document, as usual.

    At the place where it says: <!-- YOUR APPLICATION CODE GOES HERE -->, you can put your application code. We will call this a Backbase area. The code that you can put here can be ordinary XHTML, widgets that are provided by Backbase, or widgets that you have built yourself.

    The <!-- YOUR APPLICATION CODE GOES HERE --> part is contained within script tags with type="application/backbase+xml". The type attribute signals the Client Runtime that it should process the contents. The xml part of the type attribute says that the contents should be proper XML.

  • There can be multiple Backbase area's areas. In fact, there can be as many areas as you like. This is convenient if you are converting an older web application to a Backbase application or when you have large chunks of conventional HTML in your application. As the Backbase framework takes some overhead to process this HTML, there is a performance advantage to put code that does not require processing by the Client Runtime outside a Backbase area.

  • The code in a Backbase must adhere to XHTML standards and most importantly, all tags must be properly closed. This can be a source of errors if you are converting an older application where for example <input> and <img> tags are often not closed. Another XHTML violation to watch out for is that attribute values in tags must be enclosed in quotes and all attributes specified must have a value. For example, you should code selected="selected" instead of just selected in a select box.

  • The Backbase JavaScript engine in boot.js is loaded in the header of the HTML page. It is very important to make sure that you have a proper path specification here. Many times, when you set up a new application, you get an empty page at your first try to see your application. The cause is almost always that your path specification is wrong. If this happens to you, it is convenient to use a tool like Firebug to see what the server returns and why it cannot find the Backbase libraries.

  • To use the Backbase widgets, you must include the configuration files, also called implementation bindings for the tags:

    <xi:include href="../../backbase/4_4_1/bindings/config.xml">

  • The config.xml file contains an additional include for the specific skin you want to use. The default is the chameleon skin. As an alternative, you can use the system skin. Similar to the earlier point, your path specification must be correct; otherwise your page will most likely stay empty.

  • The inclusion of the configuration files is done with the statement: xi:include. We make use here of XInclude, or XML Inclusions, which is a W3C standard for merging XML files. This facility makes it possible to code your web pages in a more modular way by dividing your code in smaller chunks, which can be combined at runtime. See for details. Backbase has implemented the XInclude standard in its framework according to the standard and you see it used here to include the configuration files. We will see more of it later in this chapter.

    The HTML tag contains two namespace declarations—xmlns="" and xmlns:xi="". The XHTML namespace is the default namespace and therefore you do not need to add a prefi x in front of the XHTML tags. The XInclude namespace is declared with the xi prefi x, which you saw used in front of the include statement that was used to include the Backbase confi guration files. For now, just remember that you need them and that it is important to declare namespaces appropriately in your code. Later in this chapter, there is a section that explains what you really need to know about XML, XHTML, and namespaces. The Backbase Client Framework uses several specifi c Backbase XML namespaces in addition to providing implementation for several standard ones like the XInclude. We will see some examples in the next section.

The document starts with: <!-- -->. This is done to enforce quirks mode in the Microsoft Internet Explorer browser. This is a requirement for the Backbase Tag Library widgets to allow box elements to be rendered consistently across browsers.

As we said earlier, the startup index.html file is very similar for all applications. All you have to do when you set up a new application is copy the starter skeleton to a proper place in the file system where your server can find it, and adjust the path settings in such a way that the Backbase libraries can be found. Also, give your HTML document the proper title and meta-information in the head section.


From now on, we will usually take for granted that you know how to surround our example code shown in the book with the right skeleton code.