Controlling UI state (UI ရဲ့ အခြေအနေကို ထိန်းချုပ်ခြင်း)

IA (Internal Assessment) အတွက် tool တွေပါ၊ စာမေးပွဲ ခေါင်းစဉ် မဟုတ်ပါဘူး။ ဒီ recipe (ချက်ချင်း ယူသုံးလို့ရတဲ့ code နမူနာ) တွေက ကိုယ့် Internal Assessment app အတွက် ပြင်သုံးရမယ့် JavaFX (Java နဲ့ desktop app တည်ဆောက်တဲ့ library) ပုံစံတွေပါ။ IA ဆိုတာ IB သင်တန်းမှာ ကျောင်းသားတစ်ယောက်ချင်း ကိုယ်တိုင် တည်ဆောက်ရပြီး ကျောင်းက ဆရာက အမှတ်ပေးတဲ့ အပိုင်းပါ။ ဒီထဲက ဘာကိုမှ စာမေးပွဲမှာ မမေးပါဘူး။ IA က ကိုယ်တိုင် လုပ်တဲ့ အလုပ် ဖြစ်ရမှာမို့ snippet (code အပိုင်းအစ) တစ်ခုစီကို ကူးယူရမယ့် feature (program ရဲ့ လုပ်ဆောင်ချက်) အဖြစ် မမြင်ဘဲ ကိုယ်တိုင် ပြင်ရမယ့် အစိတ်အပိုင်း တစ်ခုအဖြစ် မြင်ပါ။

ဒီစာမျက်နှာက user က အခု ဘာတွေ လုပ်လို့ရလဲ ဆိုတာကို ထိန်းချုပ်ခြင်း အကြောင်းပါ: control (button၊ text box စတဲ့ user သုံးတဲ့ အစိတ်အပိုင်း) တွေကို ဖွင့်တာ၊ ပိတ်တာ၊ တစ်ခုခုကို ဘာကြောင့် ပိတ်ထားလဲ ပြတာ၊ cursor (စာရိုက်မယ့် နေရာကို ပြတဲ့ အမှတ်အသား) ကို မှန်တဲ့ နေရာမှာ ထားတာနဲ့ Enter key နှိပ်ရင် user မျှော်လင့်တဲ့ အလုပ် ဖြစ်အောင် လုပ်တာတွေပါ။

ဒီကို ပထမဆုံး ရောက်တာလား။ Start here: how every recipe fits together (ဒီမှာ စပါ: recipe တိုင်း ဘယ်လို ချိတ်ဆက်ထားလဲ) ကို အရင် ဖတ်ပါ။ အဲဒီ စာမျက်နှာက ကိုယ်ပြင်ရမယ့် နေရာ နှစ်ခုကို ရှင်းပြပါတယ်: SceneBuilder (FXML layout ကို ပုံနဲ့ မြင်ရင်း ပြင်တဲ့ editor) ထဲက layout (control တွေကို screen ပေါ်မှာ စီစဉ်ထားပုံ) နဲ့ controller (user လုပ်တာတွေကို ကိုင်တွယ်ပြီး Model နဲ့ screen တွေကို ချိတ်ပေးတဲ့ class) ပါ။ Recipe တိုင်း မှီခိုနေတဲ့ fx:id နဲ့ onAction ချိတ်ဆက်မှုတွေကိုလည်း ရှင်းပြပါတယ်။

ဖြစ်နေတဲ့ အခြေအနေပေါ် မူတည်ပြီး control ကို ဖွင့်ခြင်း၊ ပိတ်ခြင်း

ဒါက ဘာလုပ်ပေးလဲ: control တစ်ခုကို သုံးလို့ရတဲ့ အခြေအနေနဲ့ သုံးလို့မရတဲ့ အခြေအနေကြား ပြောင်းပေးပါတယ်။ ဒါကြောင့် user က အဲဒီအချိန်မှာ အဓိပ္ပာယ်ရှိတဲ့ လုပ်ဆောင်ချက်တွေကိုပဲ လုပ်နိုင်ပါတယ်။

