Szrakoztat

Elektronikai Eszkzk
Programozsa
A JavaFX platform bemutatsa
Dr. Ekler Pter
peter.ekler@aut.bme.hu
Pldk elrhetsge (GIT)
https://github.com/peekler/JavaFX-BME
 Krds
Mi az albbi kd futtatsnak eredmnye?

public class MyThread implements Runnable {

String myString = "Yes ";

public void run() {

this.myString = "No ";

A. A Yes Yes Yes
}

public static void main(String[] args) { B. B No No No

MyThread t = new MyThread();
C. C Fordtsi hiba
new Thread(t).start();

for (int i=0; i < 10; i++) { D. D Nem eldnthet

System.out.print(t.myString);

}
Tartalom
A JavaFX trtnete s jvje
JavaFX architektrja
A fejlesztkrnyezet kialaktsa
A Java s a JavaFX kapcsolata
JavaFX alkalmazsok teleptse
Hello JavaFX
Felhasznli fellet kialaktsa
Bevezets
A Java technolgia sok, klnbz krnyezetben
elrhet (desktop, web, mobil, blu-ray, stb.), ez a
technolgia egyik legfbb jellemzje
Oracle felvsrolta a Sun Microsystems-t
Java elavult felhasznli fellet szempontjbl (Swing,
Awt)
Megvltozott a felhasznli igny, szebb, ltvnyosabb
elemekre van szksg
JavaFX: a Java vlasza a megvltozott ignyekre
A JavaFX fbb jellemzi
Java kliens platform j genercija
Gazdag felhasznli fellet s RIA (Rich Internet
Application) tmogats
Konzisztens mkds tbb platformon
Gazdag Java alap API grafikai s mdia
tmogatsra
Hardware tmogats
Szleskr mdia tmogats
A JavaFX trtnete 1/2
A 2007-es JavaOne konferencin mutatta be a
Sun Microsystems
Ltvnyos alkalmazsok fejlesztse mobil
kszlkekre, asztali szmtgpekre, TV-kre s
egyb multimdia eszkzkre
Kezdetben JavaFX mobil platform s JavaFX
script nyelv
1.3-as verzi: 2010. prilis 22.
JavaFX mint script nyelv
import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.scene.text.Text;

import javafx.scene.text.Font;

Stage {

title: "Hello World"

width: 250

Elavult
height: 80

scene: Scene {

content: Text {

font : Font {

size : 24

x: 10, y: 30

content: "Hello World"

}
A JavaFX trtnete 2/2
Oracle felvsrolja a Sun Microsystems-t
A 2010-es JavaOne konferencin bejelentik, hogy nem
tmogatjk tovbb a JavaFX script nyelvet, de(!) A
JavaFX-et igen
A JavaFX API-k Java API-k formjban elrhetk
lesznek a 2.0-s verziban
Legfrissebb verzi: 2.2
Nem kell j nyelvet megtanulnia a fejlesztknek
Oracle tovbbra is a JavaFX-et tmogatja, mint
elsszm gazdag UI-t tmogat eszkz
Az j verzi elnyei
Jl ismert Java nyelv hasznlata (korbban
JavaFX scriptnyelv volt)
Gyorsan megtanulhat, Java fejlesztket
knnyebb tallni
Java-ban megismert osztlyknyvtr
hasznlhat
Fejlesztsi kltsg cskken
Legismertebb fejlesztkrnyezetek tmogatjk
(pl. NetBeans, Eclipse, IntelliJ Idea)
A JavaFX 2.0 jdonsgai 1/2
Java API tmogats:
> Jl ismert nyelvi eszkzk (generics, annotcik, tbbszlsg)
> Megszokott fejleszteszkzk hasznlata

j grafikus motor:
> Grafikus hardware gyorstst hasznl motor (Prism) j ablakkezel eszkzzel (Glass)
> Gyors s ltvnyos UI kszts

j FXML deklaratv ler nyelv:

> XML alap ler nyelv UI ksztshez
> Vltoztats esetn nem kell jrafordtani a kdot

Megjult mdia kezel motor:

> Web multimdia tartalmak lejtszsa
> Kis ksleltets
> GStreamer multimedia framework
A JavaFX 2.0 jdonsgai 2/2
HTML komponens:
> Begyazott HTML tartalom megjelentse (WebKit HTML)
> Hardware-s gyorsts a Prism-en keresztl

Bngsz plug-in:
> Prism alap JavaFX appletek tmogatsa

Rengeteg UI vezrl
> Diagramok, tblk, menk, j layoutok, stb.
> sszes ismert UI vezrl

Rengeteg plda alkalmazs

JavaFX 2.2 jdonsgai
Elrhet klnbz platformokra
Java7u6-ba integrlva
Standalone elrhet java6hoz is
Self-contained alkalmazsknt terjeszthet szoftverek: a szksges java s JavaFX runtimeok
csomagoldnak az alkalmazshoz, gy olyan, mintha natv alkalmazsknt futna
Multi-touch support
Canvas API: HML5 canvas-szer 2D rajzols
Pixelek rsa/olvassa JavaFX kp objektumokrl/ra
Kt j control:
> Color picker (sznvlaszt)
> Pagination ("lapoz" lists megjelentshez)

HTTP live streaming

Swing s JavaFX alkalmazsok integrcijnak javtsa mindkt irnyban, informci ezek
segtsre
JavaFX Scene Builder: UI pt
Java 8 - JavaFX
http://java.dzone.com/articles/whats-new-java-
8-part-i-javafx
JavaFX pldk
JavaFX architektra
JavaFX Scene Graph 1/2
Kezdpont JavaFX alkalmazsok fejlesztshez
Hierarchikus fa, minden csompont a felhasznli
fellet egy eleme
Megjelenthet
Beviteli esemnyeket fogadhat
Minden csompont tartalmazhat:
> Egyedi ID
> Stlus (style class)
Minden csompontnak egy szlje s 0 vagy tbb
gyermek eleme lehet
JavaFX Scene Graph 2/2
Csompont tovbbi elemei
> Effektek (elmoss, rnyk, stb), tltszsg
> Transzformci
> Esemnykezel (egr, billentyzet, stb.)
> Alkalmazs specifikus llapot
Ltrehozhat tartalmak:
> Csompontok: alakzatok (2D s 3D), kpek, mdia, begyazott bngsz, szveg,
UI vezrlk, diagrammok, csoportok, containerek
> llapotok: Valamilyen tartalom grafikus tulajdonsgt rja le az egyes llapotokban
(pozci, orientci, stb.)
> Animcik: A Scene Graph elemeinek tulajdonsgait vltoztatja az id
fggvnyben
> Effektek: A Scene Graph csompontjainak megjelentst befolysolja (elmoss,
rnyk, szntmenet, stb.), egyszerre akr tbbt is (gyerek elemek)
JavaFX grafikus motor
JavaFX scene graph rteg implementcija
2D s 3D scene graph tmogats
Software alap renderels tmogatsa, ha a hardware-
es valamirt nem kielgt
Kt grafikus pipeline:
> Prism: Hardware-s renderls tmogatsa, ha elrhet
(DirectX 9, DirectX 11, OpenGL), ha nem akkor software alap
(Java 2D)
> Quantum toolkit:
A Prism s a Glass Windowing Toolkit sszektse
Szlkezels s renderels vs. esemny kezels
Glass Windowing Toolkit
JavaFX graphics stack als rtege
Natv szolgltatsok:
> Ablakkezels
> Idztk
> Felletek
Platform fgg rteg, ami sszekapcsolja az opercis rendszert
s a JavaFX-et
Event queue kezelse, az AWT-vel ellenttben a natv opercis
rendszer event queue-jt hasznlja
Ugyanabban a szlban fut, mint a JavaFX alkalmazs
JavaFX szlak
A JavaFX egy idben kett vagy tbb szlat folyamatosan futtat
JavaFX alkalmazs szl:
> F szl, minden scene ebbl a szlbl rhet el, de lehet httr szlakat is ltrehozni
> Ms mint a Swing vagy az AWT szl, ezrt figyelni kell amikor JavaFX kd kerl Swing
alkalmazsba

Prism render szl:

> A renderelsrt felels szl, fggetlenl az esemnykezeltl
> Lehetv teszi, hogy az N-edik frame rendereldjn, amg az N+1-edik feldolgozs alatt van
> Konkurens feldolgozs

Mdia szl:
> Httrben fut
> Szinkronizcis feladatok
Pulse
Esemny, mely jelzi, hogy a JavaFX Scnene Graph
vltozott, ideje frissteni
> Animcik
> Scene Graph elem vltozs
> CSS vltozs
Maximum 60 frame/sec sebessg
Manulisan is kivlthat
Glass Windowing Toolkit felelssge jelezni
Nagyfelbonts natv idztket hasznl
Mdia s kpkezels
Stabil, gyors s konzisztens mkds minden platformon
javafx.scene.media API
Kp s hang kezels
> Hang: MP3, AIFF, WAV
> Vide: FLV
Hrom f osztly:
> Media: mdia llomnyt jelkpezi
> MediaPlayer: mdia lejtszsrt felels
> MediaView: mdia megjelentse
(Scene Graph node)
Begyazhat bngsz
WebKit alap bngsz komponens (HTML5, CSS, JavaScript, DOM, and
SVG)
Fbb funkcik:
> HTML tartalom renderelse helyi gprl, vagy hlzati URL alapjn
> History s elre-htra navigci
> jratlts
> Effektek tmogatsa a web komponensen
> HTML tartalom szerkesztse
> JavaScript parancsok futtatsa
> Esemnyek kezelse
WebEngine (alap bngsz elem)
WebView: HTML oldal, Scene Graph Node leszrmazott
CSS tmogats
Megjelents megvltoztatsa a forrskd vltoztatsa
nlkl
Brmelyik Scene Graph Node-on alkalmazhat s akr
futsi idben is hozzrendelhet
W3C CSS 2.1 alap
UI vezrlk
JavaFX API-n keresztl
elrhetk
Scene Graph Node
elemek
JavaFX CSS-el
testreszabhat
megjelents
Layout-ok
UI vezrlk flexibilis s dinamikus elhelyezsnek biztostsa
javafx.scene.layout csomag
Fbb layout modellek:
> BorderPane
> HBox, VBox
> StackPane
> GridPane
> FlowPane
> TilePane
> AnchorPane
2D s 3D transzformcik
Minden Scene Graph Node transzformlhat
javafx.scene.tranform csomag osztlyai
> Translate: x,y,z tengely menti mozgats
> Scale: x,y,z menti tmretezs
> Shear: Elforgats gy, hogy az x s y tengelyek nem
maradnak merlegesek
> Rotate: Elforgats
> Affine: Egyenessg s prhuzamossg megtart lineris
transzformci (tbbivel rdemes hasznlni)
Vizulis effektek
Felhasznli ltvny/lmny nvelse kpi
hatsokkal
Tbb node-on is rvnyesthet, ilyenkor a node-
okbl egy kp kszl s azon alkalmazza a
JavaFX az effektet
Nhny f effekt:
> Drop Shadow: rnyk
> Reflection: tkrzds
> Lightning: fnyforrs
Telepts
Desktop vagy bngsz alkalmazs
Hromfle teleptsi md:
> Standalone: JAR teleptse/indtsa
> Browser: Weboldalba gyazott objektum, JavaScript-
en keresztl el tudja rni az oldalt
> Web Start: Serverrl tltdik le az alkalmazs, majd
a JNLP llomnyra kattintva futtathat az
alkalmazs
A JavaFX jvje
Oracle elktelezett a JavaFX mellett
Partnerek: MobiTV, Westhawk, VNI Media, DigiArea Inc.,
C2Call GmbH, Chronotech, stb.
2.0-bl nhny kimaradt elem:
> CSS animcik
> Standard s Custom dialgusok
> Teljes WebBrowser vezrl
> Szinkronizlt mdia s animcik
2.2-ben megjelent javtsok
Mi nem igaz a JavaFX-re?
A. A UI XML-bl s Java kdbl is szerkeszthet.
B. Csak Windows-on mkdik.
C. Kihasznlja a grafikus gyorst felletet.
D. Java nyelven fejleszthet.
Telepts
JDK + NetBeans
> www.netbeans.org

Vagy IDEA
JavaFX HelloWorld
public class HelloWorld extends Application {
public static void main(String[] args) {
Application.launch(HelloWorld.class, args);
}

@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root,80,20);
primaryStage.setScene(scene);

root.getChildren().add(new Label(
"Hello JavaFX 2.0"));
// teljes kperny tmogatsa
// primaryStage.setFullScreen(true);
primaryStage.show();
}
}
JavaFX PopUp
public void start(final Stage primaryStage) {
Button btn = new Button();
btn.setText("Show PopUp");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
Popup popup = new Popup();
HBox box = new HBox();
box.getChildren().add(new Label("Hello JavaFX csoport!"));
box.setPrefSize(150, 30);
box.setStyle("-fx-background-color: gray;");

popup.getContent().add(box);
popup.setX(200);
popup.setY(300);
popup.show(primaryStage);
}
});

StackPane root = new StackPane();

root.getChildren().add(btn);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello PopUp!");
primaryStage.setScene(scene);
primaryStage.show();
}
JavaFX plda
Egyszer plda, mely az alapfogalmakon vgigvezet
minket
Ltvnyos grafikai effektek minimlis kdolssal
Ennl sokkal tbb a JavaFX!
JavaFX Scene Graph
JavaFX Scene Graph programozi modell
Stage: legfels szint container az alkalmazs
szmra
Scene: egy rajzol fellet a tartalom szmra
Scene Graph: Scene-k sszessge, ami
hierarchikus fa formba szervezdik
Plda Scene Graph
A csompontok a
Group osztly
leszrmazottai
A levelek a Rectangle
s Circle osztly
leszrmazottai
Csak ilyen elemekbl
pl fel a fa
Els lps
public class ColorsHelloWorld extends Application {

public static void main(String[] args) {

Application.launch(ColorsHelloWorld.class, args);
}

@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}
}
Alap struktra
Az Application osztlybl kell leszrmazni
Kt metdust tartalmaz:
> main(String[] args): ez hvdik meg elsknt (Java-hoz
hasonl, argumentumokat kaphat) s hvja meg a launch()
metdust
> start(Stage primaryStage): ezt az abstract fggvnyt kell
felldefinilni, ami argumentumknt megkapja az alkalmazs
alap Stage-jt
Vgl a Stage show() fggvnynek meghvsval
jelenik meg az ablak
Fekete httr
@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}
Krk elhelyezse 1/2
Group circles = new Group();

