0
美觀、快速與流暢的Java用戶端應用程式
甲骨文授權教育訓練中心
聯成電腦
張益裕
JCheckBox

JWindow

JButton
JTable

Swing

JPanel
MouseListener
JList
JToggleButton

JEditorPane

JPopupMenu

ItemListener...
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 contr...
JavaFX Public APIs and Scene Graph

Quantum Toolkit

Prism

Java 2D

Open GL

3D

Glass
Windowing
Toolkit

Media
Engine

W...
• 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 ...
• 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...
listener?

Button btn = new Button("Hello JavaFX!");
Generic Event type

Register

btn.setOnAction(new EventHandler<Action...
final Circle circle = new Circle(radius, Color.RED);
circle.setOnMouseEntered(new EventHandler<MouseEvent>() {
public void...
final Ellipse oval = new Ellipse(100, 50);
oval.setOnZoom(new EventHandler<ZoomEvent>() {...});
oval.setOnScroll(new Event...
• 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 = ...
KM Property Object

DoubleProperty kmPro = new SimpleDoubleProperty();
Label mile = new Label();

StringBinding Object,
ho...
DoubleProperty kmPro = new SimpleDoubleProperty();
Label mile = new Label();

Extends Binding Class

StringBinding mileBin...
Login.css

.root	
  {	
  
	
  	
  	
  	
  -­‐fx-­‐background-­‐image:	
  url("background.jpg");
}
.label	
  {	
  	
  	
  	...
Scene scene = new Scene(grid, 300, 275);
scene.getStylesheets().add("login/Login.css");
Text scenetitle = new Text("Welcom...
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 cen...
FXML

<BorderPane>
<top>
<Label text="Label - TOP"/>
</top>
<center>
<Button text="Button - CENTER"/>
</center>
</BorderPa...
Parent root =
FXMLLoader.load(getClass().getResource("Sample.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene)...
Sample.fxml

<BorderPane fx:controller="SampleController" >
<top>
<Label text="Label - TOP" fx:id="label" />
</top>
<cente...
• 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
甲骨文授權教育訓練中心
聯成電腦
張益裕
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
JCD 2012 JavaFX 2
Upcoming SlideShare
Loading in...5
×

JCD 2012 JavaFX 2

660

Published on

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

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

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
660
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JCD 2012 JavaFX 2"

  1. 1. 美觀、快速與流暢的Java用戶端應用程式 甲骨文授權教育訓練中心 聯成電腦 張益裕
  2. 2. 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
  3. 3. Beautiful Fast Smooth Simple
  4. 4. Beautiful Fast Smooth Simple
  5. 5. Java EE JavaFX Java SE Java ME Java Card JVM Java ME VM Card VM Java Programming Language
  6. 6. • 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
  7. 7. JavaFX Public APIs and Scene Graph Quantum Toolkit Prism Java 2D Open GL 3D Glass Windowing Toolkit Media Engine Web Engine
  8. 8. • Over 50+ components • CSS skinning and layout • Advanced UI controls
  9. 9. Animation
  10. 10. Belgium Antwerp
  11. 11. FXML
  12. 12. javafx.stage.Stage javafx.scene.Scene
  13. 13. root parent leaf
  14. 14. 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...
  15. 15. • Region & Pane • AnchorPane • BorderPane • FlowPane & TilePane • GridPane • VBox & HBox • StackPane
  16. 16. BorderPane FlowPane GridPane TilePane AnchorPane HBox VBox StackPane
  17. 17. • All new event structure and Handler • Working with convenience methods • Support Multi-Touch
  18. 18. 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 ...
  19. 19. 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
  20. 20. 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
  21. 21. final Ellipse oval = new Ellipse(100, 50); oval.setOnZoom(new EventHandler<ZoomEvent>() {...}); oval.setOnScroll(new EventHandler<ScrollEvent>() {...}); oval.setOnRotate(new EventHandler<RotateEvent>() {...});
  22. 22. • JavaBean Component architecture • Expanded JavaBean properties • In conjunction with Binding
  23. 23. 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
  24. 24. 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
  25. 25. 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);
  26. 26. Login.css .root  {          -­‐fx-­‐background-­‐image:  url("background.jpg"); } .label  {        ...        } #welcome-­‐text  {        ...        } #ac@ontarget  {        ...        } .buAon  {        ...        } .buAon:hover  {        ...        }
  27. 27. 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  {        ...        }
  28. 28. FXML • XML-based language • Separate UI from your code • Support localize • Support any JVM language
  29. 29. BorderPane border = new BorderPane(); Label topPaneText = new Label("Label - TOP"); border.setTop(topPaneText); Button centerPaneButton = new Button("Button - CENTER"); border.setCenter(centerPaneButton);
  30. 30. FXML <BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center> </BorderPane>
  31. 31. 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>
  32. 32. 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!"); } ... }
  33. 33. • UI Layout Tool • FXML Visual Editor • Integrated Developer Workflow • Preview Your Work • CSS support
  34. 34. ImageView TableView Button ListView Label, TextField and TextArea
  35. 35. • JavaFX ❖http://www.oracle.com/technetwork/java/javafx/ • NetBeans ❖http://netbeans.org/
  36. 36. 59
  37. 37. Thanks 甲骨文授權教育訓練中心 聯成電腦 張益裕
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×