IA မှာ ဘယ်အချိန် သုံးမလဲ: form (ဒေတာ ဖြည့်ရတဲ့ အကွက်တွေ ပါတဲ့ အပိုင်း) မှာ လိုတဲ့ ဒေတာ မပြည့်မချင်း ပိတ်ထားတဲ့ Save button၊ row (table ထဲက အလျားလိုက် အတန်း) တစ်ခု ရွေးပြီးမှ အလုပ်လုပ်တဲ့ Delete button၊ လက်ရှိ အဆင့် ပြီးတဲ့အထိ စောင့်နေတဲ့ Next button။

SceneBuilder ထဲမှာ (layout): user စာရိုက်ထည့်မယ့် input box နဲ့ အခြေအနေ ကိုက်မှ နှိပ်ခွင့်ပေးချင်တဲ့ button ကို ထည့်ပါ။ Text field ကို txtName ဆိုတဲ့ fx:id ပေးပြီး သူ့ onKeyReleased (key တစ်ခုကို နှိပ်ပြီး လွှတ်လိုက်တိုင်း ဖြစ်တဲ့ event) ကို updateButtons လို့ သတ်မှတ်ပါ၊ ဒါမှ user စာရိုက်နေရင်း button ရဲ့ အခြေအနေ ပြန် update ဖြစ်ပါမယ်။ Button ကို btnSave ဆိုတဲ့ fx:id ပေးပါ။

<TextField fx:id="txtName" onKeyReleased="#updateButtons" />
<Button fx:id="btnSave" text="Save" onAction="#handleSave" />

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

Field များနဲ့ logic:

@FXML private Button btnSave;
@FXML private TextField txtName;

@FXML
public void initialize() {
    btnSave.setDisable(true);          // start off until there is something to save
}

// Runs whenever the field changes, because of onKeyReleased in the layout.
@FXML
private void updateButtons() {
    // your IA logic here: decide what "ready" means for your app
    boolean ready = !txtName.getText().trim().isEmpty();
    btnSave.setDisable(!ready);        // on when ready, off when not
}

ကိုယ်ပိုင် logic ထည့်ရမယ့် နေရာ: // your IA logic here လို့ မှတ်ထားတဲ့ boolean ready = ... line ပါ။ အဲဒီ condition (မှန်လား မှားလား စစ်တဲ့ အခြေအနေ) က လုပ်ဆောင်ချက်ကို ဘယ်အချိန်မှာ ခွင့်ပြုမလဲ ဆိုတဲ့ စည်းမျဉ်းပါ၊ သူ့ပတ်လည်က ကျန်တာ အားလုံးကတော့ ပြန်သုံးလို့ရတဲ့ wiring (control တွေနဲ့ code ကို ချိတ်ဆက်ပေးတဲ့ အသင့် code) ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

ready condition ကို ကိုယ့် app မှာ “အခု ခွင့်ပြုတယ်” ဆိုတာ ဘာကို ဆိုလိုလဲ ဆိုတာနဲ့ အစားထိုးပါ (row တစ်ခု ရွေးထားတာ၊ field နှစ်ခု ဖြည့်ထားတာ၊ စုစုပေါင်း တန်ဖိုး သုညထက် ကြီးတာ)။
updateButtons ကို နာမည်ပြောင်းပြီး အဲဒီ input တွေကို ပြောင်းတဲ့ နေရာတိုင်းကနေ ခေါ်ပါ။
setDisable(true) က control ကို ပိတ်ပြီး setDisable(false) က ဖွင့်ပါတယ်။ တန်ဖိုးက “ပိတ်ထားသလား” (is it disabled) ကို ဆိုလိုတာမို့ “အဆင်သင့် ဖြစ်ပြီလား” (is it ready) နဲ့ ပြောင်းပြန် ဖတ်ရပါတယ်။

