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

A basic page layout

After having installed the Backbase framework and after having said "Hello World!" so many times, we would like to finish this chapter by doing real work.

Every web application page design starts with a basic page layout. This layout usually involves a part where menu items are shown, sometimes a row of tabs at the top of the page, sometimes a list of links as a column on the left, sometimes both.

In the olden days, we would partition a web page using HTML frames, where you could have a table-like layout. The advantage of using frames is that each frame contains its own document, allowing you to make your application more modular. This was a big disadvantage at the same time because the communication between multiple frames can become a problem and also you cannot easily print such a page.

As an alternative, you could use a pure HTML table layout. That is still the easiest way to design a page if the page is simple, but if you use a number of nested tables to layout your page, things can become tricky when you try to change something. Nowadays, most people say that tables should be used to display tables and that CSS should be used for layout. If you ever struggled with div elements floating in ways you could not imagine, you may still agree in principle, but hope for something better in practice.

The Backbase panelSet widget and related elements are designed to offer the best of both worlds—easy layout as with tables and modularity as with frames.


The panelSet widget partitions the screen layout into rows and columns. When subdividing the panelSet, you use the panel element, or you can use another panelSet widget to further subdivide that row/column. You can specify a panelSet to have rows, columns, or both. By using the splitter="splitter" attribute/value pair, you can add a resizable border to your panelSet.

The Backbase framework has a set of example layouts that use panelSets available for you to use. You can find them in the demos folder of the Backbase package, or you can view them online at

If you would like to use one of these as a starting point for your own application, you will find you need to strip the application first. This is because they contain a lot of static information that is there to show what the page could look like. We made a very simple page layout that is inspired by these example layouts. However, we will start from the ground and work our way up so that we can expand the page to evolve to a real web application page later in the book. Below is a picture of this sample application:

We will put our application in a new folder. Create a subfolder of the bookApps folder named myApp1, or whatever name you like better. Create a file in the app1 folder, name it index.html, and add a copy of the starter skeleton as content.

Add a CSS file reference to the head section in order to keep the styling we use:

<link rel="stylesheet" type="text/css" href="resources/app.css" />

The CSS file is not very interesting at this point. We suggest that you copy it from the downloaded source and put it into its own resources folder.

Replace <!-- YOUR APPLICATION CODE GOES HERE --> with the following content:

<div xmlns=""
<div id="appHeader">
<div class="appHeaderText">Backbase Basic Layout</div>
<b:panelSet columns="260px *" splitter="true">
<xi:include href="menu.xml" />
<b:panel class="btl-border-left">
<xi:include href="content.xml" />

You see a simple panelSet, where its structure is clearly visible because the menu and the real content are included with the XInclude mechanism. This allows you to make a very modular setup of your application.

There are two files that are included by the XInclude mechanism: menu.xml and content.xml. For now, these files contain nothing interesting. Remember though that these files must have proper namespace declarations because their contents are loaded into Backbase space. Therefore, the menu.xml file looks like this:

<div xmlns="">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>

What is interesting is that when we expand this application in the following chapters, the index.html file will stay the same, while the development effort can concentrate on various modularized parts of the application.

Even if modularizing your application using XInclude from Backbase will be the only facility you'd use, this will be an important step in writing better applications. You could argue that you can achieve the same effect by using the include() function of PHP, or a similar function in another server scripting language. You should realize though, that this will make your client application dependent on the server language you are using.

Another disadvantage you may think of is that it requires extra communication with the server to use XInclude in this way. That is true, but if you have a performance problem with your application, probably something else is the cause. Kent Beck, the well-known inventor of Extreme Programming, says on this issue: "First make it right, then make it fast".

The code we have put in menu.xml and content.xml is just dummy text. Therefore, we are not repeating it here. In later chapters, we will start putting meaningful content into our basic application.

Your web directory structure could look as follows:

In your whole application, there is only one file that contains references to your Backbase installation. That makes it a lot easier to set up a new application and to upgrade your Backbase installation for a new release.

To conclude this section, look back at what we have achieved. With very little code we have set up a structure for an application that we can easily extend or use as a skeleton for new applications.