Start here: how every recipe fits together (ဒီမှာ စပါ: recipe တိုင်း ဘယ်လို ချိတ်ဆက်ထားလဲ)

IA (Internal Assessment) အတွက် tool ပါ၊ စာမေးပွဲ ခေါင်းစဉ် မဟုတ်ပါဘူး။ IA ဆိုတာ IB သင်တန်းမှာ ကျောင်းသားတစ်ယောက်ချင်း ကိုယ်တိုင် တည်ဆောက်ရပြီး ကျောင်းက ဆရာက အမှတ်ပေးတဲ့ အပိုင်းပါ။ ဒီ Cookbook ထဲက recipe (ချက်ချင်း ယူသုံးလို့ရတဲ့ code နမူနာ) တိုင်း သုံးတဲ့ FXML layout (control တွေကို screen ပေါ်မှာ စီစဉ်ထားပုံ)၊ controller (user လုပ်တာတွေကို ကိုင်တွယ်ပြီး Model နဲ့ screen တွေကို ချိတ်ပေးတဲ့ class) နဲ့ event handler (button နှိပ်တာလို event ဖြစ်တဲ့အခါ run တဲ့ code) ဖွဲ့စည်းပုံကို ဒီစာမျက်နှာက ရှင်းပြပါတယ်။ ဒါကြောင့် recipe တွေ မဖတ်ခင် ဒီစာမျက်နှာကို အရင် ဖတ်ပါ။ IA က ကိုယ်တိုင် လုပ်တဲ့ အလုပ် ဖြစ်ရပါမယ်: ဥပမာတွေကို ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်သုံးပြီး ပြန်သုံးတဲ့ code မှန်သမျှကို ဘယ်ကယူတယ်ဆိုတာ ဖော်ပြပါ။

ဒီ Cookbook ထဲက recipe တိုင်းက နေရာ နှစ်ခုတည်းမှာပဲ ပြင်ရပါတယ်။ အဲဒီ နေရာ နှစ်ခုက ဘာလဲ၊ ဘယ်လို ချိတ်ဆက်လဲ သိသွားရင် recipe တိုင်းကို ပုံစံ တစ်မျိုးတည်း ဖတ်လို့ ရပါပြီ။

ကိုယ်ပြင်ရမယ့် နေရာ နှစ်ခု

SceneBuilder (FXML layout ကို ပုံနဲ့ မြင်ရင်း ပြင်တဲ့ editor) ထဲက layout။ ဒါက .fxml file (screen ပုံစံကို ဖော်ပြတဲ့ file) ပါ: user မြင်ရတဲ့ window တွေ၊ button တွေ၊ text field တွေ၊ table တွေနဲ့ label တွေပါ။ SceneBuilder ထဲမှာ ဆွဲရွှေ့ပြီး နေရာချရပါတယ်၊ ပြီးရင် SceneBuilder က ကိုယ့် screen ကို FXML အဖြစ် save လုပ်ပေးပါတယ်။

.java file ထဲက controller။ ဒါက user တစ်ခုခု လုပ်တဲ့အခါ run တဲ့ code ပါ: button နောက်ကွယ်က logic၊ input (program ထဲ ထည့်ပေးတဲ့ ဒေတာ) ကို စစ်တာ၊ ဒေတာကို save လုပ်တာ စတာတွေပါ။ Screen တစ်ခုမှာ controller class တစ်ခု တွဲပါတယ်။

Recipe တစ်ခုက နေရာ တစ်ခုစီမှာ ဘာလုပ်ရမလဲ ဆိုတာကို ဒီအစဉ်အတိုင်း ပြောပြပါတယ်: ပထမ layout၊ ပြီးမှ controller။

နေရာ နှစ်ခု ချိတ်ဆက်ပုံ

နားလည်ထားရမယ့် ချိတ်ဆက်မှု နှစ်ခုပဲ ရှိပြီး recipe တိုင်းက အဲဒီ နှစ်ခုပေါ် မူတည်ပါတယ်။

fx:id က component (button၊ text field လို screen ပေါ်က အစိတ်အပိုင်း) တစ်ခုကို field (object ထဲက အချက်အလက် အကွက်) တစ်ခုနဲ့ ချိတ်ပေးပါတယ်။ SceneBuilder ထဲမှာ component တစ်ခုကို fx:id ပေးလိုက်ရင် controller က နာမည်တူ @FXML field (@FXML အမှတ်အသားနဲ့ FXML ထဲက control ကို ချိတ်ထားတဲ့ field) တစ်ခုကနေတစ်ဆင့် အဲဒီ component ကို ယူသုံးနိုင်ပါတယ်။ နာမည် အတိအကျ ကိုက်ရပါမယ်။

