YouTube Break.

Size: px

Start display at page:

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

Oswin Booth
5 years ago
Views:

1 Layout Jeff Avery

2 YouTube Break

3 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.

4 Overview Motivation Layout Manager CSS and Responsive Design

5 Overview Motivation Layout Manager CSS and Responsive Design

7 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).

8 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 /

layout to swapping widgets Dynamic layout a

9 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

10 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

11 Overview Motivation Layout Manager CSS and Responsive Design

12 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.

13 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?

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

The intent of a composite is to "compose" objects into tree structures to represent

15 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.

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

17 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

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

19 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?

20 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?

21 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

22 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)

23 Overview Motivation Layout Manager CSS and Responsive Design

25 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.

26 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 ( layout a grid without using <table>

27 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

28 Pre-built Stylesheets

29 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?

30 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.

31 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

32 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

33 Selectors: Rule Structure Selector p { } Property Declaration block Value padding-left: 20px; color: red;

34 Selectors <head> <meta charset="utf-8"/> <title> </title> <link href="css/some-stylesheet.css rel="stylesheet"/> <script src="scripts/some-script.js > </script> </head>

35 Selectors What HTML CSS Universal * { } Type <p> p { } Descendent <ul> <li> <em> ul em { } Child <p> <em> p > em { } Pseudoselectors <tr><td> </td><td> td:active { } a:hover Class <div class= floatleft big > div.floatleft { } or.big{ } Id <img id= cicero > #cicero { }

36 Selectors: Values Colors #RRGGBB (e.g., #FFFF00 for yellow) rgb(rr.rr%, gg.gg%, bb.bb%) black, yellow silver, gray maroon, purple and about 150 others Numbers Percentage: 50% Absolute:.5in, 1cm, 10mm, 50pt, 50px Relative: 1.2em

37 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

38 Floats By default, HTML is governed by the normal flow in which each element stacks one of top of each other vertically. Floats allow the elements to break this pattern. According to WC3: A float is a box that is shifted to the left or right on the current line. The most interesting characteristics of a float (or floating box ) is that content may flow along its side (or be prohibited from doing so by the clear property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

39 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

40 Box Model padding margin border height width content All HTML elements have a box model, which includes content, padding, margin and border. Margins can have negative lengths Padding and borders default to 0 and none.

41 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

42 Responsive Design Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. - Ethan Marcotte, A List Apart

43 screen and (min-width: 450px) and (min-device-width: 450px) {.cell { width: 50%; color: blue; } h1 { color: blue; font-style: italic; } }

44 Recognized media types type all braille embossed handheld print projection screen speech tty tv description suitable for all devices intended for braille tactile feedback devices. intended for paged braille printers intended for handheld devices intended for paged material and for documents viewed intended on for screen projected in print presentations preview mode. intended primarily for color computer screens intended for speech synthesizers intended fixed-pitch character grid. intended for television-type devices.

45 Debugging Responsive Design

46 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

47 Block versus Inline Block creates a break before and after placed below previous elements on the next line examples: p, div, form, header, nav, ul, li, h1, table Inline no break before and after displayed inside the current block on the same line examples: a, span, b, em, i, strong, img

48 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

49 Positioning Static the default position for any element on a Web page, displayed based on its location inside the normal flow of the HTML document. Absolute the element is taken out of the normal flow of the document (i.e., it won't affect how the elements before it or after it in the HTML are positioned) and placed in an exact location on the page. e.g., footer Relative: the position is based on offset from the current position of the element on the page, instead of the browser s viewport.

50 CSS Concepts selectors (demo_2) floats (demo_3, demo_4, demo_5) box model (demo_7) block vs inline (demo_8) positioning (demo_9) pseudo-selector (demo_10)

51 Welcome to the Wonderful World of CSS!

Layout. Dynamic layout, Swing and general layout strategies

Layout. Dynamic layout, Swing and general layout strategies Layout Dynamic layout, Swing and general layout strategies Two Interface Layout Tasks Designing a spatial layout of widgets in a container Adjusting that spatial layout when container is resized Both