Graphic User Interfaces

Layout ManagersEvent Handling

Why Do we need Layout Mgrs?• What could happen…

• What should happen…

resize

resize

Layout Managers

• A Layout manager encapsulates an algorithm for positioning and sizing of GUI components– they control the positioning of the components in the

container• A layout manager must be associated with a

Container object to perform its work– layout manager determines the positioning of the

components on the Container– JPanel panel = new JPanel();

panel.setLayout(new BorderLayout());– JPanel panel = new JPanel(new BorderLayout());

Layout Managers

LayoutManager is an interface that is implemented by a number of existing classes

• awt layout managers– FlowLayout– BorderLayout– GridLayout– CardLayout– GridBagLayout

– Nice explanation of each type athttp://download.oracle.com/javase/tutorial/uiswing/layout/

visual.html#box.Look at them!

Borderlayout

this layout divides the container into5 regions,

centre, N, S, E and W

Border Layout• BorderLayout

– arranges components to fit 5 regions, centre, N, S, E and W

– default for Java application content pane– can only add one component to

each region, so use JPanels

pane.add(component, position)

BorderLayout.NORTHBorderLayout.SOUTHBorderLayout.EASTBorderLayout.WESTBorderLayout.CENTER

Grid layout

Flow Layout

Flow Layout• FlowLayout

– arranges components left to right– components are centered by default, but can be changed– Constructors

FlowLayout()

FlowLayout(int align)

FlowLayout(int align, int hdist, int vdist)

FlowLayout.RIGHTFlowLayout.LEFTFlowLayout.CENTER

C1 C2 C3 C4

C5 C6vdist

hdist

Using Layout Managers

• You typically have several layouts on a single screen• E.g.

• Flowlayout for a panel containing Cancel/OK buttons• Border layout for the content pane of your frame (Add the

panel for the cancel, ok buttons to south border region of your frame…

• What does this look like? How would you get the buttons down into the bottom right corner?

• To use layouts: assign a layout for whatever is getting a layout (panel for buttons, a frame etc)

• Then.. Add the individual “things” – specifying the location if necessary (Border layout requires n,s,e,w)

Using Layout Managers private Container createContentPane(){

// set up the content pane to use BorderLayoutJPanel cPane = new JPanel(new BorderLayout());// create panel for text fieldsJPanel fieldsPanel = new JPanel();fieldsPanel.setLayout(new FlowLayout());// add components to panelfieldsPanel.add(new JLabel("Please enter your name: "));JTextField name= new JTextField("here....", 10);fieldsPanel.add(name);// add panel to center of framecPane.add(fieldsPanel, BorderLayout.CENTER);// create and add button to bottom of frameok= new JButton("OK");cPane.add(ok, BorderLayout.SOUTH);return cPane;

}

2 ways to set layout

• What will this look like ?

Grid Layout• GridLayout

– divided into rows and cols GridLayout(int rows, int cols)

– each component is given the same size and positioned left to right

– you fix the number of rows or cols required, e.g. panel.setLayout(new GridLayout(3,0))

“any number of”

a 2 x 4 grid for 5 components will create a 2 x 3 grid (unless you fill the empty ones with

spaces

Card layout• CardLayout

– overlapping panels - same display space– Only one is displayed at a time

More..Layouts• BoxLayout

– like a Flow with no overlapping,– Single row or column– can be arranged horizontally or vertically

• Box class– Container that uses a BoxLayout manager– easier than creating a panel and allocating the BoxLayout– Box box = Box.createHorizontalBox();

setContentFrame(box);– Use “glue” and “struts” to maintain sizes when resizing

GridBaglayout• GridBagLayout

– flexible and sophisticated– place components in a grid of cells– components can span more than one cell– rows can have different widths and columns can have

different heights– Avoid!!

Spring layout

• SpringLayout– flexible– specify precise relationships between edges of components

Event Driven Programming

Event Driven Programming• Developing a GUI uses event driven programming

waits for input

user input

user input

Traditional Event Driven

Event Driven Programming Model

• User interacts with application generating events– pushing mouse button, scrolling, clicking on checkboxes, moving

mouse,…• Event is trapped and depending on the type of event an

appropriate event handler executes• Swing event handling and painting executes in a single thread

called the event-dispatching thread– ensures each event handler finishes executing before next starts– prevents deadlock

Handling User Interaction• Events are triggered by user interaction with

components• Events are captured by listeners

– if and only if the listener is registered with the appropriate component

• Listener has an event handler that handles the captured event

• events and listeners are objects• event handlers are methods of the Listener object

Button ActionListenerActionEvent

actionPerformed()invokes

Listeners• Listeners are interfaces

– Any object can be a listener…• Listener objects capture events that occur on

components that they are registered with• Each Event class has an associated Listener interface• Listener objects should implement appropriate event

handlers– ActionEvent ActionListener actionPerformed()

• for button presses …– TextEvent TextListener textValueChanged()

• for changing text in text fields

User Interaction• Create the appropriate listener object

– implement the appropriate listener interface• Implement event handler methods for all events that

are important– event handler methods are the listener abstract methods

that must be implemented to implement the interface• Register the listener with the control (component) to

allow it to receive events

Interacting with a Button• Event is clicking on a button• Create listener

– appropriate interface is ActionListener– create listener object that implements ActionListener– e.g. class MyActionListener implements ActionListener {…}– instantiate: MyActionListener myListener = new

MyActionListener();• Note: there are several ways of creating the listener – more later.• Implement event handler

– include actionPerformed() method in class that implements ActionListener

– class MyActionListener implements ActionListener {…public void actionPerformed(ActionEvent e){…}… }

• Register listener with button component myButton = new myButton(“whatever”);

myButton.addActionListener(myListener);

Let your window be the Listenerpublic class MyWindow extends JFrame implements ActionListener {

public MyWindow(){ ...

ok = new JButton("OK"); ok.addActionListener(this); panel.add(ok);...}// event handlerpublic void actionPerformed (ActionEvent e){

System.exit(0);}

}

create Listener

register it with the

component

include an event

handler

Listener Interfaces…User action that results in Event Listener that handles it

User clicks a button, presses Enter while ActionListenertyping in a text field, chooses a menu item

User closes a frame (main window) WindowListener

User presses a mouse button while over MouseListenera Component

User moves the mouse over a component MouseMotionListener

Component gets the keyboard focus FocusListener

Table or list selection changes ListSelectionListener

Any property in a component changes, PropertyChangeListenersuch as the text on a button

Summary• Last topic allowed - set up a frame with components• This topic gives you enough info to ..

– Specify a layout for the content (and various panels) within your window

– “do something” when a component is used (e.g. Button click)• Implement a listener interface e.g.

– public class MyWindow extends JFrame implements ActionListener

• Add the listener to a component e.g.– ok = new JButton("OK");

ok.addActionListener(this);• Implement the method for what should happen e.g.

– public void actionPerformed (ActionEvent e){... Some code that does

something..