Graphic User Interfaces

1. Graphic User Interfaces Layout Managers Event Handling

2. Why Do we need Layout Mgrs? • What could happen… • What should happen… resize resize

3. 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());

4. 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 at http://download.oracle.com/javase/tutorial/uiswing/layout/visual.html#box. Look at them!

5. Borderlayout this layout divides the container into 5 regions, centre, N, S, E and W

6. BorderLayout.NORTHBorderLayout.SOUTHBorderLayout.EASTBorderLayout.WESTBorderLayout.CENTERBorderLayout.NORTHBorderLayout.SOUTHBorderLayout.EASTBorderLayout.WESTBorderLayout.CENTER 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 toeach region, so use JPanels pane.add(component, position)

7. Grid layout

8. Flow Layout

9. FlowLayout.RIGHTFlowLayout.LEFTFlowLayout.CENTER hdist vdist Flow Layout • FlowLayout • arranges components left to right • components are centered by default, but can be changed • ConstructorsFlowLayout() FlowLayout(int align) FlowLayout(int align, int hdist, int vdist) C3 C1 C4 C2 C5 C6

10. Using Layout Managers • You typically have severallayouts 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)

11. 2 ways to set layout Using Layout Managers private Container createContentPane(){ // set up the content pane to use BorderLayoutJPanelcPane = new JPanel(new BorderLayout()); // create panel for text fieldsJPanelfieldsPanel = 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;} • What will this look like ?

12. 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

13. Card layout • CardLayout • overlapping panels - same display space • Only one is displayed at a time

14. 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

15. 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!!

16. Spring layout • SpringLayout • flexible • specify precise relationships between edges of components

17. Event Driven Programming

18. user input waits for input user input Event Driven Programming • Developing a GUI uses event driven programming Traditional Event Driven

19. 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

20. 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 ActionEvent Button ActionListener invokes actionPerformed()

21. 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

22. 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

23. 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);

24. Let your window be the Listener public 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

25. Listener Interfaces… User action that results in Event Listener that handles it User clicks a button, presses Enter while ActionListener typing in a text field, chooses a menu item User closes a frame (main window) WindowListener User presses a mouse button while over MouseListener a 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

26. 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..