CODEWITHSUNDEEP
javafxlabelborder
Łukasz Bocian
Łukasz Bocian

Reputation: 25

Adding label into border, JavaFX

When I'm trying to add label into the gridpane as the second picture shows, it's not working. I have tried many things like adding CSS and it's still not working. Why are lines 113 and 114 not working? (opcje.setStyle("-fx-background-color: #f4f4f4");)

Here is what I have:

enter image description here

Here is what I need:

enter image description here

My code:

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.GridPane;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextField; 
import javafx.stage.Stage; 

public class KCK_lab1_zad2 extends Application { 

@SuppressWarnings("static-access")
public void start (Stage primaryStage) { 

        try {
              primaryStage.setTitle("Narzedzie przetwarzania plikow");

              BorderPane glownyBorderPane = new BorderPane();

              Scene scene = new Scene(glownyBorderPane, 600, 200);

              GridPane lewyGridPane = new GridPane();
              GridPane prawyGridPane = new GridPane();

              glownyBorderPane.setLeft(lewyGridPane);
              glownyBorderPane.setRight(prawyGridPane);
              glownyBorderPane.setMargin(lewyGridPane, new Insets(0, 15, 0, 0));


              Label         zrodlo      = new Label("Źrodlo");
              Label         wynik       = new Label("Wynik");
              TextField     text1       = new TextField();
              TextField     text2       = new TextField();
              Button        przegladaj1 = new Button("Przegladaj...");
              Button        przegladaj2 = new Button("Przegladaj...");

              lewyGridPane.setVgap(15);
              lewyGridPane.setHgap(0);

              lewyGridPane.setPadding(new Insets(15));
              lewyGridPane.setLayoutX(100);
              lewyGridPane.setLayoutY(100);
              lewyGridPane.setMinSize(100, 150);

              text1.setPrefSize(100, 20);
              text2.setPrefSize(100, 20);
              przegladaj1.setPrefSize(100, 20);
              przegladaj2.setPrefSize(100, 20);


              glownyBorderPane.setPadding(new Insets(20, 10, 10, 10));

              Label panelPlikow = new Label("Panel plików");
              panelPlikow.getStyleClass().add("title");
              panelPlikow.setPadding(new Insets(-60, -20, 0, 0));

              panelPlikow.setPrefWidth(150);      
              lewyGridPane.add(panelPlikow, 0, 0);
              lewyGridPane.add(zrodlo, 0, 0);
              lewyGridPane.add(text1, 1, 0);
              lewyGridPane.add(przegladaj1, 2, 0);
              lewyGridPane.add(wynik, 0, 1);
              lewyGridPane.add(text2, 1, 1);
              lewyGridPane.add(przegladaj2, 2, 1);

              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              //grd.prefHeightProperty().bind(root.heightProperty());
              //glownyBorderPane.borderProperty();


              lewyGridPane .setStyle("-fx-border-style: solid inside;");
              lewyGridPane .setStyle("-fx-border-width: 1;");
              lewyGridPane .setStyle("-fx-border-insets: 1;");
              lewyGridPane .setStyle("-fx-border-radius: 1;");
              lewyGridPane .setStyle("-fx-border-color: black;");     


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              Label     opcje           = new Label ("Opcje uruchomienia");
              Button    uruchom         = new Button ("Uruchom przetwarza...");
              Button    pomoc           = new Button ("Pomoc");
              Button    o_programie     = new Button ("O programie");
              Button    zakoncz         = new Button ("Zapisz i zakończ");

              prawyGridPane.setVgap(0);
              prawyGridPane.setHgap(0);
              prawyGridPane.setPrefSize(150, 200);
              prawyGridPane.setMaxWidth(150);

              prawyGridPane.setPadding(new Insets(15));
              prawyGridPane.setPrefSize(400, 300);


              opcje.setPrefSize(150, 20);
              uruchom.setPrefSize(150, 20);
              o_programie.setPrefSize(150, 20);
              zakoncz.setPrefSize(150, 20);

              opcje.getStyleClass().add("title");
              opcje.setPadding(new Insets(-34, -20, 0, 0));


              VBox vbox = new VBox();
              prawyGridPane.add(vbox, 0, 0);


              opcje.setPrefWidth(150); 
              opcje.setStyle("-fx-background-color: #f4f4f4");
              panelPlikow.setStyle("-fx-background-color: #f4f4f4");
              vbox.getChildren().add(opcje);
              vbox.getChildren().add(uruchom);
              vbox.getChildren().add(pomoc);
              vbox.getChildren().add(o_programie);
              vbox.getChildren().add(zakoncz);

              vbox.toBack();
              //opcje.toFront();



              uruchom.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              pomoc.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              o_programie.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              zakoncz.prefWidthProperty().bind(glownyBorderPane.widthProperty());

              uruchom.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              pomoc.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              o_programie.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              zakoncz.prefHeightProperty().bind(glownyBorderPane.heightProperty());

              /*

              opcje .setStyle("-fx-font: 28px Vivaldi;");
              opcje .setStyle("-fx-font-color: red;");
              opcje .setStyle("-fx-background-color: white;");
              opcje .setStyle("-fx-translate-y: -16;");
              opcje .setStyle("-fx-content-display: top;");
              opcje .setStyle("-fx-background-color: black;");
              opcje.setTextFill(Color.RED);
              opcje.setStyle("-fx-background-color: white");
              */


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


              //grd.prefHeightProperty().bind(root.heightProperty());
              //glownyBorderPane.borderProperty();



              prawyGridPane .setStyle("-fx-border-style: solid inside;");
              prawyGridPane .setStyle("-fx-border-width: 1;");
              prawyGridPane .setStyle("-fx-border-insets: 1;");
              prawyGridPane .setStyle("-fx-border-radius: 1;");
              prawyGridPane .setStyle("-fx-border-color: black;");      


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              primaryStage.setScene(scene);
              primaryStage.setMinHeight(250);
              primaryStage.setMinWidth(580);
              primaryStage.show();

      } catch(Exception e) {
          e.printStackTrace();
      }
  }

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

Upvotes: 2

Views: 2437

Answers (1)

Topaco
Topaco

Reputation: 49251

The problem is the padding of the title-labels. To recognize this, set the background-colors of the title-labels, e.g. to green, set the padding to 0 and increase it step by step towards your value. If you do that, the text shifts up (what is desired), but the content (and thus the background) becomes smaller and finally disappears (what you did not intend). Overall, it does not work right with padding:

enter image description here

If you really want to keep your solution you can compensate for the problem by using the graphic-property of the label usually applied to add an icon to the label.

Replace

