Day 2 Scene Graph and FXML

Day 1 ဖြင့် JavaFX ကို ရေးသားရန် ပတ်ဝင်းကျင်ပြင်ဆင်မှု့ အကြောင်းကို ရေးသားခဲ့ပါသည်။ Drug And Drop ကို အသုံးပြုကာ Visually GUI တွေကို ပြုပြင်ရေးသားနိုင်ကြောင်း ဖော်ပြခဲ့၏။ ဒီနေ့မှာတော့ အသုံးပြုမယ့် JavaFX ၏ အကြောင်းကို ဖော်ပြပြီး JavaFX ကို အသုံးပြုရာတွင် မရှိမဖြစ်လိုအပ်သော Scene Graph နှင့် FXML တို့အကြောင်းကို လေ့လာသွားပါဦးမည်။

၂၀၁၂ခု ၈လပိုင်းအရောက်တွင် Java SE 7u6 ကို Release လုပ်ခဲ့ပြီး JavaFX 2.2 ကိုလည်း Release လုပ်ခဲ့ပါသည်။ JavaFX 2.2 သည် Java SE 7 ၏ အစိတ်အပိုင်းတစ်ခု ဖြစ်လာပြီး၊ Java SE ကို Install လုပ်ပါက JavaFX SDK သည်လည်း တစ်ခါတည်း ပါဝင်လာပါသည်။ JavaFX 2.2 သည် Widows နှင့် Mac OS X တွင်သာမက Linuxအပေါ်မှာပါအသုံးပြုလာနိုင်သလို၊ Multi Touch နှင့် Bitmap Support အစရှိသော Function အသစ်များကိုလည်း ဖြည့်စွက်လာပါသည်။

တဖန် JavaFX 2.2 နှင့် အတူ Release လုပ်လာသည်မှာ FXML အား Visually Edit လုပ်နိုင်သော JavaFX Scene Builder ဖြစ်ပါသည်။ Scene Builder ကိုမှု သီးခြား Download လုပ်၍ Install လုပ်ရန် လိုအပ်ပါသည်။

Scene Graph

Scene Graph ဆိုသည်မှာ ကွန်ပျူတာဖန်သားပြင်ပေါ်တွင် ဖော်ပြလိုသည့် Elements များအား Graph အနေနှင့် ဖော်ပြထားခြင်း ဖြစ်ပါသည်။ Graph ဟု ခေါ်ဆိုသော်လည်း Line Graph, Ball Graph များကဲ့သို့ Graph မျိုးမဟုတ်ပဲ Graph Theory ကို အသုံးပြုထားသော Graph မျိုးဖြစ်၏။

Graph Theory ဟု ခေါ်ဆိုသောကြောင့် ခက်ခဲသယောင်ရှိသော်လည်း၊ လက်တွေ့မှာမူ Tree Structure ကို ဖော်ပြနိုင်သော Graph တစ်မျိုးသာ ဖြစ်၏။ မှုရင်းစာလုံးမှာ 3D CG တွင် အသုံးပြုသော စကားလုံးတစ်မျိုး ဖြစ်ပြီး၊ CG Scene တွင်ပါဝင်ဖွဲ့စည်းထားသော Element များအား ဖော်ပြနိုင်သောကြောင့် Scene Graph ဟု ခေါ်ဆိုခြင်း ဖြစ်သည်။

အလားတူပင် JavaFX တွင်လည်း ဖော်ပြရန် လိုအပ်သည့် Element များအား Tree ဖွဲ့စည်းပုံဖြင့် ဖော်ပြသောကြောင့် Scene Graph ဟု ခေါ်ဆိုခြင်း ဖြစ်ပါသည်။ ထို့ကြောင့် Scene ၏ Root အား javafx.scene.Scene Class ဖြင့် ကိုယ်စားပြု အသုံးပြုလေ့ရှိပါသည်။

