Japan JavaFX User Group Seminar on 10 Dec. 2011.

1. 何が変わった

2. Agenda
Position の変化
JavaFX 1.x JavaFX 2.0
How to Write
Conclusion

3. Position の変化
JavaFX
Java SE Java ME

4. Position の変化
JavaFX 1.x
JavaFX Script

5. Position の変化
JavaFX 2.0
Java

6. JDK/JRE
AWT Swing
Java 2D
Java JAI/ImageIO
JOGL
SwingX
Java 3D
JMF
SWT
Non-Java
JavaFX

7. JDK/JRE
AWT Swing
Java 2D
Java JAI/ImageIO
JOGL
SwingX
Java 3D
JMF
JavaFX 2.0
SWT
Non-Java

8. JDK/JRE
AWT Swing
JavaFX 3.0
Java 2D JavaSE8
Java JAI/ImageIO
JOGL
SwingX
Java 3D
JMF
2.0
SWT
Non-Java

9. Java ME Java SE
JavaCard CLDC CDC SE Embedded SE

10. Java ME Java SE
CDC
JavaCard CLDC SE Embedded SE
JavaFX

11. 何が変わった
インスタンシエーション
Scene Graph
追加された機能
削除された機能

12. Stage
Scene
VBox
HBox
TableView
Stage Scene VBox HBox Label
TextBox
Button
TableView

13. public class Hello extends Application {
@Override
Scene Graph の構築
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();
stage.setVisible(true);
SceneGraph
public static void main(String[] args) {
Application.launch(args);
}
}

14. Java
public void start(Stage stage) {
stage.setTitle("Custom Browser");
VBox vbox = new VBox(10);
vbox.setLayoutY(10);
Scene scene = new Scene(vbox, 800, 600);
HBox hbox = new HBox(10);
hbox.setAlignment(Pos.CENTER);
TextField field = new TextField();
field.setPrefWidth(400);
hbox.getChildren().add(field);
Button button = new Button("Load");
hbox.getChildren().add(button);
vbox.getChildren().add(hbox);
WebView view = new WebView();
vbox.getChildren().add(view);
stage.setScene(scene);
stage.show();
}

15. <VBox xmlns:fx="http://javafx.com/fxml"
fx:controller="contents.browser2"
spacing="10" layoutY="10">
<children>
<HBox spacing="10" style="-fx-alignment: center">
Java + FXML
<children>
<TextField fx:id="field" prefWidth="200"
onAction="#handleAction" />
<Button text="Load" onAction="#handleAction" />
</children>
</HBox>
<WebView fx:id="view" />
</children>
</VBox>
public class browser2 {
@FXML
private TextField field;
@FXML
private WebView view;
private WebEngine engine;
@FXML
private void handleAction(ActionEvent event) {
String url = field.getText();
engine.load(url);
}
}

16. WebView/WebEngine
Preloader
Production Suite
REST/JSON Perser

17. App
Design
Effect
tceffE

18. WebView/WebEngine

19. WebView/WebEngine

20. Animation
自動補完

21. Animation

22. Animation
自動補完

23. Animation
自動補完

24. 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());

25. 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;
} }

26. 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;
} }

27. Media
Media media = new Media(url);
MediaPlayer player = new MediaPlayer(media);
MediaView view = new MediaView(player);
player.play();

28. Bind View Observer Pattern
Model
Event
Controller

29. Bind 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);

30. Conclusion
JavaFX 2.0 Java の GUI ライブラリ
JavaSE 8 JavaFX 3.0 を含む
OpenJFX
FXML Media
HTML
Animation Tool
Effect N etBeans 7.1 uilder
CSS Scene B
Bind デザイナ向けツールが ...

31. 何が変わった