JavaFX 2.0 への誘い
- 2. Agenda
Java の UI の歴史
JavaFX 2.0
UI
General Purpose
Conclusion
- 4. JDK/JRE
AWT Swing JavaFX3.0
Java 2D
Java SwingX
JAI/ImageIO
Java 3D LG3D
JOGL
SWT JavaFX2.0
Non-Java
GWT
F3 JavaFX
- 5. JavaFX 2.0
第 3 の Java の GUI ライブラリ
高性能レンダリングエンジン
アニメーション / エフェクト
JVM で動作する言語から利用可
- 6. JavaFX
UI General
Purpose
SceneGraph
- 7. Stage
Scene
VBox
HBox
TableView
Stage Scene VBox HBox Label
TextBox
Button
TableView
- 10. Web
WebView view = new WebView();
WebEngine engine = view.getEngine();
engine.load("http://google.com/");
- 11. Media
Media media = new Media(url);
MediaPlayer player = new MediaPlayer(media);
MediaView view = new MediaView(player);
player.play();
- 12. SceneGraph の構築
public class Hello extends Application {
@Override
public void start(Stage stage) {
// コンテナ
Group container = new Group();
// シーングラフのルート要素を生成し、コンテナを貼る
Scene scene = new Scene(container, 100, 20);
stage.setScene(scene);
// ラベルを生成しコンテナに貼る
Label label = new Label("Hello, World!");
container.getChildren().add(label);
}
stage.show();
SceneGraph の構築
public static void main(String[] args) {
Application.launch(Hello.class, null);
}
}
- 13. SceneGraph の構築
FXML
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<FlowPane xmlns:fx="http://javafx.com/fxml">
<children>
<Label text="Label" />
<TextBox fx:id="textBox" text="TextBox" />
<Button fx:id="button" text="Button" />
</children>
</FlowPane>
- 14. JavaFX
UI General
Purpose
SceneGraph FXML
Animation
Node Effect
CSS
Control Region Shape
Web Media Chart
- 17. Effect
Node image = ...; Node image = ...;
GaussianBlur blur = new GaussianBlur(); DropShadow shdw= new DropShadow();
blur.setRadius(10.0); shdw.setOffsetX(5); shdw.setOffsetY(5);
image.setEffect(blur); image.setEffect(shdw);
Node image = ...; Node image = ...;
image.setEffect(new Reflection()); image.setEffect(new SepiaTone());
- 18. CSS
Scene scene = new Scene(container, 400, 100);
// スタイルシートの設定
scene.getStylesheets().add("/style.css");
.button { .button {
-fx-font: 24pt "SansSerif"; -fx-font: 16pt "SansSerif";
-fx-text-fill: #006666; -fx-text-fill: #00FF33;
-fx-background-color: orange; -fx-background-color: #0066FF;
-fx-border-radius: 20; -fx-border-radius: 0;
-fx-background-radius: 20; -fx-background-radius: 0;
-fx-padding: 5; -fx-padding: 20;
} }
- 19. CSS
Scene scene = new Scene(container, 400, 100);
// スタイルシートの設定
scene.getStylesheets().add("/style.css");
.button { .button {
-fx-font: 24pt "SansSerif"; -fx-font: 16pt "SansSerif";
-fx-text-fill: #006666; -fx-text-fill: #00FF33;
-fx-background-color: orange; -fx-background-color: #0066FF;
-fx-border-radius: 20; -fx-border-radius: 0;
-fx-background-radius: 20; -fx-background-radius: 0;
-fx-padding: 5; -fx-padding: 20;
} }
- 20. JavaFX
UI General
Purpose
SceneGraph FXML Property Async
Animation
Node Effect Bind Collection
CSS
Control Region Shape
Web Media Chart
- 21. MVC View Observer Pattern
Model
Event
Controller
- 22. MVC View
Model
Bind
Controller
// モデル
DoubleProperty xProperty = new DoubleProperty();
Slider slider = new Slider(50, 300, 0);
// モデルにスライダの値をバインドさせる
xProperty.bind(slider.valueProperty());
Rectangle rect = new Rectangle(50, 10, 50, 30);
// 四角の x 座標にモデルをバインドさせる
rect.xProperty().bind(xProperty);
- 23. JavaSE8 JavaFX OpenJDK
UI General
Purpose
SceneGraph FXML Property Async
Animation
Node Effect Bind Collection
CSS
Tool
Control Region Shape
NetBeans 7.1 Scene Builder
Web Media Chart デザイナ向けツールが ...