ともさんのHP >プロブラミング >JavaFX >各種Pane

JavaFXで使う各種Pane

各種Paneの単純な例文を作ってみました。SwingからFXに乗り換えのために勉強中ですが、覚書もかねて公開です。
いろいろ種類がありますが、普通に使うのはFlowPane、BorderPane、GridPaneくらいでしょうか。
TextFlowは、文章の中にボタンとかテキストフィールドを入れられるので目新しく感じました。入力フレームに使うと面白いと思います。

広告


FlowPane

FlowPaneは追加したノードを順に並べて配置してゆきます。
横に並べて、並べきれなくなったら下に並べてゆきます。

  FlowPane pane = new FlowPane();
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(10);
  Button b1 = new Button("ボタン楽天 1");
  Button b2 = new Button("ボタン2");
  pane.getChildren().addAll( b1 , b2 );

package tomojavalib.fx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class App6 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  FlowPane pane = new FlowPane();
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(10);
  Button b1 = new Button("ボタン1");
  Button b2 = new Button("ボタン2");
  pane.getChildren().addAll( b1 , b2 );
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFXFrowPane作例


TilePane

TilePaneはFlowPaneによく似ていて、違いがよくわからない。
FlowPaneと同様に、ノードを追加順に均等にならべてゆく。
デフォルトで横に並べるが、縦に並べることも出来る。

横配置

  TilePane pane = new TilePane();
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(10);
  pane.setVgap(10);
  pane.setPrefColumns(4);
  Button[] button = new Button[8];
  for (int i = 0; i < button.length; i++) {
   button[i] = new Button( "ボタン"+i );
   pane.getChildren().add( button[i] );
  } 

縦配置

  TilePane pane = new TilePane( Orientation.VERTICAL );
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(15);
  pane.setVgap(15);
  pane.setPrefRows(4);
  Button[] button = new Button[8];
  for (int i = 0; i < button.length; i++) {
   button[i] = new Button( "ボタン"+i );
   pane.getChildren().add( button[i] );
  } 

package tomojavalib.fx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/** TilePaneの例(横配置) */
public class App7 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  TilePane pane = new TilePane();
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(10);
  pane.setVgap(10);
  pane.setPrefColumns(4);
  Button[] button = new Button[8];
  for (int i = 0; i < button.length; i++) {
   button[i] = new Button( "ボタン"+i );
   pane.getChildren().add( button[i] );
  } 
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

package tomojavalib.fx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/** TilePaneの例(縦配置) */
public class App8 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  TilePane pane = new TilePane( Orientation.VERTICAL );
  pane.setPadding(new Insets(5, 5, 5, 5));
  pane.setHgap(15);
  pane.setVgap(15);
  pane.setPrefRows(4);
  Button[] button = new Button[8];
  for (int i = 0; i < button.length; i++) {
   button[i] = new Button( "ボタン"+i );
   pane.getChildren().add( button[i] );
  } 
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFX TilePaneの作例横 JavaFX TilePaneの作例縦


GridPane

GridPaneを使うと行と列を揃えてノードを配置できます。
下の例ではラベル(Text)とテキストフィールドを並べています。

  GridPane pane = new GridPane();
  //周囲の隙間
  pane.setPadding(new Insets(10, 10, 10, 10));
  //行の間の垂直方向の間隔の高さ
  pane.setVgap(5);
  //列間の水平方向の間隔の幅
  pane.setHgap(5);
  //ラベル貼り付け
  Text[] text = new Text[5];
  for(int i=0;i<text.length;i++){
   text[i] = new Text("入力" + i +" : ");
   pane.add(text[i], 0, i);
  }
  //テイストフィールド貼り付け
  TextField[] textf = new TextField[5];
  for(int i=0;i<text.length;i++){
   textf[i] = new TextField();
   textf[i].setPrefColumnCount(10);
   pane.add(textf[i], 1, i);
  }


広告


package tomojavalib.fx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.*;
import javafx.stage.Stage;
/**
 * いろいろなPaneのテスト
 * @author tomo
 *
 */
public class App4 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  GridPane pane = new GridPane();
  //周囲の隙間
  pane.setPadding(new Insets(10, 10, 10, 10));
  //行の間の垂直方向の間隔の高さ
  pane.setVgap(5);
  //列間の水平方向の間隔の幅
  pane.setHgap(5);
  //ラベル貼り付け
  Text[] text = new Text[5];
  for(int i=0;i<text.length;i++){
   text[i] = new Text("入力" + i +" : ");
   pane.add(text[i], 0, i);
  }
  //テイストフィールド貼り付け
  TextField[] textf = new TextField[5];
  for(int i=0;i<text.length;i++){
   textf[i] = new TextField();
   textf[i].setPrefColumnCount(10);
   pane.add(textf[i], 1, i);
  }

  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
GridPane


AnchorPane

AnchorPaneは追加した個々のノードの位置を指定して並べます。
下の例では2つのボタンを任意の位置に配置しています。

  AnchorPane pane = new AnchorPane();
  Button b1 = new Button("ボタン1");
  Button b2 = new Button("ボタン2");
  pane.getChildren().addAll( b1 , b2 );
  pane.setLeftAnchor(b1, 10.);
  pane.setTopAnchor(b1, 10.);
  pane.setRightAnchor(b2, 20.);
  pane.setBottomAnchor(b2, 20.);

