Programación Visual

BY: IVAN SANCHEZ

UPSE - 2017
Objetivos de la Materia
Aprender programación dirigida por eventos (event-driven programming).
Aprender mecanismos de Validación de Información Ingresada por el Usuario
Explorar los diversos tipos de componentes de una Interfaz Grafica.
Si el tiempo alcanza y Uds. son pilas, entonces veremos como crear simples RIAs (Rich Internet
Applications).
Modelo 4Mat
• Y si? • Por
que?
Mejoran
Corregir
experiencia
errores.
humano
Creatividad
maquina

A traves de Interfaces
JavaFX, Graficas de
MVC y Usuario
FXML GUI
• Como? • Que
 Syllabus
El syllabus aun esta en elaboración, puesto que esta
materia recién se me asigno ya que el profesor anterior
resigno.
A breves rasgos veremos lo detallado en la diapositiva
anterior con un fuerte enfoque en Event-Driven
Programming.
Que esperar?
Mucha programación, mucho código
Hacer interfaz graficas que corran en el escritorio (veremos acerca de otras plataformas si se
portan bien).
Trabajar en Parejas.
Proyectos: Valen el 30% de la nota. (Si no hacen los proyectos, ya valieron).
Examen: Practico y Teórico.
Bonus Points: Por hacer tareas extra (Autoaprendizaje, Tareas opcionales, Videos, asistir a
eventos relacionados con la materia, por mostrar amor a la programación sobre todas las cosas).
Introducción a la
Programación Visual
OBJETIVO: DAR A CONOCER LOS PRINCIPIOS BÁSICOS DE LA
PROGRAMACIÓN VISUAL.
 Programación Visual
Esta materia se deberia llamar Diseno de GUI.
Programacion Visual se refiere mas a los
lenguajes de programacion Visual (VPLs).
Los VPLs permiten a los usuarios crear
programas mediante manipulación grafica de
elementos en pantalla.
Nosotros haremos eso???
◦ Parcialmente!
 Interfaces de Usuario (UI)
Permiten al usuario interactuar con dispositivos electrónicos.
◦ Interacción Humano Machina (Human-Machine Interaction).

Su meta es permitir la operación de las maquinas de manera eficiente.

Las UI deben proveer retroalimentación al usuario para poder tomar decisiones.
Las interfaces de usuario deben ser Ergonómicas (comodas, funcionales y efectivas para el usuario).
UI deben ser intuitivas (Autoexplicativas).
Por lo general, se espera que las UI minimizen el input que debe realizar el usuario para obtener un
resultado.
También se espera que las UI minimicen el output innecesario que se presenta a los operadores
humanos.
 Interfaces de Usuario (UI)
Contienen partes de Software y Hardware
Hardware (Dispositivos de I/O):
TouchPads
Mouse y Teclado con Panatalla
Kinect
Sensores

Software
GUI
CLI
VR
Reflexión
Conversemos con nuestro compañero y en un papel anotemos las ventajas y desventajas que
observamos de las siguientes interfaces de interacción de Usuario:
CLI
Interfaces de Comando por Voz
GUIs
VR
 Necesidad de las GUI
GUI: Graphic User Interface
Hacen mas fácil y accesible el Software.
Una interfaz intuitiva disminuye la curva de
aprendizaje de uso del software.
Es mas fácil recordar botones y menus que
comandos CLI.
WYSIWYG
 Aspectos de una Buena Interfaz
8 Aspectos se consideran al momento de diseñar una buena interfaz.
Claridad: Evitar ambigüedad.
Concisa: no sobrecargar la Interfaz
Familiar: Mantener un uso consistente de los elementos que el usuario ya conoce.
Responsiva: Debe Proveer Feedback.
Consistente: Permite a los usuarios reconocer patrones de uso.
Estética: Experiencia placentera. Usuarios felices son buenas noticias.
Eficiencia: la Interfaz debe ayudarnos a ser mas productivos.
Clemente: Una buena interfaz no debe castigar a sus usuarios por sus errores, debe proveer medios
para reparar los posibles danos.
Buena Interfaz de Usuario?
Otras Interfaces de Usuario
 Social Natural User Interface