for (int i = 0; i < 30; i++) {

Circle circle = new Circle(

150, Color.web("white", 0.05));

circle.setStrokeType(StrokeType.OUTSIDE);

circle.setStroke(Color.web("white", 0.16));

circle.setStrokeWidth(4);

circles.getChildren().add(circle);

root.getChildren().add(circles);
Krk elhelyezse 2/2
Krket tartalmaz csoport ltrehozsa
Krk pldnyostsa egy ciklusban
150 px sugar tltsz krk (5% opacity)
Vilgos krvonal, a kr terletn kvl
(StrokeType.OUTSIDE)
Csoport elhelyezse a Scene Graph-ban
Alaprtelmezetten bal fell jelennek meg a krk
Kpi hats belltsa a krkre
circles.setEffect(new BoxBlur(10, 10, 3));
Elmoss effektus hozzads a krkhz
Csoport szint effekt bellts
Szntmenetes httr 1/2
Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),

new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new

Stop[]{

new Stop(0, Color.web("#f8bd55")),

new Stop(0.14, Color.web("#c0fe56")),

new Stop(0.28, Color.web("#5dfbc1")),

new Stop(0.43, Color.web("#64c2f8")),

new Stop(0.57, Color.web("#be4af7")),

new Stop(0.71, Color.web("#ed5fc2")),

new Stop(0.85, Color.web("#ef504c")),

new Stop(1, Color.web("#f2660f")),}));

