List Buttons

The following example demonstrates use of the ListButton component. Selecting an image name from the drop-down shows the corresponding image file in the image view on the right.

The BXML source for the example is below. Like the previous example, list data is specified as an attribute containing a JSON array of strings; this value is used to load the image displayed to the right of the list button. Like ListView, ListButtons can also be populated programmatically using instances of ListItem.

            
            <lists:ListButtons title="List Buttons" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:lists="org.apache.pivot.tutorials.lists"
                xmlns="org.apache.pivot.wtk">
                <TablePane styles="{showHorizontalGridLines: true, showVerticalGridLines:true,
                    horizontalSpacing:1, verticalSpacing:1}">
                    <columns>
                        <TablePane.Column width="-1"/>
                        <TablePane.Column width="1*"/>
                    </columns>

                    <TablePane.Row height="340">
                        <BoxPane orientation="vertical" styles="{verticalAlignment:'top', padding: 4}">
                            <Label text="Picture:"/>
                            <ListButton bxml:id="listButton"
                                listData="['IMG_0725_2.jpg', 'IMG_0735_2.jpg', 'IMG_0767_2.jpg']"/>
                        </BoxPane>

                        <ImageView bxml:id="imageView" styles="{backgroundColor:'#404040'}"/>
                    </TablePane.Row>
                </TablePane>
            </lists:ListButtons>
            
        

The Java source for the example is below:

            
            package org.apache.pivot.tutorials.lists;

            import java.net.URL;

            import org.apache.pivot.beans.Bindable;
            import org.apache.pivot.collections.Map;
            import org.apache.pivot.util.ImageUtils;
            import org.apache.pivot.util.Resources;
            import org.apache.pivot.util.concurrent.TaskExecutionException;
            import org.apache.pivot.wtk.ApplicationContext;
            import org.apache.pivot.wtk.ImageView;
            import org.apache.pivot.wtk.ListButton;
            import org.apache.pivot.wtk.ListButtonSelectionListener;
            import org.apache.pivot.wtk.Window;
            import org.apache.pivot.wtk.media.Image;

            public class ListButtons extends Window implements Bindable {
                private ListButton listButton = null;
                private ImageView imageView = null;

                @Override
                public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
                    listButton = (ListButton)namespace.get("listButton");
                    imageView = (ImageView)namespace.get("imageView");

                    listButton.getListButtonSelectionListeners().add(new ListButtonSelectionListener() {
                        @Override
                        public void selectedItemChanged(ListButton listButton, Object previousSelectedItem) {
                            Object selectedItem = listButton.getSelectedItem();

                            if (selectedItem != null) {
                                // Get the image URL for the selected item
                                Image image = Image.loadFromCache(
                                    ImageUtils.findByName("/org/apache/pivot/tutorials/" + selectedItem, "image"));

                                // Update the image
                                imageView.setImage(image);
                            }
                        }
                    });

                    listButton.setSelectedIndex(0);
                }
            }
            
        

This example makes use of the global resource cache to store the loaded images. This cache can be used to store any kind of application-specific data that may be expensive to load. Entries are keyed by the URL from which they were retrieved, and, once placed in the cache, are available to all code within the application. When the list button's selection changes, the application first looks for an image in the resource cache; if it is not found, it is loaded and added to the cache. It is then set as the "image" property of the image view and displayed. Note that the global cache does not have a way to limiting the number of elements to contain, so the cache continues to grow; to keep it small you have to manually remove old elements from it when they are no more necessary.

Next: Repeatable List Buttons