Se enfocan en el interacciones
Sociales.
Explorar la capacidad de los
humanos de interactuar con
maquinas a través del
movimiento, habla, mirada y
otras tecnologías que van mas
alla del mouse y teclado
Mas Social NUI
Y que hay de VR?
Vamos a Aprender a hacer cosas
Bacanes?
Pues NOOOOOOO!
Cosas bacanes como estas requieren que sepamos primero acerca de interfaces de usuario en
Pantallas.
Tambien requieren que sepamos programacion orientada a Eventos.
Pero de esta clase pueden partir a hacer cosas mas impresionantes.
POLA – Principio de la Minima Sorpresa
El principio de la minima Sorpresa (Principle of
minimun astonishement - POLA) dice:
Los seres humanos por lo general se enfocan en una
sola cosa en un momento dado.
Las cosas muy novedosas o sorprendentes deben
minimizarse (o introducirse de a poco).
GUI: Elementos Basicos
Por lo general, las GUI mas populares tienen:
Puntero
Dispositivo Apuntador
Iconos
Escritorio
Ventanas
Menu
Intro a JAVAFX
OBJETIVOS: FAMILIARIZARSE CON EL SISTEMA DE PANTALLAS DE
JAVAFX
 Diferentes Sabores
Java fue hecho para escribir código una vez y
correrlo en multiples arquitecturas
Pero que pasa cuando las arquitecturas tienen
diferente look and feel.
AWT – Abstract Window Toolkit
AWT nos daba una pequeña capa que exponía ventana y controles nativos a la plataforma.
En principio era Util
Sin embargo:
◦ La GUI se veía diferente en diferentes plataformas. (diferencias cosmeticas.).
◦ Diferencias (Quirks) de uso en el comportamiento e interaccion en cada plataforma.
◦ Requeria mucho conocimiento de cada plataforma para lanzar nuevos controles por parte de los
creadores del Lenguaje.
Swing
Viene del JFC (Java Foundation Classes).
Se viene de JFC desde Java 1.2 en 1998.
◦ Swing es tedioso y horrible.

Swing dibujaba sus propios componentes (no dependía de la plataforma base).

◦ Esto se conoce como Lightweigth UI (UI Liviana).

Pero por debajo Swing seguía usando AWT para imput, pero en una nueva UI.
Swing tenia Skinning (Skins o pieles).
◦ Podiamos cambiar el Look de la GUI fácilmente.

Swing se uso y se usa mucho… pero apareció algo mejor…

JAVAFX
Comenzó como lenguaje de Scripting (Los Javamaniacos lo consideramos asqueroso).
Ahora todo es JAVA Nativo (SIIIII)
Ahora JAVAFX se lanza con cada nueva versión de JAVA
◦ JAVAFX ha madurado!
◦ Estamos en JAVAFX8 (en Java 8).
◦ Igual se sigue soportando Swing.
JavaFX
JavaFX es un conjunto de paquetes graficos y de multimedia que permite a los desarrolladores:
Diseñar
Crear
Probar
Depurar
Desplegar
Aplicaciones Enriquecidas que funcionen de manera consistente en cualquier ecosistema JAVA.
JavaFX - Características
Escrita como un API de JAVA, JavaFX puede referenciar a cualquier librería de JAVA.
La apariencia (Look and Feel) de las aplicaciones en JavaFX pueden ser personalizadas a través
de Hojas de Estilo en Cascada (CSS).
◦ CSS separa la apariencia y estilo de la implementación
◦ Disenadores a Disenar, Programadores a programar.

La interfaz grafica se desacopla de la parte de negocios (dominio).

◦ Escribimos la GUI en FXML .
◦ Escribimos la lógica de aplicación en Java.