သတိထားရမယ့် အချက်များ:

Layout ထဲက fx:id တန်ဖိုးတွေ (txtName, btnSave) က @FXML field (@FXML အမှတ်အသားနဲ့ FXML ထဲက control ကို ချိတ်ထားတဲ့ field) နာမည်တွေနဲ့ အတိအကျ ကိုက်ရပါမယ်။ btnSave မကိုက်ရင် initialize() က အဲဒါကို သုံးလို့ screen ကို load လုပ်လို့ မရပါဘူး။ txtName မကိုက်ရင်တော့ screen ကို load လုပ်လို့ ရပေမဲ့ user က field ထဲမှာ key တစ်ခု ရိုက်တိုင်း error ဖြစ်ပါလိမ့်မယ်။ onKeyReleased မှာ ပေးထားတဲ့ updateButtons method (သီးခြား အလုပ်တစ်ခု လုပ်ပေးတဲ့ code အပိုင်း) နဲ့ onAction မှာ ပေးထားတဲ့ handleSave (ကိုယ့်ရဲ့ save method) ကလည်း controller ထဲမှာ ရှိရပါမယ်၊ မဟုတ်ရင် screen ကို load လုပ်လို့ မရပါဘူး။
ပိတ်ထားတဲ့ control က နေရာ ယူထားဆဲ ဖြစ်ပြီး မြင်ရဆဲပါ၊ မီးခိုးရောင် မှိန်နေပြီး နှိပ်လို့ မရတာပဲ ကွာပါတယ်။ လုံးဝ ပျောက်သွားစေချင်ရင် setVisible(false) နဲ့ setManaged(false) ကို သုံးရပါတယ်၊ ဒါက တခြား ရွေးချယ်မှု တစ်ခုပါ။
Update method ကို input တစ်ခုတည်းကနေ မဟုတ်ဘဲ input တိုင်းကနေ ခေါ်ဖို့ မမေ့ပါနဲ့၊ မဟုတ်ရင် button ရဲ့ အခြေအနေက ဒေတာနဲ့ မကိုက်ဘဲ နောက်ကျ ကျန်ခဲ့ပါလိမ့်မယ်။

တွဲသုံးလို့ရတဲ့ recipe များ: Control ဘာကြောင့် ပိတ်ထားလဲ user ကို ပြခြင်း၊ Catch and explain bad input (မှားတဲ့ input ကို ဖမ်းပြီး ရှင်းပြခြင်း)၊ Find out which row the user clicked (user နှိပ်လိုက်တဲ့ row ကို သိခြင်း)။

Control ဘာကြောင့် ပိတ်ထားလဲ user ကို ပြခြင်း

ဒါက ဘာလုပ်ပေးလဲ: ပိတ်ထားတဲ့ control ကို သုံးလို့ မရဘူးဆိုတာ ထင်ထင်ရှားရှား မြင်ရအောင် လုပ်ပြီး hover (mouse ကို control ပေါ်မှာ တင်ထားခြင်း) လုပ်တဲ့အခါ အကြောင်းရင်းကို ပြပေးပါတယ်။ ဒါကြောင့် button က ဘာလို့ ဘာမှ မလုပ်တာလဲ ဆိုတာကို user ခန့်မှန်းနေစရာ မလိုတော့ပါဘူး။

IA မှာ ဘယ်အချိန် သုံးမလဲ: user ကိုယ်တိုင် သိနိုင်မယ် မထင်ရတဲ့ အကြောင်းရင်းကြောင့် control တစ်ခုကို ပိတ်ထားတဲ့ အချိန်တိုင်းမှာပါ။ “Choose a date first” (ရက်စွဲကို အရင် ရွေးပါ) လို့ ပြောတဲ့ tooltip (mouse တင်ထားရင် ပေါ်လာတဲ့ စာတို) ပါတဲ့ မှိန်နေတဲ့ Submit button က click တွေကို ဘာမှ မပြောဘဲ လျစ်လျူရှုနေတဲ့ button ထက် user အတွက် ပိုအဆင်ပြေပါတယ်။

