You are on page 1of 34

GUI JavaFX: Parte 1 25

Pero, suave! lo que la luz a travs


de aquella ventana? Es este, y
Julieta es el sol!

- William Shakespeare

Incluso un evento menor en la vida de un nio


es un evento del mundo de ese nio y por lo
tanto un evento mundial.
- Gaston Bachelard

... los profetas ms sabios asegurarse del


evento por primera vez.
- Horacio Walpole

Usted cree que puedo escuchar todo el da


para tales cosas?
- Lewis Carroll

OB jecti cinco s
En este captulo podrs:

JavaFX construir interfaces grficas de


usuario y controlar los eventos
generados por las interacciones del usuario con ellos.

Comprender la estructura de una ventana


de la aplicacin JavaFX.

Utilizar JavaFX Escena Builder para crear


archivos FXML que describen escenas
que contienen JavaFX Etiqueta s,

ImageView s, Campo de texto s,


deslizador s y Botn s sin necesidad
de escribir cdigo.

Organizar componentes GUI


utilizando el VBox y
GridPane contenedores de diseo.

Utilice un controlador de clase para


definir controladores de eventos para
JavaFX FXML interfaz grfica de usuario.

Construir dos aplicaciones JavaFX.


1108 Captulo 25 JavaFX GUI: Parte 1

25.1 Introduccin 25.4.7 Adicin y configuracin de una Etiqueta


25.4.8 Adicin y configuracin de una
25.2 JavaFX Escena Builder y la
ImageView
NetBeans IDE 25.4.9 Ejecucin de la Bienvenido Aplicacin

25.3 Estructura JavaFX App ventana 25.5 Tip Calculator App-Introduccin a la


25.4 Bienvenido App-Viendo texto y Control de eventos

una imagen 25.5.1 prueba de manejo de la Tip Calculator Aplicacin

25.5.2 Tecnologas de Informacin general


25.4.1 Creacin de Proyectos de la App
25.5.3 Construccin de interfaz grfica de usuario de la App
25.4.2 NetBeans proyectos Ventana-
Visualizacin del contenido del proyecto
25.5.4 TipCalculator Clase

25.4.3 Adicin de una imagen en el Proyecto


25.5.5 TipCalculatorController Clase

25.4.4 Apertura JavaFX Escena Constructor de NetBeans 25.6 Caractersticas cubiertos en la lnea
captulos JavaFX
25.4.5 Cambiar a una VBox Disposicin de Contenedores
25.7 Envolver
25.4.6 Configuracin de la VBox Diseo
Envase

resumen | Ejercicios de auto-revisin | Respuestas a los ejercicios de auto-revisin | ejercicios | Hacer una diferencia

25.1 Introduccin
[ Nota: Los requisitos previos para este captulo son los captulos 1-11. Este captulo no requiere que usted ha ledo el captulo 12,

los componentes GUI: Parte 1, que discute oscilacin GUI] A. interfaz grfica del usuario ( GUI ) presenta un mecanismo fcil de

usar para interactuar con una aplicacin. Una interfaz grfica de usuario (pronunciado GOO-ee) da una aplicacin de un

distintivo look-and-feel. Interfaces grficas de usuario se construyen a partir componentes GUI . A veces se denominan controles o

reproductores -Short para aparatos de ventana. Un componente GUI es un objeto con el que el usuario interacta con el ratn, el
teclado u otra forma de entrada, tal como reconocimiento de voz.

Observacin look-and-feel 25.1


Proporcionar diferentes aplicaciones con componentes de interfaz de usuario unificada e intuitiva ofrece a los usuarios una
sensacin de familiaridad con una nueva aplicacin, por lo que pueden aprender ms rpidamente y utilizarlo de forma ms
productiva.

Historia de la interfaz grfica de usuario en Java


biblioteca de interfaz grfica de usuario original de Java fue el Abstract Window Toolkit (AWT). Swing (Captulos 12 y 22) se aadi a la
plataforma de Java SE 1.2. Desde entonces, Swing ha seguido siendo el principal tecnologa Java GUI. Oscilacin est ahora en modo
de mantenimiento-Oracle ha dejado de desarrollo y proporcionar slo correcciones de errores de cara al futuro; Sin embargo, seguir
siendo parte de Java y sigue siendo ampliamente utilizado.

de la GUI de Java, grficos y multimedia API del futuro es JavaFX . Sun Microsystems (adquirida por Oracle en 2010)
anunci JavaFX en 2007 como un competidor de Adobe Flash y Microsoft Silverlight. JavaFX 1.0 fue lanzado en 2008. Antes de
la versin 2.0, los desarrolladores utilizan JavaFX Script-que era similar al JavaScript para escribir aplicaciones JavaFX. El
cdigo fuente de JavaFX Script compilado a cdigo de bytes de Java, permitiendo aplicaciones JavaFX se ejecuten en la
mquina virtual de Java. Desde la versin 2.0 en 2011, JavaFX fue reimplantado como un conjunto de bibliotecas de Java que
podran utilizarse directamente en aplicaciones Java. Algunos de los beneficios de JavaFX vs oscilacin incluyen:
25.2 escena JavaFX Builder y el IDE NetBeans 1109

JavaFX es ms fcil de usar, que proporciona una API para la interfaz grfica de usuario, grficos y multimedia
(imgenes, animaciones, audio y video), mientras que oscilacin es slo para interfaces grficas de usuario, por lo que es
necesario utilizar otras API para grficos y aplicaciones multimedia.

Con Swing, muchos entornos de desarrollo proporcionado herramientas de diseo de interfaz grfica de usuario de
arrastrar y soltar componentes en una presentacin; sin embargo, cada IDE produce cdigo diferente. JavaFX Escena
Builder (Seccin 25.2) se puede utilizar independiente o integrado con muchos entornos de desarrollo y produce el mismo
cdigo, independientemente de la IDE.

Aunque los componentes Swing puede ser personalizado, JavaFX le da un control completo sobre el aspecto y la
sensacin de una interfaz grfica de usuario JavaFX (lnea Captulo 26) a travs de Cascading Style Sheets (CSS).

JavaFX fue diseado para mejorar la seguridad de los subprocesos, lo cual es importante para los sistemas multi-ncleo
de hoy en da.

JavaFX admite transformaciones para el reposicionamiento y la reorientacin de componentes JavaFX, y animaciones


para cambiar las propiedades de componentes JavaFX con el tiempo. Estos pueden ser usados para hacer que las
aplicaciones ms intuitivo y fcil de usar.

JavaFX versin utilizada en este captulo


En este captulo, utilizamos JavaFX 2.2 (lanzado a finales de 2012) con Java SE 7. Hemos probado aplicaciones del
captulo en Windows, Mac OS X y Linux. En el momento de escribir estas lneas, Oracle estaba a punto de liberar
JavaFX y Java SE 8 8. Nuestros Captulos lnea 26 y de 27 en la pgina Web acompaante del libro (ver el reverso de la
portada de este libro) caractersticas GUI JavaFX adicionales -Presentar e introducir JavaFX grficos y funciones
multimedia en el contexto de JavaFX y Java SE 8 8.

25.2 JavaFX Escena Builder y el IDE NetBeans


La mayora de los libros de texto de Java que introducen la programacin GUI proporcionan codificacin manual interfaces grficas de
usuario, es decir, los autores construyen las interfaces grficas de usuario desde cero en cdigo Java, en lugar de utilizar una
herramienta de diseo GUI visual. Esto es debido a la fractura de Java IDE-mercado hay muchos entornos de desarrollo Java, por lo
que los autores no pueden depender de cualquier IDE que se utiliza.
JavaFX est organizada de forma diferente. los JavaFX Escena Constructor herramienta es una herramienta independiente de
diseo visual JavaFX GUI que tambin se puede utilizar con varios entornos de desarrollo, incluyendo los ms populares IDEA los de
NetBeans, Eclipse y IntelliJ. JavaFX Escena Builder est ms estrechamente integrado con NetBeans, 1 es por ello que utilizamos en
nuestra presentacin JavaFX.
JavaFX Escena constructor le permite crear interfaces grficas de usuario de arrastrar y soltar componentes de la GUI de la
biblioteca de la escena del constructor en un rea de diseo, a continuacin, la modificacin y el estilo de la interfaz grfica de usuario,
todo ello sin necesidad de escribir cdigo. vivo funciones de edicin y vista previa de JavaFX Escena Builder le permiten ver su interfaz
grfica de usuario que permite crear y modificar, sin compilar y ejecutar la aplicacin. Puedes usar Cascading Style Sheets (CSS) para
cambiar la totalidad lookand-diseo de su interfaz grfica de un concepto a veces llamado desollado . En el captulo 26 en lnea, vamos
a demostrar los fundamentos de modelar con el CSS.

En este captulo, utilizamos JavaFX Escena del constructor versin 1.1 y NetBeans 7.4 para crear dos
aplicaciones completas introductorias JavaFX. Captulos 26-27 en lnea uso escena JavaFX 2.0, que estaba a punto de
ser liberado cuando este libro fue a su publicacin.

1. http://www.oracle.com/technetwork/java/javafx/tools/index.html.
1110 Captulo 25 JavaFX GUI: Parte 1

Cul es FXML?
Como crear y modificar una interfaz grfica de usuario, JavaFX Escena Builder genera FXML (FX Markup Language) -un
vocabulario XML para la definicin y la organizacin de los controles JavaFX GUI sin necesidad de escribir cdigo Java. No
es necesario saber FXML o XML para estudiar este captulo. Como se ver en la Seccin 25.4, JavaFX Escena
Constructor oculta los detalles FXML de que, para que pueda centrarse en la definicin qu la GUI debe contener sin
especificar cmo para generarlo-este es otro ejemplo de la programacin declarativa, que utilizamos con lambdas Java SE
en el captulo 17.

Ingeniera de Software Observacin 25.1


El cdigo FXML es independiente de la lgica del programa que se define en la fuente de Java cdigo- esta separacin
de la interfaz (GUI) de la aplicacin (el cdigo Java) hace que sea ms fcil de depurar, modificar y mantener
aplicaciones GUI JavaFX.

25.3 Estructura JavaFX App ventana


Una ventana JavaFX aplicacin consta de varias partes (Fig. 25.1) que se va a utilizar en las secciones 25.4-
25.5:

La ventana se conoce como la etapa

de diseo que dispone los otros nodos


grfico de la escena de esta escena es un contenedor
es un nodo en la escena de grfico El nodo raz del
Cada uno de los componentes de JavaFX en este GUI

escena de la etapa contiene


un escenario grfico de nodos

Fig. 25.1 | JavaFX partes ventana de la aplicacin.

La ventana que se conoce como el en que se muestra la GUI de una aplicacin JavaFX escenario y es una instancia
de la clase Escenario ( paquete javafx.stage).

La etapa contiene un activo escena que define la interfaz grfica de usuario como una escenario grfico -una estructura
de datos de rbol de elementos visuales de una aplicacin, tales como controles de GUI, formas, imgenes, vdeo, texto y
mucho ms. La escena es una instancia de la clase Escena ( paquete javafx.scene).

Cada elemento visual en el escenario grfico es una nodo ejemplo -an de una subclase de
Nodo ( paquete javafx.scene), que define los atributos y comportamientos comunes para todos los nodos en el grfico
de la escena. Con la excepcin del primer nodo en la escena grfica conocida como la nodo raz -cada nodo
tiene uno de los padres. Los nodos pueden tener las transformadas (por ejemplo, movimiento, la rotacin, escala
y sesgar), opacidad (que controla si un nodo es transparente, parcialmente transparente u opaco), efectos (por
ejemplo, sombras, manchas, la reflexin y la iluminacin) y ms que' ll introducir en el captulo 26 en lnea.
25.4 Bienvenido App-Viendo texto y una imagen 1111

Los nodos que tienen hijos son tpicamente contenedores de diseo que organizan sus nodos secundarios en la
escena. Vamos a usar dos contenedores de diseo ( VBox y GridPane) en este captulo y aprender varios ms en los
captulos 26-27 en lnea.

Los nodos dispuestos en un contenedor de diseo son una combinacin de controles y, en interfaces grficas de
usuario ms complejos, posiblemente, otros contenedores de diseo. controles son componentes GUI, tales como Etiqueta
s que texto de la pantalla, Campo de texto s que permiten a un programa para recibir el texto tecleado por el usuario, Botn s
que iniciar acciones y ms. Cuando el usuario interacta con un control, tal como hacer clic en una Botn, el control genera
una
evento. Los programas pueden responder a estos eventos conocida como manipulacin, para especificar qu debe ocurrir
cuando se produce la interaccin del usuario cada caso.

