JavaFX2

JavaFX2.0 tutorial, introduction

JavaFX 2.0

JavaFX 2.0 is the next step in the evolution of Java as a rich client platform. It is designed to provide a lightweight, hardware-accelerated Java UI platform for enterprise and business applications.

Is JavaFX replacing Swing as the new client UI library for Java SE?

Yes and no. Swing will remain part of the Java SE specification for the foreseeable future, and is included in the JRE. On one hand, Swing is widely used in existing Java desktop applications, but relies on an old architecture, which requires a certain level of expertise and specialization. On the other hand, JavaFX features a set of modern UI controls that can be skinned using standard CSS techniques. While we recommend developers to leverage JavaFX APIs as much as possible when building new applications, it is possible to use Swing and JavaFX within the same application, allowing developers to extend existing Swing applications.

Does JavaFX 2.0 support JavaFX Script?

Starting with JavaFX 2.0, JavaFX Script is no longer supported. However, you can use other scripting languages that run on the JVM, such as Groovy or Scala, if you prefer to use a declarative language.

What platforms are supported by JavaFX?

  • JavaFX 2.0 is currently (Aug 2011) available on 32-bit and 64-bit versions of Microsoft Windows XP, Windows Vista, and Windows 7.
  • A developer preview of JavaFX 2.0 for Mac OS X is available for download on the Oracle Technology Network. It is expected to reach General Availability in the first half of 2012.
  • The Linux version of JavaFX 2.0 will follow, with a General Availability expected in the second half of 2012.

Download and Installation (Windows)

Download from here .

Install JavaFX2.0 JDK to Directory: C:\Program Files\Oracle\JavaFX 2.0 SDK

Instal Java 7  JDK  to Directory: C:\Program Files\Java\jdk1.7.0

After installation,  there are no more javafxc and javafx in C:\Program Files\Oracle\JavaFX 2.0 SDK\bin. There is only javafxpackager (old javafxpackager for 1.3)left with us. However, since JAVAFX 2.0 is fully integrated into Java as another API, javac and java are the replacement of javafxc and javafx.

Good document for JAVAFX 2.0 is here. Deployment Guide is here.

Get Started

1. set up the environment, such as

set PATH=%PATH%;C:\Program Files\Java\jdk1.7.0\bin;C:\Program Files\Oracle\JavaFX 2.0 SDK\bin;.
set CLASSPATH=C:\Program Files\Java\jdk1.7.0\jre\lib;C:\Program Files\Java\jdk1.7.0\jre\lib\ext;C:\Program Files\Java\jdk1.7.0\lib;C:\Program Files\Java\jdk1.7.0\db\lib;C:\Program Files\Oracle\JavaFX Runtime 2.0\lib;.

2. notepad FirstApp.java

3. compile:    javac -cp “c:\progra~1\oracle\javafx runtime 2.0\lib\jfxrt.jar” FirstApp.java

4. execute:    java -cp “c:\progra~1\oracle\javafx runtime 2.0\lib\jfxrt.jar”;. FirstApp

what happen

The entry point for JavaFX applications is the Application class (javafx.application.Application) which extends java.lang.Object. The JavaFX runtime does the following, in order, whenever an application is launched:

  • Constructs an instance of the specified Application class
  • Calls the init() method
  • Calls the start(javafx.stage.Stage) method
  • Waits for the application to finish, which happens either when the last window has been closed, or the application calls Platform.exit()
  • Calls the stop() method

Note that the start method is abstract and must be overridden. The init and stop methods have concrete implementations that do nothing.

Two ways to launch the Application class from Java:

 public static void main(String[] args) {
     Application.launch(FirstApp.class, args);
 }

or
 public static void main(String[] args) {
     Application.launch(args);
 }

Using javafxpackager (the lazy way)

1. alway put the source file in .\src           

                mkdir \test\src\javafxtest

                cd \test\src\

2. create your program using any editor

notepad Javafxtest.java

3. package the project using javafxpackager as below. It will compile (create jar) and deploy your project into project->dist directory structure

cd \test

javafxpackager -makeall -appclass javafxtest.Javafxtest -name “Javafx Test” -width 800 -height 600 -v

4. you can test your program by running \test\dist\dist.jar or browsing \test\dist\dist.html from your browser.

