Capítulo 16

Interfaz de Usuario JavaFX

Controles y Multimedia

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
1
 Motivaciones
Una interfaz gráfica de usuario (GUI) hace que un
sistema sea amigable y fácil de usar. Crear una
GUI requiere creatividad y conocimiento de cómo
funcionan los componentes GUI. Dado que estos
componentes en Java son muy flexibles y
versátiles, puede crear una gran variedad de
interfaces de usuario útiles.
Los capítulos anteriores introdujimos brevemente
varios componentes GUI. Este capítulo presenta
los componentes de la GUI usados frecuentemente
en detalle.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
2
 Objetivos
 Crear interfaces gráficas de usuario con varios controles de interfaz de usuario.
 Crear una etiqueta de texto y grafico usando la clase Label y explorando las propiedades de la clase
abstracta Labeled.
 Crear un botón con texto y gráficos usando la clase Button y establecer un controlador utilizando el
método setOnAction en la clase abstracta ButtonBase .
 Crear una casilla de verificación usando la clase CheckBox .
 Crear un botón de opción, usando la clase RadioButton y un grupo de RadioButton usando un
objeto ToggleGroup.
 Introducir datos usando la clase TexField y contraseñas usando la clase PasswordField.
 Introducir datos en múltiples líneas usando la clase TextArea.
 Seleccionar un solo elemento usando ComboBox.
 Seleccionar un solo elemento o varios elementos usando ListView .
 Seleccionar un rango de valores usando ScrollBar.
 Seleccionar un rango de valores usando Slider y explorar las diferencias entre ScrollBar y Slider
 Desarrollar el juego de tres en raya.
 Para ver y reproducir video y audio usando Media, MediaPlayer y MediaView.
 Desarrollar un caso práctico para la bandera nacional y el himno.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
3
 Controles UI más comunes

Es aconsejabe el uso de prefijos al dar nombre a las variables de cada tipo

lbl  Label, bt  Button, chk  CheckBox,
rb  RadioButton, tf  TextField, pf  PasswordField,
ta  TextArea, cbo  ComboBox, lv , ListView,
scb  ScrollBar, sld  Slider, mp  MediaPlayer
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
4
 Labeled
Un objeto label (etiqueta) es un área de visualización para un texto
breve, un nodo o ambos. A menudo se usa para etiquetar otros
controles (generalmente campos de texto). Las etiquetas y los
botones comparten muchas propiedades comunes. Estas
propiedades comunes se definen en la clase Labeled.

Los métodos getter y setter para valores property y getter para

property propio se proporcionan en la clase, pero se omiten en el
diagrama UML para abreviar.
javafx.scene.control.Labeled

-alignment: ObjectProperty<Pos> Especifica la alineación del texto y el nodo en la etiqueta.

-contentDisplay:
ObjectProperty<ContentDisplay>
-graphic: ObjectProperty<Node>
-graphicTextGap: DoubleProperty
-textFill: ObjectProperty<Paint>
-text: StringProperty
-underline: BooleanProperty
-wrapText: BooleanProperty
Especifica la posición del nodo en relación con el texto utilizando las constantes
TOP, BOTTOM, LEFT y RIGHT definidas en ContentDisplay.
Un gráfico para la etiqueta.
La brecha entre el gráfico y el texto.
La pintura utilizada para llenar el texto.
Un texto para la etiqueta.
Si el texto debe ser subrayado.
Si el texto debe ser envuelto en el texto excede el ancho.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
5
 Label
La clase Label define Etiquetas.

Crea una etiqueta vacía

Crea una etiqueta con el texto especificado.
Crea una etiqueta con el texto y el gráfico especificados

LabelWithGraphic
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
6
 ButtonBase and Button
Un botón es un disparador que activa un evento de acción cuando
se hace clic. JavaFX proporciona botones regulares, de palanca,
check-box y radiobutons Las características comunes de estos
botones se definen en las clases ButtonBase y Labeled.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Define un controlador para manejar la acción de un

botón..

Crea un botón vacío.

Crea un botón con el texto especificado.
Crea un botón con el texto y el gráfico especificados.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
7
Ejemplo con button

ButtonDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
8
 CheckBox
Un CheckBox se usa para que el usuario haga una selección. Al
igual que Button, CheckBox hereda todas las propiedades
onAction, text, graphic, alignment, graphicTextGap, textFill,
contentDisplay de ButtonBase y Labeled..

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Define un controlador para manejar la acción de un

