JavaFX Tutorial Index

JavaFX Tutorial JavaFX Installation JavaFX Application Structure JavaFX Architecture

JavaFX Applications Charts

JavaFX Bar Chart JavaFX Bubble Chart JavaFX Pie Chart JavaFX Scatter Chart JavaFX Area Chart JavaFX Line Chart

JavaFX 2D Shapes

JavaFX Arc JavaFX Circle JavaFX Ellipse JavaFX Line JavaFX Polygon JavaFX Rectangle JavaFX Color JavaFX Gradient Color

JavaFX 3D Shapes

JavaFX Box JavaFX Cylinder JavaFX Sphere

JavaFX Animations

JavaFX Rotate Transition JavaFX Translate Transition JavaFX Fade Transition JavaFX Fill Transition JavaFX Parallel Transition JavaFX Path Transition JavaFX Pause Transition JavaFX Scale Transition JavaFX Sequential Transition JavaFX Stroke Transition

JavaFX CSS

JavaFX ID Selector JavaFX Inline Styles JavaFX Selectors

JavaFX Effect

JavaFX Blend JavaFX Bloom JavaFX Color Adjust JavaFX Color Input JavaFX Drop Shadow JavaFX Gaussian Blur JavaFX Glow JavaFX Image Input JavaFX Inner Shadow JavaFX Light Distant JavaFX Light Point JavaFX Light Spot JavaFX Lighting JavaFX Motion Blur JavaFX Reflection JavaFX Shadow

JavaFX Layouts

JavaFX Layouts JavaFX BorderPane JavaFX GridPane JavaFX StackPane JavaFX HBox JavaFX TilePane

JavaFX Event Handling

JavaFX Event Handling JavaFX Event Filters JavaFX Convenience Methods

JavaFX Transformation

JavaFX Transformation JavaFX Scaling JavaFX Rotation JavaFX Translation JavaFX Shear

JavaFX UI

JavaFX Menu JavaFX Button JavaFX Button Styling JavaFX CheckBox JavaFX File Chooser JavaFX HyperLink JavaFX Label JavaFX UI Controls JavaFX PasswordField JavaFX ProgressBar JavaFX RadioButton JavaFX ScrollBar JavaFX Slider JavaFX TextField

JavaFX UI Controls
2022-04-15 10:00:24

JavaFX UI Controls

We can make an advanced graphical user interface (GUI) for the JavaFX application using UI Controls and layouts. Various UI elements can be used b the programmer in their application to make the user interaction easier with the operating system. Proper use of UI elements and layout leads to proper information exchange. The UI element should be properly aligned for better understanding, this can be done using layouts in the JavaFX application. When an event occurs on the UI element, the behavior must be defined for handling it.

In JavaFX applications, javafx.scene.control package provides all the UI components. Various UI controls like checkbox, label, button are used in the JavaFX application. Every UI element has its own defined meaning and particular styling.

UI Components in JavaFX applications:

  1. Button: JavaFX UI component, the button is used to create a labeled button for better interaction with the user. The function of the application is controlled by using the button.
  2. Label: We can display the simple text on the screen using the label in the JavaFX application.
  3. CheckBox: When the user needs to choose among various choices such as languages known, the technology learned checkbox is used. It is mainly used to get a choice from the user.
  4. TextField: To use TextField in JavaFX application javafx.scene.control.TextField is used. When we want to input some text from the user in the JavaFX application form, TextField is used.
  5. RadioButton: When we want the user to select only one option among all the options available, RadioButton is used. We can either select or deselect the radio button. Users can choose only one option in the group using the radio button.
  6. PasswordField: When the user has to enter the password in the JavaFX application form, the password field is used. The password typed by the user in the PasswordField is not visible on the screen but it is shown as black field circles.
  7. HyperLink: It can be used in the JavaFX applications by using the class javafx.scene.control.HyperLink. Any webpage can be referred to in our JavaFX application using HyperLink.
  8. Slider: When the user wants to move around a various range of values and wants to select anyone from them, the slider is used with pane to move as per the user requirement.
  9. ProgressBar: It can be used in JavaFX application using javafx.scene.control.ProgressBar class. When we want to show the progress of a particular task to a user ProgressBar is used.
  10.  ScrollBar: When there is a requirement to scroll among application pages scroll bar is used.
  11.  Menu: Menus are generally used in JavaFX applications to provide various options in the application.

Layouts in JavaFX applications:

Layouts in the JavaFX application are used as a container for various UI controls. Layouts are considered as parent container. The layout is used to define how components are arranged. All the classes for setting the layout are present in the java.scene.layout package.

  1. BorderPane: The BorderPane in the JavaFX application is used to place the nodes in the left, right, top, bottom, and center of the screen.
  2. FlowPane: It is used to arrange the notes according to the horizontal spaces available. If the horizontal space is less than node width. It goes to the next line.
  3. GridPane: In the JavaFX application, GridPane is used to arrange the components in the form of rows and columns.
  4. StackPane: In the JavaFX application, nodes in the stack pane are arranged in the form of a stack.
  5. HBox: It is used to arrange nodes in one row.
  6. VBox: It is used to arrange nodes in one column.
  7. Pane: All the layout classes have the base class pane in the JavaFX application.

Setting the layout in JavaFX application:

1. We have to first instantiate a particular layout class.

StackPane pane = new StackPane();

2. We can set the properties for the layout

pane.setSpacing(16);

3. Then we can add nodes to this layout

pane.getChildren().addAll( <Node Objects> );