JavaFX-CSS

*Cascading Style Sheets* （CSSとも呼ばれる）は、Webページを表示可能にするプロセスを簡素化することを目的としたシンプルなデザイン言語です。

CSSは、Webページのルックアンドフィールの部分を処理します。 CSSを使用すると、テキストの色、フォントのスタイル、段落間の間隔、列のサイズ、レイアウトを制御できます。これらとは別に、使用する背景画像や色、レイアウト設計、さまざまなデバイスや画面サイズの表示のバリエーション、およびその他のさまざまな効果も制御できます。

JavaFXのCSS

JavaFXは、CSSを使用してアプリケーションのルックアンドフィールを強化する機能を提供します。パッケージ javafx.css には、JavaFXアプリケーションにCSSを適用するために使用されるクラスが含まれています。

CSSは、ブラウザによって解釈され、ドキュメント内の対応する要素に適用されるスタイルルールで構成されます。

スタイルルールは3つの部分で構成されています-

セレクタ-セレクタは、スタイルが適用されるHTMLタグです。これには、 <h1> や <table> などのタグを使用できます。
プロパティ-プロパティは、HTMLタグの属性の一種です。簡単に言えば、すべてのHTML属性はCSSプロパティに変換されます。色、*ボーダー*などです。
値-値はプロパティに割り当てられます。たとえば、色のプロパティは red または*＃F1F1F1 *などの値を持つことができます。

次のようにCSSスタイルルールの構文を置くことができます-

selector { property: value }

CSSスタイル

JavaFXで使用されるデフォルトのスタイルシートは modena.css です。 JavaFXランタイムjarにあります。

独自のスタイルシートを追加する

次のように、JavaFXのシーンに独自のスタイルシートを追加できます-

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

インラインスタイルシートの追加

setStyle（）*メソッドを使用してインラインスタイルを追加することもできます。これらのスタイルはキーと値のペアのみで構成され、それらが設定されているノードに適用できます。以下は、インラインスタイルシートをボタンに設定するサンプルコードです。

.button {
   -fx-background-color: red;
   -fx-text-fill: white;
}

例

テキストフィールド、パスワードフィールド、2つのボタンを持つフォームを表示するJavaFXアプリケーションを開発したと仮定します。デフォルトでは、このフォームは次のスクリーンショットに示すように見えます-

グリッドペイン

次のプログラムは、JavaFXで上記のアプリケーションにスタイルを追加する方法を示す例です。

このコードを CssExample.java という名前のファイルに保存します

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class CssExample extends Application {
   @Override
   public void start(Stage stage) {
     //creating label email
      Text text1 = new Text("Email");

     //creating label password
      Text text2 = new Text("Password");

     //Creating Text Filed for email
      TextField textField1 = new TextField();

     //Creating Text Filed for password
      PasswordField textField2 = new PasswordField();

     //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

     //Creating a Grid Pane
      GridPane gridPane = new GridPane();

     //Setting size for the pane
      gridPane.setMinSize(400, 200);

     //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

     //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

     //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

     //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

     //Styling nodes
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

      text1.setStyle("-fx-font: normal bold 20px 'serif' ");
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");
      gridPane.setStyle("-fx-background-color: BEIGE;");

     //Creating a scene object
      Scene scene = new Scene(gridPane);

     //Setting title to the Stage
      stage.setTitle("CSS Example");

     //Adding scene to the stage
      stage.setScene(scene);

     //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac CssExample.java
java CssExample

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

CSSの例

Javafx-css

JavaFX-CSS

JavaFXのCSS

独自のスタイルシートを追加する

インラインスタイルシートの追加

例

目次