Java Scene Builder: Nos permite crear interfaces sin codigo (El Scene builder escribe el FXML por
nosotros).
JavaFX - Características
WebView: Compornente que usa WebKitHTML para embeber paginas web en contenerdores JavaFX.
◦ Soporte para funcionalidades de HTML5 como webSockets está disponible desde JavaFX8.
Interoperabilidad conSwong.
Controles Embebidos.
◦ Controles propios de JavaFX que permiten desarrollar GUI complejas.
Skins (Via CSS):
◦ Permiten cambiar el look and feel (apariencia) con facilidad.
Tema Modena: Este tema de apariencia moderno es el estandart.
Graficos 3D
◦ Formas 3D (Cilindros, cajas, esferas).
◦ Iluminacion.
Canvas: Dibuja directamente sobre el lienzo!
JavaFX - Características
Soporte de Impresión
Soporte Multitouch.
Soporte de Aceleracion de Hardware Grafico.
Despliegue Autocontenido: Instalable como cualquier aplicativo de tu SO (solo da Clicks y ya).
JavaFX - Multiplataforma
Se recomienda usar Java 7 en adelante.
Como la mayoría de las plataformas (Windows, Linux, Mac) tienen disponible JDK 7 o superior,
nuestras aplicaciones hechas con JavaFX correrán bien en estos sistems.
Con JavaFX 8 (disponible desde Java 8) hay soporte para ARM (móviles).
 FXML
FXML es un lenguaje de marcado para crear GUI
con JavaFX
Es similar a XML.
Especificamos Tags con propiedades, las cuales
determinaran los componentes y sus
propiedades.
MiniTest
GUI significa _________________
Al crear una aplicación JAVAFX, se vera igual en Windows y Mac?
◦ Verdadero
◦ Falso

JavaFX y Swing son lo mismo?

◦ Verdadero
◦ Falso

Antes de JAVAFX cual era la manera por defecto para crear GUIs en JAVA?
◦ Swing
◦ GUI
◦ WPF
MiniTest
GUI significa GRAPHICAL USER INTERFACE.
MiniTest
Al crear una aplicación JAVAFX, se vera igual en Windows y Mac?
◦ Verdadero
◦ Falso
MiniTest
Al crear una aplicación JAVAFX, se vera igual en Windows y Mac?
◦ Verdadero
◦ Falso
MiniTest
JavaFX y Swing son lo mismo?
◦Verdadero
◦Falso
MiniTest
JavaFX y Swing son lo mismo?
◦Verdadero
◦Falso
MiniTest
Antes de JAVAFX cual era la manera por defecto para crear GUIs en JAVA?
◦ Swing
◦ GUI
◦ WPF
◦ DirectX
MiniTest
Antes de JAVAFX cual era la manera por defecto para crear GUIs en JAVA?
◦ Swing
◦ GUI
◦ WPF
◦ DirectX
JavaFX
Sirve para crear aplicaciones con interfaz grafica para:
Escritorio
RIA (Rich Internet Applications).

Soporta
Animaciones Ricas
Rendering 3D
Videos y otros medios
MultiHilos
Native Deploys (Despliegue Nativo)
Los usuarios serán capaces de instalar la aplicación como cualquier aplicación del SO.
Creamos instaladores con el correcto empaquetador (JRE correcto).
Se instala con pocos Clicks.
El teatro
El teatro presenta… JavaFX
JavaFX usa vocabulario análogo al del teatro para describir sus componentes.
Stage (Escenario): Lugar donde la audiencia visualizara la obra.
Scena (Scene): Una porción de la obra.
◦ Puede haber muchas escenas en el mismo escenario.

Grafico de Escena (Scene Graph): Es el fondo, escenografia o plato.

◦ Contiene Nodos.

Nodos: Son la clase básica de cualquier objeto en una escena.

 Nodos
Pueden ser:
Texto (text node).
Botones (Button)
CheckBoxes
Sliders (Barras Deslizantes)
Cuadros de Exploracion de Directorio (File Choosers).
Formas (Triangulos).
Layout (Contenedor).
◦ Predefine espacion para los elementos de la escenografía (otros nodos)
◦ Ayuda a crear la forma de las pantallas y su distribución.

