JavaFX Pär Sikö, Epsilon 2008-02-27. Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner.

En presentation över ämnet: "JavaFX Pär Sikö, Epsilon 2008-02-27. Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner."— Presentationens avskrift:

1 JavaFX Pär Sikö, Epsilon 2008-02-27

2

3 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

4 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

5 Vad är JavaFX? JavaFX (grafik, effekter, animering) JSR 223 Swing, Graphics2D, JComponent Java Socket, RMI, Web Services

6 Vad är JavaFX? F3, Chris Oliver JavaFX är en produktserie JavaFX Script JavaFX Mobile JavaFX TV Flash, Silverlight NetBeans, Eclipse

7 JavaFX Script Java/Java2D/Swing Ta bort 90% av alla semikolon Skapa objekt: Frame{ title: ”Demo”} istället för JFrame frame = new JFrame( ”Demo” ); Använd height: 400 istället för setHeight(400); Använder Event Dispatcher Thread

8 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

9 JavaFX exempel package se.javaforum.demo1; import javafx.ui.*; Frame { content: Label { text: “Hello World” } width: 300 height: 200 visible: true };

10 package se.javaforum.demo1; import javafx.ui.*; Frame { content: Label { text: “Hello World” } background: black width: 300 height: 200 visible: true }; JavaFX exempel

11 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

12 Snabbkurs i Swing

13 Komponenter JavaFX Button Label ListBox SplitPane RadioButton Tree Table TextArea Java JButton JLabel, JEditorPane JList JSplitPane JRadioButton JTree JTable JTextArea

14 LayoutManager JavaFX GridPanel FlowPanel BorderPanel Box GroupPanel Java GridLayout FlowLayout BorderLayout BoxLayout GroupLayout

15 Layout exempel Frame { content: GridPanel { rows: 1 columns: 2 cells: [ Button{ text: “Next image” }, TextArea{ text: “Description” } ] } width: 300 height: 200 visible: true };

16 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

17 Variabler var myVariable: Integer(?|*|+) = value; Fyra primitiva typer Integer Number String Boolean Exempel: var myInt: Integer = 1; var myInt = 1; var myIntArray: Integer* = [1, 2, 3]; var myIntArray = [1, 2, 3];

18 Variabler var buttonText: String = “Next Image“; Frame { content: GridPanel { rows: 1 columns: 2 cells: [ Button{ text: “Text: {buttonText}“}, TextArea{ text: “Textfält” } ] } width: 300 height: 100 visible: true }; Använd { } för att infoga variabler och uttryck i text

19 Klasser och objekt Skapa en klass i JavaFX består av: Definiera klassen Implementera operationer och funktioner Initiera attribut

