CODEWITHSUNDEEP
javacssbuttonjavafxjava-8
Adrian Stypiński
Adrian Stypiński

Reputation: 13

Why Buttons are resizing on click

I'm doing a simple Calculator, and the problem is with Buttons. When I click them they're slightly shrinking on the bottom which i don't want to do. Also, when I click on textArea the white dots disappears, but when I click on Buttons, dots around textArea show again. Why? How to make them permamently unvisible?

I tried to put in css in .button:pressed code that will set size of button to normal size but it doesn't work. They're shrinking anyway.

Main.java

package gui;

public class Main {
    public static void main(String[] args){Calculator.main(args);}
}

Calculator.java

package gui;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class Calculator extends Application {
    public static void main(String[] args){
        launch(args);
    }

    private TextArea screen;
    private Button button0, button1, button2, button3, button4, button5, button6, button7, button8, button9, buttonPlus, buttonMinus,
    buttonDevide, buttonTimes, buttonEqual, buttonDot, buttonSign, buttonClear, buttonPercent, buttonClose, buttonMinimalize;
    @Override
    public void start(Stage primaryStage) throws Exception {

        StackPane stackPane = new StackPane();
        Pane pane = new Pane();
        buttonClose = new Button(" ");
        buttonClose.setId("buttonClose");
        buttonMinimalize = new Button();
        buttonMinimalize.setId("buttonMinimalize");
        buttonClose.setLayoutX(0);
        buttonClose.setLayoutY(0);
        pane.getChildren().add(buttonClose);
        buttonMinimalize.setLayoutX(15);
        buttonMinimalize.setLayoutY(-1);
        pane.getChildren().add(buttonMinimalize);
        buttonClose.setOnAction(e->System.exit(0));
        buttonMinimalize.setOnAction(e->primaryStage.setIconified(true));


        primaryStage.initStyle(StageStyle.TRANSPARENT);
        primaryStage.setTitle("Calculator");
        //primaryStage.getIcons().add(new Image(Calculator.class.getResourceAsStream("Icon.png"))); - Don't worry, I hid this for you
        GridPane gridPane = new GridPane();
        gridPane.setAlignment(Pos.CENTER);
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(10,10,10,10));

        gridPane.add(pane,0,0);
        //Buttons
        int row = 1;
        screen = new TextArea();
        screen.setId("screen");
        screen.setEditable(false);
        gridPane.add(screen,0,row,4,1);

        row++;
        buttonClear = new Button("AC");
        buttonClear.setId("buttonClear");
        gridPane.add(buttonClear,0,row);

        buttonSign = new Button("+/-");
        buttonSign.setId("buttonSign");
        gridPane.add(buttonSign,1,row);

        buttonPercent = new Button("%");
        buttonPercent.setId("buttonPercent");
        gridPane.add(buttonPercent,2,row);

        buttonDevide = new Button("/");
        buttonDevide.setId("buttonDevide");
        gridPane.add(buttonDevide,3,row);

        row++;
        button7 = new Button("7");
        gridPane.add(button7,0,row);

        button8 = new Button("8");
        gridPane.add(button8,1,row);

        button9 = new Button("9");
        gridPane.add(button9,2,row);

        buttonTimes = new Button("x");
        buttonTimes.setId("buttonTimes");
        gridPane.add(buttonTimes,3,row);

        row++;
        button4 = new Button("4");
        gridPane.add(button4,0,row);

        button5 = new Button("5");
        gridPane.add(button5,1,row);

        button6 = new Button("6");
        gridPane.add(button6,2,row);

        buttonMinus = new Button("-");
        buttonMinus.setId("buttonMinus");
        gridPane.add(buttonMinus,3,row);

        row++;
        button1 = new Button("1");
        gridPane.add(button1,0,row);

        button2 = new Button("2");
        gridPane.add(button2,1,row);

        button3 = new Button("3");
        gridPane.add(button3,2,row);

        buttonPlus = new Button("+");
        buttonPlus.setId("buttonPlus");
        gridPane.add(buttonPlus,3,row);

        row++;
        button0 = new Button("0");
        button0.setId("button0");
        gridPane.add(button0,0,row,2,1);

        buttonDot = new Button(".");
        gridPane.add(buttonDot,2,row);

        buttonEqual = new Button("=");
        buttonEqual.setId("buttonEqual");
        gridPane.add(buttonEqual,3,row);

        stackPane.getChildren().add(gridPane);

        //---------------------- DRAG AND DROP
        final Delta dragDelta = new Delta();
        stackPane.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent mouseEvent) {
                // record a delta distance for the drag and drop operation.
                dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
                dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
            }
        });
        stackPane.setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent mouseEvent) {
                primaryStage.setX(mouseEvent.getScreenX() + dragDelta.x);

                primaryStage.setY(mouseEvent.getScreenY() + dragDelta.y);
            }
        });
        //------------------------ END OF DRAG AND DROP

        Scene scene = new Scene(stackPane,250,480);
        scene.setFill(Color.TRANSPARENT);
        scene.getStylesheets().add(Calculator.class.getResource("Style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setMinHeight(480);
        primaryStage.setMinWidth(250);
        primaryStage.show();
    }
}
class Delta { double x, y; }