root.getChildren().add(colors);
Szntmenetes httr 2/2
A root.getChildren().add(circles); sor el
helyezzk el, hogy a krk alatt legyen a httr
colors nev tglalap ltrehozsa, ami a jelenettel
megegyez szlessg s magassgi s teljesen
kitlti azt
Lineris szntmenet, bal alulrl (0,0) jobb fellre
(1,1)
Vgl a colors hozzadsa a jelenthez
Aktulis Scene Graph
Kevers belltsa a krk szneihez 1/2

Korbbi hierachia szerkezet eltvoltsa a kdbl:

> root.getChildren().add(colors);
> root.getChildren().add(circles);
Fekete httr belltsa
Az tltsz krkn keresztl fog ltszani a
szivrvny szn httr
Kevers belltsa a krk szneihez 2/2
Group blendModeGroup =
new Group(new Group(new Rectangle(scene.getWidth(),
scene.getHeight(),Color.BLACK), circles),colors);
colors.setBlendMode(BlendMode.OVERLAY);
root.getChildren().add(blendModeGroup);
Krk mozgatsa 1/2
Timeline timeline = new Timeline();
for (Node circle: circles.getChildren()) {
timeline.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
),
new KeyFrame(new Duration(40000), // set end position at 40s
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
)
);
}
// play 40s of animation
timeline.play();
Krk mozgatsa 2/2
40 msodperces animci
Az animcit egy timeline vezrli
Kt key frame kerl definilsra minden krhz
Az elsben a 0. msodpercben minden kr kap egy
random kezd pozcit
A msodikban a 40. msodpercben minden kr kap egy
random vg pozcit
Lejtszskor gy 40 msodperc alatt ezen vonalak
mentn mozog minden kr egymstl fggetlenl
Mi nem igaz a JavaFX-re?
A. Nem keverhet a Swing s a JavaFX kd egy
alkalmazsba.
B. Scene Graph modell alap a UI lersa.
C. Egyms fl is helyezhetk UI elemek.
D. Animcik lejtszsra is alkalmas.
Trkp alkalmazs 1/3
Scene Graph gyakorls
Esemnykezels
Ovi Maps API
> http://m.ovi.me/?c=47.5,19&t
=1&z=4&nord
OSM API:
> http://staticmap.openstreetm
ap.de/staticmap.php?center=
47,19&zoom=10&size=865x5
12&maptype=mapnik
Hlzatkezels kln szlba
Trkp alkalmazs 2/3
@Override buttonShowMap.setOnAction(
new EventHandler<ActionEvent>() {
public void start(Stage primaryStage) { @Override public void handle(ActionEvent e) {
new Thread()
Group root = new Group(); {
public void run()
Scene scene = {
new Scene(root,300,420,Color.BLACK); loadHttpFile(
"http://m.ovi.me/?c="+
primaryStage.setScene(scene);
textFieldLat.getText()+","+
textFieldLng.getText()+
"&t=1&z=4&nord",imgView);
VBox vBox = new VBox(10); }
}.start();
final TextField textFieldLat = }
new TextField("47.5"); });
final TextField textFieldLng =
new TextField("19"); primaryStage.show();
}
final ImageView imgView = new ImageView();

