13

ユーザーが JavaFX2.2 UI のボタンを押すと、クリックされたことを示す濃い青色の光輪が表示されます。イベントの過程で、私のプログラムはそれを「クリック解除」して、選択されていないことを示したい場合があります。

Swingにはこれがあったことを覚えているbutton.setSelected(false);と思いましたが、JavaFxにはそのような呼び出しはありません。この記事ではドロップ シャドウについて説明しますが、実際にはドロップ シャドウではないボタンがクリックされたときに使用されるのと同じ外観を単純に使用したいと考えています。setEffect(new DropShadow()) 使用setStyle()は問題ありませんが、使用する値は何ですか?

4

3 に答える 3

24

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

ToggleButtonsに関する優れた Oracle チュートリアルがあります。

ここに画像の説明を入力

質問からの対処項目

クリックされたことを示す濃い青色のハローが表示されます

青いハローは、実際には、コントロールにフォーカスがあることを示すフォーカス リングです。コントロールにフォーカスするには、requestFocusメソッドを呼び出します。

イベントの過程で、私のプログラムはそれを「クリック解除」して、選択されていないことを示したい場合があります。

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

私は button.setSelected(false); を期待していました。

選択状態と非選択状態を切り替えるボタンを作成するには、ToggleButtonを使用します。AToggleButtonにはsetSelectedメソッドがあります。

setEffect(new DropShadow()) setStyle() の使用は問題ありませんが、どの値を使用するか

ドロップ シャドウ効果の css スタイル値は、JavaFX CSS リファレンス ガイドで定義されています。

スタイルシートからスタイル クラスを適用するか、css を使用して、またはsetEffectcss を介してコードでドロップ シャドウ効果を定義することは、視覚的に同等です。3 つのアプローチのうち、スタイルシートからの css またはコードから のアプローチのみをsetStyleお勧めします。setStylesetEffect

関連している

関連する追加のプロパティ - armedがあることに注意してください。

マウスを離すとボタンのアクションが呼び出されるように、ボタンが「装備」されていることを示します。これがプレスとは微妙に違います。Pressed は、ノード上でマウスが押され、まだ離されていないことを示します。ただし、arm は、マウスが実際にボタンの上にあり、押されているかどうかも考慮します。

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

選択状態のスタイリングのサンプル

選択された ToggleButton を選択されていないものと区別する標準的な方法は、それを暗くして深度スタイル効果を与え、押されたときに遠くに表示されるようにすることです。JavaFX 2.2の標準トグル ボタン CSS は次のとおりです。

.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;
}

選択した状態の代替定義を提供する独自のスタイルシートを定義することで、このデフォルトの動作をオーバーライドできます。以下のサンプルでは、​​選択された状態の表示が標準よりもはるかに微妙になり、選択された状態の色が大幅にではなくごく一部だけ暗くなります。

トグルプレーン未選択

トグル選択選択済み

関連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%);
}

ソースファイル：

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();
  }
}
于 2013-04-04T21:31:51.103 に答える