အထက်ပါ Login Form အား ကြည့်ပါ။ Name ဟုရေးသားထားသော Label တစ်ခု၊ TextField တစ်ခု၊ Password ဟု ရေးသားထားသော Label တစ်ခု၊ PasswordField တစ်ခုနှင့် Button နှစ်ခုတို့ ပါဝင်ကြပါသည်။ ၎င်းတို့၏ ဖွဲ့စည်းပုံမှာ AnchorPane တစ်ခု အတွင်းတွင် VBox ကို ထည့်ထားပြီး၊ ၎င်း၏ အတွင်းတွင် AnchorPane သုံးခုကို ထပ်မံ ဖြည့်စွက်ထားပါသည်။ အပေါ်ဆုံး AnchorPane အတွင်းတွင် Label တစ်ခုနှင့် TextField တစ်ခု၊ အလယ်ရှိ AnchorPane အတွင်းတွင် Label နှင့် PasswordField တစ်ခုနှင့် အောက်ဆုံးရှိ AnchorPane အတွင်းတွင် Button နှစ်ခုကို ဖြည့်စွက်ထား၏။

Tree ပုံစံနှင့် ကြည့်မည် ဆိုပါက၊ အောက်ပါအတိုင်း ဖော်ပြနိုင်မည် ဖြစ်ပါသည်။

Component များ၏အမည်များသာ ပြောင်းလည်းသွားခြင်း ဖြစ်သည်။ ယနေ့တိုင် အသုံးပြုခဲ့သော Swing တွင်လည်း ဤကဲ့သို့ ရေးသားခဲ့ကြပါသည်။ JavaFX တွင်လည်း GUI ၏ဖွဲ့စည်းပုံအား Swing ကဲ့သို့ Java ဖြင့် ရေးသားနိုင်ပါသည်။ သို့ပါသော်လည်း Java ဖြင့် ရေးသားပါက ဖွဲ့စည်းပုံမှာ နားလည်ရ ခက်ခဲပါသည်။ JavaFX တွင် GUI ဖွဲ့စည်းပုံအား ဖော်ပြရန် FXML ကို ပြင်ဆင်လာခဲ့သည်။ ဤဘလောဂ်တွင် FXML အား အသုံးပြု၍ ဖော်ပြသွားမည် ဖြစ်ပါသည်။

FXML ဖြင့် SceneGraph အား ရေးသားခြင်း

FXML သည် GUI ၏ဖွဲ့စည်းပုံအားဖော်ပြရန် အသုံးပြုသော XML ဖိုင်တစ်မျိုးဖြစ်၏။ FXML တွင် Schema ကို သတ်မှတ်ထားခြင်း မရှိပဲ၊ JavaFX ၏ UI Component Class များကို Element အနေဖြင့် ရေးသားနိုင်၏။ ၎င်း Class ၏ Fields များအားလည်း Element ၏ Attributes များအနေဖြင့် သတ်မှတ် ရေးသားနိုင်ပါသည်။ ရေးသားနိုင်သော Component များမှာ အောက်ပါအတိုင်း ဖြစ်ကြ၏။

• Controls
  Swing ၏ JComponent ကဲ့သို့သော Component များဖြစ်ကြပြီး၊ javafx.scene.control.Control ၏ Sub Class များ ဖြစ်ကြ၏။ အသုံးပြုပုံမှာ Swing ၏ JComponent များနှင့် သိပ်ပြီး ကွာခြားခြင်း မရှိပါ။ သို့ရာတွင် Swing တွင် မပါဝင်သော Accordion နှင့် TableView ကဲ့သို့သော Swing ၏ အသုံးပြုပုံနှင့် မတူညီသော Component များလည်း ပါရှိပါသဖြင့် အသုံးပြုရာတွင် ကရုပြုသင့်ပါသည်။
• Region
  JavaFX ၏ Container ဟု ခေါ်ဆိုသော Component များဖြစ်ကြပြီး၊ UI Component များအား စုစည်းဖော်ပြရာတွင် အသုံးပြုပါသည်။ အဆိုပါ Class များသည် javafx.scene.layout.Region ၏ Sub Class များဖြစ်ကြသည်။ Region များသည် UI Component များအား Child အနေဖြင့် ပိုင်ဆိုင်ရုံသာမက ၎င်းတို့၏ Layout များကိုပါ သတ်မှတ်ပေးနိုင်ပါသည်။ Swing တွင် Container ၏ layout များအား သတ်မှတ်ရာတွင် Layout Class များအား အသုံးပြုသော်လည်း၊ JavaFX တွင်မှု Layout အသီးသီးအား Region ၏ Sub Class များအနေဖြင့် ရေးသား အသုံးပြုပါသည်။ ဥပမာအားဖြင့် VBox သည် Component များအား ဒေါင်လိုက် စီစဉ်နေရာချရာတွင် အသုံးပြုနိုင်ပါသည်။