Todos los nodos pueden ser hijos de otros nodos.

Layouts
Hbox: Tiene a sus hijos de manera horizontal.

Vbox: Tiene a sus hijos de manera Vertical.

BorderPane
Layouts
BorderPane
 Layouts
StackPane: Permite poner elementos uno encima
del otro, produciendo un efecto 3d.
◦ Los elementos se agregan primero al fondo.
◦ Cada nuevo elemento se pone encima del anterior.
 Layouts
GridPane: Una grilla.
◦ Divide el Layout en columnas y filas.
 Layouts
Podemos juntar y combinar Layouts dentro de otros layouts para lograr los resultados deseados.
JavaFX Scene Builder
El Scene Builder es una herramienta que permite crear interfaz grafica en java tan solo con
arrastrar y pegar (drag and drop).
El Scene Builder se encarga de generar el codigo FXML por nosotros.
Podemos conseguir JAVAFX Scene builder en:
http://www.oracle.com/technetwork/java/javase/archive-139210.html
Scene Builder corre sobre nuestra versión de Java con JavaFX (Disponible desde la versión 6 en
adelante).
Scene Builder permite a diseñadores crear la GUI sin escribir codigo.
Scene Builder permite a los desarrolladores construir prototipos rapidos de aplicaciones.
JavaFX Scene Builder
Permite construir interfaces Rapido arrastrando y soltando (drag and drop).
Es una herramienta independiente.
◦ Pero fácilmente se integra con cualquier IDE (IntelliJ, NetBeans & Eclipse).

Genera el codigo FXML por nosotros.

Similar a herramientas de creación de UI de Microsoft para WPF o Google Android Studio.
Amarrando Scene Builder con Eclipse
Tenemos que gregar el repositorio puesto que eclipse no sabe donde encontrar el paquete (no
se porque no han hecho un release).
En Eclipse, vamos al menu help -> Install New Software…
Luego presionamos el boton add y ponemos:
◦ Name: e(fx)clipse
◦ Location: http://download.eclipse.org/efxclipse/updates-released/2.4.0/site
 Amarrando Scene Builder con Eclipse
Nos aseguramos de
seleccionar la opción “Contact
all update sites during install
to find requiered software”.

Mas info en:

http://www.eclipse.org/efxcli
pse/install.html#for-the-lazy
 Creando un Proyecto con JavaFX
Crearemos un nuevo proyecto en Eclipse.
En File->New->Other…
Escogemos JAVAFX->JavaFX Project
 Trabajando con FXML
Ahora sobre elproyecto damos
clic derecho.
Seleccionamos New -> Other ->
JavaFX -> New FXML Document.
 Trabajando con FXML
Dejamos el valor por defecto en Source
Folder y Package.
Ponemos el nombre, en nuestro caso
Ejemplo GUI
Ponemos como root element (Elemento
Raiz) a un AnchorPane
Dejamos Dynamic Root sin seleccionar
(eso es para usuarios avanzados que tiene
sus propios controles).
 Amarrando el Scene Builder de Gluon
El Scene Builder 8 de Gluon es
bastante conveniente, porque
ya viene compilado.
Lo malo es que no se amarra
directamente con eclipse a
través del e(fx)clipse.
Por eso debemos atarlo
nostros, a través de window-
>preferences->JavaFX-
>SceneBuilder Executable
Alli ponemos la ruta de
instalación del Scene Buidler de
Gluon
 Comenzando Suavecito
Aprendiendo JAVAFX…
pero a lo Suaveeeee!

Damos click derecho en el archivo FXML y

presionamos Open with SceneBuilder para abrirlo
con Scene Builder y editarlo de manera visual.
 Usando Scene Builder
