Kensoft PH
  • Download
    • KenshotApplication
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
  • Download
    • KenshotApplication
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
No Result
View All Result
Home Java

How to use the JavaFX SplitPane | 100% Perfect Tutorial

November 13, 2022
in Java
Reading Time: 4 mins read
0
JavaFX SplitPane web thumbnail
338
VIEWS
Share on FacebookShare on TwitterShare via Email

SplitPane is one of the most important containers if you need it. In this tutorial, you will learn how to use the JavaFX SplitPane. This container allows you to arrange many nodes horizontally or vertically separated by the JavaFX SplitPane divider. The SplitPane divider can be dragged by the user if they want the other side of the container expanded nor shrink.

Contents

Toggle
  • How to use the JavaFX SplitPane
  • JavaFX SplitPane Example
    • Add the SplitPane to the scene graph
      • Output
    • Adding nodes to the SplitPane
      • Output
    • Setting the JavaFX SplitPane orientation
      • Output
    • Setting the divider position
      • Output
    • Adding CSS to the SplitPane
  • YouTube Video

How to use the JavaFX SplitPane

SplitPane is very easy to use, maybe some of you have seen the functionality of the so-called SplitPane in JavaFX. If you are using an IDE to develop your application, you can hover over the sidebar of your project and if you see your cursor has changed to resize, that is how the SplitPane works in JavaFX. Creating this container in your JavaFX application is very easy to do because it is almost the same as the layout in JavaFX. Because you can put nodes inside the JavaFX SplitPane.

In this tutorial, I will walk you through creating the SplitPane in JavaFX. You will know how to use the JavaFX SplitPane, add nodes inside, show some important and useful properties of the container, and more examples to show in this tutorial.

JavaFX SplitPane Example

The first step we go through is by creating the SplitPane, we cannot use this container without creating it. There are two easiest ways to create this container: you can use the Scene Builder application to create UI easily in JavaFX and the other easiest way to create the SplitPane is by manually coding it. If you would like to learn more about how to create this container using the Scene Builder, you can do so by watching the YouTube Video below.

Please go ahead below to learn more about how you can create the SplitPane in JavaFX using its default constructor from the SplitPane class.

// create the splitpane using its default constructor.
SplitPane splitPane = new SplitPane();

Add the SplitPane to the scene graph

Usually, if we are developing our application in JavaFX, you must have to know how to the JavaFX Layout. This is the most important part to show our nodes to the scene. You need to add the SplitPane to the layout if you want your SplitPane to be shown in your application if you run it. The following example code below will show you how to add the SplitPane to your JavaFX application.

// create the SplitPane
SplitPane splitPane = new SplitPane();
// create the layout
StackPane layout = new StackPane(splitPane);
// create the scene
Scene scene = new Scene(layout, 500, 500);// 500 is the scene size
// set the scene to the stage by calling the stage object
stage.setScene(scene);
stage.setTitle("Understanding the SplitPane");
stage.show();

Output

How to use the JavaFX SplitPane

Adding nodes to the SplitPane

Referring to the previous example, you created an empty SplitPane. In this example, you will learn how to add nodes in the container by using the SplitPane getItems() method. The following example below will show you how to add nodes to the SplitPane.

// create two textArea
TextArea t1 = new TextArea();
TextArea t2 = new TextArea();
// create the splitpane
SplitPane splitPane = new SplitPane();
// add nodes
splitPane.getItems().addAll(t1, t2);

Output

JavaFX SplitPane

Setting the JavaFX SplitPane orientation

The default orientation of the SplitPane is horizontal. This means you can drag the divider from left to right. Please see the example code below to learn more about setting its orientation.

SplitPane splitPane = new SplitPane();
splitPane.setOrientation(Orientation.VERTICAL);

Output

JavaFX SplitPane Orientation

Setting the divider position

You can also set the divider position and the default position at the center, but you will use the Double data type to set the position from 0 to 1 and the default is 0.5. Please see the following example code below to learn more.

SplitPane splitPane = new SplitPane();
splitPane.setDividerPosition(0, 0.8); // 0 is the index and 0.8 is the position

Output

JavaFX SplitPane Divider

Adding CSS to the SplitPane

In the JavaFX framework, you can add JavaFX CSS to your application. In this example, you will know the basic CSS properties of the JavaFX SplitPane. The following example code below is the JavaFX SplitPane CSS properties.

.split-pane > .split-pane-divider {
 -fx-background-color: blue;
}
.split-pane:horizontal > .split-pane-divider {
 -fx-pref-width: 5;
}
.split-pane:vertical > .split-pane-divider {
 -fx-pref-height: 5;
}

YouTube Video

YouTube video

Previous Post

How to show Tooltip in JavaFX | 100% Perfect Tutorial

Next Post

How to use the Slider in JavaFX | 100% Perfect Tutorial

KENSOFT

KENSOFT

What’s up! Kent is my name. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java

Related tutorials

How to Use the JavaFX Pie Chart 100% For Beginners
Java

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
205
How to Connect to an API Using JavaFX
Java

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
215
JavaFX SQLite Database CRUD Tutorial
Java

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024
587
Next Post
How to use the Slider in JavaFX | 100% Perfect Tutorial

How to use the Slider in JavaFX | 100% Perfect Tutorial

JavaFX MenuBar

How to use the Menu Bar in JavaFX | 100% Perfect Tutorial

JavaFX Context Menu

How to use the JavaFX ContextMenu | 100% Perfect Tutorial

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tools

Multi-platform installer builder

Java profiler

  • Trending
  • Comments
  • Latest
MySQL database using XAMPP

How to connect Java to MySQL database using Xampp server | 100% best for beginners

October 27, 2020 - Updated on January 23, 2023
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

April 11, 2021 - Updated on July 3, 2022
JavaFX 17

How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

November 15, 2021 - Updated on December 13, 2021
hide and show password in jPasswordField

JPasswordField in Java Hide or Show Password | 100% best for beginners

April 2, 2021 - Updated on September 21, 2022
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

3DES in Java and AES in Java

How to use AES and 3DES in Java | 100% best for beginners

JavaFX Splash Screen

How to create JavaFX Splash Screen | 100% best for beginners

set up JavaFX and Scene Builder

How to set up JavaFX and Scene Builder in NetBeans IDE | 100% best for beginners

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024
How to take a screenshot on PC using Kenshot

How to Take a Screenshot on PC Using Kenshot: A Full Guide

January 18, 2024 - Updated on October 6, 2024

Latest Tutorials

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024

Popular Tutorials

  • MySQL database using XAMPP

    How to connect Java to MySQL database using Xampp server | 100% best for beginners

    0 shares
    Share 0 Tweet 0
  • Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

    0 shares
    Share 0 Tweet 0
  • How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

    0 shares
    Share 0 Tweet 0
Facebook Instagram Youtube Github LinkedIn Discord
Kensoft PH

What’s up! I'm Kent. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java, which I use to create computer applications. In a company, I created applications and a website.

Categories

Website

Check the status

Privacy Policy

Terms and Condition

Sitemap

Latest Tutorials

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024

© 2024 Made With Love By KENSOFT PH

No Result
View All Result
  • Download
    • Kenshot
  • Contact
  • About
  • Java Quiz

© 2024 Made With Love By KENSOFT PH

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.