Style.css

.root{
    -fx-background-color: #000;
    -fx-background-radius: 10;
}
#screen{
    -fx-pref-height: 150px;
    -fx-pref-width: 230px;
    -fx-control-inner-background: #000000;
    -fx-focus-color: #000000;
    -fx-text-box-border: #000000;
    -fx-background-color: #000000;

    -fx-focus-color: black;
    -fx-faint-focus-color: black;
    -fx-text-box-border: black;
}
.button{
    -fx-pref-height: 50px;
    -fx-pref-width: 50px;
    -fx-background-radius: 100;
    -fx-font-size: 15;
    -fx-font-Weight: bold;
    -fx-background-color: #333333;
    -fx-text-fill: #FFFFFF;
}
.button:hover{
    -fx-background-color: #3d3d3d;
}
.button:pressed{
    -fx-background-color: #2e2e2e;
}
#button0{
    -fx-pref-height: 50px;
    -fx-pref-width: 110px;
}
#buttonPercent, #buttonClear, #buttonSign{
    -fx-background-color: #A5A5A5;
    -fx-text-fill: #000000;
}
#buttonPercent:hover, #buttonClear:hover, #buttonSign:hover{
    -fx-background-color: #b0b0b0;
    -fx-text-fill: #000000;
}
#buttonPercent:pressed, #buttonClear:pressed, #buttonSign:pressed{
    -fx-background-color: #969696;
    -fx-text-fill: #000000;
}
#buttonDevide, #buttonTimes, #buttonMinus, #buttonPlus, #buttonEqual{
    -fx-background-color: #FD9500;
}
#buttonDevide:hover, #buttonTimes:hover, #buttonMinus:hover, #buttonPlus:hover, #buttonEqual:hover{
    -fx-background-color: #ffa421;
}
#buttonDevide:pressed, #buttonTimes:pressed, #buttonMinus:pressed, #buttonPlus:pressed, #buttonEqual:pressed{
    -fx-background-color: #f08e00;
}
#buttonClose{
    -fx-background-color: #e00000;
    -fx-background-radius: 100;
    -fx-pref-height: 10px;
    -fx-pref-width: 10px;
    -fx-font-size: 1px;
}
#buttonMinimalize{
    -fx-background-color: #1045c2;
    -fx-background-radius: 100;
    -fx-pref-height: 10px;
    -fx-pref-width: 10px;
    -fx-font-size: 1px;
}

Upvotes: 0

Views: 819

Answers (1)

ChromeKK
ChromeKK

Reputation: 160

To remove this buttons effect add this to .button in Style.css

    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

To read here

To remove black dots in textArea corners you can wrap screen into Pane :

    Pane blackPane = new Pane();
    blackPane.setId("blackPane");
    screen = new TextArea();
    screen.setId("screen");
    screen.setEditable(false);
    blackPane.getChildren().add(screen);
    gridPane.add(blackPane, 0, row, 4, 1);

and add CSS property:

    #blackPane #screen {
    -fx-background-color: black;
    -fx-background-radius: 0;
    }

Again to read here

It worked fine in my case.

And a few tips for the future:

  • Don't mix the view layer with control layer, it's making terrible mess in your code. Add .fxml files where you can create view. You can easy build view in clear way using Scene Builder.

  • Read and execute advice of your IDE(recommended Intellij). You have a lot repeats and complicated, bad formatting pices of code. For example: 

    stackPane.setOnMousePressed(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent mouseEvent) {
        // record a delta distance for the drag and drop operation.
        dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
        dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
    }
});

can be replaced by this:

stackPane.setOnMousePressed(mouseEvent -> {
            // record a delta distance for the drag and drop operation.
            dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
            dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
        });

Upvotes: 1

Related Questions