Upload
-
View
662
Download
4
Embed Size (px)
DESCRIPTION
Java技術已經進入全面性應用的階段,不論在個人電腦,企業應用或是行動裝置,都可以使用Java技術來完成各種不同的需求。不過在個人電腦應用程式的部份,卻因為使用者介面的問題,在桌面的應用上有很大的限制。 JavaFX在2007年首度發表後,承諾給Java開發人員一個跨平台,豐富多樣的元件與整合的使用者介面開發架構。在2011年推出JavaFX 2.0,已經完成許多令人振奮的全新特性,支援最新的Java程式設計語言與開發工具,使用FXML快速的設計與架構使用者介面,透過全新引擎Prism支援目前最新的GPU技術,提供快速與流暢的使用者操作經驗。 在2012年推出JavaFX 2.2時,更發表一個令開發人員驚豔的工具:JavaFX Scene Builder,這個全新的JavaFX開發工具,讓開發人員在設計使用者介面的時候,搭配全新的FXML技術,提供簡單,快速,流暢與視覺化的設計方式,讓開發人員可以節省很多設計GUI的時間,專心在商務流程的設計。
Citation preview
美觀、快速與流暢的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甲骨文授權教育訓練中心
聯成電腦張益裕