Day 4 About Controls

ကျွှန်တော် JavaFX ၏ နေ့ရက်များဟု ခေါင်းစဉ်အောက်တွင် JavaFX ၏ အကြောင်းအရာများကို လေ့လာရင်း မိတ်ဆက်လာခဲ့သည်မှာ ဒီတစ်ခေါက်နှင့် ပါဆိုရင် လေးကြိမ်မြောက်ကို ရောက်ရှိလာခဲ့ပြီ ဖြစ်သည်။ ပဋ္ဌမဆုံးရက်ဖြင့် JavaFX ဆိုတာဘာလဲ၊ JavaFX နဲ့ ဘာတွေလုပ်နိုင်သလဲ၊ JavaFX ကို ရေးဖို့ ဘာတွေလိုအပ်သလဲ ဆိုသည့် အကြောင်းကို အဓိကထား တင်ပြခဲ့၏။

ဒုတိယနေ့မှာတော့ JavaFX ကို ရေးသားရာတွင် အဓိက နေရာတွင်ရှိသော Scene အကြောင်းနှင့် FXML အကြောင်းကို တင်ပြခဲ့၏။ Scene Builder အား အသုံးပြုပြီး ရေးသားပါက UI များကို လွယ်ကူစွာ ရေးသားနိုင်ကြောင်း လက်တွေ့ ရေးသားပြီး ဖော်ပြခဲ့၏။

တတိယနေ့အရောက်တွင် UI အပလီကေးရှင်းတွင် မရှိမဖြစ်လိုအပ်သော Layout များအကြောင်းကို ဖော်ပြရင်း JavaFX တွင် Layout အဖြစ်အသုံးပြုနိုင်သော Container များကို လက်တွေ့ရေးသားရင်း ဖော်ပြခဲ့၏။ ဤကဲ့သို့ရေးသားရာတွင်လည်း Layout ၏ သီအိုရီအကြောင်းကို အဓိကမထားပဲ JavaFX တွင် အသုံးပြုနိုင်သော Layout အကြောင်းကို အဓိကထားခဲ့ပါသည်။ နောက်ရက်များတွင် အခြေခံ သီအိုရီများကို မိတ်ဆက်ရင်း Layout အကြောင်းကို အလျဉ်းသင့်သလို ဖော်ပြသွားပါဦးမည်။ ခက်သည်က ကျွှန်တော်က မွေးရာပါ ကာလာဘလိုင်း ဖြစ်သောကြောင့် ဒီဇိုင်းအပိုင်းတွင် အလွန်အားနည်းပါသည်။

ဒီတစ်ခေါက် လေးရက်မြောက်မှာတော့ JavaFX တွင် အသုံးပြုနိုင်သော Controls များ၏ အခြေခံသဘောတရားကို ဖော်ပြသွားမည်။ JavaFX ၏ Controls များမှာ အတော်များများ အသုံးပြုရန် လိုအပ်သောကြောင့် ဒီတစ်ခေါက်အပါအဝင် ၃ရက်လောက် ခွဲ၍ ရေးသားရန် လိုအပ်ပါလိမ့်မည်။ ဒီတစ်ခေါက်မှာတော့ Controls တွင်ပါဝင်သော Component များအကြောင်းကို အကြမ်းဖျဉ်း ဖော်ပြသွားပါမည်။

Node

JavaFX တွင် GUI ပေါ်တွင် ဖော်ပြနေသော Class များအားလုံးသည် Node ၏ Sub Class များ ဖြစ်ကြ၏။ ထို့ကြောင့် အဆိုပါ Class များသည် Node တွင်ရှိသော လုပ်ဆောင်ချက်များအားလုံးအား အသုံးပြုနိုင်ပါသည်။ Node တွင်ပါဝင်သော အဓိက လုပ်ဆောင်ချက်များမှာ အောက်ပါအတိုင်း ဖြစ်ကြ၏။

