Open in app

Sign in

Write

Sign in

Developing Scroll List application using JavaFX

Julia Fideles
TotalCross Community
Published in
5 min readAug 17, 2021

Introduction

JavaFX is a java-based multimedia software platform for creating and delivering rich internet applications that can run on a variety of different devices. In this article you will be shown how to develop an application in JavaFX using Scroll List and later in TotalCross. The pros and cons of each platform will be pointed out. , aiming to present their differences and advantages.

Building the Interface

The construction of the interface is done through fxml. All component implementation is done in this part of the project and the fxml development of this application was done using the Scene Builder software platform. This platform allows the graphical construction of the form in an interactive way and it is not necessary to manually build the fxml code.

//Implementing java libraries<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>

//Creation of AnchorPane (anchor panel where it houses all the components on the page

<AnchorPane id="AnchorPane" prefHeight="288.0000999999975" 
prefWidth="467.0001220703125" styleClass="background"            xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2"         fx:controller="com.project_tc.controller.ButtonController">
//Creating the components used in the form
  <children>
    <TextField id="" fx:id="txtTextButton" alignment="CENTER_LEFT" 
               layoutX="134.0" layoutY="89.0" prefHeight="29.0" prefWidth="200.0" promptText="" text="Text" />
    <ComboBox id="" fx:id="cbnSizeButton" layoutX="134.0" layoutY="199.0" minHeight="22.0" prefHeight="29.0"
              prefWidth="200.0" promptText="Size" styleClass="ComboBox">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Item 1" />
          <String fx:value="Item 2" />
          <String fx:value="Item 3" />
        </FXCollections>
      </items>
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </ComboBox>
    <ComboBox id="" fx:id="cbnColorButton" layoutX="134.0" layoutY="144.0" minHeight="22.0" prefHeight="29.0" prefWidth="200.0" promptText="Color" styleClass="ComboBox">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Item 1" />
          <String fx:value="Item 2" />
          <String fx:value="Item 3" />
        </FXCollections>
      </items>
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </ComboBox>
    <Button id="btnButtonApplye" fx:id="btnButtonApply" layoutX="361.0" layoutY="245.0" mnemonicParsing="false" text="Apply">
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </Button>
    <Separator layoutX="82.0" layoutY="59.0" prefWidth="304.0" />
    <Label layoutX="194.0" layoutY="25.0" styleClass="label-title" text="BUTTON" textOverrun="ELLIPSIS">
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </Label>
  </children>
  <effect>
    <DropShadow blurType="GAUSSIAN" color="#ffb800" />
  </effect>
//Calling the page's style CSS code
  <stylesheets>
    <URL value="@../styles/DarkTheme.css" />
  </stylesheets>
</AnchorPane>

Repeat the same process to create the next form.

Controlling the Application

In JavaFX, forms are controlled by java classes of controller type, these classes are used to install all component and method implemented in the application.

//Implementing java librariespackage com.project_tc.controller;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

/**
 * FXML Controller class
 *
 * @author Julia Fideles
 */
//Creating the control class for the "Button" form

public class ButtonController implements Initializable {

//Implementation of all visual components used on this page.@FXML
    public Label lblTextButton;
    @FXML
    public TextField txtTextButton;
    @FXML
    public Label lblColorButton;
    @FXML
    public ComboBox<String> cbnSizeButton;  
   @FXML
    public ComboBox<String> cbnColorButton;
    @FXML
    public Label lblSizeButton;
   
//Creation of list type array to store the data that will be placed inside the "Combo Box" component.

     @FXML
     public List <String> ComboBoxSize = new ArrayList<>();
     public List <String> ComboBoxColor = new ArrayList<>();

///Creation of a List of type "ObservableList" that allows the fields of a list to be visible to a component such as the "Combo Box".
    public ObservableList<String> obsComboBoxSize;
     public ObservableList<String> obsComboBoxColor;
    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {

//Calling the method created to implement data inside a combobox.        loadComboBox();
    }    
   
//Creating a method to add data to a combobox.
     public void loadComboBox() {

//Adding data to arraylist of string type named "ComboBox Size".
        ComboBoxSize.add("1");
        ComboBoxSize.add("2");
        ComboBoxSize.add("3");
        ComboBoxSize.add("4");
        ComboBoxSize.add("5");
        ComboBoxSize.add("7");
        ComboBoxSize.add("8");
        ComboBoxSize.add("10");
        ComboBoxSize.add("12");
        ComboBoxSize.add("14");
        ComboBoxSize.add("16");
        ComboBoxSize.add("18");
        ComboBoxSize.add("20");
        
//Adding the data from the arraylist "ComboBoxSize" into an ObservableList named "obsComboBoxSize".
        obsComboBoxSize = FXCollections.observableArrayList(ComboBoxSize);

//Adding the data from the "obsComboBoxSize" into the combobox named "cbnSizeButton".
        cbnSizeButton.setItems(obsComboBoxSize);
      
/*This way we can put the combobox field values ​​inside an arraylist of string type and make them visible behind an ObservableList so that the combobox component can add each node of the list inside the available fields. Field 1 of the combobox receives node 1 from the list and so on.*///Repeating the same process for the "ComboBoxColor" combobox
        ComboBoxColor.add("Blue");
        ComboBoxColor.add("Black");
        ComboBoxColor.add("White");
        ComboBoxColor.add("Red");
        ComboBoxColor.add("Purple");
        ComboBoxColor.add("Yellow");
        ComboBoxColor.add("Grey");
        ComboBoxColor.add("Orange");
        ComboBoxColor.add("Brown");
        ComboBoxColor.add("Pink");
        ComboBoxColor.add("Green");
        obsComboBoxColor = FXCollections.observableArrayList(ComboBoxColor);
        cbnColorButton.setItems(obsComboBoxColor);
       }
}

Styling the Application

The entire application style is made by css extension files, which is responsible for putting colors and shapes in components and pages, alignment and everything that involves the visual part of the project.

background {
    -fx-background-color: #1d1d1d;
}
.label {
    -fx-font-size: 15pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
  
}
.labelList {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
  
}
.listview{
    -fx-background-radius:50px;
}
.label-title {
    -fx-font-size: 18pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #ffcc00;
  
}
.button {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}
.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}



.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,30%);
}

Running the Application

The project’s main page is responsible for starting the application’s execution.

//Implementing java librariespackage com.project_tc.model;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

/**
 *
 * @author Julia Fideles
 */
//Creation of the model class "MainApp"
public class MainApp extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {//Creation of MainApp form
        Parent mainAppForm = FXMLLoader.load(getClass().getResource("/com/project_tc/FXML/MainApp.fxml"));
 Scene scene = new Scene(mainAppForm);
        stage.setTitle("Virtual Scene");
        stage.setScene(scene);
        stage.show();

//Setting an application iconImage icon = new Image(getClass().getResourceAsStream("/com/project_tc/Icons/315090_file_java_icon.png"));
        stage.getIcons().add(icon);
               
    }

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

Screens

Conclusion

At the end of this article you can see that the development of more complex applications with non-essential JavaFX, has a construction that is divided into several different parts. One of its biggest advantages is the scene builder, which is a visual layout tool that allows users to create JavaFX application interfaces quickly. On the downside, it can create the need to insert a multitude of variables to fill all of its components, making the code longer and the application heavier, which in turn will reduce its execution optimization.

Java
Javafx
Totalcross
Scroll List
Javafx Tutorial

--

--

Julia Fideles
TotalCross Community

Written by Julia Fideles

1 Follower
Writer for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams