JavaFX: Applying Effects To Label

This entry is part 19 of 55 in the series JavaFX

We have looked at Label and we have made use of lambda function to call the event, we can now set up a mouse over effect on a Label.

When the mouse move over the label, a scaling factor of 1.5 is applied to the Label. This is done by using the setScale method.

package javafxapplication15;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;

public class JavaFXApplication15 extends Application {

    @Override
    public void start(Stage stage) {

        Label lb = new Label("Every Picture Tells A Story");

        lb.setOnMouseEntered((MouseEvent e) -> {
            lb.setScaleX(1.5);
            lb.setScaleY(1.5);
        });

        lb.setOnMouseExited(e -> {
            lb.setScaleX(1);
            lb.setScaleY(1);
        });

        BorderPane pane = new BorderPane();
        pane.setCenter(lb);
        Scene scene = new Scene(pane, 300, 250);
        stage.setScene(scene);
        stage.setTitle("JavaFX Program");
        stage.show();
    }

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

}

scale1

 

JavaFX: Wrapping The Label

This entry is part 17 of 55 in the series JavaFX

With label, we can wrap the text and set to display the text vertically.

package javafxapplication14;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;

public class JavaFXApplication14 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 500, 400);
        stage.setScene(scene);

        stackpane.setStyle("-fx-background-color: grey;");

        Label lb = new Label("Where The Street Has No Name");
        lb.setWrapText(true);
        lb.setFont(Font.font("Times New Roman", 72));
        StackPane.setAlignment(lb, Pos.TOP_CENTER);


        Label lb1 = new Label("Hello");
        lb1.setRotate(90);
        lb1.setFont(Font.font("Times New Roman", 52));
        lb1.setTextFill(Color.DARKBLUE);
        StackPane.setAlignment(lb1, Pos.CENTER_RIGHT);

        stackpane.getChildren().addAll(lb, lb1);

        stage.show();
    }

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

}

wrap

JavaFX: Using Label with Graphics

This entry is part 14 of 55 in the series JavaFX

As mentioned earlier, Label class is very similar to Text class and Label allows us to create a more expressive text display.

For example, we can put a graphics easily on the top, left etc of a jpeg file.

Label class provides us a setGraphics method and it also allows us to place the text on the different position around the graphics.

In the example below, I have put the label above the graphics by using

lb.setContentDisplay(ContentDisplay.BOTTOM);

Take note also how I have accessed the jpg file using getResourceasStream method.  I have put the cloud.jpg in the same directory as javafxapplication13.java.

Label With Graphics
package javafxapplication13;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;

public class JavaFXApplication13 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 500, 300);
        stage.setScene(scene);

        Label lb = new Label("Stay Calm And Keep Learning");
        Image image = new Image(getClass().getResourceAsStream("cloud.jpg"));
        lb.setGraphic(new ImageView(image));
        lb.setFont(Font.font("Cambria", 24));
        lb.setContentDisplay(ContentDisplay.BOTTOM);
        lb.setTextFill(Color.web("#0076a3"));

        stackpane.getChildren().add(lb);

        stage.show();
    }

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

}

label

 

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

HTML5: <label> tag

This entry is part 17 of 34 in the series HTML5

In the earlier example, we have used a <label> tag which is new in HTML5.

Quick contact form

With this <label> tag, if we click on the text Email, the email input box will be selected.

Notice in line 14, we have used id=’email’ to bind the <input> textbox to the email label in line 13.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>