• Shape
  Swing တွင် Component နှင့် Container များသာ အသုံးပြုနိုင်ခဲ့သော်လည်း JavaFX တွင်မှု အခြားသော Element များကိုလည်း အသုံးပြုလာနိုင်ခဲ့ပါသည်။ ဥပမာအားဖြင့် စက်ဝိုင်း၊ စတုဂံ၊ တြိဂံ အစရှိသော ပုံရိပ်များကိုလည်း အသုံးပြုလာနိုင်သည်။ ၎င်းတို့သည် javafx.scene.shape.Shape ၏ Sub Class များ အနေဖြင့် တည်ရှိကြပါသည်။ ယနေ့တိုင် Java တွင် အဆိုပါ ပုံရိပ်များအား အသုံးပြုရန် Java 2D ကို အသုံးပြုရန် လိုအပ်သောကြောင့် Swing တွင် အသုံးပြုရန်မှာ ခက်ခဲခဲ့ပါသည်။ JavaFX ၏ Shape ရော Control များပါ Node ၏ Sub Class များဖြစ်ကြသောကြောင့် အခြားသော Component များနှင့် တူညီစွာ အသုံးပြုနိုင်ပါသည်။
• Chart
  Line Graph ၊ Ball Graph အစရှိသည့် Graph ပုံများသည် Chat များဖြစ်ကြပြီး၊ javafx.scene.chart.Chart Sub Class များဖြစ်ကြသည်။ Business GUI Application များအား ရေးသားရာတွင် Chart များကို မကြာမကြာ အသုံးပြုရတတ်ပါသည်။ Swing ဖြင့် ရေးသားရာတွင် JFreeChart ကဲ့သို့သော Library အား အသုံးပြုရန် လိုအပ်ခဲ့သော်လည်း JavaFX ကို အသုံးပြုပါက Standard Component အနေဖြင့် အသုံးပြုနိုင်မည် ဖြစ်ပါသည်။
• Browser
  JavaFX ၏ Function များအတွင်းတွင် Embedded Browser သည် လွန်စွာအသုံးဝင်သော Function တစ်မျိုးဖြစ်ပါသည်။ ၎င်းသည် javafx.scene.web.WebView Class ဖြင့် ကိုယ်စားပြု အသုံးပြုပါသည်။ Chrome နှင့် Safari တို့တွင် အသုံးပြုနေသော webkit Engine ကို အခြေခံထားပါသည်။ ထို့ကြောင့် HTML5 အား အသုံးပြုနိုင်ပြီး Canvas အစရှိသည်တို့ကိုလည်း အသုံးပြုနိုင်ပါသည်။
• Media Player
  Movie, MP3 အစရှိသည့် Media များအား ဖော်ပြရန် အသုံးပြုနိုင်သည်မှာ javafx.scene.media.MediaView Class ဖြစ်ပါသည်။ MediaView သည် MediaPlayer ၏ View ပိုင်းဆိုင်ရာ ဖော်ပြရာတွင် အသုံးပြုသော Class ဖြစ်ပါသည်။ Media Player အားကိုယ်စားပြုသည်မှာ javafx.scene.media.MediaPlayer Class ဖြစ်ပါသည်။
• Bitmap
  Image များအား ဖော်ပြရာတွင် အသုံးပြုသည့် Class မှာ javafx.scene.image.ImageView ဖြစ်ပြီး၊ Bitmap အား တိုက်ရိုက်အသုံးပြုနိုင်သည်မှာ javafx.scene.canvas.Canvas ဖြစ်၏။

Eclipse ဖြင့် FXML အား ရေးသာရန် File > New > Other ဖြင့် New Window အား ဖွင့်ကာ New FXML Document Wizard ကို ရွေးချယ်၍ ရေးသားနိုင်ပါသည်။

အလိုအလျှောက် Create လုပ်ပေးသော ဖိုင်မှာ အောက်ပါအတိုင်း ဖြစ်ပါသည်။

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml">
 <!-- TODO Add Nodes -->
