18 スライダ

この章では、JavaFXアプリケーションでスライダを使用して、数値の範囲を表示し、対話的に操作する方法を学習します。

Sliderコントロールはトラックとドラッグ可能なサムで構成されます。また、範囲の数値を示すティック・マークとティック・ラベルも組み込むことができます。図18-1に、一般的なスライダとその主な要素を示します。

図18-1 スライダの要素

スライダの作成

図18-1に示すスライダを作成する例18-1のコード・フラグメントを確認してください。

例18-1 スライダの作成

Slider slider = new Slider();
slider.setMin(0);
slider.setMax(100);
slider.setValue(40);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
slider.setMajorTickUnit(50);
slider.setMinorTickCount(5);
slider.setBlockIncrement(10);

setMinメソッドとsetMaxメソッドは、それぞれスライダで表す最小と最大の数値を定義します。 setValueメソッドはスライダの現在の値を指定しますが、この値は常に最大値より小さく、最小値より大きくなります。このメソッドを使用して、アプリケーションを開始したときのサムの位置を定義します。

setShowTickMarksおよびsetShowTickLabelsの2つのブール・メソッドは、スライダの外観を定義します。例18-1では、マークとラベルが有効化されています。また、主ティック・マークの間の距離の単位は50に設定され、2つの主ティックの間にある副ティックの数は5に指定されます。 setSnapToTicksメソッドをtrueに割り当てると、スライダの値をティック・マークに位置合せできます。

setBlockIncrementメソッドは、ユーザーがトラックをクリックしたときにサムが移動する距離を定義します。例18-1では、この値は10であり、ユーザーがトラックをクリックするたびにクリック位置から10の単位で進みます。

グラフィカル・アプリケーションでのスライダの使用

ここで図18-2を確認します。このアプリケーションでは、3つのスライダを使用して画像の特性のレンダリングを編集します。それぞれのスライダは、不透明度レベル、セピア調の値、スケーリング係数などの特定のビジュアル特性を調整します。

図18-2 3つのスライダ

「図18-2 3つのスライダ」の説明

例18-2に、このアプリケーションのソース・コードを示します。

例18-2 スライダのサンプル

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
 
public class SliderSample extends Application {
 
    final Slider opacityLevel = new Slider(0, 1, 1);    
    final Slider sepiaTone = new Slider(0, 1, 1);
    final Slider scaling = new Slider (0.5, 1, 1);
    final Image image  = new Image(getClass().getResourceAsStream(
        "cappuccino.jpg")
    );
 
    final Label opacityCaption = new Label("Opacity Level:");
    final Label sepiaCaption = new Label("Sepia Tone:");
    final Label scalingCaption = new Label("Scaling Factor:");
 
    final Label opacityValue = new Label(
        Double.toString(opacityLevel.getValue()));
    final Label sepiaValue = new Label(
        Double.toString(sepiaTone.getValue()));
    final Label scalingValue = new Label(
        Double.toString(scaling.getValue()));
 
    final static Color textColor = Color.BLACK;
    final static SepiaTone sepiaEffect = new SepiaTone();
 
    @Override
    public void start(Stage stage) {
        Group root = new Group();
        Scene scene = new Scene(root, 600, 400);
        stage.setScene(scene);
        stage.setTitle("Slider Sample");
 
        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.setVgap(10);
        grid.setHgap(70);
 
        final ImageView cappuccino = new ImageView (image);
        cappuccino.setEffect(sepiaEffect);
        GridPane.setConstraints(cappuccino, 0, 0);
        GridPane.setColumnSpan(cappuccino, 3);
        grid.getChildren().add(cappuccino);
        scene.setRoot(grid);
 
        opacityCaption.setTextFill(textColor);
        GridPane.setConstraints(opacityCaption, 0, 1);
        grid.getChildren().add(opacityCaption);
        
 
        opacityLevel.valueProperty().addListener((
            ObservableValue<? extends Number> ov, 
            Number old_val, Number new_val) -> {
                cappuccino.setOpacity(new_val.doubleValue());
                opacityValue.setText(String.format("%.2f", new_val));
        });
 
        GridPane.setConstraints(opacityLevel, 1, 1);
        grid.getChildren().add(opacityLevel);
 
        opacityValue.setTextFill(textColor);
        GridPane.setConstraints(opacityValue, 2, 1);
        grid.getChildren().add(opacityValue);
 
        sepiaCaption.setTextFill(textColor);
        GridPane.setConstraints(sepiaCaption, 0, 2);
        grid.getChildren().add(sepiaCaption);
 
        sepiaTone.valueProperty().addListener((
            ObservableValue<? extends Number> ov, Number old_val, 
            Number new_val) -> {
                sepiaEffect.setLevel(new_val.doubleValue());
                sepiaValue.setText(String.format("%.2f", new_val));
        });
        GridPane.setConstraints(sepiaTone, 1, 2);
        grid.getChildren().add(sepiaTone);
 
        sepiaValue.setTextFill(textColor);
        GridPane.setConstraints(sepiaValue, 2, 2);
        grid.getChildren().add(sepiaValue);
 
        scalingCaption.setTextFill(textColor);
        GridPane.setConstraints(scalingCaption, 0, 3);
        grid.getChildren().add(scalingCaption);
 
        scaling.valueProperty().addListener((
            ObservableValue<? extends Number> ov, Number old_val, 
            Number new_val) -> {
                cappuccino.setScaleX(new_val.doubleValue());
                cappuccino.setScaleY(new_val.doubleValue());
                scalingValue.setText(String.format("%.2f", new_val));
        });
        GridPane.setConstraints(scaling, 1, 3);
        grid.getChildren().add(scaling);
 
        scalingValue.setTextFill(textColor);
        GridPane.setConstraints(scalingValue, 2, 3);
        grid.getChildren().add(scalingValue);
 
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

ImageViewオブジェクトの不透明度プロパティは、最初のスライダ、opacityLevelの値に応じて変化します。 SepiaTone効果のレベルは、sepiaToneスライダの値を変更すると変化します。 3番目のスライダは、setScaleXメソッドとsetScaleYメソッドにスライダの現在の値を渡して画像のスケーリング係数を定義します。

例18-3では、SliderクラスのgetValueメソッドから返されたdouble値をStringに変換するメソッドを示します。これは小数点以下2桁の浮動小数点としてスライダの値をレンダリングするフォーマットにも適用されます。

例18-3 レンダリングされたスライダの値のフォーマット

scalingValue.setText(String.format("%.2f", new_val));

次のステップでは、スライダのルック・アンド・フィールを拡張して、視覚効果またはCSSスタイルをスライダに適用します。

18 スライダ

スライダの作成

グラフィカル・アプリケーションでのスライダの使用

目次

JavaFX: JavaFX UIコンポーネントの操作