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

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

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

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

4. Layout – General FX Things • 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)

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 • MigPanepane = 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. Simple Layout 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");

12. Simple Layout 2 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");

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

15. Gaps & Insets • Control Gaps – space around controls • Syntax: "gapbefore [after] [top] [bottom]” • "gap 1cm" • "gap unrel:push"// "push" creates a greedy gap • "gapafterrel"// *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 Syntax: "pos x y [x2] [y2]" 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");

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, "posbig.x n big.x2 container.y2"); p.add(c4, "pos n n big.xbig.y");

20. Button Order MigPanep = 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 Grow Syntax: "growprioprio" and "grow weight" Shrink Syntax: "shrinkprioprio" and "shrink weight" • p.add(comp, "growpriox 200, growx 200); • new MigPane("", • "[growprio 200][grow 200][gp 200, grow 50]", • "");

22. Demo

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

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

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

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. Animation – The UX bits • Animate to keep the user ‘in the loop’ • Do it fast (200 - 400ms) • Avoid linear movement • Crazy-click is a valid test

32. What MigPane helps with • 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

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