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