package tomojavalib.fx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class App10 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  //StageにPaneとSceneを置く
  AnchorPane pane = new AnchorPane();
  Button b1 = new Button("ボタン1");
  Button b2 = new Button("ボタン2");
  pane.getChildren().addAll( b1 , b2 );
  pane.setLeftAnchor(b1, 10.);
  pane.setTopAnchor(b1, 10.);
  pane.setRightAnchor(b2, 20.);
  pane.setBottomAnchor(b2, 20.);
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFXAnchorPane作例


StackPane

複数のノードを重ねて配置できる。
下は2つのボタンコントロールを重ねた配置したもの。

  StackPane pane = new StackPane();
  Button btn1 = new Button("あ");
  Button btn2 = new Button("いうえお");
  pane.getChildren().addAll(btn2, btn1);

package tomojavalib.fx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
/**
 * いろいろなPaneのテスト
 * @author tomo
 *
 */
public class App4 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  StackPane pane = new StackPane();
  Button btn1 = new Button("あ");
  Button btn2 = new Button("いうえお");
  pane.getChildren().addAll(btn2, btn1);
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
StackPane


広告

BorderPane

BorderPaneは、上、下、左、右、中央の5つの領域でSceneを分割します。
下の例では分割した真ん中と中央の領域にそれぞれFlowPaneを割り当てています。
割り当てるのは別のPaneを使います。同じPaneを割り当てるのは不可。
こんなかんじでPaneの中にPaneを入れます。
BorderPane

  BorderPane pane = new BorderPane();
  FlowPane panec = new FlowPane();
  panec.setStyle("-fx-background-color: #87CEFA;");
  FlowPane panel = new FlowPane();
  panel.setStyle("-fx-background-color: #888888;");
  panel.setPrefWidth(50);
  pane.setLeft( panel );
  pane.setCenter( panec );

package tomojavalib.fx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.*;
import javafx.stage.Stage;
/**
 * いろいろなPaneのテスト
 * @author tomo
 *
 */
public class App5 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {

  BorderPane pane = new BorderPane();
  FlowPane panec = new FlowPane();
  panec.setStyle("-fx-background-color: #87CEFA;");
  FlowPane panel = new FlowPane();
  panel.setStyle("-fx-background-color: #888888;");
  panel.setPrefWidth(50);
  pane.setLeft( panel );
  pane.setCenter( panec );

  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFXBorderPane例文


TextFlow

リッチテキストを扱う特殊なPaneです。
テキストを順に並べ、必要なら改行を入れます。
下の例のように途中にボタンなども入れることができます。

  TextFlow pane = new TextFlow();
  Text t1 = new Text("テキストフロー試験");
  t1.setFont(Font.font("ゴシック", FontWeight.BOLD, 14));
  Button b1 = new Button("ボタン");
  Text t2 = new Text("ボタンを押してみてください");
  t2.setFont(Font.font("ゴシック", FontWeight.BOLD, 20));  
  pane.getChildren().add(t1);
  pane.getChildren().add(b1);
  pane.getChildren().add(t2);

package tomojavalib.fx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.scene.text.*;
import javafx.stage.Stage;

public class App11 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  TextFlow pane = new TextFlow();
  Text t1 = new Text("テキストフロー試験");
  t1.setFont(Font.font("ゴシック", FontWeight.BOLD, 14));
  Button b1 = new Button("ボタン");
  Text t2 = new Text("ボタンを押してみてください");
  t2.setFont(Font.font("ゴシック", FontWeight.BOLD, 20));  
  pane.getChildren().add(t1);
  pane.getChildren().add(b1);
  pane.getChildren().add(t2);
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFXTextFlow作例


広告

VboxとHbox

ノードを一列に並べます。Vboxは縦、Hboxは横に並べます。
下の例では図形を並べています。VboxをHboxに書き換えるだけで縦→横に変わります。

  Vbox pane = new Vbox(5);
  Rectangle   rect    = new Rectangle( 100 , 20 );
  Circle      circle  = new Circle( 20 );
  Ellipse     ellipse = new Ellipse( 50 , 20 );
  pane.getChildren().add(rect);
  pane.getChildren().add(circle);
  pane.getChildren().add(ellipse);

  Hbox pane = new Hbox(5);
  Rectangle   rect    = new Rectangle( 100 , 20 );
  Circle      circle  = new Circle( 20 );
  Ellipse     ellipse = new Ellipse( 50 , 20 );
  pane.getChildren().add(rect);
  pane.getChildren().add(circle);
  pane.getChildren().add(ellipse);

package tomojavalib.fx;

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

public class App12 extends Application {

 public static void main(String[] args) {
  Application.launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  Vbox pane = new Vbox(5);
  Rectangle   rect    = new Rectangle( 100 , 20 );
  Circle      circle  = new Circle( 20 );
  Ellipse     ellipse = new Ellipse( 50 , 20 );
  pane.getChildren().add(rect);
  pane.getChildren().add(circle);
  pane.getChildren().add(ellipse);
  Scene scene = new Scene(pane, 320, 240);
  stage.setScene(scene);
  stage.show();
 }
 
}

実行結果
JavaFXVBox作例 JavaFXHBox作例


最終更新日: 2019-02-19 08:24:42

ともさんのHP >プロブラミング >JavaFX >各種Pane

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

絵画をプリントしたワンピース  
実験養蜂新書  
フジの栽培、手入れ、増やしかた  
トマトを種から栽培  
リンネの花時計  
日本・西洋ミツバチの同居  
蜂小屋の建築  
男の洋裁  
キンリョウヘンの栽培方法  
ハンガーラックの作りかた  
柿の消毒  

私の他のサイト

ともさんの箱庭(ブログ)
家庭菜園
3D-CAD
洋裁CAD

いいねなど

 RSS 

Author: Tomoyuki Ito

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