Week 11: Homework 7
Programming with JavaFX: Events and Effects
Objectives
To start writing simple graphics and GUI programs to learn the basic of event-driven programming, and have a a first experience of JavaFX RIA framework.
Note
Define all programs be part of the package hw7
.
Preparations
Review the lectures on JavaFX and event-driven programming using either R1, R2, R3, R4, lectures slides, or Oracle’s JavaFX Tutorials.
Make sure that you have forked the GitLab repository and cloned the forked one your
comp6700-2017
Gitlab repository (or more likely, if you have cloned it
already, run git pull
command to update it, either on the command line, or
from an IDE if your are using one).
Exercise One: a simple JavaFX program with shapes
Using the IntelliJ IDEA IDE (or Netbeans, or Eclipse), create a
JavaFX program called ColouredShapes.java
, which displays a few
simple shapes like square, triangle, circle and so on, all having
different colours.
Then (after succeeding in the previous step) attach an event handler to
each of the shape to detect events when the mouse moves into the region
occupied by the shape. By using the original Assignment Two code as
example, you will have to set onMouseMovedProperty
of a shape object
to an EventHandler⟨MouseEvent⟩
and implement the
handle(MouseEvent e)
method to generate a desired effect when the
mouse enters the shape region. Consider the following effects:
- printing mouse coordinates to
stdout
- changing the shape colour while the mouse is in and changing the colour back when it’s out
Exercise Two: adding transition effects
Create another program, called SimpleTransitions.java
. which displays
a simple shape with colour and then does one of the following when an
event is generated:
- moves to another location (choose yourself which direction and how far) and stay there when you perform a mouse click inside it
- rotates by 45° clockwise when you press the key “UP”, and by 45° counterclockwise when you press “DOWN”
- (optional) morphs into a different shape object when click the mouse outside the original shape. Make the shape changing lasts 3 or 5 seconds.
When (if) all of the above transition effects work as described, try to combine them so a transition involves movement (shift and rotation), shape and colour changes. I leave it to you to choose the actual combination and the event which triggers the transition: It can be a mouse event, or a keyboard event, or you can add a button which will trigger the transition when clicked.
Exercise Three (optional): Model and View
Create two classes, View.java
(which is a
javafx.application.Application
class, like the above it contains the
main-launch-start
methods) and Model.java
class (which is an
ordinary Java class defining the data). Choose Model to represent a
collection of circles of different radii, locations and colours. These
must be logical shapes (like abstract geometrical objects), not
graphical primitives which JavaFX displays (examples of which we’ve seen
in Ex. 2). Then make the View to create the Model object (called
model
), read its data which describe the shapes and then generate
graphical shapes according to their description in the model
object.
Finally, extend the Model to allow the colour to take one of the several
values (use private
array field Color[] colours
to choose from) when
model
object is created. Then, when the model
is displayed in the
View, mouse clicks inside any of the circles result in the colour change
such that a sequence of successive clicks allow to change the circle
colour several times utilising the full gamut.
Assessment
You will get up to two marks (one for each task), if you submit your
work by pushing the local repository using git push
command by Friday,
19 May 2017, in your GitLab repository following the instructions which
are provided in the Git and GitLab.
The code should be placed in
the hw7
subdirectory of your locally cloned repository. You can optionally
(if the opportunity will exist) present your solution to tutor during the Week
11 labs.