JAVAFX 101 [CON3826]

Transcription

1 JAVAFX 101 [CON3826]

2 Alexander Casall sialcasa

3 JavaFX Script 1.0 Script Language Flash Successor 1.3 JavaFX 2.0 Java API OpenJFX JavaFX 8 Classpath 3D API Printing 8.X Accessibility, Controls... F3 Today

4 Where to use JavaFX?

5 Run JavaFX on embedded devices

6 Run JavaFX on mobile devices Mobile TODO Mobile Screenshot

7 Run JavaFX in the browser Web (Demos TODO)

8 Run JavaFX on Desktop

9

10

11 Where to start with FX?

12 Hello World

13 Stage extends javafx.scene.node Scene VBox StackPane ImageView Label Button

14 Beyond Hello World

15 GridPane grid = new GridPane(); grid.sethgap(10); grid.setvgap(10); Text scenetitle = new Text("Antragsgegenstand"); scenetitle.setfont(font.font("segoeui", FontWeight.BOLD, 13.0)); grid.add(scenetitle, 0, 0, 2, 1); Label categorylabel = new Label("Kategorie:"); grid.add(categorylabel, 0, 1); ComboBox<String> categorycombo = new ComboBox<>(); grid.add(categorycombo, 1, 1); categorycombo.setmaxwidth(double.max_value); Label subjectlabel = new Label("Gegenstand:"); grid.add(subjectlabel, 0, 2); TextField subjecttextfield = new TextField(); grid.add(subjecttextfield, 1, 2); Label statuslabel = new Label("Status:"); grid.add(statuslabel, 0, 3); ComboBox<String> statuscombo = new ComboBox<>(); grid.add(statuscombo, 1, 3); statuscombo.setmaxwidth(double.max_value);

16 GridPane grid = new GridPane(); grid.sethgap(10); grid.setvgap(10); Text scenetitle = new Text("Antragsgegenstand"); scenetitle.setfont(font.font("segoeui", FontWeight.BOLD, 13.0)); grid.add(scenetitle, 0, 0, 2, 1); Label categorylabel = new Label("Kategorie:"); grid.add(categorylabel, 0, 1); ComboBox<String> categorycombo = new ComboBox<>();

17 FXML Declaration of the UI

18

19 <GridPane fx:controller="de.aidsstiftung.aida.contractview" > <columnconstraints> </columnconstraints><rowconstraints> </rowconstraints> <children> <TextField fx:id="subjecttextfield" GridPane.columnIndex="1" GridPane.rowIndex="2"/> <ComboBox fx:id="statuscombo" onaction="#onstatuscomboaction" GridPane.columnIndex="1" GridPane.rowIndex="3" /> <ComboBox fx:id="categorycombo" onaction="#oncategorycomboaction" GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Text stroketype="outside" styleclass="headerlabel text="antragsgegenstand" /> <Label text="kategorie" GridPane.rowIndex="1" /> <Label text="gegenstand" GridPane.rowIndex="2" /> <Label text="status" GridPane.rowIndex="3" /> </children> </GridPane>

20 <GridPane fx:controller="de.aidsstiftung.aida.contractview" > <columnconstraints> </columnconstraints><rowconstraints> </rowconstraints> <children> <TextField fx:id="subjecttextfield" GridPane.columnIndex="1" GridPane.rowIndex="2"/> <ComboBox fx:id="statuscombo" onaction="#onstatuscomboaction" GridPane.columnIndex="1" GridPane.rowIndex="3" /> <ComboBox fx:id="categorycombo" onaction="#oncategorycomboaction" GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Text stroketype="outside" styleclass="headerlabel text="antragsgegenstand" /> <Label text="kategorie" GridPane.rowIndex="1" /> <Label text="gegenstand" GridPane.rowIndex="2" /> <Label text="status" GridPane.rowIndex="3" /> </children> </GridPane>

21 public class private TextField private ComboBox<String> private ComboBox<String> void oncategorycomboaction(actionevent event) { System.out.println("Category changed: " + categorycombo.valueproperty()); void onstatuscomboaction(actionevent event) { System.out.println("Status changed" + statuscombo.valueproperty()); }

22 How to bootstrap a FXML-View?

23 URL fxml = getclass().getresource("contractview.fxml"); FXMLLoader loader = new FXMLLoader(fxml); loader.setcontroller(new ContractView()); //Optional GridPane grid = loader.load();

24 Use Scene Builder to create UI-Components

25 How many FXML Files were used?

26

27

28 <?xml version="1.0" encoding="utf-8"?> <?import javafx.scene.layout.stackpane?> <StackPane xmlns=" xmlns:fx= > <children> <fx:include source="child1.fxml" /> <fx:include source="child2.fxml" /> </children> </StackPane>

29 Back to our component

30 Coded FXML

31 CSS Styling

32 <GridPane styleclass="contentgrid"> <columnconstraints> </columnconstraints><rowconstraints> </rowconstraints> <children> <TextField fx:id="subjecttextfield" GridPane.columnIndex="1" GridPane.rowIndex="2"/> <ComboBox fx:id="statuscombo" onaction="#onstatuscomboaction" GridPane.columnIndex="1" GridPane.rowIndex="3" /> <ComboBox fx:id="categorycombo" onaction="#oncategorycomboaction" GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Text stroketype="outside" styleclass="headerlabel text="antragsgegenstand" /> <Label text="kategorie" GridPane.rowIndex="1" /> <Label text="gegenstand" GridPane.rowIndex="2" /> <Label text="status" GridPane.rowIndex="3" /> </children> </GridPane>

33 .headerlabel{ -fx-font-width:15pt; -fx-font-weight:bold; }.contentgrid{ -fx-hgap: 10px; -fx-vgap: 10px; }.contentgrid >.combo-box{ -fx-max-width: infinity; }

34

35 SceneBuilder CSS Debugger

36 CSS Scopes Application, Scene, FXML, Control

37 APPLICATION WIDE Application.setUserAgentStylesheet("file:///style.css");

38 SCENE WIDE

39 NODE SCOPE NODE WIDE

40 CONTROL SCOPE WIDE public class Calendar extends Control public String getuseragentstylesheet(){ return "calendar.css"; } }

