Graphics and GUIs:

1. Graphics and GUIs: Windows an Panels

2. Java comes with a bunch of classes • Java comes with a bunch of classes that support graphics and GUI programming. • How to set up an application window • Manipulate the window • Explore use of color • Lay out regions in Windows

3. Stand alone GUI apps • Stand alone GUI applications run in a window

4. Touchy feely windows • The “”look and feel” of a window might look different from computer to computer. • Several features are constant…

5. The Window has a title bar • Displays the message “First GUI Program”

6. User can drag and drop the window

7. Title bar controls • Resize the window • Zoom in, zoom out

8. First GUI application • Does nothing • Shows basic features

9. import javax.swing.*; //access JFrame public class GUIWindow { public static void main(String[] args) { JFrame theGUI = new JFrame(); theGUI.setTitle("First GUI Program"); theGUI.setSize(300, 200); theGUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); theGUI.setVisible(true); }}

10. The JFrame code • Code is located in the class JFrame • Imported from the package javax.swing import javax.swing.*; //access JFrame

11. The main method • The main method creates an instance of JFrame and sends it messages public static void main(String[] args) { JFrame theGUI = new JFrame(); theGUI.setTitle("First GUI Program"); theGUI.setSize(300, 200); theGUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}}

12. Some commonly used Jframe messages

13. Some commonly used Jframe messages

14. Some commonly used Jframe messages

15. Some commonly used Jframe messages

16. Some commonly used Jframe messages

17. Some commonly used Jframe messages

18. Gui Colors An application window is just an empty container we can fill with Other objects

19. Application window • One such object is called a panel • A panel is a flat, rectangular area which is good for displaying other objects such as geometric shapes and images.

20. Windows have multiple panels called panes • Multiple panels each of which contain a bunch of images, colors and widgets Panels have width, height and background color

21. Class JPanel, Class JPanel • Also in java.swing represents panels in Java • 16+ Million colors • Color class is in javaw.awt Color aColor = new Color(redValue, greenValue, blueValue)

22. Color aColor = new Color(redValue, greenValue, blueValue) • Colors red, blue, green • Values are integers from 0 - 255 • 255=max value for color new Color(0 0, 0) is BLACK

23. Standard built-in colors

25. Run the second program • Looks like the first • Except PINK

26. GUIWindow2 import javax.swing.*; // for JFrame and JPanel import java.awt.*; // for Color an Container public class GUIWindow2 { public static void main(String[] args) { JFrame theGUI = new JFrame(); theGUI.setTitle("Second GUI program"); theGUI.setSize(300,200); theGUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel = new JPanel(); panel.setBackground(Color.pink); Container pane = theGUI.getContentPane(); pane.add(panel); theGUI.setVisible(true); } }

27. Notice the procedure for adding the panel to the window Container pane = theGUI.getContentPane(); pane.add(panel); First obtain the window’s object by running the getContentPane( ) Then add the panel to the container pane.add(panel);

28. So far a single pane • We only saw a single pane in an application window… • What if we have more than one object or panel to display in a window?

29. In Java each container object, such as a frame , uses a layout manager to do this. When program adds an object to a container, the container’s layout manager influences its placement… In Java,…the layout manager

30. default Layout manager • Each type of container has a default type of layout manager, which we can reset if the default does not suit our needs

31. Default layout manager • Default layout manager is an instance of the class BorderLayout • A border layout allows us to arrange up to five objects in positions that corresponds to • North(top), south(bottom),east(left), west(right), and center

32. Fewer than five? • The layout manager stretches fewer than five to fill the unoccupied areas.

33. 3rd GUI program JPanel northPanel = new JPanel(); northPanel.setBackground(Color.red); JPanel eastPanel = new JPanel(); eastPanel.setBackground(Color.blue); JPanel southPanel = new JPanel(); southPanel.setBackground(Color.red); JPanel westPanel = new JPanel(); westPanel.setBackground(Color.blue); JPanel centerPanel = new JPanel(); centerPanel.setBackground(Color.white);

34. Add 5 colored panels • North and south panels are RED • East and West panels are BLUE • Center is white

35. Border layout • The class border layout allows us to arrange the layout • Up to 5 objects Container pane = theGUI.getContentPane(); pane.add(northPanel, BorderLayout.NORTH); pane.add(eastPanel, BorderLayout.EAST); pane.add(southPanel, BorderLayout.SOUTH); pane.add(westPanel, BorderLayout.WEST); pane.add(centerPanel, BorderLayout.CENTER);

36. Organize the colored areas in a grid to make a checkerboard Build a grid

37. Border will NOT work • Package java.awt includes class GridLayout A grid layout is given a number of rows and columns The objects are placed in cells starting from Left to right starting from the first ROW.,,then moving downward.

38. gridLayout(2, 2)

39. GridLayout A grid layout is given a number of rows and columns . . . 2 x 2 grid is 4 panels Container pane = theGUI.getContentPane(); pane.setLayout(new GridLayout(2,2)); pane.add(panel1); pane.add(panel2); pane.add(panel3); pane.add(panel4); theGUI.setVisible(true);

40. import javax.swing.*; // for JFrame and JPanel import java.awt.*; // for Color an Container public class GUIWindow4 { public static void main(String[] args) { JFrame theGUI = new JFrame(); theGUI.setTitle("FOURTH GUI program"); theGUI.setSize(300,200); theGUI.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel1 = new JPanel(); panel1.setBackground(Color.white); JPanel panel2 = new JPanel(); panel2.setBackground(Color.black); JPanel panel3 = new JPanel(); panel3.setBackground(Color.gray); JPanel panel4 = new JPanel(); panel4.setBackground(Color.white); Container pane = theGUI.getContentPane(); pane.setLayout(new GridLayout(2,2)); pane.add(panel1); pane.add(panel2); pane.add(panel3); pane.add(panel4); theGUI.setVisible(true); } }