light side dark side canoo

Transcription

1 CON 1072

2 light side dark side

3 han Solo (Also known as Gerrit Grunwald) Former smuggler, now Leader in the Rebel Alliance. Captain of the Millennium Falcon and sometimes involved in some Java business at

4 The DARK SIDE

5 1 INCOMPLETE TABLEVIEW

6 Incomplete TableView No direct edit No submit on focus lost No selected cell highlight No selected header highlight No row/col freezing

7 Incomplete TableView No direct edit No submit on focus lost No selected cell highlight No selected header highlight No row/col freezing EASY TO FIX EASY TO FIX EASY TO FIX EASY TO FIX POSSIBLE

8 Demo

9 2 NO STANDARD CSS

10 No standard CSS // Java FX CSS -fx-background-color: red, green, blue; -fx-background-insets: 0, 5, 10; -fx-padding : ; // Standard CSS background-color: red; // not available padding : ;

11 No standard CSS IDEA

12 No standard CSS REALITY

13 No standard CSS Not compatible to web standard Performance No animations No chained effects No % for insets

14 Demo

15 Should you use CSS?

16 YES AND NO

17 When not to use CSS No CSS styling is needed On embedded devices / when performance matters When not having a designer Just because you can

18 When to use CSS Need to (re-)style an application Need to (re-)style a control Need to provide styling to customers Creating styleable controls libraries When having a designer

19 3 WEAK CHARTS

20 Weak charts No 2nd y-axis Only 1 color per series No smoothed line charts Not the best performance Bound to CSS styles