Un controlador de eventos es un mtodo que responde a una interaccin del usuario. controladores de eventos de una
interfaz grfica de usuario FXML se definen en una llamada clase controlador ( como se ver en la Seccin 25.5.5).

25.4 Bienvenido App-Viendo texto y una imagen


En esta seccin, sin necesidad de escribir cdigo usted construir un JavaFX Bienvenido aplicacin que muestra el texto en una Etiqueta y
una imagen en una ImageView ( Fig. 25.2). En primer lugar, vamos a crear un proyecto de aplicacin JavaFX en el NetBeans IDE. A
continuacin, va a utilizar tcnicas de programacin visual y JavaFX Escena constructor para arrastrar y soltar JavaFX componentes al
rea de diseo. A continuacin, va a utilizar JavaFX Escena Constructor de Inspector ventana para configurar las opciones, tales como la Etiquetas
'S de texto y tamao de fuente, y el ImageView 'S imagen. Por ltimo, deber ejecutar la aplicacin desde NetBeans. Esta seccin supone
que usted ha ledo la seccin Antes de comenzar, e instalado NetBeans y Constructor de escena. Utilizamos NetBeans 7.4, 1.1 y
constructor Escena Java SE 7 para ejemplos de este captulo.

Etiqueta componente

ImageView componentes

Fig. 25.2 | Final Bienvenido aplicacin que se ejecuta en Windows 7.

25.4.1 Creacin de Proyectos de la App

Ahora vamos a utilizar NetBeans para crear una JavaFX aplicacin FXML. NetBeans abiertos en su sistema. Inicialmente, el Pgina de
inicio ( Fig. 25.3) se visualiza esta pgina, le da enlaces a la documentacin de NetBeans y muestra una lista de sus proyectos ms
recientes, en su caso.
1112 Captulo 25 JavaFX GUI: Parte 1

Fig. 25.3 | NetBeans IDE muestra la Pgina de inicio.

Crear un nuevo proyecto


Para crear una aplicacin, primero debe crear una proyecto -un grupo de archivos relacionados, tales como archivos de cdigo y las
imgenes que componen una aplicacin. Haga clic en el Nuevo proyecto ( ) botn en la barra de herramientas o
seleccionar Archivo> Nuevo proyecto ... para mostrar la Nuevo proyecto dilogo ( Fig. 25.4). Debajo categoras,
seleccionar JavaFX Y debajo proyectos seleccionar JavaFX Aplicacin FXML, a continuacin, haga clic Siguiente>.

Fig. 25.4 | Nuevo proyecto dilogo.


25.4 Bienvenido App-Viendo texto y una imagen 1113

Nueva aplicacin JavaFX Dilogo


En el Nueva aplicacin JavaFX de dilogo (Fig. 25.5), especifique la siguiente informacin:

1. Nombre del proyecto: Este campo es el nombre de su aplicacin. Entrar Bienvenido en este campo.

2. Localizacin del proyecto: El campo ubicacin del proyecto en su sistema. lugares de NetBeans
nuevos proyectos en un subdirectorio de NetBeansProjects dentro de su cuenta de usuario
Documentos carpeta. Puede hacer clic en el Vistazo botn para especificar una ubicacin diferente. El nombre de su
proyecto se utiliza como el nombre del subdirectorio.

3. Nombre FXML: El nombre de campo del nombre de archivo FXML que contendr la aplicacin de
Interfaz grfica de usuario. Entrar Bienvenido aqu, el IDE crea el archivo Welcome.fxml en el proyecto.

4. Crear clase de aplicaciones: casilla de verificacin-Cuando se activa esta opcin, NetBeans crea una
clase con el nombre especificado. Esta clase contiene la App principal mtodo. Entrar
Bienvenido en este campo. Si preceden al nombre de la clase con un nombre de paquete, NetBeans crea la clase en

ese paquete; de lo contrario, NetBeans colocar la clase del paquete predeterminado. Hacer clic Terminar para crear el

proyecto.

Fig. 25.5 | Nueva aplicacin JavaFX dilogo.

25.4.2 NetBeans proyectos Ventana de visualizacin de los contenidos del proyecto

los NetBeans proyectos ventana da acceso a todos sus proyectos. los Bienvenido nodo representa el proyecto de esta aplicacin.
Puede tener muchos proyectos abiertos a la vez, cada uno tendr su propio nodo de nivel superior. Dentro de nodo de un
proyecto, los contenidos estn organizados en carpetas y archivos. Puede ver el Bienvenido el contenido del proyecto de
ampliacin de la Bienvenido> Fuente
1114 Captulo 25 JavaFX GUI: Parte 1

Paquetes> <paquete por defecto> nodo (Fig. 25.6). Si ha especificado un nombre de paquete para la clase de aplicacin en la Fig.
25.5, el nombre del paquete que aparecer en lugar de < paquete por defecto>.

nodo ampliado

nodo contrado

Fig. 25.6 | NetBeans proyectos ventana.

NetBeans crea y abre tres archivos para una Aplicacin FXML JavaFX proyecto:

Welcome.fxml -Este archivo contiene el marcado FXML para la interfaz grfica de usuario. Por defecto, el IDE crea una
interfaz grfica de usuario que contiene una Botn y una Etiqueta.

Welcome.java -Esta es la clase principal que crea la interfaz grfica de usuario desde el archivo FXML y muestra la interfaz
grfica de usuario en una ventana.

WelcomeController.java -Esta es la clase en la que desea definir manejadores de eventos de la interfaz grfica de usuario que

permiten la aplicacin para responder a las interacciones del usuario con la GUI. En la Seccin 25.5, cuando se presenta una

aplicacin con controladores de eventos, discutiremos la clase de aplicacin principal y la clase del controlador en detalle. Para el Bienvenido

aplicacin, usted no va a editar cualquiera de estos archivos en NetBeans, por lo que puede cerrarlas. No es necesario el WelcomeController.java

presenta en esta aplicacin, por lo que se puede hacer clic derecho sobre el archivo en el proyectos ventana y seleccione Borrar para
eliminarlo. Hacer clic S en el dilogo de confirmacin para borrar el archivo.

25.4.3 Adicin de una imagen en el Proyecto

Una forma de utilizar una imagen en su aplicacin es agregar su archivo al proyecto, la presentar en una
ImageView. los bug.png la imagen que va a utilizar para esta aplicacin se encuentra en el imgenes subcarpeta de la carpeta de ejemplos de
este captulo. localizar el imgenes carpeta del sistema de archivos, a continuacin, arrastre
bug.png en el proyecto de < paquete por defecto> nodo para agregar el archivo al proyecto.

25.4.4 Apertura JavaFX Escena Constructor de NetBeans


Ahora vamos a abrir JavaFX Escena del constructor para que pueda crear interfaz grfica de usuario de esta aplicacin. Para ello,
haga clic derecho Welcome.fxml en el proyectos ventana, a continuacin, seleccione Abierto para ver el archivo FXML en Escena Builder (Fig.
25.7).

La eliminacin de los controles por defecto


El archivo FXML proporcionada por NetBeans contiene una interfaz grfica de usuario por defecto que consiste en una Botn de control y
una Etiqueta controlar. los Bienvenido aplicacin no utilizar estos controles por defecto, por lo que puede eliminarlos. Para ello, haga clic en
cada uno en el panel de contenido (o en el Jerarqua ventana en la parte inferior izquierda de la ventana de la escena del constructor), a
continuacin, pulse el Retroceso o Borrar llave. En cada caso, la escena del constructor muestra la advertencia Algunos componentes
tienen una calculadora fx: id. Es lo que realmente desea eliminarlos? . Esto significa que no puede haber cdigo Java en el proyecto que se
refiere
25.4 Bienvenido App-Viendo texto y una imagen 1115

ii

los Biblioteca contiene JavaFX Contenedores, Controles y Se utiliza el panel de Se utiliza el Inspector ventana para configurar el
otros artculos que se pueden arrastrar y soltar en el lienzo contenidos para disear la elemento seleccionado en el panel de contenido
interfaz grfica de usuario

los Jerarqua ventana muestra la estructura de la interfaz grfica de usuario y le

permite seleccionar y reorganizar los controles

Fig. 25.7 | JavaFX Escena del constructor que muestra la interfaz grfica de usuario por defecto en Welcome.fxml.

a estos controles para esta aplicacin, no habr ninguna dicho cdigo, por lo que se puede hacer clic Borrar para eliminar estos
controles.

La eliminacin de la referencia a la WelcomeController Clase


Como veremos en la Seccin 25.5, en la Escena del constructor, puede especificar el nombre de la clase del controlador que
contiene mtodos para responder a las interacciones del usuario con la GUI. los
Bienvenido aplicacin no necesita responder a las interacciones del usuario, por lo que va a eliminar la referencia en el
archivo FXML a clase WelcomeController. Para ello, seleccione la AnchorPane
nodo en el Jerarqua ventana, a continuacin, haga clic en el Inspector la ventana de Cdigo seccin para expandirlo y eliminar el valor
especificado en el clase del controlador campo. Ahora est listo para crear la
Bienvenido Interfaz grfica de usuario de la aplicacin.

25.4.5 Cambiar a una VBox Disposicin de Contenedores

Para esta aplicacin, se le coloca una Etiqueta y un ImageView en un VBox contenedor de diseo ( paquete
javafx.scene.layout), que ser el nodo raz de un escenario grfico. contenedores de diseo ayudan a organizar y componentes
GUI tamao. UN VBox organiza sus nodos verticalmente de arriba a abajo. VBox es uno de varios contenedores de diseo
JavaFX para la organizacin de controles en una GUI. Se discute la GridPane contenedor de diseo en la Seccin 25.5 y
varios otros en el Captulo lnea 26. Por defecto, NetBeans proporciona una AnchorPane como el diseo raz. Para cambiar
el valor predeterminado AnchorPane a una VBox:
1116 Captulo 25 JavaFX GUI: Parte 1

1. Adicin de una VBox para el diseo predeterminado. arrastre una VBox desde el Biblioteca la ventana de

contenedores seccin en el valor por defecto AnchorPane en el panel de contenido de la escena del constructor.

2. Haciendo el VBox el diseo raz. Seleccionar Editar> documento cortado a la Seleccin a


hacer el VBox el diseo raz y retire el AnchorPane.

25.4.6 Configuracin de la VBox Disposicin de Contenedores

Ahora vamos a especificar el VBox 'S alineacin, el tamao inicial y el relleno:

1. Especificacin de la VBox 'S alineacin. UN VBox 's alineacin determina la posi- diseo
namiento de la VBox 's nios. En esta aplicacin, nos gustara que cada nodo hijo (el Etiqueta y el ImageView) estar centrada
horizontalmente en la escena, y nos gustara tanto a los nios a estar centrados verticalmente, de modo que haya una
cantidad igual de espacio por encima de la Etiqueta
y debajo de la ImageView. Para lograr esto, seleccione la caja vertical, a continuacin, en el Inspector 's propiedades seccin,
establecer el Alineacin propiedad a CENTRAR. Cuando se establece el
Alineacin, notar la variedad de posibles valores de alineacin que puede utilizar.

2. Especificacin de la VBox Es por Preferred Tamao. los tamao preferido ( anchura y altura) de la
nodo raz escena del grfico es utilizado por la escena para determinar su tamao de la ventana cuando la aplicacin
comienza a ejecutar. Para establecer el tamao preferido, seleccione el caja vertical, a continuacin, en el
Inspector 's Diseo seccin, establecer el pref Ancho propiedad a 450 y el pref Altura
propiedad a 300.

25.4.7 Adicin y configuracin de una Etiqueta

A continuacin, vamos a crear la Etiqueta que muestra " Bienvenido a JavaFX ":

1. Adicin de una Etiqueta al Caja vertical. arrastre una Etiqueta desde el Biblioteca la ventana de controles
seccin sobre la Caja vertical. los Etiqueta se centra automticamente en el VBox porque se establece la VBox 'S
alineacin a CENTRAR en la Seccin 25.4.6.

2. Cambiando el Etiqueta 'S de texto. Se puede establecer una Etiqueta 'S de texto haciendo doble clic en l
y escribiendo el texto, o seleccionando el Etiqueta y el establecimiento de su Texto propiedad en el
Inspector 's propiedades seccin. Selecciona el Etiqueta 'S de texto a " Bienvenido a JavaFX!".

