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

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

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

5. Vad är JavaFX?

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

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

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

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

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. Trådning • Animering • Mer om språket • Demo • Framtiden • Länkar • Frågor • Vad är JavaFX • JavaFX exempel • Swing och JavaFX • Språket • Egna komponenter • Bindning • Operationer och funktioner • Händelsehantering Agenda

12. Snabbkurs i Swing

13. Komponenter

14. LayoutManager

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. Trådning • Animering • Mer om språket • Demo • Framtiden • Länkar • Frågor • Vad är JavaFX • JavaFX exempel • Swing och JavaFX • Språket • Egna komponenter • Bindning • Operationer och funktioner • Händelsehantering Agenda

17. 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]; Variabler

18. Variabler Använd { } för att infoga variabler och uttryck i text 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 };

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

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 och while syntaxen är som Javas. for använder samma syntax som sökning i arrayer. If, while, for 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 - 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, catch och throw 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 fungerar precis som i Java. break och continue är som i Java men utan labels return, break och continue

24. do – fungerar inte alls som i Java. do

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

26. Ä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 Egna komponenter

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å:

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

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

31. Bindning 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. Vad är JavaFX JavaFX exempel Swing och JavaFX Språket Egna komponenter Bindning Operationer och funktioner Händelsehantering Agenda • Trådning • Animering • Mer om språket • Demo • Framtiden • Länkar • Frågor

34. 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 operation och function function sum(m, n) { if( m > n ) { .... } var r = m + n; return r; }

35. 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? operation och function

36. 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 operation och function

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

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

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

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

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

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

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

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

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

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

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

49. Animering – scenegraf transform: Rotate { angle: 45 }

50. Animering – scenegraf transform: Rotate { angle: 45 }