• Event လုပ်ဆောင်ချက်များ
  
  Node Classတွင် Mouse Click နှင့် Key Type အစရှိသည့် Event များကို လုပ်ဆောင်စေနိုင်သော Event Handler များကို Member အနေဖြင့် ပိုင်ဆိုင်ပါသည်။ Mouse Click Event ဖြစ်သောအခါ ဖြစ်ပွားစေသော Event အတွက် Node#setOnMouseClicked Method ကို အသုံးပြု၍သော်၎င်း Key တစ်ခုကို Type လုပ်သောအခါ ဖြစ်ပွားစေတတ်သော Event အတွက် Node#setOnKeyTyped လုပ်ဆောင်ချက်ဖြင့် သော်၎င်း Event Handler များအား သတ်မှတ်နိုင်ပါသည်။
  သို့ရာတွင် ActionEvent ကဲ့သို့သော Class များမှာမူ Node Class တွင်မဟုတ်ပဲ၊ Sub Class များဖြစ်ကြသော Button Class များတွင် တိုက်ရိုက် သတ်မှတ်ရန် လိုအပ်ပါသည်။
  
• Drag And Drop
  
  Drag And Drop သည်လည်း Event အမျိုးအစားတစ်ခု ဖြစ်သည်ဟု စဉ်းစားနိုင်ပါသည်။ Swing ဖြင့် Drag And Drop အား ရေးသားရာတွင် အလွန်ခက်ခဲ ရှုပ်ထွေးလှပါသည်။ သို့ရာတွင် JavaFX ၏ Drag And Drop သည် လွယ်ကူစွာရေးသားနိုင်ပါသည်။
• CSS
  
  
  
  CSS ဖြင့် HTML ၏ အမြင်ပိုင်းဆိုင်ရာ Style အား ပြောင်းလည်းရာတွင် အသုံးပြုသကဲ့သို့ပင် JavaFX တွင်လည်း CSS အားအသုံးပြုနိုင်ပါသည်။ CSS အား အသုံးပြုရာတွင် ပြင်ပ External File အား ထည့်သွင်း အသုံးပြုနိုင်သကဲ့သို့၊ Node တစ်ခုချင်းစီတွင်လည်း သီးခြားသတ်မှတ် အသုံးပြုနိုင်ပါသည်။
  
  Node တစ်ခုချင်းစီ၏ Style အား သတ်မှတ်ရာတွင် Node#setStyle လုပ်ဆောင်ချက်အား အသုံးပြုနိုင်ပါသည်။ သတိပြုရန်မှာ -fx-အား သတ်မှတ်လိုသည့် Style ၏ ရှေ့တွင် ဖြည့်စွက်ရေးသားရန် လိုအပ်ခြင်း ဖြစ်ပါသည်။

    Button button = new Button("Style");
    button.setStyle("-fx-font-size:30pt; -fx-font-weight:bold;");
  

• ပုံစံပြောင်းခြင်း(Transformation)
  
  
  
  Node များအား ပုံစံပြောင်းရာတွင် Size ၏ အကြီးအသေး၊ နေရာများအား ရွှေ့ပစ်ခြင်း၊ Rotation ပြုလုပ်ခြင်း အစရှိသည်တို့ကို ပြုလုပ်နိုင်ပါသည်။ 
  
  Java FX ၌ ပုံစံများအား ပြောင်းလည်းရာတွင် X, Y နှင့် Rotation များကို သတ်မှတ်နိုင်သော Affine နည်းလမ်းကိုလည်း အသုံးပြုနိုင်ပါသည်။ လွယ်ကူသော ပြောင်းလည်းခြင်း ဆိုပါက setScaleX နှင့် setScaleY အစရှိသည့် လုပ်ဆောင်ချက်များကို အသုံးပြုသင့်ပြီး၊ ခက်ခဲသော ပြောင်းလည်းမှု့၊ ရှုပ်ထွေးသော ပြောင်းလည်းမှု့ဆိုပါက Affine နည်းလမ်းကို အသုံးပြုသင့်ပါသည်။ Affineပြောင်းလည်းနည်းအား နောက်ရက်များတွင် သီးသန့် ဖော်ပြသွားပါဦးမည်။
