Link Buttons

The following example demonstrates use of the LinkButton class in a Pivot application. Clicking the links allows the user to navigate between two "pages", each containing a single image:

The BXML source for the example is below:

            
            <Window title="Link Buttons" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:content="org.apache.pivot.wtk.content"
                xmlns="org.apache.pivot.wtk">
                <Border>
                    <CardPane bxml:id="cardPane" selectedIndex="0" styles="{selectionChangeEffect:'horizontal_slide'}">
                        <BoxPane orientation="vertical" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
                            <ImageView image="/org/apache/pivot/tutorials/IMG_0735_2.jpg"/>
                            <LinkButton>
                                <content:ButtonData text="Next" icon="@resultset_next.png"/>

                                <buttonPressListeners>
                                    function buttonPressed(button) {
                                        cardPane.setSelectedIndex(1);
                                    }
                                </buttonPressListeners>
                            </LinkButton>
                        </BoxPane>

                        <BoxPane orientation="vertical" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
                            <ImageView image="/org/apache/pivot/tutorials/IMG_0767_2.jpg"/>
                            <LinkButton>
                                <content:ButtonData text="Previous" icon="@resultset_previous.png"/>

                                <buttonPressListeners>
                                    function buttonPressed(button) {
                                        cardPane.setSelectedIndex(0);
                                    }
                                </buttonPressListeners>
                            </LinkButton>
                        </BoxPane>
                    </CardPane>
                </Border>
            </Window>
            
        

This example uses the CardPane layout container. A card pane lays out its components like a stack of cards, only one of which is visible at a time. CardPane is discussed in more detail in the Navigation Containers section.

This example demonstrates another means of defining event handlers in BXML: within an element that refers to a listener list property of its parent element. The <buttonPressListeners> element of each LinkButton contains script code that will be executed in response to a button press. In this case, the handlers simply set the selected index of the card pane is assigned to each link button. However, it is possible to define more complex logic in a handler declared this way, and element-based event handlers such as this are often used when the event logic is more complex than can be represented in a single line (such as might be used in an attribute-based handler).

Though it may not be not obvious from this example, other listener methods can also be defined within the same script block (if, for example, the ButtonPressListener interface declared additional methods). However, in such cases, callers are not required to provide implementations for all listener methods, only the ones they are interested in (similar to using an Adapter class in Java code).

As in the previous example, all of the logic for this application is implemented in script, so there is no associated Java source code for this example.