Universidad Nacional de Colombia Facultad de Ingeniería Departamento de Sistemas

1. C ertificación en J AVA Universidad Nacional de Colombia Facultad de Ingeniería Departamento de Sistemas

2. Objectives • Why Java uses Layout Managers • Layout Manager Theory • Layout Policies 9. LAYOUT MANAGERS

3. Objectives Write code using component, container, and layout manager classes of the java.awt package to present a GUI with specified appearance and resize behavior, and distinguish the responsibilities of layout managers from those of containers

4. Introduction The Abstract Windowing Toolkit (AWT) provides a handful of layout managers, each of which implements its own layout policy In Java, you create a GUI by choosing one or more layout managers and letting them take care of the details.

5. When you started working with layout managers, you probably had two impressions: • You no longer bore the burden of specifying the exact position and dimensions of each component • You no longer had the power to specify the exact position and dimensions of each component

6. Some people enjoy working with layout managers, and others resent them • They are here to stay, so the job at hand is to master this feature of the language. Acquiring this competence requires three things: • An understanding of why Java uses layout managers • An understanding of the layout policies of the more basic layout managers • Some practice

7. Why Java Uses Layout Managers The theory lies in the position that precise layout (that is, specification in pixels of each component's size and position) is a repetitious and often-performed task; therefore, according to the principles of object-oriented programming, layout functionality ought to be encapsulated into one or more classes to automate the task

8. The practical reason for having layout managers systems from Java's platform independence. Java components borrow their behavior from the window system of the underlying hardware on which the Java Virtual Machine is running. Thus on a Macintosh, an AWT button looks like any other Mac button; on a Motif platform, a Java button looks like any other Motif button, and so on

9. Problem: buttons and other components have different sizes when instantiated on different platforms!!

10. Button b = new Button( "ok" ); On a Windows 95 machine: 32 pixels wide by 21 pixels high. On a Motif platform: 32 pixels wide, but 22 pixels high, even though it uses the same font The difference seems small until you consider the effect such a difference would have on a column of many buttons.

11. Layout Manager Theory There are five layout manager classes in the AWT toolkit java.awt.LayoutManager: it is an interface, not a class, because the layout managers are so different from one another that they have nothing in common except a handful of method names java.awt.LayoutManager2 interface: the GridBag, Border, and Card layout managers implement it Layout managers work in partnership with containers

12. Containers and Components Containers are Java components that can contain other components There is a java.awt.Container class which, like java.awt.Button and java.awt.Choice, inherits from the java.awt.Component superclass

13. Object Component Button TextArea Container . . . Inheritance of java.awt.Container

14. The Container class was abstract, but now it isn't; its most commonly used concrete subclasses are Applet, Frame, and Panel, (Note that Applet is a subclass of Panel)

15. Container Panel ScrollPane Window Applet Frame

16. If Java encouraged precise pixel-level sizing and positioning, there would be a lot of Java GUIs that looked exquisite on their platform of origin, and terrible on other hosts There is no guarantee that fonts with identical names will truly be 100 percent identical from platform to platform; there could be minute differences. Therefore, Java cannot even guarantee that two strings drawn with the same text and font will display at the same size across platforms

17. Java GUIs reside in applets or in frames Simple applets: Put your components in your applet Simple applications: put your components in your frame. In both cases, you might wonder how the components end up where they do; layout managers are lurking in the background, taking care of details)

18. More complicated GUIs: it is convenient to divide the applet or frame into smaller regions These regions might constitute, for example, a toolbar or a matrix of radio buttons GUI sub-regions are implemented most commonly with the Panel container.

19. Panels • can contain other components: • buttons, • canvases, • check boxes, • scroll bars, • scroll panes, • text areas, • text fields, and • other panels

20. Complicated GUIs sometimes have very complicated containment hierarchies of panels within panels within panels within panels, and so on, down through many layers of containment • In Java, the term hierarchy is ambiguous. • When discussing classes, hierarchy refers to the hierarchy of inheritance from superclass to subclass • When discussing GUIs, hierarchy refers to the containment hierarchy of applets or frames, which contain panels containing panels containing panels

21. Apply Reset Cancel Containment Hierarchy Example Red Green Blue 45 145 195

