Thursday, July 12, 2012

Text - Suggestion Popups

本範例(同樣來自官網)大致上和上一篇相同,主要的差別在於使用org.apache.pivot.wtk.SuggestionPopup類別來顯示自動完成(auto-complete)的功能。



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


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

ui.bxml的部份和先前範例相同。

<!--ui.bxml-->
<myex:TextInputs title="Text Inputs" maximized="true"
                 xmlns:bxml="http://pivot.apache.org/bxml"
                 xmlns:myex="myex"
                 xmlns="org.apache.pivot.wtk">
    <BoxPane styles="{padding:4, verticalAlignment:'center'}">
        <Label text="台中市各區:"/>
        <TextInput bxml:id="stateTextInput"/>
    </BoxPane>
</myex:TextInputs>

在myex#TextInputs.java則是在事件處理機制上做了修改。

package myex;

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.*;

public class TextInputs extends Window implements Bindable {

    private TextInput stateTextInput = null;
    private ArrayList states;
    private SuggestionPopup suggestionPopup = new SuggestionPopup();

    public TextInputs() {
        //使用ArrayList建立台中市各區名稱
        states = new ArrayList();
        //大小寫不拘,中文用不到
        states.setComparator(String.CASE_INSENSITIVE_ORDER);
        //這裡的順序在官網中有提到要注意排序問題
        states.add("中區");
        states.add("大甲區");
        states.add("大安區");
        states.add("大肚區");
        states.add("大里區");
        states.add("大雅區");
        states.add("太平區");
        states.add("外埔區");
        states.add("石岡區");
        states.add("北屯區");
        states.add("北區");
        states.add("后里區");
        states.add("西屯區");
        states.add("西區");
        states.add("沙鹿區");
        states.add("和平區");
        states.add("東區");
        states.add("東勢區");
        states.add("南屯區");
        states.add("南區");
        states.add("神岡區");
        states.add("烏日區");
        states.add("梧棲區");
        states.add("清水區");
        states.add("新社區");
        states.add("潭子區");
        states.add("龍井區");
        states.add("豐原區");
        states.add("霧峰區");
    }

    @Override
    public void initialize(Map namespace, URL location, Resources resources) {
        stateTextInput = (TextInput) namespace.get("stateTextInput");
        //處理文字輸入事件TextInputContent
        stateTextInput.getTextInputContentListeners().add(new TextInputContentListener.Adapter() {

            @Override
            public void textInserted(TextInput textInput, int index, int count) {
                String text = textInput.getText();
                ArrayList suggestions = new ArrayList();

                for (String state : states) {
                    //建立自動提示內容字串
                    if (state.startsWith(text)) {
                        suggestions.add(state);
                    }
                }

                if (suggestions.getLength() > 0) {
                    suggestionPopup.setSuggestionData(suggestions);
                    //開啟自動提示popup
                    suggestionPopup.open(textInput);
                }
            }

            @Override
            public void textRemoved(TextInput textInput, int index, int count) {
                suggestionPopup.close();
            }
        });
        //最多呈現4個提示,其餘的會以捲軸的方式呈現
        suggestionPopup.setListSize(4);
    }

    @Override
    public void open(Display display, Window owner) {
        super.open(display, owner);
        //一開始TextInput就取得focus
        stateTextInput.requestFocus();
    }
}

No comments:

Post a Comment