SceneBuilder ထဲမှာ (layout): အခြေအနေ ကိုက်မှ နှိပ်ခွင့်ပေးချင်တဲ့ button ကို ထည့်ပြီး btnSubmit ဆိုတဲ့ fx:id ပေးပါ။ Opacity (ဘယ်လောက် ထင်ထင်ရှားရှား မြင်ရလဲ ဆိုတဲ့ တန်ဖိုး) နဲ့ tooltip ကို code ထဲမှာ သတ်မှတ်တာမို့ ဒီမှာ တခြား ထည့်စရာ မရှိပါဘူး။

<Button fx:id="btnSubmit" text="Submit" onAction="#handleSubmit" />

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Tooltip;

Controller:

@FXML private Button btnSubmit;

private void setSubmitEnabled(boolean enabled) {
    btnSubmit.setDisable(!enabled);
    btnSubmit.setOpacity(enabled ? 1.0 : 0.5);   // full strength on, half faded off
}

@FXML
public void initialize() {
    btnSubmit.setTooltip(new Tooltip("Fill in every field before submitting."));
    setSubmitEnabled(false);
    // your IA logic here: call setSubmitEnabled(true) once your form is ready
}

ကိုယ်ပိုင် logic ထည့်ရမယ့် နေရာ: // your IA logic here လို့ မှတ်ထားတဲ့ နေရာပါ။ အဲဒီမှာ form အဆင်သင့် ဖြစ်ပြီလား ဆုံးဖြတ်ပြီး setSubmitEnabled(true) ကို ခေါ်ပါ။ မှိန်အောင် လုပ်တာနဲ့ tooltip က ပြန်သုံးလို့ရတဲ့ wiring ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

Control ပိတ်ထားရတဲ့ အကြောင်းရင်း အတိအကျကို ပြောပြအောင် tooltip စာကို ပြောင်းပါ။
0.5 က “တစ်ဝက် မြင်ရ” ဆိုတဲ့ အဓိပ္ပာယ်ပဲ ရှိပါတယ်။ 0.0 (မမြင်ရ) နဲ့ 1.0 (အပြည့် မြင်ရ) ကြားက ကြိုက်တဲ့ တန်ဖိုး သုံးလို့ ရပါတယ်။
ယခင် recipe မှာလိုပဲ “အဆင်သင့် ဖြစ်ပြီလား” စစ်တဲ့ နေရာကနေ setSubmitEnabled(true) ကို ခေါ်ပါ။

သတိထားရမယ့် အချက်များ:

Layout ထဲက btnSubmit ဆိုတဲ့ fx:id က @FXML field နာမည်နဲ့ အတိအကျ ကိုက်ရပါမယ်၊ မဟုတ်ရင် screen ကို load လုပ်လို့ မရပါဘူး။
Tooltip တွေက mouse တင်ထားမှပဲ ပေါ်တာမို့ အရိပ်အမြွက် ပေးတာပဲ ဖြစ်ပါတယ်၊ တကယ် တစ်ခုခု မှားနေတဲ့အခါ မြင်ရတဲ့ message တစ်ခုကို အစားထိုးလို့ မရပါဘူး။
လုံးဝ ပိတ်ထားတဲ့ control က mouse event (mouse နဲ့ နှိပ်တာ၊ ရွှေ့တာလို ဖြစ်ရပ်) တွေကို လက်မခံပါဘူး၊ ဒါကြောင့် အဲဒီ control ပေါ်မှာ တိုက်ရိုက် သတ်မှတ်ထားတဲ့ tooltip က ပိတ်ထားစဉ်မှာ မပေါ်တာ ဖြစ်နိုင်ပါတယ်။ ပိတ်ထားစဉ်မှာလည်း အရိပ်အမြွက်ကို ပေါ်စေချင်ရင် Tooltip.install(parentNode, tip) ကို သုံးပြီး Tooltip ကို control ရဲ့ parent container (အဲဒီ control ကို ကိုင်ထားတဲ့ container၊ ဥပမာ ဝန်းရံထားတဲ့ VBox) ပေါ်မှာ ထားပါ၊ ဒါမှမဟုတ် control ကို ဖွင့်ထားပြီး click လုပ်တဲ့အခါ message တစ်ခု ပြပါ။

