1. Ліцензування JavaFX Script
2. Перед початком роботи з JavaFX Script
3. Огляд JavaFX Script
4. Змінні і примітивні типи
5. Таблиця 1. Примітивні типи JavaFX Script і відповідні їм типи в Java
6. Оператори
7. Таблиця 2. Оператори відносин JavaFX Script
8. Таблиця 3. Логічні оператори JavaFX Script
9. Функції та операції
10. Лістинг 1. Проста функція
11. Лістинг 2. Проста операція
12. Приклад програми JavaFX Script
13. Малюнок 1. Калькулятор на JavaFX Script
14. Лістинг 3. Оголошення об'єкта Frame
15. Лістинг 4: Оголошення Menu
16. Розміщення GUI-компонентів і кордони
17. Лістинг 5. Оголошення GridBagPanel
18. Таблиця 4. Розміщення GUI-компонентів JavaFX Script
19. Таблиця 5. Межі в JavaFX Script
20. Лістинг 6. Оголошення EmptyBorder
21. Лістинг 7. Оголошення GridCell
22. Таблиця 6. Значення атрибута fill об'єкта GridCell
23. Текстові поля і кнопки
24. Лістинг 8. Оголошення TextField
25. Таблиця 7. Варіанти вирівнювання в TextField.
26. Лістинг 9. Оголошення об'єкта Button
27. висновок
28. Ресурси для скачування

Знайомство з основами JavaFX Script

JavaFX Script - це мова сценаріїв, розроблений для спрощення створення функціональних клієнтів і Інтернет-додатків. Цей багатоплатформовий мову може працювати на будь-якій системі, що підтримує технологію Java, без необхідності локальної установки. Він базується на технології Java і дозволяє легко створювати графічні інтерфейси будь-якого розміру і складності.

У цій статті розглядаються основи мови JavaFX Script і на прикладі додатка вивчаються деякі компоненти користувальницького інтерфейсу. Щоб отримати користь від цієї статті, необхідно володіти хорошим знанням мови програмування Java і мати досвід розробки з використанням Swing.

Ліцензування JavaFX Script

На момент написання цієї статті JavaFX Script входив в сімейство продуктів JavaFX від Sun Microsystems. Ще одним (і на даний момент останнім) членом цього сімейства в даний час є JavaFX Mobile для операційних систем і програмних середовищ пристроїв, що підтримують технологію Java. Компанія Sun оголосила про те, що JavaFX Script в майбутньому буде ліцензуватися відповідно до GNU Public License v2. Поки ж навколо загальнодоступних ранніх версій мови JavaFX Script формується співтовариство JavaFX, яке працює над його розвитком (див. Розділ ресурси ).

Перед початком роботи з JavaFX Script

При розробці додатків на JavaFX Script корисно мати встановлену середу розробки сценаріїв JavaFX. Існують IDE, спеціально призначені для розробки на JavaFX Script, а також модулі до інших середовищ розробки на Java. У цій статті буде розглядатися модуль JavaFX Script для Eclipse (інформацію про це і інших модулях для розробки див. Розділ ресурси ).

Огляд JavaFX Script

JavaFX Script - це мова зі статичної типізацією, тобто тип даних кожної змінної, параметра і тип повертається методом значення відомі на етапі компіляції. JavaFX Script також є декларативною мовою програмування: він описує те, що робить програма, а не те, як вона це робить. Алгоритм, який визначає, яким чином відобразити додаток на екрані, реалізується підтримує ПО (Swing Java 2D API). Тому JavaFX Script добре підходить для створення графічного інтерфейсу користувача.

Щоб розібратися в коді тестового додатка і компонентах інтерфейсу JavaFX Script, які в ньому використовуються, спочатку необхідно описати основи синтаксису JavaFX Script.

Змінні і примітивні типи

JavaFX Script надає чотири примітивних типу: String, Boolean, Number і Integer. У таблиці 1 наведені типи Java, яким вони відповідають:

Таблиця 1. Примітивні типи JavaFX Script і відповідні їм типи в Java

Примітивні типи JavaFX Script Відповідні примітиви або об'єкти Java String java.lang.String Boolean java.lang.Boolean Number java.lang.Number Integer int, long, byte, short, java.math.BitInteger

Змінні будь-якого з цих типів вводяться з ключовим словом var. На відміну від мови Java, JavaFX Script не вимагає вказівки типу змінної в оголошенні змінної. Інтерпретатор може дізнатися тип змінної, грунтуючись на її використанні. Однак, оскільки JavaFX Script є статично типізований, оголошений тип змінної повинен залишатися незмінним протягом усього життєвого циклу цієї змінної. Наприклад, var myString = "Hello"; в JavaFX Script еквівалентно var myString: String = "Hello"; в коді Java.

