ボタンをクリックまたは選択したように見えるようにするにはどうすればよいですか？ （JavaFX2）

Question

ユーザがJavaFX2.2 UIのボタンを押すと、ダークブルーのハローがクリックされたように見えます。イベントの過程で、私のプログラムは、それがもはや選択されていないことを示すために、それを 'unclick'したいかもしれません。

私は期待していますbutton.setSelected(false);私はSwingがこれを持っていたことを覚えていますが、JavaFxではこのような呼び出しはありません。 このarticleではドロップシャドウについて説明していますが、実際にドロップシャドウではなくボタンをクリックしたときと同じ外観を使用したいだけです。 setEffect(new DropShadow()) setStyle()を使用しても問題ありませんが、使用する値は？

Answer 1

標準Buttonではなく、実際にToggleButtonが必要だと思います。

ToggleButtonsには素晴らしいOracleチュートリアルがあります。質問

ダークブルーハローから

---

アドレッシングのアイテムは、それが青いハローが実際にあることを示すフォーカスリングである

クリックされた表示するように表示されますコントロールにフォーカスがあります。 コントロールをフォーカスするには、requestFocusメソッドを呼び出すことができます。

イベントの進行中、私のプログラムは、それが選択解除されたことを示すために 'unclick'したいかもしれません。

コントロールからフォーカスを削除するには、別のコントロールでrequestFocusを呼び出して、代わりにそのコントロールにフォーカスすることができます。

私はbutton.setSelected（false）を期待しました。

選択状態と非選択状態を切り替えることができるボタンを使用するには、ToggleButtonを使用します。 ToggleButtonは、setSelectedの方法を有する。

setEffect（新しいドロップシャドウ（））setStyle（）を使用することはOKですが、どのような値がJavaFX CSS Reference Guideで定義されているドロップシャドウ効果の

CSSスタイル値を使用します。

setEffectでコード内のドロップシャドウ効果を定義するか、setStyleでCSSを使用するか、またはスタイルシートからスタイルクラスを適用すると視覚的に同等です。 3つのアプローチのうち、私はsetStyleアプローチを推奨しませんが、スタイルシートのCSSまたはコードアプローチのsetEffectのみを推奨します。

はボタンがマウスのリリースがボタンのアクションになりますように「武装」されていることを示す：armed - 追加の関連プロパティがあり

注意関連

---

呼び出される。これは、押されたものとは微妙に異なります。 「押された」は、ノード上でマウスが押され、まだリリースされていないことを示します。アームは、マウスが実際にボタンの上にあって押されているかどうかも考慮に入れます。

武装した状態のボタンは、武装していない状態とは少し違った外観をしています。ほとんどのプログラムは、ボタンの武装状態と対話する必要はありません。

---

選択されていないものから選択されたトグルボタンを区別するための標準的な方法は、それを深スタイルの効果を与え、それが遠くに見えるようにそれを暗くすることで選択状態

をスタイリングするためのサンプルそれが押されたとき。ここでは、標準toggle button css for JavaFX 2.2です：

.toggle-button:selected { 
    -fx-background-color: 
     -fx-shadow-highlight-color, 
     linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%), 
     linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%); 
    -fx-background-insets: 0 0 -1 0, 0, 1, 1; 
    /* TODO: -fx-text-fill should be derived */ 
    -fx-text-fill: -fx-light-text-color; 
} 

あなたが選択した状態の代替定義を提供defining your own stylesheetすることにより、このデフォルトの動作をオーバーライドすることができます。以下のサンプルでは、​​選択した状態の表示が標準よりはるかに微妙であることを確認します。

選択されていない

選択

関連するCSS：

/** 
* file: colored-toggle.css 
* Place in same directory as ColoredToggle.java. 
* Have your build system copy this file to your build output directory. 
**/ 

.root { 
    -fx-background-color: cornsilk; 
    -fx-padding: 10; 
} 

.toggle-button { 
    -fx-color: paleturquoise; 
} 

.toggle-button:selected { 
    -fx-background-color: 
     -fx-shadow-highlight-color, 
     linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%); 
} 

.toggle-button:selected:focused { 
    -fx-background-color: 
     -fx-focus-color, 
     linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%); 
} 

ソースファイル：このコマンドはまた、作品CSSスタイルシートから

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class ColoredToggle extends Application { 
    public static void main(String[] args) { Application.launch(ColoredToggle.class, args); } 

    @Override public void start(Stage stage) { 
    ToggleButton visibilityControl = new ToggleButton("Winterfell"); 

    VBox layout = new VBox(10); 
    layout.setAlignment(Pos.CENTER); 
    layout.getChildren().setAll(visibilityControl); 

    layout.getStylesheets().add(getClass().getResource("colored-toggle.css").toExternalForm()); 

    stage.setScene(new Scene(layout)); 
    stage.show(); 
    } 
} 

Answer 2

。トグルボタンは不要です。あなたが別のボタンを押すと、フォーカスが新しいボタンに変わります。

.button:focused{ 
    -fx-background-color: gray;