Layout Manager 1 Layout Manager To each UI

Layout Manager 1

Layout Manager • To each UI container there is a layout manager (an object). • When you add a component to a container the layout manager automatically decides its place and size. • There are different types of layout managers, each have their own rules when it comes to arranging components inside the container. • Examples: – – – Flow Border Grid Card Grid Bag. 2

Border. Layout public class button. Dir extends Applet { public void init() { set. Layout(new Border. Layout()); add("North", new Button("North")); add("South", new Button("South")); add("East", new Button("East")); add("West", new Button("West")); add("Center", new Button("Center")); } } 3

The UI of a calculator • The following GUI-components are used: – Applet – Text. Field – Panel – Button 4

GUI code for Calculator import java. awt. *; import java. awt. event. *; import java. applet. *; public class Calculator extends Applet implements Action. Listener { private Text. Field the. Display; public void init() { //Initialize the applet // // Separate applet into "North", "South", "East", "West", // and "Center", that is "use Border. Layout". set. Layout(new Border. Layout()); the. Display = new Text. Field(40); add("South", the. Display); add. Buttons(); }. . 5

Adding the buttons private void add. Buttons() { // Place calculator buttons in a grid at the center of the main frame. Panel top. Panel = new Panel(); top. Panel. set. Layout(new Grid. Layout(4, 4)); Button button; button = new Button("1"); button. add. Action. Listener(this); top. Panel. add(button); button = new Button("2"); button. add. Action. Listener(this); top. Panel. add(button); . . . // Place calculator buttons in the center of the frame add("Center", top. Panel); // Place "do calculation"-button at the right button = new Button("="); button. add. Action. Listener(this); add("East", button); // Place clear-button at the left button = new Button("C"); button. add. Action. Listener(this); add("West", button); } 6

Event-handling code public void action. Performed(Action. Event e){ String arg = e. get. Action. Command(); handel. Buttons(arg); } private void handel. Buttons(String button. Item. Text){ if (button. Item. Text. equals("C")){ the. Display. set. Text(""); } else { String the. Text = the. Display. get. Text(); String new. Text; int pos. Start = the. Display. get. Selection. Start(); int pos. End = the. Display. get. Selection. End(); if (pos. Start > 0){ new. Text = the. Text. substring(0, pos. Start) + button. Item. Text; } else { new. Text = button. Item. Text; } if (pos. Start < the. Text. length()) new. Text = new. Text + the. Text. substring(pos. End, the. Text. length()); the. Display. set. Text(new. Text); the. Display. select(pos. Start+1, pos. Start+1); 7 }}}

Another GUI Example Number of points: 0 Start Stop 8

How it looks in Windows 9

Making the User Interface Using Grid. Bag. Layout (solutions without Grid. Bag. Layout is also possible) public void add. User. Components() { set. Layout(new Grid. Bag. Layout()); Grid. Bag. Constraints constraints = new Grid. Bag. Constraints(); constraints. gridx = 0; constraints. gridy = 0; constraints. gridwidth = 1; constraints. gridheight = 1; constraints. weightx = 0. 5; constraints. weighty = 0; constraints. fill = Grid. Bag. Constraints. HORIZONTAL; Label lbl. Points. Text = new Label("Number of points: ", Label. RIGHT); add(lbl. Points. Text, constraints); constraints. gridx = 1; constraints. gridy = 0; constraints. gridwidth = 1; constraints. gridheight = 1; constraints. weightx = 0. 5; constraints. weighty = 0; constraints. fill = Grid. Bag. Constraints. HORIZONTAL; Label lbl. Points = new Label("0 add(lbl. Points, constraints); constraints. gridx = 0; constraints. gridy = 1; constraints. gridwidth = 2; constraints. gridheight = 1; constraints. weightx = 1; constraints. weighty = 1; constraints. fill = Grid. Bag. Constraints. BOTH; constraints. insets = new Insets(5, 5, 5, 5); battlefield = new Battlefield(); add(battlefield, constraints); constraints. gridx = 0; constraints. gridy = 2; constraints. gridwidth = 1; constraints. gridheight = 1; constraints. weightx = 0. 5; constraints. weighty = 0; constraints. fill = Grid. Bag. Constraints. HORIZONTAL; Button quit. Button = new Button("Start"); add(quit. Button, constraints); constraints. gridx = 1; constraints. gridy = 2; constraints. gridwidth = 1; constraints. gridheight = 1; constraints. weightx = 0. 5; constraints. weighty = 0; constraints. fill = Grid. Bag. Constraints. HORIZONTAL; Button start. Button = new Button("Stop"); add(start. Button, constraints); set. Background(Color. gray); } "); 10

Class Grid. Bag. Constraints public Insets insets This field specifies the external padding of the component, the minimum amount of space between the component and the edges of its display area. The default value is new Insets(0, 0, 0, 0). public int gridwidth Specifies the number of cells in a row for the component's display area. public int gridheight Specifies the number of cells in a row for the component's display area. 11

Class Grid. Bag. Constraints public double weightx Specifies how to distribute extra horizontal space. The grid bag layout manager calculates the weight of a column to be the maximum weighty of all the components in a row. If the resulting layout is smaller horizontally than the area it needs to fill, the extra space is distributed to each column in proportion to its weight. A column that has a weight zero receives no extra space. If all the weights are zero, all the extra space appears between the grids of the cell and the left and right edges. The default value of this field is 0. weightx should be a non-negative value. public double weighty Specifies how to distribute extra vertical space. The grid bag layout manager calculates the weight of a row to be the maximum weightx of all the components in a row. If the resulting layout is smaller vertically than the area it needs to fill, the extra space is distributed to each row in proportion to its weight. A row that has a weight of zero receives no extra space. If all the weights are zero, all the extra space appears between the grids of the cell and the top and bottom edges. The default value of this field is 0. weighty should be a non-negative value. 12

Class Grid. Bag. Constraints public int fill This field is used when the component's display area is larger than the component's requested size. It determines whether to resize the component, and if so, how. The following values are valid for fill: NONE: Do not resize the component. HORIZONTAL: Make the component wide enough to fill its display area horizontally, but do not change its height. VERTICAL: Make the component tall enough to fill its display area vertically, but do not change its width. BOTH: Make the component fill its display area entirely. The default value is NONE. 13

User Interface - showing the constraints used by the Grid. Bag. Layout lbl. Points. Text Number of points: 0 gridx = 0, gridy = 0, gridwidth = 1, gridheight = 1, weightx = 0. 5, weighty = 0, fill = Grid. Bag. Constraints. HORIZONTAL gridx = 1, gridy = 0, gridwidth = 1, gridheight = 1, weightx = 0. 5, weighty = 0; fill = Grid. Bag. Constraints. HORIZONTAL battlefield gridx = 0, gridy = 1, gridwidth = 2, gridheight = 1, weightx = 1, weighty = 1, fill = Grid. Bag. Constraints. BOTH, insets = new Insets(5, 5, 5, 5) start. Button quit. Button Start Stop gridx = 0, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0. 5, weighty = 0, fill = Grid. Bag. Constraints. HORIZONTAL gridx = 1, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0. 5, weighty = 0, fill = Grid. Bag. Constraints. HORIZONTAL 14

Card. Layout • Card. Layout places components (usually panels) on top of each other in a stack like a deck of cards. You see only one at a time, and you can flip through the panels by using another control to select which panel comes to the top. 15