何が変わった javafx 2.0
DESCRIPTION
Japan JavaFX User Group Seminar on 10 Dec. 2011.TRANSCRIPT
何が変わった
Agenda
JavaFX 1.x JavaFX 2.0
Position の変化
How to Write
Conclusion
Position の変化
JavaFX
Java SE Java ME
Position の変化
JavaFX 1.xJavaFX Script
Position の変化
JavaFX 2.0Java
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMF
JavaFX
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMFJavaFX2.0
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMF
JavaFX
2.0
3.0JavaSE8
JavaCard CLDC SE
Java ME Java SE
CDC SE Embedded
JavaCard CLDC SE
Java ME Java SE
CDCSE Embedded
JavaFX
インスタンシエーション
追加された機能
削除された機能
何が変わった
Scene Graph
Stage
StageScene
Scene
VBox
VBox
HBox
HBox
TableView
TableView
Label
TextBox
Button
Scene Graph の構築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.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}
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.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}
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.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}
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(); } public static void main(String[] args) { Application.launch(args); }}
SceneGraph
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(); }
Java
+ F
XM
L<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="contents.browser2" spacing="10" layoutY="10"> <children> <HBox spacing="10" style="-fx-alignment: center"> <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); }}
WebView/WebEngine
Preloader
Production Suite
REST/JSON Perser
EffectEffect
AppDesign
WebView/WebEngine
WebView/WebEngine
Animation
自動補完
Animation
Animation
自動補完
Animation
自動補完
Effect
Node image = ...;GaussianBlur blur = new GaussianBlur();blur.setRadius(10.0);image.setEffect(blur);
Node image = ...;DropShadow shdw= new DropShadow();shdw.setOffsetX(5); shdw.setOffsetY(5);image.setEffect(shdw);
Node image = ...;image.setEffect(new Reflection());
Node image = ...;image.setEffect(new SepiaTone());
CSS
Scene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");
.button { -fx-font: 24pt "SansSerif"; -fx-text-fill: #006666; -fx-background-color: orange; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5;}
.button { -fx-font: 16pt "SansSerif"; -fx-text-fill: #00FF33; -fx-background-color: #0066FF; -fx-border-radius: 0; -fx-background-radius: 0; -fx-padding: 20;}
CSS
Scene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");
.button { -fx-font: 24pt "SansSerif"; -fx-text-fill: #006666; -fx-background-color: orange; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5;}
.button { -fx-font: 16pt "SansSerif"; -fx-text-fill: #00FF33; -fx-background-color: #0066FF; -fx-border-radius: 0; -fx-background-radius: 0; -fx-padding: 20;}
Media
Media media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);
player.play();
Bind
Model
View
ControllerEvent
Observer Pattern
Bind
Model
View
Controller
Bind
// モデル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);
Conclusion
JavaFX 2.0 Java の GUI ライブラリ
JavaSE 8 JavaFX 3.0 を含むOpenJFX
FXMLHTML
Animation
Media
CSSBind
EffectTool
Scene BuilderNetBeans 7.1
デザイナ向けツールが ...
何が変わった