Post on 05-Jul-2015
description
美觀、快速與流暢的Java用戶端應用程式
甲骨文授權教育訓練中心聯成電腦張益裕
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
Beautiful Smooth SimpleFast
Beautiful Smooth SimpleFast
Java Programming Language
JVM
Java SE
Card VM
Java Card
Java EE
Java ME VM
Java ME
JavaFX
• 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
GlassWindowing
Toolkit
MediaEngine
WebEngine
Java 2D Open GL 3D
Prism
• Over 50+ components• CSS skinning and layout• Advanced UI controls
Animation
BelgiumAntwerp
FXML
javafx.stage.Stage
javafx.scene.Scene
root parent leaf
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
• Region & Pane• AnchorPane• BorderPane• FlowPane & TilePane• GridPane• VBox & HBox• StackPane
BorderPane FlowPane GridPane TilePane StackPane
AnchorPane HBox VBox
• All new event structure and Handler• Working with convenience methods• Support Multi-Touch
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
...
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
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
oval.setOnScroll(new EventHandler<ScrollEvent>() {...});
oval.setOnZoom(new EventHandler<ZoomEvent>() {...});
oval.setOnRotate(new EventHandler<RotateEvent>() {...});
final Ellipse oval = new Ellipse(100, 50);
• JavaBean Component architecture• Expanded JavaBean properties• In conjunction with Binding
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
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
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
.root { -‐fx-‐background-‐image: url("background.jpg");}
.label { ... }
#welcome-‐text { ... }
#ac@ontarget { ... }
.buAon { ... }
.buAon:hover { ... }
Login.css
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
• XML-based language• Separate UI from your code• Support localize• Support any JVM language
FXML
BorderPane border = new BorderPane();
Label topPaneText = new Label("Label - TOP");border.setTop(topPaneText);
Button centerPaneButton = new Button("Button - CENTER");border.setCenter(centerPaneButton);
<BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center></BorderPane>
FXML
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
<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
• UI Layout Tool• FXML Visual Editor• Integrated Developer Workflow• Preview Your Work• CSS support
ListView
TableView
Label, TextField and TextArea
ImageView Button
• JavaFX❖http://www.oracle.com/technetwork/java/javafx/
• NetBeans❖http://netbeans.org/
59
Thanks甲骨文授權教育訓練中心
聯成電腦張益裕