1. Krótki opis technologii JavaFX jest technologią do tworzenia

1. Krótki opis technologii JavaFX jest technologią do tworzenia

1. Krótki opis technologii
JavaFX jest technologią do tworzenia bogatych wizualnie aplikacji internetowych (RIA – Rich
Internet Application), przeznaczona nie tylko pod wiele systemów operacyjnych, ale też – docelowo
– na wszystkie urządzenia z ekranem („bring Java to all the screens of your life” brzmi hasło
reklamowe). W tej chwili już jest dostępna wersja JavyFX na komputery (JavaFX Desktop),
urządzenia mobilne (JavaFX Mobile) a w 2010 planowane jest wdrożenie platformy TV (JavaFX
TV).
Aplikacje te pisane są w języku JavaFX Script - podobnym składniowo do JavaScripta, w pełni
zorientowanym obiektowo (obiekty opisywane w formacie JSON). Język daje możliwości
powiązania (binding) właściwości różnych obiektów między sobą albo z wartościami zmiennych
oraz zawiera mnóstwo efektów graficznych, statycznych oraz ruchomych (animowanych).
Wszystko to pozwala na tworzenie zaawansowanych i bardzo efektownych interfejsów graficznych
dla aplikacji – prezentujących na przykład jednocześnie efekty graficzne (przezroczystość), jak i
animację obiektów – oraz pozwala na utworzenie prostych aplikacji – takich, które nie kryją za sobą
na tyle skomplikowanej warstwy biznesowej, żeby trzeba do tego było angażować cały model
MVC.
Ale na szczęście JavaFX ma także zastosowanie tylko jako warstwa wizualna – kod w JavaFX
Scripcie może zostać dołączony jako część projektu, napisanego w Javie, służąca tylko do jego
wizualizacji, a pod spodem mogą znajdować się dowolnie skomplikowane funkcjonalności.
2. Instalacja:
- javaFx SDK http://java.sun.com/javafx/downloads/previous.jsp#1.2.1
- Eclipse IDE for Java EE Developers http://www.eclipse.org/downloads/
- instalacja wtyczki do Eclipse:
Help > Install New Software
Add Site (Name: JavaFX, Location: http://javafx.com/downloads/eclipse-plugin/)
3. Tworzenie prostego projektu:
- File > New > Project > JavaFX Project (JavaFX Profile: Desktop)
- jeśli JavaFX SDK zainstalowana w niestandardowej lokacji należy ustawić zmienna
JAVAFX_HOME na katalog główny biblioteki np. javafx-sdk1.2.
- stwórz nowy pakiet (New > Package) i utwórz w nim nowy skrypt JavaFX o nazwie Main.fx
(New > Empty JavaFx Script)
- w perspektywie JavaFX, zakładce Snippets możesz dodawać elementy skryptu metodą drag &
drop
- utwórz nową scenę główną (Stage) – główny kontener i scenę (Scene) – content graficzny
aplikacji:
package Scenes;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
* @author Maciej
*/
Stage {
title : "First JavaFX App"
scene: Scene {
width: 300
height: 300
content: [ ]
}
}
- dodaj obiekt tekstowy:
package Scenes;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.*;
/**
* @author Maciej
*/
Stage {
title: "First JavaFX App"
scene: Scene {
width: 250
height: 250
content: [
Text {
font: Font { size: 22 }
x: 20, y: 90
textAlignment: TextAlignment.CENTER
content:"Welcome to \nJavaFX World"
} //Text
] // content
} // Scene
} // Stage
- dodaj koło:
package Scenes;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
/**
* @author Maciej
*/
Stage {
title: "First JavaFX App"
scene: Scene {
width: 250
height: 250
content: [
Circle {
centerX: 100,
centerY: 100,
radius: 100,
fill: Color.BLACK
},
Text {
font: Font { size: 22 }
x: 20, y: 90
textAlignment: TextAlignment.CENTER
content:"Welcome to \nJavaFX World"
} //Text
] // content
} // Scene
} // Stage
- wypełnij koło gradientem:
package Scenes;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.*;
/**
* @author Maciej
*/
Stage {
title: "First JavaFX App"
scene: Scene {
width: 250
height: 250
content: [
Circle {
centerX: 100,
centerY: 100,
radius: 90,
fill: RadialGradient {
centerX: 75,
centerY: 75,
radius: 90
proportional: false
stops: [
Stop {
offset: 0.0
color: Color.web("#3B8DED")
},
Stop {
offset: 1.0
color: Color.web("#044EA4")
}
] // stops
} // RadialGradient
} // Circle
Text {
font: Font { size: 22 }
x: 20, y: 90
textAlignment: TextAlignment.CENTER
content:"Welcome to \nJavaFX World"
} //Text
] // content
} // Scene
} // Stage
- uruchom (Run As > JavaFx Application) – jako Profile wybierz Desktop profile – Run as
Application
4. Dodanie prostej animacji do aplikacji
package Scenes;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.*;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
var opacity = 1.0;
/**
* @author Maciej
*/
Timeline {
repeatCount: Timeline.INDEFINITE,
keyFrames: [
KeyFrame {
time: 5s,
canSkip: true
values : [
opacity => 0.2 tween Interpolator.EASEBOTH
] // values
} // KeyFrame
KeyFrame {
time: 10s,
canSkip: true
values : [
opacity => 1.0 tween Interpolator.EASEBOTH
] // values
} // KeyFrame
] // keyFrames
}.play();
Stage {
title: "First JavaFX App"
scene: Scene {
width: 250
height: 250
content: [
Circle {
centerX: 100,
centerY: 100,
radius: 90,
opacity: bind opacity
fill: RadialGradient {
centerX: 75,
centerY: 75,
radius: 90
proportional: false
stops: [
Stop {
offset: 0.0
color: Color.web("#3B8DED")
},
Stop {
offset: 1.0
color: Color.web("#044EA4")
}
] // stops
} // RadialGradient
} // Circle
Text {
font: Font { size: 22 }
x: 20, y: 90
textAlignment: TextAlignment.CENTER
content:"Welcome to \nJavaFX World"
} //Text
] // content
} // Scene
} // Stage
5. Przykłady aplikacji:
- http://javafx.com/samples/
- http://www.vancouver2010.com/olympic-medals/geo-view/