Graphical User Interface Programming

1. Graphical User Interface Programming

2. GUI • Graphical User Interface • event driven programming • Java GUI programming • AWT (Abstract Window Toolkit) • Swing

3. Event driven programming • Uses a signal-and-response approach • Events and event handlers • Asynchronous • Event = object that act as a signal to another object • Listener = event receiver • One event might have zero or more listeners. • Listeners can receive events from different objects.

4. Event driven programming • One event might have zero or more listeners. Listerner A Button X Listerner B Listerner C

5. Event driven programming • Listeners can receive events from different objects. Button X Listerner A Button Y Button Z Listerner B

6. Typical events • User moves the mouse. • User clicks the mouse button. • User clicks the mouse button in a button in a window. • User presses a key on the keyboard. • Timer event occurs.

7. Typical programming and event driven programming • Up to now your programs consisted of lists of statements executed in order. • In event-driven programming, you create objects that can fire events, and you create listener objects that react to the events. • You don’t know the order ahead of time. • Typically, your code never directly calls the listener methods.

8. Windows via Swing’s JFrame

9. Creating a window in Swing import javax.swing.JFrame; … JFrame f = new JFrame( “My Simple Frame” ); f.setSize( 300, 200 ); //w, h f.setDefaultCloseOperation( JFrame.DO_NOTHING_ON_CLOSE ); … f.setVisible( true );

10. Adding a button to a window (JFrame) import javax.swing.JButton; … //create the button JButton b1 = new JButton( “Click to end program” ); //associate the listener with this button (next slide) MyButtonListener listener = new MyButtonListener(); b1.addActionListener( listener ); f.add( b1 ); //add the button to our frame

11. Our button listener import java.awt.event.ActionListener; import java.awt.event.ActionEvent; public class MyButtonListener implements ActionListener { public void actionPerformed ( ActionEvent e ) { System.exit( 0 ); } }

12. (Typical) Steps • Create the frame. • Create the button. • Create the action listener for the button. • Add the action listener to the button (register the action listener with the button). • Add the button to the frame. • Show the frame.

13. Pixel • Smallest unit of space on which your screen can write. • Pixel is a contraction for … what?

14. Useful JFrame methods • public JFrame ( ) • public JFrame ( String title ) • public void setDefaultCloseOperation ( int operation ) • JFrame.DO_NOTHING_ON_CLOSE • JFrame.HIDE_ON_CLOSE • JFrame.DISPOSE_ON_CLOSE • JFrame.EXIT_ON_CLOSE • Note: The close-window-button is part of the JFrame (not a JButton) • public void setSize ( int width, int height )

15. More useful JFrame methods • public void setTitle ( String title ) • public void add ( Component componentAdded ) • public void setLayout ( LayoutManager manager ) • public void setJMenuBar ( JMenuBar menubar ) • public void dispose ( ) • public void setVisible ( boolean makeVisible )

16. Buttons via Swing’s JButton

17. Buttons (JButton) • Different kinds of components require different kinds of listener classes to handle the events they fire. • A button fires events known as action events, which are handled by listeners know as action listeners.

18. Back to creating a window in Swing import javax.swing.JFrame; … JFrame f = new JFrame( “My Simple Frame” ); f.setSize( 300, 200 ); //w, h f.setDefaultCloseOperation( JFrame.DO_NOTHING_ON_CLOSE ); … f.setVisible( true ); This is not a very OO approach!

19. A more OO approach to creating a window in Swing import javax.swing.JFrame; public MyFrame extends JFrame { public static final int sWidth = 300; public static final int sHeight = 200; MyFrame ( ) { super( “My More OO Simple Frame” ); setSize( sWidth, sHeight ); setDefaultCloseOperation( JFrame.DO_NOTHING_ON_CLOSE ); … setVisible( true ); } … }

20. JLabel – a line of text • Simply a line of text appearing in a window. import javax.swing.JLabel; … JLabel label = new JLabel( “hello there.” ); add( label );

21. Programming in Color import java.awt.Color; … Color.BLACK • Also • Color.BLUE, Color.CYAN, Color.DARK_GRAY, … • Or you can specify/create your own colors by specifying the argb or rgb values in the Color ctor. • Use getContentPane().setBackground( Color.BLUE ); to change the background color of your JFrame.

22. Programming in color • Colors are represented by their RGB value. • R=red • G=green • B=blue • When R is the largest value, the color has more red than the other components. • What happens when r=g=b? • Sometimes ARGB is used where A=alpha (opacity).

23. Layout Managers

24. Controlling the placement of components in a container (our frame) • So far, we simply add components to a container and accept whatever default layout is presented. • Layout manager – describes how the components are arranged. • Java provides many layout managers. • Border (in book) • Box (not in book) • Card (not in book) • Flow (in book) • Grid (in book) • Grid bag (not in book) • Group (not in book) • Spring (not in book)

25. BorderLayout • Places the components in five areas: • North • South • East • West • Center • You specify the area in the add method. • add( new JLabel(“me”), BorderLayout.NORTH );

26. Using the BorderLayout import java.awt.BorderLayout; import javax.swing.JFrame; import javax.swing.JLabel; public class MyFrame extends JFrame { public MyFrame ( ) { super( “My frame w/ border layout.” ); setSize( 300, 200 ); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); setLayout( new BorderLayout() ); add( new JLabel( “first” ), BorderLayout.NORTH ); add( new JLabel( “second” ), BorderLayout.SOUTH ); … setVisible( true ); } }

27. FlowLayout • Simplest. • Arranges components one after another, from left to right and top to bottom, in the order in which one adds them.

