JavaFX: Which Button Is Clicked

This entry is part 24 of 55 in the series JavaFX

To test which button is clicked, I have made use of setOnAction() method of the button object and called the relevant function accordingly.

package javafxapplication20;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

public class JavaFXApplication20 extends Application {

    Button movButton = new Button("Movie");

    Button gameButton = new Button("Game");

    Label lb = new Label("Which Do You Prefer?");

    @Override
    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        movButton.setOnAction(e -> movieButton());
        
        gameButton.setOnAction(e -> gameButton());

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

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Which Button");
        stage.show();
    }

    private void movieButton() {

        lb.setText("Movie Button Is Clicked");

    }
    
    private void gameButton() {

        lb.setText("Game is Chosen");

    }

    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes

        hbox.getChildren().addAll(movButton, gameButton);

        return hbox;
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(50)); // Set all sides to 10

        lb.setFont(Font.font("Consolas", FontWeight.BOLD, 24));
        vbox.getChildren().add(lb);

        return vbox;
    }

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

chosen

 

JavaFX: Removing CSS effects to a Button

This entry is part 23 of 55 in the series JavaFX

When a mouse is moved over a button, we can apply an effect such as changing the color of the button.

However, when the mouse is out of the button or out of any other nodes, we will want it to get back to its original state.

We can use remove() method if we have only one class or removeAll() method if we have more than one CSS class.

package javafxapplication19;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXApplication19 extends Application {

    Button btn = new Button("Codecrawl");

    DropShadow ds = new DropShadow();

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        scene.getStylesheets().add("javafxapplication19/style.css");
        stage.setScene(scene);

        btn.setOnMouseEntered(e -> mouseEntered());

        btn.setOnMouseExited(e -> mouseExited());

        stackpane.getChildren().add(btn);

        stage.show();
    }

    public void mouseEntered() {

        btn.getStyleClass().add("button1");
        btn.setText("Mouse In");

    }

    public void mouseExited() {

        btn.getStyleClass().remove("button1");
        btn.setText("Mouse Out");

    }

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

}

remove

Here is the simple style.css that we use to set the color of the button.

.button1 {
    
    -fx-base: blue;    
    
}

 

 

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: Calling Event Using Lambda Expression

This entry is part 18 of 55 in the series JavaFX

Java 8 development kit supports Lambda expression.  I was a bit surprised when the default Netbeans program came with a suggestion to use Lambda expression.

As you can see in the screenshot below,

lambda

It has this message when you mouse over EventHandler- “This anonymous inner class creation can be turned into a lambda expression”.

A little prodding led me to using -> to call the button click event as shown in the example below.  This arrow operator (->) is a new operator introduced in Java 8 for use with Lambda expressions.

The argument e represents an object of type ActionEvent, which the program can use to get detailed information about the event.

As it is an ActionEvent, we can specify it specifically as in:

btn.setOnAction((ActionEvent e) -> buttonClick());
Action Event
package javafxapplication15;

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

public class JavaFXApplication15 extends Application {

    Button btn;

    @Override
    public void start(Stage stage) {
        // Create the button
        btn = new Button();
        btn.setText("New Button");

        //Trigger the button click event
        btn.setOnAction(e -> buttonClick());

        // Add the button to a layout pane
        BorderPane pane = new BorderPane();
        pane.setCenter(btn);

        // Add the layout pane to a scenee
        Scene scene = new Scene(pane, 300, 250);

        // Finalize and show the stage
        stage.setScene(scene);
        stage.setTitle("JavaFX Program");
        stage.show();
    }

    public void buttonClick() {
        if (btn.getText() == "Click") {
            btn.setText("Click Click!");
        } else {
            btn.setText("Click");
        }
    }

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

}

lambda1

 

Javascript: Mouse event

This entry is part 26 of 27 in the series Javascript Tutorial

Mouse event is probably the most common event used in Javascript or web programming.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            document.getElementsByClassName("lineClass")[0].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[1].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            document.getElementsByClassName("lineClass")[0].style.color = "silver";
            document.getElementsByClassName("lineClass")[1].style.color = "silver";
            document.getElementsByClassName("lineClass")[2].style.color = "silver";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle

We have bind 2 events to a single h1 element.  When the mouse is over the line, mouseOver function is called changing the lineClass related lines to a different color.

Look at how lineClass has turned the 3 div lines into an array with 3 items in the array.  They are accessed with [0], [1] and [2].

You can also pass the lineClass into a variable.  This will make the code look cleaner.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "#C0D9FE";
            lineC[1].style.color = "#C0D9FE";
            lineC[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "red";
            lineC[1].style.color = "red";
            lineC[2].style.color = "red";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle – simplified

In the above simplified JS Fiddle, I have passed the lineClass into a variable lineC as shown in line 2 below.

function mouseOver() {
    var lineC = document.getElementsByClassName("lineClass")
    lineC[0].style.color = "#C0D9FE";
    lineC[1].style.color = "#C0D9FE";
    lineC[2].style.color = "#C0D9FE";
}