Category: javafx

JavaFX – FlowPane Layout ”; Previous Next FlowPane Layout in JavaFX The flow pane layout arranges all of its nodes in a flow. In a horizontal Flow Pane, elements are wrapped based on their height, while in a vertical Flow Pane, elements are wrapped according to their width. In JavaFX, the class named FlowPane of the package javafx.scene.layout represents the Flow Pane. To create a flow pane layout within our JavaFX application, instantiate this class using any of the below constructor − FlowPane() − It constructs a new horizontal FlowPane layout. FlowPane(double hGap, double vGap) − It creates a new horizontal FlowPane layout with the specified hGap and vGap. FlowPane(double hGap, double vGap, Node childNodes) − Constructs a horizontal FlowPane layout with the specified hGap, vGap and nodes. FlowPane(Orientation orientation) − It creates a new FlowPane layout with the specified orientation. It can be either HORIZONTAL or VERTICAL. This class contains the following properties − S.No properties & Description 1 alignment This property represents the alignment of the contents of the Flow pane. We can set this property using the setter method setAllignment(). 2 columnHalignment This property represents the horizontal alignments of nodes in a vertical flow pane. 3 rowValignment This property represents the vertical alignment of nodes in a horizontal flow pane. 4 Hgap This property is of double type and it represents the horizontal gap between the rows/columns of a flow pane. 5 Orientation This property represents the orientation of a flow pane. 6 Vgap This property is of double type and it represents the vertical gap between the rows/columns of a flow pane. Example The following program is an example of the FlowPane layout. In this, we are inserting four button in the horizontal flow pane. Save this code in a file with the name FlowPaneExample.java. import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.FlowPane; import javafx.scene.shape.Sphere; import javafx.stage.Stage; public class FlowPaneExample extends Application { @Override public void start(Stage stage) { //Creating button1 Button button1 = new Button(“Button1”); //Creating button2 Button button2 = new Button(“Button2”); //Creating button3 Button button3 = new Button(“Button3”); //Creating button4 Button button4 = new Button(“Button4”); //Creating a Flow Pane FlowPane flowPane = new FlowPane(); //Setting the horizontal gap between the nodes flowPane.setHgap(25); //Setting the margin of the pane flowPane.setMargin(button1, new Insets(20, 0, 20, 20)); //Adding all the nodes to the flow pane flowPane.getChildren().addAll(button1, button2, button3, button4); //Creating a scene object Scene scene = new Scene(flowPane, 400, 300); //Setting title to the Stage stage.setTitle(“Flow Pane Example in JavaFX”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls FlowPaneExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls FlowPaneExample Output On executing, the above program generates a JavaFX window as shown below. Example In the following example, we are going to create a FlowPane with vertical orientation. To set the orientation, we will use the parameterized constructor of the FlowPane class by passing the Orientation.VERTICAL enum value as an argument. Save this code in a file with the name JavafxFlowpane.java. import javafx.application.Application; import javafx.geometry.Orientation; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.FlowPane; import javafx.scene.shape.Sphere; import javafx.stage.Stage; public class JavafxFlowpane extends Application { @Override public void start(Stage stage) { //Creating button1 Button button1 = new Button(“Button1”); //Creating button2 Button button2 = new Button(“Button2”); //Creating button3 Button button3 = new Button(“Button3”); //Creating button4 Button button4 = new Button(“Button4”); //Creating a Flow Pane FlowPane flowPane = new FlowPane(Orientation.VERTICAL); //Setting the horizontal gap between the nodes flowPane.setVgap(15); //Setting the margin of the pane flowPane.setAlignment(Pos.CENTER); //Adding all the nodes to the flow pane flowPane.getChildren().addAll(button1, button2, button3, button4); //Creating a scene object Scene scene = new Scene(flowPane, 400, 300); //Setting title to the Stage stage.setTitle(“Flow Pane Example in JavaFX”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } To compile and execute the saved java file from the command prompt, use the following commands − javac –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxFlowpane.java java –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxFlowpane Output When we execute the above Java program, it will generate a JavaFX window displaying the following output − Print Page Previous Next Advertisements ”;

JavaFX – TextField ”; Previous Next The text field is a graphical user interface component used to accept user input in the form of text. It is the most easiest way of interaction between system and user. We can find a textfield inside a form or dialog window as shown in the below figure − TextField in JavaFX In JavaFX, the TextField class represents the text field which is a part of the package named javafx.scene.control. Using this we can accept input from the user and read it to our application. This class inherits the TextInputControl which is the base class of all the text controls class. To create a text field, instantiate the TextField class using any of the below constructors − TextField() − This constructor will create an empty textfield. TextField(String str) − It is the parameterized constructor which constructs a textfield with the specified text. Note that in the latest versions of JavaFX, the TextField class accepts only a single line. Example In the following JavaFX program, we will create a hyperlink as a text. Save this code in a file with the name JavafxTextfield.java. import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.layout.HBox; import javafx.scene.paint.Color; import javafx.stage.Stage; public class JavafxTextfield extends Application { public void start(Stage stage) { //Creating nodes TextField textField1 = new TextField(“Enter your name”); TextField textField2 = new TextField(“Enter your e-mail”); //Creating labels Label label1 = new Label(“Name: “); Label label2 = new Label(“Email: “); //Adding labels for nodes HBox box = new HBox(5); box.setPadding(new Insets(25, 5 , 5, 50)); box.getChildren().addAll(label1, textField1, label2, textField2); //Setting the stage Scene scene = new Scene(box, 595, 150, Color.BEIGE); stage.setTitle(“Text Field Example”); stage.setScene(scene); stage.show(); } public static void main(String args[]){ launch(args); } } To compile and execute the saved Java file from the command prompt, use the following commands − javac –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxTextfield.java java –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxTextfield Output When we execute, the above program will generate the following output. Print Page Previous Next Advertisements ”;

JavaFX – Fill Transition ”; Previous Next In the colors section of this tutorial, we have learned that JavaFX nodes can be colored with various colors. However, we had only learned about coloring objects using setFill() method; we can also use animation to change the fill colors of a shape. This type of animation is known as Fill Transition. Fill transition is a type of transition that changes the color of a JavaFX node during a specified period. This transition is commonly used in applications to conduct quizzes: where the option turns “green” if the answer is correct and “red” otherwise. Fill Transition Fill Transition is performed on a JavaFX node using the FillTransition class which belongs to the javafx.animation package. This class contains various properties which can be used to setup the animation on an object. duration − The duration of this FillTransition. shape − The target shape of this FillTransition. fromValue − Specifies the start color value for this FillTransition. toValue − Specifies the stop color value for this FillTransition. Example Following is the program which demonstrates Fill Transition in JavaFX. Save this code in a file with the name FillTransitionExample.java. 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.Circle; import javafx.stage.Stage; import javafx.util.Duration; public class FillTransitionExample extends Application { @Override public void start(Stage stage) { //Drawing a Circle Circle circle = new Circle(); //Setting the position of the circle circle.setCenterX(300.0f); circle.setCenterY(135.0f); //Setting the radius of the circle circle.setRadius(100.0f); //Setting the color of the circle circle.setFill(Color.BROWN); //Setting the stroke width of the circle circle.setStrokeWidth(20); //Creating the fill Transition FillTransition fillTransition = new FillTransition(Duration.millis(1000)); //Setting the shape for Transition fillTransition.setShape(circle); //Setting the from value of the transition (color) fillTransition.setFromValue(Color.BLUEVIOLET); //Setting the toValue of the transition (color) fillTransition.setToValue(Color.CORAL); //Setting the cycle count for the transition fillTransition.setCycleCount(50); //Setting auto reverse value to false fillTransition.setAutoReverse(false); //Playing the animation fillTransition.play(); //Creating a Group object Group root = new Group(circle); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Setting title to the Stage stage.setTitle(“Fill transition example”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls FillTransitionExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls FillTransitionExample Output On executing, the above program generates a JavaFX window as shown below. Print Page Previous Next Advertisements ”;

JavaFX – Playing Video ”; Previous Next Video is a medium of visual communication. In our daily lives, we can observe its applications in various sectors such as the entertainment industry, news agencies, and educational platforms and many more. For example, we can see the YouTube video player in the below figure − Playing Video in JavaFX To play videos in JavaFX, we need to embed it within the application. There are different video formats available, out of which JavaFX supports only two namely MPEG-4(in short mp4) and FLV. Follow the steps given below to embed a video in JavaFX application − First, instantiate Media class of the package named javafx.scene.media by passing path of the video file. Next, create a MediaPlayer object by passing the Media object as a parameter value to its constructor.It will enable the media to be played in the JavaFX application. Then, instantiate MediaView class by passing the MediaPlayer object to its constructor as a parameter value. Doing so will allow JavaFX application to display the video. Lastly, create any layout pane and set the scene and stage with the desired dimension. Example The following JavaFX program demonstrates how to embed a Video into a JavaFX application. Save this code in a file with the name Javafx_Video.java. import java.io.File; import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.scene.media.Media; import javafx.scene.media.MediaPlayer; import javafx.scene.media.MediaView; import javafx.stage.Stage; public class Javafx_Video extends Application { @Override public void start(Stage stage) { // Passing the video file to the File object File videofile = new File(“sampleTP.mp4”); // creating a Media object from the File Object Media videomedia = new Media(videofile.toURI().toString()); // creating a MediaPlayer object from the Media Object MediaPlayer mdplayer = new MediaPlayer(videomedia); // creating a MediaView object from the MediaPlayer Object MediaView viewmedia = new MediaView(mdplayer); //setting the fit height and width of the media view viewmedia.setFitHeight(455); viewmedia.setFitWidth(500); // creating video controls using the buttons Button pause = new Button(“Pause”); Button resume = new Button(“Resume”); // creating an HBox HBox box = new HBox(20, pause, resume); box.setAlignment(Pos.CENTER); // function to handle play and pause buttons pause.setOnAction(act -> mdplayer.pause()); resume.setOnAction(act -> mdplayer.play()); // creating the root VBox root = new VBox(20); root.setAlignment(Pos.CENTER); root.getChildren().addAll(viewmedia, box); Scene scene = new Scene(root, 400, 400); stage.setScene(scene); stage.setTitle(“Example of Video in JavaFX”); stage.show(); } public static void main(String[] args) { launch(args); } } To compile and execute the saved Java file from the command prompt, use the following commands − javac –module-path %PATH_TO_FX% –add-modules javafx.controls,javafx.media Javafx_Video.java java –module-path %PATH_TO_FX% –add-modules javafx.controls,javafx.media Javafx_Video Output When we execute the above code, it will generate the following output. Print Page Previous Next Advertisements ”;

JavaFX – Layout Panes(Containers) ”; Previous Next After constructing all the required nodes in a scene, we generally arrange them in the desired order. The container in which we arrange the components is called the Layout of the container. We can also say that we followed a layout as it helps in placing all the components at a particular position within the container. Below is a diagram illustrating the positioning of JavaFX nodes in vertical and horizontal layout. In this tutorial, we are going to discuss various predefined layouts provided by JavaFX including HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel, and so on. Each of the above mentioned layout is represented by a class and all these classes belongs to the package named javafx.layout. The class named Pane is the base class of all the layouts in JavaFX. Creating a Layout To create a layout, we need to follow the given steps − Create node. Instantiate the respective class of the required layout. Set the properties of the layout. Add all the created nodes to the layout. Creating Nodes First of all, create the required nodes of the JavaFX application by instantiating their respective classes. For example, if we want to have a text field and two buttons namely, play and stop in a HBox layout, we will have to initially create those nodes as shown in the following code block − //Creating a text field TextField textField = new TextField(); //Creating the play button Button playButton = new Button(“Play”); //Creating the stop button Button stopButton = new Button(“stop”); Instantiating the Respective Class After creating the nodes (and completing all the operations on them), instantiate the class of the required layout. For example, if we want to create a Hbox layout, we need to instantiate this class as follows − HBox hbox = new HBox(); Setting the Properties of the Layout After instantiating the class, we need to set the properties of the layout using their respective setter methods. For instance − If we want to set space between the created nodes in the HBox layout, then we need to set value to the property named spacing. This can be done by using the setter method setSpacing() as shown below − hbox.setSpacing(10); Adding the node Objects to the Layout Pane Finally, we need to add the objects of the created nodes to the layout pane by passing them as a parameter value as shown below − //Creating a Group object hbox.getChildren().addAll(textField, playButton, stopButton); Layout Panes in JavaFX Following are the various Layout panes (classes) provided by JavaFX. These classes exist in the package javafx.scene.layout. S.No Layouts & Description 1 HBox The HBox layout arranges all the nodes in our application in a single horizontal row. The class named HBox of the package javafx.scene.layout represents the text horizontal box layout. 2 VBox The VBox layout arranges all the nodes in our application in a single vertical column. The class named VBox of the package javafx.scene.layout represents the text Vertical box layout. 3 BorderPane The Border Pane layout arranges the nodes in our application in top, left, right, bottom and center positions. The class named BorderPane of the package javafx.scene.layout represents the border pane layout. 4 StackPane The stack pane layout arranges the nodes in our application on top of another just like in a stack. The node added first is placed at the bottom of the stack and the next node is placed on top of it. The class named StackPane of the package javafx.scene.layout represents the stack pane layout. 5 TextFlow The Text Flow layout arranges multiple text nodes in a single flow. The class named TextFlow of the package javafx.scene.layout represents the text flow layout. 6 AnchorPane The Anchor pane layout anchors the nodes in our application at a particular distance from the pane. The class named AnchorPane of the package javafx.scene.layout represents the Anchor Pane layout. 7 TilePane The Tile Pane layout adds all the nodes of our application in the form of uniformly sized tiles. The class named TilePane of the package javafx.scene.layout represents the TilePane layout. 8 GridPane The Grid Pane layout arranges the nodes in our application as a grid of rows and columns. This layout comes handy while creating forms using JavaFX. The class named GridPane of the package javafx.scene.layout represents the GridPane layout. 9 FlowPane The flow pane layout wraps all the nodes in a flow. A horizontal flow pane wraps the elements of the pane at its height, while a vertical flow pane wraps the elements at its width. The class named FlowPane of the package javafx.scene.layout represents the Flow Pane layout. Print Page Previous Next Advertisements ”;

JavaFX – GridPane Layout ”; Previous Next GridPane Layout in JavaFX The GridPane is a type of layout container in which all the nodes are arranged in such a way that they form a grid of rows and columns. This layout comes handy while creating forms, charts, media galleries and so on. In JavaFX, the class named GridPane of the package javafx.scene.layout represents the GridPane layout. Instantiating this class using its default constructor will create a grid pane layout in our JavaFX application. This class provides the following properties − alignment − This property represents the alignment of the pane and you can set value of this property using the setAlignment() method. hgap − This property is of the type double and it represents the horizontal gap between columns. vgap − This property is of the type double and it represents the vertical gap between rows. gridLinesVisible − This property is of Boolean type. On true, the lines of the pane are set to be visible. Following table illustrates the cell positions in the grid pane of JavaFX. The first value of each cell represents row and second one column. (0, 0) (1, 0) (2, 0) (0, 1) (1, 1) (2, 1) (0, 2) (1, 2) (2, 2) Example The following program is an example of the grid pane layout. In this, we are creating a form using a Grid Pane. Save this code in a file with the name GridPaneExample.java. import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.GridPane; import javafx.scene.text.Text; import javafx.scene.control.TextField; import javafx.stage.Stage; public class GridPaneExample extends Application { @Override public void start(Stage stage) { //creating label email Text text1 = new Text(“Email”); //creating label password Text text2 = new Text(“Password”); //Creating Text Filed for email TextField textField1 = new TextField(); //Creating Text Filed for password TextField textField2 = new TextField(); //Creating Buttons Button button1 = new Button(“Submit”); Button button2 = new Button(“Clear”); //Creating a Grid Pane GridPane gridPane = new GridPane(); //Setting size for the pane gridPane.setMinSize(400, 200); //Setting the padding gridPane.setPadding(new Insets(10, 10, 10, 10)); //Setting the vertical and horizontal gaps between the columns gridPane.setVgap(5); gridPane.setHgap(5); //Setting the Grid alignment gridPane.setAlignment(Pos.CENTER); //Arranging all the nodes in the grid gridPane.add(text1, 0, 0); gridPane.add(textField1, 1, 0); gridPane.add(text2, 0, 1); gridPane.add(textField2, 1, 1); gridPane.add(button1, 0, 2); gridPane.add(button2, 1, 2); //Creating a scene object Scene scene = new Scene(gridPane, 400, 300); //Setting title to the Stage stage.setTitle(“Grid Pane Example in JavaFX”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } To compile and execute the saved java file from the command prompt, use the following commands − javac –module-path %PATH_TO_FX% –add-modules javafx.controls GridPaneExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls GridPaneExample Output On executing, the above program will generate a JavaFX window displaying a form built using GridPane layout. Print Page Previous Next Advertisements ”;

JavaFX – HBox Layout ”; Previous Next HBox Layout in JavaFX HBox, also referred to as Horizontal Box, is a layout pane that arranges all the nodes of a JavaFX application in a single horizontal row. The HBox layout pane is represented by a class named HBox of the package javafx.scene.layout. Instantiate this class to create an HBox layout. Constructors of HBox class is as follows − HBox() − It is the default constructor that constructs an HBox layout with 0 spacing. HBox(double spacingVal) − It constructs a new HBox layout with the specified spacing between nodes. HBox(double spacingVal, Node nodes) − This parameterized constructor of HBox class accepts children nodes as well as spacing between them and creates a new HBox layout with the specified components. HBox(Node nodes) − It creates an HBox layout with specified children nodes and 0 spacing. In the below snapshot, we can see the UI components inside the red box are placed within a horizontal layout − The HBox class has the following properties − alignment − This property represents the alignment of the nodes in the bounds of the HBox. We can set value to this property using the setter method setAlignment(). fillHeight − This property is of Boolean type and on setting this to true, the resizable nodes in the HBox are resized to the height of the HBox. We can set value to this property using the setter method setFillHeight(). spacing − This property is of double type and it represents the space between the children of the HBox. We can set value to this property using the setter method setSpacing(). padding − It represents the space between the border of HBox and its child nodes. We can set value to this property using the setter method setPadding() which accepts Insets constructor as a parameter value. In addition to these, HBox class also provides a couple of methods, which are as follows − S.No methods & Description 1 setHgrow() Sets the horizontal grow priority for the child when contained by an HBox. This method accepts a node and a priority value. The possible priority value could be Policy.ALWAYS, Policy.SOMETIMES and Policy.NEVER. 2 setMargin() Using this method, you can set margins to the HBox. This method accepts a node and an object of the Insets class (A set of inside offsets for the 4 side of a rectangular area). Example The following program is an example of the HBox layout. Here, we are inserting a text field and two buttons named as play and stop. Save this JavaFX code in a file with the name HBoxExample.java. import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextField; import javafx.stage.Stage; import javafx.scene.layout.HBox; public class HBoxExample extends Application { @Override public void start(Stage stage) { //creating a text field TextField textField = new TextField(); //Creating the play button Button playButton = new Button(“Play”); //Creating the stop button Button stopButton = new Button(“stop”); //Instantiating the HBox class HBox hbox = new HBox(); //Setting the space between the nodes of a HBox pane hbox.setSpacing(10); //Adding all the nodes to the HBox hbox.getChildren().addAll(textField, playButton, stopButton); //Setting the margin to the nodes hbox.setMargin(textField, new Insets(20, 20, 20, 20)); hbox.setMargin(playButton, new Insets(20, 20, 20, 20)); hbox.setMargin(stopButton, new Insets(20, 20, 20, 20)); //Creating a scene object Scene scene = new Scene(hbox, 400, 300); //Setting title to the Stage stage.setTitle(“Hbox Example in JavaFX”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls HBoxExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls HBoxExample Output On executing, the above program generates a JavaFX window as shown below. Example In the following example, we are going to use the parameterized constructor of the HBox class to create a horizontal layout. Save this JavaFX code in a file with the name HBoxExample.java. import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextField; import javafx.stage.Stage; import javafx.scene.layout.HBox; public class HBoxExample extends Application { @Override public void start(Stage stage) { //creating a text field TextField textField = new TextField(); //Creating the play button Button playButton = new Button(“Play”); //Creating the stop button Button stopButton = new Button(“stop”); //Instantiating the HBox class HBox box = new HBox(10, textField, playButton, stopButton); box.setAlignment( Pos.CENTER); //Creating a scene object Scene scene = new Scene(box, 400, 300); //Setting title to the Stage stage.setTitle(“Hbox Example in JavaFX”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls HBoxExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls HBoxExample Output On executing, the above program generates the following output. Print Page Previous Next Advertisements ”;

JavaFX – Scaling Transformation ”; Previous Next In the scaling transformation process, you either expand or compress the dimensions of the object. Scaling can be achieved by multiplying the original coordinates of the object with the scaling factor to get the desired result. Scaling Transformation in JavaFX In JavaFX, scaling transformation is used to change the size of an object. This is applied using the Scale class in the javafx.scene.transform package. The Scale class represents an Affine object that preserves the original nodes points, lines and parallelism. This object scales coordinates by certain factors. Let us see some examples demonstrating the scaling transformation in both 2D and 3D objects in JavaFX. Example 1 Following is the program which demonstrates scaling in JavaFX. Here, we are creating 2 circles (nodes) at the same location with the same dimensions, but with different colors (Burlywood and Blue). We are also applying scaling transformation on the circle with a blue color. Save this code in a file with the name ScalingExample.java. import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.transform.Scale; import javafx.stage.Stage; public class ScalingExample extends Application { @Override public void start(Stage stage) { //Drawing Circle1 Circle circle1 = new Circle(300, 135, 50); //Setting the color of the circle circle1.setFill(Color.BLUE); //Setting the stroke width of the circle circle1.setStrokeWidth(20); //Drawing Circle2 Circle circle2 = new Circle(300, 135, 50); //Setting the color of the circle circle2.setFill(Color.BURLYWOOD); //Setting the stroke width of the circle circle2.setStrokeWidth(20); //Creating the scale transformation Scale scale = new Scale(); //Setting the dimensions for the transformation scale.setX(1.5); scale.setY(1.5); //Setting the pivot point for the transformation scale.setPivotX(300); scale.setPivotY(135); //Adding the scale transformation to circle1 circle1.getTransforms().addAll(scale); //Creating a Group object Group root = new Group(circle1, circle2); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Setting title to the Stage stage.setTitle(“Scaling transformation example”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls ScalingExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls ScalingExample Output On executing, the above program generates a JavaFX window as shown below. Example 2 Now, let us try to apply the scaling transformation on a 3D object, say a sphere. Here, we will try to create two spheres: one in its original size and another one resized after applying scaling. Save this code in a file with the name ScalingExample3D.java. import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.shape.Sphere; import javafx.scene.transform.Scale; import javafx.stage.Stage; public class ScalingExample3D extends Application { @Override public void start(Stage stage) { //Drawing Sphere1 Sphere sphere1 = new Sphere(100); sphere1.setTranslateX(200); sphere1.setTranslateY(150); //Drawing Circle2 Sphere sphere2 = new Sphere(100); sphere2.setTranslateX(200); sphere2.setTranslateY(150); //Creating the scale transformation Scale scale = new Scale(); //Setting the dimensions for the transformation scale.setX(0.5); scale.setY(0.5); //Setting the pivot point for the transformation scale.setPivotX(300); scale.setPivotY(150); //Adding the scale transformation to circle1 sphere1.getTransforms().addAll(scale); //Creating a Group object Group root = new Group(sphere1, sphere2); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Setting title to the Stage stage.setTitle(“Scaling transformation example”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls ScalingExample3D.java java –module-path %PATH_TO_FX% –add-modules javafx.controls ScalingExample3D Output On executing, the above program generates a JavaFX window as shown below. Print Page Previous Next Advertisements ”;

JavaFX – TilePane Layout ”; Previous Next TilePane Layout in JavaFX In JavaFX, the TilePane is a layout component that arranges its child nodes in uniformly sized tiles, either horizontally or vertically. We can control the number of rows or columns, the gap between tiles, the alignment of the pane and the preferred size of each tile. The class named TilePane of the package javafx.scene.layout represents the TilePane. To create a TilePane, we can use any of the below constructors − TilePane() − It constructs a new horizontal TilePane layout. TilePane(double hGap, double vGap) − It creates a new horizontal TilePane layout with the specified hGap and vGap. TilePane(double hGap, double vGap, Node childNodes) − Constructs a horizontal TilePane layout with the specified hGap, vGap and nodes. TilePane(Orientation orientation) − It creates a new TilePane layout with the specified orientation. It can be either HORIZONTAL or VERTICAL. This class provides eleven properties, which are as follows − S.No properties & Description 1 alignment This property represents the alignment of the pane and its value can be set by using the setAlignment() method. 2 hgap This property is of the type double and it represents the horizontal gap between each tile in a row. 3 vgap This property is of the type double and it represents the vertical gap between each tile in a row. 4 orientation This property represents the orientation of tiles in a row. 5 prefColumns This property is of double type and it represents the preferred number of columns for a horizontal tile pane. 6 prefRows This property is of double type and it represents the preferred number of rows for a vertical tile pane. 7 prefTileHeight This property is of double type and it represents the preferred height of each tile. 8 prefTileWidth This property is of double type and it represents the preferred width of each tile. 9 tileHeight This property is of double type and it represents the actual height of each tile. 10 tileWidth This property is of double type and it represents the actual width of each tile. 11 tileAlignment This property is of double type and it represents the default alignment of each child within its tile. Example The following program is an example of the tile pane layout. In this, we are creating a tile pane which holds 7 buttons. By default, its orientation will be horizontal. Save this code in a file with the name TilePaneExample.java. import javafx.application.Application; import javafx.geometry.Orientation; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.TilePane; import javafx.stage.Stage; public class TilePaneExample extends Application { @Override public void start(Stage stage) { //Creating an array of Buttons Button[] buttons = new Button[] { new Button(“SunDay”), new Button(“MonDay”), new Button(“TuesDay”), new Button(“WednesDay”), new Button(“ThursDay”), new Button(“FriDay”), new Button(“SaturDay”) }; //Creating a Tile Pane TilePane tilePane = new TilePane(); //Setting the alignment for the Tile Pane tilePane.setTileAlignment(Pos.CENTER_LEFT); //Setting the preferred columns for the Tile Pane tilePane.setPrefRows(4); //Adding the array of buttons to the pane tilePane.getChildren().addAll(buttons); //Creating a scene object Scene scene = new Scene(tilePane, 400, 300); //Setting title to the Stage stage.setTitle(“Tile Pane Example”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls TilePaneExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls TilePaneExample Output On executing, the above program generates a JavaFX window as shown below. Setting the Orientation of TilePane to Vertical To set the orientation of TilePane in JavaFX, we use either a built-in method named setOrientation() or by using its parameterized constructor which accepts orientation as a parameter value. The below JavaFX code illustrates how to set the orientation of the TilePane to vertical. Save this JavaFX code in a file with the name JavafxTilepane. Example import javafx.application.Application; import javafx.geometry.Orientation; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.TilePane; import javafx.stage.Stage; public class JavafxTilepane extends Application { @Override public void start(Stage stage) { // Creating a TilePane with vertical orientation TilePane tileP = new TilePane(Orientation.VERTICAL); // Setting the preferred number of rows to three tileP.setPrefRows(3); // Setting the hGap and vGap between tiles tileP.setHgap(10); tileP.setVgap(10); // Setting the alignment of the pane and the tiles tileP.setAlignment(Pos.CENTER); tileP.setTileAlignment(Pos.CENTER); // To add 10 buttons to the pane for (int i = 1; i <= 10; i++) { Button button = new Button(“Button ” + i); tileP.getChildren().add(button); } // Create a scene and stage Scene scene = new Scene(tileP, 400, 300); stage.setTitle(“TilePane in JavaFX”); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } To compile and execute the saved Java file from the command prompt, use the following commands − javac –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxTilepane.java java –module-path %PATH_TO_FX% –add-modules javafx.controls JavafxTilepane Output When we execute the above code, it will generate the following output − Print Page Previous Next Advertisements ”;

JavaFX – Sequential Transition ”; Previous Next You can apply one transition on a JavaFX node, or multiple transitions together. However, there are two different ways when you want to apply multiple transitions on a single node. Sequential transition is applied on a JavaFX node when you want to apply multiple transitions on a JavaFX node one after the other. For instance, you can first increase or decrease the size of a shape using Scale Transition and then fade it out using Fade Transition. You can pause for while between these animations using Pause Transition (which we will learn about in further chapters. Sequential Transition in JavaFX SequentialTransition class is used to play multiple transitions on a JavaFX node in a sequential order. This class belongs to the javafx.animation package. All the transitions applied on the node are child transitions of this class that inherit its node property (only if their own node property is not specified). Example Following is the program which demonstrates Sequential Transition in JavaFX. Save this code in a file with the name SequentialTransitionExample.java. import javafx.animation.PathTransition; import javafx.animation.ScaleTransition; import javafx.animation.SequentialTransition; import javafx.animation.TranslateTransition; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.CubicCurveTo; import javafx.scene.shape.MoveTo; import javafx.scene.shape.Path; import javafx.stage.Stage; import javafx.util.Duration; public class SequentialTransitionExample extends Application { @Override public void start(Stage stage) { //Drawing a Circle Circle circle = new Circle(); //Setting the position of the circle circle.setCenterX(150.0f); circle.setCenterY(135.0f); //Setting the radius of the circle circle.setRadius(100.0f); //Setting the color of the circle circle.setFill(Color.BROWN); //Setting the stroke width of the circle circle.setStrokeWidth(20); //Instantiating the path class Path path = new Path(); //Creating the MoveTo path element MoveTo moveTo = new MoveTo(100, 150); //Creating the Cubic curve path element CubicCurveTo cubicCurveTo = new CubicCurveTo(400, 40, 175, 250, 500, 150); //Adding the path elements to Observable list of the Path class path.getElements().add(moveTo); path.getElements().add(cubicCurveTo); //Creating path Transition PathTransition pathTransition = new PathTransition(); //Setting the duration for the transition pathTransition.setDuration(Duration.millis(1000)); //Setting the node for the transition pathTransition.setNode(circle); //Setting the path for the transition pathTransition.setPath(path); //Setting the orientation of the path pathTransition.setOrientation( PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT); //Setting the cycle count for the transition pathTransition.setCycleCount(5); //Setting auto reverse value to false pathTransition.setAutoReverse(false); //Playing the animation pathTransition.play(); //Creating Translate Transition TranslateTransition translateTransition = new TranslateTransition(); //Setting the duration for the transition pathTransition.setDuration(Duration.millis(1000)); //Setting the node for the transition pathTransition.setNode(circle); //Setting the length of the transition along x axis translateTransition.setByX(300); //Setting the cycle count for the stroke translateTransition.setCycleCount(5); //Setting auto reverse value to false translateTransition.setAutoReverse(false); //Applying scale Transition to the circle ScaleTransition scaleTransition = new ScaleTransition(); //Setting the duration for the transition pathTransition.setDuration(Duration.millis(1000)); //Setting the node for the transition pathTransition.setNode(circle); //Setting the dimensions for scaling scaleTransition.setByY(1.5); scaleTransition.setByX(1.5); //Setting the cycle count for the translation scaleTransition.setCycleCount(5); //Setting auto reverse value to false scaleTransition.setAutoReverse(false); //Applying Sequential Translation to the circle SequentialTransition sequentialTransition = new SequentialTransition(circle, pathTransition, translateTransition, scaleTransition ); //Playing the animation sequentialTransition.play(); //Creating a Group object Group root = new Group(circle); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Setting title to the Stage stage.setTitle(“Seqiential transition example”); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } } Compile and execute the saved java file from the command prompt using the following commands. javac –module-path %PATH_TO_FX% –add-modules javafx.controls SequentialTransitionExample.java java –module-path %PATH_TO_FX% –add-modules javafx.controls SequentialTransitionExample Output On executing, the above program generates a JavaFX window as shown below. Print Page Previous Next Advertisements ”;