28. Using the FlowLayout import java.awt.FlowLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; public class MyFrame extends JFrame { public MyFrame ( ) { super( “My frame w/ flow layout.” ); setSize( 300, 200 ); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); setLayout( new FlowLayout() ); add( new JLabel( “first” ) ); add( new JButton( “second” ) ); … setVisible( true ); } }

29. GridLayout • Arranges components on a 2D grid of given size (i.e., rows and cols specified via the GridLayoutctor). • Each entry in the grid will be stretched to the same size.

30. GridLayout • Placement rules are more complicated. • Say we have a 2 x 3 (2 rows x 3 cols): • new GridLayout( 2, 3 ) • If we subsequently add six things, they will appear in a 2x3 grid of equally sized elements. • What happens if we add more or less?

31. GridLayout • Placement rules are more complicated. • Say we have a 2 x 3 (2 rows x 3 cols). • Adding 7 or 8 items causes a col to be added. • Adding fewer than 6 items causes a col(s) to be deleted. X

32. GridLayout • Placement rules are more complicated. • Say we have a 2 x 3 (2 rows x 3 cols). • To only honor the number of rows, specify a 0 for the cols. • To honor only the number of cols, specify a 0 for the rows.

33. Using the GridLayout import java.awt.GridLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; public class MyFrame extends JFrame { public MyFrame ( ) { super( “My frame w/ flow layout.” ); setSize( 300, 200 ); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); setLayout( new GridLayout(0,1) ); //always a single col add( new JLabel( “first” ) ); add( new JButton( “second” ) ); … setVisible( true ); } }

34. Summary of Layout Managers • FlowLayout • Displays components from left to right in the order in which they are added to the container. • BorderLayout • Displays the components in five areas: N, S, E, W, and Center. You specify the area in the add method. • GridLayout • Lays out components in a grid with each component stretched to fill its box in the grid.

35. Additional Layout Managers • Box (not in book) • Card (not in book) • Tabbed pane (not in book; not strictly a layout manager) • Grid bag (not in book) • Group (not in book) • Spring (not in book)

36. BoxLayout “either stacks its components on top of each other or places them in a row - your choice” from http://java.sun.com/docs/books/tutorial/uiswing/layout/box.html

37. CardLayout • Typically used to switch between different panels. • Poor man’s version of tabbed pane. choice here causes change here

38. JTabbedPane • Not strictly a layout manager. • Typically preferred over CardLayout.

39. GridBagLayout “… if you want to code by hand and do not want to use GroupLayout, then GridBagLayout is recommended as the next most flexible and powerful layout manager” from http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html

40. GroupLayout “… if you want to code by hand and do not want to use GroupLayout, then GridBagLayout is recommended as the next most flexible and powerful layout manager” from http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html Intended to be used by a GUI builder.

41. SpringLayout • Intended to be used by GUI builder.

42. JPanel a general purpose window-like container

43. Panels (JPanel) • General purpose, window-like container • Groups objects • Components may be added to them (including other panels) • hierarchical • Layout manager can be associated w/ a panel • Can be added to a JFrame

44. Example JPanels JPanel w/ a top-to-bottom BoxLayout subclass of JPanel w/ a left-to-right BoxLayout subclass of JPanel w/ a top-to-bottom BoxLayout JPanel w/ a top-to-bottom BoxLayout

45. Complete jpanel example

46. JPanel example • Let’s create a window with 3 panels with the default background color, and 3 buttons, red, white, and blue. • When a button is pressed, the corresponding panel will change to that color.

47. JPanel example • GridLayout (center) • FlowLayout (south)

48. import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.FlowLayout; import java.awt.Color; import javax.swing.JButton; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; public class PanelDemo extends JFrame implements ActionListener { public static final int WIDTH = 300; public static final int HEIGHT = 200; private JPanelredPanel = new JPanel(); private JPanelwhitePanel = new JPanel(); private JPanelbluePanel = new JPanel(); public static void main ( String[] args ) { PanelDemogui = new PanelDemo( ); gui.setVisible( true ); } public void actionPerformed ( ActionEvent e ) { String buttonString = e.getActionCommand(); if (buttonString.equals("Red")) redPanel.setBackground( Color.RED ); else if (buttonString.equals("White")) whitePanel.setBackground(Color.WHITE); else if (buttonString.equals("Blue")) bluePanel.setBackground( Color.BLUE ); else System.out.println( "Unexpected error." ); } JPanel Example

49. public PanelDemo ( ) { super( "Panel Demonstration“ ); setSize( WIDTH, HEIGHT ); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) ); JPanelbiggerPanel = new JPanel( ); biggerPanel.setLayout( new GridLayout(1, 3) ); redPanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( redPanel ); whitePanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( whitePanel ); bluePanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( bluePanel ); add( biggerPanel, BorderLayout.CENTER ); JPanelbuttonPanel = new JPanel( ); buttonPanel.setBackground( Color.LIGHT_GRAY ); buttonPanel.setLayout( new FlowLayout( ) ); JButtonredButton = new JButton( "Red" ); redButton.setBackground( Color.RED ); redButton.addActionListener( this ); buttonPanel.add( redButton ); JButtonwhiteButton = new JButton( "White" ); whiteButton.setBackground( Color.WHITE ); whiteButton.addActionListener( this ); buttonPanel.add( whiteButton ); JButtonblueButton = new JButton( "Blue" ); blueButton.setBackground( Color.BLUE ); blueButton.addActionListener( this ); buttonPanel.add( blueButton ); add( buttonPanel, BorderLayout.SOUTH ); setVisible( true ); } } JPanel Example

50. JPanel Example • PanelDemo (JFrame w/ BorderLayout) • biggerPanel (w/ GridLayout of 1 row & 3 cols) • added at center • redPanel • whitePanel • bluePanel • buttonPanel (w/ FlowLayout) • added at south • redButton • whiteButton • blueButton