</AnchorPane>

အဆိုပါ ဖိုင်အား JavaFX Scene Builder အသုံးပြု၍ ပြုပြင် ရေးသားကြည့်ပါမည်။ ရေးသားထားသော FXML ဖိုင်အား Right Click ထောက်၍ Open With SceceBuilder ကို ရွေးကာ SceneBuilder ဖြင့် ဖွင့်ပါမည်။  ပြီးပါက အောက်ပါအတိုင်း URL Label နှင့် TextField တစ်ခု၊ Button တစ်ခုနှင့် WebView တစ်ခုအား Drug And Drop လုပ်ကာ နေရာချပါမည်။

Eclipse အပေါ်ရှိ Project အား Refresh လုပ်ကြည့်ပါက FXML သည် အောက်ပါအတိုင်း ပြောင်းလည်းသွားသည်ကို တွေ့ရပါမည်။

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.web.*?>

<AnchorPane prefHeight="444.0" prefWidth="636.0" 
 xmlns:fx="http://javafx.com/fxml">
  <!-- TODO Add Nodes -->
  <children>
    <Label layoutX="14.0" layoutY="14.0" text="URL" />
    <TextField layoutX="61.0" layoutY="11.0" prefWidth="443.0" />
    <Button layoutX="517.0" layoutY="12.0" 
     mnemonicParsing="false" text="Browse" />
    <WebView layoutX="14.0" layoutY="47.0" prefHeight="383.0" 
     prefWidth="608.0" />
  </children>
</AnchorPane>

ပြီးပါက Java Class အတွင်းမှ ခေါ်သုံးကြည့်ပါဦးမည်။

 

package com.dtc.hello;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class EasyBrowser extends Application {

 @Override
 public void start(Stage stage) throws Exception {
  Parent root = FXMLLoader.load(getClass().getResource("Hello.fxml"));
  Scene scene = new Scene(root);
  stage.setTitle("Easy Browser");
  stage.setScene(scene);
  stage.show();
 }

 public static void main(String[] args) {
  launch(args);
 }
}

အထက်ပါအတိုင်း ရေးသားထားသော FXML ဖိုင်အား Load လုပ်၍ Stage ပေါ်တွင် ဖော်ပြလိုက်ပါက ရေးသားထားသော GUI အားဖော်ပြနိုင်မည် ဖြစ်ပါသည်။

FXML နှင့် Java အား ပူတွဲရေးသားခြင်း

အထက်တွင် SceneGraph ၏ UI Component များအား ရေးသားရာအခန်းကို ဖော်ပြခဲ့၏။ သို့ရာတွင် Application တစ်ခုသည် UI ကို ဖော်ပြရုံနှင့် ပြီးသည်မဟုတ်။ MVC Framework အနေဖြင့် Model နှင့် ပူးတွဲအသုံးပြုသည့်အခါများ Event များအား အလုပ်လုပ်ပေးရန် လိုအပ်ပါသည်။ FXML ဖြင့် ရေးသားထားသော Node များအား Java ဖြင့် ဆက်သွယ်နိုင်ရန် လိုအပ်ပါသည်။ ၎င်း Class သည် Controller Class ဖြစ်ပါသည်။ FXML ဖြင့် ရေးသားထားသော View နှင့် Controller Class အား ဆက်သွယ်၍ အသုံးပြုကြည့်ပါဦးမည်။

Scene Builder ဖြင့် AnchorPane အား ရွေးချယ်ပြီး၊ ၎င်းအား Controller Class ဖြင့် ဆက်သွယ်ပါမည်။

အထက်ဖော်ပြပါအတိုင်း Code ၏ Controller Class နေရာတွင် အသုံးပြုမည့် Controller Class အား ဖြည့်စွက်ရေးသားပါမည်။ ပြီးပါက TextField နှင့် WebView တို့တွင်လည်း အသီးသီး fx:id ကို ဖြည့်စွက်ရေးသားပါမည်။ နောက်ဆုံးတွင် အောက်ပါအတိုင်း Button ၏ On Action တွင် ခေါ်ယူမည့် Method Name အား ဖြည့်စွက်ပါမည်။

