JCD 2012 JavaFX 2
Upcoming SlideShare
Loading in...5
×
 

JCD 2012 JavaFX 2

on

  • 675 views

Java技術已經進入全面性應用的階段,不論在個人電腦,企業應用或是行動裝置,都可以使用Java技術來完成各種不同的需求。不過在個人電腦應用程式的...

Java技術已經進入全面性應用的階段,不論在個人電腦,企業應用或是行動裝置,都可以使用Java技術來完成各種不同的需求。不過在個人電腦應用程式的部份,卻因為使用者介面的問題,在桌面的應用上有很大的限制。

JavaFX在2007年首度發表後,承諾給Java開發人員一個跨平台,豐富多樣的元件與整合的使用者介面開發架構。在2011年推出JavaFX 2.0,已經完成許多令人振奮的全新特性,支援最新的Java程式設計語言與開發工具,使用FXML快速的設計與架構使用者介面,透過全新引擎Prism支援目前最新的GPU技術,提供快速與流暢的使用者操作經驗。

在2012年推出JavaFX 2.2時,更發表一個令開發人員驚豔的工具:JavaFX Scene Builder,這個全新的JavaFX開發工具,讓開發人員在設計使用者介面的時候,搭配全新的FXML技術,提供簡單,快速,流暢與視覺化的設計方式,讓開發人員可以節省很多設計GUI的時間,專心在商務流程的設計。

Statistics

Views

Total Views
675
Views on SlideShare
675
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JCD 2012 JavaFX 2 JCD 2012 JavaFX 2 Presentation Transcript

  • 美觀、快速與流暢的Java用戶端應用程式 甲骨文授權教育訓練中心 聯成電腦 張益裕
  • JCheckBox JWindow JButton JTable Swing JPanel MouseListener JList JToggleButton JEditorPane JPopupMenu ItemListener Java3D JColorChooser JComboBox AdjustmentListener KeyListener JRadioButton GroutLayout JToolBar JOptionPane JLabel JRootPane BorderLayout JFrame ActionListener WindowListener JMenuItem JSplitPane Java2D CardLayout JProgressBar ComponentListener JTextPane JToolbar JTextArea FocusListener GridLayout JScrollPane JTree JScrollBar TextListener JTextField JMenu JTabbedPane AWTJDialog JPasswordField FlowLayout ScrollPaneLayout
  • Beautiful Fast Smooth Simple
  • Beautiful Fast Smooth Simple
  • Java EE JavaFX Java SE Java ME Java Card JVM Java ME VM Card VM Java Programming Language
  • • 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
  • JavaFX Public APIs and Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
  • • Over 50+ components • CSS skinning and layout • Advanced UI controls
  • Animation
  • Belgium Antwerp
  • FXML
  • javafx.stage.Stage javafx.scene.Scene
  • root parent leaf
  • 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...
  • • Region & Pane • AnchorPane • BorderPane • FlowPane & TilePane • GridPane • VBox & HBox • StackPane
  • BorderPane FlowPane GridPane TilePane AnchorPane HBox VBox StackPane
  • • All new event structure and Handler • Working with convenience methods • Support Multi-Touch
  • 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 ...
  • 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
  • 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
  • final Ellipse oval = new Ellipse(100, 50); oval.setOnZoom(new EventHandler<ZoomEvent>() {...}); oval.setOnScroll(new EventHandler<ScrollEvent>() {...}); oval.setOnRotate(new EventHandler<RotateEvent>() {...});
  • • JavaBean Component architecture • Expanded JavaBean properties • In conjunction with Binding
  • 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
  • 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
  • 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);
  • Login.css .root  {          -­‐fx-­‐background-­‐image:  url("background.jpg"); } .label  {        ...        } #welcome-­‐text  {        ...        } #ac@ontarget  {        ...        } .buAon  {        ...        } .buAon:hover  {        ...        }
  • 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  {        ...        }
  • FXML • XML-based language • Separate UI from your code • Support localize • Support any JVM language
  • BorderPane border = new BorderPane(); Label topPaneText = new Label("Label - TOP"); border.setTop(topPaneText); Button centerPaneButton = new Button("Button - CENTER"); border.setCenter(centerPaneButton);
  • FXML <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
  • 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>
  • 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!"); } ... }
  • • UI Layout Tool • FXML Visual Editor • Integrated Developer Workflow • Preview Your Work • CSS support
  • ImageView TableView Button ListView Label, TextField and TextArea
  • • JavaFX ❖http://www.oracle.com/technetwork/java/javafx/ • NetBeans ❖http://netbeans.org/
  • 59
  • Thanks 甲骨文授權教育訓練中心 聯成電腦 張益裕