JavaFX Pär Sikö, Epsilon

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

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

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

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

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

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

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

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

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

Snabbkurs i Swing

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

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

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

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

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];

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

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

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 }

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 ); }

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}” ); }

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

do do – fungerar inte alls som i Java.

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

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

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:/...” } }

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

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

var x = 5; var y = bind 5*x// y == 25 x = 7;// x == 7 och y == 35 Ändra x Ändra y 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 };

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 } } ] }

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

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; }

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?

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

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

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

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

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”; }

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 };

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

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.

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

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

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

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.

Animering – scengraf Canvas Group ButtonLabelImageRectangle Group Button

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

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

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“} } ] }

Animering - transformationer Scale Translate Skew Rotate

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

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

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

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

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,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

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

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

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

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

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”

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

Demo Demonstration av ImageViewer

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

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

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

Länkar

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