<!-- in the layout -->
<TextField fx:id="txtName" />

// in the controller
@FXML private TextField txtName;   // same name as the fx:id

onAction က button တစ်ခုကို method (သီးခြား အလုပ်တစ်ခု လုပ်ပေးတဲ့ code အပိုင်း) တစ်ခုနဲ့ ချိတ်ပေးပါတယ်။ SceneBuilder ထဲမှာ button တစ်ခုရဲ့ onAction ကို သတ်မှတ်တဲ့အခါ button ကို နှိပ်ရင် run မယ့် controller ထဲက method နာမည် တစ်ခုကို ပေးရပါတယ်။ # က FXML syntax (code ရေးထုံး) ရဲ့ အစိတ်အပိုင်းပါ။

<!-- in the layout -->
<Button text="Save" onAction="#handleSave" />

// in the controller
@FXML
private void handleSave() {
    // runs when the button is clicked
}

FXML ထဲက handler နာမည်နဲ့ ကိုက်တဲ့ method က controller ထဲမှာ မရှိရင် screen ကို load လုပ်လို့ မရပါဘူး။ Controller ထဲက field တစ်ခုနဲ့ ကိုက်တဲ့ fx:id မရှိရင် အဲဒီ field က null (ဘာ object ကိုမှ မညွှန်းတဲ့ တန်ဖိုး) အတိုင်း ကျန်နေပြီး သူ့ပေါ်မှာ method ခေါ်ရင် error ဖြစ်ပါတယ်: အဲဒီ code က initialize() ထဲမှာ ရှိရင် screen ကို load လုပ်လို့ မရပါဘူး၊ handler ထဲမှာ ရှိရင်တော့ window ပွင့်နေလျက်နဲ့ အဲဒီ click က အလုပ်မလုပ်ပါဘူး။ fx:id တစ်ခုမှာ ကိုက်တဲ့ field ရှိဖို့ မလိုပါဘူး၊ field မပါတဲ့ fx:id က error မဖြစ်စေပါဘူး။ ဒါတွေက အဖြစ်များတဲ့ အမှားတွေ ဖြစ်လို့ recipe တွေက ပြန်သတိပေးထားပါတယ်: FXML ထဲက နာမည် တစ်ခုချင်းစီကို controller နဲ့ တိုက်စစ်ပါ။

ဘာကိုမဆို ထည့်တဲ့အခါ ပုံမှန် လုပ်ရမယ့် အစဉ်

Recipe တိုင်းက အဆင့်တွေ အတူတူ လိုက်နာတာမို့ ကိုယ် ဘယ်အဆင့် ရောက်နေလဲ အမြဲ သိနိုင်ပါတယ်:

  1. SceneBuilder ထဲမှာ component ကို ထည့်ပါ။
  2. သူ့ကို fx:id ပေးပါ။
  3. Button ဖြစ်ရင် သူ့ onAction ကို သတ်မှတ်ပါ။
  4. လိုအပ်တဲ့ တခြား property (object တစ်ခုရဲ့ စာသား၊ အရွယ်အစား စတဲ့ နာမည်ပေးထားတဲ့ တန်ဖိုး) တွေကို သတ်မှတ်ပါ။
  5. Controller ထဲမှာ logic ကို ရေးပါ။

ကိုယ့်အလုပ် တကယ် ရှိတဲ့ နေရာ

Recipe တွေက wiring (control တွေနဲ့ code ကို ချိတ်ဆက်ပေးတဲ့ အသင့် code) ကို ပေးပါတယ်: layout၊ field ကြေညာချက်တွေ၊ handler method တွေနဲ့ JavaFX (Java နဲ့ desktop app တည်ဆောက်တဲ့ library) ရဲ့ ပုံမှန် method ခေါ်မှုတွေပါ။ အဲဒီ အပိုင်းက လူတိုင်းအတွက် အတူတူပဲ ဖြစ်လို့ Cookbook က ပေးထားတာပါ။

