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">
</xi:include>

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 http://www.w3.org/TR/xinclude/ 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="http://www.w3.org/1999/xhtml" and xmlns:xi="http://www.w3.org/2001/XInclude". 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.