Частина 1: Зміст

• Знайомство з JavaFX;
• Створення та запуск JavaFX проекту;
• Використання додатку Scene Builder для проектування інтерфейсу користувача;
• Проста структуризація додатку з використанням шаблону проектування Модель-Вигляд-Контролер (MVC).

Передумови

• Остання Java JDK 8 (включає в себе JavaFX 8);
• Середовище розробки Eclipse версії 4.4 чи вище з встановленим плагіном e(fx)lipse. Найлегший шлях - це скачати вже підготовлену версію Eclipse з сайту e(fx)lipse. Як альтернативу, можна використати сайт оновлень, якщо Eclipse вже встановлено.
• Додаток Scene Builder (забезпечує Gluon, оскільки Oracle надає лише вихідний код).

Налаштування середовища розробки Eclipse

Нам потрібно вказати середовищу розробки Eclipse використовувати JDK 8, а також вказати шлях до Scene Builder:

1. Відкрийте налаштування середовища розробки Eclipse та перейдіть до пункту Java | Installed JREs.

2. Натисніть Add…, виберіть Standart VM та вкажіть шлях до встановленої JDK 8.

3. Видаліть інші додані JDK або JRE і JDK 8 буде використовуватись за замовчуванням.
   

4. Перейдіть до пункту Java | Compiler. Встановіть значення Compiler compliance level як 1.8.
   

5. Перейдіть до пункту JavaFX та вкажіть шлях до виконавчого файлу додатку Scene Builder.
   

Корисні посилання

Можливо, ви захочете додати закладки на такі посилання:

• Java 8 API - документація стандартних класів Java;
• JavaFX 8 API - документація класів JavaFX;
• ControlsFX API - документація для проекту ControlsFX для додаткових компонентів управління JavaFX;
• Oracle’s JavaFX Tutorials - офіційний підручник з JavaFX від Oracle.

Що ж, давайте почнемо!

Створення нового JavaFX проекту

Перейдіть в додаток Eclipse та натисніть File | New | Other… та виберіть JavaFX Project. Вкажіть ім'я проекту (наприклад, AdressApp) та натисніть Finish.

Якщо додаток Eclipse автоматично створив початкові файли та пакети, то видаліть їх.

Створення структури пакетів

З самого початку ми будемо дотримуватись хороших принципів проектування програмного забезпечення. Один з них - це шаблон проектування MVC. Опираючись на цей шаблон, ми розбиваємо код нашого додатку на три частини та створюємо для кожної власний пакет (правий клік на папці src, New… | Package):

• ch.makery.adress - вміщує більшість класів-контролерів (Controller) (= бізнес-логіки);
• ch.makery.adress.model - вміщує класи моделі (Model);
• ch.makery.adress.view - вміщує класи вигляду або представлення (View).

Примітка: Всередині пакету, що вміщує класи представлення, також містяться деякі класи-контролери, які безпосередньо зв'язані з одним виглядом. Давайте назвемо їх вигляди-контролери (view-controllers).

Створення файлу розмітки FXML

Існує два шляхи створення інтерфейсу користувача: використовувати файл розмітки FXML чи програмувати все на Java. Для більшості випадків ми будемо використовувати XML (.fxml). Я вважаю, цей спосіб більше підходить для збереження роздільності контролера та представлення один від іншого. В подальшому, ми зможемо використовувати графічний Scene Builder для візуального редагування нашого XML. А це означає, що нам не потрібно працювати з XML напряму.

Виконайте клік на пакеті view правою кнопкою мишки та створіть новий FXML-документ під назвою PersonOverview.

Проектування візуального інтерфейсу в додатку Scene Builder

Зробіть правий клік мишкою на PersonOverview.fxml та виберіть Open with Scene Builder. Тепер ви маєте побачити Scene Builder з єдиним компонентом AnchorPane (він видимий під вкладкою Hierarchy зліва).

(Якщо Scene Builder не відкривається, відкрийте Window | Preferences | JavaFX та встановіть правильний шлях до нього).

1. Виберіть компонент AnchorPane на вкладці Hierarchy, перейдіть на вкладку Layout (справа) та встановіть значення характеристикам Pref Width та Pref Height як 600 і 300.
   

2. Додайте компонент SplitPane (Horizontal Flow) перетягуванням його з основної бібліотеки на вже доданий компонент AnchorPane. Клацніть на ньому правою кнопкою на вкладці Hierarchy (зліва) миші та виберіть Fit to Parent.
   

3. Тепер додайте компонент TableView (з вкладки Library) в ліву частину щойно доданого компонента SplitPane. Виділіть його (не Column) та проставте відступи від країв так, як показано на рисунку. Всередині компонента AnchorPane ви завжди можете проставити відступи для чотирьох сторін (додаткова інформація про розмітки).
   

4. Перейдіть в меню Preview | Show Preview in Window для того, щоб побачити, чи правильно відображається створене вікно. Спробуйте змінити розмір вікна. Додана таблиця повинна змінюватися разом з вікном, оскільки вона прикріплена до меж вікна.