Exploring more…

  1. A basic application frame:  to demostrate very basic application framework of javafx2.0: the scene graph is the starting point of the application. It is a hierarchical tree of nodes that represents all of the visual elements of the application’s user interface. It can handle input and can be rendered. In this application, it has stage (window) -> scene (frame) -> objects in tree group (GUI objects will be presented in next few examples).
  2. Draw a first object (a rectangle): to draw a rectangle into the tree. The individual items held within the JavaFX scene graph are known as nodes. Each node is classified as either a branch node (meaning that it can have children), or a leaf node (meaning that it cannot have children). The first node in the tree is always called the root node, and it never has a parent.The javafx.scenepackage defines more than a dozen classes, but three in particular are most important when it comes to learning how the API is structured:
    • Node: The abstract base class for all scene graph nodes.  The leaf node classes are defined throughout a number of additional packages, such as javafx.scene.shape and javafx.scene.text.
    • Parent: The abstract base class for all branch nodes. (This class directly extends Node), such as Control, Group, Region, and WebView
    • Scene: The base container class for all content in the scene graph. These base classes define important functionality that will subsequently be inherited by subclasses, including paint order, visibility, composition of transformations, support for CSS styling, and so on.
  3. Animate the rectangle: Because the graphical objects are managed by the scene graph, we can achieve some interesting effects with very little extra code. For example, you could easily animate the rectangle to bounce back and forth across the screen while rotating, changing its size, and transitioning its color from red to blue.
  4. Animate the rectangle by using TransitionBuilder: We can achieve the same effect by using TransitionBuilder.
  5. Draw a border layout: The BorderPane layout pane provides five regions in which to place nodes: top, bottom, left, right, and center.
  6. Draw a HBox:The HBox layout pane provides an easy way for arranging a series of nodes in a single row. In this example, I put two buttons on a HBox on top of a Border Pane.
  7. Draw a VBox: The VBox layout pane is similar to the HBox layout pane, except that the nodes are arranged in a single column.
  8. Draw a StackPane: The StackPane layout pane places all of the nodes within a single stack with each new node added on top of the previous node. This layout model provides an easy way to overlay text on a shape or image or to overlap common shapes to create a complex shape. This example shows a help icon that is created by stacking a question mark on top of a rectangle with a gradient background.
  9. Draw a GridPane: The GridPane layout pane enables you to create a flexible grid of rows and columns in which to lay out nodes. Nodes can be placed in any cell in the grid and can span cells as needed. A grid pane is useful for creating forms or any layout that is organized in rows and columns. The example shows a grid pane that contains an icon, title, subtitle, text and a pie chart. Use whatever images / graphics to replace them.
  10. Draw a FlowPane: The nodes within a FlowPane layout pane are laid out consecutively and wrap at the boundary set for the pane. Nodes can flow vertically (in columns) or horizontally (in rows). A vertical flow pane wraps at the height boundary for the pane. A horizontal flow pane wraps at the width boundary for the pane.  The example limits one node per column and as a result, the icon image will be flow vertically.
  11. Draw a TilePane: A tile pane is similar to a flow pane. The TilePane layout pane places all of the nodes in a grid in which each cell, or tile, is the same size. Nodes can be laid out horizontally (in rows) or vertically (in columns). Horizontal tiling wraps the tiles at the tile pane’s width boundary and vertical tiling wraps them at the height boundary. Use the prefColumns and prefRows properties to establish the preferred size of the tile pane.
  12. DrawAll: put the all objects from 5 to 11 together and also explore the AnchorPane.  The AnchorPane layout pane enables you to anchor nodes to the top, bottom, left side, right side, or center of the pane. As the window is resized, the nodes maintain their position relative to their anchor point. Nodes can be anchored to more than one position and more than one node can be anchored to the same position.
  13. Animate An OK Button: Because UI controls from the javafx.scene.control package are all extensions of the Node class, they can be integrated with the scene graph rendering, animation, transformations, and animated transitions. Consider the task of creating a button, applying a reflection to it, and animating the button by altering its opacity from its maximum value to its minimum value. The example creates and starts an indefinite timeline, where within a key frame of 600 milliseconds the button’s opacity changes from its default value (1.0) to 0.0. The setAutoReverse method enables the reverse order.
  14. Display Text: It shows how to manipulate the text effect: rotate, zoom, move, and display other effects of  the text.
  15. KeyEventTest.java: It demonstrates three typical key events, and viewlists.
  16. CursorTest.java: It shows all different cursors.
  17. AccordionTest.java: It tests the Accordion Control in JavaFX20.
  18. MouseEventsTest.java:It tests various mouse events.
  19. TabTest.java: shows how to create tabs in JavaFX.

