GroupBox / TitledBorder w JavaFX 2?

Czy jest coś w rodzaju GroupBox lub TitledBorder dostępnego w JavaFX 2?

Dzięki za podpowiedź: -)

Author: stefan.at.wpf, 2013-02-13

6 answers

Nie ma takiej standardowej kontroli, ale łatwo jest stworzyć własną. Oto przykładowa implementacja:

/** Places content in a bordered pane with a title. */
class BorderedTitledPane extends StackPane {
  BorderedTitledPane(String titleString, Node content) {
    Label title = new Label(" " + titleString + " ");
    title.getStyleClass().add("bordered-titled-title");
    StackPane.setAlignment(title, Pos.TOP_CENTER);

    StackPane contentPane = new StackPane();
    content.getStyleClass().add("bordered-titled-content");
    contentPane.getChildren().add(content);

    getStyleClass().add("bordered-titled-border");
    getChildren().addAll(title, contentPane);
  }
}

I towarzyszący mu css:

.label {
  -fx-font: 28px Vivaldi;
}

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -16;
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

Kod pochodzi z przykładu , który stworzyłem w odpowiedzi na post Oracle JavaFX forum thread "odpowiednik BorderFactory.createTitledBorder " .

Wyjście przykładowego programu jest jak pokazano poniżej.

gettysburg

 36
Author: jewelsea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-18 15:06:46

Użyłem TitledPane z setCollapsible(false). Wygląda bardziej spójnie niż Używanie stylów CSS. Oto wynik

Tutaj wpisz opis obrazka

 27
Author: Andriy Kryvtsun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-18 04:22:43

FXML wersja jewelsea ' s odpowiedź:

TitledBorder (zmieniłem nazwę BorderedTitledPane na TitledBorder)

package com.example.controls;

import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;

public class TitledBorder extends StackPane 
{
    private Label titleLabel = new Label();
    private StackPane contentPane = new StackPane();
    private Node content;



    public void setContent(Node content)
    {
        content.getStyleClass().add("bordered-titled-content");
        contentPane.getChildren().add(content);
    }


    public Node getContent()
    {
        return content;
    }


    public void setTitle(String title)
    {
    titleLabel.setText(" " + title + " ");
    }


    public String getTitle()
    {
        return titleLabel.getText();
    }



    public TitledBorder() 
    {
        titleLabel.setText("default title");
        titleLabel.getStyleClass().add("bordered-titled-title");
        StackPane.setAlignment(titleLabel, Pos.TOP_CENTER);

        getStyleClass().add("bordered-titled-border");
        getChildren().addAll(titleLabel, contentPane);
      }

}

Użycie FXML:

<?import com.example.controls.*?>

<TitledBorder title="title" >       
    <Label text="label with text" />        
</TitledBorder>   

Nie zapomnij arkusza stylów!

Użyj tego CSS dla normalnej czcionki:

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -10; /* play around with this value when changing the title font to get a vertically centered title */
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

Używając tego CSS wygląda teraz tak:

Tutaj wpisz opis obrazka

Aktualizacja: Problemy gdy tytuł jest dłuższy niż treść:

Tutaj wpisz opis obrazkaJakaś wskazówka, aby rozwiązać ten problem?

 9
Author: stefan.at.wpf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 11:57:44

Oto dokument FXML, który można załadować do Scenebuildera o podobnej funkcjonalności:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane style="-fx-border-insets: 8 0 0 0; -fx-background-color: #FFFFFF; -fx-border-color: black;">
    <children>
        <Label alignment="TOP_LEFT" layoutX="14.0" style="-fx-padding: 0 5; -fx-background-color: inherit;" text="Title" />
        <AnchorPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="10.0" />
    </children>
</AnchorPane>

Jeśli chcesz zwiększyć rozmiar tekstu / obramowania etykiety, musisz tylko edytować CSS i topAnchor dla elementu podrzędnego AnchorPane oraz pierwszy argument-fx-border-insets dla elementu nadrzędnego AnchorPane.

 2
Author: Doctor Parameter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-19 17:33:28

GroupBox - czyli zwykły układ Grupowy, o ile widzę.

TitledBorder-wygląda jak TitledPane (który zwykle jest składnikiem akordeonu, ale może być odrębnie istniejącym sterowaniem).

Analogi JavaFX-2 wyglądają inaczej niż Twoje (ale nie znacząco) i jak zwykle możesz użyć różnych sposobów zmiany wyglądu sterowania: css, wymiana skórek sterowania itp

 0
Author: Alexander Kirov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-13 19:05:42

Oto implementacja GroupBox oparta na TitledPane. Zapewnia trzy metody ustawiania tytułu, zawartości i wypełnienia zawartości GroupBox.

public final class GroupBox extends Parent {

    private StackPane _stackPane;
    private TitledPane _titledPane;

    public GroupBox() {
        _stackPane = new StackPane();
        _titledPane = new TitledPane();
        setContentPadding(new Insets(10));
        _titledPane.setCollapsible(false);
        _titledPane.setContent(_stackPane);
        super.getChildren().add(_titledPane);
    }

    public GroupBox(String title, Node content) {
        this();
        setText(title);
        setContent(content);
    }

    public GroupBox(String title, Node content, Insets contentPadding) {
        this(title, content);
        setContentPadding(contentPadding);
    }

    public void setText(String value) {
        _titledPane.setText(value);
    }

    public void setContent(Node node) {
        _stackPane.getChildren().add(node);
    }

    public void setContentPadding(Insets value) {
        _stackPane.setPadding(value);
    }
}
 0
Author: Mohamed Handosa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-12 04:37:15