The focus of this article is the Backbase Tag Library (BTL). BTL concerns itself with the visible aspect of a web application user interface. For its dynamic behavior, we need JavaScript, or the XML Execution Language and Command Functions tag libraries.
When you are developing a user interface, you will find that you are solving the same problems over and over again:
- Create a layout
- Show a menu of options
- Have tabs to structure the space on a page
- Provide pop ups and tool tips
- Do form validation
These are just a few examples from a long list. The BTL is a set of UI widgets that can be used out of the box, which are extensible, and should appear the same in all browsers. By using these, you should be able to develop your website faster with a more robust result.
Backbase Tag Library widget overview
There are eight categories of BTL widgets for every aspect of layout and user interaction. If that is not enough, you can extend the BTL widgets to add new behavior or new looks and you can also develop your own widgets.
The following schema shows an overview of the widgets that are available:
There is also a ninth category of BTL elements. They are special because they can appear as attributes on other tags to specify extra behaviors that can be applied to any UI element. An example of such a behavior is drag-and-drop.
If you are using the Backbase Explorer to find examples for the BTL widgets (http://demo.backbase.com/explorer/), the schema shown above may be a handy reference to find widgets you are looking for.
We always use the b prefix when referring to BTL widgets, although you can use whatever (nonconflicting) prefix you want.
The BTL abstract elements
If you are interested mainly in learning what BTL widgets look like, then the subject of this section about abstract elements maybe a little too abstract. Feel free to skip it, but before you do, take a look at the picture of the inheritance relationships between abstract elements. The picture shows the attributes that are available on many BTL elements.
Most of these attributes will be familiar to you and remind you of a not so distant past when you were still coding HTML instead of XHTML. While coding XHTML instead of HTML, you should use class and style instead of more specific attributes like width or margin. However, while using BTL, you must partly unlearn this for the BTL elements because using class or style could upset the styling that is done for the BTL elements, to make them look as they do.
Abstract element inheritance structure
The BTL markup language was developed using the Backbase Tag Definition Language. This means that BTL widgets are objects that can inherit properties from other TDL objects. It also means that you are able to extend the BTL objects into customized objects suitable for your application.
The BTL objects that we are looking at in this article, the layout objects, inherit from more basic, abstract objects. It is useful to look at some of these abstract elements because their attributes can be used by inheritance on the layout objects. The BTL elements we will be looking at are element, containerElement, dimensionElement, postionElement, and visualElement. All layout BTL elements inherit from these.
Here is a diagram of the inheritance structure:
For those of you who are not so familiar with object-oriented models: the picture says that element is the object from which all others inherit. Therefore, for all BTL widgets, you can use the id and xml:base attributes, because these are defined on the element element.
The Backbase Tag Definition Language supports multiple inheritance. Therefore, a cardStack element can use the attributes of both dimensionElement and positionElement, and by looking further up in the tree, also of visualElement and element.
The relationship between card and cardStack says that a cardStack can contain zero or more card elements.
The picture does not describe the methods available. The only public methods that are interesting, belong to cardStack, which has the next and previous methods.
Now, let’s look at some of the BTL elements in detail:
