Introducción a JavaFX
Índice
Sobre JavaFX
JavaFX es un framework moderno para crear interfaces gráficas de aplicaciones de escritorio e internet. La intención detrás de su creación por parte de F3 (Follow Functions) era facilitar la creación de interfaces gráficas responsive. Está escrito en Java nativo y soporta animaciones, renderizado 3D y componentes multimedia.
Al estar programado en multihilo permite realizar operaciones de forma concurrentes y es el estándar para programar interfaces gráficas en Java y se espera que acabe sustituyendo por completo a Swing, aunque en la actualidad sigue siendo ampliamente utilizado en varios proyectos por su madurez, estabilidad y soporte en sistemas legacy.
Apache NetBeans y Jenkins siguen usando Swing, aunque ya han integrado JavaFX en algunos de sus componentes.
JavaFX introdujo el concepto de native deploys que permite que sea instalado como una aplicación en el sistema operativo. Este framework emplea una analogía de diseño para ayudar a entender como funciona la analogía escogida, como un teatro que interpreta una obra.
Por ello la parte de audiencia es el stage y cada parte está interpretada por un scene y una representación pueden existir muchas escenas. Por su parte el scene graph (decorado) contiene los elementos de la escena que son todos de la clase Node.
Componentes de JavaFX
Controles IU
✓ Button: Botones interactivos.
✓ Label: Etiquetas de texto estático.
✓ TextField: Campo de entrada de texto de una línea.
✓ TextArea: Campo de texto de múltiples líneas.
✓ ComboBox: Menú desplegable.
✓ ListView: Listado de ítems.
✓ TableView: Tabla para mostrar datos en forma tabular.
✓ TreeView: Vista de árbol para mostrar jerarquías.
✓ Slider: Deslizador interactivo.
✓ ProgressBar: Barra de progreso.
Formas
- Rectángulo (Rectangle)
- Círculo (Circle)
- Elipse (Ellipse)
- Línea (Line)
- Polígono (Polygon)
- Polilínea (Polyline).
- Path: Para crear formas personalizadas mediante curvas y líneas
Layouts
- HBox: Disposición horizontal de elementos.
- VBox: Disposición vertical de elementos.
- BorderPane: Layout con áreas predefinidas (superior, inferior, izquierda, derecha, centro).
- GridPane: Disposición en formato de grilla.
- StackPane: Apila elementos unos sobre otros.
- AnchorPane: Permite anclar nodos a un lado del contenedor.
- FlowPane: Organiza elementos en filas o columnas, adaptándose al tamaño del contenedor.
Scene Graph
El modelo central de JavaFX es el gráfico de escena, donde todos los elementos (nodos) de la UI están organizados jerárquicamente.
Los nodos incluyen:
- Node: Clase base para todos los elementos gráficos.
- Parent: Nodo que contiene otros nodos (ej. layouts).
- Scene: Representa el contenido de una ventana
Propiedades y enlace (Properties and Bindings)
JavaFX cuenta con un sistema de propiedades y enlaces que permite que los cambios en una propiedad actualicen automáticamente otras propiedades o elementos de UI.
CSS y FXML
- CSS: JavaFX permite aplicar estilos personalizados a los elementos de UI usando hojas de estilo CSS.
- FXML: Lenguaje XML que facilita el diseño de la interfaz de forma declarativa.
FXML
Los ficheros fxml utilizan xml de forma estricta, todos los elementos abiertos deben cerrarse.
Instrucciones de proceso, están entre los símbolos <? ?>, se utilizan para importar elementos que se utilizarán más adelante
<?import javafx.scene.text.Text?>
NameSpace: Utilizado en el nodo raíz para indicar correctamente las propiedades de JavaFX xmlns:fx=»http://javafx.com/fxml»
Componentes, indican un componente de la IU donde los atributos modifican su aspecto
<Label text="Nombre:" GridPane.rowIndex="1" GridPane.ColumnIndex="0"/>Controller
Indicado en el nodo raíz del fichero FXML
fx:controller=»sample.Controller»
Esta clase se encarga de manejar los eventos producidos en la vista siguiendo el patrón Modelo-Vista-Cotrolador (MVC). Para añadir un evento a un nodo, hace falta el atributo onAction seguido de almohadillas y el nombre de la función de la clase Controller:
onAction=»#handlerName»
En esta clase definimos las funciones en Java de la siguiente manera:
public void handlerName(ActionEvent actionEvent) {
}Para acceder a un nodo desde esta clase necesitamos primero indicar un id al nodo mediante su atributo: fx:id=»idNodo» y en la clase Controller mediante la notación @FXML con el que creamos un atributo del tipo de nodo y que tiene como nombre su id:
@FXML
private TipoNodo idNodo;CSS
- Se utilizan principalmente en páginas web, pero pueden utilizarse en cualquier lenguaje de marcas
- Las hojas de estilo separan el contenido del lenguaje de marcas del aspecto de presentación de éste
- Al utilizar CSS ahorramos código porque cuando los estilos se repiten no hace falta repetir todo el código y pueden servir para todo la aplicación
- Esto hace la modificación del aspecto (skin) de la aplicación mucho más sencilla
- Al igual que en las páginas web, podemos definir CSS en distintos niveles de inserción
Los estilos en línea se definen en cada nodo mediante el atributo style y añadiendo el prefijo -fxstyle
style="-fx-font-size: 80px; -fx-fill: AQUA"Los estilos externos se definen en el nodo raíz mediante el atributo stylesheet y la ruta de la hoja de estilos stylesheet=»/css/sample.css»>
● Para aplicar una clase css en un nodo, lo definiremos con la propiedad styleClass= «NombreClase»