တွဲသုံးလို့ရတဲ့ recipe များ: Control ကို ဖွင့်ခြင်း၊ ပိတ်ခြင်း၊ Tell the user something (user ကို တစ်ခုခု အသိပေးခြင်း)။

User စတင် စာရိုက်ရမယ့် နေရာမှာ cursor ကို ထားခြင်း

ဒါက ဘာလုပ်ပေးလဲ: screen ပွင့်လာတဲ့အခါ keyboard focus (keyboard နဲ့ ရိုက်ထည့်တာကို လက်ခံမယ့် control ဖြစ်နေခြင်း) ကို ရွေးထားတဲ့ control တစ်ခုဆီ ရွှေ့ပေးပါတယ်။ ဒါကြောင့် user က အရင် click လုပ်စရာ မလိုဘဲ ချက်ချင်း စာစရိုက်လို့ ရပါတယ်။

IA မှာ ဘယ်အချိန် သုံးမလဲ: username field မှာ cursor ရောက်နေသင့်တဲ့ login screen၊ search box မှာ ရောက်နေသင့်တဲ့ ရှာဖွေရေး screen၊ ပထမဆုံး ဖြည့်ရမယ့် field က ထင်ရှားနေတဲ့ form တိုင်း။

SceneBuilder ထဲမှာ (layout): အရင်ဆုံး active ဖြစ်နေရမယ့် text field ကို ထည့်ပြီး txtUsername ဆိုတဲ့ fx:id ပေးပါ။ ဒီမှာ တခြား ထည့်စရာ မရှိပါဘူး။

<TextField fx:id="txtUsername" />

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.TextField;

Controller:

@FXML private TextField txtUsername;

@FXML
public void initialize() {
    // your IA logic here: choose which control should be active first
    Platform.runLater(() -> txtUsername.requestFocus());   // runs after the screen has been set up
}

ကိုယ်ပိုင် logic ထည့်ရမယ့် နေရာ: ဘယ် control ကို focus ပေးမလဲ ဆိုတဲ့ ရွေးချယ်မှုပါ၊ // your IA logic here လို့ မှတ်ထားပါတယ်။ Screen အများစုအတွက် ဒါက ပထမ field ပါ၊ requestFocus() ခေါ်တာ ကိုယ်တိုင်ကတော့ wiring ပါ။ အဲဒီ ခေါ်မှုကို Platform.runLater နဲ့ ထုပ်ထားတာက initialize() က screen ကို window ထဲ မထည့်ခင် run တာကြောင့်ပါ၊ control တစ်ခုက scene (window ထဲမှာ ပြတဲ့ screen တစ်ခုစာ content) ထဲ ရောက်ပြီးမှ focus ယူနိုင်ပါတယ်။ runLater က အဲဒီ ခေါ်မှုကို ခဏနောက်မှ run ဖို့ JavaFX ကို တောင်းဆိုပါတယ်၊ ဒီ recipe တွေလို screen ကို load လုပ်ပြီး ချက်ချင်း ပြတဲ့အခါ ဒါက အလုပ်ဖြစ်ပါတယ်။ ကိုယ့် program က screen ကို စောစော load လုပ်ပြီး နောက်မှ ပြတယ်ဆိုရင်တော့ screen ရဲ့ scene ကို stage (window) ပေါ်မှာ သတ်မှတ်ပြီးမှ requestFocus() ကို ခေါ်ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