3. Cambiando el Etiqueta 'S de la fuente. Para esta aplicacin, nos fijamos el Etiqueta para mostrar en una gran negrita
fuente. Para ello, seleccione la Etiqueta, a continuacin, en el Inspector 's preferencias seccin, haga clic en el valor a la
derecha de la Fuente propiedad. En la ventana que aparece, establezca la
estilo propiedad a Negrita y el tamao propiedad a 30.

25.4.8 Adicin y configuracin de una ImageView


Por ltimo, se le agrega el ImageView que las pantallas bug.png:

1. Adicin de una ImageView al Caja vertical. arrastre una ImageView desde el Biblioteca la ventana de
controles seccin sobre la Caja vertical. los ImageView se coloca automticamente por debajo de la
Etiqueta. Cada nuevo control se agrega a una VBox se coloca por debajo de la VBox Es por otros nios, aunque se
puede cambiar el orden arrastrando a los nios en la escena del Constructor Jerarqua ventana. Como el Etiqueta, el
ImageView tambin se centra automticamente en el Caja vertical.

2. Ajuste de la ImageViews 'S imagen. Para establecer la imagen para visualizar, seleccionar la ImageView
y haga clic en los puntos suspensivos ( ...) botn a la derecha de la Imagen propiedad en el inspeccin
25.4 Bienvenido App-Viendo texto y una imagen 1117

colina 's propiedades seccin. Por defecto, Escena Constructor se abre un dilogo que muestra la carpeta de cdigo fuente
del proyecto, que es donde se coloca el archivo de imagen bug.png en la Seccin 25.4.3. Seleccione el archivo de imagen,
haga clic en Abierto. Escena del constructor muestra la imagen y cambia el tamao de la ImageView para que coincida con
relacin la relacin de aspecto de la imagen de la anchura de la imagen a su altura mediante el establecimiento de la ImageView
's Ajuste ancho y Ajustar altura propiedades.

3. Cambiando el ImageView 'Tamao de s. Nos gustara mostrar la imagen en su tamao original.


Para ello, debe eliminar los valores por defecto para el ImageView 's Ajuste ancho y Ajustar altura propiedades, que se
encuentran en el Inspector 's Diseo seccin. Una vez que elimine estos valores, la escena cambia el tamao del
Constructor ImageView a las dimensiones exactas de la imagen. Guarde el archivo FXML.

Ahora ha completado la GUI. panel de contenido de la escena del constructor debera aparecer ahora como se muestra en la Fig. 25.8.

Fig. 25.8 | diseo completo de la Bienvenido Interfaz grfica de usuario de la aplicacin en la escena del constructor.

25.4.9 Ejecucin de la Bienvenido Aplicacin

Puede ejecutar la aplicacin desde NetBeans en una de tres maneras:

Seleccione el nodo raz del proyecto en el NetBeans proyectos ventana, a continuacin, haga clic en el
Proyecto de ejecucin ( ) botn en la barra de herramientas.

Seleccione el nodo raz del proyecto en el NetBeans proyectos ventana, a continuacin, pulse F6.

Haga clic derecho en el nodo raz del proyecto en el NetBeans proyectos ventana, a continuacin, seleccione
Correr.

En cada caso, el IDE se compilar la aplicacin (si no est ya compilado), a continuacin, ejecute la aplicacin. los Bienvenido aplicacin
debera aparecer ahora como se muestra en la Fig. 25.2.
1118 Captulo 25 JavaFX GUI: Parte 1

25.5 Tip Calculator App-Introduccin a la gestin de eventos

los Tip Calculator APP (Fig. 25.9 (a)) calcula y muestra una punta de cuenta del restaurante y total. Por defecto, la aplicacin
calcula el total con una punta de 15%. Se puede especificar un porcentaje de la propina de 0% a 30% moviendo el deslizador pulgar
-Este actualiza el porcentaje de propina (Fig. 25.9 (b) y (c)). En esta seccin, se le construye una Tip Calculator aplicacin
usando varios componentes de JavaFX y aprender cmo responder a las interacciones del usuario con la GUI.

a) Inicial Tip Calculator GUI

Barra de ttulo
El usuario introduce la cantidad de la cuenta en este

Campo de texto

porcentaje de propina actual se


Mueve el deslizador pulgar para cambiar el
muestra en este Etiqueta
porcentaje de propina

b) GUI despus usuario introduce la cantidad 34,56 y


hace clic en el Calcular Botn

el usuario hace clic Calcular


Botn para mostrar la punta y el total

de

c) GUI despus de usuario mueve el deslizador 'S pulgar para cambiar el porcentaje de

propina a 20% luego hace clic en el Calcular Botn

porcentaje de propina Actualizacin

despus se traslad al usuario

deslizador 'S pulgar

Fig. 25.9 | Entrando en el monto de la factura y el clculo de la punta.


25.5 Tip Calculator App-Introduccin a la gestin de eventos 1119

Vamos a empezar por la prueba de manejo de la aplicacin, utilizando para calcular el 15% y el 10% consejos. A continuacin,
vamos a visin general de las tecnologas que utilizar para crear la aplicacin. Usted construir interfaz grfica de usuario de la
aplicacin usando el NetBeans y JavaFX SceneBuilder. Por ltimo, vamos a presentar el cdigo Java completo para la aplicacin y
hacemos un recorrido detallado cdigo.

25.5.1 prueba de manejo de la Tip Calculator Aplicacin

Apertura y funcionamiento de la App


Abrir el IDE NetBeans, a continuacin, realizar los siguientes pasos para abrir la Tip Calculator El proyecto de aplicacin y ejecutarla:

1. la apertura de la Tip Calculator El proyecto de aplicacin. Seleccionar Archivo> Abrir proyecto ... o haga clic en el
Proyecto abierto ( ) botn en la barra de herramientas para visualizar la Proyecto abierto dilogo.
Navegar hasta la carpeta ejemplos de este captulo, seleccione TipCalculator y haga clic en el
Proyecto abierto botn. UN TipCalculator nodo aparece ahora en la proyectos ventana.

2. Ejecucin de la Tip Calculator aplicacin. Clic derecho en el TipCalculator proyecto en el


proyectos ventana, a continuacin, haga clic en el Proyecto de ejecucin ( ) botn en la barra de herramientas.

Introduccin de un Total de la factura


Usando el teclado, introduzca 34.56, a continuacin, pulse el Calcular Botn. los Propina y Total
Campo de texto s mostrar la cantidad de la punta y la factura total para una punta de 15% (Fig. 25.9 (b)).

Seleccin de un porcentaje de propina personalizada


Utilizar el deslizador para especificar una personalizado porcentaje de propina. Arrastrar el deslizador 's pulgar hasta que el porcentaje lee 20%
( Fig. 25.9 (c)), a continuacin pulse el Calcular Botn para mostrar la punta actualizado y total. A medida que arrastra el dedo pulgar, el
porcentaje de propina en el Etiqueta al deslizador Actualizaciones izquierda continuamente. Por defecto, el deslizador le permite seleccionar
valores entre 0.0 a 100,0, pero en esta aplicacin vamos a restringir el deslizador a la seleccin de nmeros enteros de 0 a 30.

25.5.2 Tecnologas de Informacin general

Esta seccin presenta las tecnologas que va a utilizar para construir la Tip Calculator aplicacin.

Clase Solicitud
La clase principal en una aplicacin JavaFX es una subclase de Solicitud ( paquete javafx.applica- tion.Application ). de la
aplicacin principal mtodo llama a la clase Solicitud 's esttico lanzamiento
Mtodo para comenzar la ejecucin de una aplicacin JavaFX. Este mtodo, a su vez, hace que el tiempo de ejecucin de JavaFX
para crear un objeto de la Solicitud subclase y llamar a su comienzo mtodo, que crea la interfaz grfica de usuario, se conecta a una Escena y
lo coloca en el Escenario ese mtodo comienzo recibe como argumento.

Organizar Componentes JavaFX con una GridPane


Recordemos que los esquemas de contenedores organizar los componentes de JavaFX en una Escena. UN GridPane ( paquete
javafx.scene.layout ) ordena los componentes JavaFX en columnas y filas en una rejilla rectangular.

Esta aplicacin utiliza una GridPane ( Fig. 25.10) para organizar vistas en dos columnas y cinco filas. Cada clula en una GridPane
puede estar vaco o puede contener uno o ms componentes JavaFX, incluyendo contenedores de diseo que organizan
otros controles. Cada componente en una GridPane
puede abarcar mltiple columnas o filas, aunque no usamos esa capacidad en esta interfaz grfica de usuario.
1120 Captulo 25 JavaFX GUI: Parte 1

Cuando se arrastra una GridPane sobre el panel de contenido de la escena del constructor, Escena Builder crea el

GridPane con dos columnas y tres filas por defecto. Puede aadir y eliminar columnas y filas como sea necesario.
Discutiremos otra GridPane caractersticas que se presentan los pasos GUIbuilding. Para obtener ms informacin acerca de
la clase GridPane, visitar:

http://docs.oracle.com/javafx/2/api/javafx/scene/layout/GridPane.html

la columna 0 columna 1

la fila 0

la fila 1

fila 2

fila 3

fila 4

Fig. 25.10 | Tip Calculator GUI GridPane etiquetado por sus filas y columnas.

Creacin y personalizacin de la interfaz grfica de usuario con escena del constructor


Vamos a crear Etiqueta s, Campo de texto s, una deslizador y una Botn arrastrndolos hasta el panel de contenidos en la escena del
constructor, y luego personalizarlos mediante el Inspector ventana.

UN Campo de texto ( paquete javafx.scene.control) puede aceptar la introduccin de texto del texto de usuario o la pantalla. Vamos a
usar una editable Campo de texto a la entrada de la cantidad de la cuenta del usuario y dos no editable Campo de texto s para
ver la punta y cantidades totales.

UN deslizador ( paquete javafx.scene.control) representa un valor en el rango 0.0-


100.0 de forma predeterminada y permite que el usuario seleccione un nmero en ese rango moviendo el deslizador 'S
pulgar. Podrs personalizar el deslizador por lo que el usuario puede elegir un porcentaje de propina personalizada solamente de
la gama ms limitada de 0 a 30.

UN Botn ( paquete javafx.scene.control) permite al usuario iniciar una accin en esta aplicacin, al
pulsar el Calcular Botn calcula y visualiza la punta y cantidades totales.

Dar formato a nmeros como moneda al entorno local especfico y cuerdas Porcentaje
Vamos a usar la clase Formato numrico ( paquete java.text ) crear Especfica para la localizacin moneda y porcentaje cadenas de
una parte importante de internacionalizacin.

Control de eventos
Normalmente, un usuario interacta con la interfaz grfica de una aplicacin para indicar las tareas que debe realizar la aplicacin. Por
ejemplo, al escribir un correo electrnico en una aplicacin de correo electrnico, haga clic en el Enviar botn le dice a la aplicacin para
enviar el e-mail a las direcciones de correo electrnico especificadas. interfaces grficas de usuario son evento conducido .
Cuando el usuario interacta con un componente de interfaz grfica de usuario, la interaccin conocida como una evento -
25.5 Tip Calculator App-Introduccin a la gestin de eventos 1121

impulsa el programa para realizar una tarea. Algunas interacciones de los usuarios comunes que causan una aplicacin para realizar
una tarea incluyen clic un botn, mecanografa en un campo de texto, seleccionar un elemento de un men, clausura y una ventana emocionante
el ratn. El cdigo que realiza una tarea en respuesta a un evento se llama controlador de eventos , y el proceso de responder a los
eventos se conoce como
manejo de eventos .
Antes de que una aplicacin puede responder a un evento para un control especfico, usted debe:

1. Crear una clase que representa el controlador de eventos e implementa un adecuado


interfaz conocida como una interfaz de eventos-oyente .

2. Indican que un objeto de esa clase debe ser notificado cuando el evento occurs-
conocido como registrar el controlador de eventos .

En esta aplicacin, se le responde a dos hechos: cuando el usuario mueve el deslizador 'S pulgar, la aplicacin actualizar
la Etiqueta que muestra el porcentaje de propina actual, y cuando el usuario hace clic en el Calcular Botn, la aplicacin calcular y
mostrar la punta y la cantidad total de la factura.
Ver que para ciertos eventos, como por ejemplo cuando el usuario hace clic en un Botn -se puede vincular
un control a su mtodo de control de eventos mediante el uso de la Cdigo la seccin de la escena del constructor Inspector
ventana. En este caso, la clase que implementa la interfaz de detectores de eventos se crear para usted y llamar al mtodo que se
especifique. Para los eventos que se producen cuando el valor de los cambios de propiedad, tales como el control de cuando el
usuario mueve un deslizador 'S pulgar para cambiar el deslizador 'S valor-usted ver que se debe crear el controlador de eventos en su
totalidad en cdigo.

