1 / 38

LAYOUT

LAYOUT. CMPT 381. Overview. What is layout? Examples Layout models. What is Layout?. Position of widgets in the containing window What to do when the window changes size ? Must be programmed

kimball
Download Presentation

LAYOUT

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. LAYOUT CMPT 381

  2. Overview What is layout? Examples Layout models

  3. What is Layout? • Position of widgets in the containing window • What to do when the window changes size? • Must be programmed • Layout Managers greatly reduce the need to worry about positioning, sizing and alignment of widgets

  4. Resizing problems

  5. Resizing problems

  6. Window Tree • hierarchical layout

  7. Hierarchical Layout • Widgets positioned relative to their parent

  8. Layout Approaches • Fixed Layout • Stacked Layout • Edge-Anchored Layout • Variable Intrinsic Size Layout • Automated Approaches

  9. GUI Builders

  10. Why not use a GUI builder? • These are getting better, BUT: • They can cause problems • e.g., they may use simplistic models • Resizing still an issue! • The generated code is often not maintainable • Fixing problems requires understanding the underlying principles anyway • http://leepoint.net/JavaBasics/gui/gui-commentary/guicom-20-byhand.html

  11. Fixed Position Layout • Store a rectangle for each component • Simple to implement • Widgets stay where you put them • Makes sense for a dialog that is not resizable

  12. Tk Placer • button .b -text "I'm a Tk Button!" • text .t -height 10 -width 50 • place .b -x 50 -y 180 • place .t -x 0 -y 0

  13. Swing AbsoluteLayout pane.setLayout(null); JButton b1 = new JButton("one"); JButton b2 = new JButton("two"); JButton b3 = new JButton("three"); pane.add(b1); pane.add(b2); pane.add(b3); Insets insets = pane.getInsets(); Dimension size = b1.getPreferredSize(); b1.setBounds(25 + insets.left, 5 + insets.top, size.width, size.height); size = b2.getPreferredSize(); b2.setBounds(55 + insets.left, 40 + insets.top, size.width, size.height); size = b3.getPreferredSize(); b3.setBounds(150 + insets.left, 15 + insets.top, size.width + 50, size.height + 20);

  14. Problems with fixed positioning

  15. Stacked Layouts • Place sub-containers in horizontal or vertical stacks • No need to worry about specific locations • Widgets arranged inside containers horizontally or vertically • Doesn’t resize very well

  16. Swing Flow Layout FlowLayoutexperimentLayout = new FlowLayout(); ... compsToExperiment.setLayout(experimentLayout); compsToExperiment.add(new JButton("Button 1")); compsToExperiment.add(new JButton("Button 2")); compsToExperiment.add(new JButton("Button 3")); compsToExperiment.add(new JButton("Long-Named Button 4")); compsToExperiment.add(new JButton("5")); http://download.oracle.com/javase/tutorial/uiswing/layout/flow.html

  17. Edge-Anchored Layout • We want something as easy to use as fixed position but that will also handle resizing • Programmer doesn’t worry about specific positions TitleBar CloseButton Title Always want centered Fixed Width

  18. A B Struts and Springs • Place struts and springs in the layout • Struts represent fixed lengths • Springs push as much as they can • Could use constraints: • CloseButton.RIGHT = TitleBar.RIGHT – 5 • Title.CENTER = TitleBar.CENTER

  19. Struts and Springs • Relative constraints in Tk placer: • entry .e • button .b –text “Search” • place .e -anchor c -relx 0.5 -rely 0 -y 15 • place .b1 -anchor e -relx 1.0

  20. Problems with constraints • Complicated • Programmer must keep track of geometry • With large numbers of widgets this is difficult • Often impossible to specify constraints adequately

  21. New Window Open Page Save Save as Cut Copy Paste Label Variable Intrinsic Size • Size of widget determined by sizes of items within • e.g. Menus, most Java widgets • Intrinsic size does not handle resizing • Variable Intrinsic Size • Each widget reports its size needs (recursively if necessary) • Each widget also reports how much it can be reasonably squeezed or expanded

  22. Automated Layout • A layout manager positions and sizes widgets • Programmer provides constraints • Many different algorithms to determine where widgets should go when added to a container • Swing: • CardLayout, BorderLayout, GridLayout, FlowLayout • GridBagLayout • Tk (called “geometry managers”): • Packer, Gridder • Android: • LinearLayout, RelativeLayout

  23. Packing • Tk packer: • Placeswidgets by packing them around window edges • Keeps track of remaining space (the cavity) • Algorithm: • For each widget to be packed: • Allocate a rectangular parcel on the indicated side of the cavity (keeping the cavity rectangular) • Determine the size of the widget • Position the widget in its parcel • Subtract the parcel from the cavity

  24. Packing example • We want to end up with this: entry .e button .b text .t

  25. Packing example • We want to end up with this: • Try: • pack .e -side left -anchor n • pack .b -side right -anchor n • pack .t -side bottom entry .e button .b text .t

  26. entry .e Packing example • pack .e -side left -anchor n

  27. entry .e button .b Packing example • pack .b -side right -anchor n

  28. entry .e button .b text .t Packing example • pack .t -side bottom

  29. entry .f.e button .f.b text .t Packing example • How to make this work? • Do we need an internal frame? frame .f

  30. Pack layout challenge

  31. Grid-based layout • Puts components on a “virtual grid” • Rows and columns • Components fit into one or more cells • Easy for programmers to understand • Works well with grid-based screen design • Layout controlled by constraints

  32. Grid constraints • Where in the grid to start • Tk grid: -row, -column • Java GridBagLayout: gridx, gridy • How many cells to take up • Tk grid: -rowspan, -columnspan • Java GridBagLayout: gridwidth, gridheight • Where to place the component in the cell • Tk grid: -sticky • Java GridBagLayout: anchor, fill • What to do when the cell resizes • Tk grid: -sticky • Java GridBagLayout: weightx, weighty

  33. Grid layout challenge

  34. In Practice • May combine layout managers • e.g., in Tk: • use Grid to place different components • use placer (with constraints) for toolbars • use packer for content (to allow it to expand and fill on resizing)

  35. Swing: Providing Size and Alignment Hints • Sometimes you need to customize the size and alignment of widgets • E.g. setMinimumSize, setPreferredSize and setMaximumSize, setAlignmentX, setAlignmentY • Layout managers behave differently, some ignore these hints • E.g. Most will not pay attention to requested maxSize, but BoxLayout and SpringLayout do • Most ignore alignment hints, but BoxLayout honours them

  36. Swing: Choosing a Layout Manager • http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html#choosing

  37. Layout in Android • Simpler screen environment • Only one kind of resizing • LinearLayout • Horizontal or vertical direction • RelativeLayout • Relative constraints • Layouts can be nested • …but there are performance costs

More Related