21 Weak charts No 2nd y-axis Only 1 color per series No smoothed line charts Not the best performance Bound to CSS EASY TO FIX EASY TO FIX EASY TO FIX POSSIBLE SORRY :(

22 Demo

23 4 INCOMPATIBLE WEBVIEW

24 Incompatible Webview No full HTML5 support No WebGL support Bad performance

25 Incompatible Webview No full HTML5 support No WebGL support Bad performance NO FIX POSSIBLE NO FIX

26 Demo

27 5 BAD PERFORMANCE

28 Scene Graph

29 ROOT CHILD CHILD CHILD CHILD CHILD CHILD CHILD

30 ROOT CHILD CHILD CHILD CHILD CHILD CHILD CHILD EFFECT EFFECT EFFECT EFFECT EFFECT EFFECT EFFECT

31 ROOT EFFECT EFFECT EFFECT EFFECT EFFECT EFFECT EFFECT CHILD CHILD CHILD CHILD CHILD CHILD CHILD EFFECT OF EACH CHILD COULD AFFECT EACH OTHER NODE

32 Leads to BAD PERFORMANCE

33 The easy SOLUTION

34 EFFECT ROOT CHILD CHILD CHILD CHILD CHILD CHILD CHILD EFFECT OF ROOT NODE WILL BE APPLIED TO ALL CHILDREN

35 Demo

36 Caching

37 CTRL CHILD CHILD CHILD CHILD CHILD CHILD CHILD ANIMATING THE CONTROL

38 CTRL CHILD CHILD CHILD CHILD CHILD CHILD CHILD MEANS ANIMATING ALL NODES

39 CTRL CHILD CHILD CHILD CHILD CHILD CHILD CHILD ENABLE CACHING

40 CTRL IMAGE OF CONTROL CHILD CHILD CHILD CHILD CHILD CHILD CHILD ENABLE CACHING

41 CTRL IMAGE OF CONTROL CHILD CHILD CHILD CHILD CHILD CHILD CHILD MEANS ANIMATING 1 NODE

42 But watch out

43 watch out

44 CTRL IMAGE OF CONTROL CHILD CHILD CHILD CHILD CHILD CHILD CHILD RE-CACHE IF 1 CHILD IS "DIRTY"

45 Leads to BAD PERFORMANCE

46 Caching of CSS Backgrounds not possible Positioning of text fonts (ikonli) problematic

47 Bad performance Scene Graph

48 Bad performance Scene Graph performance

49 Not finished yet Scene Graph Performance DatePicker SVGPath scaling Styleable Properties

50 6 INCONSISTENT BEHAVIOR

51 Date Picker

52 DatePicker COMBOBOX TEXTFIELD REGION DatePicker datepicker = new DatePicker(LocalDate.now()); datepicker.seteditable(false);

53 DatePicker COMBOBOX TEXTFIELD REGION can t be edited can still be pressed??? which will edit the field

54 DatePicker Fix // Define an event handler that consumes the event EventHandler<MouseEvent> eventconsumer = e -> e.consume(); // Attach listener to ComboBox after it was rendered for the 1st time combobox.skinproperty().addlistener(o1 -> { if (null == combobox.getskin() null == combobox.getscene()) return; fixeditablebug(); editableproperty().addlistener(o2 -> fixeditablebug()); }); // Get the arrow button via lookup and add/remove the event handler private void fixeditablebug() { Node arrowbutton = combobox.lookup("#arrow-button"); if (iseditable()) { arrowbutton.removeeventfilter(mouseevent.mouse_pressed, eventconsumer); arrowbutton.removeeventfilter(mouseevent.mouse_released, eventconsumer); } else { arrowbutton.addeventfilter(mouseevent.mouse_pressed, eventconsumer); arrowbutton.addeventfilter(mouseevent.mouse_released, eventconsumer); } }

55 Demo

56 SVG Path

57 SVG Path // Define SVG Path object (original SVG size: 300x410) SVGPath svgpath = new SVGPath(); svgpath.setcontent("m C "); // Add SVG Path object to Pane StackPane pane = new StackPane(svgPath); pane.setprefsize(450, 450);

58 SVG Path // Define SVG Path object (original SVG size: 300x410) SVGPath svgpath = new SVGPath(); svgpath.setcontent("m C "); // Add SVG Path object to Pane StackPane pane = new StackPane(svgPath); pane.setprefsize(450, 450); // Resize the SVG Path object 150x205 svgpath.setprefsize(150, 205); NOT SUPPORTED

59 SVG Path // Define SVG Path object (original SVG size: 300x410) SVGPath svgpath = new SVGPath(); svgpath.setcontent("m C "); // Add SVG Path object to Pane StackPane pane = new StackPane(svgPath); pane.setprefsize(450, 450); // Scale SVG Path object by 0.5 svgpath.setscalex(0.5); svgpath.setscaley(0.5);

60 SVG Path // Define SVG Path object (original SVG size: 300x410) SVGPath svgpath = new SVGPath(); svgpath.setcontent("m C "); // Add SVG Path object to Pane StackPane pane = new StackPane(svgPath); pane.setprefsize(450, 450); // Scale SVG Path object by 0.5 svgpath.setscalex(0.5); svgpath.setscaley(0.5); // or create your own method to resize in pixels setprefsize(svgpath, 150, 205); private void setprefsize(node node, double w, double h) { node.setscalex(w / node.getlayoutbounds().getwidth()); node.setscaley(h / node.getlayoutbounds().getheight)); }

61 SVG Path Alternative // Define Region object Region region = new Region(); region.getstyleclass().add("falcon"); region.widthproperty().addlistener(e -> relocate()); region.heightproperty().addlistener(e -> relocate()); // Add SVG Path object to Pane Pane pane = new Pane(region); pane.setprefsize(450, 450); /* CSS Style */.falcon { -fx-pref-width : 300; -fx-pref-height : 410; } -fx-background-color: black; -fx-scale-shape : true; -fx-shape : "M C "; region.setprefsize(150, 205); private void relocate() { double pw = pane.getprefwidth(); } double ph = pane.getprefheight(); double w = region.getlayoutbounds().getwidth(); double h = region.getlayoutbounds().getheight(); region.relocate((pw - w) * 0.5, (ph - h) * 0.5);

62 Demo

63 Styleable Properties

64 Styleable Properties Low level A lot of boilerplate code

65 Styleable Properties private static final Color DEFAULT_COLOR = Color.RED; private StyleableObjectProperty<Color> color;

66 Styleable Properties public Color getcolor() { return null == color? DEFAULT_COLOR : color.get(); } public void setcolor(color color) { colorproperty().set(color); } public StyleableObjectProperty<Color> colorproperty() { if (null == color) { color = new StyleableObjectProperty<Color>(DEFAULT_COLOR) public CssMetaData getcssmetadata() { return StyleableProperties.COLOR; public Object getbean() { return MY_CTRL.this; } public String getname() { return "color"; } } } return color;

67 Styleable Properties private static class StyleableProperties { private static final CssMetaData<MY_CTRL, Color> COLOR = new CssMetaData<MY_CTRL, Color>("-color", ColorConverter.getInstance(), DEFAULT_COLOR) public boolean issettable(mycontrol mycontrol) { } return null == public StyleableProperty<Color> getstyleableproperty(my_ctrl mycontrol) { return (StyleableProperty) mycontrol.colorproperty(); } public Color getinitialvalue(my_ctrl mycontrol) { return mycontrol.getcolor(); }

68 Styleable Properties } private static final List<CssMetaData<? extends Styleable,?>> STYLEABLES; static { final List<CssMetaData<? extends Styleable,?>> styleables = new ArrayList<>(Region.getClassMetaData()); } styleables.add(color); STYLEABLES = Collections.unmodifiableList(styleables);

69 Styleable Properties public static List<CssMetaData<? extends Styleable,?>> getclasscssmetadata() { return StyleableProperties.STYLEABLES; public List<CssMetaData<? extends Styleable,?>> getcssmetadata() { return getclasscssmetadata(); }

70 Styleable Properties 1 private static final Color DEFAULT_COLOR = Color.RED; 2 private StyleableObjectProperty<Color> color; 3 public Color getcolor() { return null == color? DEFAULT_COLOR : color.get(); } 4 public void setcolor(color color) { colorproperty().set(color); } 5 public StyleableObjectProperty<Color> colorproperty() { 6 if (null == color) { 7 color = new StyleableObjectProperty<Color>(DEFAULT_COLOR) { public CssMetaData getcssmetadata() { return StyleableProperties.COLOR; } public Object getbean() { return MY_CTRL.this; } public String getname() { return "color"; } 11 } 12 } 13 return color; 14 } 15 private static class StyleableProperties { 16 private static final CssMetaData<MY_CTRL, Color> COLOR = 17 new CssMetaData<MY_CTRL, Color>("-color", ColorConverter.getInstance(), DEFAULT_COLOR) { public boolean issettable(mycontrol mycontrol) { return null == mycontrol.color!mycontrol.color.isbound(); } public StyleableProperty<Color> getstyleableproperty(my_ctrl mycontrol) { return (StyleableProperty) mycontrol.colorproperty(); } public Color getinitialvalue(my_ctrl mycontrol) { return mycontrol.getcolor(); } 21 }; 22 private static final List<CssMetaData<? extends Styleable,?>> STYLEABLES; 23 static { 24 final List<CssMetaData<? extends Styleable,?>> styleables = new ArrayList<>(Region.getClassMetaData()); 25 styleables.add(color); 26 STYLEABLES = Collections.unmodifiableList(styleables); 27 } 28 } 29 public static List<CssMetaData<? extends Styleable,?>> getclasscssmetadata() { return StyleableProperties.STYLEABLES; } public List<CssMetaData<? extends Styleable,?>> getcssmetadata() { return getclasscssmetadata(); }

71 Styleable Properties private static final StyleablePropertyFactory<MY_CTRL> FACTORY = new StyleablePropertyFactory<>(Control.getClassCssMetaData()); private static final CssMetaData<MY_CTRL, Color> COLOR = FACTORY.createColorCssMetaData("-color", s -> s.color, Color.RED, false); private final StyleableProperty<Color> color = new SimpleStyleableObjectProperty<>(COLOR, this, "color");

72 Styleable Properties public Color getcolor() { return color.getvalue(); } public void setcolor(final Color COLOR) { color.setvalue(color); } public ObjectProperty<Color> colorproperty() { return (ObjectProperty<Color>) color; }

73 Styleable Properties public static List<CssMetaData<? extends Styleable,?>> getclasscssmetadata() { return FACTORY.getCssMetaData(); public List<CssMetaData<? extends Styleable,?>> getcontrolcssmetadata() { return getclasscssmetadata(); }

74 Styleable Properties 1 private static final StyleablePropertyFactory<MY_CTRL> FACTORY = new StyleablePropertyFactory<>(Control.getClassCssMetaData()); 2 private static final CssMetaData<MY_CTRL, Color> COLOR = FACTORY.createColorCssMetaData("-color", s -> s.color, Color.RED, false); 3 private final StyleableProperty<Color> color = new SimpleStyleableObjectProperty<>(COLOR, this, "color"); 4 public Color getcolor() { return color.getvalue(); } 5 public void setcolor(final Color COLOR) { color.setvalue(color); } 6 public ObjectProperty<Color> colorproperty() { return (ObjectProperty<Color>) color; } 7 public static List<CssMetaData<? extends Styleable,?>> getclasscssmetadata() { return FACTORY.getCssMetaData(); } public List<CssMetaData<? extends Styleable,?>> getcontrolcssmetadata() { return getclasscssmetadata(); }

75 The LIGHT SIDE

76 1 MODERN API

77 2 POWERFUL CSS

78 Demo

79 3 INBUILD EFFECTS

80 Demo

81 4 INTEGRATED WEBVIEW

82 Integrated Webview Very easy to add HTML content to your app Interaction between HTML and Java Integrate web frameworks in Java app (e.g. chart libraries etc.)

83 Integrated Webview private WebView webview; private void initonfxapplicationthread() { webview = new WebView(); } WebEngine webengine = webview.getengine(); webengine.getloadworker().stateproperty().addlistener((ov, o, n) -> { if (Worker.State.SUCCEEDED == n) { /* HTML content successfully loaded */ } } public void start(stage stage) { initonfxapplicationthread(); }

84 Demo

85 5 PROPERTIES & BINDINGS

86 6 INBUILD 3D SUPPORT

87 Demo

88 7 INBUILD SCRIPTING

89 Inbuild Scripting JDK 8 comes with Nashorn Can be used for prototyping Can be used to interact with a website

90 Inbuild Scripting

91 Demo

92 Conclusion

93 Use the FORCE

94 Thanx

95 May the force be with you