イントロダクション
以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。
今回は、ボタンの表示をやります。
チュートリアル
ここのページを、戦国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("チュートリアル1"); 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); });
チュートリアルにはスタイルの指定もありましたが、ちょいと飛ばしてしまおうと思います。。。
でわでわ。。。