20 Klasser och objekt class MyClass { // extends Class1, Class2 etc. attribute xPos: Integer; operation calculateYPos(x: Integer) : Integer; } attribute MyClass.xPos = 10; operation MyClass.calculateYPos(x: Integer) { return x*5; } MyClass { xPos: 5 }

21 If, while, for if och while syntaxen är som Javas. for använder samma syntax som sökning i arrayer. for( i in [0..10] ) { System.out.println( ”i = { i } ” ); } for( i in [0..10] where i % 2 == 0 ) { System.out.println( ”i = { i } ” ); } for( i in [0..10], j in [0..10] ) { System.out.println( i * j ); }

22 try, catch och throw try - påminner om Javas try-satser men det går att kasta alla sorters objekt inte bara Throwable. throw – kan kasta vilket objekt som helst. try { throw ”Hello World”; } catch( s: String ) { System.out.println( ”Fångade en sträng: {s}” ); } catch( any ) { System.out.println( ”Fångade något annat: {any}” ); }

23 return, break och continue return fungerar precis som i Java. break och continue är som i Java men utan labels

24 do do – fungerar inte alls som i Java.

25 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

26 Egna komponenter Ärv från CompositeNode för att implementera en egen grafisk komponent Implementera operationen composeNode() Egna komponenter ritas på en Canvas Gruppera objekt med Group

27 class ImageFrame extends CompositeNode { attribute frameColor: Color; attribute imageUrl: String; } operation ImageFrame.composeNode() { return Group { content: [ Rect {width: 300 height: 200 fill: frameColor }, ImageView { image: Image { url: imageUrl } } ] }; } Frame { content: Canvas { content: ImageFrame{ frameColor: white imageUrl: ”file:///c:/...” } }

28 Komponenter Egna komponenter bygger på: RectCircleEllipseLinePolylinePolygon Button, Label, Image, TextField, TextArea.... ArcCubicCurveQuadCurvePathTextSwing

29 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

30 var x = 5; var y = bind 5*x// y == 25 x = 7;// x == 7 och y == 35 Ändra x Ändra y Bindning

31 var labelText: String = ""; Frame { content: GridPanel { rows: 1 columns: 2 cells: [ Label{ text: bind labelText }, TextArea{ text: bind labelText } ] } width: 300 height: 100 visible: true };

32 Bindning var url = ”file:///c:/.......jpg”; var description = ”Help the Beerless”; Frame { content: Canvas { content: [ ImageFrame { frameColor: white imageUrl: bind url }, View { content: TextArea { text: bind description } } ] }

33 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

34 operation och function operation motsvarar javas metoder function påminner om operation med undantagen: –Får bara innehålla deklarationer och en return-sats –Returvärded förändras kontinuerligt function påminner om en matematisk funktion function sum(m, n) { if( m > n ) {.... } var r = m + n; return r; }

35 operation och function function sqr( x: Integer) : Integer { return x*x; } var a = 10; var b = sqr( a ); b == 100;// Sant a = 2; b == 4;// Sant eller falskt?

36 operation och function function sqr( x: Integer) : Integer { return x*x; } var a = 10; var b = sqr( a ); b == 100;// Sant a = 2; b == 4;// Falskt, vi måste binda // variabeln till funktionen

37 operation och function function sqr( x: Integer) : Integer { return x*x; } var a = 10; var b = bind sqr( a ); b == 100;// Sant a = 2; b == 4;// Sant

38 Variabler - överkurs En variabel eller attribut kan tilldelas en funktion eller en operation. var f = function( a: Integer ) { return a*a; }; f(5) == 25;// Sant f(9) == 81;// Sant

39 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

40 Händelsehantering Klassen Button har ett attribut, ”action”, som ska tilldelas en operation eller en funktion Button { text: ”Next image” action: operation() { url = ”file:///c:/images.....”; description = ”New text”; }

41 Händelsehantering var clickCount = 0; Frame { content: Button { text: bind “Jag har tryckts {clickCount} gånger“ action: operation( ) { clickCount++; } width: 300 height: 100 visible: true };

42 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

43 Trådning Event Dispatcher Thread (EDT) Använd do för att exekvera kod utanför EDTn. Använd do later för asynkron exekvering av kod på EDTn.

44 Trådning operation loadImage( url: String) { var image: Image; do{ image: imageLoader.loadImage(url); } return image; }

45 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

46 Animering Animering i JavaFX består av följande: Grafik och Swingkomponenter Tid Bindning Förändring

47 Animering – grafik och Swingkomponenter Använd Canvas för att rita grafik. Canvas består av en scengraf. Gruppera objekt med hjälp av ’Group’. En Canvas kan innehålla, förutom grafik, en/flera canvas samt Swingkomponenter.

48 Animering – scengraf Canvas Group ButtonLabelImageRectangle Group Button

49 Animering – scenegraf Canvas Group ButtonLabelImageRectangle Group Button transform: Rotate { angle: 45 }

50 Animering – scenegraf Canvas Group ButtonLabelImageRectangle Group Button transform: Rotate { angle: 45 }

51 Animering – scenegraf Frame { content: Canvas { content: Group { transform: scale(2,1) content: [ Rect { width: 100 height: 100 stroke: blue strokeWidth:3 fill: khaki }, View { transform: translate(20,40) content: Button { text:"Swing“} } ] }

52 Animering - transformationer Scale Translate Skew Rotate

53 Animering - transparens Grafiska objekt innehåller ett attribut opacity som bestämmer objektets transparens. 0 fullständigt genomskinligt, 1 ogenskinligt.

54 Animering - tid xPos = [a.. b] dur c [linear | easein | easeout | easeboth] a – startvärde b – slutvärde c – varaktighet Exempel: xPos = [1.. 100] dur 1000 xPos = [0, 0.005.. 1] dur 1000

55 Animering - tid var buttonWidth: Integer = 200; Frame { content: Button { text: "Press me" action: operation( ) { buttonWidth = [ 200.. 300 ] dur 1000; } width: bind buttonWidth preferredSize: Dimension {width: 200 height: 75} } width: 500 height: 100 visible: true };

56 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

57 Mer om arrayer Exempel på arrayer: var ints: Integer* = [1,2,3,4]; var ints2 = [ints,5,6,7]; => 1,2,3,4,5,6,7 var ints3 = [ 1.. 7 ]; => 1,2,3,4,5,6,7 Var ints4 = [ 1,3.. 7 ]; => 1,3,5,7 Söka i arrayer: var selection = ints3[n| n>3] => 4,5,6,7 var selection1 = ints3[n| indexof n > 3 ] => 5,6,7

58 Mer om arrayer - modifiera Exempel var ints = [1,2,3,4,5]; insert 6 into ints;=>1,2,3,4,5,6 insert 0 as first into ints;=>0,1,2,3,4,5,6 insert 0 before ints[n| n==4]; =>0,1,2,3,0,4,5,6 delete ints[n| n >= 3];=>0,1,2,0

59 Mer om arrayer – ställa frågor Utan filter select n*n from n in [1.. 100]; => 1,4,9,16,25 etc. Med filter select n*n from n in [1.. 100] where n%2 == 0;=> 4,16,36 etc.

60 Triggers Triggers exekveras vid speciella händelser. Det finns 4 olika triggers: Create, Insert, Delete, Replace

61 Creation trigger class X { atribute numbers: Number*; } trigger on new X { insert [3,4] into this.nums; } var x = new X(); x.Nums == [3,4];// Sant

62 Insert trigger class X { attribute numbers: Number*; } trigger on insert num into X.numbers { System.out.println(”La till: {num}”); } var x = new X(); insert 10 into x.numbers; => skriver ut ”La till 10”

63 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

64 Demo Demonstration av ImageViewer

65 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

66 Framtiden Viktiga faktorer: –Java 6 update N –Utvecklare –Stabiliserat språk Språket ändras fortfarande. Saknas verktyg. Är JavaFX en Flash killer? ;-)

67 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

68 Länkar http://openjfx.dev.java.net http://openjfx-compiler.dev.java.net http://scenegraph.dev.java.net http://blogs.sun.com/chrisoliver http://jfx.wikia.com/wiki/Main_Page http://www.netbeans.org http://learnjavafx.typepad.com/ http://weblogs.java.net/blog/joshy

69 Agenda Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Trådning Animering Mer om språket Demo Framtiden Länkar Frågor

70