CONSOLE TO GUICHLOE CHOI

Table of ContentsMotivation

Prerequisites

Attempt 1: TicTacToe.java with IntelliJ

Attempt 2: BMICalculator.java with NetBeans

Conclusion

MotivationAlready 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

PrerequisitesGUI (Graphical User Interface) toolkit for Java

IDE (Integrated Development Environment)

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)

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.

2. IDEIntellij 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

Attempt 1 TicTacToe.java with IntelliJ

StructureJFrame : A Top-level Container

JMenuBar containingJMenuItems “New game” “Exit”

Content Pane, JPanel

Nine JButtons onto GridLayout

Valid&Cell

Start

InitializeBoard

Selecta&Cell

Update&Board&and&Turn&Change

Check&Winner

Turn&Change

Display&Dialog

BoardTied

Terminate

Yes Yes

No

No

Yes

No

Initialised Board

Flowchart

Tied Board

Dialog Message

Execution Example (1/2)

Execution Example (2/2)

RemarksIntelliJ 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.

Attempt 2 BMICalculator.java with NetBeans

Swing Form in NetBeans (1/3)

Whole Window of Swing Form

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.

Swing Form in NetBeans (3/3)

Various Properties are easily manipulated. And the action listeners to be overriddenare automatically created.

You can find the properties in the method initComponents().

Structure

JFrame : A Top-level Container

JTabbedPane

Each JPanel contains own Components: JLabel, JTextField, JButtons

JPanel: Standard and Metric

Standard/Metric Calculator

Each JPanel has its own components (JLabels, JTextFields, and JButtons) for applying different BMI formula.

Both use the common method, getObesityRate().

Execution Example

RemarksNetBeans 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.

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.

Referenceshttps://en.wikipedia.org/wiki/Swing_(Java)

https://docs.oracle.com/javase/tutorial/uiswing/components/index.html