txtUsername ကို အရင်ဆုံး active ဖြစ်ရမယ့် control နဲ့ ပြောင်းပါ။
initialize() က FXML ကို load လုပ်ပြီးတာနဲ့ JavaFX ခေါ်တဲ့ method ပါ၊ ဒါကြောင့် screen ဖွင့်ချိန် ပြင်ဆင်မှု (setup) တွေအတွက် မှန်ကန်တဲ့ နေရာ ဖြစ်ပါတယ်။

သတိထားရမယ့် အချက်များ:

Layout ထဲက txtUsername ဆိုတဲ့ fx:id က @FXML field နာမည်နဲ့ အတိအကျ ကိုက်ရပါမယ်၊ မဟုတ်ရင် field က null (ဘာ object ကိုမှ မညွှန်းတဲ့ တန်ဖိုး) ဖြစ်နေပြီး requestFocus() ကို ခေါ်တဲ့အခါ exception (program run နေစဉ် ဖြစ်တဲ့ အမှား) ဖြစ်ပါလိမ့်မယ်။
() -> txtUsername.requestFocus() က lambda (နာမည် မပါတဲ့ method တစ်ခုကို အတိုချုပ် ရေးတဲ့ နည်း) ပါ။ Lambda တွေက syllabus မှာ စစ်တဲ့ Java ထဲမှာ မပါပေမဲ့ code အပိုင်းလေး တစ်ခုကို JavaFX ဆီ ပေးဖို့ ပုံမှန် သုံးတဲ့ နည်းလမ်းပါ။
တစ်ကြိမ်မှာ control တစ်ခုပဲ focus ရနိုင်တာမို့ control အများပေါ်မှာ requestFocus() ကို ခေါ်ရင် နောက်ဆုံး ခေါ်တဲ့ control က focus ရပါတယ်။

တွဲသုံးလို့ရတဲ့ recipe များ: Run setup code when a screen loads (screen load လုပ်တဲ့အခါ setup code ကို run ခြင်း)၊ Enter key ကို တုံ့ပြန်ခြင်း။

Enter key ကို တုံ့ပြန်ခြင်း

ဒါက ဘာလုပ်ပေးလဲ: user က control တစ်ခုထဲမှာ Enter ကို နှိပ်တဲ့အခါ လုပ်ဆောင်ချက် တစ်ခုကို run ပေးပါတယ်။ ဒါကြောင့် user က mouse ကို လှမ်းကိုင်စရာ မလိုဘဲ form ကို submit (တင်သွင်း) လုပ်တာ ဒါမှမဟုတ် ရှေ့ဆက်သွားတာ လုပ်နိုင်ပါတယ်။

IA မှာ ဘယ်အချိန် သုံးမလဲ: search box ထဲမှာ Enter နှိပ်ပြီး ရှာတာ၊ form ရဲ့ နောက်ဆုံး field ထဲမှာ Enter နှိပ်ပြီး form ကို submit လုပ်တာ၊ chat ပုံစံ input ထဲမှာ Enter နှိပ်ပြီး ပို့တာ။

SceneBuilder ထဲမှာ (layout): key နှိပ်တာကို စောင့်နားထောင်ချင်တဲ့ text field ကို ထည့်ပြီး txtSearch ဆိုတဲ့ fx:id ပေးကာ သူ့ onKeyPressed (key တစ်ခုကို နှိပ်လိုက်တိုင်း ဖြစ်တဲ့ event) ကို handleKeyPressed လို့ သတ်မှတ်ပါ။

<TextField fx:id="txtSearch" onKeyPressed="#handleKeyPressed" />

Controller ထဲမှာ (.java file):

Import line များ:

import javafx.fxml.FXML;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;

