Day 6 ListView Control

ListView သည် List အတွင်းရှိ Data များအား အလျားလိုက်သော်၎င်း၊ ဒေါင်လိုက်သော်၎င်း တန်းစီ၍ ဖော်ပြပေးနိုင်သော Control တစ်ခုဖြစ်ပြီး၊ JavaFX တွင် javafx.scene.control.ListView ဖြင့် ကိုယ်စားပြု ဖော်ပြပါသည်။

လက်တွေ့ ရေးသားကြည့်ပါမည်။ ဦးစွာ Eclipse အား အသုံးပြု၍ JavaFX Project တစ်ခုအား တည်ဆောက်ပါသည်။ ထိုမှတဖန် JavaFX Main Class တစ်ခုအား Create လုပ်ပါသည်။ ပြီးပါက VBox တစ်ခုဖြင့် FXML ဖိုင်တစ်ခုအား ရေးသားပါသည်။ ပြီးပါက ScenBuilder ဖြင့် FXML အား ဖွင့်ပြီး၊ ဘယ်ဘက် Library ရှိ ListView အား Drug လုပ်၍ VBox အတွင်းတွင် နေရာချပါသည်။

ညာဘက်ရှိ Orientation ၏ တန်ဖိုးအား VERTICAL မှ HORIZONTAL သို့ပြောင်းကြည့်ပါက ListView ၏ Element များသည် ဒေါင်လိုက်စီနေရာမှ အလျားလိုက်သို့ ပြောင်းသွားမည် ဖြစ်သည်။ တဖန် ListView အတွင်းရှိ ရွေးချယ်ထားသော တန်ဖိုးအား ဖော်ပြရန် TextField တစ်ခုအား ListView ၏ အောက်တွင် နေရာချပါမည်။

ပြီးပါကအထက်ဖော်ပြပါအတိုင်း Layout အတွင်းရှိ Vgrow ၏ တန်ဖိုးအား SOMETIMESဖြင့် သတ်မှတ်ပါမည်။လွတ်နေသော နေရာများအား ListView ဖြင့် ဖြည့်သွားသည်ကို တွေ့ရပါသည်။ ဆက်လက်၍ Controller Class အား ရေးသားပါမည်။


Controller Class

    String[] data = { "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray",
            "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle" };

    @FXML
    private ListView<String> list;
    @FXML
    private TextField text;

    @Override
    public void initialize(URL arg0, ResourceBundle arg1) {
        ObservableList<String> dataList = FXCollections
                .observableArrayList(data);

        list.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
        list.getSelectionModel().selectedItemProperty()
                .addListener(new ChangeListener<String>() {

                    @Override
                    public void changed(
                            ObservableValue<? extends String> value,
                            String oldValue, String newValue) {
                        text.setStyle("-fx-background-color:" + newValue);
                    }
                });

        list.getItems().addAll(dataList);
    }

Controller Class အတွင်းတွင် FXML ဖြင့်ရေးသားထားသော Components များဖြစ်ကြသော list, text နှင့် list အတွင်းတွင် ဖော်ပြမည့် data object များကိုသာ ပိုင်ဆိုင်ပါသည်။ Controller Class အား Create လုပ်အပြီးတွင် ခေါ်ယူမည့် initialize method အတွင်းတွင် FXCollections#observableArrayList အား အသုံးပြု၍ ObservableList Object အား Create လုပ်နေပါသည်။ ListView သည် ပြောင်းလည်းခြင်းအား သိရှိနိုင်သော FXCollection တစ်ခုဖြစ်သည့် ObservableList Object အား အသုံးပြုပါသည်။

စာကြောင်း ၁၅နှင့် ၁၆တွင် ListView ၏ Item များအား ပြောင်းလည်း ရွေးချယ်ပါက အလုပ်လုပ်စေရန် ChangeListener တစ်ခုကို Set လုပ်ပေးပါသည်။ ChangeListener အတွင်းတွင် ပြောင်းလည်းပါက ခေါ်ယူမည်ဖြစ်သည့် change method အား override လုပ်ကာ စာကြောင်း ၂၂ ဖြင့် text ၏ background color style အားတန်ဖိုးအသစ်ဖြင့် ပြောင်းလည်းပေးပါသည်။

Custom Object များအား ListView တွင် အသုံးပြုခြင်း

ListView တွင် String, Integer, enum အစရှိသော Data များအား ဖော်ပြနိုင်ရုံမက Object များအားလည်း အသုံးပြုပြီး ဖော်ပြလိုသော Field အား List တွင် ဖော်ပြနိုင်ရန် ရေးသားနိုင်ပါသည်။

    private void initListView() {
        list.getItems().addAll(
                em.createNamedQuery("Auser.findAll", Auser.class)
                        .getResultList());
        list.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

        list.setCellFactory(new Callback<ListView<Auser>, ListCell<Auser>>() {

            @Override
            public ListCell<Auser> call(ListView<Auser> arg0) {
                return new ListCell<Auser>() {
                    @Override
                    protected void updateItem(Auser au, boolean bu) {
                        super.updateItem(au, bu);
                        if (null != au)
                            setText(au.getName());
                    }
                };
            }
        });

        list.getSelectionModel().selectedItemProperty()
                .addListener(new ChangeListener<Auser>() {

                    @Override
                    public void changed(ObservableValue<? extends Auser> obs,
                            Auser oldObj, Auser newObj) {
                        setUserView(newObj);
                    }
                });
    }

