Introduction to GUI in Java

When it comes to the Java ecosystem, Swing act as a toolkit for GUI widget. Swing is responsible for
providing the APIs, for creating the user interface for Java programs. Before the advent of Swing,
AWT i.e. Abstract Window Toolkit was responsible for providing an advanced form of user interface
components. But Swing supersedes the AWT library and come up with a look and feel which
resemble with most of the platform. These created UI components are not only advanced in terms
of appearance and feel, but they are also pluggable in nature. That means the underlying platform
is not bounded with a specific set of UI components. UI components like buttons, labels, and
checkbox can be easily created with Swing APIs. Thus, Swing is more flexible in nature than AWT.

Swing not just provide a designer with a regular UI component, but advanced components as well
like tabbed panel, scroll panes, tables, trees etc. Swings have some added advantage over AWT,
which makes Swing overtake AWT, in developing UI components. UI components in Swing are
developed entirely in Java and thus they are platform independent, which is unlike AWT
components. The framework adopted by Swing is MVC i.e. Model-view-controller, which provides
an abstraction between the graphics UI and the underlying code structure. This abstraction helps
the UI component writer in maintaining “separation of concern” like architecture. Any developer
can have access to all available Swing classes with their complete documentation, in Java API guide.
One classy aspect of Swing is its modular-based architecture because this writer can come up their
own custom UI implementation of standard UI components.

JavaFX act as a standard GUI library, having an extensive support for desktop computer and
different web browsers on a different operating system like Windows, Linux etc. Desktop
applications can be created efficiently using JavaFX, which act as a software platform. In the earlier
edition of JavaFX, scripts were being used to build JavaFX applications, these scripts were
declarative and static in nature. But with the advent of JavaFX 2.0 version, it is implemented as Java
library, means applications now can be written using native Java code instead of scripts.
Key Differences between Java Swing and JavaFX

1. Swing is the standard toolkit for Java developer in creating GUI whereas JavaFX provides a
platform support for creating desktop applications.
2. Swing has a more sophisticated set of GUI components whereas JavaFX has a decent
number of UI components available but lesser than what Swing provides.
3. Swing is a legacy library which fully features and provide the pluggable UI components
whereas JavaFX has UI components which are still evolving with a more advanced look and
feel.
4. Swing can provide UI components with a decent look and feel whereas JavaFX can provide
rich internet application having a modern UI.
5. Swing related classes can be found in Java API guide with complete documentation whereas
JavaFX doc is available in a various format with a comprehensive detailing and file support.
6. Swing since its advent can create UI component using standard Java component classes
whereas Java FX initially uses a declarative language called JavaFX script.
7. Swing has a UI component library, and act as a legacy whereas JavaFX has several
components built over Swing.
8. Swing has support for MVC, but it is not consistent across component whereas JavaFX
support is very friendly with MVC.
9. Swing has various IDEs which offer a tool for rapid development whereas JavaFX has also
support from various IDEs as well, but it is not as mature as Swing.

In the following document, we will be making use of JFrame and JPanel which are swing-based
containers.
How to Create a Swing GUI in NetBeans

To create a GUI project:

1. Start NetBeans IDE.

2. In the IDE, choose File > New Project (Ctrl-Shift-N).
3. In the New Project wizard, choose the Java category and select Java Class Library. Then click
Next.
4. In the Name and Location page of the wizard, do the following (as shown in the figure
below):
o In the Project Name field, type TestGUI.

o Leave the Use Dedicated Folder for Storing Libraries checkbox unselected.

5. Click Finish.
The project is created and opened in the IDE. You should see the following components:

The Projects window, which contains a tree view of the components of the project, including a
source package but without any files, libraries that your code depends on, and so on.

Right Click on Source Packages and select New > JFrame Form.

Create a class with name TestGUI as per below:

Click on Finish.

Your IDE should now be as below. You may possibly not have the Palette window on the right. You
can view same via Tools > Palette.
 The GUI Builder's various windows include:

 Design Area. The GUI Builder's primary window for creating and editing Java GUI forms. The
toolbar's Source button enables you to view a class's source code, the Design button allows you to
view a graphical view of the GUI components, the History button allows you to access the local
history of changes of the file. The additional toolbar buttons provide convenient access to common
commands, such as choosing between Selection and Connection modes, aligning components,
setting component auto-resizing behavior, and previewing forms.

 Navigator. Provides a representation of all the components, both visual and non-visual, in your
application as a tree hierarchy. The Navigator also provides visual feedback about what component
in the tree is currently being edited in the GUI Builder as well as allows you to organize components
in the available panels.

 Palette. A customizable list of available components containing tabs for JFC/Swing, AWT, and
JavaBeans components, as well as layout managers. In addition, you can create, remove, and
rearrange the categories displayed in the Palette using the customizer.
 Properties Window. Displays the properties of the component currently selected in the GUI Builder,
Navigator window, Projects window, or Files window.

Example

Below is an example of a GUI application which prints the title based on the age, gender and marital
status of the person (Validations have not all been included in this project):

Under Swing Controls, drag and drop the element ‘Label’ to add a label as title for the application.

By default, the label will be titled jLabel1; you can rename it with the text that you wish to enter.

Add 3 ‘Label’ and 3 ‘Text Field’ elements to allow the user to input age, gender and marital status.
Rename labels as appropriate. You may resize any element on the design screen itself.
Add a ‘Button’ element from the Palette to enable the user to submit the form.

Lastly, add another Label element at the end of the screen to display the title.
On the bottom-right hand side, properties of each element such as text or accessible name can be
viewed and adjusted.

To go to the source code for a specific element, you may double-click on the element on the design
screen or go to the ‘Source’ tab.

Code handling to be done:

 When user submits the form, the application should read all input values, deduce the title
and output it.
 These will all be done in the event (code auto generated during element creation) for the
‘Submit’ button.

To read the input value, use the element’s accessible name (viewed from Properties window) and
append .getText() to the name as per below:

Code to determine title:

Code to set label text (label which will display final output to user):

Compile & Run application:

Practical Questions on Java GUI

Question 1

Write a guessing game where the user has to input, via a GUI, a secret integer (generated randomly
between 0 and 1000). After every guess, the program tells the user whether the input number was
too large or too small.

The game ends when the correct value is guessed. The number of tries needed to guess the correct
value should be printed on the screen. You should count as only one try if the user is guessing the
same value multiple times.

Optional: You may enhance your program by limiting the number of guesses allowed.

Hint:

1. Use the following to generate a random number

Random rand = new Random();

randNum = rand.nextInt((upperLimit - lowerLimit) + 1) + lowerLimit;

2. Do not forget your validations!

3. You may use arrays or arrayList to know if user is guessing the same value multiple times.

4. You may use the below code to change the colour or font of the labels:

jLabel2.setForeground(new Color(0, 210, 0));

jLabel2.setFont(new Font("Tahoma", Font.BOLD, 14));

Example:
Question 2

Build a Simple Calculator in Java. It should implement the basic calculations such as:

 Addition
 Subtraction
 Multiplication
 Division

Include validations to properly handle input from the user, such as data type or dividing by 0.

The program should also include a ‘Clear’ functionality to clear anything being displayed at the top
of the screen.

Example: