LayoutDynamic layout

Layout design pattern

Layout strategies

2

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/

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/

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

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=ContainerLeaf=Node

Composite Pattern

8

Stage

Button

Slider

MenuBar

Menu

JMenuItem

ToggleGroup

JRadioButtonJRadioButtonRadioButton

JMenuItemMenuItem

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

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

9

§ Factors out an algorithm into a separate object, allowing a client to dynamically switch algorithms

10

Java FX Layout Classes

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.

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.

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 ButtonButtonBut

getMinimumSize() < getPreferredSize()

< getMaximumSize()

Code Demo: Layouts

14

Code Demo: LayoutDemo

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 one of these

categories, depending on its underlying

algorithm.

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:

§ PaneOkDialog.java

Fixed layout means specifying position,

width, height of nodes on the scene.

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 ofits 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

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.

Relative Layout

20

The layout constrains position into a specific layout.

Layouts that support Relative Layout:

§ AnchorPane

§ BorderLayout

§ GridPane

§ TilePane

Custom Layout

21

We can define our own layouts! § Simply extend the layout class and override the layout methods.

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

Imperative: Layouts

23

gridPaneDemo.java

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.

FXML Output File

25

Not exactly human

readable…

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.

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!