1. Lay it out Like a Boss @mikaelgrev - there will be code -

2. Me, Me, Me General Layout & MigPane Philosophy Some Simple Layouts Features, features, features! One more thing… Agenda

3. Have opinions about APIs (@mikaelgrev) Me, Me, Me

4. The Layout Cycle – ask, then do Bias, context & separate width/height Panes – not layout managers Lays the ‘reference bounds’ Control vs layout sizes – keep it separate Max sizes, children & constraints (JFXtras) Layout – General FX Things

5. MigPane philosophy Layout like you think it – add whitespace automatically Made for coding – does not compete with Scene Builder Fast & Small GUI Toolkit Independent – easy to port Resolution Independence Platform Independence Simple to Read – condensed & close constraint proximity Free (BSD)

8. MigPane Basic Usage v1 MigPane pane = new MigPane( "Layout Constr.", "Col Constr.", "Row Constr."); pane.add(button, "Constr1, Constr2,...");

9. MigPane Basic Usage v2 MigPane pane = new MigPane( new LC().wrap(3), // Layout Constr. new AC().grow(1,3,4).size("10px",1,2), // Column Constr. new AC().noGrid(1,4)); // Row Constr. pane.add(comp, new CC().grow().width("20px"));

10. Let’s dig in!

11. MigPane p = new MigPane(); p.add(fNameLabel); p.add(fNameTextF); p.add(lNameLabel, "gap unrelated"); p.add(lNameTextF, "wrap"); p.add(addreLabel); p.add(addreTextF, "spanx 3, growx"); Simple Layout

12. MigPane p = new MigPane(); p.add(upButton, "growx"); p.add(itemList, "spany 3, wrap"); p.add(downButton, "growx, wrap"); p.add(delButton, "growx"); v2: MigPane p = new MigPane(”flowy"); v3: p.add(upButton, "cell 0 0 1 1"); Simple Layout 2

13. Size Matters Syntax for size - "width/height [min:]preferred[:max]” "width 100" // Default unit Logical Pixels "height 10cm" "width 10:20:30" // Min/preferred/max "width 50px+1cm" // Math OK. (..) if spaces "width 100px!" // ! means force "height pref!" // "min/pref/max" is Node values

14. new MigPane("", // Layout Constraint "[100]unrel[200]10[300]", // cols "[]20[]20[]"); // rows Syntax: "[colConstr1]gap[colConstr2]gap[...]" Normally not needed, but can be helpful sometimes Rows & Columns - Defining the Grid

15. Gaps & Insets Control Gaps – space around controls Syntax: "gap before [after] [top] [bottom]” "gap 1cm" "gap unrel:push" // "push" creates a greedy gap "gapafter rel" // *top *bottom *before *left *right

16. Gaps & Insets Wrap Gaps – space to next row declared inline Syntax: "wrap [gap]" "wrap unrelated" "wrap 20:push" // "push" means gap is greedy Insets – space between parent container edges and grid Syntax: "insets [all] [[top] [left] [bottom] [right]]" new MigLayout("insets 2cm"); new MigLayout("insets 10 20 30 40"); new MigLayout("insets dialog"); // or "panel”

17. Docking Layout MigPane p = new MigPane("fill"); p.add(p1, "dock south"); p.add(p2, "dock west"); p.add(p3, "dock north"); p.add(p4, "dock north"); p.add(p5, "dock east"); p.add(p6, "dock center");

18. Absolute Layout MigPane p = new MigPane(); p.add(c1, "pos 0 0"); p.add(c2, "pos 0.5al 0al"); p.add(c3, "pos 0 0.5al 100% n"); p.add(c4, "pos 50% 1al"); Syntax : "pos x y [x2] [y2]"

19. Absolute Layout 2 MigPane p = new MigPane(); p.add(big,"pos 30% 30% 70% 70%, id big"); p.add(c1, "pos n big.y big.x2 n"); p.add(c2, "pos big.x2 big.y2"); p.add(c3, "pos big.x n big.x2 container.y2"); p.add(c4, "pos n n big.x big.y");

20. Button Order MigPane p = new MigPane("nogrid"); p.add(label); p.add(textF, "wrap paragraph"); p.add(helpButt, "tag help2"); p.add(okButt, "tag ok"); p.add(cancelButt, "tag cancel");

21. Growing & Shrinking Applies to: Components in the same cell Rows/Columns new MigPane("", "[growprio 200][grow 200][gp 200, grow 50]", ""); Grow Syntax: "growprio prio" and "grow weight" Shrink Syntax: "shrinkprio prio" and "shrink weight" p.add(comp, "growpriox 200, growx 200);

22. Demo

23. Miscellaneous Features 1(4) new MigPane("hidemode 3"); pane.add(node, "hidemode 1"); Hidemode – what happens to invisible components? new MigPane("width 20cm, height 20sp:300:40sp"); Syntax: "width/height [size]" Pane Sizes – overrides the Pane's calculated size

24. Miscellaneous Features 2(4) pane.add(comp1, "sizegroupx 1"); // sgx 1 pane.add(comp2, "sizegroupx 1"); // sgx 1 Giving Nodes the Same Size Giving Rows/Columns the Same Size new MigPane("", "[sg 1][sg 1][sg 2][sg 2]", "");

25. Miscellaneous Features 3(4) new MigPane("debug"); Debugging Layouts – non intrusive

26. Miscellaneous Features 4(4) Split, skip cells Auto-size the Window Visual anti-padding RTL & BTT Last-minute resize (called padding) Callbacks

27. IT HURTS!

28. ANIMATION !!!

29. That’s All?

30. Demo

31. Animate to keep the user ‘in the loop’ Do it fast (200 - 400ms) Avoid linear movement Crazy-click is a valid test Animation – The UX bits

32. A more natural accelerate/decelerate Copy to a temporary image Different interpolators for add/remove Changes z-order for added/removed Nodes Handles crazy-click What MigPane helps with

34. miglayout.com @mikaelgrev - Fill out those forms! -