botón..

Indica que esta casilla de verificación está marcada.

Crea una casilla de verificación vacía.
Crea una casilla de verificación con el texto especificado.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
9
Ejemplo con CheckBox

CheckBoxDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
10
 RadioButton
Los radio-buttons conocidos como botones de opción, le permiten
seleccionar un solo elemento de un grupo de opciones. Muestran un
circulo relleno (si está seleccionado) o en blanco (si no lo está).
Los métodos getter y setter para valores property y getter
para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Indica si el botón está seleccionado.

Especifica el grupo de botones al que pertenece el
botón.
Crea un botón de alternar vacío.
Crea un botón de alternar con el texto especificado.
Crea un botón para alternar con el texto y el gráfico
especificados.

Crea en el botón de radio vacío.

Crea un botón de opción con el texto especificado..

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
11
Ejemplo de RadioButton

RadioButtonDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
12
 TextField
Un campo de texto se puede usar para ingresar o mostrar una
cadena. TextField es una subclase de TextInputControl.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

El contenido de texto de este control.

Indica si el texto puede ser editado por el usuario.

Especifica cómo debe alinearse el texto.

Especifica la cantidad preferida de columnas en el campo.
Especifica el controlador para procesar el evento de
acción en el campo de texto.

Crea un campo de texto vacío.

Crea un campo de texto con el texto especificado..

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
13
Ejemplo de TextField

TextFieldDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
14
 TextArea
TextArea permite al usuario ingresar múltiples líneas de texto.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

El contenido de texto de este control.

Indica si el texto puede ser editado por el usuario.

Especifica la cantidad preferida de columnas de texto.

Especifica la cantidad preferida de filas de texto.
Especifica si el texto se ajusta a la siguiente línea.

Crea un área de texto vacía.

Crea un área de texto con el texto especificado.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
15
Ejemplo con TextArea

DescriptionPane TextAreaDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
16
 ComboBox
Un Combo box, también conocido como una lista de opciones o
lista desplegable, contiene una lista de elementos entre los que el
usuario puede elegir.
Los métodos getter y setter para valores property y getter
para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

El valor seleccionado en el combo box.

Especifica si el cuadro combinado permite la entrada del
usuario.
Especifica el controlador para procesar el evento de acción..

Los elementos en el recuadro desplegable emergente.

El número máximo de filas visibles de los elementos en el
cuadro emergente emergente.
Crea en el cuadro combinado vacío.
Crea un cuadro combinado con los elementos especificados.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
17
 Ejemplo con ComboBox
Este ejemplo permite a los usuarios ver una
imagen del indicador de un país seleccionando el
país desde un cuadro combinado.

ComboBoxDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
18
 ListView
list view es un control que funciona básicamente como un cuadro
combinado, pero permite al usuario elegir un solo valor o varios valores.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Los elementos en la vista de lista.

Indica que los elementos se muestran horizontal o verticalmente en
la vista de lista.
Especifica cómo se seleccionan los elementos. SelectionModel se
usa para obtener los elementos seleccionados.

Crea una vista de lista vacía.

Crea una vista de lista con los elementos especificados.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
19
 Ejemplo: Uso de ListView
Este ejemplo
proporciona un
programa que
permite a los
usuarios seleccionar
países en una lista y
mostrar las banderas
de países
seleccionados en las
etiquetas. ListViewDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
20
 ScrollBar
ScrollBar es un control que permite a los usuarios seleccionar entre un rango de
valores. La barra de desplazamiento aparece en dos estilos: horizontal y vertical.

Los métodos getter y setter para valores property y

getter para property propio se proporcionan en la clase,
pero se omiten en el diagrama UML para abreviar.

La cantidad para ajustar la barra de desplazamiento al hacer clic (predet: 10).

Valor máximo para la barra de desplazamiento (predeterminado: 100).
Valor mínimo para la barra de desplazamiento (predeterminado: 0).
Valor de variación cuando increment() y decrement() son llamados (predet: 1).

Valor actual de la barra de desplazamiento (predeterminado: 0).

El ancho de la barra de desplazamiento (por defecto: 15).
Orientación de la barra de desplazamiento (predet: HORIZONTAL).
Crea una barra de desplazamiento horizontal predeterminada.
Incrementa el valor de la barra de desplazamiento por unitIncrement.
Disminuye el valor de la barra de desplazamiento por unitIncrement.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
21
Propiedades de Scroll Bar

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
22
 Ejemplo: Uso de Scrollbars
