The objective of this assignment is to familiarize you with GUI design with Java

Question

The objective of this assignment is to familiarize you with GUI design with JavaFX. Your task is simple. Take any of the GUI examples that were discussed in the lectures and extend it. You can design any GUI that you wish the only requirement is that it must have UI Controls and Action Events (e.g., Button and/or Mouse events and/or Key presses). Here are some suggestions of what you can do: Create an audio playlist Create a video playlist Create a GUI with buttons, etc. for a simple application Extend the ball animation program to include multiple balls Create a traffic light simulator Create a stop watch. Create a simple game like Tic Tac Toe or extend the Tic Tac Toe game discussed in the lectures. Again, these are just suggestions. Be creative! Enjoy working on the assignment

Explanation / Answer

Responsive Design for JavaFX

Hendrik on 2014/11/04 - 01:00 in JavaFX
Once of the new APIs that I have shown at JavaOne was ResponsiveFX that can be used to add responsive design to your
JavaFX application. ResponsiveFX is an open source project maintained by Canoo and will be published to Maven Central the
next days.

Responsive Design & JavaFX
By default JavaFX doesn’t provide an API for responsive design. Thankfully JavaFX supports CSS and therefore we can
add this feature. This is exactly what ReponsiveFX does. By using the API you can simply use the same style classes as in
HTML in your JavaFX application. To add the responsive support to an application you only need one line of Java code:

ResponsiveHandler.addResponsiveToWindow(primaryStage);

This adds the support for responsive design to the given stage. All nodes that are in this stage can now use the described
style classes. Therefore you can simply do the following in Java code:
TableView table = new TableView(items);
table.getStyleClass().addAll("visible-lg", "visible-md");

ListView list = new ListView(items);
list.getStyleClass().addAll("visible-xs", "visible-sm");

pane.getChildren().addAll(table, list);

Responsive Design & pseudo classes
By using the given classes you can hide and show components depending to the frame size in your application but often you
want to show different sizes of controls depending on the screen size. Let’s think about a toolbar that should have a
different size in all supported screen sizes. In HTML you would do the following:

<div class="visible-xs">...<div> <!--extra small-->
<div class="visible-sm">...<div> <!--small-->
<div class="visible-md">...<div> <!--medium-->
<div class="visible-lg">...<div> <!--large-->

In JavaFX this would correspond the following code snippet:
Toolbar extraSmallToolbar = new Toolbar(...);
extraSmallToolbar.getStyleClass().add("visible-xs");

Toolbar smallToolbar = new Toolbar(...);
smallToolbar.getStyleClass().add("visible-sm");

Toolbar mediumToolbar = new Toolbar(...);
mediumToolbar.getStyleClass().add("visible-md");

Toolbar largeToolbar = new Toolbar(...);
largeToolbar.getStyleClass().add("visible-lg");

pane.getChildren().add(extraSmallToolbar, smallToolbar, mediumToolbar, largeToolbar);

This is very bad practive because Java must handle all 4 instances in this case. Even if only one toolbar will be
displayed on screen all are part of the scene graph. If you will do this with controls that contains images you will blow
up your memory for example. Therefore you shouldn’t do this. I thinks it’s clear that we need a better solution and
ResponsiveFX contains one :)
Next to the style classes ReponsiveFX provides pseudo classes for all supported screen sizes. Here is a list of the
supported pseudo classes:
extreme-small-device
small-device
medium-device
large-device
By using this pseudo classes you can define the visualization of a node depending on the current application size. The
pseudo classes will automatically be added and removed for each node inside the scene graph of a windows that is handled
by the ResponsiveHandler.

Related Questions

Navigate

• Browse (All)
• Browse T
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.