Post | mennovanslooten.nl/blog

Introduction

Well, this is my first attempt at a Backbase tutorial. I wanted to show off some cool stuff but its hard to figure out what level of depth I can get away with. I'd appreciate feedback on whether or not this is at all understandable. Anyway, I'm going to show you how to make a simple tabbed control. If you're curious, you can take a look at the end result.

Prerequisites

• The Backbase Presentation Client 3.0 - If you don't have it yet, you can download the free Community Edition.
• A healthy dose of knowledge - On the subjects of XML, XHTML, CSS and a tiny bit of XPath.

The setup

One of the most important features of the Backbase language BXML, is that it's freely mixable with XHTML. This means you can take a Backbase widget like <b:deck/>, fill it up with XHTML content and control it with XHTML elements like an unordered list. Which is what we're going to do here. Let's start with the basic structure. We have a list (like a ToC), which will become our tabs:

<ul>
  <li>Lorem Ipsum</li>
  <li>Duis aute irure</li>
  <li>Excepteur sint</li>
</ul>

And we have a Backbase <b:deck/>, which will hold our content. A <b:deck/> is an extremely basic widget: it can only show one of its childnodes at a time. That makes it a perfect basis for our tabs (since only one tab can be selected at a time). Here's what it looks like:

<b:deck>
  <div id="TabSection-1">
    <!-- 1st tab content -->
  </div>
  <div id="TabSection-2">
    <!-- 2nd tab content -->
  </div>
  <div id="TabSection-3">
    <!-- 3rd tab content -->
  </div>
</b:deck>

You can take a look at what this first setup does.

Adding interaction

As you might have noticed, the basic setup didn't really do anything. OK, the deck did indeed show only one of its childnodes (the first, by default) but that was it. It's time to add some interaction!

What needs to be done is to connect the list items to the deck items (also called 'cards'). We do that using the b:followstate attribute. b:followstate links the selected/deselected state of an element to that of another. The value of the attribute is an XPath expression to the element being followed. In our case it's simple the elements being followed (the cards) have unique ID's:

<ul>
  <li b:followstate="id('TabSection-1')">Lorem Ipsum</li>
  <li b:followstate="id('TabSection-2')">Duis aute irure</li>
  <li b:followstate="id('TabSection-3')">Excepteur sint</li>
</ul>

Just following a state means nothing, though, we have to add some control as well. These list items need to learn how to behave. So let's add some b:behavior's:

<ul>
  <li b:followstate="id('TabSection-1')"
    b:behavior="TabControl">Lorem Ipsum
  </li>
  <!-- etc. -->
</ul>

<s:behavior b:name="TabControl">
  <s:event b:on="command">
    <s:task b:action="select" b:target="{@b:followstate}"/>
  </s:event>
</s:behavior>

I have a feeling this last bit needs some explanation. The behavior tag can serve as a repository for event handlers. A behavior has a b:name and by setting an elements b:behavior to that name, it uses those event handlers. In this case, it's just one: the oncommand event. This event is similar to the standard JavaScript onclick event.

The event handler

Let's take a closer look at what this handler does:
<s:task b:action="select" ... />. Apparently, it selects something. But what?
b:target="{@b:followstate}" How clever; it selects the element whose state it is following! It's time we take a look at what this interaction does (hint: try clicking the list items).

Making it look good

Well, there's not much left now, except for making it look like tabs. All your standard XHTML/CSS knowledge still applies! Since XHTML/CSS tab tutorials are everywhere I won't bother with the CSS too much. Let's make our styling easier by adding one more thing to our tab behavior: states.

<s:behavior b:name="TabControl">

  <s:event b:on="command">
    <s:task b:action="select" b:target="{@b:followstate}"/>
  </s:event>

  <s:state b:on="deselect"
    b:normal="TabControl" b:hover="TabControl TC-Hover"/>

  <s:state b:on="select"
    b:normal="TabControl TC-Select"/>

</s:behavior>

Besides being a repository for interaction (event handlers), behaviors can also hold <s:state/>s, which define the CSS classname(s) associated with the (pseudo-)state of the element it's attached to. There are three pseudostates: b:normal (default), b:hover (hovering with the mouse) and b:press (pressing with the mousebutton). Here I've only used normal and hover and assigned them to the selected and deselected state. I don't have to worry about assigning the right state at the right time anymore, the behavior now takes care of that.

Now after I've created a containing element, added some CSS classes and defined my CSS, the end result looks like this. Feel free to download and play around with it!