Interfaz de Aplicacin ChangeListener para la manipulacin deslizador Los cambios de posicin del pulgar

Vas a poner en prctica la ChangeListener interfaz (de paquete javafx.beans.value) para responder al usuario mover
el deslizador 'S pulgar. En particular, va a utilizar el mtodo cambiado
para mostrar el porcentaje de propina seleccionado por el usuario como el usuario mueve el deslizador 'S pulgar.

Modelo-Vista-Controlador (MVC)
aplicaciones JavaFX en el que la interfaz grfica de usuario se implementa como FXML adherirse a la Modelview-Controller
(MVC) patrn de diseo , que separa los datos de una aplicacin (contenido en el
modelo ) de interfaz grfica de usuario de la aplicacin (el ver ) y la lgica de procesamiento de la aplicacin (la controlador ).
El controlador implementa la lgica para las entradas de usuario de procesamiento. El modelo contiene datos de aplicacin,
y la vista presenta los datos almacenados en el modelo. Cuando un usuario proporciona alguna entrada, el controlador modifica el
modelo con la entrada dada. En el Calculadora de propinas, el modelo es la cantidad de la cuenta, la punta y el total. Cuando el
modelo cambia, el controlador actualiza el objeto de presentar los datos modificados.

En una aplicacin JavaFX FXML, se definen los controladores de eventos de la aplicacin de una clase controlador . La clase
controlador define variables de instancia para interactuar con los controles mediante programacin, as como los mtodos de gestin
de eventos. La clase controlador tambin puede declarar variables de instancia adicionales, esttico variables y mtodos que admiten el
funcionamiento de la aplicacin. En una aplicacin sencilla como el Calculadora de propinas, el modelo y el controlador a menudo se
combinan en una sola clase, como vamos a hacer en este ejemplo.

FXMLLoader Clase
Cuando una aplicacin JavaFX FXML comienza a ejecutar, clase FXMLLoader 's esttico mtodo carga se utiliza para cargar el archivo FXML
que representa interfaz grfica de usuario de la aplicacin. Este mtodo:
1122 Captulo 25 JavaFX GUI: Parte 1

Crea escenario grfico de la interfaz grfica de usuario y devuelve una Padre ( paquete javafx.scene) referencia al nodo raz
del escenario grfico.

Inicializa variables de instancia del controlador para los componentes que son manipuladas mediante
programacin.

Crea y registra los controladores de eventos para los eventos especificados en la FXML. Discutiremos estos

pasos con ms detalle en las secciones 25.5.4-25.5.5.

25.5.3 Construccin de interfaz grfica de usuario de la App

En esta seccin, vamos a mostrar los pasos precisos para el uso de Escena Builder para crear la Tip Calculator 'S interfaz grfica de
usuario. La interfaz grfica de usuario no se parecer a la que se muestra en la Fig. 25.9 hasta que haya completado los pasos.

fx: Identificacin Los valores de propiedad para los controles de la aplicacin de este
Si un control o el diseo se pueden manipular mediante programacin en la clase del controlador (como lo haremos con una de las Etiqueta
s, todos de la Campo de texto s y la deslizador en esta aplicacin), debe proporcionar un nombre para que el control o el diseo. En la Seccin
25.5.4, aprender cmo declarar variables en el cdigo fuente de cada componente en el FXML, y vamos a discutir cmo se inicializan
las variables para usted. El nombre de cada objeto se especifica a travs de su fx: Identificacin propiedad . Puede establecer el valor de
esta propiedad mediante la seleccin de un componente de la escena, a continuacin, la ampliacin de la Inspector la ventana de Cdigo seccin-la
fx: Identificacin la propiedad aparece en la parte superior de la

Cdigo seccin. Figura 25.11 muestra el fx: Identificacin propiedades de la Tip Calculator 's controles mediante programacin manipulado.
Para mayor claridad, nuestra convencin de nombres es utilizar el nombre de clase del control en el fx: Identificacin propiedad.

amountTextField

tipPercentageLabel tipPercentageSlider tipTextField

totalTextField

Fig. 25.11 | Tip Calculator 's controles mediante programacin manipuladas etiquetados con su fx: Identificacin s.

la creacin de la TipCalculator Proyecto


Haga clic en el Nuevo proyecto ( ) botn en la barra de herramientas o seleccione Archivo> Nuevo proyecto .... En el
Nuevo proyecto dilogo. Debajo categoras, seleccionar JavaFX Y debajo proyectos seleccionar JavaFX Aplicacin FXML, a continuacin,
haga clic Siguiente> y especificar TipCalculator en el Nombre del proyecto, nombre FXML y Crear clase de aplicaciones campos. Hacer clic Terminar
para crear el proyecto.
25.5 Tip Calculator App-Introduccin a la gestin de eventos 1123

Paso 1: Cambio de la distribucin de raz de una AnchorPane a una GridPane


Abierto TipCalculator.fxml en la escena del constructor de modo que se puede construir la interfaz grfica de usuario y eliminar los controles
por defecto, a continuacin, cambiar el valor predeterminado AnchorPane a una GridPane:

1. Adicin de una GridPane para el diseo predeterminado. arrastre una GridPane desde el Biblioteca ganar-
Dow contenedores seccin en el valor por defecto AnchorPane en el panel de contenido de la escena del constructor.

2. Haciendo el GridPane el diseo raz. Seleccionar Editar> documento cortado a la Seleccin


para hacer que el GridPane el diseo raz y retire el AnchorPane.

Paso 2: Adicin de filas a la GridPane


Por defecto, el GridPane contiene dos columnas y tres filas. Recordemos que la interfaz grfica de usuario en la Fig. 25.10 se compone
de cinco filas. Se puede aadir una fila encima o debajo de una fila existente haciendo clic derecho en una fila y seleccionando Panel
de rejilla> Aadir fila arriba o Panel de rejilla> Aadir fila abajo.
Despus de la adicin de dos filas, las GridPane debera aparecer como se muestra en la Fig. 25.12. Puede seguir pasos similares para
agregar columnas. Puede eliminar una fila o columna de la derecha haciendo clic en la pestaa que contiene su nmero de fila o
columna y seleccionando Borrar.

Tab para la columna de seleccin 1

Pestaa para seleccionar la fila 0

Fig. 25.12 | GridPane con cinco filas.

Paso 3: Adicin de los controles para la GridPane


Ahora vamos a agregar los controles en la Fig. 25.10 a la GridPane. Para aquellos que tienen fx: Identificacin s (ver Fig. 25,11), mientras
que se selecciona el control, establecer su fx: Identificacin propiedad en el Inspector la ventana de
Cdigo seccin. Realice los siguientes pasos:

1. la adicin de la Etiqueta s. Arrastrar Etiqueta s de la Biblioteca la ventana de controles en la seccin


las primeras cuatro filas de la GridPane Que est columna de la izquierda (es decir, la columna 0). A medida que agrega cada uno
Etiqueta, establecer su texto como se muestra la Fig. 25.10.

2. la adicin de la Campo de texto s. Arrastrar Campo de texto s de la Biblioteca la ventana de controles


seccin en filas 0, 2 y 3 de la GridPane columna derecha 's (es decir, columna 1).

3. Adicin de una Deslizador. Arrastre una horizontal deslizador desde el Biblioteca la ventana de controles
la seccin en la fila 1 de la GridPane Es por columna de la derecha.

4. Adicin de una Botn. arrastre una Botn desde el Biblioteca la ventana de controles en la seccin
fila 4 de la GridPane Es por columna de la derecha. Puede establecer la Botn 'S de texto haciendo doble clic en l, o

seleccionando el Botn, a continuacin, establecer su Texto propiedad en el Inspector la ventana de propiedades seccin. los GridPane

debera aparecer como se muestra en la Fig. 25.13.


1124 Captulo 25 JavaFX GUI: Parte 1

Fig. 25.13 | GridPane lleno del Tip Calculator 's controles.

Paso 4: Derecho a rtula GridPane Columna de 0 contenidos


UN GridPane el contenido de las columnas estn alineados a la izquierda por defecto. A la derecha-alinear los contenidos de la columna
0, seleccionar haciendo clic en la pestaa en la parte superior o inferior de la columna, a continuacin, en el Inspector 's Diseo seccin,
establecer el Halignment ( alineacin horizontal) Propiedad de DERECHO.

Paso 5: El dimensionamiento del GridPane Columnas para adaptarse a su contenido


Por defecto, la escena del constructor establece cada GridPane el ancho de la columna a 100 pxeles y la altura de cada fila para 30
pxeles para asegurar que puede arrastrar fcilmente controles en el GridPane 's clulas. En esta aplicacin, que cada columna de tamao
para adaptarse a su contenido. Para ello, seleccione la columna 0 haciendo clic en la pestaa en la parte superior o inferior de la
columna, a continuacin, en el Inspector 's Diseo seccin, establecer el
pref Ancho propiedad a USE_COMPUTED_SIZE para indicar que el ancho de la columna debe estar basada en la ms amplia nio-la Cantidad
Etiqueta en este caso. Repita este proceso para la columna 1. La GridPane debera aparecer como se muestra en la Fig. 25.14.

Fig. 25.14 | GridPane con columnas de tamao para adaptarse a sus contenidos.

Paso 6: El dimensionamiento del Campos de texto


Escena del constructor establece cada Campo de texto 'S de anchura a 200 pxeles de forma predeterminada. Es posible que los controles
de tamao segn sea apropiado para cada interfaz grfica de usuario se crea. En esta aplicacin, no es necesario el Campo de texto s para
ser tan amplia, por lo que utiliza el ancho preferido para cada Campo de texto, que es algo ms estrecha. Al configurar una propiedad para
el mismo valor para varios controles, puede seleccionar todos ellos y especificar el valor una vez. Para seleccionar los tres Campo de texto s,
mantenga el Ctrl ( o Mando)
clave y haga clic en cada Campo de texto. Luego, en el Inspector 's Diseo seccin, establecer el pref Ancho
propiedad a USE_COMPUTED_SIZE. Esto indica que cada Campo de texto debera utilizar su anchura preferida (como se define por
JavaFX). Observe que el GridPane columna de la derecha 's cambia el tamao de la Campo de texto s'anchuras preferidas.
25.5 Tip Calculator App-Introduccin a la gestin de eventos 1125

Paso 7: El dimensionamiento del Botn


Por defecto, Escena establece un constructor Botn 'S ancho basa en su texto. Para esta aplicacin, se opt por realizar la Botn la
misma anchura que los otros controles en el GridPane Es por columna de la derecha. Para ello, seleccione la Botn, a continuacin, en el Inspector
's Diseo seccin, establecer el Anchura mxima propiedad a VALOR MXIMO. Esto hace que el Botn 'S ancho crezca para llenar el ancho de
la columna.

Vista previa de la interfaz grfica de usuario


A medida que el diseo de su interfaz grfica de usuario, se puede obtener una vista previa seleccionando Vista previa> Mostrar vista
previa en la ventana. Como se puede ver en la Fig. 25.15, no hay espacio entre el Etiqueta s en la columna de la izquierda y los controles en
la columna de la derecha. Adems, no hay espacio alrededor de la GridPane,
porque el Escenario est dimensionado para ajustarse a la Escena 'Contenido de s. Por lo tanto, muchos de los controles tctiles o acercarse
a las fronteras de la ventana. Usted va a corregir estos problemas en el siguiente paso.

Fig. 25.15 | GridPane con el Campo de texto s y Botn redimensionada.

Paso 8: Configuracin de la GridPane 'S acolchado y espacio horizontal entre sus columnas
El espacio entre el contenido de un nodo y su parte superior, derecho, inferior y bordes izquierdos se conoce como el relleno
, que separa el contenido de los bordes del nodo. Desde el GridPane 'Tamao s determina el tamao de la Escenario 'Ventana s,
el relleno en este ejemplo tambin separa el
GridPane los nios 's de los bordes de la ventana. Para establecer el relleno, seleccione el GridPane,
a continuacin, en el Inspector 's Diseo seccin, establecer el Relleno cuatro valores de propiedad ( Arriba, derecha, abajo y IZQUIERDA)
a 14 -Los JavaFX distancia recomendada entre el borde de un control y el borde de una Escena.

