JavaFX - 9. JUGR Stammtisch - 5. Mai 2011

Oracles Technologie für Rich Client Anwendungen

Präsentation für den 9. JUGR Stammtisch
Autor: Reto Zahner Datum: 5. Mai 2011

Überblick - Was ist JavaFX?

„Rich Client Application“ Plattform
Adobe Flex und Microsoft Silverlight



Konzipiert für verschiedene Medien
Internet, Mobile, Desktop, TV




Spezialisiert auf interaktive, multimediale Inhalte
Streaming, CSS-Styling, Effekte, Animationen




Spezialisiert auf interaktive, multimediale Inhalte
Streaming, CSS-Styling, Effekte, Animationen

Einfache Erstellung von Benutzeroberﬂächen
Skripting für GUI - Javaobjekte verwenbar

Überblick - Features

Erweiterung der bewährten Java-Technolgie
> Verteilung über Applets und Java Webstart
> Zugriff auf bestehende Java-Klassen



Nutzung von Webtechnologien
> Einbindung von Medien via URLs
> Design über CSS steuerbar



Nutzung von Webtechnologien
> Einbindung von Medien via URLs
> Design über CSS steuerbar

FXScript für Benutzeroberﬂäche
> Scriptingsprache für GUI-Entwickler
> Deklaration der Elemente und Objekte
> Data-Binding und Variablen-Trigger

Überblick - Komponenten

Services Inhalte Applikationen

Application Framework Tools
Desktop Mobile TV Designer

API, Crossplattform Runtime Tools
JavaFX Runtime (JRE) Entwickler

JVM

Komponenten - GUI -Elemente

• Layoutmanager
• Effekte
• Animationen
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.LayoutInfo;

...

HBox{
content:
Button {
layoutInfo: LayoutInfo { width: 150 }
text: "OK"
translateY: 10
strong: true
font: Font{size: 10 name: "Tahoma"}
rotate: bind angle
}
}
}

...

Komponenten - CSS-Styling

• CSS auf sämtliche Elemente anwendbar
• Stylesheets dynamisch austauschbar
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.LayoutInfo;

...

Stage{
scene: Scene{
stylesheets: [ "{__DIR__}stylesheet custom.css" ]
}
}

...

FXScript - Allgemeiner Aufbau

import javafx.stage.Stage;
...
import javafx.scene.image.ImageView;

Stage {
title: "Nodes"
scene: Scene {
width: 220
height: 170
fill: Color.LIGHTBLUE
content: [
Circle {
centerX: 50 centerY: 50 radius: 50
stroke: Color.YELLOW
fill: Color.WHITE
},
Text {
transforms: Transform.rotate(33, 10, 100)
content: "Duke"
},
ImageView {
image: Image {url: "{__DIR__}dukewave.png"}
}
]//Content
}//Scene
}//Stage

FXScript - Data-Binding - Trigger

var myStreet = "1 Main Street"; import javafx.stage.Stage;
var myCity = "Santa Clara"; ...
var myState = "CA"; import javafx.scene.input.MouseEvent;
var myZip = "95050";
var count = 0;
class Address { def images = for(i in [0..9]){Image {url: "{__DIR__}{i}.png"};}
var street: String; var currImg = images[count] on replace oldValue {
var city: String; if(count < 10){
var state: String; if (count == 9){println("Max count ({count}) reached.");}
var zip: String; } else {
} count = 9;
currImg = oldValue;
def address = Address { println("Done. The counter should look OK now.");
street: bind myStreet; }
city: myCity; };
state: myState;
zip: myZip; Stage {
}; scene: Scene {
content: ImageView {
println("address.street == {address.street}"); image: bind currImg
myStreet = "100 Maple Street"; onMouseClicked:
println("address.street == {address.street}"); function(e: MouseEvent) {
println("Click number {++count} ...");
currImg = images[count];
}
}
}
}

FXScript - Sequenzen

var days = ["Mon"]; seq[a..b]
def days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
insert "Fri" into days; def weekend = days[5..6];
insert "Sat" into days;
insert "Sun" into days; seq[a..<b]
def days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
insert "Thu" before days[2]; def weekdays = days[0..<5];
insert "wed" after days[1];
seq[a..]
delete "Sun" from days; def days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
def weekend = days[5..];
delete days;
seq[a..<]
days = reverse days; def days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
def days2 = days[0..<];
var squares = for (i in [1..10]) i*i;

FXScript - Java-Klassen verwenden

/** Foo.java */ ...
public interface Foo { import javax.swing.JTree;
public abstract void doSomethingUseful(); import javafx.ext.swing.SwingComponent;
} import javafx.animation.transition.FadeTransition;

/** Fizzle.fx */ var tree = SwingComponent.wrap(new JTree());
public class Fizzle extends Foo { tree.translateY = 50;
override public function doSomethingUseful():Void { tree.height = 600;
myBankAcount.balance += 1000000 tree.width = 400;
}
} Stage {
title: "Add JTree"
/** Verwendung des Interfaces Foo in Java */ width: 200
void blah(Foo foo) { height: 400
if ( publicDebt < javafx.util.Math.pow(10, 12) ) scene: Scene {
foo.doSomethingUseful(); content : tree
} }
x: 10,
/** Verwendung der Klasse Fizzle in JavaFX */ y: 10
var fizzle = Fizzle {} }
fizzle.doSomethingUseful(); var fadeTransition = FadeTransition {
duration: 3s node: tree
fromValue: 1.0 toValue: 0.1
repeatCount:10 autoReverse: true
}
fadeTransition.play();

JavaFX 2.0 - Pläne

• Weiterführung der Plattform durch Oracle bestätigt
• Zentrale Technologie für „Rich Client Applications“
• Neue High-Performance Graphic-Engine
• Deployment wird weiter vereinfacht.
• Verwendung der neuen JVM-Sprachfeatures.

JavaFX 2.0 - Wichtigste Änderungen

• Weiterführung der Plattform durch Oracle bestätigt
• JavaFX-API wird für Java verfügbar gemacht.
• Verbesserung der Performance. (OpenGL, DirectX)
• Multimedia (Animationen, Media-Stream Events, ...)
• Weitere Controls (WebView, Dialoge, ...)
• WebEngine, WebSource für Ausgabe in HTML-DOM

JavaFX - 9. JUGR Stammtisch - 5. Mai 2011

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie JavaFX - 9. JUGR Stammtisch - 5. Mai 2011

Ähnlich wie JavaFX - 9. JUGR Stammtisch - 5. Mai 2011 (20)

JavaFX - 9. JUGR Stammtisch - 5. Mai 2011

Hinweis der Redaktion