Javafx-css
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 }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ウィンドウを生成します。