Se puede especificar la cantidad predeterminada de espacio entre una GridPane 's columnas y filas con su Hgap ( brecha
horizontal) y Vgap ( brecha vertical) propiedades, respectivamente. Debido a la escena del constructor establece cada GridPane la
altura de fila a 30 pxeles-que es mayor que las alturas de de esta aplicacin controles ya hay algo de espacio vertical entre
los componentes. Para especificar la distancia horizontal entre las columnas, seleccione la GridPane en el Jerarqua ventana, a
continuacin, en el Inspector 's Diseo seccin, establecer el Hgap propiedad a 8. Si desea controlar con precisin el espacio
vertical entre los componentes, puede configurar cada fila de pref Altura propiedad a USE_COMPUTED_SIZE ( como lo hicimos para
las columnas pref Ancho propiedad en el paso 5), a continuacin, establezca la GridPane 's Vgap propiedad.

Paso 9: Fabricacin de la tipTextField y totalTextField No editable y no enfocable

los tipTextField y totalTextField se utilizan en esta aplicacin slo para mostrar los resultados, no recibir la introduccin de texto.
Por esta razn, no deben ser interactivos. Puede escribir en una Campo de texto slo si es en atencin , Es decir, es el
control que el usuario est interactuando. Cuando
1126 Captulo 25 JavaFX GUI: Parte 1

hace clic en un control interactivo, que recibe el foco. Del mismo modo, cuando se pulsa el Lengeta
clave, las transferencias de enfoque desde el control enfocable actual a la siguiente de una sola esto ocurre en el orden en que se
aaden los controles para la GUI. controles-tales como interactivos Campo de texto s,
deslizador s y Botn s-enfocable son por defecto. -controles como no interactivos Etiqueta s- no son enfocable.

En esta aplicacin, la tipTextField y totalTextField no son ni modificable ni enfocable. Para realizar estos cambios,
seleccione tanto Campo de texto s, a continuacin, en el Inspector 's propiedades
seccin, desactive la editable y enfoque de Traversable propiedades.

Paso 10: Ajuste de la deslizador 's Propiedades


Para completar la interfaz grfica de usuario, ahora va a configurar el Tip Calculator 's Deslizador. Por defecto, una
deslizador 'S rango es 0.0 a 100,0 y su valor inicial es 0,0. Esta aplicacin permite porcentajes de punta de 0 a 30 con un valor predeterminado
de 15. Para realizar estos cambios, seleccione el deslizador, a continuacin, en el
Inspector 's propiedades seccin, establecer el deslizador 's Max propiedad a 30 y el Valor propiedad a 15. Tambin establecemos el Incremento
de bloque propiedad a 5 -Esta es la cantidad por la cual la Valor propiedad aumenta o disminuye cuando el usuario hace clic
entre un extremo de la deslizador y el deslizador 'S pulgar. Guarde el archivo FXML seleccionando Archivo> Guardar.

Presentacin preliminar del diseo final


Seleccionar Vista previa> Mostrar vista previa en la ventana para ver la interfaz grfica de usuario final (Fig. 25,16). Cuando hablamos de
la TipCalculatorController clase en la Seccin 25.5.5, vamos a mostrar cmo especificar el Calcular Botn 'S controlador de eventos en el
archivo FXML.

Fig. 25.16 | diseo de interfaz grfica de usuario final previamente en la Escena del constructor.

25.5.4 TipCalculator Clase


Cuando se cre la Tip Calculator El proyecto de aplicacin, NetBeans crea dos archivos de cdigo fuente de Java para usted:

TipCalculator.java -Este archivo contiene la TipCalculator clase, en la que el


principal mtodo (discutido en esta seccin) carga el archivo FXML para crear la GUI y adjunta el GUI
a una Escena que se muestra en la App Escenario.

TipCalculatorController.java -Este archivo contiene la TipCalculatorCon- Troller clase (discutido en la

Seccin 25.5.5), que es donde se especifica el


deslizador y Botn controladores de eventos controles. Figura clase 25.17 presentes TipCalculator. Hemos cambiado el

formato del cdigo para satisfacer nuestras convenciones. Con la excepcin de la lnea 18, todo el cdigo en esta clase fue

generada por Net-


25.5 Tip Calculator App-Introduccin a la gestin de eventos 1127

Frijoles. Como ya comentamos en la Seccin 25.5.2, la Solicitud subclase es el punto de partida para una aplicacin JavaFX.
los principal mtodo llama a la clase Solicitud 's lanzamiento esttica mtodo (lnea
26) para iniciar la ejecucin de la aplicacin. Este mtodo, a su vez, hace que el tiempo de ejecucin de JavaFX para crear un
objeto de la TipCalculator clase y pide su comienzo mtodo.

1 // Fig. 25.17: TipCalculator.java


2 // la clase principal aplicacin que se carga y muestra la interfaz grfica de usuario de Tip Calculator
3 importar javafx.application.Application;
4 importar javafx.fxml.FXMLLoader;
5 importar javafx.scene.Parent;
6 importar javafx.scene.Scene;
7 importar javafx.stage.Stage;
89 clase pblica TipCalculator
se extiende Solicitud
10 {
11 @Anular
12 public void start (Platina) lanza Excepcin
13 {
14 raz de los padres =
15 FXMLLoader.load (getClass (). GetResource ( "TipCalculator.fxml" ));
16
17 escena escena = nuevo Escena (raz); // adjuntar grfico de una escena a otra
18 stage.setTitle ( "Tip Calculator" ); // muestra en la barra de ttulo de la ventana
19 stage.setScene (escena); // adjuntar escena a escena
20 Show de escenario(); // muestra la etapa
21 }
22
23 public static void principales (args String [])
24 {
25 // crear un objeto TipCalculator y llamar a su mtodo de inicio
26 lanzamiento (args);
27 }
28 }

Fig. 25.17 | clase de aplicacin principal que carga y muestra las Tip Calculator 'S interfaz grfica de usuario.

anulado Solicitud Mtodo comienzo


Mtodo comienzo ( lneas 11-21) crea la interfaz grfica de usuario, que se une a una Escena y lo coloca en el
Escenario ese mtodo comienzo recibe como argumento. Lneas de clase 14-15 uso FXMLLoader 's
esttico mtodo carga para crear un escenario grfico de la interfaz grfica de usuario. Este mtodo:

Devuelve una padre ( paquete javafx.scene) referencia al nodo raz del grfico de la escena (la GridPane en
este ejemplo).

Crea un objeto de la clase del controlador.

Inicializa variables de instancia del controlador para los componentes que son manipuladas mediante
programacin.

Registra los controladores de eventos para los eventos especificados en la FXML. Se discute la inicializacin de

las variables de instancia del controlador y el registro de los controladores de eventos en la Seccin 25.5.5.
1128 Captulo 25 JavaFX GUI: Parte 1

la creacin de la Escena
Para mostrar la interfaz grfica de usuario, debe asociarla a una Escena, luego coloque el Escena al Escenario que se pasa en el
mtodo comienzo. La lnea 17 crea una Escena, paso raz ( nodo raz del escenario grfico) como un argumento para el
constructor. Por defecto, el Escena 'S tamao se determina por el tamao del nodo raz del escenario grfico. versiones
sobrecargadas de la Escena constructor le permiten especificar el Escena 'Tamao s y llenar (un color, gradiente o imagen), que
aparece en la Escena 'S de fondo. Lnea 18 usos Escena mtodo setTitle para especificar el texto que aparece en el

Escenario barra de ttulo de la ventana. La lnea 19 lugares Escenario mtodo setScene para colocar el Escena sobre la Escenario. Finalmente, la lnea
20 llamadas Escenario mtodo espectculo para mostrar la Escenario ventana.

25.5.5 TipCalculatorController Clase


Figuras 25,18-25,21 presente la TipCalculatorController clase que responde a las interacciones del usuario con las
aplicaciones de Botn y Deslizador. Reemplace el cdigo que generan en NetBeans TipCalculatorController.java con el cdigo
en las figuras. 25,18 a 25,21.

Clase TipCalculatorController 's importar declaraciones


Figura clase 25.18 shows TipCalculatorController 's importar declaraciones.

1 // TipCalculatorController.jav
2 // Controlador que maneja calculateButton y eventos tipPercentageSlider
3 importar java.math.BigDecimal;
4 importar java.math.RoundingMode;
5 importar java.text.NumberFormat;
6 importar javafx.beans.value.ChangeListener;
7 importar javafx.beans.value.ObservableValue;
8 importar javafx.event.ActionEvent;
9 importar javafx.fxml.FXML;
10 importar javafx.scene.control.Label;
11 importar javafx.scene.control.Slider;
12 importar javafx.scene.control.TextField;
13

Fig. 25.18 | TipCalculatorController 's importar declaraciones.

lneas 3-12 importar las clases y las interfaces utilizadas por clase TipCalculatorController:

Clase BigDecimal del paquete java.math ( lnea 3) se utiliza para realizar clculos monetarios precisos. los enumeracin
RoundingMode del paquete java.math ( lnea 4) se utiliza para especificar cmo BigDecimal los valores se redondean
durante los clculos o cuando el formato de nmeros de punto flotante como Cuerda s.

Clase Formato numrico del paquete java.text ( lnea 5) proporciona capacidades de formato numricos, tales como formatos de
moneda y porcentaje especficos de la localidad. Por ejemplo, en la localidad de Estados Unidos, el valor monetario 34.56
tiene el formato de $ 34.95 y el porcentaje 15 tiene el formato de un 15%. Clase Formato numrico determina la configuracin
regional del sistema en el que se ejecuta la aplicacin, a continuacin, formatos de cantidades y porcentajes de cambio
en consecuencia.

Implementa la interfaz ChangeListener del paquete javafx.beans.value ( lnea


6) para responder al usuario mover el deslizador 'S pulgar. de esta interfaz cambiado
25.5 Tip Calculator App-Introduccin a la gestin de eventos 1129

mtodo recibe un objeto que implementa la interfaz ObservableValue ( lnea 7) - es decir, un valor que
genera un evento cuando cambia.

UN Botn 'S controlador de eventos recibe una ActionEvent ( lnea 8; paquete javafx.event),
lo que indica que la Botn se ha hecho clic. Como se ver en el captulo 26 en lnea, muchos JavaFX
controla apoyo ActionEvent s.

la anotacin FXML ( lnea 9; paquete javafx.fxml) se utiliza en el cdigo de una clase controlador de JavaFX para marcar las
variables de instancia que se debe hacer referencia a los componentes de JavaFX en el archivo y mtodos que puedan
responder a los sucesos de componentes de JavaFX en FXML archivo de la interfaz grfica de usuario FXML de la GUI.

Paquete javafx.scene.control ( lneas 10-12) contiene muchas clases de control JavaFX, incluyendo Etiqueta,
deslizante y Campo de texto.

Como se escribe cdigo con varias clases e interfaces, se puede utilizar el IDE de NetBeans Fuente> Organizar
importaciones mando a dejar el IDE insertar el importar frases para usted. Si la misma clase o interfaz nombre aparece
en ms de un paquete, el IDE mostrar un cuadro de dilogo en el que puede seleccionar la adecuada importar declaracin.

TipCalculatorController 's esttico Las variables y variables de instancia


Lneas 17-38 de la Fig. 25.19 presente clase TipCalculatorController 's esttico y variables de instancia. los Formato numrico objetos (lneas
17-20) se utilizan para dar formato a los valores de moneda y porcentajes, respectivamente. Mtodo getCurrencyInstance devuelve
una Formato numrico objeto que da formato a valores como moneda usando la localidad predeterminada para el sistema en el que
se ejecuta la aplicacin. Del mismo modo, el mtodo getPercentInstance devuelve una Formato numrico objeto que da formato a los
valores como porcentajes utilizando la configuracin regional predeterminada del sistema. los BigDecimal objeto Porcentaje consejo: ( lnea
22) almacena el porcentaje punta actual y se utiliza en el clculo de la punta (Fig. 25,20), cuando el usuario hace clic en la
App Calcular Botn.

14 clase pblica TipCalculatorController