• Revisemos un
poco los
controles que
hay en JavaFX.
• Recordemos que
Scene Builder es
tan solo un
editor Grafico de
FXML de JAVAFX.
• Juguemos con
los contorles.
Practica
Creemos un nuevo proyecto de tipo JAVAFX y probemos agregar controles sin FXML (directo
sobre codigo JAVA).
Siganme l@s Buen@s!
Scene Builder: Mas Informacion
Scene Builder (Intro):
https://docs.oracle.com/javase/8/scene-builder-2/get-started-tutorial/overview.htm#JSBGS164
https://docs.oracle.com/javase/8/scene-builder-2/get-started-tutorial/jfxsb-
get_started.htm#JSBGS101
Tutorial de Scene Builder:
https://docs.oracle.com/javase/8/scene-builder-2/user-guide/index.html
Atando JavaFX con varios IDEs (entornos integrados de desarrollo) de Java:
https://docs.oracle.com/javase/8/scene-builder-2/work-with-java-ides/index.html
 Extendiendo una Aplicación
Revisemos nuestra clase Main.
Notamos que extiende aplicación
(heredando sus metodos públicos y
sus propiedades).
Para iniciar una aplicación de JavaFX
debemos sobrescribir el metodo
Start.
Con el metodo Show mostramos el • El nodo root es nuestro nodo Raiz. En este nodo se
escenario (Stage). cuelgan los demás controles.
• Recordemos que debemos tener un escena en el
escenario.
• Escena: Una instancia de pantalla especifica.
• Escenario: El marco en el que se despliegan las escenas.
Eventos
Cuando los usuarios interactúan con la GUI se generan eventos.
Los eventos deben ser atrapados, para ejecutar código de alguna funcionalidad
(basada en ese evento)
Para esto existen los métodos manejadores de eventos (Event Handlers).
Estos métodos toman un evento como argumento.
Estos eventos son perfectos para usar Funciones Lambda (Funciones anónimas.).
Funciones Lambdas
Introducidas desde Java 8 (ohhhh yeah).
Son funciones anónimas (no tienen nombre).
Se declaran como variables.
Método setOnAction
El metodo setOnAction permite manejar el evento de clic cuando se presiona un
botón.
A dicho evento le podemos pasar una expresión lambda.
Dicha expresión Lambda no es mas que una variable que contiene un metodo
dentro.
Cuando el evento se dispara (fires) se ejecuta dicho metodo contenido en la
expresión lambda.
Codigo:
btn.setOnAction(evt -> System.out.println("Encame en proceso..."));
Practiquemos
Pongamos una practica:
Haremos un aplicación que dispare un evento a través del clic de un botón
La aplicación permite detectar un nombre (via TextField) y encamarle algo
presionando un boton.
◦ El evento onAction del botón se disparara al dar clic, el evento imprimirá por consola un
mensaje detallando un encame.
Programa
ción
orientada
a
Eventos…
TADA!
Grillas – La solución
Una solución fácil a nuestros problemas de posicionamiento de elementos son las grillas.
Podemos colocar elementos dentro de las celdas de una grilla en forma ordenada.
Una grilla se llama GridPane

Codigo:
Label label = new Label(“Hola grilla”);
GridPane grilla = new GridPane();
grilla.add(label, 0, 0); //Primero la posicion Vertical y luego la horizontal
 FXML VS JAVAFX CODE
FXML JAVAFX CODE
-Facil detectar errores. -Facil detectar errores.
-Permite crear elementos de manera dinámica. -Permite crear elementos de manera
-No necesito saber nada mas que java puro. dinámica.
Ventajas
-No necesito saber nada mas que java
puro.

-No permite crear elementos de manera dinámica. -Mucho código en la lógica de

