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

Jul 25, 2023 328 likes •598 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 elements 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=Node

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

  • thers 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

Java FX Layout Classes

slide-10
SLIDE 10

JavaFX Layouts (javafx.scene.layout)

11

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 height, while a vertical flow pane wraps the elements at its width.

slide-11
SLIDE 11

Layout Properties

12

§ 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-12
SLIDE 12

Widget Properties

13

§ 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-13
SLIDE 13

Code Demo: Layouts

14

slide-14
SLIDE 14

Code Demo: LayoutDemo

15

slide-15
SLIDE 15

Layout Strategies

16

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

  • n its underlying

algorithm.

slide-16
SLIDE 16

Fixed Layout

17

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

  • n the scene.
slide-17
SLIDE 17

Variable Intrinsic

18

The layout attempts to use the widget’s preferred sizes, but queries all of 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-18
SLIDE 18

Variable Intrinsic

19

§ 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-19
SLIDE 19

Relative Layout

20

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

§ AnchorPane § BorderLayout § GridPane § TilePane

slide-20
SLIDE 20

Custom Layout

21

We can define our own layouts!

§ Simply extend the layout class and override the layout methods.

slide-21
SLIDE 21

Coding Layouts

22

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

Imperative: Layouts

23

gridPaneDemo.java

slide-23
SLIDE 23

Declarative: Scene Builder

24

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

slide-24
SLIDE 24

FXML Output File

25

Not exactly human readable…

slide-25
SLIDE 25

Loading a Layout File

26

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

§ Easy to have multiple layouts and switch between them dynamically.

slide-26
SLIDE 26

Tips and Strategies

27

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