3.3 Лабораторна робота № 3. Використання вбудованого браузеру, будування графіків та створення анімації.

Мета роботи: Розширити можливості додатку, впровадивши можливості обзору веб-сторінок та перегляду інформації у вигляді графіків. Познайомитись з елементом інтерфейсу користувача під назвою акордеон. Навчитися створювати анімацію.

КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ

Веб-браузер

Для роботи з вбудованим браузером створені два основних класи — WebEngine та WebView.

Клас WebEngine надає базову функціональність веб-сторінки. Він підтримує взаємодію з користувачем, таку як навігація за посиланнями, відправка HTML-форм, хоча і не взаємодіє з користувачами безпосередньо. Клас WebEngine обробляє одну сторінку одночасно. Він підтримує основні функції перегляду та завантаження HTML-контенту, доступу до DOM, а також виконання JavaScript команд.

Два конструктори дозволяють створити об'єкт WebEngine: порожній конструктор і конструктор із зазначеним URL. Якщо екземпляр класу створений за допомогою порожнього конструктора, адреса може бути передана до об'єкту WebEngine через метод load.

Клас WebView являє собою розширення класу Node. Він інкапсулює об'єкт WebEngine, включає в сцену програми HTML-контент та надає властивості і методи для застосування ефектів і перетворень. Метод getEngine() для об'єкта WebView повертає WebEngine, пов'язаний з ним.

Акордеон

Елемент Accordion в JavaFx по суті є сукупністю елементів TitledPane (титулована панель). TitledPane — це панель, яка має назву і вміст, який згортається або розгортається при натисненні на заголовок. Титулована панель може мати наступний вигляд (рис 3.16).

Додати титуловані панелі можна за допомогою методу add() або addAll():

accordion.getPanes().addAll(tps);

Також можна встановити панель, яка буде відкритою за замовченням:

accordion.setExpandedPane(tps[0]);

Рис. 3.16. Різні види Titled Pane

Вміст інформаційної комірки може бути різним і створюється користувачем. Згруповані елементи цього типу в акордеоні виглядають наступним чином (рис 3.17):

Рис. 3.17. Приклад елементу Accordion

Анімація у JavaFx

Анімація у JavaFX може бути створена за допомогою елементів Transition (перехід) та Timeline Animation (анімація за часовою шкалою).

Анімації переходів відбуваються у внутрішній часовій шкалі. Вони можуть бути скомпоновані для створення паралельної анімації. В залежності від властивості, яка буде змінюватись, можна виділити декілька типів переходів.

Перехід прозорості (Fade Transition). Код у прикладі нижче створює прямокутник з закругленими краями, потім створюється анімація прозорості і запускається за допомогою метода play().

final Rectangle rect1 = new Rectangle(10, 10, 100, 100);

rect1.setArcHeight(20);

rect1.setArcWidth(20);

rect1.setFill(Color.RED);

...

FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1);

ft.setFromValue(1.0);

ft.setToValue(0.1);

ft.setCycleCount(Timeline.INDEFINITE);

ft.setAutoReverse(true);

ft.play();

Перехід по шляху (Path Transition). Змінюється позиція елемента по встановленому маршруту (рис. 3.18).

Рис. 3.18. Перехід по шляху елемента

final Rectangle rectPath = new Rectangle (0, 0, 40, 40);

rectPath.setArcHeight(10);

rectPath.setArcWidth(10);

rectPath.setFill(Color.ORANGE);

...

Path path = new Path();

path.getElements().add(new MoveTo(20,20));

path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));

path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));

PathTransition pathTransition = new PathTransition();

pathTransition.setDuration(Duration.millis(4000));

pathTransition.setPath(path);

pathTransition.setNode(rectPath);

pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);

pathTransition.setCycleCount(Timeline.INDEFINITE);

pathTransition.setAutoReverse(true);

pathTransition.play();

Паралельний перехід (Parallel Transition). Робота декількох анімацій виконується одночасно (рис. 3.19).

Рис. 3.19. Паралельний перехід

Rectangle rectParallel = new Rectangle(10,200,50, 50);

rectParallel.setArcHeight(15);

rectParallel.setArcWidth(15);

rectParallel.setFill(Color.DARKBLUE);

rectParallel.setTranslateX(50);

rectParallel.setTranslateY(75);

...

FadeTransition fadeTransition =

new FadeTransition(Duration.millis(3000), rectParallel);

fadeTransition.setFromValue(1.0f);

fadeTransition.setToValue(0.3f);

fadeTransition.setCycleCount(2);

fadeTransition.setAutoReverse(true);

TranslateTransition translateTransition =

new TranslateTransition(Duration.millis(2000), rectParallel);

translateTransition.setFromX(50);

translateTransition.setToX(350);

translateTransition.setCycleCount(2);

translateTransition.setAutoReverse(true);

RotateTransition rotateTransition =

new RotateTransition(Duration.millis(3000), rectParallel);

rotateTransition.setByAngle(180f);

rotateTransition.setCycleCount(4);

rotateTransition.setAutoReverse(true);

ScaleTransition scaleTransition =

new ScaleTransition(Duration.millis(2000), rectParallel);

scaleTransition.setToX(2f);

scaleTransition.setToY(2f);

scaleTransition.setCycleCount(2);

scaleTransition.setAutoReverse(true);

parallelTransition = new ParallelTransition();

parallelTransition.getChildren().addAll(

fadeTransition,

translateTransition,

rotateTransition,

scaleTransition

);

parallelTransition.setCycleCount(Timeline.INDEFINITE);

parallelTransition.play();

Також існують ще переходи обертання (Rotate Transition), послідовні переходи (Sequential Transition) та ін.

Отже, в прикладах вище анімація відбувається на основі властивостей, таких як розмір, колір, прозорість, а для створення анімації за часовою шкалою потрібно використовувати Timeline (часову шкалу). JavaFX підтримує анімацію з ключовими кадрами (key frame animation). В цих кадрах визначається початкове значення переходу властивості та кінцеве значення цього переходу в конкретні часові проміжки. Система сама зробить необхідну анімацію. Також її можна контролювати: запускати, зупиняти, повертати, починати спочатку, повторяти окремі моменти. Наступний приклад продемонструє використання анімації за допомогою часової шкали. Буде створений прямокутник і вказані зміни властивості координати Х (рис. 3.20):

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);

rectBasicTimeline.setFill(Color.BROWN);

...

final Timeline timeline = new Timeline();

timeline.setCycleCount(Timeline.INDEFINITE);

timeline.setAutoReverse(true);

final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300);

final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);

timeline.getKeyFrames().add(kf);

timeline.play();

Рис. 3.20. Зсув прямокутника за допомогою часової шкали