JDD 2013 JavaFX
•
0 likes•751 views
This document discusses JavaFX 2 and how it can make Java sexy again. It provides an overview of JavaFX concepts like controls, properties, layouts, events, CSS styling and FXML. It demonstrates how to create simple JavaFX applications with basic UI elements and handlers. It also discusses advanced topics such as binding properties, creating custom controls with CSS and using JavaFX UI tools. The goal is to introduce developers to the new features in JavaFX 2 that aim to simplify UI development and create rich and responsive client applications.
Recommended
More Related Content
What's hot
What's hot (13)
Similar to JDD 2013 JavaFX
Similar to JDD 2013 JavaFX (20)
Recently uploaded
Recently uploaded (20)
JDD 2013 JavaFX
- 1. JavaFX 2! Make Java Sexy Again! 張益裕 甲骨文授權教育訓練中心 聯成電腦 講師
- 5. Java EE JavaFX Java SE Java ME Java Card JVM Java ME VM Card VM Java Programming Language
- 6. • Java language features • FXML for defining user interfaces • New graphics pipeline for modern GPUs • Rich set of UI controls • Powerful Properties Model • Swing and AWT Interoperability
- 7. JavaFX Public APIs and Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
- 8. •Over 50+ components •CSS skinning and layout •Advanced UI controls
- 20. Designed by Jasper Potts http:/ /www.jasperpotts.com/blog/
- 21. Animation
- 27. FXML
- 29. root parent leaf
- 30. javafx.application.Application public class HelloJavaFX extends Application { Top level container @Override public void start(Stage stage) { Root container BorderPane root = new BorderPane(); Button btn = new Button("Hello JavaFX!"); root.setCenter(btn); Place Button Scene scene = new Scene(root, 300, 250); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } Run...
- 34. •All new event structure and Handler •Working with convenience methods •Support Multi-Touch
- 36. listener? Button btn = new Button("Hello JavaFX!"); Generic Event type Register btn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { /* Do something */ Generic Event type } }); Override
- 38. final Circle circle = new Circle(radius, Color.RED); circle.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... } }); circle.setOnMouseExited(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... } }); EventHandler handle circle.setOnMousePressed(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... } });
- 39. ImageView view = new ImageView(android_in_apple); view.setOnZoom(new EventHandler<ZoomEvent>() {...}); view.setOnScroll(new EventHandler<ScrollEvent>() {...}); view.setOnRotate(new EventHandler<RotateEvent>() {...});
- 40. •JavaBean Component architecture •Expanded JavaBean properties •In conjunction with Binding
- 41. Label mile = new Label(); KM to mile double kmValue = 32.5; double mileValue = kmValue * 0.621371192; String mileText = Double.toString(kmValue); mile.setText(mileText); Set Label text Double to String
- 42. KM Property Object DoubleProperty kmPro = new SimpleDoubleProperty(); Label mile = new Label(); StringBinding Object, hold KM to mile value StringBinding mileBinding = kmPro.multiply(0.621371192).asString(); mile.textProperty().bind(mileBinding); Bind mile value to ... Text Property kmPro.set(32.5); Change KM Property value
- 43. DoubleProperty kmPro = new SimpleDoubleProperty(); Label mile = new Label(); Extends Binding Class StringBinding mileBinding = new StringBinding() { { Binding Property super.bind(kmPro); } Override computeValue method @Override protected String computeValue() { return Double.toString(kmPro.get() * 0.621371192); } Produce value here }; mile.textProperty().bind(mileBinding); ... kmPro.set(32.5);
- 46. Login.css .root { -‐fx-‐background-‐image: url("background.jpg"); } .label { ... } #welcome-‐text { ... } #acJontarget { ... } .buKon { ... } .buKon:hover { ... }
- 47. Scene scene = new Scene(grid, 300, 275); scene.getStylesheets().add("login/Login.css"); Text scenetitle = new Text("Welcome"); scenetitle.setId("welcome-text"); Text actiontarget = new Text(); actiontarget.setId("actiontarget"); Login.css .root { -‐fx-‐background-‐image: url("background.jpg"); } .label { ... } #welcome-‐text { ... } #ac,ontarget { ... } .buKon { ... } .buKon:hover { ... }
- 48. FXML •XML-based language •Separate UI from your code •Support localize •Support any JVM language
- 49. BorderPane border = new BorderPane(); Label topPaneText = new Label("Label - TOP"); border.setTop(topPaneText); Button centerPaneButton = new Button("Button - CENTER"); border.setCenter(centerPaneButton); Label Button BorderPane
- 50. FXML <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
- 51. Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml")); Scene scene = new Scene(root); stage.setScene(scene); stage.show(); Sample.fxml <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
- 52. Sample.fxml <BorderPane fx:controller="SampleController" > <top> <Label text="Label - TOP" fx:id="label" /> </top> <center> <Button text="Button - CENTER" fx:id="button" onAction="#handleButtonAction"/> </center> </BorderPane> ... public class SampleController implements Initializable { @FXML private Label label; @FXML private Button button; SampleController.java } @FXML private void handleButtonAction(ActionEvent event) { button.setText("Button Pressed!"); label.setText("Button Pressed!"); } ...
- 53. •UI Layout Tool •FXML Visual Editor •Integrated Developer Workflow •Preview Your Work •CSS support
- 57. SuperGrey.css SuperNavy.css SuperGreen.css .theme { master-‐color: grey; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px; } .theme { master-‐color: #0049a6; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px; } .theme { master-‐color: #99cc00; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px; } .split-‐pane { -‐fx-‐padding: 0; -‐fx-‐border-‐width: 0; -‐fx-‐background-‐color: derive(master-‐color, 100%); } ... .split-‐pane { -‐fx-‐padding: 0; -‐fx-‐border-‐width: 0; -‐fx-‐background-‐color: derive(master-‐color, 100%); } ... .split-‐pane { -‐fx-‐padding: 0; -‐fx-‐border-‐width: 0; -‐fx-‐background-‐color: derive(master-‐color, 100%); } ...
- 61. •Make Java Sexy Again! •JavaFX架構 •Hello JavaFX! Part 1 •Hello JavaFX! Part 2 •Hello JavaFX! Part 3 •...