ともさんのHP >プロブラミング >JavaFX >fxmlファイルの利用

JavaFX、fxmlファイルの利用

SwingではFrameのボタンやテキストフィールドを配置するのにかなりの煩わしさがありましたが、FXではこの部分をfxmlファイルで記述し、 シーンビルダーを利用して配置することが出来るようになりました。
Fxmlファイルを利用したサンプルプログラムを紹介します。
fxmlファイルを利用してコンポーネントを配置するサンプルプログラム

広告


fxmlファイルを読み込んで表示するFXアプリケーション

"FxmlTest.fxml"を読み込む場合、Paneとして取り込めばOK。
Paneの種類はシーンビルダーで変更できる。

package tomojavalib.fx;

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

public class FxmlTest extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
@Override
public void start(Stage stage) throws Exception {
 AnchorPane pane = (AnchorPane)FXMLLoader.load(getClass().getResource("FxmlTest.fxml"));
 Scene scene = new Scene( pane , 340 , 240 );
 stage.setScene(scene);
 stage.show();
}
 
}

"FxmlTest.fxml"の内容。SceneBuilderで自動作成しています。

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tomojavalib.fx.FxmlEvent">
   <children>
      <GridPane prefHeight="200.0" prefWidth="300.0">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <AnchorPane>
               <children>
                  <Vbox prefHeight="200.0" prefWidth="300.0">
                     <children>
                        <Button fx:id="btn1" alignment="CENTER" mnemonicParsing="false" onAction="#onButtonClicked" prefHeight="0.0" prefWidth="150.0" text="テストボタン楽天 " textAlignment="CENTER" translateX="10.0" translateY="10.0">
                           <Vbox.margin>
                              <Insets />
                           </Vbox.margin>
                        </Button>
                        <TextField prefHeight="43.0" prefWidth="300.0" translateY="100.0" />
                     </children></Vbox>
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</AnchorPane>


イベントを紐付けする

イベント処理用のClassを作成して紐付けするコントロールと処理メソッドを記述します。
下の例ではボタンを"btn1"、クリックされたときのメソッドを"onButtonClicked"と定義しています。

package tomojavalib.fx;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class FxmlEvent {

@FXML private Button btn1;
@FXML public void onButtonClicked(ActionEvent event) {
 this.btn1.setText("clicked!" );
}

}

次に、シーンビルダー内で、classとの紐付けをします。
下の図では左から順に、紐付けするClass、ボタンのID、ボタンをクリックしたときに対応するメソッドを記入しています。
シーンビルダー設定


拡張コントロールをシーンビルダーで扱う

テキストフィールドやボタンなどを拡張したコントロールを配置したい場合、そのままではシーンビルダーで配置することができません。
拡張コントロールを実装したjarファイルを作成し、登録すれば扱えるようになります...面倒ですね。
登録するメニューは下の図の位置にあります。
シーンビルダーjarファイル登録


シーンビルダーでは扱えなくなりますが、一旦標準のコントロールを配置して、そのあと自作の拡張コントロールに差し替えることもできます。
TextFieldを拡張したTTextFieldを扱う場合。まず、インポート文を追加します。

<?import tomojavalib.fx.TTextField?>

次にTextFieldをTTextFieldに書き換え。

<TTextField prefHeight="43.0" prefWidth="300.0" translateY="100.0" />

書き換え後のFXML文

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import tomojavalib.fx.TTextField?>

<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tomojavalib.fx.FxmlEvent">
   <children>
      <GridPane prefHeight="200.0" prefWidth="300.0">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <AnchorPane>
               <children>
                  <VBox prefHeight="200.0" prefWidth="300.0">
                     <children>
                        <Button fx:id="btn1" alignment="CENTER" mnemonicParsing="false" onAction="#onButtonClicked" prefHeight="0.0" prefWidth="150.0" text="テストボタン" textAlignment="CENTER" translateX="10.0" translateY="10.0">
                           <VBox.margin>
                              <Insets />
                           </VBox.margin>
                        </Button>
                        <TTextField prefHeight="43.0" prefWidth="300.0" translateY="100.0" />
                     </children></VBox>
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</AnchorPane>

最終更新日: 2017-04-27 08:38:44

ともさんのHP >プロブラミング >JavaFX >fxmlファイルの利用

このエントリーをはてなブックマークに追加
新着ページ

ペットボトルを利用したスズメバチホイホイ  
シャガの栽培、手入れ、増やしかた  
自動水やり器の自作  
テキスタイルプリントでキャスケット  
竹を曲げる方法  
アサガオ、F2の特性  
日本ミツバチ巣箱の検討  
柿の枝の剪定方法  
オモトの植え替え  
テーブルソーの安全な使いかた  
初心者用巣箱その1  

他のサイト

3D-CAD
洋裁CAD

いいねなど

 RSS 

Author: Tomoyuki Ito

このサイトの文章・写真の無断転載を禁じます