Entrada destacada

Como dar estilo a un Scroll Pane de JavaFX utilizando CSS

-

Bien en esta ocasión quiero compartir como darle estilo a un scroll pane de JavaFx, por lo que colocaré el código con las clases que se pueden utilizar para cambiar el aspecto de los objetos o nodos que componen la interfaz del contenedor.

El Scroll pane está compuesto por los siguientes nodos u objetos:

  • Scroll-bar:

    1. Vertical (.scroll-bar:vertical)/Horizontal(.scroll-bar:horizontal): Se refiere a la barra que se muestra para poder realizar el scroll de forma vertical u horizontal. Esta a su vez está compuesta por los siguientes nodos:

      • Increment-button: Este es el botón que se muestra en la scroll-bar para poder realizar el scroll hacia abajo o incrementar la posición del scroll. Este nodo a su vez contiene el siguiente nodo:

        • Increment-arrow: Este nodo es el que muestra la flecha indicando la dirección en la que se mueve el scroll, en este caso sería la flecha apuntando hacia abajo

      • Decrement-button: Este es el botón que se muestra en la scroll-bar para poder realizar el scroll hacia arriba o decrementar la posición del scroll. Este nodo a su vez contiene el siguiente nodo:

        • Increment-arrow: Este nodo es el que muestra la flecha indicando la dirección en la que se mueve el scroll, en este caso sería la flecha apuntando hacia arriba

      • Thumb: Este nodo es el encargado de mostrar la barrita que se desplaza a través de la scroll-bar.

      • Track: Este nodo es el que muestra el fondo de la scroll-bar, es por donde se desplaza el nodo thumb.

  • Corner: Este es el pequeño cuadrado que queda como en la esquina inferior derecha del scroll-pane, es el que divide por así decirlo el final de la scroll-bar horizontal y la scroll-bar vertical

  • Content: Este nodo es el contenedor del scroll-pane, es en donde se coloca el contenido.

Pero para que nos quede más claro lo podemos observar en la siguiente imagen:

Como dar estilo a un scroll-pane de JavaFX utilizando css


A continuación comparto el código css que se utilizaría para poder darle estilo al scroll pane: 

  2.     .scroll-bar:vertical .track{
  3.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  4.     }
  6.     .scroll-bar:horizontal .track{
  7.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  8.     }
  10.     .scroll-bar:horizontal .thumb{
  11.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  12.     }
  14.     .scroll-bar:vertical .thumb{
  15.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  16.     }
  19.     .scroll-bar:vertical *.increment-button,
  20.     .scroll-bar:vertical *.decrement-button{
  21.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  22.     }
  24.     .scroll-bar:vertical *.increment-arrow .content, 
  25.     .scroll-bar:vertical *.decrement-arrow .content{
  26.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  27.     }
  29.     .scroll-bar:vertical *.increment-arrow, 
  30.     .scroll-bar:vertical *.decrement-arrow{
  31.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  32.     }
  35.     .scroll-bar:horizontal *.increment-button,
  36.     .scroll-bar:horizontal *.decrement-button{
  37.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  38.     }
  40.     .scroll-bar:horizontal *.increment-arrow .content, 
  41.     .scroll-bar:horizontal *.decrement-arrow .content{
  42.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  43.     }
  45.     .scroll-bar:horizontal *.increment-arrow, 
  46.     .scroll-bar:horizontal *.decrement-arrow{
  47.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  48.     }
  50.     .scroll-pane .corner{
  51.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  52.     }
  54.     .scroll-pane{
  55.         /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
  56.     }
  57.  
Ubicación: 3VXJ+FJ Santa Lucía, Honduras

Entradas populares

Barra de menu con estilo en JavaFX utilizando CSS

-
Imagen
Barra de menu con estilo en JavaFX utilizando CSS En esta entrada quiero compartir un poco más sobre JavaFx. En estos últimos días he estado trasteando un poco con las interfaces graficas de java sobre todo con la librería JavaFx y bueno, para ser sincero me sentía acostumbrado a trabajar con Swing, sin embargo, como sabrás esta librería ya se encuentra casi en desuso y sobre todo con las nuevas tendencias en diseño pues se vuelve complicado poder darles a nuestros proyectos un estilo moderno. En esta ocasión he decido compartir un poco de lo que he aprendido. Vamos a darle estilo o una barra de menús, dándole un diseño mas acorde a nuestras necesidades, empezaré creando un nuevo proyecto, en mi caso lo haré utilizando el IntelliJ, tu puedes hacerlo en el IDE que más te agrade.     El proyecto lo cree utilizando Maven y correrá con un JDK 11, también y la versión 18.0.1 de JavaFx. Las dependencias en mi archivo POM quedan de la siguiente forma <dependencie...
Leer más

Excepciones al utilizar HTMLEditor de JavaFx

-
Hace unos días estaba intentado utilizar el editor HTML que proporciona JavaFX en un proyecto el cual lo estoy desarrollando en intellij idea, sin embargo, cuando intente correr el código me lanzo algunas excepciones entre ella una classNotFoundException en donde me indicaba que la clase HTMLEditor no se encontraba, para solucionar esa excepción tuve que colocar en el archivo POM la dependencia de JavaFx Web. Luego al intentar correr nuevamente el código me lanzo una nueva excepción:  class javafx.scene.web.HTMLEditor (in unnamed module @0x342c9752) cannot access class com.sun.javafx.scene.control.ControlHelper (in module javafx.controls) because module javafx.controls does not export com.sun.javafx.scene.control to unnamed module @0x342c9752 . Busque en san Google, pero la mayor parte de las soluciones que brindaban era incluir en la VM Options el módulo de JavaFx, pero esta solución es correcta tomando en consideración que el proyecto en el que se está trabajando no tiene las d...
Leer más