JCD 2012 JavaFX 2
•
0 gefällt mir•1,173 views
Java技術已經進入全面性應用的階段，不論在個人電腦，企業應用或是行動裝置，都可以使用Java技術來完成各種不同的需求。不過在個人電腦應用程式的部份，卻因為使用者介面的問題，在桌面的應用上有很大的限制。 JavaFX在2007年首度發表後，承諾給Java開發人員一個跨平台，豐富多樣的元件與整合的使用者介面開發架構。在2011年推出JavaFX 2.0，已經完成許多令人振奮的全新特性，支援最新的Java程式設計語言與開發工具，使用FXML快速的設計與架構使用者介面，透過全新引擎Prism支援目前最新的GPU技術，提供快速與流暢的使用者操作經驗。 在2012年推出JavaFX 2.2時，更發表一個令開發人員驚豔的工具：JavaFX Scene Builder，這個全新的JavaFX開發工具，讓開發人員在設計使用者介面的時候，搭配全新的FXML技術，提供簡單，快速，流暢與視覺化的設計方式，讓開發人員可以節省很多設計GUI的時間，專心在商務流程的設計。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie JCD 2012 JavaFX 2
Ähnlich wie JCD 2012 JavaFX 2 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
JCD 2012 JavaFX 2
- 6. Java EE JavaFX Java SE Java ME Java Card JVM Java ME VM Card VM Java Programming Language
- 7. • 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
- 8. JavaFX Public APIs and Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
- 9. • Over 50+ components • CSS skinning and layout • Advanced UI controls
- 24. Animation
- 28. Belgium Antwerp
- 31. FXML
- 33. root parent leaf
- 34. 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...
- 35. • Region & Pane • AnchorPane • BorderPane • FlowPane & TilePane • GridPane • VBox & HBox • StackPane
- 37. • All new event structure and Handler • Working with convenience methods • Support Multi-Touch
- 39. 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
- 40. final Circle circle = new Circle(radius, Color.RED); circle.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { /* Do something */ } }); circle.setOnMouseExited(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { /* Do something */ } }); circle.setOnMousePressed(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { /* Do something */ } }); handle EventHandler
- 41. final Ellipse oval = new Ellipse(100, 50); oval.setOnZoom(new EventHandler<ZoomEvent>() {...}); oval.setOnScroll(new EventHandler<ScrollEvent>() {...}); oval.setOnRotate(new EventHandler<RotateEvent>() {...});
- 42. • JavaBean Component architecture • Expanded JavaBean properties • In conjunction with Binding
- 43. 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
- 44. 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
- 45. 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);
- 48. Login.css .root { -‐fx-‐background-‐image: url("background.jpg"); } .label { ... } #welcome-‐text { ... } #ac@ontarget { ... } .buAon { ... } .buAon:hover { ... }
- 49. 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 { ... } .buAon { ... } .buAon:hover { ... }
- 50. FXML • XML-based language • Separate UI from your code • Support localize • Support any JVM language
- 51. BorderPane border = new BorderPane(); Label topPaneText = new Label("Label - TOP"); border.setTop(topPaneText); Button centerPaneButton = new Button("Button - CENTER"); border.setCenter(centerPaneButton);
- 52. FXML <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
- 53. 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>
- 54. 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!"); } ... }
- 55. • UI Layout Tool • FXML Visual Editor • Integrated Developer Workflow • Preview Your Work • CSS support
- 59. 59