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

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 screen resolution (e.g. different computers or devices).  Resizing the application window (e.g. user adjustments). https://www.bostonglobe.com/ 3

Responsive vs. Adaptive Layouts 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/ 4

Responsive Layout 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 6

Responsive Layout uses Composite Design Pattern  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 7

Composite Pattern Stage Label Button WidgetDemo.java Slider Container nodes (or layouts ) MenuBar describe how their children should be placed. Menu JMenuItem Different layouts have different JMenuItem MenuItem strategies for handling layout. ToggleGroup JRadioButton e.g. some let the designer JRadioButton RadioButton position content directly (e.g. Group) while others try to re- position content (e.g. StackPane). 8

Layouts represents a Strategy Design Pattern (aka “Policy”)  Factors out an algorithm into a separate object, allowing a client to dynamically switch algorithms 9

10

11

8 12

JavaFX Layouts (javafx.scene.layout) 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. 13

Layout Properties  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. 14

Widget Properties  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. getMinimumSize() < getPreferredSize() < getMaximumSize() But Button Button Button 15

Code Demo: LayoutDemo 17

Layout Strategies Fixed Position -- non-resizable 1. Variable Intrinsic -- adjusting widget size and position 2. Relative Layout -- positioning components relative to one 3. another Custom Layout -- define your own! 4. Each layout falls into one of these categories, depending on its underlying algorithm. 18

Fixed Layout 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. 19

Variable Intrinsic 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) Get each child widget’s preferred size (includes recursively asking 1. all of its children for their preferred size…) Decide on a layout that satisfies everyone’s preferences, then 2. iterate through each child, and set it’s layout (size/position) Layouts that support this strategy:  Vbox  Hbox  FlowPane 20

Variable Intrinsic  Remember that the layout can change position or size of a widget.  Some only change position, while others only change size. Vbox and HBox resize content to fit. FlowPane repositions content to fit. 21

Relative Layout The layout constrains position into a specific layout. Layouts that support Relative Layout:  AnchorPane  BorderLayout  GridPane  TilePane 22

Custom Layout We can define our own layouts!  Simply extend the layout class and override the layout methods. 23

Coding Layouts 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 - 24

gridPaneDemo.java Imperative: Layouts 25

gridPaneDemo.java Imperative: Layouts HBox 26

Declarative: Scene Builder  Originally bundled in the Java SDK, now available from Gluon.  Drag-and-drop nodes to generate an FXML file that describes the layout. 27

FXML Output File Not exactly human readable… 28

Loading a Layout File You can load layout files into a Node and set them directly.  Easy to have multiple layouts and switch between them dynamically. 29

Tips and Strategies  Break up the UI recursively into regions.  Consider how the controls are laid out within each region  Expect to nest layouts! 30