အလိုအလျှောက် ရေးသားပေးသော XML မှာ အောက်ပါအတိုင်း ဖြစ်ပါသည်။

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.web.*?>

<AnchorPane prefHeight="444.0" prefWidth="636.0" 
 xmlns:fx="http://javafx.com/fxml" 
 fx:controller="com.dtc.hello.BrowserController">

  <children>
    <Label layoutX="14.0" layoutY="14.0" text="URL" />
    <TextField fx:id="url" layoutX="61.0" 
     layoutY="11.0" prefWidth="443.0" />
    <Button layoutX="517.0" layoutY="12.0" 
     mnemonicParsing="false" onAction="#browse" text="Browse" />
    <WebView fx:id="browser" layoutX="14.0" layoutY="47.0" 
     prefHeight="383.0" prefWidth="608.0" />
  </children>
</AnchorPane>

နောက်ဆုံးတွင် အသုံးပြုမည့် Controller Class အား ရေးသားပါမည်။ အမည်မှာ FXML တွင် ရေးသားထားသည့် com.dtc.hello.BrowserController ဖြစ်ပြီး၊ ၎င်းတွင် Member အနေဖြင့် url အမည်ရှိ TextField တစ်ခုနှင့် browser အမည်ရှိ WebView တစ်ခုပါဝင်ပါသည်။ Action Method တစ်ခုဖြစ်သော browse ကို ရေးသားထားပါသည်။

package com.dtc.hello;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.TextField;
import javafx.scene.web.WebView;

public class BrowserController {
 
 @FXML
 private TextField url;
 @FXML
 private WebView browser;

 @FXML
 public void browse(ActionEvent event) {
  this.browser.getEngine().load(this.url.getText());
 }
}

FXML တွင် ရေးသားထားသော Component များနှင့် Controller Class ရှိ Field များအား Bind လုပ်ရန်မှာ @FXML ဟု Anotation ကို ရေးသားရန် လိုအပ်ပြီး၊ Member ၏ အမည်မှာလည်း FXML တွင် ရေးသားထားသော id နှင့်လည်း တူညီရန် လိုအပ်ပါသည်။

Event Action Method ကို ရေးသားရန်လည်း @FXML anotation ကို ရေးသားရန် လိုအပ်ပါသည်။ Method အမည်မှာလည်း Button Node ၏ On Action တွင် ရေးသားထားသော Method အမည်နှင့် တူညီရန် လိုအပ်ပါသည်။ ၎င်း Method အတွင်းတွင် url TextField ၏ Text အားရယူ၍ browser ၏ Web Engine တွင် Load လုပ်ပေးရုံဖြင့် ရေးသားထားသော Web Page အား Browse လုပ်နိုင်မည် ဖြစ်ပါသည်။ နမှုနာအား Run ကြည့်ပါမည်။ အောက်ပါအတိုင်း Web Page အား Browse လုပ်နိုင်သည်ကို တွေ့ရပါသည်။

နောက်ဆုံးတွင်

JavaFXအပလီကေးရှင်းအား ရေးသားရာတွင် UI Component များအား Java ဖြင့်သော်၎င်း၊ FXML ၏ XML Code များအား တိုက်ရိုက်ရေးသား၍သော်၎င်း၊ FXML အား Scene Builder ကို အသုံးပြု၍သော်၎င်း ရေးသားနိုင်ပါသည်။ သို့ပါသော်လည်း အထက်တွင် ဖော်ပြထားသကဲ့သို့ FXML နှင့် Scene Builder အား အသုံးပြုပါက UI Component များအားလွယ်ကူစွာရေးသားနိုင်ပြီး၊ Controller Class များနှင့်လည်း လွယ်ကူစွာ Bind လုပ်နိုင်သည်ကို တွေ့ရပါသည်။ ထို့ကြောင့် နောက်ပိုင်းတွင် JavaFX Application များအား ရေးသားရာတွင် FXML နှင့် Scene Builder အား ပူးတွဲ အသုံးပြုသည့် နည်းလမ်းသည် အဓိက နည်းလမ်းတစ်ခု ဖြစ်လာမည်မှာ သေချာသလောက်ဖြစ်ပါသည်။ ဆက်လက်၍ ဖော်ပြသွားပါဦးမည်။

လေးစားစွာဖြင့်

မင်းလွင်