-Sintaxis estricta. No perdona. dominio.
-Dificil deteccion de errores. Solo muestra algunos -Dificil de Organizar.
errores en tiempo de ejecución. -No existe séparacion entre vista y
Desventajas -Lectura secuencias (a manera de scripting) no modelo (no es modular).
muestra errores por debajo del primer error. -Es mas lento prototipar (en
-Tengo que aprender una herramienta adicional comparaison contra FXML).
(Scene builder) y otra sintaxis (FXML).
Separando Presentacion
OBJETIVOS:
E N T E N D E R LO S B E N E F I C I O S D E S E PA R A R L A P R E S E N TA C I Ó N D E L A LÓ G I C A D E D O M I N I O .
I M P L E M E N TA R L A S E PA R A C I Ó N E N T R E P R E S E N TA C I Ó N Y LÓ G I C A D E D O M I N I O M E D I A N T E
J AVA F X .
 Separando por capas
Como vimos, podemos tener en el código Java
tanto lógica de dominio como la presentación
(GUI).
Pero seria mejor si dividimos estas capas:
◦ La capa de presentación debe estar separada de la
capa de dominio y la de acceso a datos.
◦ Fácil intercambiar de capas
◦ Desacopla funcionalidades.
◦ Mantiene orden y reduce la complejidad.
El buen software tiene
capas (ser modular).
Modelo por
Capas
Es una practica común dividir el
software en varias capas (por lo
general el mínimo es 3 capas).
Capa de Presentación: Se encarga de
mostrar la GUI y recibir input del
usuario.
Capa de Lógica de Dominio (Lógica de
Negocio): Se encarga de la lógica
especifica del programa
(procesamiento)
Capa de Acceso a Datos: Se encarga
de la persistencia de los datos (BD,
Archivos).
Arquitectura de Software por Capas
Creando una Capa de Presentación
JavaFX permite separar la presentación de la lógica de negocio a través de FXML.
FXML es el lenguaje de Marcado para definir la GUI (Capa de Presentacion).
No definamos nuestros controles directo en el código JAVA, usemos un archivo FXML para
separar las capas de forma armónica.
Cargaremos dicho archivo FXML desde el método Start de nuestra clase que extienda
Application.
En el metodo Start, llamamos a FXMLLoader.load

Código
Parent root = FXMLLoader.load(getClass().getResource("EjemploGUI.fxml"));
FXML
Imports

Elementos (Nodos)

Atributos (Con sus valores)

Etiqueta de Cierre
FXML
Ahora creemos una pequeña pantalla en FXML (sin el Scene Builder).
Pondremos elementos FXML en una grilla.
El diseño de la pantalla debe quedar asi, intentémoslo.
FXML: Mas informacion
Documentacion Oficial (Introduccion a FXML):
https://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc-files/introduction_to_fxml.html
Controlador
Viene de MVC (Model-View-Controller) o mas conocido en el bajo mundo como Modelo Vista
Controlador.
MVC es un patrón de arquitectura de software muy común en frameworks (sobretodo cuando el
software tiene capa de presentación).
El controlador nos permite manejar la lógica del programa o logica de negocios (es la capa de
lógica de dominio).
El controlador permite amarrar las acciones o eventos que se presentan en la capa de
presentación a un codigo especifico en java (ata la presentación con la funcionalidad).
 MVC
MVC es un patrón de diseño de software que se
utiliza para implementar software con interfaz
grafica de usuario.
Divide la aplicación en 3 partes separadas:
Modelo: Contiene los datos (nuestra
abstracción del Mundo).
Vista: Contiene la presentación de como se
muestra el modelo.
Controlador: Contiene funcionalidad que nos
permite modificar nuestro modelo.
Controlando
Es hora de amarrar nuestra vista a un controlador.
Para esto usamos en el nodo raíz la propiedad fx:controller.
En nuestro caso el nodo principal es el Grid Pane, por lo que
amarramos el controlador alli.
El controlador es una clase en Java, la cual he decido llamar
ControllerEjemplo.

Código:
GridPane fx:controller="application.ControllerEjemplo"
 Luces, Camara… OnAction
Para amarrar a nuestro control a un metodo, en este caso un botón, usamos la propiedad onAction.
El valor de la propiedad onAction debe ser un metodo del controlador, cuyo nombre debe ser
antecedido por el símbolo “#”
En este caso onAction activara el metodo GenerarCedula de la clase ControllerEjemplo. El contenido de
esta clase y sus metodos es responsabilidad del controlador (capa de lógica de dominio).
Si el metodo no existiese, tendremos un error en el FXML. Dicho error se resuelve creando el metodo
(como publico).

