Upload
chloe-choi
View
201
Download
1
Embed Size (px)
Citation preview
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