cs349 - s10 - Lecture 24
CS349 - Implementing User Interfaces - Spring 2010
Public Service Annoucements
Lecture 24 - Graphic Design & Layout Managers
Layout in the Twentieth Century
Wildly oversimplifying, there were two layout revolutions in the twentieth
century.
- Assymmetric (1920)
- Symmetric (1950)
Oddly, both were invented by the same man, Jan Tschichold.
There looks like being a third revolution in the early twenty-first
century.
- Packed
Tschichold would not approve. Why?
- He believed that white space was essential to making a design
readable.
How does white space work?
- Separation
- Common features, which means edges and symmetry axes
- Rhythm
None of this helps very much in separating layout from content.
We saw that this has usually been done by creating a collection of
template pages.
- And what unifies the template pages is usually a set of guide lines
Layout Managers: Java/Swing
Here are two layout types that do something like what TeX does
FlowLayout
- put things side by side on the top line until there is no more
horizontal space.
- then start on the line below.
- Make each line as high as its highest component.
- What's important here is that a two-dimensional problem has been
reduced to a one-dimensional problem by specifying the order in which
two-dimensional space is filled with components.
- This is a common feature of layout managers, and is related to the
add
method and the data structures maintained inside a
container.
- The first thing you ask when you encounter a new layout manager is:
How does the add order distribute the comoponents around the
container?
- How is flow layout dynamic?
BoxLayout
which can be horizontal or vertical
- put things into a row - left to right - or a column - top to
bottom.
- alignment in the `other direction' is an issue
- horizontal boxes are centre-aligned vertically
- vertical boxes are left-aligned horiozntally
- usually! Really, it depends how the components you are
putting in are aligned internally.
- To get things predictable use glue. Then `other direction'
alignment becomes completely predictable. Why?
With box layout you can do anything. But some things are hard
Grid layout
- incorporates the inter-row constraints necessary to lay out a table
- does not fit comfortably with the model of putting components into
containers
GridBag layout
Other things you might want to do with layout
Border layout
ScrollPanel layout
We have now seen the main set of layouts.
- What lies behind the operation of layout?
Layout Managers
Layout Manager is a property of a container. It takes
- a layout policy
- high level constraints, like window size
- interface widgets
- low level constraints, like minimum widget size
and decides where to put the widgets in the window.
A simple example: BoxLayout
What it does:
- lines up components horizontally or vertically
- horizontal/vertical is specified in the constructor
- layout is a property of the container
How you use it:
- add components, in order, to the container
- components each have their own border
- components each have their own alignment
An important innovation to notice
Layout is based on areas, not on guide lines
Return to: