JJUG CCC 2011 Falll 発表資料 「JavaFX 2.0への誘い」 Introducting JavaFX 2.0

1. への誘い

2. Agenda
Java の UI の歴史
JavaFX 2.0
UI
General Purpose
Conclusion

3. History

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

8. Node
Control Pane Shape

9. Node
Control Pane Shape
Web
Media
Chart

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

15. Animation
自動補完

16. Animation

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 デザイナ向けツールが ...

24. への誘い