The previous two examples showed a Details and a List control. Now we are going to combine these two controls to build a master/detail view.

In this example, we will use List's selection capabilities. The list is generating the buttons across the top of this sample, and clicking a button will select that item in the list.

The List

First, we create a List. We'll highlight the new attributes:

        <j:List items="#bind(data.lifeforms)" 
                controlId="mylist" selectedIndex="0">
    

Here we are giving the template list an Id (controlId="mylist"), and telling it to start out with the first item selected (selectedIndex="0").

The template for the List now uses a Button with a bubbleEvent attribute:

        <j:Button text="#bind(item.firstName)"
                    bubbleEvent="selectItem" />
    

The bubbleEvent="selectItem" means that, when you click on the item, a "selectItem" message is bubbled up the control hierarchy. When the event hits the List, the List control responds by selecting the item corresponding to the control that bubbled the event.

The Details control

The major difference between this Details control and the one we saw in an earlier tour is the binding path.

            <j:Details item="#bind(controls.mylist.selectedItem)">    
    

This Details control is listening to the control called mylist's selectedItem property - and showing details for that item.