Introduction to Programming

Week 14 (Reading | Slides | Exercises)

• JavaFX Fundamentals
• JavaFX Application Basic Structure By Example
• JavaFX Layout Controls

• Tutorials Point - JavaFX
• JavaFX Reference
• JavaFX API

Exercise 14.01: Explain, in your own words, the concepts of a stage and a scene.

Exercise 14.02: Explain, in your own words, the role of the Application class in JavaFX.

Exercise 14.03: Write an application that has a window with the title Hello World!, and a width and height of 800 times 600 pixels.

Exercise 14.04: Experiment with the following methods on the Stage class: setOpacity, setAlwaysOnTop, setFullScreen, setMinWidth, and setMaxWidth. Do these methods behave as you would expect? If not, try to find out why.

Exercise 14.05: Experiment with the following methods on the Scene class: setCursor and setFill. Add event handlers with setOnMouseClicked and setOnKeyPressed. The event handlers should print some text to the terminal.

Exercise 14.06: Write an application with a single button with the text Click Me! When the button is clicked, change its text to You Clicked! and disable the button.

Exercise 14.07: Write an application with a label and a button inside a horizontal box. When the button is clicked, change the text of the label to You Clicked!

Exercise 14.08: Write an application with nine buttons numbered from 0 to 9 (similar to the dialpad on a mobile phone). Layout the buttons using either horizontal and vertical boxes, or using a grid.

Exercise 14.09: Write an application with a textfield and a button. When the button is clicked, the text in the textfield should be capitalized.

Exercise 14.10: Write an application with a button. When the button is clicked, show an alert with the text You clicked the button!

Exercise 14.11: Write an application with a text field and a password field. Add a button that when clicked checks whether the username and passwords are correct.

Exercise 14.12: Write an application with three radio buttons labeled Red, Green, and Blue. When a radio button is selected, change the background color of the scene to the corresponding color.

Exercise 14.13: Write an application with a progress bar and a button. Each time the button is clicked, increase the progress bar by 10%. When it reaches 100%, display an alert saying Task Complete! and reset the progress bar to 0.

Exercise 14.14: Write an application with a large text area and two labels. One label should display Words: X and the other should display Characters: Y, where X and Y are the counts of words and characters in the text area. The labels should update automatically as the user types.

Write a graphical user interface for a simple calculator application.

Here are some steps to get started:

• Add a label to show the currently entered number.
• Use horizontal and vertical boxes, or a grid, to construct a layout of buttons numbered from 0 to 9.
• Add buttons for addition, subtraction, multiplication, and division.

The calculator should work as follows: You press "5", it shows up in the display, then you press "+", and then you press "7" and it becomes "12".

Hint: Experiment with the calculator on your system to discover how it works.

Here are some optional extensions to consider:

• (optional) Style the label to make the result bigger.
• (optional) Style the digit buttons so they are bigger.
• (optional) Add an event handler such that user can press the keys 0 to 9 on the keyboard with the same effect as using the buttons.
• (optional) Add a try-catch block to detect division by zero and show an appropriate alert message.
• (optional) Add an event handler such that the escape key resets the calculator.