22. 1. import java.awt.*; 2. 3. public class Hier extends Frame { 4. Hier() { 5. super( "Containment Hierarchy Example" ); 6. setBounds( 20, 20, 300, 180 ); 7. setLayout( new BorderLayout( 0, 25 ) ); 8. 9. // Build upper panel with 3 horizontal "strips" 10. String strings[] = { "Red", "Green", "Blue" }; 11. Panel bigUpperPanel = new Panel(); 12. bigUpperPanel.setLayout( new GridLayout( 1, 3, 20, 0 ) ); 13. for ( int i = 0; i < 3; i++ ) { 14. // Add strips: each strip is a panel within bigUpperPanel 15. Panel levelPanel = new Panel(); 16. levelPanel.setLayout( new GridLayout( 3, 1, 0, 10 ) ); 17. levelPanel.add( new Label( strings[ i ] ) );

23. levelPanel.add( new Scrollbar( • Scrollbar.HORIZONTAL, i, 10, 0, 255)); • levelPanel.add( new TextField( "0")); • bigUpperPanel.add(levelPanel); • } • add(bigUpperPanel, BorderLayout.CENTER); • // Build lower panel containing 3 buttons • Panel LowerPanel = new Panel(); • lowerPanel.add(new Button("Apply")); • lowerPanel.add(new Button("Reset")); • lowerPanel.add(new Button("Cancel")); • add(lowerPanel, BorderLayout.SOUTH); • } • }

24. Frame Panel Panel Panel Panel Label Label Label ScrollBar ScrollBar ScrollBar TextField TextField TextField Panel Button Button Button Containment hierarchy

25. A component inside a container receives certain properties from the container • Font, foreground and background color: same as the container • Panel’s default layout manager: Flow • Applet’s default layout manager: Flow • Frame’s default layout manager: Border

26. Each panel is built in four steps: • Construct the panel • Give the panel a layout manager • Populate the panel • Add the panel to its own container

27. Component Size and position Components know where they are and how big they are The java.awt.Component class has four instance variables x,y: position of the components upper left corner width, and height: in pixels

28. Applet Viewer: Example.class Panel: x = 60, y = 45 width = 340, height = 190 TextArea: x = 100, y = 45 width = 180 height = 120 Position and Size

29. A component’s size and position can be changed by calling the component’s setBounds() method C setBounds(x, y, width, height)

30. import java.awt.Button; • import java.applet.Applet; • public class AppletWithBigButton extends Applet { • public void init() { • Button b = new Button(”I’m enormous!”); • b.setBounds(3, 3, 333, 333); // Should make • button really big • add(b); • } • } Line 7 has no effect, because after it executes, the button is added to the applet. The applet calls on its layout manager to enforce its layout policy on the button

31. Applet Viewer:AppletWithBigButton... I'm enormous A disappointing Button

32. Layout Policies Every Java component has a preferred size The preferred size expresses how big the component would like to be, barring conflict with a layout manager Preferred size is generally the smallest size necessary to render the component in a visually meaningful way

33. a button’s preferred size is the size of its label text, plus a little border of empty space around the text, plus the shadowed decorations that mark the boundary of the button Thus a button's preferred size is "just big enough.“ Preferred size is platform dependent, since component boundary decorations vary from system to system

34. The Flow Layout Manager arranges components in horizontal rows Default layout manager type for panels and applets

35. import java.awt.*; • import java.applet.Applet; • public class NeatRow extends Applet { • public void init() { • Label label = new Label( "Name:" ); • add( label ); • TextField textfield = new TextField( "Beowulf" ); • add( textfield ); • Button button = new Button( "Ok" ); • add( button ); • } • }

36. Applet Viewer: NeatRow.class Name: Beowulf Ok Applet started. Component Size and position

37. A narrower applet AppletViewer:NeatR... Beowulf Name: Ok Applet started.

38. Applet... Name: Beowulf Ok Applet started. An even narrower applet

39. import java.awt.*; • import java.applet.Applet; • public class FlowRight extends Applet { • public void init() { • setLayout(new FlowLayout(FlowLayout.RIGHT)); • for (int i=0; i<4; i++) { • add(new Button(“Button #”, + i)); • } • } • } The Flow Layout Manager

40. Button #0 Button #1 Button #2 Button #3 A right-justifying Flow layout manager Applet Viewer: FlowRight.class Applet started.

41. Applet Viewer: FlowRight.class Applet started. Button #0 Button #1 Button #2 Button #3 A narrower right-justifying Flow layout manager

42. import java.awt.*; • public class FlowLayoutExample • { • public static void main( String args[] ) • { • Frame f = new Frame( "FlowLayout Example" ); • f.setBounds( 0,0,300,300 ); • f.setLayout( new FlowLayout() ); • for( int i = 1; i < 10; i++ ) • { • Button b = new Button( "Button "+i ); • f.setSize( 100,25 ); • f.add( b ); • } • f.setVisible( true ); • } • } EJEMPLO

44. The Grid Layout Manager always ignores a component's preferred size The Grid layout manager subdivides its territory into a matrix of rows and columns The number of rows and number of columns are specified as parameters to the manager's constructor GridLayout(int nRows, int ncolumns)

45. import java.awt. *; • import java.applet.Applet; • public class ThreeByFive extends Applet { • public void int() { • setLayout(new GridLayout(5, 3)); • for (int row=0; row<5; row++) { • add(new Label(“Label “ + row)); • add(new Button(“Button “ + row)); • add(new TextField(“TextField “ + row)); • } • ) • } Components know where they are and how big they are

46. Button2 Button 4 Button0 Button 3 Button1 Applet Viewer: Grid5x3.class Label 0 TextField 0 Label1 TextField 1 Label2 TextField 2 Label 3 TextField 33 Label 4 TextField 44 Applet started.

47. Applet Viewer: Grid5x3.class Label 0 TextField 0 Label1 TextField 1 Label2 TextField 2 Label 3 TextField 3 Label 4 TextField 4 Applet started. Button0 Button2 Button 3 Button 4 Button1

48. import java.awt.*; • public class GridLayoutExample • { • public static void main( String args[] ) • { • Frame f = new Frame( "GridLayout Example" ); • f.setBounds( 0,0,300,300 ); • f.setLayout( new GridLayout( 3,3 ) ); • for( int i = 1; i <= 9; i++ ) • { • Button b = new Button( "Button "+i ); • f.add( b ); • } • f.setVisible( true ); • } • } EJEMPLO Components know where they are and how big they are

50. Applet Viewer:ToolbarSta... Status Appletstarted. this is the toolbar The Border Layout Manager The Flow layout manager always honors a component's preferred size: the Grid layout manager never does. The Border layout manager does something in between It is the default manager for frames