【JavaFX】Buttonコントロールを使ったサンプルプログラム
JavaFXのコントロール、Buttonを利用するシンプルなサンプルプログラムです。
Buttonの機能
「ボタンをクリックすると特定の処理を行う」コントロールです。
最もよく使うUIコントロールの一つだと思います。
「ボタン楽天 を押したら〇×する」ためには、あらかじめそのためのイベントを用意しておく必要があります。
サンプルプログラムの説明
JavaFX楽天 で新Stageを作り、Buttonを2つ、TextFied一つを配置します。
一つ目のボタンにはマウスでクリックするとボタン自身の表示を変更するイベントを付けています。
また、マウスがボタンに入ると、テキストフィールドに「マウスが入りました」。出るとテキストフィールドに「マウスが出ました」をテキストフィールド上に表示します。
ボタン上を動くと、マウスカーソルの座標をテキストフィールド上に表示します。
2つ目のボタンには、クリックすると1つ目のボタンを無効にする、もう一度クリックすると有効になるイベントをつけています。
ボタンの初期化と配置
サンプルでは複数のメソッドで使うので、Classの中で宣言して、
Button b1 ;
Button b2 ;
そのあと初期化しています。
初期化時に文字を入れれば、ボタンの表示になります。
b1 = new Button( " ボタン " );
b2 = new Button( " 使用可 " );
ボタンの色、大きさ、表示を変える
ボタンのサイズは、
b1.setPrefWidth(80);
b1.setPrefHeight(20);
のようにx,y個別に設定したり、
b2.setPrefSize(100, 30);
で、一度に設定することもできます。
色は下のようにRGBの数値を入れるか色名で設定します。
b1.setStyle("-fx-background-color: #c1c0ff;");
b2.setStyle("-fx-background-color: LIGHTGRAY;");
ボタンの配置
ボタンの配置は、配置するPaneで決まります。このサンプルプログラムではVBoxというコントロールを縦に配置するPaneに置いているので、
ボタンもテキストフィールドも縦一列に配置されています。
コントロール同士の隙間などもPaneの側で設定します。
ボタン表示の取得と設定
ボタンの表示は初期化の時に設定しますが、あとから設定（差し替え）することもできます。
サンプルプログラムには入っていませんが、こんな感じでセットしたり取得します。
b1.setText("クリック");
b1.getText();
サンプルではマウスクリック時のイベントで呼び出されるメソッドの中で下記のように使っています。
直接ボタンを指定せず、イベントを発生させたコントロール「e.getSource()」からボタンを割り出しています。
((Button)e.getSource()).setText("クリック");
String s = ((Button)e.getSource()).getText();
イベント
ボタンに設定するイベントは、マウスクリックが最も一般的だと思います。これを付けなければ、ボタンを押しても何も起こりません。
下はボタン「b1」がクリックされたら、メソッド「mouse1Click( event )」を呼び出します。
EventHandler<MouseEvent> mouse1Click = ( event ) -> this.mouse1Click( event );
b1.addEventHandler( MouseEvent.MOUSE_CLICKED , mouse1Click );
サンプルではこのほかに、マウスがコントロールに入ったとき、出たとき、コントロール上で動いた時のイベントを設定しています。
イベントを発生させたコントロールを知る
ボタンがたくさんあって、それらが同じイベントを共有する場合など、どのコントロールがイベントを発生させたかを知るには、
メソッドに持ち込んだEvent eに対して、e.getSource()でObjectを得ることができます。
下は呼び出したオブジェクトをButtonにキャストして、ボタンに表示されている文字を得ています。
String s = ((Button)e.getSource()).getText();
また、コントロール上のマウスカーソルの座標を得ることもできます。
private void mouse1Move( MouseEvent e ){
t.setText( "マウスの位置 "+e.getX() +" "+ e.getY() );
return;
}
サンプルプログラムのコード
上の動画のソースコードは下記の通り。
package tomojavalib.fx;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class ButtonTest2 extends Application {
Button b1 ;
Button b2 ;
TextField t;
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) throws Exception {
//StageにPaneを置く
VBox pane = new VBox();
//ボタンの初期化
b1 = new Button( " ボタン " );
b2 = new Button( " 使用可 " );
//Paneにボタンを追加
pane.getChildren().add( b1 );
pane.getChildren().add( b2 );
//大きさ設定
b1.setPrefWidth(80);
b1.setPrefHeight(20);
b2.setPrefSize(100, 30);
//色などの設定
b1.setStyle("-fx-background-color: #c1c0ff;");
b2.setStyle("-fx-background-color: LIGHTGRAY;");
//フォント
b1.setFont( new Font(12) );
b2.setFont( new Font(14) );
//イベント設定
//マウスがクリックされたとき
EventHandler<MouseEvent> mouse1Click = ( event ) -> this.mouse1Click( event );
b1.addEventHandler( MouseEvent.MOUSE_CLICKED , mouse1Click );
EventHandler<MouseEvent> mouse2Click = ( event ) -> this.mouse2Click( event );
b2.addEventHandler( MouseEvent.MOUSE_CLICKED , mouse2Click );
//マウスが入ったとき
EventHandler<MouseEvent> mouse1enter = ( event ) -> this.mouse1Enter( event );
b1.addEventHandler( MouseEvent.MOUSE_ENTERED , mouse1enter);
//マウスが出たとき
EventHandler<MouseEvent> mouse1exit = ( event ) -> this.mouse1Exit( event );
b1.addEventHandler( MouseEvent.MOUSE_EXITED , mouse1exit);
//マウスが動いた時
EventHandler<MouseEvent> mouse1move = ( event ) -> this.mouse1Move( event );
b1.addEventHandler( MouseEvent.MOUSE_MOVED , mouse1move);
t = new TextField( "" );
pane.getChildren().add( t );
Scene scene = new Scene(pane, 320, 240);
stage.setScene(scene);
stage.show();
}
private void mouse1Click( MouseEvent e ){
String s = ((Button)e.getSource()).getText();
if(s.equals(" ボタン1 ")){
((Button)e.getSource()).setText("クリック");
}else{
((Button)e.getSource()).setText(" ボタン1 ");
}
return;
}
private void mouse2Click( MouseEvent e ){
String s = ((Button)e.getSource()).getText();
if(s.equals(" 使用可 ")){
((Button)e.getSource()).setText("使用不可");
b1.setDisable(true);
}else{
((Button)e.getSource()).setText(" 使用可 ");
b1.setDisable(false);
}
return;
}
private void mouse1Enter( MouseEvent e ){
t.setText("マウスが入りました");
return;
}
private void mouse1Exit( MouseEvent e ){
t.setText("マウスが出ました");
return;
}
private void mouse1Move( MouseEvent e ){
t.setText( "マウスの位置 "+e.getX() +" "+ e.getY() );
return;
}
}
最終更新日： 2017-07-12 08:19:31