The Axure tutorials are a great resource, both for learners starting out with interactive prototyping and old hands in need of reference material during bouts of amnesia. But the approach suggested for constructing a tab control, whilst being a quick method, hinders subsequent maintenance and enhancement. Here, I propose a revised approach which is cleaner, lighter, and exploits Axure’s latent power. And I follow it up with a detailed tutorial.

First, a definition

In this article I define a tab control as a set of tabs – a tab being a combination of one tab button and one tab pane:

The problem

The Axure tutorial suggests placing each tab onto a different state of a dynamic panel. This means placing all tab buttons on every state, altering their appearance according to whichever tab is visible. Having to update many existing prototypes where this method had been used – editing the label on each instance of a tab button, or adding a new tab button many times, or moving sets of tabs – quickly grew tiresome.

The solution

I needed an approach that meant that an update to a prototype would result in precisely one change, rather than one change for each tab. The solution is to keep the tab buttons separate from the tab panes. By adding buttons to a selection group and tweaking their Selected states this is possible. And that’s it, in a nutshell. But read on for a step-by-step guide.

The tutorial

This is what we’re going to make:

For the tab buttons:

1. Create a single tab button like so:
   1. In Axure, add a rectangle. Optionally, set its shape to Rounded Top.
   2. Set its Fill Color to transparent.
   3. Edit its Selected Style, setting this Fill Color to white.
2. Copy the button, paste it twice, and line them all up.
3. Assign a selection group (select all three and use the context menu). This configures the buttons to be treated as mutually exclusive so that when one is in its selected state, the others won’t be.
4. Name your buttons (Label in the Widget Properties pane), e.g. btn1, btn2, btn3.
5. Label your buttons (double-click each rectangle), e.g. State 1, State 2, State 3.

For the tab panes:

6. Add a dynamic panel, name it pnlTabPages and check its dimensions.
7. Open the default state of the dynamic panel and add a rectangle at position (0, 0) with the dimensions noted previously.
8. Select the rectangle and copy it.
9. Add two more states to the dynamic panel, pasting the copied rectangle into each one.
10. Name your dynamic panel’s states, e.g. pane1, pane2, pane3.
11. Label your panes (double-click each rectangle), e.g. State 1, State 2, State 3.

Wiring it up:

12. Position the dynamic panel so that it’s 1px above the bottom of the buttons and, with it still selected, choose Send to Back from the context menu. Doing this ensures that when a tab button is in its Selected state (with a white fill) it appears conjoined to the currently visible tab pane.
13. Edit the OnClick event handler of btn1 as follows:
    • Set btn1 to its Selected state
    • Set the dynamic panel to pane1
14. Do the equivalent for btn2 and btn3. (Since our buttons are in a selection group, it’s not necessary to deselect them explicitly.)

15. Finally, to ensure that a tab is initially selected, set btn1 to its Selected state in the OnPageLoad event (under Page Interactions).

And that’s all there is to it.

Want to change btn2’s label? Do it once, not thrice!
Want to move btn3 to the left of btn1? Do it once, not thrice!
Want to add a new tab? Add a state to the dynamic panel and one new button – not three!

• Download the RP file of the prototype (Axure 6.5)
• See it in action on AxShare at http://share.axure.com/F3VH82/

Comments or feedback? Let’s have it…