GroupBox / TitledBorder en JavaFX 2?
¿Hay algo como un GroupBox o TitledBorder disponible en JavaFX 2?
Gracias por cualquier sugerencia: -)
6 answers
No hay tal control estándar, pero es fácil crear el suyo propio. Aquí hay una implementación de ejemplo:
/** 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);
}
}
Y el css que lo acompaña:
.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;
}
El código es de un ejemplo Que creé en respuesta a un mensaje de discusión del foro Oracle JavaFX "Equivalente a BorderFactory.createTitledBorder " .
La salida del programa de ejemplo es como se muestra a continuación.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-18 15:06:46
Usé TitledPane
con setCollapsible(false)
. Parece más consistente que usar estilos CSS. Aquí está el resultado
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-18 04:22:43
Versión FXML de la respuesta de jewelsea:
TitledBorder (Renombré el BorderedTitledPane a 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);
}
}
Uso de FXML:
<?import com.example.controls.*?>
<TitledBorder title="title" >
<Label text="label with text" />
</TitledBorder>
¡No olvides la hoja de estilos!
Utilice este CSS para una fuente normal:
.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;
}
Usando este CSS ahora se ve así:
Actualización: Problemas cuando el título es más largo que el contenido:
¿Alguna pista para solucionar este problema?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-14 11:57:44
Aquí hay un documento FXML que se puede cargar en SceneBuilder que tiene una funcionalidad similar:
<?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>
Si necesita aumentar el tamaño del texto / borde de la etiqueta, solo debe editar el CSS y el topAnchor del AnchorPane hijo y el primer argumento de-fx-border-insets del AnchorPane padre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-19 17:33:28
GroupBox - que es el diseño de grupo habitual, por lo que veo.
TitledBorder - se parece a un TitledPane (que suele ser un componente de Acordeón, pero podría ser un control existente por separado).
JavaFX-2 analogs se ve diferente de la suya (pero no significativamente), y como de costumbre, puede utilizar diferentes formas de control de cambio de apariencia: css, control de la piel de sustitución, etc
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-13 19:05:42
Aquí hay una implementación de GroupBox basada en TitledPane. Proporciona tres métodos para establecer el título, el contenido y el relleno de contenido del 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);
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-12 04:37:15