Layout Dynamic layout Layout design pattern Layout strategies 2 - - PowerPoint PPT Presentation

▶
layout
SMART_READER_LITE
LIVE PREVIEW

Layout Dynamic layout Layout design pattern Layout strategies 2 - - PowerPoint PPT Presentation

Feb 08, 2023 385 likes •687 views

Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications need to be able to adjust the presentation of our interfaces. We need to dynamically reposition and resize our content in response to: Change in

slide-1
SLIDE 1

Layout

Dynamic layout Layout design pattern Layout strategies

slide-2
SLIDE 2

2

slide-3
SLIDE 3

Dynamic Layout

3

Applications need to be able to adjust the presentation of our interfaces. We need to dynamically reposition and resize our content in response to:

  • Change in screen resolution (e.g. different computers or devices).
  • Resizing the application window (e.g. user adjustments).

https://www.bostonglobe.com/

slide-4
SLIDE 4

Responsive vs. Adaptive Layouts

4

Two strategies for layout:

  • Responsive: support a universal design that reflows spatial layout to

fit the dimensions of the current view (device or window).

  • Adaptive: design optimized spatial layouts for each of your devices,

and dynamically switch to fit devices

https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

slide-5
SLIDE 5

Responsive Layout

6

We’re going to focus on responsive layout: adapting to changes dynamically. To dynamically adjust content to a window, we want to:

  • maximize use of available space for displaying widgets,
  • while maintaining consistency with spatial layout, and
  • preserving the visual quality of spatial layout

This requires that our application can dynamically on-screen:

  • re-allocate space for widgets
  • adjust location and size of widgets
  • perhaps change visibility, look, and/or feel of widgets
slide-6
SLIDE 6

Responsive Layout uses Composite Design Pattern

7

  • Take advantage of the scene-graph describing out visual hierarchy.
  • Container classes are responsible for their children’s layout.
  • We treat leaf objects and compositions of objects uniformly

Composite=Container Leaf=Widget

slide-7
SLIDE 7

Composite Pattern

8

Stage Button Slider MenuBar Menu JMenuItem ToggleGroup JRadioButton JRadioButton RadioButton JMenuItem MenuItem Label

WidgetDemo.java

Container nodes (or layouts) describe how their children should be placed. Different layouts have different strategies for handling layout. e.g. some let the designer position content directly (e.g. Group) while others try to re- position content (e.g. StackPane).

slide-8
SLIDE 8

Layouts represents a Strategy Design Pattern (aka “Policy”)

9

  • Factors out an algorithm into a separate object, allowing a client to

dynamically switch algorithms

slide-9
SLIDE 9

10

slide-10
SLIDE 10

11

slide-11
SLIDE 11

12

8

slide-12
SLIDE 12

JavaFX Layouts (javafx.scene.layout)

13

HBox Arranges all the nodes in our application in a single horizontal row. VBox Arranges all the nodes in our application in a single vertical column. BorderPane Arranges the nodes in our application in top, left, right, bottom and center positions. StackPane Arranges the nodes in our application on top of another just like in a stack (most recent over the previous nodes). TextFlow Arranges multiple text nodes in a single flow. AnchorPane Anchors the nodes in our application at a particular distance from the pane. TilePane Adds all the nodes of our application in the form of uniformly sized tiles. GridPane Arranges the nodes in our application as a grid of rows and columns. FlowPane Wraps all the nodes in a flow. A horizontal flow pane wraps the elements at its width, while a vertical flow pane wraps the elements at its height.

slide-13
SLIDE 13

Layout Properties

14

  • In your scene graph, the layout is the parent for the children that it

controls.

  • Add children, then set Layout properties to further control how it

manages layout.

  • setAlignment (): push contents to top, button, left, right, center.
  • setPadding (): space around the edges of the layout
  • setSpacing (), setVGap(), setHGap(): Space between widgets.
slide-14
SLIDE 14

Widget Properties

15

  • Widgets need to be “flexible” in size and position
  • Widgets store their own position and width/height, BUT layouts have

the ability to change widget width/height and other properties

  • Other properties may also be changed by layouts (e.g. reducing font

size for a caption)

  • Widgets give the layout algorithm a range of preferred values as

“hints”

  • A containers considers the size hints of nodes in determining layout.

Button Button Button But

getMinimumSize() < getPreferredSize() < getMaximumSize()

slide-15
SLIDE 15

Code Demo: LayoutDemo

17

slide-16
SLIDE 16

Layout Strategies

18

1.

Fixed Position -- non-resizable

2.

Variable Intrinsic -- adjusting widget size and position

3.

Relative Layout -- positioning components relative to one another

4.

Custom Layout -- define your own!

Each layout falls into

  • ne of these

categories, depending on its underlying algorithm.

slide-17
SLIDE 17

Fixed Layout

19

The layout does NOT move nodes. This is most suitable for cases when you have a fixed-size window. Layouts that support fixed layout:

  • Pane

OkDialog.java Fixed layout means specifying position, width, height of nodes on the scene.

slide-18
SLIDE 18

Variable Intrinsic

20

The layout attempts to use the widget’s preferred sizes, but queries all

  • f the widgets first, and allocates space to them as a group.

Layout determined in two-passes (bottom-up, top-down)

1.

Get each child widget’s preferred size (includes recursively asking all of its children for their preferred size…)

2.

Decide on a layout that satisfies everyone’s preferences, then iterate through each child, and set it’s layout (size/position) Layouts that support this strategy:

  • Vbox
  • Hbox
  • FlowPane
slide-19
SLIDE 19

Variable Intrinsic

21

  • Remember that the layout can change position or size of a widget.
  • Some only change position, while others only change size.

FlowPane repositions content to fit. Vbox and HBox resize content to fit.

slide-20
SLIDE 20

Relative Layout

22

The layout constrains position into a specific layout. Layouts that support Relative Layout:

  • AnchorPane
  • BorderLayout
  • GridPane
  • TilePane
slide-21
SLIDE 21

Custom Layout

23

We can define our own layouts!

  • Simply extend the layout class and override the layout methods.
slide-22
SLIDE 22

Coding Layouts

24

JavaFX supports multiple methods for handling layout.

  • 1. Imperative: defining layout in code
  • The same way that we build interface with Java Swing
  • Advantage: tight control over layout
  • 2. Declarative: generate a layout
  • Supports separation of code and layout (e.g. HTML, CSS)
  • Use an XML format to describe the layout, then load at runtime
  • Advantage: easier to build and manage interfaces
slide-23
SLIDE 23

Imperative: Layouts

25

gridPaneDemo.java

slide-24
SLIDE 24

Imperative: Layouts

26

gridPaneDemo.java HBox

slide-25
SLIDE 25

Declarative: Scene Builder

27

  • Originally bundled in the Java SDK, now available from Gluon.
  • Drag-and-drop nodes to generate an FXML file that describes the

layout.

slide-26
SLIDE 26

FXML Output File

28

Not exactly human readable…

slide-27
SLIDE 27

Loading a Layout File

29

You can load layout files into a Node and set them directly.

  • Easy to have multiple layouts and switch between them dynamically.
slide-28
SLIDE 28

Tips and Strategies

30

  • Break up the UI recursively into regions.
  • Consider how the controls are laid out within each region
  • Expect to nest layouts!