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.
Note
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 http://demo.backbase.com/layouts/.
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="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel"> <div id="appHeader"> <div class="appHeaderText">Backbase Basic Layout</div> </div> <b:panelSet columns="260px *" splitter="true"> <b:panel> <xi:include href="menu.xml" /> </b:panel> <b:panel class="btl-border-left"> <xi:include href="content.xml" /> </b:panel> </b:panelSet> </div>
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="http://www.w3.org/1999/xhtml"> <ul> <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> </ul> </div>
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.