Chloe Choi wanted to learn how to create graphical user interfaces (GUIs) using Java after becoming comfortable with console-based programs. She explored using the Swing GUI toolkit and integrated development environments (IDEs) IntelliJ and NetBeans to develop two programs: a Tic-Tac-Toe game and a BMI calculator. For the Tic-Tac-Toe game, developed in IntelliJ, she created a JFrame containing a grid of JButtons and menus to start and exit the game. For the BMI calculator, developed in NetBeans, she used a JTabbedPane and JPanels to calculate BMI using both standard and metric formulas. Overall, she found IntelliJ better for coding but

1. CONSOLE TO GUI
CHLOE CHOI

2. Table of Contents
Motivation
Prerequisites
Attempt 1: TicTacToe.java with IntelliJ
Attempt 2: BMICalculator.java with NetBeans
Conclusion

3. Motivation
Already being comfortable with coding for programs
that utilise the console, I wanted to get out of my
comfort zone and try GUI.
http://www.slideshare.net/LunaTokki/refactoring-
practice-cleaner-code

4. Prerequisites
GUI (Graphical User Interface) toolkit for Java
IDE (Integrated Development Environment)

5. 1. Swing (1/2)
GUI Toolkit for Java
Swing is a GUI widget toolkit for Java. It is part of
Oracle's Java Foundation Classes (JFC) — an API for
providing a graphical user interface (GUI) for Java
programs.*
The main characteristics of the Swing toolkit:
- platform independent
- customizable
- extensible
- configurable
- lightweight
* https://en.wikipedia.org/wiki/Swing_(Java)

6. 1. Swing (2/2)
Difficulties
I had to learn new things to utilise Swing.
Many packages containing various components
How to use these various components?
Containers and Containment Hierarchies look
complicated.
Strange concept of “Listener”
A proper action listener should be plugged to a
component.
Making a neat Look and Feel is not easy.

7. 2. IDE
Intellij vs. NetBeans
I wrote the GUI programs
with IntelliJ and NetBeans.
IntelliJ: TicTacToe.java
NetBeans: BMICalculator.java
In my opinion, each has the pros and cons.
For coding: IntelliJ > NetBeans
For designing: NetBeans > IntelliJ

8. Attempt 1
TicTacToe.java with IntelliJ

9. Structure
JFrame : A Top-level Container
JMenuBar containing
JMenuItems “New game” “Exit”
Content Pane, JPanel
Nine JButtons onto GridLayout

10. Valid&
Cell
Start
Initialize
Board
Select
a&Cell
Update&Board&and&
Turn&Change
Check&
Winner
Turn&Change
Display&
Dialog
Board
Tied
Terminate
Yes Yes
No
No
Yes
No
Initialised Board
Flowchart
Tied Board
Dialog Message

11. Execution Example (1/2)

12. Execution Example (2/2)

13. Remarks
IntelliJ is a more professional application.
The IDE can point out many errors without initial compilation
and has many features for a smooth coding experience.
However, the GUI features of the application were more
frustrating than expected.
It has the same level of professionalism displayed when
coding for console but it limits the author’s creativity and
freedom.
Each component has to fit a certain mould and therefore
resizing and arranging the components was a nightmare.

14. Attempt 2
BMICalculator.java with NetBeans

15. Swing Form in NetBeans (1/3)
Whole Window of Swing Form

16. Swing Form in NetBeans (2/3)
Visualised Swing Containers
and Components in Palette.
Just add components by Drag and Drop.
You can find the unmodifiable
code blocks after adding components.

17. Swing Form in NetBeans (3/3)
Various Properties are easily manipulated.
And the action listeners to be overridden
are automatically created.
You can find the properties
in the method initComponents().

18. Structure
JFrame : A Top-level Container
JTabbedPane
Each JPanel contains
own Components:
JLabel, JTextField, JButtons
JPanel: Standard and Metric

19. Standard/Metric Calculator
Each JPanel has its own components (JLabels,
JTextFields, and JButtons) for applying different
BMI formula.
Both use the common method, getObesityRate().

20. Execution Example

21. Remarks
NetBeans is an application that can be thought of as text editor
with a built in compiler.
Meaning, this is the perfect program for new programmers
who are learning code so they can fix their own mistakes. It is
not an application used in a professional level.
However, ignoring the rudimentary design of the interface, the
GUI feature was well catered for.
Each component can be arranged freely and resizable to the
author’s content.
NetBeans also automatically creates handlers for each
component created making the GUI development very easy.

22. Conclusion
Using both programs, IntelliJ and NetBeans, during
the GUI development is the best option.
Coding: IntelliJ
GUI: NetBeans
GUI itself is very straight forward. The components
are already built in so the author only has to think
about how they can translate their console into a
GUI.

23. References
https://en.wikipedia.org/wiki/Swing_(Java)
https://docs.oracle.com/javase/tutorial/uiswing/
components/index.html