JavaFX 2.0 c использованием CSS

Каждый знает что внешний вид приложения это первое, что привлекает пользователя, так вот как же сделать привлекательный UI для вашего приложения? Данный урок покажет вам как можно кастомизировать UI вашего JavaFX приложения.

Шаг 1

Первое что нужно сделать это создать проект, в Intellij IDEA это сделать просто File — New Project — Java FX Module.

После вы увидите следующую структуру проекта с файлами:

Файл Controller нам в этом уроке не пригодится, по этому его можно не трогать.

Шаг 2

Теперь давайте откроем sample.fxml и заменим его содержимое на это:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity"
            maxWidth="-Infinity" minHeight="-Infinity"
            minWidth="-Infinity" prefHeight="514.0"
            prefWidth="373.0" styleClass="background"
            xmlns:fx="http://javafx.com/fxml">
    <children>
        <Label layoutX="43.0" layoutY="37.0" styleClass="header" text="Push Button">
            <font>
                <Font name="Segoe UI" size="30.0" />
            </font>
        </Label>
        <Button layoutX="43.0" layoutY="154.0" mnemonicParsing="false" text="Button" />

        <Button defaultButton="true" layoutX="248.0" layoutY="154.0"
                mnemonicParsing="false" styleClass="default" text="Button" />

        <Button disable="true" layoutX="43.0" layoutY="245.0"
                mnemonicParsing="false" text="Button" />

        <Button defaultButton="true" disable="true" layoutX="248.0" layoutY="245.0"
                mnemonicParsing="false" styleClass="null" text="Button" />

        <Label layoutX="43.0" layoutY="132.0" styleClass="item-title" text="normal" textFill="WHITE">
            <font>
                <Font name="Segoe UI" size="12.0" fx:id="x1" />
            </font>
        </Label>

        <Label font="$x1" layoutX="248.0" layoutY="132.0" styleClass="item-title" text="default">
            <textFill>
                <Color blue="0.647" green="0.647" red="0.647" fx:id="x2" />
            </textFill>
        </Label>

        <Label font="$x1" layoutX="43.0" layoutY="223.0" styleClass="item-title"
               text="normal disabled" textFill="$x2" />

        <Label font="$x1" layoutX="248.0" layoutY="223.0" styleClass="item-title"
               text="default disabled" textFill="$x2" />
    </children>
</AnchorPane>

Какой стиль будет использоваться для компонента мы указываем в атрибуте styleName.

После запуска выглядеть ваша форма будет так:

2954_2

Как то не очень да? Для того чтобы сделать красиво в JavaFX 2.0 было разрешено использовать CSS.

Шаг 3

Я не стал писать свои css стили, так как цель данного урока научить их использовать в JavaFX 2.0.

Поэтому я использовал стили по этой ссылке.

Хочу только дополнить, что почти все известные вам css атрибуты можно использовать с помощью префикса -fx-<атрибут>, например:

-fx-background-color: #4a4a4a;

но все есть много отличий, вот по этой ссылке можно почитать про все JavaFX стили.

После того как я скачал готовые стили, я поместил их в проект src\css\JMetroDarkTheme.css скачать можно по этой ссылке.

Шаг 4

Теперь открываем файл src\sample\Main.java и меняем его содержимое на это:

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 380, 300));
        primaryStage.getScene().getStylesheets().add("css/JMetroDarkTheme.css");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

В строке 16 мы подключаем наш файл со стилями для этой формы.

Шаг 5

Давайте теперь запустим и посмотрим, что у нас получилось:

Так ведь лучше :)

Урок создан: 04 сентября 2013 | Просмотров: 15459 | Автор: Александр Барчук | Правила перепечатки


Добавить комментарий

Добавить комментарий

Ваш e-mail не будет опубликован.

Комментарии:

  • 26 октября 2013 в 22:07

    Shaken

    Большое спасибо за урок. )

  • 25 февраля 2015 в 01:54

    Vitaly

    Исправьте «Какой стиль будет использоваться для компонента мы указываем в атрибуте (styleClass).»

  • 23 ноября 2016 в 21:41

    Денис

    Скажите, пожалуйста, можно ли задать стиль CSS для главного окна: для бордюров, системных кнопок свернуть, развернуть, закрыть?
    Спасибо