Código:
<Button text="Generar Cedula"
…
onAction="#generarCedula"
GridPane.halignment="RIGHT" />
Accediendo a los Controles.
Para acceder a los controles (y su contenido) desde el controlador, necesitamos declararlos.
El tag o anotación @FXML permite crear los controles (se requiere importar la librería FXML).
Para que referencien a los mismos controles de la vista, estos deben tener el mismo nombre que
definimos en la propiedad id (en el FXML).
Así para declarar un TextField en el controlador, tenemos el siguiente código.

Codigo Java Controlador:

@FXML private TextField txtFieldNombre;

Código FXML Vista:

<TextField fx:id="txtFieldNombre“
…. />
Imponiendo Estilo (Inline)
La propiedad Style de un nodo de FXML permite dar estilo a los controles individuales de una vista.
Recordemos que los hijos heredan las propiedades del nodo padre, aunque también pueden
sobrescribirlas.
Recordamos que en el valor de cada propiedad de css en FXML, necesitamos anteponer el prefijo “-fx-
...”.
◦ No se porque, así elaboraron la sintaxis los de Oracle.

Codigo:
<GridPane fx:controller="application.ControllerEjemplo"
…
style="-fx-font-family: Papyrus; -fx-alignment: center; -fx-hgap:10; -fx-vgap: 10" >
Imponiendo Estilo (CSS)
Hojas de Estilo en Cascada o CSS.
Permiten separar aun mas nuestra capa de presentación.
◦ La estructura la da nuestro FXML.
◦ El estilo lo da el CSS.

Asi podemos establecer motivos de diseños comunes para toda la aplicación (todas las escenas).
Dichos estilos son fácilmente intercambiables.
También podemos definir estilos por cada elemento directo en FXML pero eso no es buena
practica.
Recursos
Recursos son todos aquellos archivos externos (no nativos a JAVA) en los cuales nos apoyamos
para desarrollar o desplegar la aplicación.
En la carpeta de Recursos agregaremos nuestros archivos CSS, FXML, imágenes, etc.
 Agregando carpeta de Recursos
Es una practica aconsejable crear una carpeta aparte
para los recursos.
Para agregar dicha carpeta, vamos al proyecto,
damos clic derecho y seleccionamos new->folder.
Luego sobre esa carpeta, damos clic derecho y
vamos Build path -> Use as source folder.
El proceso anterior nos permitirá agregar dicha
carpeta al Build Path, para que Eclipse la tome en
cuenta como recurso.
CSS
Agregamos un archivo .css en nuestra carpeta de recursos (/recursos/css/ejemplo.css).
Si la carpeta no esta en el Build Path como source folder, la agregamos.
◦ Esto permite a eclipse encontrar los recursos.
En nuestro elemento raíz del FXML, agregamos la propiedad stylesheets, la cual referenciara a nuestra
hoja de estilos.

Código:
<GridPane fx:controller="application.ControllerEjemplo"
stylesheets="/css/ejemplo.css"
…
>
CSS
Nos permite agregar elegancia a nuestra aplicación.

STYLE

SIN CSS CON CSS

 CSS (Marcando finura)
Ahora debemos definir el estilo de nuestros nodos de FXML (también llamado marcar finura).
Para definir el estilo, primero debemos tener clase (literalmente).
Dichas clases de definen en nuestro archivo CSS y se referencian en el FXML.
Clases en CSS tienen otra connotación diferente a la que tiene en JAVA.
Clases de CSS nos permiten definir un tipo de estilo que se puede aplicar a múltiples elementos.
Debemos recordar que los estilos de los elementos padre, se heredan a sus hijos si es que estos tienen
la propiedad en cuestión (aunque estos valores de estilo pueden ser sobrescritos por los hijos para
obtener una apariencia diferente).
 CSS (Marcando finura)
