美觀、快速與流暢的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甲骨文授權教育訓練中心

聯成電腦張益裕