CSS3 es una tecnología que ha tenido una evolución en el tiempo, que actualmente se encuentra en su versión 3, como su propio nombre indica.
Sus siglas corresponden a “Cascading Style Sheets”, que tiene el siguiente significado:
Cascading, que significa que los estilos que aplicamos a los elementos de una página web se propagan a los elementos que contiene, se propagan en cascada.
Style, porque mediante CSS lo que hacemos es aplicar estilos visuales a los distintos elementos de nuestra página web.
Sheets, que significa hojas, porque los estilos de una página web se añaden en ficheros aparte, en ficheros con la extensión .css de manera genera
Una definición más formal de CSS sería la siguiente que aparece en Wikipedia:
“CSS es un lenguaje de diseño gráfico que permite definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web e interfaces de usuario escritas en HTML.”
En la propia definición de CSS vemos que está muy ligado desde su nacimiento a HTML. Desde que nació, el objetivo de CSS fue poner un poco de orden a la hora de aplicar los estilos a las páginas web.
Vamos a desarrollar una aplicación en JavaFX donde modificaremos el aspecto visual de la interfaz aplicando tres tipos de estilos diferentes, estos estilos se irán reflejando según vamos pulsando unos botones que activarán los estilos.
Para ello comenzamos creando un proyecto JavaFX (FXML Application) en NetBeans, donde me saltare la parte de cómo crear un proyecto JavaFX en Netbeans dado que esto lo he explicado en un artículo anterior.
Una vez creado nuestro proyecto, procedemos a añadir un nuevo Java Packge al que le daremos como nombre “estilos” y será el paquete que contendrá los diferentes estilos que vamos a necesitar.
En la siguiente captura se puede visualizar el resultado de proyecto una vez añadido los estilo.
A continuación, el código CSS de los estilos.
CSS del primer estilo (estilo1.css).
#titulo { -fx-font-family: "Hervetica";
-fx-font-style: italic;
-fx-font-size: 36px;
-fx-text-fill: #FFFFFF;
}
#fondo { -fx-background-color: #000000; }
Button { -fx-background-color: #008287;
-fx-border-color: #FFFFFF;
-fx-border-width: 2;
-fx-text-fill: #FFFFFF;
-fx-font-family: "Times New Roman";
-fx-font-style: italic;
-fx-font-size: 28px;
-fx-background-radius: 10101010;
-fx-border-radius: 10101010;
}
#autor { -fx-font-family: "Hervetica";
-fx-text-fill: #FFFF00;
-fx-font-size: 12px;
}
Button:hover { -fx-background-color: #333333;
-fx-font-size: 22px;
}
Button:pressed { -fx-background-color: #FFFFFF;
-fx-text-fill: #000000;
-fx-font-weight: bold;
}
CSS del segundo estilo (estilo2.css).
#titulo { -fx-font-family: "Times New Roman";
-fx-font-style: italic;
-fx-font-size: 36px;
-fx-text-fill: #FFFFFF;
}
#fondo { -fx-background-color: #F90000; }
Button { -fx-background-color: #E6FD74;
-fx-border-color: #FFFFFF;
-fx-border-width: 2;
-fx-text-fill: #FF3399;
-fx-font-family: "Georgia";
-fx-font-style: italic;
-fx-font-size: 28px;
-fx-background-radius: 10101010;
-fx-border-radius: 10101010;
}
#autor { -fx-font-family: "Times New Roman";
-fx-text-fill: #660099;
-fx-font-size: 12px;
}
Button:hover { -fx-background-color: #333333;
-fx-font-size: 22px;
}
Button:pressed { -fx-background-color: #FFFFFF;
-fx-text-fill: #000000;
-fx-font-weight: bold;
}
CSS del tercer estilo (estilo3.css).
#titulo { -fx-font-family: "Berlin Sans FB";
-fx-font-style: italic;
-fx-font-size: 36px;
-fx-text-fill: #FFFFFF;
}
#fondo { -fx-background-color: #660099; }
Button { -fx-background-color: #02CF08;
-fx-border-color: #FFFFFF;
-fx-border-width: 2;
-fx-text-fill: #FFCC00;
-fx-font-family: "Comic Sans MS";
-fx-font-style: italic;
-fx-font-size: 28px;
-fx-background-radius: 10101010;
-fx-border-radius: 10101010;
}
#autor { -fx-font-family: "Berlin Sans FB";
-fx-text-fill: #0097D7;
-fx-font-size: 12px;
}
Button:hover { -fx-background-color: #333333;
-fx-font-size: 22px;
}
Button:pressed { -fx-background-color: #FFFFFF;
-fx-text-fill: #000000;
-fx-font-weight: bold;
}
Para el diseño de la interfaz he seleccionado un AnchorPane al cual le añadí 5 botones y 1 etiquetas para el diseño de la interfaz.
En este punto, en las propiedades del AnchorPane he seleccionado el fichero CSS de estilo base y le he dado un identificados para poder identificarlo y de esta manera poder aplicar los diferentes estilos a este control, lo mismo he realizado con la etiqueta de título al cual le puse como identificado “titulo”
A los botones también le he dado un fx:id para poder usarlos con el fichero Controlador de la interfaz y he seleccionado las acciones correspondientes de cada botón, la cual se encuentra desarrollada en el fichero controlador.
Código del fichero controlador (VentanaEstilosController.java)
package aplicacionestilos.AplicacionEstilos;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
/**
* @author Oscar Jaramillo
*/publicclassVentanaEstilosControllerimplementsInitializable{
@FXMLprivate AnchorPane panel;
@FXML Button btnEstilo1;
@FXML Button btnEstilo2;
@FXML Button btnEstilo3;
@FXML Button btnResetear;
@FXML Button btnSalir;
@FXMLprivatevoidprimerEstilo(ActionEvent event){
panel.getStylesheets().clear();
panel.getStylesheets().add("/estilos/estilo1.css");
}
@FXMLprivatevoidsegundoEstilo(ActionEvent event){
panel.getStylesheets().clear();
panel.getStylesheets().add("/estilos/estilo2.css");
}
@FXMLprivatevoidtercerEstilo(ActionEvent event){
panel.getStylesheets().clear();
panel.getStylesheets().add("/estilos/estilo3.css");
}
@FXMLprivatevoidresetear(ActionEvent event){
panel.getStylesheets().clear();
panel.getStylesheets().add("/estilos/estiloBase.css");
}
@FXMLprivatevoidsalir(ActionEvent event){
System.exit(0);
}
@Overridepublicvoidinitialize(URL url, ResourceBundle rb){
// TODO
}
}
Una vez ejecutamos la aplicación, se nos muestra la ventana con el estilo por defecto que le hemos desarrollado, el resultado es el siguiente:
Si damos clic en el primer botón “Aplicar estilo 1”, se nos muestra el primer estilo definido.
Si damos clic en el botón “Aplicar estilo 2”, se nos muestra el segundo estilo, tal cual se muestra en la siguiente captura.
Si damos clic en el botón “Aplicar estilo 3”, se nos mostrara el tercer estilo, tal como se muestra en la siguiente captura.
Si pasamos el ratón por encima de los botones, esto aplican el siguiente cambio de estilo, tal cual se muestra en la siguiente captura donde he pasado el cursor por encima del botón “Aplicar estilo 1”.
Si presionamos sobre los botones, estos aplican otro cambio de estilo, tal cual se muestra en la siguiente captura donde he presionado el botón “Aplicar estilo 1”.
Si damos clic en el botón “Resetear”, este vuelve a aplicar el estilo por defecto de la aplicación, el cual es el mismo el modo diseño y cuando la aplicación se ejecuta por primera vez.
Y dando clic en el botón “Salir” se cierra la aplicación finalizando su ejecución.
Saludos,
@ojaramillo