• Effect လုပ်ဆောင်ချက်များ
  
  
  
  Node များအား Drop Shadow ပြုလုပ်ခြင်း၊ Blur လုပ်ခြင်း၊ Reflect လုပ်ခြင်း အစရှိသော Effect များကို ပြုလုပ်နိုင်ပါသည်။ ဤသို့ပြုလုပ်ရာတွင် Node#setEffect လုပ်ဆောင်ချက်ကို အသုံးပြုနိုင်ပြီး Parameter အနေဖြင့် Effect Object အား အသုံးပြုရပါမည်။
  
  အထက်ပါ မမှုနာတွင် Drop Shadow အား အသုံးပြုရန် DropShadow Object အား အသုံးပြုရပြီး၊ Blur အတွက်မှာမှု၊ BoxBlur, MotionBlur နှင့် GaussianBlur တို့အား အသုံးပြုရပါမည်။
  
  Reflection အတွက်မှာမူ Reflection Class အား အသုံးပြုရပါသည်။ ဖော်ပြပါ နမှုနာအတွက် ရေးသားထားသော Code များမှာ အောက်ပါအတိုင်း ဖြစ်ပါသည်၊
  
  

  package com.dtc.fx.control;
  
  import javafx.application.Application;
  import javafx.geometry.Insets;
  import javafx.scene.Scene;
  import javafx.scene.control.Label;
  import javafx.scene.effect.BoxBlur;
  import javafx.scene.effect.DropShadow;
  import javafx.scene.effect.GaussianBlur;
  import javafx.scene.effect.MotionBlur;
  import javafx.scene.effect.Reflection;
  import javafx.scene.layout.VBox;
  import javafx.scene.paint.Color;
  import javafx.stage.Stage;
  
  public class EffectSample extends Application {
  
      @Override
      public void start(Stage stage) throws Exception {
          VBox box = new VBox();
          box.setPadding(new Insets(20));
          box.setSpacing(10);
  
          Label shadowLabel = new Label("Drop Shadow");
          shadowLabel.setEffect(new DropShadow(5, 2, 3, Color.GRAY));
          box.getChildren().add(shadowLabel);
  
          Label boxBlur = new Label("Box Blur");
          boxBlur.setEffect(new BoxBlur(3, 3, 1));
          box.getChildren().add(boxBlur);
  
          Label motionBlur = new Label("Motion Blur");
          motionBlur.setEffect(new MotionBlur(0.5, 3.0));
          box.getChildren().add(motionBlur);
  
          Label gaussian = new Label("Gaussian Blur");
          gaussian.setEffect(new GaussianBlur(5.5));
          box.getChildren().add(gaussian);
  
          Label dropReflection = new Label("Reflection");
          dropReflection.setEffect(new Reflection(0, 10, 0.9, 400));
          box.getChildren().add(dropReflection);
  
          stage.setScene(new Scene(box));
          stage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  

General Types of Controls

Input Output အဖြစ် အသုံးဝင်သော Control များ

Control	ရှင်းလင်းချက်
Label	Text များအား Output အနေဖြင့် အသုံးပြုရာတွင် အသုံးပြုနိုင်ပါသည်။ JLabel များကဲ့သို့ပင် Label ၏ Text များအားလည်း Edit လုပ်၍ မရနိုင်ပေ။ Text Result များအား Output အနေဖြင့် ဖော်ပြရာတွင်၎င်း၊ Label များအနေဖြင့် အသုံးပြုလိုသည့်အခါတွင်၎င်း အသုံးပြုနိုင်ပါသည်။
Text Field	Text များအား Input အနေဖြင့် လက်ခံရယူရာတွင် အသုံးပြုနိုင်ပါသည်။ User အားစာကြောင်း တစ်ကြောင်းတည်းကိုသာ ရေးသားစေလိုသည့် အခါမျိုးတွင် အသုံးပြုနိုင်ပါသည်။
Password Field	အသုံးပြုသူထံမှ Password အား ရယူရာတွင် အသုံးပြုနိုင်သော Control ဖြစ်ပါသည်။ Input Form များ ရေးသားရာတွင် အသုံးပြုနိုင်ပါသည်။
Choice Box	အသုံးပြုသူအား၊ အချက်အလက် အနည်းငယ်အတွင်းမှ အချို့ကို ရွေးချယ်စေလိုသည့် အခါမျိုးတွင် အသုံးပြုနိုင်သော Control တစ်မျိုး ဖြစ်ပါသည်။
Combo Box	ComboBoxBase Abstract Class အား implement လုပ်ထားသော Class ဖြစ်ပြီး၊ Input Form များတွင် အသုံးများသော Select One Combo Box အဖြစ် အသုံးပြုနိုင်ပါသည်။
Tooltip	Tooltip သည် UI Element များ၏ Common Element တစ်မျိုးဖြစ်ပြီး၊ မည်သည့် Element များမှာ မဆို သတ်မှတ်အသုံးပြုနိုင်ပါသည်။ JavaFX တွင် အသုံးပြုသော Tooltip များသည် Popup အား Implement လုပ်ထားသော Element တစ်မျိုးဖြစ်ပါသည်။
HTML Editor	အသုံးပြုသူက Text များအား Edit လုပ်ရာတွင်၎င်း၊ ၎င်း Text များ၏ Style အား ဖော်ပြရာတွင်၎င်း အသုံးပြုနိုင်သော Editor တစ်မျိုးဖြစ်ပါသည်။ HTMLEditor သည် Control တစ်မျိုးဖြစ်သော်လည်း javafx.scene.web ၏ အောက်တွင် တည်ရှိပါသည်။

Button အဖြစ် အသုံးဝင်သော Control များ

Control	ရှင်းလင်းချက်
Button	Button အဖြစ် အသုံးပြုနိုင်သော Control တစ်မျိုးဖြစ်ပါသည်။ Button ပေါ်တွင် String များကို သော်၎င်း၊ Image များကိုသော်၎င်း ဖော်ပြအသုံးပြုနိုင်ပါသည်။
ToggleButton	ToogleButton သည် ထူးခြားသော Control တစ်မျိုးဖြစ်ပြီး၊ Button များအား အုပ်စုဖွဲ့ကာ ၎င်းအတွင်းမှ တစ်ခုအား ရွေးချယ်ရာတွင် အသုံးပြုနိုင်ပါသည်။
RadioButton	Items များအား အစုအစည်းလိုက် ဖော်ပြ၍၊ တစ်ခုအား Radio Button အနေဖြင့် ရွေးချယ်စေရာတွင် အသုံးပြုနိုင်သော Control တစ်မျိုး ဖြစ်ပါသည်။ Input Form များအား ရေးသားရာတွင်၎င်း၊ Event များကို ဖြစ်ပေါ်စေသော Controls အနေဖြင့်၎င်း အသုံးပြုနိုင်ပါသည်။
CheckBox	CheckBox သည် ButtonBase Class အား extends လုပ်သားသော Control တစ်မျိုး ဖြစ်ပြီး State ၃မျိုးအား ခွဲခြား သတ်မှတ်အသုံးပြုရာတွင် အသုံးပြုနိုင်ပါသည်။ အသုံးပြုနိုင်သော State များမှာ အောက်ပါအတိုင်း ဖြစ်ကြ၏။ checked : indeterminate = false; checked = true unchecked : indeterminate = false; checked = false undefined : indeterminate = true
Hyperlink	HTML တွင် အသုံးပြုသော link များကဲ့သို့သော Text Label များဖြစ်ကြပြီး၊ Rollover ပေါ်တွင်၎င်း၊ click များတွင်၎င်း Event များကို ဖြစ်ပေါ်စေပါသည်။

အခြားသော Control များ

Control	ရှင်းလင်းချက်
List View	ListView သည် Items များအား List အနေဖြင့် ဖော်ပြနိုင်ပြီး၊ အသုံးပြုသူက ၎င်း Items များအတွင်းမှ ရွေးချယ်စေလိုသည့် အခါမျိုးတွင် အသုံးပြုနိုင်ပါသည်။ List View သည် Generics Type အား အသုံးပြုထားပြီး List  အတွင်းတွင် အသုံးပြုမည့် အချက်အလက်များ၏ Type များအား ကြိုတင် သတ်မှတ်ပေးနိုင်ပါသည်။
Table View	TableView သည် အချက်အလက်များအား Table အဖြစ်ဖော်ပြရာတွင် အသုံးပြုနိုင်သော Controls တစ်မျိုး ဖြစ်ပါသည်။
Tree View	Itemsများအား Tree Structure အနေဖြင့် ဖော်ပြလိုသည့်အခါမျိုးတွင် အသုံးပြုနိုင်သော Control တစ်မျိုး ဖြစ်ပါသည်။
Scroll Bar	UI Pane များအား Scroll ပြုလုပ်စေလိုသည့် အခါတွင် အသုံးပြုရသော Control ဖြစ်ပြီး၊ အလျားလိုက်သော်၎င်း ဒေါင်လိုက်သော်၎င်း Scroll ပြုလုပ်စေနိုင်ပါသည်။
Pagination Control	Pagination Control သည် Content တစ်ခုအား အစိတ်စိတ်အပိုင်းပိုင်း ခွဲ၍ တစ်ခုချင်း ဖော်ပြလိုသည့်အခါတွင် Navigation အနေဖြင့် အသုံးပြုနိုင်သော Control  တစ်ခု ဖြစ်ပါသည်။
Scroll Pane	ScrollPane သည် Control တစ်မျိုးဖြစ်ပြီး၊ Scroll ပြုလုပ်နိုင်သော Content များကို ဖော်ပြပေးနိုင်ပါသည်။
TitledPane	TitledPane သည် ခေါင်းစဉ်ကိုပိုင်ဆိုင်သော Container တစ်မျိုးဖြစ်ပါသည်။ ခေါင်းစဉ်များကို ခလုပ်နှိပ်၍ ဖွင့်နိုင် ပိတ်နိုင် ပါသည်။
Accordion	TitledPane များအား စုစည်းထားသော Container တစ်မျိုးဖြစ်ပါသည်။
Menu	Action များအား ဖြစ်ပွားစေသော Menu Items များအား စုစည်းထားသော Popup Menu တစ်မျိုးဖြစ်သည်။ User Action အပေါ်တွင်မှုတည်၍ ရွေးချယ်ထားသော Menu Action အား ဖြစ်ပွားစေရာတွင် အသုံးပြုနိုင်ပါသည်။ GUI Menu များ၊ Popup Menu များအဖြစ် အသုံးများပါသည်။
Separator	Menu Item များ၊ Menu များအား တစ်ခုနှင့်တစ်ခု ခြားထားသည့်အခါ တွင် အသုံးပြုနိုင်ပါသည်။ ခွဲခြားရာတွင် ဒေါင်လိုက်သော်၎င်း၊  အလျားလိုက်သော်၎င်း အသုံးပြုနိုင်ပါသည်။
Color Picker	ColorPicker သည် အသုံးပြုသူအား Color Palate အတွင်းမှ တစ်ခုကို ရွေးချယ်အသုံးပြုစေရာတွင် အသုံးပြုနိုင်သော Control တစ်မျိုးဖြစ်ပါသည်။
File Chooser	System အတွင်းရှိ File Directory များအား ဖွင့်လှစ် ရွေးချယ်နိုင်သော Dialog တစ်မျိုးဖြစ်ပါသည်။
Slider	Slider သည် Numeric တန်ဖိုး တစ်ခုအား Range တစ်ခုအတွင်းမှ Slide လုပ်၍ ရွေးချယ်စေနိုင်သော Control တစ်မျိုး ဖြစ်ပါသည်။
Progress Bar	အလျားလိုက် တိုးတက်မှု့ အခြေအနေကို ဖော်ပြပေးနိုင်သော Progress Indicator တစ်မျိုး ဖြစ်ပါသည်။
Progress Indicator	စက်ဝိုင်းပုံစံဖြင့် တိုးတက်မှု့ အခြေအနေကို ဖော်ပြပေးနိုင်သော Control တစ်မျိုးဖြစ်ပါသည်။ Task တစ်ခုခုသည် အလုပ်လုပ်နေဆဲဟု ဖော်ပြလိုသည့်အခါ မျိုးတွင် အသုံးပြုနိုင်ပါသည်။

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

မင်းလွင်