Agregamos estilo (CSS) a un nodo de nuestra aplicación.

Codigo FXML:
<Text text="Cedulacion"
styleClass="titulo“
… />

Codigo CSS:
.titulo {
-fx-font-size: 80px;
-fx-fill: AQUA;
}
CSS Selectores
CSS son hojas de estilo en cascada, lo cual implica que los resultados visuales que obtendremos
variaran dependiendo del orden de aparición de los estilos y de su especificidad
Para aplicar especificidad necesitamos usar los selectores.
Los selectores permiten “Seleccionar” los elementos que caigan dentro de ciertas condiciones para
aplicar los estilos
Los selectores mas importantes son:
◦ Selector de clase: Es el punto “.” precediendo al nombre que se dara a dicha clase de CSS.
◦ Selector de Id: Es el “#” precedido del id del elemento al que se quiere aplicar el estilo.
◦ Element: selecciona el tipo de elemento descrito (nodos, por lo general controles).
◦ Global: El asterisco “*”. Selecciona todos los elementos.
Los elementos (nodos) cuyos nombres en FXML correspondan a palabras compuestas, al ser usados
en CSS para JavaFX se escribirán las palabras individuales (con minúsculas) separadas por guiones
◦ Asi GridPane (camelCase) en FXML pasa a ser .grid-pane en CSS para JavaFX
CSS para JavaFX
Mas informacion acerca de CSS especifico para JAVAFX en:
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#typefont
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
Tutoriales de CSS para JavaFX:
https://docs.oracle.com/javafx/2/layout/style_css.htm (Estilos para Layouts) (hay version en PDF)
https://docs.oracle.com/javase/8/scene-builder-2/get-started-tutorial/jfxsb-
get_started.htm#CIHBDDBI
Escogiendo Colores:
http://paletton.com/#uid=b010I4Y0kpDjukOp2nmmrsKfZvTc7 (Paletton) - Para escoger colores de
manera armonica.
QUIZ
Si un estilo es aplicado a un elemento padre, sus elementos hijos también tendrán el mismo valor
para la misma propiedad (si no se ha sobrescrito).
Verdadero
Falso
QUIZ
Si un estilo es aplicado a un elemento padre, sus elementos hijos también tendrán el mismo valor
para la misma propiedad (si no se ha sobrescrito).
Verdadero
Falso
QUIZ
Se recomienda definir los estilos y la estructura de nuestra aplicación directo en el archivo FXML
Verdadero
Falso
QUIZ
Se recomienda definir los estilos y la estructura de nuestra aplicación directo en el archivo FXML
Verdadero
Falseta
QUIZ
Que archivos se recomienda separar de nuestros archivos .java:
Ningún archivo, ponemos todo en Gajo
Solo los archivos FXML
Cualquier tipo de Archivo que pueda ser considerado un recurso.
The X-Files
QUIZ
Que archivos se recomienda separar de nuestros archivos .java:
Ningún archivo, ponemos todo en Gajo
Solo los archivos FXML
Cualquier tipo de Archivo que pueda ser considerado un recurso.
The X-Files
Barney Dice: Que aprendimos?
Amiguitos en esta unidad Revisamos:
Interfaces de Usuario: Generalidades
Interfaces Graficas de Usuario: Componentes y Caracteristicas Generales
Historia de la Evolucion de Tecnologias para la Creacion de GUIs en Java
JavaFX: Intro
JavaFX: Layouts
Configurar nuestro entorno de trabajo para usar JavaFX
JavaFX: FXML
Scene Builder
Separacion por Capas
MVC
Separacion de la Estructura y Estilo de la GUI
CSS para JavaFX
Intro a la Programacion Orientada a Eventos.
Referencias
http://docs.oracle.com/javase/8/scene-builder-2/installation-guide/jfxsb-
installation_2_0.htm#sthref6
http://www.eclipse.org/efxclipse/install.html#for-the-lazy
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
https://teamtreehouse.com/library/build-a-javafx-application