Оператори

У таблицях 2 і 3 наводиться перелік операторів, використовуваних в JavaFX Script, і їх аналоги в Java. При написанні виразів в JavaFX Script можна звертатися до цих таблиць.

Таблиця 2. Оператори відносин JavaFX Script

Оператор відносини Аналог в Java Значення == == Рівність <>! = Не дорівнює <<Менше ніж>> Більше ніж <= <= Менше або дорівнює> => = Більше або дорівнює

Таблиця 3. Логічні оператори JavaFX Script

Логічний оператор Аналог в Java Значення and && Логічне І or || Логічне АБО not! Заперечення (НЕ)

Функції та операції

JavaFX Script використовує ключове слово function для подання функціональної частини програми. У JavaFX Script функція може містити оголошення змінних і конструкцію return, укладені у фігурні дужки. Це ідеально підходить для простих математичних функцій, а також методів-аксессор (getters) і мутаторов (setters) класу. У лістингу 1 показаний приклад функції JavaFX Script, яка складає два числа:

Лістинг 1. Проста функція

function add (a, b) {var c = a + b; return c; }

Всі процедури в JavaFX Script позначаються ключовим словом operation і можуть містити будь-яку кількість конструкцій. У лістингу 2 показаний приклад простої операції:

Лістинг 2. Проста операція

operation helloWorld () {System.out.println ( "Hello world."); }

Приклад програми JavaFX Script

Для демонстрації деяких основних можливостей графічного інтерфейсу користувача в JavaFX Script нижче розглядається створення простого калькулятора з функціями калькулятора, що входить до складу операційної системи Microsoft® Windows®. На малюнку 1 показаний цей калькулятор:

Малюнок 1. Калькулятор на JavaFX Script

Вікна та меню

Для відображення додатків JavaFX Script служить об'єкт Frame. Це вікно верхнього рівня з кордоном, заголовком, і, при бажанні, з панеллю меню. У лістингу 3 показано оголошення вікна калькулятора:

Лістинг 3. Оголошення об'єкта Frame