 Label panelPlikow = new Label("Panel plików");

with 

 Label panelPlikow = new Label();
 panelPlikow.setGraphic(new Label(" Panel plików "));
 panelPlikow.getGraphic().setStyle("-fx-background-color: #f4f4f4;");

and analogously for the other button. That results in:

enter image description here

However, I don't know if it works in combination with your title-styleclass since you haven't post it. You have to try that.

I would like to point out that there are conceptually better ways to achieve what you want!

One possibility that comes close to your solution is, not to add the GridPane directly to the BorderPane, but a Pane, with the Pane containing the GridPane and the label. Here, the label can be positioned freely without a padding.

Another possibility is to use the Borders-control from ControlsFX (http://fxexperience.com/controlsfx/features/). It does exactly what you want, i.e. it surrounds an arbitrary control with a border and you can optionally define a title.

 GridPane lewyGridPane = new GridPane();                        
 Node leftWithBorder = Borders.wrap(lewyGridPane).lineBorder().title("Panel plików").color(Color.BLACK).buildAll();
 GridPane prawyGridPane = new GridPane();
 Node rightWithBorder = Borders.wrap(prawyGridPane).lineBorder().title("Opcje uruchomienia").color(Color.BLACK).buildAll();

 glownyBorderPane.setLeft(leftWithBorder);
 glownyBorderPane.setRight(rightWithBorder);

Of course, you have to remove the currently existing GridPane-borders and title-labels and you have to adapt margins, paddings, preferred sizes etc. Moreover you have to download and add the controlsfx-jar to the build path.

With the ControlsFX-Borders-control the GUI looks almost identical:

enter image description here

Upvotes: 1

Related Questions