JavaFX: Setting the text for display

This entry is part 6 of 55 in the series JavaFX

Using our previous example on displaying a text string, we will go through the process on how we have created a Text object, setting the text color and the font of the text.

The 4 lines of statement that we used are shown here:

Text txt = new Text();
txt.setFill(Color.BLUE);
txt.setFont(Font.font("Times New Roman", 36));
txt.setText("Hello World");

In the first line above, we create a Text object with the object name txt.

As txt is now a Text object, we could make use of the methods that are associated with the Text object.

The methods that we used here are setFill, setFont and setText.  All these are member functions of Text object.

Notice that in our import statements, we have 2 classes related to Font and Color.

Font and Color are known as static classes.  We do not have to declare an instance of the Color class to access its property, which is BLUE in this case.  We set the color property by using Color.Blue where Color is actually the name of the class.

The same goes to setting the font type where we access the font type by using Font.font(). Font is similar to the name of the class as shown in the import statement.

package javafxapplication4;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class JavaFXApplication4 extends Application {

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        primaryStage.setScene(scene);

        Text txt = new Text();
        txt.setFill(Color.BLUE);
        txt.setFont(Font.font("Times New Roman", 36));
        txt.setText("Hello World");

        stackpane.getChildren().add(txt);

        primaryStage.show();
    }

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

}

h1

 

JavaFX: Stackpane and z-order

This entry is part 7 of 55 in the series JavaFX

A Stackpane could have a few children.  According to the definition of Stackpane, it lays out its few children in a back-to-front stack.

We will create a Stackpane with 3 children – a blue rectangle, a label and a text.

Label is very similar to text and they have very similar methods.

package javafxapplication4;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.text.Text;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class JavaFXApplication4 extends Application {

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle("JavaFX Program");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        primaryStage.setScene(scene);

        Label lb = new Label();
        lb.setFont(Font.font("Times New Roman", 24));
        lb.setText("Hello World");

        //   stackpane.getChildren().add(lb);
        Text txt = new Text();
        txt.setFill(Color.RED);
        txt.setFont(Font.font("Verdana", 36));
        txt.setText("Hi There");

        stackpane.getChildren().addAll(new Rectangle(200, 200, Color.BLUE), lb, txt);

     //   stackpane.getChildren().addAll(lb, new Rectangle(200, 200, Color.BLUE), txt);
     //   stackpane.getChildren().add(new Label("Go!"));
        primaryStage.show();
    }

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

}

If you look at the output below, the Hi There text is in clear view.  It actually has a z-order of 2.  The blue rectangle has a z-order of 0.

So, mainly, it is due to this statement that we have:

     stackpane.getChildren().addAll(new Rectangle(200, 200, Color.BLUE), lb, txt);

You can try to change the statement and put them in different z-order.

stackpane

JavaFX: Setting Constraints On Children

This entry is part 8 of 55 in the series JavaFX

In the previous example, we have the label and text overlapping each other.  Stackpane provides a static method to set positioning constraint on its children.

Let’s apply this constraint to the label.

In this example, we set the label to the TOP_CENTER position of the stackpane.

Notice how I have also set the color of the label.

package javafxapplication8;
 
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
 
public class JavaFXApplication8 extends Application {
 
    @Override
    public void start(Stage primaryStage) {
 
        primaryStage.setTitle("JavaFX Program");
 
        StackPane stackpane = new StackPane();
 
        Scene scene = new Scene(stackpane, 300, 250);
        primaryStage.setScene(scene);
 
        Label lb = new Label();
        lb.setFont(Font.font("Times New Roman", 24));
        lb.setText("Hello World");
        lb.setTextFill(Color.web("#0076a3"));
        StackPane.setAlignment(lb, Pos.TOP_CENTER);
         
        stackpane.getChildren().add(lb);

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

p1

JavaFX: BorderPane class

This entry is part 9 of 55 in the series JavaFX

BorderPane lays out children in the scene in top, left, right, bottom, and center positions similar to the illustration in the screenshot below.

borderpane

 

There are a few panes commonly used in JavaFX in laying out the boxes in the scene.  In the screenshot above, we have the Top pane and to place items in the Top pane, we can use the HBox pane class.

Consider the example below, the addHorizontalBox method basically set up the 2 buttons for display in the top panel.

package javafxapplication9;
 
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
 
public class JavaFXApplication9 extends Application {
 
    @Override
    public void start(Stage stage) {
 
        BorderPane border = new BorderPane();
        
        border.setPrefSize(500,400);
        
        HBox hbox = addHorizontalBox();
        border.setTop(hbox);

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }
    
    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: blue;");

        Button buttonAccept = new Button("Accept");
        buttonAccept.setPrefSize(100, 20);

        Button buttonNext = new Button("Next");
        buttonNext.setPrefSize(100, 20);
        
        hbox.getChildren().addAll(buttonAccept, buttonNext);
        
        return hbox;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
    
}

borderpane1

JavaFX: BorderPane and VBox

This entry is part 10 of 55 in the series JavaFX

VBox in BorderPane will layout the nodes in a vertical column.  It is good for displaying a list of items.

Here, I create a list using a ListView class.  This is a list created from an observable list.  Observable lists are usually lists that are updated constantly.  We will talk about observable list in our later posts.

package javafxapplication9;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class JavaFXApplication9 extends Application {

    @Override
    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        HBox hbox = addHorizontalBox();
        border.setTop(hbox);
        border.setLeft(addVBox());

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(10)); // Set all sides to 10
        vbox.setSpacing(8);              // Gap between nodes

        Text title = new Text("Top 5 Rock Albums");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
        vbox.getChildren().add(title);

        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Like A Rolling Stone", "Archtung Baby", "Help!", "Smell Like Teen Spirit");
        list.setItems(items);

        vbox.getChildren().add(list);
        
        return vbox;
    }

    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: blue;");

        Button buttonAccept = new Button("Accept");
        buttonAccept.setPrefSize(100, 20);

        Button buttonNext = new Button("Next");
        buttonNext.setPrefSize(100, 20);

        hbox.getChildren().addAll(buttonAccept, buttonNext);

        return hbox;
    }

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

vbox

 

We have the above display as we have this line in line 29:

border.setLeft(addVBox());

We could modify it to have a display that take the entire column.

border.setCenter(addVBox());

vbox1