41 Property API Bindings, Listener

42 Property API Observer StringProperty String Binding StringProperty String

43

44 textfield1.textproperty().bindbidirectional(textfield2.textproperty());

45 ColorPicker Example

46

47 TextField searchtextfield = new TextField(); Button searchbutton = new Button(); searchbutton.disableproperty().bind(searchtextfield.textproperty().isnotempty());

48 Button searchbutton = new Button(); TextField searchtextfield = new TextField(); BooleanBinding isnumberbinding = Bindings.createBooleanBinding(() -> searchtextfield.gettext().matches(".*\\d+.*"), searchtextfield.textproperty()); searchbutton.disableproperty().bind(searchtextfield.textproperty().isnotempty().and(isnumberbinding));

49 Use properties to structure your application!

50 View ViewModel Model

51 Ok, lets talk about fancy stuff

52 Dropshadow

53 Effects

54 Animation

55

56 TIMELINES AND TRANSITIONS KeyValue targetpoint = new KeyValue(node.translateXProperty(), 250); KeyFrame keyframe = new KeyFrame(Duration.seconds(10), targetpoint); Timeline movetimeline = new Timeline(keyFrame); movetimeline.play(); 0 s 10 s layoutxproperty == 0 layoutxproperty == 250 TranslateTransition movetransition = new TranslateTransition( Duration.seconds(10), node); movetransition.setbyy(250); movetransition.play();

57 More helpful Features

58 Multi Touch Gestures and More

59 Pane taskpane = new TaskPane(task); taskpane.setontouchmoved(new public void handle(touchevent event){ calculatescaleoftask(event.gettouchpoints()); } });

60 Multi Touch and Gestures node.setonswiperight( ); Shape Shape Rezizable node.setonscroll( ); Shape node.setonrotate( ); node.setonzoom( );

61 WEBVIEW Embed Webcontent into JavaFX Applications

62 Maps Example

63 WebView STRUCTURE WebView Node in GraphScene Loads a Webpage WebEngine Manages DOM Executes JavaScript JavaScript <-> Java

64 WebEngine TYP / VERSION System.out.println(webEngine.getUserAgent()); Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/ (KHTML, like Gecko) JavaFX/8.0 Safari/538.19

65 WebEngine LOAD CONTENT webengine.load(" webengine.loadcontent("<html><body>hello</body></html>"); webengine.loadhtml("/hello.html");

66 Test & Deployment

67 Test-Pyramid Acceptance Tests Integration Tests Unit Tests

68 TestFX rightclickon("#desktop").moveto("new").clickon("text Document"); write("mytextfile.txt").push(enter); // when: drag(".file").dropto("#trash-can"); verifythat("#desktop", haschildren(0, ".file"));

69 QF-Test

70 DEPLOYMENT

71 Webstart is an Option

72 Package a native app is another option

73 1. Package javapackager -makeall -appclass src/de/saxsys/javafx/starter.java -name Example -width 600 -height 600

74 2. Distribute Über URL erreichbare Ablage Launcher App.v1

75 2. Distribute via URL accessible Space Launcher App.v1

76 2. Distribute Launcher App.v1 App.v1

77 2. Distribute Launcher App.v2 App.v1

78 Desktop Java?

79 Use JavaFX!

80

81 JavaFX runs on mobile using

82 JavaFX runs also in the browser using

83 Hello World

84 Architecture Client view tier (rendering) Server controller and model tier (business logic) HTML5 (CSS, JS, SVG) Browser JavaFX (JAVA, FXML, CSS) JVM

85 How does the magic works JavaFX Public APIs and Scene Graph Quantum Toolkit Prism / Glass Windowing Toolkit / Media Engine / Web Engine Java 2D / OpenGL / D3D JDK API Libraries & Tools Java Virtual Machine

86 How does the magic works JavaFX Public APIs and Scene Graph Quantum Toolkit Prism / Glass Windowing Toolkit / Media Engine / Web Engine Java 2D / OpenGL / D3D JDK API Libraries & Tools Java Virtual Machine

87 Prerequisites Reasonable new browser Websocket supported JavaScript enabled Usage of Web specific APIs

88 Multiview Demo

89 jpro.io

90 Let s answer the question: Who uses JavaFX?