質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaFX

JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Q&A

解決済

1回答

2476閲覧

JavaFX Scene Builderでフラットツールバーを作るには?

mr0237

総合スコア164

JavaFX

JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

0グッド

0クリップ

投稿2016/10/16 10:01

ポインターをボタンの上に置くとそのボタンだけが立体表示されるフラットツールバーをJavaFX Scene Builderで作成していますが、ツールバーを配置して、ボタンを配置することはできました。

しかし、マウスポインターをボタンの上に置くとそのボタンだけが立体表示されるのところをどうやってやるのかわかりません。

Scene Builderでフラットツールバーのボタンを作成するにはどうやったらいいのでしょうか?

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

フラットツールバーに限らず、動的に外観を変える場合は、外観を決める状態をpseudeクラスとして考え、状態が変わるごとにそのコントロール(今回ならButton)のスタイルクラスを変化させることで作ると思います。スタイルクラスはNode#getStyleClassで得られるObservableList<String>にpsudeクラス名を追加したり削除したりといった方法で変化させます。

しかし、今回の場合は「ボタン上にマウスポインターがあるかどうか」で状態が変化するということで、これはNodeのデフォルト動作でhoverというpsudeクラスとして定義済みなので自分でイベント処理を定義する必要もなく、css上にこのpsudeクラスhoverに基づいて外観を定義するだけで望みのボタンになると思います。

念のため試しにボタンに以下のCSSファイルを設定してみたらhover時にボタンが回転しました。

css

1.button:hover { 2 -fx-rotate: 45; 3}

あとは立体的な表示になるようなcssを書いてやればできそうです。自分はそうまで凝ったことやったことがないので具体的にはすぐにわからないのですがDropShadowとかにするのでしょうか・・・

JavaFXではHTMLのスタイルシートに書けるすべてがサポートされているわけではないので下記を参照しながらどんなふうに書けるか調べてみるとよいと思います。DropShadowなど大抵のEffectはできるようですよ。

JavaFX CSS Reference Guid

投稿2016/10/16 11:33

KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mr0237

2016/10/16 14:31

Scene Builderというツールを使ってマウスポインターをボタンの上に置くとそのボタンだけが立体表示させるにはどのように操作したらいいのでしょうか?
KSwordOfHaste

2016/10/17 02:51

失礼ながらcssとは何か、それを書けるか、コントロールにcssファイルを設定するという操作がわかるか、といったあたり質問者さんがどこまでわかっているかが当方にわかりません。質問には「なにを試して、何がうまくいかない(またはわからない)のか」をもっと具体的に書いた方がよいと思います。そうでないとどういうアドバイスが適切か推測できないです・・・
mr0237

2016/10/17 07:42

すいません。cssを書かないで(cssを使わないで)、Scene Builderというソフトだけでマウスポインターをボタンの上に置くとそのボタンだけが立体表示させるにはどのような操作をすればいいかということです。 つまりcssのコードをエディタで書いての立体表示させることではなく、Scene Builderというソフトだけで、立体表示させることはできるか?ということです。
KSwordOfHaste

2016/10/17 08:38

なるほどそういうことですか。自分の知る範囲ではそれはできません。Schene Builderで固定的なスタイルを(cssファイルを介さずに)直接指定することはできますが、css セレクター付き、つまり条件付きのスタイルは指定できないと思います。多分それはScene Builderの制約ではなくFXML仕様でそこまではできないからだと思います。
mr0237

2016/10/17 13:08

そうですか。ありがとうこざいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問