Controller:

@FXML private TextField txtSearch;

@FXML
private void handleKeyPressed(KeyEvent event) {
    if (event.getCode() == KeyCode.ENTER) {
        // your IA logic here: what Enter should trigger
        runSearch();
    }
}

ကိုယ်ပိုင် logic ထည့်ရမယ့် နေရာ: if (Enter) block ထဲက // your IA logic here လို့ မှတ်ထားတဲ့ line ပါ။ Key ကို စစ်တာက ပြန်သုံးလို့ရတဲ့ wiring ဖြစ်ပြီး လုပ်ဆောင်ချက်ကတော့ ကိုယ်ပိုင်ပါ။

ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ:

runSearch() ကို Enter နှိပ်ရင် လုပ်စေချင်တဲ့ လုပ်ဆောင်ချက်နဲ့ အစားထိုးပါ။
တခြား key တစ်ခုကို တုံ့ပြန်ချင်ရင် တခြား KeyCode တစ်ခုနဲ့ နှိုင်းယှဉ်ပါ၊ ဥပမာ field ကို ရှင်းဖို့ KeyCode.ESCAPE။
FXML ထက် code ထဲမှာ ချိတ်ရတာ ပိုကြိုက်ရင် txtSearch.setOnKeyPressed(e -> { ... }); ကို သုံးပါ။ အဲဒီ ပုံစံက lambda ကို သုံးပါတယ်၊ lambda က စာမေးပွဲ ပုံစံ Java (IB စာမေးပွဲ မေးခွန်းတွေမှာ သုံးတဲ့ Java အပိုင်း) အပြင်ဘက်မှာ ရှိပေမဲ့ JavaFX မှာ အသုံးများပါတယ်။

သတိထားရမယ့် အချက်များ:

txtSearch ဆိုတဲ့ fx:id က @FXML field နာမည်နဲ့ ကိုက်ရပါမယ်။ onKeyPressed မှာ ပေးထားတဲ့ handleKeyPressed method ကလည်း controller ထဲမှာ KeyEvent parameter (method ကို ပေးလိုက်တဲ့ တန်ဖိုးကို လက်ခံတဲ့ variable) တစ်ခုနဲ့ ရှိရပါမယ်၊ မဟုတ်ရင် screen ကို load လုပ်လို့ မရပါဘူး။
onKeyPressed ကို နားထောင်ချင်တဲ့ control ပေါ်မှာ ထားပါ။ Key event တွေက focus ရနေတဲ့ control ဆီ အရင် ရောက်ပြီး အဲဒီ control ကို ဝန်းရံထားတဲ့ container (တခြား object တွေကို ကိုင်ထားတဲ့ object) တွေဆီ အဆင့်ဆင့် တက်သွားပါတယ်။ ဒါကြောင့် container ပေါ်မှာ onKeyPressed ထားရင် သူ့ထဲက control တွေမှာ နှိပ်တဲ့ key တွေအတွက်လည်း run ပါတယ်၊ control က အဲဒီ key ကို ကိုယ်တိုင် ကိုင်တွယ်လိုက်ရင်တော့ မ run ပါဘူး။
Button တစ်ခုက focus ရနေတဲ့အခါ Enter နှိပ်ရင် သူ့ action ကို run ပြီးသားမို့ ဒီ recipe ကို များသောအားဖြင့် text field တွေနဲ့ တခြား input control တွေအတွက်ပဲ လိုပါတယ်။

တွဲသုံးလို့ရတဲ့ recipe များ: User စတင် စာရိုက်ရမယ့် နေရာမှာ cursor ကို ထားခြင်း၊ Filter the table as the user types (user စာရိုက်နေရင်း table ကို စစ်ထုတ်ခြင်း)၊ Ask before doing something destructive (ဒေတာ ပျက်စေနိုင်တဲ့ အလုပ် မလုပ်ခင် အရင် မေးခြင်း)။