Java Swing Layout Management 1 Laying out components

Java Swing Layout Management 1

Laying out components n n n Manage realized components Determine size and position Each container has a layout manager • (usually) 2

Layout managers – general aspects n Creating a layout manager Consulting managers Types of managers Choosing managers Other features of component layout n All Covered very well here: n n • http: //java. sun. com/docs/books/tutorial/uiswing/layout/ using. html 3

Creating a layout manager n Default layout managers • JFrame, JDialog, JApplet have Border. Layout • JPanel has Flow. Layout n n Except when used as a Content Pane (Border Layout) Setting the layout manager for a container • JFrame frame = new JFrame(); frame. set. Layout(new Flow. Layout()); • JPanel content. Pane = new JPanel(); content. Pane. set. Layout(new Border. Layout()); 4

Consulting layout managers (1) n n Consulted automatically when container may need to change its appearance. These methods result in consultation, but DON’T trigger new layout • add(), remove. All() • get. Alignment. X(), get. Alignment. Y() • get. Preferred. Size(), get. Minimum. Size(), get. Maximum. Size() 5

Consulting layout managers (2) n These methods actually result in the manager performing layout. • JFrame. pack(); n Causes this Window to be sized to fit the preferred size and layouts of its subcomponents. • JFrame. show() & JFrame. set. Visible(true); n Shows the component • JComponent. revalidate(); n This method will automatically be called on this component when a property value changes. Looks for all dependent components and calls validate() on them. Validate() causes a container to lay out its subcomponents again 6

Layout managers - types n n n Border. Layout Box. Layout Flow. Layout Grid. Bag. Layout Card. Layout 7

Border. Layout n Five areas • • n NORTH, SOUTH, EAST, WEST and CENTER Not all areas must be used Do not assume a default area for components Centre gets as much area as possible Specify location as argument of add method • pane. set. Layout(new Border. Layout()); • pane. add(new JButton(“Button 1 (NORTH)”), Border. Layout. NORTH); n Setting gaps between components (default = 0) • Border. Layout. set. Hgap(int gap); • Border. Layout. set. Vgap(int gap); • Border. Layout(int horizontal. Gap, int vertical. Gap) - Constructor 8

Border. Layout import java. awt. *; java. awt. event. *; javax. swing. *; public class Border. Window extends JFrame { public Border. Window() { //--- use default content pane Container content. Pane = get. Content. Pane(); //--- Use the content pane's default Border. Layout. //--- content. Pane. set. Layout(new Border. Layout()); //unnecessary //--//--- under 1. 5 can just commented out line as content pane is implcitly obtained add(new JButton("Button 1 (NORTH)"), Border. Layout. NORTH); content. Pane. add(new JButton("Button 1 (NORTH)"), 9

Border. Layout content. Pane. add(new JButton("Button 1 (NORTH)"), Border. Layout. NORTH); content. Pane. add(new JButton("2 (CENTER)"), Border. Layout. CENTER); content. Pane. add(new JButton("Button 3 (WEST)"), Border. Layout. WEST); content. Pane. add(new JButton("Long-Named Button 4 (SOUTH)"), Border. Layout. SOUTH); content. Pane. add(new JButton("Button 5 (EAST)"), Border. Layout. EAST); } set. Default. Close. Operation(EXIT_ON_CLOSE); 10

Border. Layout public static void main(String args[]) { Border. Window window = new Border. Window(); window. set. Title("Border. Layout"); window. pack(); window. set. Visible(true); } } 11

Box. Layout (1) n Components on top / next to each other • Direction is your choice n n Tries to size components at preferred height for Y_AXIS or width for X_AXIS Width as largest component width • See above picture 12

Box. Layout (2) n Space fillers • Rigid - fixed-size space between two components • Glue - taking up no space unless you pull apart the components that it's sticking to. Helps reposition extra space (default is at end) • • Custom - Use this to specify a component with whatever minimum, preferred, and maximum sizes you want 13

Box. Layout (3) n Component sizes • Respect Max, Min and Preferred Sizes of components n Alignment • Comes into play when not all components are the same width • Can specify Left (0), Centre (0. 5) or Right (1). Or Top Middle Bottom n If you are having layout problems, first treat as an Alignment issue, then examine sizes. 14

Box. Layout import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Box. Window extends JFrame { public Box. Window() { Container content. Pane = get. Content. Pane(); content. Pane. set. Layout(new Box. Layout(content. Pane, Box. Layout. Y_AXIS)); add. AButton("Button 1", content. Pane); add. AButton("2", content. Pane); add. Glue(content. Pane); add. AButton("Button 3", content. Pane); add. Custom. Filler(content. Pane); add. AButton("Long-Named Button 4", content. Pane); add. AButton("Button 5", content. Pane); } set. Default. Close. Operation(EXIT_ON_CLOSE); private void add. AButton(String text, Container container) { JButton button = new JButton(text); button. set. Alignment. X(Component. CENTER_ALIGNMENT); container. add(button); } public void add. Glue(Container container) { container. add(Box. create. Vertical. Glue()); } public void add. Custom. Filler(Container container) { Dimension min. Size = new Dimension(300, 30); Dimension pref. Size = new Dimension(300, 30); Dimension max. Size = new Dimension(Short. MAX_VALUE, 30); container. add(new Box. Filler(min. Size, pref. Size, max. Size)); } public static void main(String args[]) { Box. Window window = new Box. Window(); } } window. set. Title("Box. Layout"); window. pack(); window. set. Visible(true); 15