15 {
diecisis // formateadores de moneda y porcentajes
17 static final privado NumberFormat moneda =
18 NumberFormat.getCurrencyInstance ();
19 static final privado NumberFormat ciento =
20 NumberFormat.getPercentInstance ();
21
22 privado BigDecimal tipPercentage = nuevo BigDecimal ( 0.15 ); // defecto 15%
23
24 // controles GUI definidos en FXML y utilizados por el cdigo del controlador
25 @FXML
26 privado TextField amountTextField;
27
28 @FXML
29 privado Label tipPercentageLabel;
30
31 @FXML
32 privado Deslizador tipPercentageSlider;
33

Fig. 25.19 | TipCalculatorController 's esttico variables y variables de instancia. (Parte 1 de 2.)
1130 Captulo 25 JavaFX GUI: Parte 1

34 @FXML
35 privado TextField tipTextField;
36
37 @FXML
38 privado TextField totalTextField;
39

Fig. 25.19 | TipCalculatorController 's esttico variables y variables de instancia. (Parte 2 de 2.)

@FXML Anotacin
Recuerde de la seccin 25.5.3 de que cada control que esta aplicacin manipula en su cdigo fuente de Java necesita una fx: id. Lneas
25-38 (Fig. 25,19) declarar variables de instancia correspondientes de la clase controlador. los @ FXML anotacin que precede a cada
declaracin (lneas 25, 28, 31, 34 y 37) indica que el nombre de la variable puede ser utilizado en el archivo FXML que describe GUI
de la aplicacin. Los nombres de las variables que se especifican en la clase del controlador deben coincidir con precisin el fx:
Identificacin valores especificados en la construccin de la interfaz grfica de usuario. Cuando el FXMLLoader cargas

TipCalculator.fxml para crear la interfaz grfica de usuario, sino que tambin inicializa cada una de las variables de instancia del controlador
que se declaran con @ FXML para garantizar que se refieren a los componentes GUI correspondientes en el archivo FXML.

's calculateButtonPressed Controlador de eventos


TipCalculatorController
Figura clase 25.20 presentes TipCalculatorController 's calculateButtonPressed mtodo, que se llama con el usuario
hace clic en el Calcular Botn. Los @ FXML anotacin (lnea
41) que precede al mtodo indica que este mtodo puede ser utilizado para especificar controlador de eventos de un control en el
archivo que describe FXML interfaz grfica de usuario de la aplicacin. Para un control que genera una ActionEvent ( como es el caso
para muchos controles JavaFX), el mtodo de gestin de eventos debe devolver vaco y recibir una ActionEvent parmetro (lnea 42).

40 // calcula y muestra la punta y cantidades totales


41 @FXML
42 private void calculateButtonPressed (evento ActionEvent)
43 {
44 tratar

45 {
46 cantidad BigDecimal = nuevo BigDecimal (amountTextField.getText ());
47 punta BigDecimal = amount.multiply (tipPercentage);
48 BigDecimal Total = amount.add (punta);
49
50 tipTextField.setText (currency.format (punta));
51 totalTextField.setText (currency.format (total));
52 }
53 captura (NumberFormatException ex)
54 {
55 amountTextField.setText ( "Introduzca la cantidad") ;
56 amountTextField.selectAll ();
57 amountTextField.requestFocus ();
58 }
59 }
60

Fig. 25.20 | TipCalculatorController 's calculateButtonPressed controlador de eventos.


25.5 Tip Calculator App-Introduccin a la gestin de eventos 1131

Especificacin del botn Calcular el controlador de eventos en la escena del constructor


Cuando se cre la TipCalculator proyecto con NetBeans, que la clase preconfigurado
TipCalculatorController como el controlador para la interfaz grfica de usuario en TipCalculator.fxml. Esto se puede ver en la escena del
constructor seleccionando el nodo raz de la escena (es decir, el GridPane), a continuacin, la ampliacin de la Inspector la ventana de Cdigo
seccin. El nombre de la clase del controlador se especifica en el clase del controlador campo. Si se declara el mtodo calculateButtonPressed
en la clase del controlador antes de especificar la Calcular Botn 'S controlador de eventos en el FXML, cuando se abre la escena del
constructor que escanea la clase del controlador de mtodos con el prefijo @ FXML y le permite seleccionar uno de estos mtodos
para configurar los controladores de eventos.

Para indicar que calculateButtonPressed debera ser llamado cuando el usuario hace clic en el
Calcular Botn, abierto TipCalculator.fxml en la escena del constructor, a continuacin:

1. Selecciona el Calcular Botn.

2. En el Inspector ventana, expanda la Cdigo seccin.

3. Debajo En Accin, seleccione # calculateButtonPressed de la lista desplegable y


guardar el archivo FXML. Cuando el FXMLLoader cargas TipCalculator.fxml para crear la interfaz grfica de usuario,
se crea y registra un controlador de eventos para el Calcular Botn 's ActionEvent. Un ActionEvent 'S controlador es un objeto de
una clase que implementa la Manejador de sucesos <ActionEvent> interfaz, que contiene una encargarse de mtodo que devuelve vaco
y recibe una ActionEvent parmetro. Este mtodo, a su vez, llama al mtodo calculateButtonPressed cuando el usuario hace clic
en el Calcular Botn. los FXMLLoader desempea tareas similares para cada detector de eventos que ha especificado a travs
de la Inspector la ventana de Cdigo seccin.

Clculo y visualizacin de la punta y cantidades totales


Lneas 46-51 calcular y mostrar la punta y cantidades totales. Lnea 46 mtodo de llamadas getText
para llegar desde el amountTextField el monto de la factura tecleado por el usuario. Esta Cuerda se pasa a la BigDecimal constructor,
lo que arroja una NumberFormatException si su argumento no es un nmero. En ese caso, la lnea 55 llamadas amountTextField
's setText Mtodo para mostrar el mensaje " Introduzca la cantidad" en el Campo de texto. Lnea 56 a continuacin, llama al
mtodo seleccionar todo para seleccionar el Campo de texto 'S de texto y la lnea 57 llamadas requestFocus, que da la Campo de
texto el foco. Esto permite que el usuario escriba inmediatamente un nuevo valor en el amountTextField sin tener que
seleccionar primero el texto. mtodos getText, setText y seleccionar todo se heredan en la clase Campo de texto de la clase TextInputControl
( paquete javafx.scene.control),

y el mtodo requestFocus se hereda en la clase Campo de texto de la clase nodo ( paquete


javafx.scene).

Si la lnea 46 no produce una excepcin, la lnea 47 calcula la propina por el mtodo de llamar
multiplicar multiplicar el cantidad por el tipPercentage, y la lnea 48 calcula la total
por el mtodo de llamar aadir para aadir el propina al proyecto de ley cantidad. lneas prximos 50 y 51 utilizan el
moneda objetos formato mtodo para crear moneda-formateado Cuerda s representa la punta y el total de
cantidades-estos se muestran en tipTextField y totalTextField, respectivamente.

's inicializar Mtodo


TipCalculatorController
Figura clase 25.21 presentes TipCalculatorController 's inicializar mtodo. Cuando el
FXMLLoader crea un objeto de clase TipCalculatorController, se determina si la clase contiene una inicializar mtodo

sin parmetros y, si es as, llama a este mtodo


1132 Captulo 25 JavaFX GUI: Parte 1

para inicializar el controlador. Este mtodo puede ser utilizado para configurar el controlador antes de mostrar la
GUI. Lnea 65 llama al moneda objetos setRoundingMode Mtodo para especificar cmo se deben redondear los valores de
moneda. El valor RoundingMode.HALF_UP indica que los valores mayores que o iguales a 0,5 deben Round Up-por ejemplo,
34.567 seran formateados como 34,57 y 34,564 podran ser formateados como 34,56.

61 // llamado por FXMLLoader para inicializar el controlador


62 public void inicializar()
63 {
64 // 0-4 redondea hacia abajo, 5-9 redondea
65 currency.setRoundingMode ( RoundingMode.HALF_UP );
66
67 // oyente de cambios en el valor de tipPercentageSlider
68 tipPercentageSlider.valueProperty (). addListener (
69 nuevo ChangeListener <Nmero> () { @Anular
70
71
72 public void cambiado (ObservableValue <? extiende Nmero> ov,
73 Nmero oldValue, nmero nuevoValor) { tipPercentage =
74
75
76 BigDecimal.valueOf (newValue.intValue () / 100,0 );
77 tipPercentageLabel.setText (percent.format (tipPercentage)); }}
78
79
80 );
81 }
82 }

Fig. 25.21 | TipCalculatorController 's inicializar mtodo.

El uso de una clase annima interna para la gestin de eventos


Cada control JavaFX tiene diversas propiedades, algunas de las cuales, tales como una deslizador 'S de valor puede
notificar a un detector de eventos cuando cambian. Para este tipo de propiedades, debe registrar manualmente el
controlador de eventos como un objeto de una clase que implementa la ChangeListener interfaz de paquete javafx.beans.value. Si
un controlador tal caso no se reutiliza, habitualmente se define como una instancia de un clase interna annima clase
-a que se declar sin un nombre y por lo general aparece dentro de una declaracin de mtodo. Lneas 68-80 son una
sentencia que declara la clase del detector de eventos, crea un objeto de esa clase y lo registra como el oyente de
cambios en el tipPercentageSlider 'S valor.

La llamada al mtodo valueProperty ( lnea 68) devuelve un objeto de clase erty DoubleProp- ( paquete javax.beans.property)
que representa la deslizador 'S valor. UN DoublePro- perty es una ObservableValue que pueden notificar a los oyentes
cuando cambia el valor. Cada clase que implementa la interfaz ObservableValue proporciona mtodo addListener ( llamada
de una lnea
68) para el registro de una ChangeListener. En el caso de una deslizador 'Valor de s, addListener 'S argumento es un objeto
que implementa ChangeListener <Nmero>, porque el deslizador 'Valor de s es un valor numrico.

Desde una clase interna annima no tiene nombre, un objeto de la clase debe ser creado en el punto donde se
declara la clase (a partir de la lnea 69). Mtodo addListener 'S argumento se define en las lneas 69-79 como una expresin de
creacin de clases de la instancia que declara un anon-
25,6 aspectos contemplados en los captulos JavaFX Online 1133

ymous clase interna y crea un objeto de esa clase. Una referencia a ese objeto se pasa a continuacin a addListener. Despus
de la nuevo palabra clave, la sintaxis ChangeListener <Nmero> ()
(Lnea 69) comienza la declaracin de una clase interna annima que implementa la interfaz
ChangeListener <Nmero>. Esto es similar a la que comienza con una declaracin de clase

clase pblica MyHandler implementos ChangeListener <Nmero>

La apertura de la llave izquierda en 70 y la llave de cierre a la derecha en la lnea 79 delimitan el cuerpo de la


clase interna annima. Lneas 71-78 cuentan la ChangeListener <Nmero> 's cambiado
mtodo, que recibe una referencia a la ObservableValue que cambi, una Nmero que contiene el deslizador 'S vieja valor
antes de que se produjo el evento y una Nmero que contiene el
deslizador Es por nuevo valor. Cuando el usuario mueve el deslizador 'S pulgar, lneas 75-76 de la tienda el nuevo porcentaje
punta y la lnea 77 actualiza la tipPercentageLabel.
Una clase interna annima puede acceder a las variables de instancia de la clase de nivel superior, esttico
variables y mtodos, en este caso, la clase interna annima utiliza variables de instancia
tipPercentage y tipPercentageLabel, y esttico variable por ciento. Sin embargo, una clase interna annima tiene un acceso limitado a las
variables locales del mtodo en el que se declar-que slo puede acceder a la final variables locales declaradas en el
cuerpo del mtodo de cerramiento. (A partir de Java SE 8, una clase interna annima tambin puede acceder a una
clase de manera efectiva final
locales variables vase la Seccin 17.3.1 para ms informacin.)

Java SE 8: El uso de un Lambda de Implementacin del ChangeListener


Recuerde de la seccin 10.10 que en Java SE 8 una interfaz que contiene un mtodo es una interfaz funcional y aviso a
los Captulo 17 que tales interfaces se pueden implementar con lambdas. Seccin 17.9 mostr cmo implementar una
interfaz funcional de control de eventos utilizando una lambda. . El controlador de eventos en la figura 25.21 puede
implementarse con un lambda como sigue:

tipPercentageSlider.valueProperty (). addListener (


(Ov, oldValue, nuevoValor) -> { tipPercentage =

BigDecimal.valueOf (newValue.intValue () / 100,0 );


tipPercentageLabel.setText (percent.format (tipPercentage)); });

25.6 Caractersticas cubiertos en los captulos JavaFX Online


JavaFX es una tecnologa robusta de interfaz grfica de usuario, grficos y multimedia. En los captulos 26 y 27 en lnea, podrs:

Aprender diseos y controles adicionales JavaFX.

