JDD 2013 JavaFX

583 views

Published on

從2012年發表JavaFX 2開始,JavaFX技術算是穩定下來了,定位也非常清楚,Java技術開發人員,會使用JavaFX來開發桌面應用程式的使用者介面。配合全新設計的Scene Builder工具程式,用它來設計應用程式需要的使用者介面,會更加快速與方便。JavaFX也已經整合到Java SE開發套件中,成為標準版內建的技術。依照Oracle的計劃,JavaFX與Scene Builder會隨著Java SE一起更新版本,持續不斷的加強與進化。
全世界有非常多技術人員使用Java技術開發各種應用程式,可是一些畫面好看、特效很酷,使用者操作起來很流暢的桌面應用程式,通常不是用Java技術開發的,更不用說在娛樂休閒方面的程式,它們對動畫、特效和3D效果的要求,比一般商業應用程式還要更高。JavaFX 2可以讓Java技術開發人員,使用一個新的方向來看Java技術,讓使用Java技術開發的桌面應用程式,具有豐富與實際的內在,也可以有好看與性感的外表。

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
583
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JDD 2013 JavaFX

  1. 1. JavaFX  2!  Make  Java  Sexy  Again! 張益裕 甲骨文授權教育訓練中心  聯成電腦  講師
  2. 2. JCheckBox JWindow JButton Swing JPanel MouseListener JTable JList JEditorPane JToggleButton JPopupMenu ItemListener Java3D JColorChooser GroutLayout JComboBox JRadioButton JToolBar JOptionPane JLabel JRootPane FlowLayout JFrame WindowListener JMenuItem JSplitPane Java2D CardLayout TextListener ComponentListener JTextField JTextPane JMenu JScrollBar ActionListener JProgressBar JPasswordField BorderLayout JTabbedPane AWTJDialog AdjustmentListener KeyListener ScrollPaneLayout JScrollPane JTree JTextArea FocusListener GridLayout JToolbar
  3. 3. Beautiful Fast Smooth Simple
  4. 4. Beautiful Fast Smooth Simple
  5. 5. Java EE JavaFX Java SE Java ME Java Card JVM Java ME VM Card VM Java Programming Language
  6. 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. 7. JavaFX Public APIs and Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
  8. 8. •Over 50+ components •CSS skinning and layout •Advanced UI controls
  9. 9. Designed by Jasper Potts http:/ /www.jasperpotts.com/blog/
  10. 10. Animation
  11. 11. Belgium Antwerpen
  12. 12. FXML
  13. 13. javafx.stage.Stage javafx.scene.Scene
  14. 14. root parent leaf
  15. 15. 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...
  16. 16. BorderPane FlowPane StackPane AnchorPane GridPane TilePane HBox VBox
  17. 17. BorderPane + = HBox StackPane FlowPane VBox GridPane AnchorPane with HBox
  18. 18. •All new event structure and Handler •Working with convenience methods •Support Multi-Touch
  19. 19. KeyEvent.KEY_PRESSED InputEvent.ANY KeyEvent.ANY KeyEvent.KEY_RELEASED KeyEvent.KEY_TYPED Event.ANY ActionEvent.ACTION MouseEvent.ANY MouseEvent.MOUSE_PRESSED ... MouseEvent.MOUSE_RELEASED ... WindowEvent.ANY WindowEvent.WINDOW_SHOWING WindowEvent.WINDOW_SHOWN ...
  20. 20. 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
  21. 21. 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) { ... } });
  22. 22. ImageView view = new ImageView(android_in_apple); view.setOnZoom(new EventHandler<ZoomEvent>() {...}); view.setOnScroll(new EventHandler<ScrollEvent>() {...}); view.setOnRotate(new EventHandler<RotateEvent>() {...});
  23. 23. •JavaBean Component architecture •Expanded JavaBean properties •In conjunction with Binding
  24. 24. 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
  25. 25. 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
  26. 26. 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);
  27. 27. Login.css .root  {          -­‐fx-­‐background-­‐image:  url("background.jpg"); } .label  {        ...        } #welcome-­‐text  {        ...        } #acJontarget  {        ...        } .buKon  {        ...        } .buKon:hover  {        ...        }
  28. 28. 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  {        ...        }
  29. 29. FXML •XML-based language •Separate UI from your code •Support localize •Support any JVM language
  30. 30. 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
  31. 31. FXML <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
  32. 32. 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>
  33. 33. 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!"); } ...
  34. 34. •UI Layout Tool •FXML Visual Editor •Integrated Developer Workflow •Preview Your Work •CSS support
  35. 35. ImageView TableView Button ListView Label, TextField and TextArea
  36. 36. 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%); } ...
  37. 37. •JavaFX ❖http://www.oracle.com/technetwork/java/javafx/ •NetBeans ❖http://netbeans.org/
  38. 38. •Make Java Sexy Again! •JavaFX架構 •Hello JavaFX! Part 1 •Hello JavaFX! Part 2 •Hello JavaFX! Part 3 •...
  39. 39. http:/ /www.codedata.com.tw
  40. 40. Thanks 張益裕 甲骨文授權教育訓練中心  聯成電腦

×