1. Dept. of CSIE, National University of Tainan 10/21/2012 Arranging Components on a User Interface

2. Laying Out an Interface 2 A layout manager determines how components will be arranged when they are added to a container. layout managers: BorderLayout, BoxLayout, CardLayout, FlowLayout, GridBagLayout, and GridLayout. Example FlowLayout flo = new FlowLayout(); After you create a layout manager, you make it the layout manager for a container by using the container’s setLayout() method. If no layout manager is specified, its default layout will be used—FlowLayout for panels and BorderLayout for frames and windows.

3. Flow Layout 3 FlowLayout(int, int, int) constructor takes the following three arguments, in order:  The alignment, which must be one of five class variables of FlowLayout: CENTER, LEFT, RIGHT, LEADING, or TRAILING  The horizontal gap between components, in pixels  The vertical gap, in pixels FlowLayout righty = new FlowLayout(FlowLayout.RIGHT); FlowLayout flo = new FlowLayout(FlowLayout.CENTER, 30, 10);

4. Stacker.java 4 public class Stacker extends JFrame { public Stacker() { super(“Stacker”); setSize(430, 150); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // create top panel JPanel commandPane = new JPanel(); BoxLayout horizontal = new BoxLayout(commandPane, BoxLayout.X_AXIS); commandPane.setLayout(horizontal);

5. Stacker.java 5 JButton subscribe = new JButton(“Subscribe”); JButton unsubscribe = new JButton(“Unsubscribe”); JButton refresh = new JButton(“Refresh”); JButton save = new JButton(“Save”); commandPane.add(subscribe); commandPane.add(unsubscribe); commandPane.add(refresh); commandPane.add(save); // create bottom panel JPanel textPane = new JPanel(); JTextArea text = new JTextArea(4, 70); JScrollPane scrollPane = new JScrollPane(text);

6. Stacker.java 6 // put them together FlowLayout flow = new FlowLayout(); setLayout(flow); add(commandPane); add(scrollPane); setVisible(true); } public static void main(String[] arguments) { Stacker st = new Stacker(); } }

7. 7

8. Grid Layout 8 The grid layout manager arranges components into a grid of rows and columns. Components are added first to the top row of the grid, beginning with the leftmost grid cell and continuing to the right. GridLayout gr = new GridLayout(10, 3); GridLayout gr2 = new GridLayout(10, 3, 5, 8); //a grid layout with 10 rows and 3 columns, a horizontal gap of 5 //pixels, and a vertical gap of 8 pixels:

9. Bunch.java 9 public class Bunch extends JFrame { JButton marcia = new JButton(“Marcia”); JButton carol = new JButton(“Carol”); JButton greg = new JButton(“Greg”); JButton jan = new JButton(“Jan”); JButton alice = new JButton(“Alice”); JButton peter = new JButton(“Peter”); JButton cindy = new JButton(“Cindy”); JButton mike = new JButton(“Mike”); JButton bobby = new JButton(“Bobby”); public Bunch() { super(“Bunch”); setSize(260, 260); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

10. Bunch.java 10 JPanel pane = new JPanel(); GridLayout family = new GridLayout(3, 3, 10, 10); pane.setLayout(family); pane.add(marcia); pane.add(carol); pane.add(greg); pane.add(jan); pane.add(alice); pane.add(peter); pane.add(cindy); pane.add(mike); pane.add(bobby); add(pane); setVisible(true); }

11. Bunch.java 11 public static void main(String[] arguments) { Bunch frame = new Bunch(); } }

12. Border Layout 12 Border.java public class Border extends JFrame { JButton nButton = new JButton(“North”); JButton sButton = new JButton(“South”); JButton eButton = new JButton(“East”); JButton wButton = new JButton(“West”); JButton cButton = new JButton(“Center”); public Border() { super(“Border”); setSize(240, 280); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setLayout(new BorderLayout())

13. Border Layout 13 add(nButton, BorderLayout.NORTH); add(sButton, BorderLayout.SOUTH); add(eButton, BorderLayout.EAST); add(wButton, BorderLayout.WEST); add(cButton, BorderLayout.CENTER); } public static void main(String[] arguments) { Border frame = new Border(); frame.setVisible(true); } }

14. 14