YouTube Break. - PDF Free Download

Layout Jeff Avery

YouTube Break https://www.youtube.com/watch?v=lvtfd_rj2he

Positioning Visual Components Previously, we learned about event handling and model-view-control architecture. Next, we need to have an efficient way to layout (or position) the visual components associated with the views.

Overview Motivation Layout Manager CSS and Responsive Design

Two Interface Layout Tasks (1) Designing a spatial layout of widgets in a container (2) Adjusting that spatial layout when the container is resized Both can be done by hand (e.g., graphic design) or automatically (i.e., with algorithms).

Dynamic Layout If a window is resized, we want to 1. maximize use of available space for displaying widget. but we want to do this such that 2. maintain consistency with spatial layout 3. preserve visual quality of spatial layout Need to dynamically modify the layout: re-allocate space for widgets adjust location and size of widgets perhaps even change visibility, look and/or feel of widgets

Responsive Design Changing layout to adapt / respond to different devices e.g., same webpage with layouts for desktop, tablet, smartphone Often goes beyond spatial layout to swapping widgets Dynamic layout a special case of adaptive / responsive layout http://www.amazium.co.uk/

Widget Size and Positions To make a layout dynamic, widgets need to be flexible x,y position may be changed width and height may be changed However, these changes can be constrained Widgets give the layout algorithm constraints on position e.g. must be anchored on the left side of the window Widgets give the layout algorithm a range of sizes: minimum size < preferred size < maximum size But Button Button Button

Overview Motivation Layout Manager CSS and Responsive Design

Layout Managers A LayoutManager provides layout algorithm to size and position child widgets. The Java Swing Package, for example, provides a LayoutManager. Widgets can use different LayoutManager s strategies container.setlayout(new GridLayout(2,3)); This is especially useful for container widgets like JPanel.

Layout Manager Attributes Does it respect a widget's preferred/min/max size? Always ignored? Always respected, even if parts of a widget extend off the edge? Respected in some dimensions but not others? How does it handle extra space? Add extra space around widgets? Give it equally to all widgets? Give it unequally to widgets? Do widgets require additional constraints? Where in the layout manager? Alignment? Share of additional space?

Layout Design Patterns Layout in Java makes use of two design patterns: Composite Pattern Strategy Pattern

Composite Design Pattern The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets clients treat individual objects and compositions uniformly.

Composite Design Pattern in Swing JFrame JLabel JButton JSlider JMenuBar JMenu JPanel JMenuItem JRadioButton

Strategy Design Pattern The idea is to factor out an algorithm into separate object, thereby allowing a client to dynamically switch between algorithms. e.g. Java Comparator strategy for a Collection context e.g. Switching layouts at runtime

General Layout Strategies Fixed layout Intrinsic size Variable intrinsic size Struts and springs

Fixed Layout Widgets have a fixed size, fixed position In Java, achieved by setting LayoutManager to null Where/when is this practical? How can it break down even when windows aren t resized?

Intrinsic Size Layout Query each item for its preferred size Grow the widget to perfectly contain each item A bottom-up approach where toplevel widget s size is completely dependent on its contained widgets Example LayoutManagers in Java that use this strategy - BoxLayout, FlowLayout Can you think of other examples of use in interface design?

Variable Intrinsic Size Layout Layout determined in bottom-up and top-down phases: 1. Get each widgets preferred size. 2. Set the container bounds based on widgets and its own preference Example LayoutManagers in Java - GridBagLayout, BorderLayout

Struts and Spring Layout Layout specified by marking aspects of widgets that are fixed vs. those that can stretch Strut is a fixed space (width/height) Specifies invariant relationships in a layout Spring stretches to fill space (or expand widget size) Specifies variable relationships Springs are called glue in Java Can add more general constraints too e.g. widget must be EAST of another widget Example LayoutManagers in Java SpringLayout, BoxLayout (pretty restricted form)

Overview Motivation Layout Manager CSS and Responsive Design

CSS: Cascading Style Sheets CSS splits presentation from content, and defines how HTML should be displayed. Replaces early HTML elements (e.g. font, color) CSS stylesheets can be placed in a file and imported. Stylesheet consists of a series of declarations.

CSS: Cascading Style Sheets Stylesheets chain a series of declarations together: CSS allows you to unexpected things like normalize the visual appearance across different browsers (e.g., by using CSS reset (http://www.cssreset.com) layout a grid without using <table>

CSS: Advantages Consistency consistent layout and look across pages and within pages changes can be applied consistently across pages Minimize network traffic (cache the CSS file) Reduce the amount of code by facilitating style reuse Separation of concerns between styling and content

Pre-built Stylesheets

The Cascade A single HTML document may have many stylesheets. There may be in-line styles. The browser has pre-defined styles. The user can define styles. For a given element, which one takes precedence? How are missing values filled in?

The Cascade (from W3C) 1. Find all the declarations that match the element. If no declarations apply, exit algorithm. 2. Sort declarations by explicit weight: declarations marked! important carry more weight than unmarked declarations. 3. Sort by origin: the author s stylesheets override the reader s style sheet which overrides the web browser s default values. 4. Sort by specificity of selector: more specific selectors will override more general ones. 5. Sort by order specified: if two rules have the same weight, the latter specified wins.