• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to JavaFX
 

Introduction to JavaFX

on

  • 5,451 views

Introduction to the JavaFX 2.0 framework. ...

Introduction to the JavaFX 2.0 framework.

Topics:
About and History
Basic concepts
Minimal JavaFX Application

Teaching material for the course of "Tecniche di Programmazione" at Politecnico di Torino in year 2012/2013. More information: http://bit.ly/tecn-progr

Statistics

Views

Total Views
5,451
Views on SlideShare
1,752
Embed Views
3,699

Actions

Likes
0
Downloads
32
Comments
0

21 Embeds 3,699

http://aprendendo-javafx.blogspot.com.br 3571
http://aprendendo-javafx.blogspot.com 38
http://aprendendo-javafx.blogspot.pt 35
http://aprendendo-javafx.blogspot.mx 11
http://aprendendo-javafx.blogspot.ru 9
http://www.aprendendo-javafx.blogspot.com.br 5
http://aprendendo-javafx.blogspot.com.es 4
http://aprendendo-javafx.blogspot.de 4
http://translate.googleusercontent.com 3
http://webcache.googleusercontent.com 2
http://aprendendo-javafx.blogspot.in 2
http://cloud.feedly.com 2
http://aprendendo-javafx.blogspot.co.uk 2
http://aprendendo-javafx.blogspot.fr 2
http://aprendendo-javafx.blogspot.com.ar 2
http://aprendendo-javafx.blogspot.it 2
http://digg.com 1
http://3.bp.blogspot.com 1
http://aprendendo-javafx.blogspot.kr 1
http://aprendendo-javafx.blogspot.jp 1
http://aprendendo-javafx.blogspot.be 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to JavaFX Introduction to JavaFX Presentation Transcript

    • Introduction to JavaFXTecniche di Programmazione – A.A. 2012/2013
    • Summary1. About and History2. Basic concepts3. Minimal JavaFX Application4. Resources 2 Tecniche di programmazione A.A. 2012/2013
    • About and History Introduction to JavaFX
    • GUI in Java Graphic framework available in Java  Swing  Extremely powerful, many extensions available  Complex to master, requires low-level handling  Hard to create visually pleasing applications Alternatives available  Most notable: SWT (Eclipse)  Still cumbersome to master On a different Universe, web-based user interfaces became nicer and faster to create 4 Tecniche di programmazione A.A. 2012/2013
    • JavaFX 1.0 – forget it JavaFX 1 and JavaFX 2 are completely different Version 1 relied on a “scripting language” to describe scenes, with ‘hooks’ to activate Java code JavaFX 1.x is now deprecated 5 Tecniche di programmazione A.A. 2012/2013
    • JavaFX 2.x Redesigned from scratch The JavaFX 2.x framework is entirely written in Java For visual layout, an XML file may also be used (called FXML) Graphic appearance borrows from web-standard CSS style sheets UI programming is based on easy to handle events and bindings Oracle plans to deprecate Swing in favor of JavaFX 2 6 Tecniche di programmazione A.A. 2012/2013
    • Getting and running JavaFX JavaFX is already included in Oracle JDK 7  Not in JDK 6.x  Not in OpenJDK (beware, Linux users!) Recommended:  JavaFX Scene Builder  Eclipse: e(fx)clipse plugin, available in the Eclipse Marketplace Download links are in the course webpage 7 Tecniche di programmazione A.A. 2012/2013
    • Basic conceptsIntroduction to JavaFX
    • Key concepts in JavaFX  Stage: where the application will be displayed (e.g., a Windows’ window)  Scene: one container of Nodes that compose one “page” of your application  Node: an element in the Scene, with a visual appearance and an interactive behavior. Nodes may be hierarchically nestedMy best friend is the JavaFX JavaDoc APIhttp://docs.oracle.com/javafx/2/api/index.html 9 Tecniche di programmazione A.A. 2012/2013
    • Some Nodes (UI Form controls)10 Tecniche di programmazione A.A. 2012/2013
    • Some ‘Parent’ Nodes (Layout panes) BorderPane (5-areas) Hbox,Vbox (linear sequence) StackPane (overlay all children) GridPane (row x columns) FlowPane (flowing boxes, wrap around) TilePane (flowpane with equally sized boxes) AnchorPane (magnetically attach nodes at corners or sides) 11 Tecniche di programmazione A.A. 2012/2013
    • Some Nodes (Charts)12 Tecniche di programmazione A.A. 2012/2013
    • ChoiceBox ColorPicker ComboBoxBase ButtonNodes family ComboBox CheckBox ButtonBase MenuButton Cell Labeled ToggleButton Label ListView TitledPane Control MenuBar Group Separator Slider TabPane TextArea TextInputControl Parent TextField ToolBar AnchorPane TreeView BorderPane Axis FlowPane Region Chart GridPane WebView Pane HBox javafx.scene.Node Focus on Arc StackPane Panes Circle TilePane and Line VBox Controls Shape Polygon Canvas Polyline Imageview Rectangle Text13 Tecniche di programmazione A.A. 2012/2013
    • And more coming…14 Tecniche di programmazione A.A. 2012/2013
    • Empty JavaFX windowpublic class Main extends Application { @Override public void start(Stage stage) { Group root = new Group(); // the root is Group or Pane Scene scene = new Scene(root, 500, 500, Color.BLACK); stage.setTitle("JavaFX Demo"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); }}15 Tecniche di programmazione A.A. 2012/2013
    • Adding some shapepublic class Main extends Application { @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root, 500, 500, Color.BLACK); stage.setTitle("JavaFX Demo"); Rectangle r = new Rectangle(25,25,250,250); r.setFill(Color.BLUE); root.getChildren().add(r); stage.setScene(scene); stage.show(); }}16 Tecniche di programmazione A.A. 2012/2013
    • How to add scene content In Java code  By creating and adding new Node subclasses  Standard way, in Java (boring and error-prone)  By using node Builder classes  Programming pattern, later on… In FXML  By writing XML directly  By using the Scene Editor  And loading the FXML into the application 17 Tecniche di programmazione A.A. 2012/2013
    • JavaFX Scene Builder18 Tecniche di programmazione A.A. 2012/2013
    • FXML fragment. . .<HBox id="HBox" alignment="CENTER" spacing="15.0"AnchorPane.rightAnchor="23.0" AnchorPane.topAnchor="22.0"> <children> <Button id="button1" fx:id="newIssue" onAction="#newIssueFired“ text="New" /> <Button id="button1" fx:id="saveIssue" onAction="#saveIssueFired“ text="Save" /> <Button id="button1" fx:id="deleteIssue" onAction="#deleteIssueFired" text="Delete" /> </children></HBox><ImageView id="IssueTrackingLite" layoutX="14.0" layoutY="20.0"> <image> <Image url="@IssueTrackingLite.png" preserveRatio="true" smooth="true" /> </image></ImageView>. . . 19 Tecniche di programmazione A.A. 2012/2013
    • Building a scene from FXML public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load( getClass().getResource("circle.fxml")); stage.setTitle("Circle Demo"); stage.setScene(new Scene(root, 500, 150)); stage.show(); }20 Tecniche di programmazione A.A. 2012/2013
    • ResourcesIntroduction to JavaFX
    • Resources Official  http://www.oracle.com/us/technologies/java/fx/overview/index. html  http://www.oracle.com/technetwork/java/javafx/overview/index .html Documents  http://docs.oracle.com/javafx/  http://docs.oracle.com/javafx/2/api/index.html Blogs  http://fxexperience.com/  http://www.learnjavafx.typepad.com/weblog/  http://community.java.net/community/javafx 22 Tecniche di programmazione A.A. 2012/2013
    • Licenza d’uso Queste diapositive sono distribuite con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo (CC BY-NC-SA)” Sei libero:  di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questopera  di modificare questopera Alle seguenti condizioni:  Attribuzione — Devi attribuire la paternità dellopera agli autori originali e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi lopera.  Non commerciale — Non puoi usare questopera per fini commerciali.  Condividi allo stesso modo — Se alteri o trasformi questopera, o se la usi per crearne unaltra, puoi distribuire lopera risultante solo con una licenza identica o equivalente a questa. http://creativecommons.org/licenses/by-nc-sa/3.0/ 23 Tecniche di programmazione A.A. 2012/2013