Тема: побудова графіка функції у середовищі Netbeans з використанням бібліотеки JavaFX.

Мета уроку: після виконання роботи учень повинен:

• пояснювати: призначення й можливості бібліотеки JavaFX;
• уміти: будувати графіки функцій і діаграми.

Обладнання: комп’ютери зі встановленими ОС, JDK, інтегрованим середовищем програмування Netbeans і встановленою бібліотекою JavaFX (останнє є бажаним, але не обов'язковим).

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Вивчення нового матеріалу.
4. Інструктаж з ТБ.
5. Закріплення вивченого матеріалу.
6. Підбиття підсумків уроку.
7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Дати відповіді на питання.

1. Що таке лінійна функція?
2. Що таке квадратична функція?
3. Що таке раціональна функція?
4. Що таке графік функції?
5. Що таке діаграма? Кругова? Стовпчикова?

3. Вивчення нового матеріалу

JavaFX — це бібліотека мовою Java для створення графічного інтерфейсу корис­тувача ігор і настільних застосунків з такими властивостями:

• використовує інтегровану 3D-графіку, аудіо, відео і вбудовані мережні застосунки;
• багатоплатформна (Linux, Windows, Mac OS) і безкоштовна;
• має готові до використання частини діаграм;
• використовує стилі CSS і формат FXML.

Офіційний довідник містить вичерний опис (англійською мовою) можливостей використання CSS у JavaFX. Подані нижче приклади дають уявлення про використання CSS для задання кольору складових графіків і діаграм.

Сторінка офіційного сайту містить посилання на документацію (англійською мовою) можливостей JavaFX. У тому числі щодо малювання графічних примітивів, що не розглянуто нижче.

Scene Builder — середовище наочного програмування інтерфейсу для бібліотеки JavaFX і запиcом результату мовою xml. Зовнішній вигляд вікна цього засобу такий.

XML — розширювана мова розмітки (англійською Extensible Markup Language, скорочено XML) — запропонований консорціумом World Wide Web Consortium (W3C) стандарт побудови мов розмітки ієрархічно структурованих даних для обміну між різними застосунками, зокрема, через Інтернет. XML-документ складається із текстових знаків і придатний до читання людиною.

Стандартні засоби JavaFX надають готові складові для побудови графіків і діаграм.

Абстрактний клас Chart є основою для всіх графіків і діаграм. Безпосередньо похідними від нього є класи:

• PieChart — кругова діаграма;

• XYChart — абстрактний клас — основа для побудови інших діаграм:

  • AreaChart — діаграма з областями — відображення фігури, обмежені ламаними, що проходить через задані точки, віссю абсцис і вертикальними прямими, що проходять через крайні вершини ламаних;

  • BarChart — гістограма — відображення прямокутниками однакової ширини числових даних, пропорційних висотам прямокутників;

  • BubbleChart — бульбашкова діаграма — відображення кругами числових даних;

  • LineChart — графік — відображення ламаних, вершини яких мають дані координати;

  • ScatterChart — точкова діаграма;

  • StackedAreaChart — аналог AreaChart з накопиченням;

  • StackedBarChart — аналог StackedBarChart з накопиченням.

Конструктори класів, похідних від XYChart, вимагають визначення двох об'єктів типу Axis (вісь).

Axis — це абстрактний клас для представлення осі на графіку або діаграмі. Похідними від нього є такі класи:

• CategoryAxis — вздовж осі розташовують мітки у вигляді набору рядків;

• абстрактний клас ValueAxis, що має похідний клас NumberAxis, який використовують, коли вісь представляє шкалу числових значень.

Використання класів PieChart, AreaChart, BarChart, BubbleChart подано прикладом пакунку graphics, який містить файли Graphics.java, Graphics.css і створює таке вікно.

У прикладі використано кольори, вказані у файлі Graphics.css. Зверніть увагу на потребу вказувати назву пакунку при замовленні ресурсу навіть тоді, коли всі файли розташованно в одній теці, — див. вказівку:

scene.getStylesheets().add("/graphics/Graphics.css");

наприкінці файлу Graphics.java. Якщо цю вказівку вилучити або закоментувати, буде використано кольори, задані у JavaFX як усталено, — такі, як на наступному малюнку.

Використання класів LineChart, ScatterChart, StackedAreaChart, StackedBarChart подано прикладом пакунку graphics, який містить файли Graphics.java, Graphics.css і створює таке вікно.

Для точкової діаграми ScatterChart значки — 4-кутну червону зірку і зелене кільце — створено такими вказівками:

.default-color0.chart-symbol
{ -fx-background-color: red;
  -fx-scale-shape: true;
  -fx-shape: "M 0.0 10.0 L 3.0 3.0 L 10.0 0.0 L 3.0 -3.0 L 0.0 -10.0 L -3.0 -3.0 L -10.0 0.0 L -3.0 3.0 Z ";
  -fx-opacity: 1;
}

.default-color1.chart-symbol
{ -fx-background-color: green, white;
  -fx-background-insets: 0, 2;
  -fx-background-radius: 5px;
  -fx-padding: 5px;
}

наприкінці файлу Graphics.css. Задавши інші координати ламаної для властивості -fx-shape, можна отримати многокутник довільного вигляду.

Створення гістограми з динамічним введенням числових даних подано прикладом пакунку graphics, що містить такі файли коду:

• Graphics.java — точка входження, замовлення ресурсу fxml і створення вікна;
• FXML.fxml — визначає всі необхідні складові;
• FXMLController.java — описує відповідь на зміну стану елементів керування.

Структура файлів така сама, як в описі встановлення JavaFX. Програма створює таке вікно.

• FXMLLoader.load(getClass().getResource("/graphics/FXML.fxml")); у файлі Graphics.java;
• fx:controller="graphics.FXMLController" у файлі FXML.fxml.

4. Інструктаж з ТБ
5. Закріплення вивченого матеріалу

Завдання 1. Встановити JavaFX і Scene Builder, діючи згідно з наявним описом.

Примітка. Якщо програмне забезпечення вже встановлено у шкільному комп'ютерному класі, завдання виконати на домашньому ПК.

Завдання 2. Створити програму мовою Java, яка будує таке вікно розміру 700×720:

з графіками таких функцій:

• y = x/2 + 0.75;
• y = x²/4 + x/3 – 0.25;
• y = (x/8 + 0.0625)/(2x – 1);
• x = cos 5t, y = sin 7t, при t ∈ [0, 2π] — фігура Ліссажу.

Вказівки до виконання

1. Відкрити пакунок graphics, створений при встановленні JavaFX згідно з наявним описом. Якщо такого немає, діяти згідно з пунктами 6–7 цього опису.

2. Замінити вміст файлу Graphics.java на вміст вже розглянутого з прикладу використання класів LineChart, ScatterChart, StackedAreaChart, StackedBarChart.

3. Змінити вміст файлу Graphics.java, щоб отримати потрібні графіки.

   • Використати:
     • LineChart — для перших двох графіків;
     • ScatterChart — для двох останніх.

     Причина різних підходів така: третя функція має розрив при x = 0.5, а для фігури Ліссажу послідовність значень абсцис не є монотонною. Тому використання LineChart у цих випадках призведе до хибного результату.

   • Для перших двох графіків достатньо використати 100 точок, для останніх двох кількість точок має бути достатньою для того, щоб круги "злиплися" в одну криву. Наприклад, 10000 точок.

   • Для того, щоб зробити легенди графіків і діаграм невидимими, застосувати вказівку:
     
     *.setLegendVisible(false);
     
     де замість зірочки * написати назву об'єкта типу LineChart чи ScatterChart.

4. Налаштувати колір і розмір кругів, змінивши вміст вже розглянутого файлу Graphics.css.

5. Отримати потрібне розташування графіків, змінивши вміст файлу Graphics.java. Для цього використати Vbox — аналог Нbox — для розташування об'єктів по вертикалі.

6. Змінені файли Graphics.java, Graphics.css записати у вказану вчителем теку.

7. Повідомити вчителя про завершення роботи.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання

SVG — Scalable Vector Graphics (англійською: масштабована векторна графіка) — специфікація мови розмітки на основі XML або формат файлу двовимірної векторної графіки (статичної, анімованої, інтерактивної).

Ця специфікація є відкритим стандартом, розробленим робочою групою SVG Working Group організації World Wide Web Consortium.

Файл svg можна створити і редагувати:

• у середовищі редактора векторної графіки, наприклад, Inkscape;
• у середовищі текстового редактора;
• за допомогою програми, написаної довільною мовою програмування.

Потрібно використати останній варіант. Інакше кажучи, створити програму (мовою Python), яка створить іншу програму (мовою розмітки) для зображення кривої, у тому числі графіка функції: лінійної, квадратичної, раціональної. Для цього немає необхідності вивчати детальний опис (англійською) з прикладами. Достатньо використати лише такі відомості.

<svg>…</svg> — контейнер, всередині якого (замість трьох крапок) записують всі інші вказівки svg (при створення статичного малюнку у файлі формату svg). Наприклад, контейнер:

<svg width="600" height="400" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg">
</svg>

передбачає створення малюнку розміру 600×400 пікселів.

<line /> — вказівка для побудови зображення відрізка прямої.

Наприклад, вказівка:

<line x1="12" y1="34" x2="56" y2="78" style="stroke:rgb(0,0,0);stroke-width:2" />

передбачає створення зображення відрізка прямої:

• суцільна лінія чорного кольору — див. style="stroke:rgb(0,0,0);
• товщини 2 — див. stroke-width:2;
• сполучено точки з екранними координатами (12; 34) і (56, 78).

<text>…</text> — контейнер, що описує форматування символів тексту і всередині якого записуєть контейнери для виведення послідовностей символів.

<tspan>…</tspan> — контейнер, що вказує яку послідовність символів і у якому місці потрібно розташувати.

Наприклад, вказівка:

<text style="font-size:12px;font-style:italic;font-weight:normal;font-family:Ubuntu,Calibri"><tspan x="12" y="34">текст для виведення</tspan></text>

передбачає таке виведення тексту:

• гарнітура — Ubuntu або Calibri, якщо Ubuntu немає;
• розмір — 12рх;
• накреслення — курсив (italic) звичайний (normal);
• відносні екранні координати верхнього лівого кута тексту — (12; 34).

Завдання 3. Створити програму мовою Java, яка створює файли з назвами 1, 2, 3, 4 і типом svg, що містять графіки побудованих функцій у форматі svg. У разі потреби можна використати демонстраційне розв'язання мовою Ruby наявної розробки уроку.

Завдання 4. У разі потреби доробити завдання 2. Порівняти з очікуваним: Graphics.java, Graphics.css.

Текст упорядкував Олександр Рудик.