Розробка уроку — практичної роботи

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

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

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

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

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

Хід уроку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Використання класів 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, що містить такі файли коду:

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

Використавши наявні у вікні елементи керування, розміри стовпчиків можна змінити. Наприклад, таким чином.

Файл FXML.fxml у середовищі Scene Builder буде відображено таким чином.

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

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


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

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

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

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

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

  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 можна створити і редагувати:

Потрібно використати останній варіант. Інакше кажучи, створити програму (мовою 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" />

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

<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>

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

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

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


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