Some basic Java Samples

Java Basic and Java Notes by Fred Swartz

 

18 Responses to JavaFX2

  1. henry416 says:

    Javafxtest.java
    ——————-
    /*
    * First JavaFX Program to demostrate very basic program structure
    * To compile and deploy:
    * javafxpackager -makeall -appclass javafxtest.Javafxtest -name “Javafx Test” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */
    package javafxtest;

    import javafx.application.Application;
    import javafx.stage.Stage;

    public class Javafxtest extends Application {
    public static void main(String[] args) {
    launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
    primaryStage.show();
    }
    }

  2. henry416 says:

    Appframework.java
    ————————-
    /*
    * Second Program to demostrate very basic application framework of javafx2.0
    * stage (window) -> scene (frame) -> objects in tree group (GUI objects)
    * To compile and deploy:
    * javafxpackager -makeall -appclass appframework.Appframework -name “Application Framework Test” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */
    package appframework;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;

    public class Appframework extends Application {

    @Override
    public void start(Stage stage) {
    // group tree: root
    Group root = new Group();
    // a scene
    Scene scene = new Scene(root, 500, 500, Color.WHITE);
    // window title
    stage.setTitle(“JavaFX Application Framework Demo”);
    // set scene on window
    stage.setScene(scene);
    // show the window
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  3. henry416 says:

    /*
    * A Program to draw a rectangle
    * stage (window) -> scene (frame) -> objects in tree group (First object: rectangle)
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawrectangle.Drawrectangle -name “Draw a rectangle” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */

    package drawrectangle;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Rectangle;
    import javafx.stage.Stage;

    public class Drawrectangle extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root, 500, 500, Color.WHITE);

    Rectangle r = new Rectangle(25,25,250,250);
    r.setFill(Color.RED);
    // add the rectangle as a child
    root.getChildren().add(r);

    stage.setTitle(“Draw a rectangle”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  4. henry416 says:

    /*
    * File: AnimatedRectangle.java
    * A Program to move a rectangle
    * move, rotate, change colour
    * To compile and deploy:
    * javafxpackager -makeall -appclass animatedRectangle.AnimatedRectangle -name “Animated a rectangle” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */

    package animatedRectangle;

    import javafx.animation.FillTransition;
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Rectangle;
    import javafx.stage.Stage;
    import javafx.animation.Timeline;
    import javafx.animation.ParallelTransition;
    import javafx.animation.RotateTransition;
    import javafx.animation.ScaleTransition;
    import javafx.animation.TranslateTransition;
    import javafx.util.Duration;

    public class AnimatedRectangle extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root, 500, 500, Color.WHITE);
    Rectangle r = new Rectangle(0, 0, 250, 250);
    r.setFill(Color.RED);
    root.getChildren().add(r);

    TranslateTransition translate =
    new TranslateTransition(Duration.millis(750));
    translate.setToX(390);
    translate.setToY(390);

    FillTransition fill = new FillTransition(Duration.millis(750));
    fill.setToValue(Color.BLUE);

    RotateTransition rotate = new RotateTransition(Duration.millis(750));
    rotate.setToAngle(360);

    ScaleTransition scale = new ScaleTransition(Duration.millis(750));
    scale.setToX(0.1);
    scale.setToY(0.1);

    ParallelTransition transition = new ParallelTransition(r,
    translate, fill, rotate, scale);
    transition.setCycleCount(Timeline.INDEFINITE);
    transition.setAutoReverse(true);
    transition.play();

    stage.setTitle(“Animated A Rectangle”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  5. henry416 says:

    /*
    * File: builderAnimatedRectangle.java
    * A Program to move a rectangle by using TransitionBuilder
    * move, rotate, change colour, change size
    * To compile and deploy:
    * javafxpackager -makeall -appclass builderAnimatedRectangle.BuilderAnimatedRectangle -name “Animated a rectangle” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */

    package builderAnimatedRectangle;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Rectangle;
    import javafx.stage.Stage;
    import javafx.animation.Timeline;
    import javafx.animation.ParallelTransition;
    import javafx.animation.FillTransitionBuilder;
    import javafx.animation.RotateTransitionBuilder;
    import javafx.animation.ScaleTransitionBuilder;
    import javafx.animation.TranslateTransitionBuilder;
    import javafx.util.Duration;

    public class BuilderAnimatedRectangle extends Application {

    @Override
    public void start(Stage stage) {

    Group root = new Group();
    Scene scene = new Scene(root, 500, 500, Color.WHITE);
    Rectangle r = new Rectangle(0, 0, 250, 250);
    r.setFill(Color.RED);
    root.getChildren().add(r);

    ParallelTransition transition = new ParallelTransition(r,
    TranslateTransitionBuilder.create()
    .duration(Duration.millis(750))
    .toX(390)
    .toY(390)
    .build(),
    FillTransitionBuilder.create()
    .duration(Duration.millis(750))
    .toValue(Color.BLUE)
    .build(),
    RotateTransitionBuilder.create()
    .duration(Duration.millis(750))
    .toAngle(360)
    .build(),
    ScaleTransitionBuilder.create()
    .duration(Duration.millis(750))
    .toX(0.1)
    .toY(0.1)
    .build());
    transition.setCycleCount(Timeline.INDEFINITE);
    transition.setAutoReverse(true);
    transition.play();
    stage.setTitle(“Animate A Rectangle using TransitionBuilder”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  6. henry416 says:

    /*
    * File: Borderlayout.java
    * A Program to draw a rectangle
    * draw a border layout
    * To compile and deploy:
    * javafxpackager -makeall -appclass borderlayout.Borderlayout -name “Draw a BorderLayout” -v
    * Author: https://henry416.wordpress.com
    */

    package borderlayout;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.shape.Rectangle;
    import javafx.stage.Stage;

    public class Borderlayout extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,200,200, Color.WHITE);

    //BorderPane from javafx.scene.layout.BorderPane;
    BorderPane layout = new BorderPane();
    layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));
    layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));
    layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));
    layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));
    layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));

    // add the rectangle as a child
    root.getChildren().add(layout);

    stage.setTitle(“Create a Border Layout”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  7. henry416 says:

    /*
    * File: DrawHbox.java
    * A Program to draw a rectangle
    * draw a border layout
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawHbox.DrawHbox -name “Draw a HBox” -v
    * Author: https://henry416.wordpress.com
    */

    package drawHbox;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.scene.control.Button;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;

    public class DrawHbox extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,300,200,Color.WHITE);

    // create a Hbox
    HBox hbox = new HBox();
    hbox.setPadding(new Insets(15, 52, 15, 52));
    hbox.setSpacing(10);
    hbox.setStyle(“-fx-background-color: #336699”);

    // put two buttons on HBox
    Button button1 = new Button(“Add”);
    Button button2 = new Button(“Remove”);
    button1.setPrefSize(100, 20);
    button2.setPrefSize(100, 20);
    //button1.setMaxWidth(Double.MAX_VALUE);
    //button2.setMaxWidth(Double.MAX_VALUE);
    hbox.getChildren().addAll(button1, button2);

    // put HBox onto a border Pane
    BorderPane border = new BorderPane();
    border.setTop(hbox);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle(“Create a HBox”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  8. henry416 says:

    /*
    * File: DrawVbox.java
    * draw a Vbox
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawVbox.DrawVbox -name “Draw a VBox” -v
    * Author: https://henry416.wordpress.com
    */

    package drawVbox;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.VBox;
    import javafx.scene.control.Button;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.text.Text;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;

    public class DrawVbox extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,300,200,Color.WHITE);

    // create a VBox
    VBox vbox = new VBox();
    vbox.setPadding(new Insets(10, 10, 10, 10));
    vbox.setSpacing(10);

    // create a title, add it into vbox
    Text title = new Text(“Data”);
    title.setFont(Font.font(“Amble CN”, FontWeight.BOLD, 14));
    vbox.getChildren().add(title);

    // more text in an array, add them into vbox
    Text options[] = new Text[] {
    new Text(” Finance”),
    new Text(” Marketing”),
    new Text(” Distribution”),
    new Text(” Corporate”)};

    for (int i=0; i<4; i++) {
    vbox.getChildren().add(options[i]);
    }

    // put VBox onto a border Pane
    BorderPane border = new BorderPane();
    border.setLeft(vbox);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle("Create a VBox");
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  9. henry416 says:

    /*
    * File: DrawStackPane.java
    * draw a stackpane with a help Icon / Text
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawStackPane.DrawStackPane -name “Draw a StackPane” -v
    * Author: https://henry416.wordpress.com
    */

    package drawStackPane;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.StackPane;
    import javafx.scene.shape.Rectangle;
    import javafx.scene.paint.LinearGradient;
    import javafx.scene.paint.Stop;
    import javafx.scene.text.Text;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.scene.paint.CycleMethod;
    import javafx.geometry.Pos;
    import javafx.scene.layout.Priority;

    public class DrawStackPane extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,330,200,Color.WHITE);

    // create a Hbox
    HBox hbox = new HBox();
    hbox.setPadding(new Insets(15, 150, 15, 150));
    hbox.setSpacing(10);
    hbox.setStyle(“-fx-background-color: #336699”);

    // create a stackpane, and add to the HBox
    StackPane stack = new StackPane();
    Rectangle helpIcon = new Rectangle(35.0, 25.0);
    helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,
    new Stop[]{
    new Stop(0,Color.web(“#4977A3”)),
    new Stop(0.5, Color.web(“#B0C6DA”)),
    new Stop(1,Color.web(“#9CB6CF”)),}));
    helpIcon.setStroke(Color.web(“#D0E6FA”));
    helpIcon.setArcHeight(3.5);
    helpIcon.setArcWidth(3.5);

    Text helpText = new Text(“? “);
    helpText.setFont(Font.font(“Amble Cn”, FontWeight.BOLD, 18));
    helpText.setFill(Color.WHITE);
    helpText.setStroke(Color.web(“#7080A0”));

    stack.getChildren().addAll(helpIcon, helpText);
    stack.setAlignment(Pos.CENTER_RIGHT); // Right-justify nodes in stack

    HBox.setHgrow(stack, Priority.ALWAYS); // Give stack any extra space
    hbox.getChildren().add(stack);

    // put HBox onto a border Pane
    BorderPane border = new BorderPane();
    border.setTop(hbox);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle(“Create a StackPane”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  10. henry416 says:

    /*
    * File: DrawGridPane.java
    * Download http://www.iconfinder.com/icondetails/65796/128/building_home_house_traditional_icon and save as graphics/3DHouse.png
    * Download http://www.psdgraphics.com/icons/3d-pie-chart/ and save as graphics/3d_pie_chart.jpg
    *
    * draw a gridpane
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawGridPane.DrawGridPane -name “Draw a GridPane” -v

    * Author: https://henry416.wordpress.com
    */

    package drawGridPane;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.GridPane;
    import javafx.scene.text.Text;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.scene.image.ImageView;
    import javafx.scene.image.Image;
    import javafx.geometry.VPos;

    public class DrawGridPane extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,600,600,Color.WHITE);

    // create a GridPane
    GridPane grid = new GridPane();
    grid.setHgap(10);
    grid.setVgap(10);
    grid.setPadding(new Insets(0, 0, 0, 10));

    // Category in column 2, row 1
    Text category = new Text(“Sales:”);
    category.setFont(Font.font(“Tahoma”, FontWeight.BOLD, 20));
    grid.add(category, 1, 0);

    // Title in column 3, row 1
    Text chartTitle = new Text(“Sales Breakdown”);
    chartTitle.setFont(Font.font(“Tahoma”, FontWeight.BOLD, 20));
    grid.add(chartTitle, 2, 0);

    // Subtitle in columns 2-3, row 2
    Text chartSubtitle = new Text(“Goods and Services”);
    grid.add(chartSubtitle, 1, 1, 2, 1);

    // House icon in column 1, rows 1-2, the size of image 100×100
    ImageView imageHouse = new ImageView(
    new Image(“graphics/3DHouse.png”, 100, 100, false, false));
    grid.add(imageHouse, 0, 0, 1, 2);

    // Left label in column 1 (bottom), row 3
    Text goodsPercent = new Text(“Goods\n80%”);
    GridPane.setValignment(goodsPercent, VPos.BOTTOM);
    grid.add(goodsPercent, 0, 2);

    // Chart in columns 2-3, row 3, the size of image 400×400
    ImageView imageChart = new ImageView(
    new Image(“graphics/3d_pie_chart.jpg”, 400, 400, false, false));
    grid.add(imageChart, 1, 2, 2, 1);

    // Right label in column 4 (top), row 3
    Text servicesPercent = new Text(“Services\n20%”);
    GridPane.setValignment(servicesPercent, VPos.TOP);
    grid.add(servicesPercent, 3, 2);

    // put GridPane onto a border Pane
    BorderPane border = new BorderPane();
    border.setCenter(grid);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle(“Create a GridPane”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  11. henry416 says:

    /*
    * File: DrawFlowPane.java
    * Download 8 chart png image from http://findicons.com/search/chart and save them as graphics/chart_0.png … chart_7.png
    *
    * draw a gridpane
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawFlowPane.DrawFlowPane -name “Draw a FlowPane” -v

    * Author: https://henry416.wordpress.com
    */

    package drawFlowPane;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.FlowPane;
    import javafx.scene.image.ImageView;
    import javafx.scene.image.Image;

    public class DrawFlowPane extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,400,400,Color.WHITE);

    FlowPane flow = new FlowPane();
    flow.setPadding(new Insets(5, 0, 5, 0));
    flow.setVgap(4);
    flow.setHgap(4);
    flow.setPrefWrapLength(50); // preferred width allows for ONE columns
    flow.setStyle(“-fx-background-color: DAE6F3”);

    ImageView pages[] = new ImageView[8];
    for (int i=0; i<8; i++) {
    pages[i] = new ImageView(
    new Image("graphics/chart_"+i+".png", 40, 40, false, false));
    flow.getChildren().add(pages[i]);
    }

    // put FlowPane onto a border Pane
    BorderPane border = new BorderPane();
    border.setLeft(flow);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle("Create a FlowPane");
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  12. henry416 says:

    /*
    * File: DrawTilePane.java
    * Download 8 chart png image from http://findicons.com/search/chart and save them as graphics/chart_0.png … chart_7.png
    *
    * draw a TilePane
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawTilePane.DrawTilePane -name “Draw a TilePane” -v

    * Author: https://henry416.wordpress.com
    */

    package drawTilePane;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.TilePane;
    import javafx.scene.image.ImageView;
    import javafx.scene.image.Image;

    public class DrawTilePane extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,400,250,Color.WHITE);

    // create a TilePane
    TilePane tile = new TilePane();
    tile.setPadding(new Insets(5, 5, 5, 5));
    tile.setVgap(4);
    tile.setHgap(4);
    tile.setPrefColumns(2);
    tile.setPrefRows(4);
    tile.setStyle(“-fx-background-color: DAE6F3”);

    // plot the images
    ImageView pages[] = new ImageView[8];
    for (int i=0; i<8; i++) {
    pages[i] = new ImageView(
    new Image("graphics/chart_"+i+".png", 50, 50, false, false));
    tile.getChildren().add(pages[i]);
    }

    // put FlowPane onto a border Pane
    BorderPane border = new BorderPane();
    border.setTop(tile);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle("Create a TilePane");
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  13. henry416 says:

    /*
    * File: DrawAll.java
    * draw all objects layer by layer
    * Download 8 chart png image from http://findicons.com/search/chart and save them as graphics/chart_0.png … chart_7.png
    * To compile and deploy:
    * javafxpackager -makeall -appclass drawAll.DrawAll -name “Draw All Objects Using Anchor” -v
    * Author: https://henry416.wordpress.com
    */

    package drawAll;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    import javafx.scene.control.Button;
    import javafx.geometry.Insets;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.GridPane;
    import javafx.scene.layout.AnchorPane;
    import javafx.scene.text.Text;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.scene.image.ImageView;
    import javafx.scene.image.Image;
    import javafx.geometry.VPos;
    import javafx.scene.layout.TilePane;

    public class DrawAll extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,420,490,Color.WHITE);

    /***********************
    * create a top Hbox *
    ************************/
    HBox hbox1 = new HBox();
    hbox1.setPadding(new Insets(15, 52, 15, 52));
    hbox1.setSpacing(10);
    hbox1.setStyle(“-fx-background-color: #336699”);

    /***********************
    * create anchorpane *
    ************************/
    AnchorPane anchorpane = new AnchorPane();

    // put two buttons on HBox
    Button button1 = new Button(“Add”);
    Button button2 = new Button(“Remove”);
    button1.setPrefSize(100, 20);
    button2.setPrefSize(100, 20);
    //button1.setMaxWidth(Double.MAX_VALUE);
    //button2.setMaxWidth(Double.MAX_VALUE);
    hbox1.getChildren().addAll(button1, button2);

    /****************************************
    * create a hbox for another two buttons *
    *****************************************/
    Button buttonSave = new Button(“Save”);
    Button buttonCancel = new Button(“Cancel”);
    HBox hbox = new HBox();
    hbox.setPadding(new Insets(0, 10, 10, 10));
    hbox.setSpacing(10);
    hbox.getChildren().addAll(buttonSave, buttonCancel);

    /**********************
    * create a GridPane *
    ***********************/
    GridPane grid = new GridPane();
    grid.setHgap(10);
    grid.setVgap(10);
    grid.setPadding(new Insets(0, 0, 0, 10));

    // Category in column 2, row 1
    Text category = new Text(“Sales:”);
    category.setFont(Font.font(“Tahoma”, FontWeight.BOLD, 20));
    grid.add(category, 1, 0);

    // Title in column 3, row 1
    Text chartTitle = new Text(“Sales Breakdown”);
    chartTitle.setFont(Font.font(“Tahoma”, FontWeight.BOLD, 20));
    grid.add(chartTitle, 2, 0);

    // Subtitle in columns 2-3, row 2
    Text chartSubtitle = new Text(“Goods and Services”);
    grid.add(chartSubtitle, 1, 1, 2, 1);

    // House icon in column 1, rows 1-2, the size of image 100×100
    ImageView imageHouse = new ImageView(
    new Image(“graphics/3DHouse.png”, 50, 50, false, false));
    grid.add(imageHouse, 0, 0, 1, 2);

    // Left label in column 1 (bottom), row 3
    Text goodsPercent = new Text(“Goods\n80%”);
    GridPane.setValignment(goodsPercent, VPos.BOTTOM);
    grid.add(goodsPercent, 0, 2);

    // Chart in columns 2-3, row 3, the size of image 200×200
    ImageView imageChart = new ImageView(
    new Image(“graphics/3d_pie_chart.jpg”, 200, 200, false, false));
    grid.add(imageChart, 1, 2, 2, 1);

    // Right label in column 4 (top), row 3
    Text servicesPercent = new Text(“Services\n20%”);
    GridPane.setValignment(servicesPercent, VPos.TOP);
    grid.add(servicesPercent, 3, 2);

    // Add grid into hbox within anchorpanel
    anchorpane.getChildren().addAll(hbox1,grid,hbox);
    AnchorPane.setTopAnchor(hbox1, 0.0);
    AnchorPane.setRightAnchor(hbox1, 0.0);
    AnchorPane.setBottomAnchor(hbox, 8.0);
    AnchorPane.setRightAnchor(hbox, 5.0);
    AnchorPane.setTopAnchor(grid, 10.0);

    /********************
    * create a TilePane *
    *********************/
    TilePane tile = new TilePane();
    tile.setPadding(new Insets(5, 5, 5, 5));
    tile.setVgap(4);
    tile.setHgap(4);
    tile.setPrefColumns(1);
    tile.setPrefRows(4);
    tile.setStyle(“-fx-background-color: DAE6F3”);

    // plot the images
    ImageView pages[] = new ImageView[8];
    for (int i=0; i<8; i++) {
    pages[i] = new ImageView(
    new Image("graphics/chart_"+i+".png", 50, 50, false, false));
    tile.getChildren().add(pages[i]);
    }

    // put HBox onto a border Pane
    BorderPane border = new BorderPane();
    border.setTop(hbox1);
    border.setCenter(anchorpane);
    border.setRight(tile);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle("Draw all objects");
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  14. henry416 says:

    /*
    * File: GUIButtonAnimation.java
    * Animate An OK Button
    * To compile and deploy:
    * javafxpackager -makeall -appclass gUIButtonAnimation.GUIButtonAnimation -name “GUI Button Animation” -v
    * Author: https://henry416.wordpress.com
    */

    package gUIButtonAnimation;

    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.scene.layout.HBox;
    //import javafx.scene.control.Button;
    import javafx.geometry.Insets;
    import javafx.scene.layout.BorderPane;

    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.util.Duration;
    import javafx.scene.control.Button;
    import javafx.scene.text.Font;
    import javafx.scene.effect.Reflection;

    public class GUIButtonAnimation extends Application {

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root,300,200,Color.BLACK);

    // create a Hbox
    HBox hbox = new HBox();
    hbox.setPadding(new Insets(70, 80, 50, 120));
    hbox.setSpacing(10);

    // Create An OK Button and make reflection
    Button button = new Button();
    button.setText(“OK”);
    button.setFont(new Font(“Tahoma”, 24));
    button.setEffect(new Reflection());

    // animation
    final Timeline timeline = new Timeline();
    timeline.setCycleCount(Timeline.INDEFINITE);
    timeline.setAutoReverse(true);
    final KeyValue kv = new KeyValue(button.opacityProperty(), 0);
    final KeyFrame kf = new KeyFrame(Duration.millis(600), kv);
    timeline.getKeyFrames().add(kf);
    timeline.play();

    // put button on hbox
    hbox.getChildren().addAll(button);

    // put HBox onto a border Pane
    BorderPane border = new BorderPane();
    border.setTop(hbox);

    // add the border pane as a child
    root.getChildren().add(border);

    stage.setTitle(“GUI Button Animation”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  15. henry416 says:

    /*
    * File: GUIFirstApp.java
    *
    * To compile and deploy:
    * javafxpackager -makeall -appclass gUIFirstApp.GUIFirstApp -name “First GUI App” -width 800 -height 600 -v
    * Author: https://henry416.wordpress.com
    */

    package gUIFirstApp;

    import javafx.application.Application;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.stage.Stage;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.geometry.Insets;
    import javafx.scene.layout.GridPane;
    import javafx.scene.control.Label;
    import javafx.scene.control.Button;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.scene.text.Text;

    public class GUIFirstApp extends Application {
    private int direction = 0;
    private double zoom = 1.0;
    private int move = 1;
    private int inc = 1;

    @Override
    public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root, 400, 400, Color.WHITE);

    // create a GridPane
    GridPane grid = new GridPane();
    grid.setHgap(20);
    grid.setVgap(20);
    grid.setPadding(new Insets(0, 0, 0, 10));

    // Category in column 4, row 4
    final Text txtOutput = new Text(“Hello”);
    txtOutput.setFont(Font.font(“Tahoma”, FontWeight.BOLD, 20));
    grid.add(txtOutput, 3, 3);

    // create a button
    Button btnRotate = new Button(“Rotate”);
    btnRotate.setOnAction(new EventHandler() {
    public void handle(ActionEvent event) {
    txtOutput.setRotate(direction);
    if (direction == 315)
    direction = 0;
    else
    direction = direction + 45;
    }
    });

    Button btnZoom = new Button(“Zoom”);
    btnZoom.setOnAction(new EventHandler() {
    public void handle(ActionEvent event) {
    txtOutput.setScaleX(zoom);
    txtOutput.setScaleY(zoom);

    if (zoom == 3.0)
    zoom = 1.0;
    else
    zoom = zoom + 0.5;
    }
    });

    Button btnMove = new Button(“Move”);
    btnMove.setOnAction(new EventHandler() {
    public void handle(ActionEvent event) {
    txtOutput.setTranslateX(move*20);

    if ((move == 6) || (move == -6))
    inc = -inc;
    move = move + inc;

    }
    });

    grid.add(btnRotate, 2, 15);
    grid.add(btnZoom, 3, 15);
    grid.add(btnMove, 4, 15);

    // add the rectangle as a child
    root.getChildren().add(grid);

    stage.setTitle(“First GUI App”);
    stage.setScene(scene);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }
    }

  16. Tom Jerry says:

    Hello admin, please help my project, i’m stuck.

    Database Mysql Xampp Java Fx 2.

    https://forums.oracle.com/forums/thread.jspa?threadID=2342886&tstart=1

    Thank you so much if you help me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s