Este ejemplo utiliza barras de
desplazamiento horizontales
y verticales para controlar un
mensaje que se muestra en un
panel. La barra de
desplazamiento horizontal se
usa para mover el mensaje
hacia la izquierda o hacia la
derecha, y la barra de
desplazamiento vertical para
moverlo hacia arriba y hacia
abajo. ScrollBarDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
23
 Slider
Slider es similar a ScrollBar, pero Slider tiene más
propiedades y puede aparecer en muchas formas.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

La cantidad para ajustar el slider si se hce clic en la barra (predet: 10).

Valor máximo representado por este slider (predeterminado: 100).
Valor mínimo representado por este slider (predeterminado: 0).
Valor actual del slider (predeterminado: 0).
Especifica la orientación del slider (predeterminado: HORIZONTAL).
La distancia de la unidad entre las marcas principales.
El número de tics menores para colocar entre dos tics principales.
Especifica las etiquetas para las marcas de graduación que se muestran.
Especifica si se muestran las marcas.

Crea un slider horizontal predeterminado.

Crea slider con mínimo, máximo y valor.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
24
 Ejemplo: Uso de Sliders
Vuelva a escribir el
programa anterior
utilizando los controles
deslizantes para controlar
un mensaje que se
muestra en una pantalla
en lugar de usar barras de
desplazamiento.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
25
 Caso práctico: Bounce Ball
Programa que muestra una pelota que rebota. Puedes
agregar un control deslizante para la velocidad del
movimiento de la pelota.

SliderDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
26
 Caso práctico: TicTacToe

javafx.scene.layout.Pane

-char token

+getToken Cell
+setToken
-token: char Token utilizado en la celda (predet: ‘ ‘).
+paintComponet
+mouseClicked
+getToken(): char
Devuelve el token en la celda.
+setToken(token: char): void Establece un nuevo token en la celda.
-handleMouseClick(): void Maneja un evento de clic del mouse.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
27
Case práctico: TicTacToe, cont.

TicTacToe Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
28
 Media
Podemos utilizar la clase Media para obtener la fuente de los medios, la clase
MediaPlayer para reproducir y controlar los medios, y la clase MediaView para
visualizar un vídeo.
Los métodos getter y setter para valores property y
getter para property propio se proporcionan en la clase,
pero se omiten en el diagrama UML para abreviar.

Las duraciones en segundos de los medios de origen.

El ancho en píxeles del video fuente.

La altura en píxeles del video fuente.

Crea un medio desde un URL de origen.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
29
 MediaPlayer
La clase MediaPlayer reproduce y controla los medios con propiedades como
autoPlay, currentCount, cycleCount, mute, volume, y totalDuration.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Especifica si la reproducción debería comenzar automáticamente.

Cantidad de ciclos de reproducción completados.
Especifica la cantidad de veces que se reproducirán los medios.
Especifica si el audio está silenciado.
El volumen para el audio.
La cantidad de tiempo para reproducir los medios de principio a fin.

Crea un objeto MediaPlayer para un medio específico.

Reproduce el medio.
Hace una pausa el medio.
Solicita al reproductor un nuevo tiempo de reproducción.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
30
 MediaView
La clase MediaView es una subclase de Node que proporciona una vista de los
medios reproducidos por un MediaPlayer. La clase MediaView proporciona las
propiedades para ver los medios.

Los métodos getter y setter para valores property y getter

para property propio se proporcionan en la clase, pero se
omiten en el diagrama UML para abreviar.

Especifica la coordenada x actual del objeto mediaview.

Especifica la coordenada y actual del objeto mediaview.
Especifica un reproductor multimedia para del objeto mediaview.
Especifica el ancho de la vista para que los medios encajen.
Especifica el alto de la vista para que los medios encajen.

Crea un objeto mediaview vacío

Crea un objeto mediaview con el medio especificado

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
31
 Ejemplo: Uso de Media
Este ejemplo muestra un video
en una vista. Puede utilizar el
botón de reproducción/pausa
para reproducir o pausar el video
y utilizar el botón de rebobinado
para reiniciar el video, y utilizar
el control deslizante para
controlar el volumen del audio

MediaDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
32
 Case práctico: National Flags and
Anthems
Este caso práctico presenta un programa que muestra la
bandera de un país y reproduce su himno.

FlagAnthem Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
33