5. Змініть заголовки колонок в таблиці (на вкладці Properties компонента TableColumn) на “First Name” та “Last Name”.
   

6. Виберіть наш компонент TableView та змініть значення Column Resize Policy (на вкладці Properties) на ‘constrained-resize’. Вибір цієї характеристики гарантує, що колонки таблиці завжди будуть займати весь доступний простір.
   

7. Додайте компонент Label на праву частину компонента SplitPane та змініть його текст на “Person Details” (підказка: для пошуку компонентів ви можете використовувати пошук). Виконайте коректування його місцезнаходження, використовуючи прив'язки до меж (на вкладці Layout).
   

8. Додайте компонент GridPane на праву частину та налаштуйте прив'язки до меж так, як показано на рисунку.
   

9. Приведіть своє вікно у відповідність з тим, що показано на рисунку, додаючи компоненти Label всередину комірок компонента GridPane. Для того, щоб додати новий ряд в компонент GridPane, виконайте клік правою кнопкою мишки на номері рядка (змінить колір на жовтий) та виберіть пункт “Add Row".
   

10. Розмістіть компонент ButtonBar внизу та додайте три кнопки в ButtonBar. Тепер, встановіть прив'язки до меж (справа та знизу) так, щоб компонент залишався на своєму місці.
    

11. Якщо ви все зробили вірно, то у вас мало вийти щось схоже на це. Для того, щоб протестувати створене вікно, використайте пункт меню Preview.
    

Створення основного додатку

Нам необхідно створити ще один файл fxml розмітки, в якому буде компонент Menu Bar та який буде слугувати обгорткою для щойно створеного PersonOverview.fxml.

1. Створіть інший fxml файл в тому ж пакеті, що й попередній та назвіть його RootLayout.fxml.
   

2. Відкрийте файл RootLayout.fxml в додатку Scene Builder.

3. Встановіть бажане значення ширини та висоти компонента як 600 та 400, відповідно.
   

4. Додайте компонент MenuBar у верхній слот компонента BorderPane. Функціональність меню ми будемо реалізовувати трохи пізніше.
   

Основний клас JavaFX додатку

Тепер нам потрібно створити основний Java клас, який запускає наш додаток з RootLayout.fxml та додає PersonOverview.fxml в центр.

1. Виконайте клік правою кнопкою миші по вашому проекту, перейдіть на New | Other… та виберіть JavaFX Main Class.

2. Назвіть клас MainApp та помістіть його в пакет ch.makery.address (примітка: це батьківський пакет таких пакетів як view та model).

Створений клас MainApp.java наслідує клас Application та вміщує два методи. Це базова структура, що потрібна для для запуску JavaFX додатку. Для нас важливий метод start(Stage primaryStage). Він автоматично викликається коли додаток запускається з методу main.

Як бачите, метод start(...) приймає екземпляр класу Stage в ролі параметра. На рисунку знизу представлена структура будь-якого JavaFX додатку:

Джерело зображення: http://www.oracle.com/

Це наче театральна п'єса: Stage являється основним контейнером, який, як правило, представляє вікно з рамками та стандартними кнопками закрити, мінімізувати та максимізувати. Всередину Stage додається Scene, яка, звичайно, може бути замінена іншою Scene. Всередину Scene вже додаються стандартні компоненти типу AnchorPane, TextBox та інші.

Для отримання більш детальної інформації про вищесказане, зверніться до цього матеріалу.

Відкрийте клас MainApp.java та замініть його вміст на це:

package ch.makery.address;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainApp extends Application {

    private Stage primaryStage;
    private BorderPane rootLayout;

    @Override
    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("AddressApp");

        initRootLayout();

        showPersonOverview();
    }

    /**
     * Initializes the root layout.
     */
    public void initRootLayout() {
        try {
            // Load root layout from fxml file.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));
            rootLayout = (BorderPane) loader.load();

            // Show the scene containing the root layout.
            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Shows the person overview inside the root layout.
     */
    public void showPersonOverview() {
        try {
            // Load person overview.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();

            // Set person overview into the center of root layout.
            rootLayout.setCenter(personOverview);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Returns the main stage.
     * @return
     */
    public Stage getPrimaryStage() {
        return primaryStage;
    }

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

Коментарії можуть слугувати вам в роли підказок того, що та як робиться.

Запустивши додаток, ви повинні побачити щось схоже на те, що зображено на рисунку на початку цієї статті.

Часті проблеми

Якщо додаток не може знайти вказаного fxml файлу, ви отримаєте наступне повідомлення про помилку:

java.lang.IllegalStateException: Location is not set.

Для вирішення даної проблеми перевірте правильність вказування шляхів до файлу та правильність написання його назви.

Що далі?

В 2 частині підручника ми додамо в наш додаток деякі дані та функціональність.

Вам можуть бути цікаві також деякі інші статті

• JavaFX Dialogs (official)
• JavaFX Date Picker
• JavaFX Event Handling Examples
• JavaFX TableView Sorting and Filtering
• JavaFX TableView Cell Renderer