イントロダクション
以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。
今回は、ボタンの表示をやります。
チュートリアル
ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。
＜チュートリアル＞
- ラベル
- ボタン
- ラジオ・ボタン
- トグル・ボタン
- チェック・ボックス
- 選択ボックス
- テキスト・フィールド
- パスワード・フィールド
- スクロール・バー
- スクロール・ペイン
- リスト・ビュー
- 表ビュー
- ツリー・ビュー
- ツリー表ビュー
- コンボ・ボックス
- セパレータ
- スライダ
- 進行状況バーと進行状況インジケータ
- ハイパーリンク
- ツールチップ
- HTMLエディタ
- タイトル付きペインとアコーディオン
- メニュー
- カラー・ピッカー
- 日付ピッカー
- ページ区切りコントロール
- ファイル・チューザ
- UIコントロールのカスタマイズ
- 埋込みプラットフォームのUIコントロール
JavaFXを使用して作成した画面の再生リストです。サンプル動画が複数あるので、参考にどうぞ。
基本のコード
public class Lv2_Button extends Application {
/**
* このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
* のメソッドをオーバーライドする。
* {@link Application#launch(String...)}から呼び出される。
*/
@Override
public void start(Stage primaryStage) throws Exception {
// チュートリアルには省略されている部分
Group group = new Group();
// この部分がチュートリアルに記載されている。
// Fontを使用する方法
Label label1 = new Label();
label1.setFont(new Font("Aeial", 30));
label1.setText("Text1");
label1.setTranslateX(60);
label1.setTranslateY(60);
// 回転させる
label1.setRotate(-45.0);
// ボタンを追加する
Button btn = new Button();
// 上のコンポーネント(Labelとか、イメージとか)
group.getChildren().addAll(label1, btn);
// チュートリアルでは省略されている
Scene scene = new Scene(group, 300, 300);
primaryStage.setScene(scene);
primaryStage.setTitle("チュートリアル１");
primaryStage.show();
}
/**
* メインメソッド。
* Apllicationクラスのlaunchメソッドを呼び出す。
*
* @param args プログラム引数
*/
public static void main(String[] args) {
launch(args);
}
}
このコードの実行結果
ちょっとわかりずらいけど、左端にボタンがあります。ボタンかどうかも怪しい感じです。ボタンだとわかるようにします。下の様にコードを修正します。
// ボタンを追加する
Button btn = new Button("ボタン");
ボタンが表示されました。しかし位置が悪い。。。
ソースを以下の様に追加修正します。
// ボタンを追加する
Button btn = new Button("ボタン");
btn.setLayoutX(100.0);
btn.setLayoutY(120.0);
やっぱりなんか微妙だけどまぁよし！ボタンを作成した(new Button())の行の下にあるコードは、Labelクラスでも使用したメソッドと同じ名前です。「setLayout?()」？の部分に「X」「Y」が入りそれぞれの位置を指定します。
アイコンの追加
さらにコードを修正します。
// イメージファイルの読み込み
Image img = new Image(
this.getClass().getResourceAsStream("check.png"));
btn.setGraphic(new ImageView(img));
コードが長くなってしまった場合は、上の様にインデントをつけて(コードの開始位置をずらして)次の行にコードを書きます。そして、Imageクラスのインスタンス化(new Image())の部分はこのクラスのあるディレクトリ(フォルダ)と同じ場所にあるcheck.pngファイルを読み込んでいます。起動しているのは「Lv2_Button」クラスです。
そして、ボタンにイメージを追加しています。btn.setGraphic(new ImageView(img));これはImageViewクラスはNodeクラスを継承している(親子関係があるけど、Imageクラスにはないのでbtn.setGraphic(Node);の形位に遭わないためこの様に処理をしています。詳しくはJavaDocを参照されたし。。。
追伸：ButtonクラスはNodeクラスを継承しているので「setGraphic()」はNodeクラスのメソッドですがButtonクラスでも使用できます。この部分はおいおい理解していきましょう。
そして実行結果、よくみるとアイコンに余計な部分も入っています。元になるcheck.pngファイルをちゃんと加工していないのでこの様になります。
アクションの割り当て
アクション→ボタンを押下した時の処理を実装します。追加するコードは以下の様になります。
// アクションの追加
btn.setOnAction(event -> {
label1.setRotate(label1.getRotate() + 15.0);
});
チュートリアルにはスタイルの指定もありましたが、ちょいと飛ばしてしまおうと思います。。。
でわでわ。。。
