Repeatable List Buttons

Pivot支援repeatable list button，意思是使用者可以簡單的重複執行選定的項目。它適合用來執行像橡皮圖章（rubber stamp）的功能。

本範例由官網所取得，它展示的就是使用List Button來自動設定已選定之CheckBox元件的文字顏色。



============範例展示=================================================


============範例展示=================================================

以下是ui.bxml，請注意在List Button的屬性中，有一個是設定repeatable="true"，表示它會自動重複執行選定的動作。還有，在List Button的子元件中，有兩個部份：

1. 
   

   <dataRenderer>
                               <content:ListButtonColorItemRenderer/>
                           </dataRenderer>
   

   使用ListButtonColorItem來呈現色板（color swatches），也就是ListButton在未下拉時的樣式僅呈現一塊色板。
   
2. 
   

   <itemRenderer>
                               <content:ListViewColorItemRenderer/>
                           </itemRenderer>
   

   使用ListViewColorItem來呈現色板（color swatches），包含色板及相關說明文字，在按了ListButton之後會以popup的方式呈現。
   

同時，在程式碼下方的BoxPane（bxml:id="checkboxBoxPane"）的地方，是在java原始碼中，以動態的方式產生十個Checkbox元件。

<!--ui.bxml-->
<myex:RepeatableListButtons title="Repeatable List Buttons" maximized="true"
                            xmlns:bxml="http://pivot.apache.org/bxml"
                            xmlns:content="org.apache.pivot.wtk.content"
                            xmlns:myex="myex"
                            xmlns="org.apache.pivot.wtk">
    <Border styles="{padding:8}">
        <TablePane styles="{horizontalSpacing:4}">
            <columns>
                <TablePane.Column width="-1"/>
                <TablePane.Column width="1*"/>
            </columns>
 
            <TablePane.Row height="1*">
                <FlowPane>
                    <Label text="顏色:"/>
                    <ListButton bxml:id="colorListButton" Form.label="Color"
                                repeatable="true" action="applyColor" listSize="8"
                                selectedIndex="0">
                        <dataRenderer>
                            <content:ListButtonColorItemRenderer/>
                        </dataRenderer>
                        <itemRenderer>
                            <content:ListViewColorItemRenderer/>
                        </itemRenderer>
 
                        <content:ColorItem color="#000000" name="Black"/>
                        <content:ColorItem color="#0000AA" name="Blue"/>
                        <content:ColorItem color="#00AA00" name="Green"/>
                        <content:ColorItem color="#00AAAA" name="Cyan"/>
                        <content:ColorItem color="#AA0000" name="Red"/>
                        <content:ColorItem color="#AA00AA" name="Magenta"/>
                        <content:ColorItem color="#AA5500" name="Brown"/>
                        <content:ColorItem color="#AAAAAA" name="Light Gray"/>
                        <content:ColorItem color="#555555" name="Dark Gray"/>
                        <content:ColorItem color="#5555FF" name="Bright Blue"/>
                        <content:ColorItem color="#55FF55" name="Bright Green"/>
                        <content:ColorItem color="#55FFFF" name="Bright Cyan"/>
                        <content:ColorItem color="#FF5555" name="Bright Red"/>
                        <content:ColorItem color="#FF55FF" name="Bright Magenta"/>
                        <content:ColorItem color="#FFFF55" name="Bright Yellow"/>
                        <content:ColorItem color="#FFFFFF" name="White"/>
                    </ListButton>
                </FlowPane>
 
                <Border>
                    <ScrollPane>
                        <BoxPane bxml:id="checkboxBoxPane" orientation="vertical"
                                 styles="{padding:4, spacing:4}"/>
                    </ScrollPane>
                </Border>
            </TablePane.Row>
        </TablePane>
    </Border>
</myex:RepeatableListButtons>

接下來是繼承Window類別的RepeatableListButtons.java

//myex@RepeatableLustButtons.java
package myex;
import java.awt.Color;
import java.net.URL;
import org.apache.pivot.beans.Bindable;
import org.apache.pivot.collections.ArrayList;
import org.apache.pivot.collections.Map;
import org.apache.pivot.util.Resources;
import org.apache.pivot.wtk.Button.State;
import org.apache.pivot.wtk.*;
import org.apache.pivot.wtk.content.ColorItem;

public class RepeatableListButtons extends Window implements Bindable {

    private ListButton colorListButton = null;
    private BoxPane checkboxBoxPane = null;
    private int selectedCount = 0;
    //自訂的動作,可以重複執行
    private Action applyColorAction = new Action() {

        @Override
        public void perform(Component source) {
            //取得使用者點選之項目,因為在ui.bxml中設定為ColorItem,故轉型為ColorItem
            ColorItem colorItem = (ColorItem) colorListButton.getButtonData();
            //取得顏色
            Color color = colorItem.getColor();

            for (Component component : checkboxBoxPane) {
                Checkbox checkbox = (Checkbox) component;
                if (checkbox.isSelected()) {
                    //取得bxml:id=CheckBoxPane(實際上是在BoxPane)中的所有CheckBox
                    //若有選取則重複設定顏色
                    checkbox.getStyles().put("color", color);
                    checkbox.setSelected(false);
                }
            }
        }
    };

    public RepeatableListButtons() {
        //建構子
        //1.首先將ui.bxml中的<ListButton action="applyColor"></ListButton>
        //  applyColor和自動的動作applyColorAction進行mapping
        Action.getNamedActions().put("applyColor", applyColorAction);
        //2.程式一開始不允許按ListButton,只有使用者按了CheckBox之後才允許
        applyColorAction.setEnabled(false);
    }

    @Override
    public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
        //get wtk components references
        colorListButton = (ListButton) namespace.get("colorListButton");
        checkboxBoxPane = (BoxPane) namespace.get("checkboxBoxPane");

        //自訂的Checkbox事件處理機制
        ButtonStateListener buttonStateListener = new ButtonStateListener() {

            @Override
            public void stateChanged(Button button, State previousState) {
                if (button.isSelected()) {
                    selectedCount++;
                } else {
                    selectedCount--;
                }
                //唯有使用者點選1個以上的checkbox才動作
                applyColorAction.setEnabled(selectedCount > 0);
            }
        };

        //會顯示在checkbox中的字串
        ArrayList<String> numbers = new ArrayList<String>("One 一", "Two 二", "Three 三", "Four 四", "Five 五",
                "Six 六", "Seven 七", "Eight 八", "Nine 九", "Ten 十");

        for (String number : numbers) {
            Checkbox checkbox = new Checkbox(number);
            //指定checkbox的buttonstateListener為
            checkbox.getButtonStateListeners().add(buttonStateListener);
            //動態加入checkbox在ui.bxml設定的元件(bxml:id="checkboxBoxPane")
            checkboxBoxPane.add(checkbox);
        }
    }
}