Manejar otros tipos de eventos (tales como MouseEvent s).

Aplicar transformaciones (tales como mover, rotar, escalar y sesgar) y efectos (como sombras, desenfoques,
reflexin e iluminacin) a los nodos de un grfico de la escena.

Usar CSS para especificar el aspecto y la sensacin de controles.

Utilice propiedades JavaFX y de unin para permitir la actualizacin automtica de los controles como cambios de datos
correspondiente de datos.

Utilizar las capacidades grficas de JavaFX.


1134 Captulo 25 JavaFX GUI: Parte 1

Realizar animaciones JavaFX.

Utilizar las capacidades multimedia JavaFX para reproducir audio y vdeo. Adems,

nuestro Centro de Recursos JavaFX

http://www.deitel.com/JavaFX

contiene enlaces a recursos en lnea donde se puede aprender ms sobre las capacidades de JavaFX.

25.7 Envolver
En este captulo, hemos introducido JavaFX. Nosotros presentamos la estructura de una etapa de JavaFX (la ventana de la
aplicacin). Aprendi que el escenario muestra grfico de la escena de una escena, que el escenario grfico se compone de nodos
linfticos y que consisten en diseos y controles.
Que ha diseado interfaces grficas de usuario utilizando tcnicas de programacin visual en JavaFX Escena del constructor,
que le permiti crear interfaces grficas de usuario sin necesidad de escribir cdigo Java. que organiz Etiqueta, ImageView, TextField, deslizante y
Botn controles utilizando el VBox y GridPane contenedores de diseo. Ha aprendido clase FXMLLoader utiliza el FXML creada en Escena Builder
para crear la interfaz grfica de usuario.

Ha implementado una clase de controlador para responder a las interacciones del usuario con Botn y
deslizador controles. Hemos demostrado que ciertos controladores de eventos se pueden especificar directamente en FXML de Escena
del constructor, pero los controladores de eventos para los cambios en los valores de propiedad de un control deben ser
implementadas directamente en el cdigo de los controladores. Tambin ha aprendido que la FXMLLoader crea e inicializa una instancia de
clase del controlador de una aplicacin, inicializa las variables de instancia del controlador que se declaran con la @ FXML anotacin, y
crea y registra controladores de eventos para los eventos especificados en la FXML.

En el siguiente captulo, vamos a usar los controles y disposiciones adicionales JavaFX y utilizar CSS para el estilo de su
interfaz grfica de usuario. Tambin aprender ms sobre las propiedades JavaFX y cmo utilizar una tcnica llamada de enlace para
actualizar automticamente los elementos de una interfaz grfica de usuario con datos nuevos datos.

Resumen
Seccin 25.1 Introduccin
Una interfaz grfica de usuario (GUI) presenta un mecanismo fcil de usar para interactuar con una aplicacin. Una interfaz grfica de usuario
(pronunciado GOO-ee) da una aplicacin de un distintivo look-and-feel.

Interfaces grficas de usuario se construyen a partir de componentes GUI-a veces llamados controles o widgets.

Proporcionar diferentes aplicaciones con componentes de interfaz de usuario unificada e intuitiva ofrece a los usuarios una sensacin de

familiaridad con una nueva aplicacin, por lo que pueden aprender ms rpidamente y utilizarlo de forma ms productiva.

de la GUI de Java, grficos y multimedia API del futuro es JavaFX.

Seccin 25.2 JavaFX Escena Builder y el IDE NetBeans


JavaFX Escena Builder es una herramienta independiente de diseo visual JavaFX GUI que tambin se puede utilizar con varios entornos de

desarrollo.

JavaFX Escena constructor le permite crear interfaces grficas de usuario de arrastrar y soltar componentes de la GUI de la biblioteca de la

escena del constructor en un rea de diseo, a continuacin, la modificacin y el estilo de la interfaz grfica de usuario, todo ello sin necesidad de

escribir cdigo.

JavaFX Escena Builder genera FXML (FX Markup Language) -un vocabulario XML para la definicin y la organizacin de JavaFX
GUI controla sin necesidad de escribir cdigo Java.
Resumen 1135

El cdigo FXML es independiente de la lgica del programa que se define en Java de cdigo fuente de esta separacin de la
interfaz (GUI) de la aplicacin (el cdigo Java) hace que sea ms fcil de depurar, modificar y mantener aplicaciones GUI
JavaFX.

Seccin 25.3 Estructura JavaFX App ventana


La ventana en la que se muestra la GUI de un JavaFX aplicacin que se conoce como la etapa y es una instancia de la clase Escenario ( paquete
javafx.stage).

La etapa contiene una escena que define la interfaz grfica de usuario como un grfico, una estructura de rbol escena de elementos visuales de

una aplicacin, tales como controles de GUI, formas, imgenes, vdeo, texto y mucho ms. La escena es una instancia de la clase escena ( paquete javafx.scene).

Cada elemento visual en el grfico de la escena es un nodo-una instancia de una subclase de nodo ( paquete
javafx.scene), que define los atributos y comportamientos comunes para todos los nodos en el grfico de la escena.

El primer nodo en el grfico de la escena es conocido como el nodo raz.

Los nodos que tienen hijos son tpicamente contenedores de diseo que organizan sus nodos secundarios en la escena.

Los nodos dispuestos en un contenedor de diseo son una combinacin de controles y, posiblemente, otros contenedores de diseo.

Cuando el usuario interacta con un control, se genera un evento. Los programas pueden usar el control de eventos para especificar qu debe

ocurrir cuando se produce cada interaccin con el usuario.

Un controlador de eventos es un mtodo que responde a una interaccin del usuario. controladores de eventos de una interfaz grfica de usuario

FXML se definen en una clase de controlador.

seccin 25.4 Bienvenido App-Viendo texto y una imagen


Para crear una aplicacin en NetBeans, primero debe crear un proyecto de un grupo de archivos relacionados, tales como archivos de cdigo y

las imgenes que componen una aplicacin.

los NetBeans proyectos ventana da acceso a todos sus proyectos. Dentro de nodo de un proyecto, los contenidos estn
organizados en carpetas y archivos.

NetBeans crea tres archivos para un proyecto JavaFX aplicacin FXML: un archivo marcado FXML para la interfaz grfica de usuario, un archivo

que contiene la clase principal de la aplicacin y un archivo que contiene la clase del controlador de la aplicacin.

Para abrir el archivo FXML de un proyecto en JavaFX Escena Builder, haga clic derecho en el archivo en el FXML proyectos

ventana, a continuacin, seleccione Abierto.

contenedores de diseo ayudan a organizar los componentes GUI. UN VBox organiza sus nodos verticalmente de arriba a abajo.

Para hacer un contenedor de diseo del nodo raz en un escenario grfico, seleccione el contenedor de diseo, a continuacin, seleccione la

escena del constructor Editar> documento cortado a la Seleccin opcin del men.

UN VBox 'S alineacin determina el posicionamiento trazado de sus hijos.

El tamao preferido (anchura y altura) de nodo raz del grfico de la escena es usada por la escena para determinar su tamao de la ventana

cuando la aplicacin comienza a ejecutar.

Se puede establecer una Etiqueta 'S de texto haciendo doble clic en l y escribiendo el texto, o seleccionando el bel La- y el establecimiento de
su Texto propiedad en el Inspector 's propiedades seccin.

Al agregar controles a una caja vertical, cada nuevo control se coloca por debajo de los anteriores de forma predeterminada. Puede cambiar
el orden arrastrando a los nios en Generador de escena 's Jerarqua ventana.

Para establecer la imagen para visualizar, seleccionar la ImageView a continuacin, establecer su Imagen propiedad en el Inspector 's

propiedades seccin. relacin de aspecto de una imagen es la relacin de la anchura de la imagen a su altura.

Para especificar una ImageView 'S tamao, establece su Ajuste ancho y Ajustar altura propiedades en el Inspector 's Diseo
seccin.
1136 Captulo 25 JavaFX GUI: Parte 1

Seccin 25.5.2 Tecnologas de Informacin general


Una clase principal de aplicacin JavaFX hereda de Solicitud ( paquete javafx.application.Application).
de la clase principal principal mtodo llama a la clase Solicitud 's lanzamiento esttica Mtodo para comenzar la ejecucin de una aplicacin JavaFX. Este
mtodo, a su vez, hace que el tiempo de ejecucin de JavaFX para crear un objeto de la Solicitud subclase y llamar a su comienzo mtodo, que crea
la interfaz grfica de usuario, se conecta a una Escena y lo coloca en el Escenario ese mtodo se inicia recevies como argumento.

UN GridPane ( paquete javafx.scene.layout) organiza nodos JavaFX en columnas y filas en una rejilla rectangular.

Cada clula en una GridPane puede estar vaco o puede contener uno o ms componentes JavaFX, incluyendo contenedores de diseo que
organizan otros controles.

Cada componente en una GridPane puede abarcar varias columnas o filas.


UN Campo de texto ( paquete javafx.scene.control) puede aceptar la introduccin de texto o texto de la pantalla.

UN deslizador ( paquete javafx.scene.control) representa un valor en el rango 0.0-100.0 de forma predeterminada y permite que el usuario
seleccione un nmero en ese rango moviendo el deslizador 'S pulgar.

UN botn ( paquete javafx.scene.control) permite al usuario iniciar una accin.


Clase Formato numrico ( paquete java.text) puede dar formato a cadenas de divisas y porcentuales de la configuracin regional especficas.

Interfaces grficas de usuario son orientada a eventos. Cuando el usuario interacta con un componente de interfaz grfica de usuario, la

interaccin-conocido como un evento-conduce el programa para realizar una tarea.

El cdigo que realiza una tarea en respuesta a un evento se llama un controlador de eventos.

Para ciertos eventos que puede enlazar un control a su mtodo de control de eventos mediante el uso de la Cdigo la seccin de la escena del
constructor Inspector ventana. En este caso, la clase que implementa la interfaz de detectores de eventos se crear para usted y llamar al
mtodo que se especifique.

Para los eventos que se producen cuando el valor de los cambios de propiedad de un control, debe crear el controlador de eventos en su

totalidad en cdigo.

Implementar el ChangeListener interfaz (paquete javafx.beans.value) para responder al usuario mover el deslizador 'S pulgar.

aplicaciones JavaFX en el que la GUI se implementa como FXML adherirse al patrn Model-ViewController (MVC) de diseo, que separa los
datos de una aplicacin (contenido en el modelo) de interfaz grfica de usuario de la aplicacin (la vista) y la lgica de procesamiento de la
aplicacin (el controlador) . El controlador implementa la lgica para las entradas de usuario de procesamiento. La vista presenta los datos
almacenados en el modelo. Cuando un usuario proporciona la entrada, el controlador modifica el modelo con la entrada dada. Cuando el
modelo cambia, el controlador actualiza el objeto de presentar los datos modificados. En una aplicacin simple, el modelo y el controlador a
menudo se combinan en una sola clase.

En una aplicacin JavaFX FXML, se definen los controladores de eventos de la aplicacin en una clase controlador. La clase controlador define

variables de instancia para interactuar con los controles mediante programacin, as como eventhandling mtodos.

Clase FXMLLoader 's esttico mtodo carga utiliza el archivo FXML que representa interfaz grfica de usuario de la aplicacin para crea escenario grfico

de la interfaz grfica de usuario y devuelve una padre ( paquete javafx.scene) referencia al nodo raz del escenario grfico. Tambin inicializa las

variables de instancia del controlador, y crea y registra los controladores de eventos para los eventos especificados en la FXML.

Seccin 25.5.3 Construccin de interfaz grfica de usuario de la App


Si un control o el diseo se pueden manipular mediante programacin en la clase del controlador, debe proporcionar un nombre para que el

control o el diseo. El nombre de cada objeto se especifica a travs de su fx: Identificacin propiedad. Puede establecer el valor de esta propiedad

mediante la seleccin de un componente de la escena, a continuacin, la ampliacin de la Inspector

la ventana de Cdigo seccin-la fx: Identificacin la propiedad aparece en la parte superior.


Resumen 1137

Por defecto, el GridPane contiene dos columnas y tres filas. Se puede aadir una fila encima o debajo de una fila existente haciendo clic
derecho en una fila y seleccionando Panel de rejilla> Aadir fila arriba o Panel de rejilla> Aadir fila abajo. Puede eliminar una fila o columna de la
derecha haciendo clic en la pestaa que contiene su nmero de fila o columna y seleccionando Borrar.