Frame {menubar: MenuBar {...} // текст, що виводиться в заголовку title: "Calculator" // розмір вікна height: 200 width: 200 // початок розміщення вмісту вікна content: GridBagPanel {...} visible: true}

У JavaFX Script атрибути об'єкта описуються в його оголошенні. У лістингу 3 menubar, title, height, width, content і visible - це все атрибути об'єкта Frame. Атрибут title містить значення типу String, яке відображається в рядку заголовка вікна. В даному прикладі це значення встановлено в Calculator (див. Рядок заголовка на малюнку 1). Атрибути height і width визначають розмір вікна в пікселах. Атрибут visible має тип Boolean і визначає, чи показувати вікно після ініціалізації.

Атрибут menubar, оголошений в об'єкті Frame в лістингу 3, містить в якості значення об'єкт MenuBar. Об'єкт MenuBar може містити один або більше об'єктів Menu, які визначають назви і вміст меню, розташованого у верхній частині вікна калькулятора. У цьому додатку оголошується меню File, що містить одну операцію: Exit. Його оголошення показано в лістингу 4:

Лістинг 4: Оголошення Menu

menubar: MenuBar {menus: Menu {text: "File" // перший елемент меню items: MenuItem {text: "Exit" // дію при натисканні action: operation () {// завершити роботу додатка System.exit (0); }}}}

Об'єкт Menu має атрибут text зі строковим значенням, що представляє назву меню, яке і відображається на екрані - в даному випадку це File. Об'єкт Menu також містить атрибут з назвою items, значенням якого є один або більше об'єктів MenuItem. Об'єкти MenuItem представляють операції, розташовані в цьому меню. Атрибут text визначає ім'я MenuItem, а атрибут action містить операцію, яка визначає поведінку елемента. Коли користувач калькулятора вибирає File> Exit, операція, певна в атрибуті action, виконується і додаток закривається.

Розміщення GUI-компонентів і кордони

Повертаючись знову до оголошення об'єкта Frame в лістингу 3 , Потрібно сказати, що атрибут content є, мабуть, найбільш важливим з усіх атрибутів об'єкта Frame. Його значення - це об'єкт-віджет, який визначає зміст, показаний у вікні під рядком заголовка і панеллю меню. Текстове поле калькулятора і кнопки створюються в атрибуті content. Щоб упорядкувати кнопки калькулятора, необхідно створити форматований панель, яка показана в лістингу 5:

Лістинг 5. Оголошення GridBagPanel

content: GridBagPanel {border: EmptyBorder {...} cells: {...}}

Менеджер компонування JavaFX Script инкапсулирует відповідні типи розміщення GUI-компонентів (layouts) Swing / AWT і створює екземпляр JPanel із зазначеним менеджером розміщення. Потім, через атрибути, надані об'єктом JavaFX Script, в об'єкт JPanel додаються GUI-компоненти. У таблиці 4 наведені віджети JavaFX Script і їх відповідність менеджерам розміщення GUI-компонентів в Swing / AWT:

Таблиця 4. Розміщення GUI-компонентів JavaFX Script

Віджет JavaFX Script Менеджер розміщення в Swing Box BoxLayout BorderPanel BorderLayout CardPanel CardLayout FlowPanel FlowLayout GridBagPanel GridBagLayout GridPanel GridLayout GroupPanel GroupLayout StackPanel Romain Guy's StackLayout

Точно так же кожен об'єкт типу border (межа) інкапсулює в собі об'єкт border з Swing. Кожен об'єкт border в JavaFX Script має атрибути, які відповідають конфігураційним властивостями об'єкта border в Swing. У таблиці 5 наведені відповідні об'єкти border з Java FX Script і Swing:

Таблиця 5. Межі в JavaFX Script

Кордон в JavaFX Script Кордон в Swing BevelBorder BevelBorder EmptyBorder EmptyBorder LineBorder LineBorder MatteBorder MatteBorder SoftBevelBorder SoftBevelBorder TiltedBorder TiltedBorder

Як видно з лістингу 5 , Для калькулятора використовується GridBagPanel. GridBagPanel вирівнює компоненти по сітці (вертикально і горизонтально) не вимагаючи від компонентів, щоб вони мали однаковий розмір. Кожен об'єкт GridBagPanel містить сітку осередків, причому кожен компонент може займати одну або кілька осередків. GridBagPanel має два атрибути: border та cells. Атрибут border визначає тип кордону (один з об'єктів, представлених в таблиці 5), яка буде відображатися в GridBagPanel. Як видно з лістингу 6, в калькуляторі використовується об'єкт EmptyBorder.

Лістинг 6. Оголошення EmptyBorder

border: EmptyBorder {top: 5 left: 5 bottom: 5 right: 5}

Порожня межа (empty border) повністю прозора. Вона займає простір, як описано в атрибутах border, але не промальовується. Атрибутами EmptyBorder є top, left, bottom і right. Їх значення визначають розмір простору, у точках, яке займає кордон з кожного боку екрану. В даному випадку задана прозорий кордон шириною 5 пікселів між компонентами сітки (grid) і кожним краєм екрану.

Атрибут cells об'єкта GridPanel визначає компоненти всередині сітки. Значення цього атрибута є масив об'єктів типу GridCell. Кожен об'єкт GridCell представляє окремий компонент в сітці. Атрибути GridCell вказують, яким чином повинен відображатися компонент, і де він розташований всередині панелі. Додаток "Калькулятор" містить 19 об'єктів GridCell. Один GridCell відповідає текстовому полю в верхній частині калькулятора, два об'єкти GridCell відповідають кнопкам Back і Clear, і 16 об'єктів відповідають цифровим кнопкам і кнопках з операціями, як показано на малюнку 1 . У лістингу 7 показані об'єкти GridCell для текстового поля програми «Калькулятор», кнопок Back і Clear, а також для двох цифрових кнопок:

Лістинг 7. Оголошення GridCell

cells: [GridCell {anchor: WEST fill: HORIZONTAL // горизонтальна позиція в сітці gridx: 0 // вертикальна позиція в сітці gridy: 0 // кількість клітин, займаних компонентом gridwidth: 4 content: textField}, GridCell {anchor: WEST fill : HORIZONTAL gridx: 0 gridy: 1 gridwidth: 2 content: Button {text: "Back" ...}}, GridCell {anchor: WEST fill: HORIZONTAL gridx: 2 gridy: 1 gridwidth: 2 content: Button {text: " Clear "...}}, GridCell {anchor: WEST fill: HORIZONTAL gridx: 0 gridy: 2 content: Button {text:" 7 "...}}, GridCell {anchor: WEST fill: HORIZONTAL gridx: 1 gridy: 2 content: Button {text: "8" ...}}]

Як видно з лістингу 7, кожен об'єкт GridCell містить п'ять атрибутів: anchor, fill, gridx, gridy і content. Атрибут anchor використовується, коли компонент менше області, призначеної для його відображення, і вказує, в якій частині цієї області розмістити компонент. Можливі значення: NORTH, SOUTH, EAST, WEST, NORTHWEST, NORTHEAST, SOUTHWEST, SOUTHEAST і CENTER.

Атрибут fill також використовується, коли область для відображення компонента більше самого компонента. Він вказує, як змінити розмір компонента і змінювати його взагалі. У таблиці 6 описуються можливі значення:

Таблиця 6. Значення атрибута fill об'єкта GridCell

Значення Поведінка NONE значення за замовчуванням. Не вживати ніяких дій. HORIZONTAL Зробити компонент досить широким для заповнення області відображення по горизонталі. Не змінювати його висоту. VERTICAL Зробити компонент досить високим для заповнення області відображення по вертикалі. Не змінювати його ширину. BOTH Зробити компонент досить широким і високим для заповнення області відображення по горизонталі і вертикалі.

Всі компоненти всередині калькулятора прив'язані до західного кордону і заповнюють простір по горизонталі.

Атрибути gridx і gridy об'єкта GridCell визначають розташування компонентів всередині сітки. Їх значення вказують на осередок, в якій буде відображатися провідний (верхній лівий) кут компонента з відліком від осередку, зі значеннями gridx = 0, gridy = 0.

Три компонента GridCell, певні в лістингу 7 , Також містять атрибут gridwidth. Цей атрибут визначає число йдуть підряд осередків в сітці, які може зайняти компонент. Наприклад, перший об'єкт GridCell в лістингу 7 (Текстове поле калькулятора) має значення атрибута gridwidth, рівне 4. Це значення говорить про те, що текстове поле повинно займати чотири колонки. Значення його атрибутів gridx і gridy рівні 0, що говорить про те, що лівий верхній кут текстового поля повинен починатися в першому рядку першої колонки сітки.

Текстові поля і кнопки

Кожен компонент GridCell, визначений у лістингу 7 , Містить значення віджета, яке визначає, що буде відображено в екранної області осередки. Осередки в додатку "Калькулятор" містять віджети текстових полів і кнопок.

В лістингу 7 нові об'єкти визначаються безпосередньо в вмісті атрибута. Нижче показаний альтернативний сценарій визначення текстового поля в JavaFX Script - визначення текстового поля як змінної textField поза вмісту атрибута content. Це оголошення приведено в лістингу 8. Після того, як текстове поле визначено, атрибут content об'єкта GridCell для текстового поля може містити тільки ім'я змінної в якості значення.

Лістинг 8. Оголошення TextField

var textField = TextField {// визначає значення за замовчуванням, що відображається в текстовому полі value: "." // визначає тип вирівнювання horizontalAlignment: TRAILING onChange: operation (s: String) {// не зраджувати значення, якщо користувач ввів некоректний символ}};

Об'єкт TextField має чотири атрибута. Атрибут value визначає значення за замовчуванням, яке буде з'являтися в текстовому полі. Атрибут horizontalAlignment вказує, як вирівнювати вміст текстового поля. У таблиці 7 описуються можливі значення атрибута horizontalAlignment:

Таблиця 7. Варіанти вирівнювання в TextField.

Значення Опис TRAILING Вирівнювання по правому краю. LEADING Вирівнювання по лівому краю. CENTER Вирівнювання по центру.

У калькуляторі використовується текстове поле з вирівнюванням по правому краю, на що вказує ключове слово TRAILING.

Атрибут onChange віджета textField містить операцію, яка визначає, що станеться, коли користувач змінить вміст текстового поля. У додатку "Калькулятор" проводиться перевірка на допустимість символів.

Кнопки багато в чому визначаються аналогічно текстових полів. Можна спочатку визначити кнопку як змінну або визначити її безпосередньо в атрибуті content батьківського об'єкта. У лістингу 9 показано визначення кнопки Back:

Лістинг 9. Оголошення об'єкта Button

content: Button {text: "Back" action: operation () {// видалення останнього введеного символу}}

Віджет Button містить два атрибути: text і action. Значення атрибута text - це те, що буде відображатися на кнопці. Атрибут action містить операцію, яка описує, що станеться, коли користувач натисне на цю кнопку. В даному випадку кнопка Back повинна видаляти останній символ, введений в текстове поле, визначене в лістингу 8 .

Крім віджетів, використаних в тестовому додатку "Калькулятор", існує безліч інших. Більш детальну інформацію про методи розміщення GUI-компонентів, віджети, представлених тут, і інших компонентах призначеного для користувача інтерфейсу см. В розділі ресурси .

висновок

JavaFX Script - це дуже динамічний стерпний мову, що дозволяє створювати графічні додатки, аналогічні тим, які створюються в Swing, але з набагато меншими витратами праці. Хоча JavaFX Script відрізняється по синтаксису від Java-коду, багато хто з основних технологій однакові. Ми рекомендуємо дослідити JavaFX Script і його потенціал глибше і використовувати знання, отримані з цієї статті, для створення власних додатків на JavaFX Script.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів