Download as PDF, PPTX
![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...](https://image.slidesharecdn.com/jdd2013lcc-140116082524-phpapp02/85/JDD-2013-JavaFX-30-320.jpg)
Uploaded by益裕 張
JDD 2013 JavaFX
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.
JDD 2013 JavaFX
- 1. JavaFX 2! Make Java Sexy Again! 張益裕 甲骨文授權教育訓練中心 聯成電腦 講師
- 2.
- 3.
- 4.
- 5. Java EE JavaFX Java SE JavaME Java Card JVM Java ME VM Card VM Java Programming Language
- 6. • Java languagefeatures • 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 APIsand Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
- 8. •Over 50+ components •CSSskinning and layout •Advanced UI controls
- 20. Designed by JasperPotts http:/ /www.jasperpotts.com/blog/
- 21.
- 24.
- 27.
- 28.
- 29.
- 30. javafx.application.Application public class HelloJavaFXextends 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...
- 31.
- 33.
- 34. •All new eventstructure and Handler •Working with convenience methods •Support Multi-Touch
- 35.
- 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 •ExpandedJavaBean 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 DoublePropertykmPro = 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 UIfrom 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")); Scenescene = 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> <Labeltext="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 •FXMLVisual Editor •Integrated Developer Workflow •Preview Your Work •CSS support
- 54.
- 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%); } ...
- 59.
- 61. •Make Java SexyAgain! •JavaFX架構 •Hello JavaFX! Part 1 •Hello JavaFX! Part 2 •Hello JavaFX! Part 3 •...
- 62.
- 63.