何が変わった javafx 2.0
DESCRIPTION
Japan JavaFX User Group Seminar on 10 Dec. 2011.TRANSCRIPT
![Page 1: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/1.jpg)
何が変わった
![Page 2: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/2.jpg)
Agenda
JavaFX 1.x JavaFX 2.0
Position の変化
How to Write
Conclusion
![Page 3: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/3.jpg)
Position の変化
JavaFX
Java SE Java ME
![Page 4: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/4.jpg)
Position の変化
JavaFX 1.xJavaFX Script
![Page 5: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/5.jpg)
Position の変化
JavaFX 2.0Java
![Page 6: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/6.jpg)
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMF
JavaFX
![Page 7: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/7.jpg)
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMFJavaFX2.0
![Page 8: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/8.jpg)
JDK/JRE
Java
Non-Java
AWT Swing
SwingX
JAI/ImageIO
Java 3D
JOGL
Java 2D
SWT
JMF
JavaFX
2.0
3.0JavaSE8
![Page 9: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/9.jpg)
JavaCard CLDC SE
Java ME Java SE
CDC SE Embedded
![Page 10: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/10.jpg)
JavaCard CLDC SE
Java ME Java SE
CDCSE Embedded
JavaFX
![Page 11: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/11.jpg)
インスタンシエーション
追加された機能
削除された機能
何が変わった
Scene Graph
![Page 12: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/12.jpg)
Stage
StageScene
Scene
VBox
VBox
HBox
HBox
TableView
TableView
Label
TextBox
Button
![Page 13: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/13.jpg)
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
![Page 14: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/14.jpg)
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(); }
![Page 15: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/15.jpg)
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); }}
![Page 16: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/16.jpg)
WebView/WebEngine
Preloader
Production Suite
REST/JSON Perser
![Page 17: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/17.jpg)
EffectEffect
AppDesign
![Page 18: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/18.jpg)
WebView/WebEngine
![Page 19: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/19.jpg)
WebView/WebEngine
![Page 20: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/20.jpg)
Animation
自動補完
![Page 21: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/21.jpg)
Animation
![Page 22: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/22.jpg)
Animation
自動補完
![Page 23: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/23.jpg)
Animation
自動補完
![Page 24: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/24.jpg)
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());
![Page 25: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/25.jpg)
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;}
![Page 26: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/26.jpg)
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;}
![Page 27: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/27.jpg)
Media
Media media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);
player.play();
![Page 28: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/28.jpg)
Bind
Model
View
ControllerEvent
Observer Pattern
![Page 29: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/29.jpg)
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);
![Page 30: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/30.jpg)
Conclusion
JavaFX 2.0 Java の GUI ライブラリ
JavaSE 8 JavaFX 3.0 を含むOpenJFX
FXMLHTML
Animation
Media
CSSBind
EffectTool
Scene BuilderNetBeans 7.1
デザイナ向けツールが ...
![Page 31: 何が変わった JavaFX 2.0](https://reader034.vdocuments.site/reader034/viewer/2022042516/5572c6bfd8b42abb378b4ac6/html5/thumbnails/31.jpg)
何が変わった