Button buttonShowMap = new Button("Show map");

vBox.getChildren().add(textFieldLat);

vBox.getChildren().add(textFieldLng);

vBox.getChildren().add(buttonShowMap);

vBox.getChildren().add(imgView);

root.getChildren().add(vBox);
Trkp alkalmazs 3/3
private void loadHttpFile(String urlAddress, ImageView imgView) {
HttpURLConnection hc = null;
InputStream is = null;
try {
URL url = new URL(urlAddress);
hc = (HttpURLConnection)url.openConnection();
is = hc.getInputStream();
imgView.setImage(new Image(is));
return;
} catch(Exception e1) {
e1.printStackTrace();
}
finally {
try {
if(is != null)
is.close();
if(hc != null)
hc.disconnect();
} catch(Exception e2) {
e2.printStackTrace();
}
}
}
Egy-kt effekt alkalmazsa
buttonShowMap.setEffect(
new Reflection());
buttonShowMap.setStyle(
"-fx-font: 22 arial; -fx-
base: #b6e7c9");
buttonShowMap.setRotate(
270);
UI mdostsa ms szlbl
Platform.runLater(new Runnable() {
@Override public void run() {
imgView.setImage(im);
}
});
2000 gomb 1/2
2000 gomb 2/2
@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 880, 680, Color.BLACK);
for (int i = 0; i < 2000; i++) {
Button btn1 = new Button("press" + i);
btn1.setRotate(random(360));
btn1.setEffect(new Reflection());
btn1.setLayoutX(random(800));
btn1.setLayoutY(random(600));
root.getChildren().add(btn1);
}
primaryStage.setScene(scene);
primaryStage.show();
}

private int random(int rnd) {

Random r = new Random();
return r.nextInt(rnd + 1);
}
sszefoglals
JavaFX: j API Java alkalmazsok felhasznli
felletnek elksztshez
Rugalmas, gyors, ltvnyos
Java API, nem kell j nyelvet megtanulni
Hardware tmogats a renderelshez
Tbb platform tmogatsa
Scene Graph modell
CSS tmogats
Hogy is volt?
Milyen jdonsgokat hozott a JavaFX?
Vzolja fel a JavaFX architektrjt!
Hogy mkdik a Scene Graph modell?
Milyen JavaFX szlakat ismer?
Hogyan telepthetk a JavaFX alkalmazsok?
Vzolja fel egy JavaFX alkalmazs kdjt, amely egy
gombot jelent meg s a gomb lenyoms hatsra egy
tetszleges szveget jelent meg pop-up-ban.
 Krdsek

62