Java GUI Swing-AWT, Simple 10-steps Coding

UPDATE: You can now clone or download BlueJ project from github.
https://github.com/victorskl/demo-java

This article try to explain the simplest approach in 10-steps coding about Java GUI programming using Swing/AWT. The main focus is understanding the concept and simple programming practice.

Concepts

Java GUI facilities have

  • The container classes
  • The component classes
  • The containment hierarchy
  • The layout managers
  • The event handling

The container classes normally practice two layer approach, i.e. top-level container and 2nd-level container. The 2nd-level container get hold of a group of components, and is nested under top-level container. This forms containment hierarchy.

Layout manager provide several layouts:

  1. BorderLayout – north, south, east, west, centre
  2. FlowLayout – row
  3. BoxLayout – row, where space can be specified by in term of size
  4. GridLayout – grid, rows and columns of cells
  5. GridBagLayout – grid, allow to accoupy more than one cell
  6. CardLayout – stack

Event handling handle components’ actions and events. Basically it does the following.

  • create a listener object
  • attach it to the widget(component) that interacts with the user

And the listener object should be created from a class that implements one of the Java listener interfaces from awt or swing. This is an underlying-concept of Polymorphism in Java.

This article try not to expand in details exploration of Java Swing/AWT package. Thus assume a reader should do separate reading/homework of study on differentiating the following in Java Swing/AWT classes/packages,

  • Which classes are container classes?
  • Which classes are component classes?
  • Which classes are Layout Mangaer classes?
  • Which classes are Event handling classes? (aka Interfaces)
  • Inner classes – anonymous inner class and named inner class.

Coding 10-steps for GUI Class

The following are steps to create GUI class. You could note the following steps/coding format for academic learning purpose. It could help in easily memorizing-gits for exam.

  1. import java.awt, javax.swing, java.awt.event, javax.swing.event.
  2. create GUI class for top-level container, i.e. usually extends JFrame
  3. declare private variable of 2nd-level container, i.e. usually JPanel p
  4. declare private variables of components, i.e. JButton, JCheckBox, JRadioButton, JTextField, JLabel, JSlider, JComboBox, etc.
  5. construct the GUI class by:
    • assign 2nd-level container variable by referencing top-level container’s content panel. i.e. p = (JPanel)this.getContentPane();
    • setLayout of 2nd-level container, i.e. p.setLayout(null);
    • create instances of all component variables declared above
    • set all necessary properties of components, i.e. setBounds(....), setValue(....), etc.
    • add action/event listener object, if any (use either anonymous inner class or named inner class)
    • add all component instance variables into 2nd-level container panel, i.e. p.add(..)
  6. create main method
  7. create instance of GUI class
  8. setTitle("..."), setSize(..), setVisible(true), setResizable(false), of main frame or container
  9. create named inner class by implementing event listener interface
  10. implement all necessary action and event handling methods

Note:
Steps 6-8 can be same with GUI class or at separate driver class.
Steps 9-10 can be same with GUI class or at separate public class.

swingawtxsteps1

swingawtxsteps0


Only GUI variation (no event handling)

If we want GUI windows with no event handling, then skip the following steps from above 10-steps.

  • skip 5th point of step no.5
  • skip step no.9
  • skip step no.10

swingawtxsteps2

Layout manager variation

Above 10-steps is the simplest step-by-step of coding GUI class. But in above 10-steps technique, we just use null layout manager. If we want to use other layout manager, we just have to modify the following in above 10-steps.

  • at 2nd point of step no.5, setLayout(null) to change appropriate layout mangaer, i.e. setLayout(new FlowLayout());
  • at 4th point of step no.5, make adjust to setBounds(...) absolute positioning field. We may just want to use layout manager’s relative positioning, then this setter should not be set.
  • at step no.8, change setResizable(false) to setResizable(true). Since we are using layout manger, the container will adjust to be sizable.

swingawtxsteps3

swingawtxsteps4

Coding shorten variation

I aware that there are significant points to shorten the coding style/format aka steps. But only do practice code-shorten when you become an expert in GUI coding and its concept. These 10-steps coding format closely align with underlying Polymorphism and other object-oriented concepts.

Conclusion

Observe that in Frame1.java, I did (concrete) name inner class to implement ActionListener interface. In Slider.java, I did (concrete) anonymous inner class to implement ChangeListener interface. Whichever way should be applicable and practice. Anonymous inner class should use when an event only occur once and for all during program life cycle.
And, again there several possibility way of shorten-coding of given program. But this 10-steps intend to be basic, simple and focus on OOP concept. There are plenty of OO concepts involved in GUI coding. If we can’t link concept and coding, we may be lost. Try to study given 3 sample programs’ code in line-by-line against step-by-step of 10-steps format. Then, you may try your own program and, explore more!

Next

After digesting this article and grasped hold of concept, you may further enhance the knowledge by trying Sun’s Java online lesson series, namely: Lesson: Using Swing Components.

References:
Anthony Lee W.H., Unit 4:Java GUI Classes, ICT201 Further programming and Object-oriented Concepts Using Java, SIM University
Anthony Lee W.H., Unit 7:Element of User Interfaces, ICT203 Foundations in Modern System Design, SIM University