စာကြောင်း ၂တွင် ListView အတွင်း အချက်အလက်များအား ဖော်ပြရန် ListView#getItems အားခေါ်ယူ၍ ၎င်းအတွင်းတွင် EntityManager အား  အသုံးပြုကာ ရရှိလာသော List<Auser> အား ထည့်သွင်းပါသည်။ ListView သည် Auser အား အသုံးပြုနိုင်သော ListView<Auser> အား Declare လုပ်ထားသောကြောင့် ListView#getItems အား ခေါ်ယူသည့် အခါတွင် ObservableList<Auser> အား ရရှိမည် ဖြစ်ပါသည်။ ObservableList သည် JavaFX ၏ Collection တစ်မျိုးဖြစ်ပြီး၊ java.util.List ကဲ့သို့ အသုံးပြုနိုင်သလို အတွင်းရှိတန်ဖိုးများ၏ အပြောင်းအလည်းကိုလည်း သိရှိနိုင်ပါသည်။
၎င်း ObservableList အတွင်း List<Auser> အား ထည့်သွင်းလိုက်ပါက Auser အား ဖော်ပြနိုင်သော ListView ကို ရရှိမည် ဖြစ်ပါသည်။

သို့သော်လည်း ဒီအတိုင်းဆိုပါက ListView အတွင်းတွင် Auser ၏ အမည် ကိုသာဖော်ပြနိုင်မည် ဖြစ်ပါသည်။ ဤနေရာတွင် Auser.name အား ဖော်ပြလိုပါသောကြောင့် ListView ၏ Cell Factory အား ပြုပြင်ပြောင်းလည်း ရေးသားရန် လိုအပ်ပါသည်။ စာကြောင်း ၇မှ ၂၀သည် Cell Factory အား အသစ်ပြုပြင် ရေးသားနေသောနေရာ ဖြစ်ပါသည်။ CellFactory အဖြစ် CallBack ၏ Anonymous Class တစ်ခုအား ရေးသားပါသည်။ အတွင်းပိုင်းတွင် call method အား Override လုပ်ကာ ရေးသားပါသည်။ List Cell အား Create လုပ်သည့်အခါတွင် ခေါ်ယူမည့် Method ဖြစ်ပါသည်။

စာကြောင်း ၁၁တွင် ListCell ၏ Anonymous Class တစ်ခုအား ရေးသားကာ call method ၏ Return တန်ဖိုးအနေဖြင့် ခေါ်ယူသည့်နေရာအား ပြန်ပို့ပေးပါသည်။ အတွင်းတွင် Override လုပ်ထားသည်မှာ updateItem ဖြစ်ပြီး ၎င်းအတွင်းတွင် setText ဖြင့် Auser#getName ၏ တန်ဖိုးအား ဖော်ပြစေပါသည်။ ဤနည်းအားဖြင့် ListCell ၏ အတွင်းပိုင်းတွင် Auser ၏ Name အား ဖော်ပြစေနိုင်ခြင်း ဖြစ်ပါသည်။

စာကြောင်း ၂၂မှ ၃၀သည် ListView ၏ Selection တန်ဖိုး ပြောင်းလည်းပါက၊ User View အား ပြောင်းလည်းပေးရန် ရေးသားထားသော အပိုင်းဖြစ်၏။ ListView#getSelectionModel ဖြင့် SelectionModel အားရယူကာ ၎င်း၏ selectedItemProperty အားအသုံးပြုကာ ရွေးချယ်ထားသော Property အား ရယူပါသည်။ ပြီးပါက ChangeListener ၏ Anonymous Class တစ်ခုအား ၎င်း၏ Listener အဖြစ် သတ်မှတ်ရေးသားနေခြင်းသာဖြစ်၏။ စာကြောင်း ၂၆ရှိ Override လုပ်ထားသော change method သည် Selection တန်ဖိုး ပြောင်းလည်းပါက ခေါ်ယူမည့် Method ဖြစ်ပြီးအတွင်းပိုင်းတွင် ပြောင်းလည်းသွားသော တန်ဖိုးဖြင့် User View အား ပြုပြင် ရေးသားနေစေပါသည်။

ဤနမှုနာသည် DTC ရှိ ကျောင်းသားများအတွက် နမှုနာ တစ်ပုဒ်ဖြစ်ပြီး၊ JPA နှင့် JavaFX အား အသုံးပြုကာ ရေးသားထားသော Address Book Application တစ်ခုဖြစ်ပါသည်။ အခြားသော Function များလည်း ပါသေးပါသော်လည်း ဤနေရာတွင် ListView နှင့် ပတ်သက်သော အပိုင်းကိုသာ အဓိကထား၍ ဖော်ပြထားပါသည်။

ComboBox နှင့် ပတ်သက်သော အပိုင်းများကိုမူ နောက်ရက်များတွင် ဖော်ပြသွားမည် ဖြစ်ပြီး၊ JPA ၏ အကြောင်းများကိုမူ Java EE 7 အခန်းဆက်များတွင် ဖော်ပြသွားပါမည်။

နမှုနာ Project အား အောက်ပါလင့်ခ်မှ ရယူနိုင်ပါသည်။
https://github.com/minlwin/mmju/tree/master/Address_Book

ဆက်ပါဦးမည်။ လေးစားစွာဖြင့်။

မင်းလွင်