Layout Managers

1. Layout Managers A layout manager allows the java programmer to develop graphical interfaces that will have a common appearance across the heterogeneous internet. There are five layout managers that the programmer may choose from: • Flow Layout • Grid Layout • Border Layout • Card Layout • Gridbag Layout

2. Part of the AWT Class Hierarchy Object Component Button Checkbox Choice List Label Canvas TextComponent Container ScrollBar TextArea TextField Panel Window ScrollPane Applet Dialog Frame

3. Layout Managers A Component can be displayed on a screen and a user can interact with a Component. A Container is a Component that can hold other Components A Layout Manager directs the placement of Components within a Container.

4. Containers A Container maintains a list of Components that it manipulates as well as a LayoutManager to determine how components are displayed. The Container class contains the following subclasses: Window Frame Dialog Panel Applet ScrollPane

5. Containers Method defined in class Container include: setLayoutManager (LayoutManager) add (Component) add Component to display remove(Component) remove Component from display

6. Containers Window A Window is a 2-dimensional drawing surface that can be displayed on an output device. A Window can be stacked on top of other Windows and can be moved to the front or back of the visible windows. Methods in class Window include: show ( ) Make the Window visible toFront( ) Move Window to front toBack( ) Move window to back

7. Containers Frame A Frame is a type of Window with a title bar, a menu bar, a border, and a cursor. It is used most frequently to display applications that contain a graphical user interface or an animation. Methods defined in Frame include: setTitle(String) getTitle(String) setCursor(int) setResizable( ) make the window resizable setMenuBar(MenuBar) include the menu bar for the window

8. Containers Panel A Panel is generally used as a component in a Frame or an Applet. It is used to group components into a single unit. The Panel with its set of components is displayed as a single unit. It represents a rectangular region of the display. A Panel holds its own LayoutManager which may be different from the LayoutManager of the Frame or Applet in which it resides.

9. Containers Dialog Always attached to an instance of Frame. A window that is displayed for a short duration during execution. Default LayoutManager is BorderLayoutManager (same as for Frame) ScrollPane It can hold only one Component. It does not have a LayoutManager. If size of the component held is larger than the size of the ScrollPane, scroll bars will be automatically generated.

10. Layout Managers Flow Layout Lays out components row by row from left to right. It is very straightforward to use, but it affords the programmer the least ability to control the positioning of components. It is the default layout manager in an applet. As an example, consider an applet (subclass of Panel) that displays a number of Buttons for selecting a language.

11. Layout Managers English French Greek Japanese German Spanish Portuguese Arabic Chinese Russian Applet Started

12. Layout Managers Constructing the previous display import java.awt.*; public class SelectLang extends java.applet.Applet { Button eng = new Button(“English”); …. Button rus = new Button (“Russian”); FlowLayout flow = new FlowLayout(FlowLayout.LEFT); public void init ( ) { setLayout(flow); add(eng); …. add(rus); } }

13. Layout Managers Suppose we wish to construct the following layout Age 21-35 Over 65 Under 20 36-65 Name Street Address Zip City

14. Layout Managers FlowLayout (int alignment, int hGap, int vGap); In Example 1 – FlowLayout(FlowLayout.LEFT, 30, 10) Pure Flow Layout A more orderly organization is achieved by first putting components into panels and then placing panels in applet using Flow Layout Flow Layout with Panel components Flow Layout with mixed panels and discrete components

15. Center West East Layout Managers Border Layout North South

16. Layout Managers Properties of a Border Layout Manager More flexible in permitting programmer placement of components of different sizes (such as panels, canvases and text areas. Border areas adjust to accommodate the placement of a component. The center consists of what’s left over. public BorderLayout (int hGap, int vGap)

17. Layout Managers Example – A BorderLayout with a Label in North, a Scrollbar in South, a Panel containing a Checkboxgroup in West, a List in East, and a Canvas in Center. Border Layout Example Rectangle Oval Line Fill Background o Red o Blue o Green o Black o White

18. Layout Managers Grid Layout Programmer specifies the number of rows columns pixels between rows, pixels between columns GridLayout myGrid = new GridLayout (3, 2, 10, 10);

19. Layout Managers Grid Layout Components expand or contract in size to fill a single grid cell. Panels, canvases, and Lists are resized to fit into a grid cell. Components are placed in the container in order from left to right and top to bottom.

20. name address e-mail Layout Managers Grid Layout

21. Layout Managers An Applet with multiple Layout Managers Read from form

22. Layout Managers Card Layout A card layout is a group of components or containers that are displayed one at a time. Components or containers are placed on a card using the statement: add (String, component);

23. Layout Managers Card Layout Construction The Applet contains an ordered listing (array) of cards in one of its panels Card Panel

24. Layout Managers Applet Declarations public class CardDemo extends Applet { privatefinal int numCards = __; //whatever the number private String[ ] = new CardLabels[numCards]; //construct an array for holding CardPanel objects – specified in separate file private CardPanel[ ] cards = new CardPanel[numCards]; private CardLayout theLayout; //Layout for CardPanels //Create a Panel for displaying CardPanel objects in the Applet (green area) private Panel cardDisplayPanel; Applet initialization public void init ( ) { //essential statements for card display setLayout (new BorderLayout); //layout for the Applet add(“West”, makeOtherPanel( )); //2nd parameter returns a Panel add(“Center”, makeCardDisplayPanel( )); //2nd param returns a Panel }

25. Layout Managers CardPanel Objects CardPanel is a separately declared class that extends Panel CardPanels are containers with their own Components and Layout CardPanel objects are created in method makeCardDisplayPanel() of Applet CardPanel objects are stored in the array cards

26. Layout Managers Card Layout Example of a Card Layout Card Layout Demo

27. Content Select Filll Oval Red Putting It All Together o Line o Oval o Rectangle

28. Area 4 Panel 1 Area 2 Canvas Panel 5 Panel 6 Building the Graphical Interface Applet Panel 3

29. Description for Panel 1 Layout Manager: BorderLayoutManager Components: 3 ScrollBars – red, green, and blue Size: full height, less than1/4 width of applet Code: private Panel makeScrollBars ( ) { Panel p = new Panel( ); p.setLayout (new BorderLayout ( )); p.add (“West”, redBar); p.add (“Center”, greenBar); p.add (“East”, blueBar); return p; }

30. Layout Manager: GridLayoutManager –3 rows, 1 column, 4 pixel separation between rows Description for Panel 3 Components: 3 Panels – In GridLayout, all Panels will be the same size Size: full height, about 1/3 width of applet Code: private Panel makeSelectWindow ( ) { Panel p = new Panel( ); p.setLayout (new GridLayout (3, 1, 4, 0); p.add (p4); //Area 4 p.add (p5); //Panel 5 p.add (p6); //Panel 6 return p; }

31. Description of Area 2 Component: Canvas Layout Manager: None Contents: Graphics and Text Location: “Center” -- of BorderLayout

32. Construction of Applet Interface public class DrawScreen extends java.applet.Applet ( private BorderLayout myScreen = new BorderLayout( ); private Canvas cv = new Canvas( ); int up = Scrollbar.VERTICAL; private Scrollbar red = new Scrollbar(up, 40,0, 0, 255); private Scrollbar green = new Scrollbar(up, 40,0, 0, 255); private Scrollbar blue = new Scrollbar(up, 40,0, 0, 255); //declare remaining components public void init ( ) ( setLayout (myScreen); add (“West”, makeScrollBars()); add(“East”, makeSelectWindow( )); add(“Center”, cv); //in whatever area is left } }

33. Putting It All Together Multi-panelled Applet