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
- 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
Tschichold would not approve. Why?
- He believed that white space was essential to making a design
How does white space work?
- Common features, which means edges and symmetry axes
None of this helps very much in separating layout from content.
We saw that this has usually been done by creating a collection of
- 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
- put things side by side on the top line until there is no more
- 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
- The first thing you ask when you encounter a new layout manager is:
How does the add order distribute the comoponents around the
- How is flow layout dynamic?
which can be horizontal or vertical
With box layout you can do anything. But some things are hard
- put things into a row - left to right - or a column - top to
- 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?
- incorporates the inter-row constraints necessary to lay out a table
- does not fit comfortably with the model of putting components into
Other things you might want to do with layout
We have now seen the main set of layouts.
- What lies behind the operation of layout?
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