Box. Layout import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Box. Window extends JFrame { public Box. Window() { Container content. Pane = get. Content. Pane(); content. Pane. set. Layout(new Box. Layout(content. Pane, Box. Layout. Y_AXIS)); add. AButton("Button 1", content. Pane); add. AButton("2", content. Pane); add. Glue(content. Pane); add. AButton("Button 3", content. Pane); add. Custom. Filler(content. Pane); add. AButton("Long-Named Button 4", content. Pane); add. AButton("Button 5", content. Pane); set. Default. Close. Operation(EXIT_ON_CLOSE); } 16

Box. Layout import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Box. Window extends JFrame { public Box. Window() { private void add. AButton(String text, Container container) { JButton button = new JButton(text); button. set. Alignment. X(Component. CENTER_ALIGNMENT) ; container. add(button); } public void add. Glue(Container container) { container. add(Box. create. Vertical. Glue()); } 17

Box. Layout import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Box. Window extends JFrame { public static void main(String args[]) { Box. Window window = new Box. Window(); } } window. set. Title("Box. Layout"); window. pack(); window. set. Visible(true); 18

Flow. Layout n n Very simple - JPanel’s default Components in row(s) At preferred size Alignment • • • n Flow. Layout. LEFT Flow. Layout. CENTRE Flow. Layout. RIGHT Gaps • • Default = 5 Specifying - setter h. Gap v. Gap methods or via constructor 19

Flow. Layout public class Flow. Window extends JFrame { public Flow. Window() { Container content. Pane = get. Content. Pane(); //content. Pane. set. Layout(new Flow. Layout()); //default = centre, 5, 5 content. Pane. set. Layout(new Flow. Layout(Flow. Layout. RIGHT, 30, 5)); content. Pane. add(new JButton("Button 1")); content. Pane. add(new JButton("2")); content. Pane. add(new JButton("Button 3")); content. Pane. add(new JButton("Long-Named Button 4")); content. Pane. add(new JButton("Button 5")); set. Default. Close. Operation(EXIT_ON_CLOSE); } 20

Flow. Layout public static void main(String args[]) { Flow. Window window = new Flow. Window(); window. set. Title("Flow. Layout"); window. pack(); window. set. Visible(true); } } 21

Grid. Layout n n n Grid of cells - all same size Components take all space in a cell Gaps • • • n default = 5 use setter methods h. Gap and v. Gap or via arguments to constructor Re-sizing • Cells resize to be as large as possible in given window / container 22

Grid. Layout public class Grid. Window extends JFrame { public Grid. Window() { Container content. Pane = get. Content. Pane(); //content. Pane. set. Layout(new Grid. Layout(0, 2)); content. Pane. set. Layout(new Grid. Layout(0, 3, 20)); content. Pane. add(new JButton("Button 1")); content. Pane. add(new JButton("2")); content. Pane. add(new JButton("Button 3")); content. Pane. add(new JButton("Long-Named Button 4")); content. Pane. add(new JButton("Button 5")); set. Default. Close. Operation(EXIT_ON_CLOSE); } 23

Grid. Bag. Layout (1) n n Very flexible (and complex!) Rows can have different heights Columns can have different lengths Uses cells in a grid Grid. Bag. Layout gridbag = new Grid. Bag. Layout(); Grid. Bag. Constraints c = new Grid. Bag. Constraints(); JPanel pane = new JPanel(); pane. set. Layout(gridbag); //--- For each component to be added to this container: //---. . . Create the component. . . //---. . . Set instance variables in the Grid. Bag. Constraints instance. . . gridbag. set. Constraints(the. Component, c); 24 pane. add(the. Component);

Grid. Bag. Layout (2) n Constraints • set in an instance of a grid. Bag. Constraints Object • gridx and gridy - The row and column of the upper left of the component • Anchor - Where to display within cell when component is smaller than it • fill - How to size component when cell is larger than components requested size • insets - External padding - min space between component and cell edges • ipadx, ipady - Internal padding - What to add to min size of components • weightx and weighty - How to distribute extra space (padding) • gridwidth and gridheight - Number of columns or rows the component uses • More explanation here: n n http: //java. sun. com/docs/books/tutorial/uiswing/layout/gridbag. Constraints. html Example explained very well here: • http: //java. sun. com/docs/books/tutorial/uiswing/layout/gridbag. Example. html 25

Grid. Bag. Layout public class Grid. Bag. Window extends JFrame { public Grid. Bag. Window() { JButton button; Container content. Pane = get. Content. Pane(); Grid. Bag. Layout gridbag = new Grid. Bag. Layout(); Grid. Bag. Constraints c = new Grid. Bag. Constraints(); content. Pane. set. Layout(gridbag); //set all components to fill available Horzontal space c. fill = Grid. Bag. Constraints. HORIZONTAL; button = new JButton("Button 1"); c. weightx = 0. 5; c. gridx = 0; c. gridy = 0; gridbag. set. Constraints(button, c); 26

Card. Layout n n n Manages objects (usually JPanels) in sets Works much like tabbed pane Choose cards by • Asking for card in order added to container • Going backwards or forwards • Specifying card by name 27

Card. Layout public class Card. Window extends JFrame implements Item. Listener { JPanel cards; final static String BUTTONPANEL = "JPanel with JButtons"; final static String TEXTPANEL = "JPanel with JText. Field"; public Card. Window() { Container content. Pane = get. Content. Pane(); //Put the JCombo. Box in a JPanel to get a nicer look. String combo. Box. Items[] = { BUTTONPANEL, TEXTPANEL }; JPanel cbp = new JPanel(); JCombo. Box c = new JCombo. Box(combo. Box. Items); c. set. Editable(false); c. add. Item. Listener(this); cbp. add(c); //Use the default layout manager, Border. Layout content. Pane. add(cbp, Border. Layout. NORTH); cards = new JPanel(); cards. set. Layout(new Card. Layout()); JPanel p 1 = new JPanel(); p 1. add(new JButton("Button 1")); p 1. add(new JButton("Button 2")); p 1. add(new JButton("Button 3")); JPanel p 2 = new JPanel(); p 2. add(new JText. Field("Text. Field", 20)); cards. add(p 1, BUTTONPANEL); cards. add(p 2, TEXTPANEL); content. Pane. add(cards, Border. Layout. CENTER); } set. Default. Close. Operation(EXIT_ON_CLOSE); public void item. State. Changed(Item. Event evt) { Card. Layout cl = (Card. Layout)(cards. get. Layout ()); (Card. Layout)(cards. get. Layout()); cl. show(cards, (String)evt. get. Item()); } 28

Choosing layout managers (1) n In order to display a component in as much space as it can get, consider: • Border. Layout n Component in centre • Grid. Bag. Layout n fill=Grid. Bag. Constraints. BOTH • Box. Layout n Component specifies very large preferred/maximum sizes 29

Choosing layout managers (2) n To display a few components in a compact row: • JPanel’s default Flow. Layout • Box. Layout n Display a few components of the same size in rows and columns • Grid. Layout 30

Choosing layout managers (3) n Display a few components in a row or column, with different spacing between them and custom component sizes • Box. Layout n Display a complex layout that has many components • Grid. Bag. Layout • Using JPanel grouping and hierarchies 31

Layout managers - other layout features n Absolute positioning of components • When • How n Customising layout managers • When • How 32

Absolute positioning (1) n Don’t do it; unless… • component size isn’t affected by container size or font & look’n’feel changes n e. g. desktop panes containing internal frames • custom container performs size & position calculations particular to container n e. g. split panes 33

Absolute positioning (2) n Key points from None. Window. java • Instruct window to use no Layout: n . content. Pane. set. Layout(null); • Set components size and position with n XYZ. set. Bounds(x, y, width, height); • Set window size with: n window. set. Size(x, y); 34

Absolute positioning public class None. Window extends JFrame { private JButton b 1, b 2, b 3; public None. Window() { Container content. Pane = get. Content. Pane(); content. Pane. set. Layout(null); b 1 = new JButton("one"); content. Pane. add(b 1); b 2 = new JButton("two"); content. Pane. add(b 2); b 3 = new JButton("three"); content. Pane. add(b 3); b 1. set. Bounds(25, 5, 75, 20); b 2. set. Bounds(55, 35, 75, 20); b 3. set. Bounds(300, 200, 75, 30); set. Default. Close. Operation(EXIT_ON_CLOSE); } 35

Custom layout managers (1) n Ensure no existing manager does the job • Grid. Bag. Layout / Box. Layout • Layout manager downloads n If your trying to do it, chances are someone else has done it already… • DECLARE use of external code in coursework 36

Custom layout managers (2) n Create class which implements Layout Manager interface • e. g. public class my. Manager implements Layout. Manager n Must have 5 methods required by interface • • • n void add. Layout. Component(String, Component) void remove. Layout. Component(Component) Dimension preferred. Layout. Size(Container) Dimension minimum. Layout. Size(Container) void layout. Container(Container) See below URL for more documentation • http: //java. sun. com/docs/books/tutorial/uiswing/layout/custom. html 37

Summary n n n Creating a layout manager Consulting managers Types of managers • Border. Layout • Box. Layout • Flow. Layout n n Grid. Layout Grid. Bag. Layout Card. Layout Choosing managers Absolute positioning Custom layout managers Next : Abstract Model Widgets 38