1. LayoutManager, J 1 Layout Manager

2. LayoutManager, J 2 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.

3. LayoutManager, J 3 BorderLayout public class buttonDir extends Applet { public void init() { setLayout(new BorderLayout()); 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")); }

4. LayoutManager, J 4 The UI of a calculator The following GUI- components are used: –Applet –TextField –Panel –Button

5. LayoutManager, J 5 GUI code for Calculator import java.awt.*; import java.awt.event.*; import java.applet.*; public class Calculator extends Applet implements ActionListener { private TextField theDisplay; public void init () { //Initialize the applet // // Separate applet into "North", "South", "East", "West", // and "Center", that is "use BorderLayout". setLayout(new BorderLayout()); theDisplay = new TextField(40); add("South",theDisplay); addButtons(); }.........

6. LayoutManager, J 6 Adding the buttons private void addButtons () { // Place calculator buttons in a grid at the center of the main frame. Panel topPanel = new Panel(); topPanel.setLayout(new GridLayout(4,4)); Button button; button = new Button("1"); button.addActionListener(this); topPanel.add(button); button = new Button("2"); button.addActionListener(this); topPanel.add(button);.............. // Place calculator buttons in the center of the frame add("Center", topPanel); // Place "do calculation"-button at the right button = new Button("="); button.addActionListener(this); add("East", button); // Place clear-button at the left button = new Button("C"); button.addActionListener(this); add("West", button); }

7. LayoutManager, J 7 Event-handling code public void actionPerformed (ActionEvent e){ String arg = e.getActionCommand(); handelButtons(arg); } private void handelButtons (String buttonItemText){ if (buttonItemText.equals("C")){ theDisplay.setText(""); } else { String theText = theDisplay.getText(); String newText; int posStart = theDisplay.getSelectionStart(); int posEnd = theDisplay.getSelectionEnd(); if (posStart > 0){ newText = theText.substring(0, posStart) + buttonItemText; } else { newText = buttonItemText; } if (posStart < theText.length()) newText = newText + theText.substring(posEnd, theText.length()); theDisplay.setText(newText); theDisplay.select(posStart+1, posStart+1); } } }

8. LayoutManager, J 8 Another GUI Example Start Stop Number of points:0

9. LayoutManager, J 9 How it looks in Windows

10. LayoutManager, J 10 Making the User Interface - Using GridBagLayout (solutions without GridBagLayout is also possible) public void addUserComponents () { setLayout(new GridBagLayout()); GridBagConstraints constraints = new GridBagConstraints(); constraints.gridx = 0; constraints.gridy = 0; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Label lblPointsText = new Label("Number of points: ", Label.RIGHT); add(lblPointsText, constraints); constraints.gridx = 1; constraints.gridy = 0; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Label lblPoints = new Label("0 "); add(lblPoints, constraints); public void addUserComponents () { setLayout(new GridBagLayout()); GridBagConstraints constraints = new GridBagConstraints(); constraints.gridx = 0; constraints.gridy = 0; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Label lblPointsText = new Label("Number of points: ", Label.RIGHT); add(lblPointsText, constraints); constraints.gridx = 1; constraints.gridy = 0; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Label lblPoints = new Label("0 "); add(lblPoints, constraints); constraints.gridx = 0; constraints.gridy = 1; constraints.gridwidth = 2; constraints.gridheight = 1; constraints.weightx = 1; constraints.weighty = 1; constraints.fill = GridBagConstraints.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 = GridBagConstraints.HORIZONTAL; Button quitButton = new Button("Start"); add(quitButton, constraints); constraints.gridx = 1; constraints.gridy = 2; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Button startButton = new Button("Stop"); add(startButton, constraints); setBackground(Color.gray); } constraints.gridx = 0; constraints.gridy = 1; constraints.gridwidth = 2; constraints.gridheight = 1; constraints.weightx = 1; constraints.weighty = 1; constraints.fill = GridBagConstraints.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 = GridBagConstraints.HORIZONTAL; Button quitButton = new Button("Start"); add(quitButton, constraints); constraints.gridx = 1; constraints.gridy = 2; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weightx = 0.5; constraints.weighty = 0; constraints.fill = GridBagConstraints.HORIZONTAL; Button startButton = new Button("Stop"); add(startButton, constraints); setBackground(Color.gray); }

11. LayoutManager, J 11 Class GridBagConstraints 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.

12. LayoutManager, J 12 Class GridBagConstraints 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.

13. LayoutManager, J 13 Class GridBagConstraints 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.

14. LayoutManager, J 14 User Interface - showing the constraints used by the GridBagLayout gridx = 0, gridy = 1, gridwidth = 2, gridheight = 1, weightx = 1, weighty = 1, fill = GridBagConstraints.BOTH, insets = new Insets(5, 5, 5, 5) Start gridx = 0, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0, fill = GridBagConstraints.HORIZONTAL Start gridx = 0, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0, fill = GridBagConstraints.HORIZONTAL Stop gridx = 1, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0, fill = GridBagConstraints.HORIZONTAL Stop gridx = 1, gridy = 2, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0, fill = GridBagConstraints.HORIZONTAL Number of points: gridx = 0, gridy = 0, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0, fill = GridBagConstraints.HORIZONTAL 0 gridx = 1, gridy = 0, gridwidth = 1, gridheight = 1, weightx = 0.5, weighty = 0; fill = GridBagConstraints.HORIZONTAL lblPointsText lblPoints battlefield quitButton startButton

15. LayoutManager, J 15 CardLayout CardLayout 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.