1 / 54

A First Look at GUI Applications

A First Look at GUI Applications. Part III: Layout Managers. Contents. What is Layout Manager? FlowLayout Manager BorderLayout Manager GridLayout Manager. A. What is Layout Manager?. A layout manager is an object that governs the positions and sizes of components in a container

delano
Télécharger la présentation

A First Look at GUI Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related