Se puede establecer una Botn 'S de texto haciendo doble clic en l, o seleccionando el Botn, a continuacin, establecer su Texto

propiedad en el Inspector la ventana de propiedades seccin.

UN GridPane el contenido de las columnas estn alineados a la izquierda por defecto. Para cambiar la alineacin, seleccione la columna haciendo clic
en la pestaa en la parte superior o inferior de la columna, a continuacin, en el Inspector 's Diseo

seccin, establecer el Halignment propiedad.

Configuracin de un nodo pref Ancho propiedad de una GridPane columna para USE_COMPUTED_SIZE indica que el ancho debe
basarse en el nio mayor.

Para un tamao Botn la misma anchura que los otros controles en una GridPane 'S columna, seleccione el Botn,
a continuacin, en el Inspector 's Diseo seccin, establecer el Anchura mxima propiedad a VALOR MXIMO.

A medida que el diseo de su interfaz grfica de usuario, se puede obtener una vista previa en la Escena del constructor seleccionando Vista

previa> Mostrar vista previa en la ventana.

El espacio entre el contenido de un nodo y su parte superior, derecho, inferior y bordes izquierdos se conoce como el acolchado, que separa los

contenidos de los bordes del nodo. Para establecer el relleno, seleccione el nodo, a continuacin, en el Inspector 's Diseo seccin, establecer el Relleno

Los valores de las propiedades.

Se puede especificar la cantidad predeterminada de espacio entre una GridPane 's columnas y filas con su
Hgap ( brecha horizontal) y Vgap ( brecha vertical) propiedades, respectivamente.

Puede escribir en una Campo de texto slo si es en foco, es decir, es el control que el usuario est interactuando. Al hacer clic en un
control interactivo, que recibe el foco. Del mismo modo, cuando se pulsa el Lengeta clave, las transferencias de enfoque desde el
control enfocable actual a la siguiente de una sola esto ocurre en el orden en que se aaden los controles para la GUI.

seccin 25.5.4 TipCalculator Clase


Para mostrar una interfaz grfica de usuario, debe asociarla a una Escena, luego coloque el Escena al Escenario que ha pasado en Solicitud mtodo
comienzo.

Por defecto, el Escena 'S tamao se determina por el tamao del nodo raz del escenario grfico. versiones sobrecargadas de la Escena constructor
le permite especificar el tamao de la escena y llenar (un color, degradado o imagen), que aparece en el do 'S de fondo.

Escena mtodo setTitle Especifica el texto que aparece en la Escenario barra de ttulo de la ventana.

Escenario mtodo setScene impone una Escena en una Escenario.

Escenario mtodo espectculo muestra el Escenario ventana.

seccin 25.5.5 TipCalculatorController Clase


los enumeracin RoundingMode del paquete java.math se utiliza para especificar cmo BigDecimal los valores se redondean durante los clculos o
cuando el formato de nmeros de punto flotante como Cuerda s.

Clase Formato numrico del paquete java.text proporciona capacidades de formato numricos, tales como formatos de moneda y porcentaje
especficos de la localidad.

UN Botn 'S controlador de eventos recibe una ActionEvent, lo que indica que la Botn se ha hecho clic. Muchos JavaFX
controla apoyo ActionEvent s.

Paquete javafx.scene.control contiene muchas clases de control de JavaFX.


Los @ FXML anotacin anterior a una variable de instancia indica que el nombre de la variable se puede utilizar en el archivo que describe FXML

interfaz grfica de usuario de la aplicacin. Los nombres de las variables que se especifican en la clase del controlador deben coincidir con

precisin el fx: Identificacin valores especificados en la construccin de la interfaz grfica de usuario.


1138 Captulo 25 JavaFX GUI: Parte 1

Cuando el FXMLLoader Carga un archivo FXML para crear una interfaz grfica de usuario, sino que tambin inicializa cada una de las variables de

instancia del controlador que se declaran con @ FXML para garantizar que se refieren a los componentes GUI correspondientes en el archivo FXML.

Los @ FXML anotacin que precede a un mtodo indica que el mtodo puede ser utilizado para especificar controlador de eventos de un control en

el archivo que describe FXML interfaz grfica de usuario de la aplicacin.

Cuando el FXMLLoader crea un objeto de una clase de controlador, determina si la clase contiene una inicializar mtodo sin
parmetros y, si es as, las llamadas que mtodo para inicializar el controlador. Este mtodo puede ser utilizado para
configurar el controlador antes de mostrar la GUI.

Una clase interna annima es una clase que se declara sin un nombre y por lo general aparece dentro de una declaracin de mtodo.

Dado que una clase interna annima no tiene nombre, un objeto de la clase debe ser creado en el punto donde se declara la
clase.

Una clase interna annima puede acceder a las variables de instancia de la clase de nivel superior, esttico variables y mtodos, pero tiene un

acceso limitado a las variables locales del mtodo en el que se declar-que slo puede acceder a la final variables locales declaradas en el

cuerpo del mtodo de cerramiento. (A partir de Java SE 8, una clase interna annima tambin puede acceder a una clase de manera efectiva final

variables locales).

Ejercicios de auto-revisin
25.1 Llenar los espacios en blanco en cada una de las siguientes afirmaciones:

a) A (n) puede mostrar texto y acepte la entrada de texto por parte del usuario.

b) Usar un (n) para organizar componentes GUI en clulas en una cuadrcula rectangular.

c) JavaFX Escena Constructor de ventana muestra la estructura de la GUI y permite


seleccionar y reorganizar los controles.
d) Se implementa la interfaz para responder a eventos cuando el usuario mueve un deslizador 's

pulgar.
e) A (n) representa la ventana de la aplicacin.

f) El mtodo es llamado por el FXMLLoader antes de mostrar la interfaz grfica de usuario.

g) El contenido de una escena se colocan en su .


h) Los elementos en el grfico de la escena se llaman .
yo) le permite construir interfaces grficas de usuario JavaFX utilizando la tcnica de arrastrar y soltar.

ene) archivo contiene la descripcin de una interfaz grfica de usuario JavaFX.

25.2 Estado si cada uno de los siguientes es cierto o falso. Si falso, explicar por qu.
a) Debe crear interfaces grficas de usuario JavaFX por ellos de codificacin en Java mano.

b) La disposicin VBox organiza verticalmente componentes en una escena.


c) Para alinear a la derecha controles en una GridPane columna, establecer su Alineacin propiedad a DERECHO.

d) La FXMLLoader inicializa el controlador de @ FXML variables de instancia.


e) Se anula la clase Solicitud 's lanzamiento mtodo para visualizar el escenario de una aplicacin JavaFX.
f) El control que el usuario est interactuando con tiene el foco.
g) Por defecto, una deslizador le permite seleccionar los valores de 0 a 255.
h) Un nodo puede abarcar varias columnas en una GridPane.
i) Cada Solicitud subclase debe anular la comienzo mtodo.

Respuestas a los ejercicios de auto-revisin

25.1 un) Campo de texto. segundo) GridPane. do) Jerarqua. re) ChangeListener <Nmero>. mi) Escenario. F) ize inicializacin. g) grfico de la escena. h) nodos. i)
Escena JavaFX constructor. j) FXML.

25.2 a) Falso. Puede utilizar JavaFX Escena Builder para crear interfaces grficas de usuario JavaFX sin necesidad de escribir cdigo. b) Verdadero.

c) Falso. El nombre de la propiedad es Halignment. d) Verdadero. e) Falso. Puede alterar temporalmente la clase
Ceremonias 1139

Solicitud 's comienzo mtodo para visualizar el escenario de una aplicacin JavaFX. f) True. g) Falso. Por defecto, un deslizador
le permite seleccionar valores entre 0.0 a: 100,0. h) Verdadero. i) Verdadero.

Ceremonias

25.3 ( lbum de recortes App) Encuentra cuatro imgenes de lugares famosos que utilizan sitios web como Flickr. Crear una aplicacin similar
a la Bienvenido aplicacin en la que organizar las imgenes en un collage. Aadir texto que identifica a cada hito. Puede utilizar las imgenes que
forman parte de su proyecto o puede especificar la direccin URL de una imagen que est en lnea.

25.4 (Mejorado Tip Calculator App) Modificar el Tip Calculator aplicacin para permitir que el usuario introduzca el nmero de personas en la
fiesta. Calcular y mostrar la cantidad adeudada por cada persona si el proyecto de ley se dividir en partes iguales entre los miembros del
partido.

25.5 ( Calculadora de hipoteca App) Crear una aplicacin de calculadora hipoteca que permite al usuario introducir un precio de compra, la
cantidad de pago inicial y una tasa de inters. Sobre la base de estos valores, la aplicacin debe calcular el monto del prstamo (precio de compra

menos el pago inicial) y mostrar el pago mensual de los prstamos de 10, 20 y 30 aos. Permitir al usuario seleccionar una duracin del prstamo a

medida (en aos) mediante el uso de una

deslizador y mostrar el pago mensual para que la duracin del prstamo personalizado.

25.6 ( Calculadora de prstamo de la universidad Pago App) Un banco ofrece prstamos universitarios que pueden ser pagado en 5, 10,
15, 20, 25 o 30 aos. Escribir una aplicacin que permite al usuario ingresar el importe del prstamo y la tasa de inters anual. Sobre la base
de estos valores, la aplicacin debe mostrar las longitudes de prstamos en aos y sus pagos mensuales correspondientes.

25.7 ( Calculadora de Pago de Automvil App) Por lo general, los bancos ofrecen prstamos para automviles para perodos que van de
dos a cinco aos (24 a 60 meses). Los prestatarios pagar los prstamos en cuotas mensuales. La cantidad de cada pago mensual se
basa en la duracin del prstamo, la cantidad prestada y la tasa de inters. Crear una aplicacin que permite al cliente para entrar en el
precio de un coche, la cantidad de pago inicial y la tasa de inters anual del prstamo. La aplicacin debe mostrar la duracin del
prstamo en meses y los pagos mensuales de prstamos de dos, tres, cuatro y cinco aos. La variedad de opciones permite al usuario
comparar fcilmente los planes de pago y elegir el ms adecuado.

25.8 ( Millas por galn Calculadora App) Los conductores a menudo quieren saber las millas por galn sus coches obtener para que puedan
calcular los costos de la gasolina. Desarrollar una aplicacin que permite al usuario introducir el nmero de millas conducidas y el nmero de galones

usados y calcula y muestra las millas por galn correspondientes.

Hacer una diferencia


25.9 ( Calculadora de ndice de Masa Corporal App) Las frmulas para calcular el ndice de masa corporal son

peso en libras 703


IMC = ------------------------------------------------------------------------------------
altura en pulgadas altura en pulgadas

o
weightInKi registro
carneros
IMC = ---------------------------------------------------------------------------------------
heightInMeters heightInMeters

Crear una aplicacin de calculadora del IMC que permite a los usuarios introducir su peso y altura y si estn entrando en estos valores en
unidades mtricas o Ingls, a continuacin, calcula y muestra el ndice de masa corporal del usuario. La aplicacin tambin debe mostrar la
siguiente informacin del Departamento de Salud y Servicios / Institutos Nacionales de Salud Humanos para que los usuarios puedan evaluar su
ndice de masa corporal:

Los valores del IMC

De bajo peso: menos de 18,5 normal:


entre 18,5 y 24,9
Exceso de peso: entre el 25 y el 29,9 Obeso:
30 o mayor
1140 Captulo 25 JavaFX GUI: Parte 1

25.10 ( Objetivo del ritmo cardaco de la calculadora App) Si bien el ejercicio, puede utilizar un monitor de ritmo cardaco al ver que su ritmo cardaco se
mantiene dentro de un rango seguro sugerido por sus entrenadores y mdicos. De acuerdo con la Asociacin Americana del Corazn (AHA), la
frmula para el clculo de su frecuencia cardaca mxima en latidos por minuto es 220 menos su edad en aos ( http://bit.ly/AHATargetHeartRates). Tu meta de
ritmo cardaco es un rango que es 50-85% de su frecuencia cardaca mxima. [ Nota: Estas frmulas son estimaciones proporcionadas por la AHA.
Las tasas mximas y de destino del corazn pueden variar dependiendo de la salud, la aptitud y el sexo de la persona. Siempre consulte a un
profesional antes de comenzar o modificar un programa de ejercicios de atencin de la salud o mdico cualificado.] Escribir una aplicacin que
introduce la edad de la persona, a continuacin, calcula y muestra la frecuencia cardiaca y del ritmo cardaco objetivo mximo rango de la
persona.