Es importante comprender el código bien previamente a usarlo a tu proyecto si tquieres aportar algo puedes dejarlo en los comentarios.
Solución:
Solución: cómo eliminar un borde de un panel dividido
Anule la definición de color -fx-box-border si no desea que se muestre el borde:
split.setStyle("-fx-box-border: transparent;");
Panel dividido con borde eliminado
Código de muestra
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class SplitPaneBorderRemover extends Application
public static void main(String[] args) throws Exception launch(args);
@Override public void start(final Stage stage) throws Exception
StackPane r1 = new StackPane();
r1.setPrefSize(200, 150);
r1.setStyle("-fx-background-color: palegreen;");
StackPane r2 = new StackPane();
r2.setPrefSize(200, 150);
r2.setStyle("-fx-background-color: coral;");
SplitPane split = new SplitPane();
split.getItems().setAll(
r1, r2
);
split.setStyle("-fx-box-border: transparent;");
StackPane layout = new StackPane();
layout.getChildren().setAll(split);
layout.setStyle("-fx-padding: 20px; -fx-background-color: cornsilk");
stage.setScene(new Scene(layout));
stage.show();
Respuestas a preguntas adicionales
¿De dónde viene el borde que he marcado con la flecha roja?
Es un estilo de fondo en la hoja de estilo CSS predeterminada (caspian.css para JavaFX 2.2 o modena.css para Java 8)).
¿Por qué establecer -fx-border-style en none hace que se ignore -fx-border-color mientras que -fx-border-width todavía tiene un efecto (como el relleno) en cómo se ven las cosas?
Porque el borde del panel dividido se muestra usando una definición de fondo en lugar de una definición de borde. Todos los estilos CSS de control de JavaFX predeterminados funcionan de esta manera. Establecen múltiples fondos superpuestos para lograr técnicas de borde en lugar de establecer un borde explícito attribute.
Entender cómo funciona la respuesta
Aunque esta respuesta es realmente una simple línea, me tomaré un tiempo para explicar aquí por qué funciona. Perdón si esta explicación hincha la respuesta. Aquellos que ya conocen esta información pueden ignorar esta parte de la respuesta.
Sigo teniendo problemas para entender el concepto
Dedique algún tiempo a leer la guía de referencia de JavaFX css, un poco seco, lo sé, pero es una lectura esencial si desea comprender el estilo de JavaFX css.
También hay un tutorial oficial de Oracle para CSS, pero no le enseñará tanto como leer la referencia de CSS y estudiar las hojas de estilo predeterminadas que vinculé anteriormente.
Extraje declaraciones relevantes de la referencia css y las cité aquí:
JavaFX tiene un amplio conjunto de extensiones de CSS que admiten funciones como derivación de color, búsqueda de propiedades y múltiples colores de fondo y bordes para un solo nodo. Estas características añaden un nuevo poder significativo para los desarrolladores y diseñadores y se describen en detalle en este documento.
El -fx-box-border, que se establece en transparente para eliminar el borde, no es realmente un borde, es un color buscado que se ha aplicado a uno de los múltiples fondos del panel dividido.
Con los colores buscados, puede hacer referencia a cualquier otra propiedad de color que se establezca en el nodo actual o en cualquiera de sus padres. Esta es una característica muy poderosa, ya que permite especificar una paleta genérica de colores en la escena y luego usarla en toda la aplicación. Si desea cambiar uno de esos colores de paleta, puede hacerlo en cualquier nivel del árbol de la escena y afectará a ese nodo y a todos sus descendientes. Los colores buscados no se buscan hasta que se aplican, por lo que están activos y reaccionan a cualquier cambio de estilo que pueda ocurrir, como reemplazar un color de paleta en tiempo de ejecución con la propiedad “estilo” en un nodo.
En el siguiente ejemplo, todos los colores de fondo de todos los botones utilizan el color buscado “abc”.
.root abc: #f00
.button -fx-background-color: abc
La definición predeterminada de -fx-box-border para el estilo modena.css de Java 8 es:
/* A little darker than -fx-color and used to draw boxes around objects such
* as progress bars, scroll bars, scroll panes, trees, tables, and lists.
*/
-fx-box-border: ladder(
-fx-color,
black 20%,
derive(-fx-color,-15%) 30%
);
El estilo predeterminado para un panel dividido es como “Caja similar a una cosa”:
/* ==== BOX LIKE THINGS ================================================= */
.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view,
.html-editor
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-padding: 1;
. . .
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane
-fx-background-color: -fx-box-border, -fx-background;
Entonces, analizando el CSS, puede ver que, para un panel dividido desenfocado, hay dos fondos definidos (ya que la definición más reciente o más específica de -fx-background-color para .split-pane gana las extrañas reglas de aplicación de css). El fondo interior está coloreado como -fx-background y se inserta un píxel. El fondo exterior está coloreado como -fx-box-border y no está insertado. El relleno para el panel dividido se establece en un píxel. Esto evita que el contenido del panel dividido sobrescriba el borde de un píxel que lo rodea.
La solución en esta respuesta funciona al anular la definición de color de búsqueda en el código específicamente para una instancia de panel dividida dada mediante el método setStyle. Al establecer -fx-box-border en transparente (aunque quizás null podría haberse utilizado igualmente y podría ser más eficiente), el borde está configurado para no ser visible (aunque todavía está allí y el relleno permanece en el CSS a 1 píxel).
Una modificación adicional del CSS (aplicando su propia hoja de estilo de usuario para anular la clase de estilo de panel dividido predeterminada) podría eliminar este relleno de un píxel si lo desea:
.split-pane
-fx-background-color: -fx-control-inner-background;
-fx-background-insets: 0;
-fx-padding: 0;
Ahora todo rastro del borde se ha ido y su contenido es libre de llenar toda el área del panel dividido, incluida el área de 1 píxel donde solía estar el borde. Sin embargo, prefiero el cambio mínimo de simplemente configurar -fx-box-border en transparente porque entonces las definiciones de estilo de usuario son pequeñas y no detallan mucho del estilo predeterminado.
Por ejemplo, establezca -fx-box-border: red; y obtendrá un borde rojo de 1px alrededor del panel dividido.
Sí, eso se debe a que el área de fondo predeterminada que el color -fx-box-border está coloreando es de solo 1 píxel de ancho y acaba de establecer explícitamente el color del píxel en rojo.
Supongo que es el borde de la caja en el componente de relleno.
No, como se describió anteriormente, la razón es porque el fondo -fx-box-border está insertado en 0 píxeles desde el borde de la región y el fondo interno -fx-background-color está insertado a 1 píxel desde el borde de la región, dejando 1 píxel de ancho coloreado con el -fx-box-border. Todo lo que hace -fx-padding en esta instancia es asegurarse de que el contenido del panel dividido no se dibuje sobre el fondo exterior de 1 píxel del panel dividido.
Luego, configure -fx-padding: 5; en split. El borde del cuadro rojo desaparece y aparece otro borde gris.
El “borde gris” siempre estuvo ahí – es el segundo fondo interior definido en el estilo CSS de panel dividido (el -fx-background uno). Y el color de fondo predeterminado -fx-es gris. Al establecer -fx-padding en 5, está diciendo que inserte el contenido del panel dividido a 5 píxeles del borde exterior de la región del panel dividido. Esto permite que se muestre el fondo predeterminado.
Si su contenido tuviera algunas áreas transparentes y no llenó toda la región disponible del panel dividido, entonces también habría visto este color gris -fx-background-color mostrarse en esas áreas transparentes.
Si lo que deseaba era lograr un borde de 5 píxeles alrededor de su contenido en color -fx-box-border, entonces necesitaría ajustar tanto el relleno como las inserciones de borde, por ejemplo:
.split-pane
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 5;
-fx-padding: 5;
Si el análisis manual del relleno, las inserciones de fondo, las reglas de derivación de estilo CSS, etc. para una aplicación grande parece desalentador, sepa que hay herramientas de apoyo para ayudar a comprender tanto la estructura del gráfico de escena como la aplicación CSS. Las herramientas a utilizar son el analizador css de SceneBuilder para el análisis css en tiempo de diseño y ScenicView para el análisis css y scenegraph en tiempo de ejecución.
Puedes sustentar nuestra ocupación escribiendo un comentario o valorándolo te lo agradecemos.