A First Look at GUI Applications

1. A First Look at GUI Applications Part III: Layout Managers

2. Contents • What is Layout Manager? • FlowLayout Manager • BorderLayout Manager • GridLayout Manager

3. A. What is Layout Manager? • A layout manager is an object that governs the positions and sizes of components in a container • Swing provides a variety of layouts: FlowLayout, BorderLayout, GridLayout, Null Layout… • Use method containers’ setLayout to change its layout container.setLayout(new BorderLayout()) • Default layout for JFrame is BorderLayout and FlowLayout for JPanel

4. B. FlowLayout Manager • What is FlowLayout? • Flow Window Problem

5. I. What is FlowLayout? • Components appear horizontally, from left to right, in the order that they were added. When there is no more room in a row, the next components will be dropped to the next row • FlowLayout’s constructors • FlowLayout() • FlowLayout(int align): the align can be FlowLayout.CENTER, FlowLayout.LEFT, or FlowLayout.RIGHT • FlowLayout(int align, int hgap, int vgap) where hgap and vgap are a gap of pixels among components, horizontally and vertically

6. II. Flow Window Problem • Develop a program that lays three buttons on the horizontal of window has the size 400x70

7. Solution Project name: FlowWindow • Analysis and Design • Developing the View

8. 1. Analysis and Design

9. 2. Developing the View Package name: flowwindow 2.1. Designing the View 2.2. Developing the FlowWindowViewTest Class 2.3. Developing the FlowWindowView Class

10. 2.1. Designing the View • Title: Flow Layout • Size: 400x70 • Layout: Flow Layout • Button 1 • Button 2 • Button 3

11. 2.2. Developing the FlowWindowViewTest Class

12. 2.3. Developing the FlowWindowView Class • Set the layout • Add the buttons

13. B. BorderLayout Manager • What is BorderLayout? • Border Window Problem • Border Panel Window Problem

14. I. What is BorderLayout? • BorderLayout manages five regions where components can be placed

15. I. What is BorderLayout? (cont.) • BorderLayout’s constructors: • BorderLayout • BorderLayout(int hgap, int vgap) • Components are added to a border layout container: container.add(Component comp, String region) Where the region is one of the following values: • BorderLayout.NORTH • BorderLayout.SOUTH • BorderLayout.EAST • BorderLayout.WEST • BorderLayout.CENTER

16. II. Border Window Problem • Develop a program that has interface as below:

17. Solution Project name: BorderWindow • Analysis and Design • Developing the View

18. 1. Analysis and Design

19. 2. Developing the View Package name: borderwindow 2.1. Designing the View 2.2. Developing the BorderWindowViewTest Class 2.3. Developing the BorderWindowView Class

20. 2.1. Designing the View • Title: Border Layout • Size: 400x300 • Layout: Border Layout • North button • West button • South button • East button • Center button

21. 2.2. Developing the BorderWindowViewTest Class

22. 2.3. Developing the BorderWindowView Class • Don’t need to set the layout here because border layout is used for a frame by default • Add the buttons

23. III. Border Panel Window Problem • Enhance the border window problem in order to reach the following interface:

24. Solution Project name: BorderPanelWindow • Analysis and Design • Developing the View

25. 1. Analysis and Design

26. 2. Developing the View Package name: borderpanelwindow 2.1. Designing the View 2.2. Developing the BorderPanelWindowViewTest Class 2.3. Developing the BorderPanelWindowView Class

27. 2.1. Designing the View • Title: Border Layout • Layout: Border Layout • North button panel • North button • West button panel • West button • South button panel • South button • East button panel • East button • Center button panel • Center button

28. 2.2. Developing the BorderPanelWindowViewTest Class

29. 2.3. Developing the BorderPanelWindowView Class 2.3.1. Developing the North Button Panel 2.3.2. Developing the West Button Panel 2.3.3. Developing the Other Button Panels

30. 2.3.1. Developing the North Button Panel

31. 2.3.2. Developing the West Button Panel

32. Duplicating Code

33. Improving the Code

34. 2.3.3. Developing the Other Button Panels

35. Improving the Code

36. D. GridLayout Manager • What is GridLayout? • Grid Window Example • Grid Panel Window Example

37. I. What is GridLayout? • GridLayout creates a grid with rows and columns, much like a spreadsheet. A container that is managed by a GridLayout object is divided into equally sized cells • Each cell can hold only one component • A component that is placed in a cell is automatically resized to fill up any extra space columns rows

38. I. What is GridLayout? (cont.) • GridLayout’s constructors: • GridLayout() • GridLayout(int rows, int cols) • GridLayout(int rows, int cols, int hgap, int vgap) • If rows or cols is declared as zero, it means no limit for rows or columns, but not for both

39. II. Grid Window Example • Develop a program that has six buttons laid in a grid of 2x3

40. Solution Project name: GridWindow • Analysis and Design • Developing the View

41. 1. Analysis and Design

42. 2. Developing the View Package name: gridwindow 2.1. Designing the View 2.2. Developing the GridWindowViewTest Class 2.3. Developing the GridWindowView Class

43. 2.1. Designing the View • Title: Grid Layout • Size: 400x200 • Layout: Grid Layout (2x3) • Six Buttons

44. 2.2. Developing the GridWindowViewTest Class

45. 2.3. Developing the GridWindowView Class • Set the layout • Add the buttons

46. III. Grid Panel Window Example • Develop a program that has six labeled buttons laid in a grid as below:

47. Solution Project name: GridPanelWindow • Analysis and Design • Developing the View

48. 1. Analysis and Design

49. 2. Developing the View Package name: gridpanelwindow 2.1. Designing the View 2.2. Developing the GridPanelWindowViewTest Class 2.3. Developing the GridPanelWindowView Class

50. 2.1. Designing the View • Title: Grid Layout • Size: 400x200 • Layout: Grid Layout (2x3) • Button Panel 1 • Label: This is cell 1. • Button 1 . . . • Button Panel 6 • Label: This is cell 6. • Button 6