2019.08.01JavaFXではNodeと呼ばれる部品をCSSを用いて自由に装飾することができるので、今回はCSSの書き方の説明も交えながら、実際に作って紹介していきます。背景色を設定ボタンに影をつけるボタンを押す時のエフェクトを作成ボタンに画像を貼り付けるボタンを作成まず、下の画像をみてください。これは実際にCSSで装飾を施したものです。今回はこのボタンを目指して実際に作りながら紹介していきます。「style.css」と「Main.java」を作成してください。次のプログラムを作成します。ButtonをSceneに追加する}}重要なのはマーカー部分の行です。「getStylesheets」関数を呼び出すことで、適用されているスタイルシートのリストを取得することができます。今回は「style.css」という名前のCSSファイルを指定していますが、もちろん複数のファイルを追加することだってできます。次に「getStyleClass」関数で「Button」に適用されているCSSクラスのリストを取得し、「add」関数でクラスを追加します。することで、「CSS」ファイル内にある「button」クラスの中身が、実際のJavaFXのボタンに反映されるようになります。現状ではまだ何も書いていないので、実行するとこのようなボタンが表示されます。これでは非常に質素なので、早速CSSファイルを作成し装飾を施していきます。先ほどのボタンではあまりにも味気ないので、「button」クラスの中身を作っていきます。*/}幅・高さを設定する場合は「-fx-pref-width・-fx-pref-height」を使用します。今回は幅・高さをそれぞれ「60px」に設定しました。*/}「-fx-background-radius」を使用し、ボタンの角の丸みを設定します。今回は円形のボタンを作りたいので、角は「60px」の半分、半径「30px」に設定します。*/}「-fx-background-color」で背景色を設定することができます。#e8e8e8;このように非常に味気ない感じになってしまうので、「linear-gradient」関数を用いてグラデーションを用いてみました。「linear-gradient」関数の引数は2つあり、ボタンの一番上の色と一番下の色を設定します。すると、設定した2つの色の間をグラデーションで描画してくれます。することにより、ボタンに立体感が出ます。ボタンに影をつけるリアルのボタンは奥行きがあるため、ボタンに影をつけることで再現します。*/}「-fx-effect」でエフェクトを追加することができます。今回は影のエフェクトが必要なので、プロパティの値には「dropshadow」関数で指定します。他にも「innershadow」関数がありますが、これはボタンの内側・外側のどちらに影をつけるかで使い分けます。今回はボタンの奥行きを出したいので外側に影をつけることができる「dropshadow」関数を用います。「dropshadow」関数の引数の意味は以下のようになります。ぼかし方の設定gaussian、one-pass-box、two-pass-box、three-pass-boxの4つの種類があります。「rgb」関数を用い、「赤・緑・青・アルファ」の値を設定します。アルファ値というのは透明度を決定するものです。アルファ値が低いと透明になります。値は「0〜1」の間にしてください。Y方向のオフセットこのように奥行きが生じ、ボタンらしくなってきました。ボタンを押す時のエフェクトを作成ボタンを押した時に「影の変化」・「背景色の変化」を加えることで、ボタンを押す時のリアルさを再現することができます。*/}一般的なCSSの記述だと、「pressed」ではなく「active」と記述するのですが、JavaFXで使用するCSSは「pressed」なので注意です。背景色の変化ですが、これは通常の背景色より若干明るくしました。次に影の変化ですが、ボタンを押す際は奥行きが減るので、その分影を小さくします。画像だと伝わりにくいので、実際にボタンを押してその変化を試してみてください。ちなみに押すとこうなります。ボタンに画像を貼り付ける最後に、ボタンに画像を貼り付けて完成させましょう。今回使用する画像はこちらです。「icon01.png」という名前で使用します。この画像は私が作ったもので、完全にフリーです。ご自由にお使いください。*/}「-fx-background-image」に「url」関数を使って画像を指定します。ファイル名を間違えると画像が表示されないので、ファイル名をしっかり確認するようにしましょう。「-fx-background-position」で画像の表示位置を設定します。ボタンに画像を貼り付けるので、できれば中央の方が見栄えがいいですよね。「center」を指定します。最後に「-fx-background-repeat」で画像の表示状態を設定します。ここになにも設定しないと何度も画像が表示されてしまい、おかしな表示になってしまうので、「stretch」を指定して画像の表示回数を1回に設定します。これでようやく完成しました!もちろんボタンだけではなく、他の様々なNodeに対してもCSSによる装飾が施せますので、是非色々試してみてはいかがでしょうか。保存のやり方を簡単な例で説明します。再描画が上手くいっていないとは、つまりは画面の消去が行われていないということです。Javaで作られるアプリケーションは、クラスという部品が集まってできています。「Button」クラスや「Label」クラスなどがわかりやすいと思います。マーカー部分の記述は、ラムダ式を用いて簡略化することができます。マウスクリックJava【Java】FileChooserを使って画像表示アプリケーションを作ろう!FileChooserは、ファイル選択を行う上で非常に便利なクラスです。今回はそんなFileChooserを使った簡単な画像表示アプリケーションを作成していきます。上記の記事でも書いた通り、JavaFXが使えないと実は困るんですよね。コメントをキャンセルメールアドレスが公開されることはありません。R1カテゴリーJavaJavaFXJavaScriptPythonRこのサイトの管理人IT系だんしプログラミングが大好きな人。趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。