graphic user interfaces
DESCRIPTION
Graphic User Interfaces. Layout Managers Event 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/1.jpg)
Graphic User Interfaces
Layout ManagersEvent Handling
![Page 2: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/2.jpg)
Why Do we need Layout Mgrs?• What could happen…
• What should happen…
resize
resize
![Page 3: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/3.jpg)
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());
![Page 4: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/4.jpg)
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!
![Page 5: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/5.jpg)
Borderlayout
this layout divides the container into5 regions,
centre, N, S, E and W
![Page 6: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/6.jpg)
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
![Page 7: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/7.jpg)
Grid layout
![Page 8: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/8.jpg)
Flow Layout
![Page 9: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/9.jpg)
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
![Page 10: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/10.jpg)
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)
![Page 11: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/11.jpg)
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 ?
![Page 12: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/12.jpg)
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
![Page 13: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/13.jpg)
Card layout• CardLayout
– overlapping panels - same display space– Only one is displayed at a time
![Page 14: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/14.jpg)
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
![Page 15: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/15.jpg)
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!!
![Page 16: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/16.jpg)
Spring layout
• SpringLayout– flexible– specify precise relationships between edges of components
![Page 17: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/17.jpg)
Event Driven Programming
![Page 18: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/18.jpg)
Event Driven Programming• Developing a GUI uses event driven programming
waits for input
user input
user input
Traditional Event Driven
![Page 19: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/19.jpg)
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
![Page 20: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/20.jpg)
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
![Page 21: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/21.jpg)
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
![Page 22: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/22.jpg)
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
![Page 23: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/23.jpg)
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);
![Page 24: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/24.jpg)
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
![Page 25: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/25.jpg)
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
![Page 26: Graphic User Interfaces](https://reader036.vdocuments.mx/reader036/viewer/2022062521/568168b4550346895ddf8927/html5/thumbnails/26.jpg)
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..