Java Oriented Object Programming IUI & EventsLesson 10
Objectives
● Making UI with Swing○ jFrames○ jPanel○ jButton
● Customizing with Interfaces/ Inheritance○ Handle events○ Extend jPanel for drawing
● Eclipse Window Builder
Java Oriented Object Programing IUI & Events
Making a User Interface with SwingSwing is a toolkit designed to assist developers in creating Graphical User Interfaces (GUI) for Java programs.
Output
Step 1:
Create JFrame
The JFrame is the window used to house all the components used to create the GUI such as the title bar, control buttons.
● Open your editor and create a new Java project and a new class
Java Oriented Object Programing IUI & Events
Step 2
Create JPanel
JPanel is used to create a container within the window for Swing components
Output
Java Oriented Object Programing IUI & Events
Step 3
Create JButton
JButton is used to create buttons in swing
Output
Java Oriented Object Programing IUI & Events
Step 4
Event based programming
Generally theres a main loop that listens or waits for events and then triggers a callback function or a function assigned to that event.
There are many forms of listeners, in the following example an Action Listener is attached to the button.
Java Oriented Object Programing IUI & Events
Extending JPanel for Drawing
This is an example of when you would need to use inheritance to extend a class.
Its powerful and used to create games.
You cannot paint on a JPanel unless you extend the class.
Java Oriented Object Programing IUI & Events
Extending JFrame for Drawing Cont’d
Output
Java Oriented Object Programing IUI & Events
Eclipse WindowbuilderEclipse windowbuilder is a Graphical User Interface(GUI) designed to create Java applications simply without spending lots of time writing the code.
Step 1
Create Windowbuilder
In Eclipse select File → New → Other → Windowbuilder → Swing Designer → JFrame
Once you have created the Windowbuilder, the program generates the code needed for the window.
Notice the two tabs at the bottom, Source and Design. You will use these two tabs for development.
Java Oriented Object Programing IUI & Events
Windowbuilder Cont’d
On the last slide you saw the Source tab(where all your code is), here is the Design tab where you will create your window and Windowbuilder will automatically generate the code to the Source tab.
Begin creating your design by simply selecting the component and placing it on the window.
Java Oriented Object Programing IUI & Events
Windowbuilder Cont’d
Design window by choosing from the palette of options. This is where you will find Containers, Layouts, Components etc.
Once you select the item from the palette, click anywhere on the window where you would like the item to be positioned.
The components panel shows you the hierarchy of items added.
The properties panel is a quick and simple way to change any of the default settings. Eclipse will make the changes to the Source code automatically.
Java Oriented Object Programing IUI & Events
Windowbuilder Cont’d
Here is the code for the button that Eclipse automatically added to the Source tab. You can compare it to the properties panel to see the that it is the same information.
Objectives
● Making UI with Swing○ jFrames○ jPanel○ jButton
● Customizing with Interfaces/ Inheritance○ Handle events○ Extend jPanel for drawing
● Eclipse Window Builder