jcd 2012 javafx 2
DESCRIPTION
Java技術已經進入全面性應用的階段,不論在個人電腦,企業應用或是行動裝置,都可以使用Java技術來完成各種不同的需求。不過在個人電腦應用程式的部份,卻因為使用者介面的問題,在桌面的應用上有很大的限制。 JavaFX在2007年首度發表後,承諾給Java開發人員一個跨平台,豐富多樣的元件與整合的使用者介面開發架構。在2011年推出JavaFX 2.0,已經完成許多令人振奮的全新特性,支援最新的Java程式設計語言與開發工具,使用FXML快速的設計與架構使用者介面,透過全新引擎Prism支援目前最新的GPU技術,提供快速與流暢的使用者操作經驗。 在2012年推出JavaFX 2.2時,更發表一個令開發人員驚豔的工具:JavaFX Scene Builder,這個全新的JavaFX開發工具,讓開發人員在設計使用者介面的時候,搭配全新的FXML技術,提供簡單,快速,流暢與視覺化的設計方式,讓開發人員可以節省很多設計GUI的時間,專心在商務流程的設計。TRANSCRIPT
![Page 1: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/1.jpg)
![Page 2: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/2.jpg)
美觀、快速與流暢的Java用戶端應用程式
甲骨文授權教育訓練中心聯成電腦張益裕
![Page 3: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/3.jpg)
SwingAWT
Java2DJava3D
ActionListener
ItemListener
KeyListener
MouseListener
AdjustmentListener
WindowListener
TextListener
FocusListener
ComponentListener
JEditorPane
JOptionPane
JPanel
JRootPane
JScrollPane
JTextPane
JDialog
JFrame
JWindow
JToolbar
JSplitPane
JTabbedPane
JButton
JCheckBox
JColorChooser
JLabel
JList
JTree
JTable
JToolBar
JTextField
JToggleButton
JTextArea
JPasswordField
JMenuItem
JRadioButton
JMenu
JComboBox
JPopupMenu
JScrollBar
JProgressBar
BorderLayoutGridLayout
FlowLayout
GroutLayout
ScrollPaneLayout
CardLayout
![Page 4: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/4.jpg)
Beautiful Smooth SimpleFast
![Page 5: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/5.jpg)
Beautiful Smooth SimpleFast
![Page 6: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/6.jpg)
Java Programming Language
JVM
Java SE
Card VM
Java Card
Java EE
Java ME VM
Java ME
JavaFX
![Page 7: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/7.jpg)
• 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
![Page 8: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/8.jpg)
JavaFX Public APIs and Scene Graph
Quantum Toolkit
GlassWindowing
Toolkit
MediaEngine
WebEngine
Java 2D Open GL 3D
Prism
![Page 9: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/9.jpg)
• Over 50+ components• CSS skinning and layout• Advanced UI controls
![Page 10: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/10.jpg)
![Page 11: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/11.jpg)
![Page 12: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/12.jpg)
![Page 13: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/13.jpg)
![Page 14: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/14.jpg)
![Page 15: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/15.jpg)
![Page 16: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/16.jpg)
![Page 17: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/17.jpg)
![Page 18: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/18.jpg)
![Page 19: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/19.jpg)
![Page 20: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/20.jpg)
![Page 21: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/21.jpg)
![Page 22: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/22.jpg)
![Page 23: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/23.jpg)
![Page 24: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/24.jpg)
Animation
![Page 25: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/25.jpg)
![Page 26: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/26.jpg)
![Page 27: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/27.jpg)
![Page 28: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/28.jpg)
BelgiumAntwerp
![Page 29: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/29.jpg)
![Page 30: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/30.jpg)
![Page 31: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/31.jpg)
FXML
![Page 32: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/32.jpg)
javafx.stage.Stage
javafx.scene.Scene
![Page 33: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/33.jpg)
root parent leaf
![Page 34: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/34.jpg)
public class HelloJavaFX extends Application {
@Override public void start(Stage stage) {
BorderPane root = new BorderPane(); Button btn = new Button("Hello JavaFX!"); root.setCenter(btn); Scene scene = new Scene(root, 300, 250); stage.setScene(scene); stage.show(); }
public static void main(String[] args) { launch(args); }}
javafx.application.Application
Place Button
Run...
Top level container
Root container
![Page 35: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/35.jpg)
• Region & Pane• AnchorPane• BorderPane• FlowPane & TilePane• GridPane• VBox & HBox• StackPane
![Page 36: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/36.jpg)
BorderPane FlowPane GridPane TilePane StackPane
AnchorPane HBox VBox
![Page 37: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/37.jpg)
• All new event structure and Handler• Working with convenience methods• Support Multi-Touch
![Page 38: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/38.jpg)
Event.ANY
InputEvent.ANY
ActionEvent.ACTION
WindowEvent.ANY
KeyEvent.ANY
MouseEvent.ANY
...
KeyEvent.KEY_PRESSED
KeyEvent.KEY_RELEASED
KeyEvent.KEY_TYPED
MouseEvent.MOUSE_PRESSED
MouseEvent.MOUSE_RELEASED
...
WindowEvent.WINDOW_SHOWING
WindowEvent.WINDOW_SHOWN
...
![Page 39: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/39.jpg)
Button btn = new Button("Hello JavaFX!");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent event) { /* Do something */ }
});
Register Generic Event type
Generic Event type
listener?
Override
![Page 40: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/40.jpg)
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 */ }});
EventHandlerhandle
![Page 41: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/41.jpg)
oval.setOnScroll(new EventHandler<ScrollEvent>() {...});
oval.setOnZoom(new EventHandler<ZoomEvent>() {...});
oval.setOnRotate(new EventHandler<RotateEvent>() {...});
final Ellipse oval = new Ellipse(100, 50);
![Page 42: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/42.jpg)
• JavaBean Component architecture• Expanded JavaBean properties• In conjunction with Binding
![Page 43: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/43.jpg)
Label mile = new Label();
double kmValue = 32.5;double mileValue = kmValue * 0.621371192;String mileText = Double.toString(kmValue);
mile.setText(mileText);
KM to mile
Double to String
Set Label text
![Page 44: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/44.jpg)
DoubleProperty kmPro = new SimpleDoubleProperty();
Label mile = new Label();
StringBinding mileBinding = kmPro.multiply(0.621371192).asString();
mile.textProperty().bind(mileBinding);
...
kmPro.set(32.5);
KM Property Object
StringBinding Object, hold KM to mile value
Bind mile value to Text Property
Change KM Property value
![Page 45: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/45.jpg)
DoubleProperty kmPro = new SimpleDoubleProperty();Label mile = new Label();
StringBinding mileBinding = new StringBinding() { { super.bind(kmPro); }
@Override protected String computeValue() { return Double.toString(kmPro.get() * 0.621371192); }
};
mile.textProperty().bind(mileBinding);...kmPro.set(32.5);
Extends Binding Class
Binding Property
Override computeValue method
Produce value here
![Page 46: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/46.jpg)
![Page 47: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/47.jpg)
![Page 48: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/48.jpg)
.root { -‐fx-‐background-‐image: url("background.jpg");}
.label { ... }
#welcome-‐text { ... }
#ac@ontarget { ... }
.buAon { ... }
.buAon:hover { ... }
Login.css
![Page 49: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/49.jpg)
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");
.root { -‐fx-‐background-‐image: url("background.jpg");}.label { ... }#welcome-‐text { ... }#ac,ontarget { ... }.buAon { ... }.buAon:hover { ... }
Login.css
![Page 50: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/50.jpg)
• XML-based language• Separate UI from your code• Support localize• Support any JVM language
FXML
![Page 51: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/51.jpg)
BorderPane border = new BorderPane();
Label topPaneText = new Label("Label - TOP");border.setTop(topPaneText);
Button centerPaneButton = new Button("Button - CENTER");border.setCenter(centerPaneButton);
![Page 52: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/52.jpg)
<BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center></BorderPane>
FXML
![Page 53: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/53.jpg)
Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml")); Scene scene = new Scene(root);stage.setScene(scene);stage.show();
<BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center></BorderPane>
Sample.fxml
![Page 54: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/54.jpg)
<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>
Sample.fxml
...public class SampleController implements Initializable { @FXML private Label label; @FXML private Button button; @FXML private void handleButtonAction(ActionEvent event) { button.setText("Button Pressed!"); label.setText("Button Pressed!"); } ...}
SampleController.java
![Page 55: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/55.jpg)
• UI Layout Tool• FXML Visual Editor• Integrated Developer Workflow• Preview Your Work• CSS support
![Page 56: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/56.jpg)
ListView
TableView
Label, TextField and TextArea
ImageView Button
![Page 57: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/57.jpg)
![Page 58: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/58.jpg)
• JavaFX❖http://www.oracle.com/technetwork/java/javafx/
• NetBeans❖http://netbeans.org/
![Page 59: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/59.jpg)
59
![Page 60: JCD 2012 JavaFX 2](https://reader034.vdocuments.site/reader034/viewer/2022042700/5598d17c1a28abc1038b45ad/html5/thumbnails/60.jpg)
Thanks甲骨文授權教育訓練中心
聯成電腦張益裕