ကိုယ်ပိုင် အလုပ်ကတော့ ကိုယ့် product (IA အတွက် ကိုယ်တိုင် တည်ဆောက်ရတဲ့ program ဒါမှမဟုတ် app) ရဲ့ algorithm (အယ်လ်ဂိုရီသမ်၊ ပြဿနာကို အဆင့်ဆင့် ဖြေရှင်းတဲ့ နည်းလမ်း) တွေနဲ့ ဒီဇိုင်း ဆုံးဖြတ်ချက်တွေ ပါ: ဒေတာကို ဘယ်လို စီမံမလဲ၊ ကိုယ့် app က ဘာတွေ ဆုံးဖြတ်မလဲ၊ ကိုယ်ပိုင် logic တွေပါ။ Recipe တွေထဲမှာ အဲဒီ logic နေရာကို controller ထဲမှာ မှတ်ထားပါတယ်။ Program ကြီးကြီးမှာဆိုရင် controller က ကိုယ့် Model (app ရဲ့ ဒေတာနဲ့ စည်းမျဉ်းတွေကို ထိန်းထားတဲ့ class တွေ) class တွေပေါ်က method တွေကို ခေါ်နိုင်ပါတယ်၊ ဒေတာနဲ့ ဆိုင်တဲ့ စည်းမျဉ်းတွေက Model class တွေထဲမှာ ရှိသင့်ပါတယ်။ MVC Architecture (MVC ဖွဲ့စည်းပုံ: app ကို Model၊ View၊ Controller ဆိုပြီး အပိုင်းသုံးပိုင်း ခွဲရေးတဲ့ ပုံစံ) စာမျက်နှာကို ကြည့်ပါ။ Recipe တိုင်းက အတိအကျ နေရာကို comment (code ထဲမှာ ရေးထားတဲ့ မှတ်ချက်၊ run မလုပ်ပါ) တစ်ခုနဲ့ မှတ်ထားပါတယ်:

// your IA logic here

ဒီ line (အဓိပ္ပာယ်က “ဒီနေရာမှာ ကိုယ့် IA logic ကို ထည့်ပါ”) က သူ့ပတ်လည်က ပြန်သုံးလို့ရတဲ့ code နဲ့ ကိုယ်ပိုင် အလုပ်ကြားက နယ်နိမိတ်ပါ။ အဲဒီ line နေရာမှာ ကိုယ့် application လိုအပ်တဲ့ ဒေတာ စီမံမှုတွေကို အစားထိုး ရေးပါ: အဲဒီ အပိုင်းကို ကိုယ်တိုင် ဒီဇိုင်းဆွဲပြီး ရေးရပါမယ်။ ပတ်လည်က ဥပမာကို လိုသလို ပြင်သုံးပြီး ပြန်သုံးထားတဲ့ code တွေကို ကိုယ့် IA documentation (IA အတွက် ရေးတင်ရတဲ့ စာတမ်း) ထဲမှာ ဖော်ပြပါ။

Recipe တစ်ခုကို ဖတ်ပုံ

Recipe တိုင်းကို ပုံစံ တစ်မျိုးတည်း စီထားပါတယ်:

  • ဒါက ဘာလုပ်ပေးလဲ နဲ့ IA မှာ ဘယ်အချိန် သုံးမလဲ: ရည်ရွယ်ချက်နဲ့ ကိုယ့် app ထဲမှာ ထည့်ချိတ်ရမယ့် နေရာ။
  • SceneBuilder ထဲမှာ (layout): screen ပေါ် ဘာထည့်ရမလဲ၊ အဲဒါကို ဘယ် fx:id ဒါမှမဟုတ် onAction ပေးရမလဲ။ Layout ထဲမှာ ဘာမှ ထည့်စရာ မလိုရင် recipe က အဲဒီလို ပြောပါတယ်။
  • Controller ထဲမှာ (.java file): import (တခြားနေရာက code ကို ယူသုံးမယ်လို့ ကြေညာခြင်း) တွေ၊ @FXML field တွေနဲ့ handler code။
  • ကိုယ်ပိုင် logic ထည့်ရမယ့် နေရာ: // your IA logic here လို့ မှတ်ထားတဲ့ အတိအကျ နေရာ။
  • ကိုယ့် project နဲ့ ကိုက်အောင် ပြင်ပါ: ပြောင်းရမယ့် နာမည်တွေနဲ့ တန်ဖိုးတွေ။
  • သတိထားရမယ့် အချက်များ: အပေါ်က wiring အမှား နှစ်မျိုး အပါအဝင် အဖြစ်များတဲ့ အမှားတွေ။
  • တွဲသုံးလို့ရတဲ့ recipe များ: ဒီ recipe နဲ့ မကြာခဏ တွဲသုံးတဲ့ recipe တွေ။

အဆင်သင့် ဖြစ်ပြီဆိုရင် Controlling UI state (UI ရဲ့ အခြေအနေကို ထိန်းချုပ်ခြင်း) ကနေ စပါ။ ဒါမှမဟုတ် Cookbook ခြုံငုံ စာမျက်နှာ ကနေ ကိုယ်လုပ်ချင်တဲ့ အလုပ်ကို ခေါင်းစဉ်မှာ ဖော်ပြထားတဲ့ recipe ဆီ တိုက်ရိုက် သွားပါ။