JFo 9 3 SG Esp

1
Java Foundations
9-3
Gráficos, audio y MouseEvents
Copyright © 2020, Oracle y/o sus filiales. Todos los derechos reservados. 2
2
Objetivos
• En esta lección se abordan los siguientes objetivos:
−Crear y usar una imagen JavaFX y un objeto ImageView
−Crear y usar audio JavaFX
−Crear y usar MouseEvents
−Comprender las expresiones Lambda en aplicaciones
de GUI
JFo 9-3
Gráficos, audio y MouseEvents Copyright © 2020, Oracle y/o sus filiales. Todos los derechos reservados. 3
3
Temas
• Gráficos
• Audio
• Eventos del mouse
Introducción Colores y Gráficos, audio y

a JavaFX formas Eventos del
mouse
JFo 9-3
4
Uso de sus propios gráficos
• JavaFX puede proporcionar elementos de la UI,
formas y texto
−Pero, si tiene talento para el arte, puede utilizar sus propios
gráficos en lugar de los que proporciona JavaFX
• Por ejemplo:
−El arte para el botón de selección de nivel no lo creó JavaFX

−Pero utilizamos JavaFX para agregar por procedimiento
números de nivel, texto y el gráfico de Duke
JFo 9-3
5
Una imagen JavaFX y un objeto ImageView
• Una imagen es un objeto que describe la ubicación de
un archivo de gráficos (.png, .jpg, .gif...)
Image image;
String imagePath = "Images/Fan1.png";
image = new Image(getClass().getResource(imagePath).toString);
• Un objeto ImageView es el nodo real

−La llamada a su constructor necesita un argumento de
imagen
ImageView imageView = new ImageView(image);
−Un objeto ImageView también contiene las mismas
propiedades que cualquier otro nodo: posición x, posición y,
anchura, altura...
JFo 9-3
También deberá importar javafx.scene.image.Image and

javafx.scene.image.ImageView.
6
¿Por qué tener una imagen y un objeto ImageView?
• Una gran ventaja es la animación
−Las imágenes se pueden cambiar en y fuera del objeto
ImageView
• El ventilador en Java Puzzle Ball lo aprovecha
−El ventilador pasa por 2 imágenes cuando está en
funcionamiento
• Los botones personalizados también se benefician

−Puede utilizar diferentes imágenes para los botones según su
estado:
• ¿El mouse está encima del botón?
• ¿El usuario está haciendo clic en el botón?
JFo 9-3
7
Indicaciones de un objeto ImageView
• Cómo crear imágenes:
Image image1 = new
Image(getClass().getResource("Images/fan1.png").toString());
Image image2 = new
• Cómo crear un objeto ImageView:

ImageView imageView = new ImageView(image1);
• Cómo intercambiar una imagen en un objeto

ImageView:
imageView.setImage(image2);
−Un objeto Imageview mantiene sus propiedades como

posicionamiento
JFo 9-3
8
Creación de objetos con las propiedades
del nodo
• Hasta ahora, hemos escrito todos los códigos JavaFX en
el método start()
−Es similar al principio del curso, en que la mayor parte del
código se escribió en el método main()
• El código orientado al objeto no se debe escribir de
esta forma
−En su lugar, los objetos deben tener campos de nodo
• Los métodos start() y main() están destinados a ser
controladores
JFo 9-3
9
Ejemplo: La clase Goal
• Fields
−private Image dukeImage;
−private ImageView dukeImageView;
• Constructor
−Toma argumentos para las posiciones x e y
−Asigna la imagen a su respectivo objeto ImageView
−Coloca dukeImageView según los argumentos x e y
JFo 9-3
El objetivo de los niveles de Java Puzzle Ball básicos y heredados es que la bola llegue a la meta.
La meta se representa visualmente como Duke. Hay muchos más campos y métodos para la
clase Goal y el constructor hace algunas cosas más de las que se describen aquí.
10
Ejercicio 1
• Importe y abra el proyecto GoalTest Observe que...
−El nodo raíz está disponible públicamente
−Hay un paquete con varios archivos de gráfico
−La clase Goal es un tipo de archivo corriente de la clase Java
• Escriba la clase Goal de acuerdo con las
especificaciones de la diapositiva anterior
−También tendrá que agregar el objeto ImageView de esta
clase al nodo raíz
• Instancie varios objetos de la clase Goal desde el
método start()
JFo 9-3
Los nodos tienen los métodos getter y setter para las propiedades como posición. Puede
obtener y definir las posiciones x e y de un objeto ImageView como haría con cualquier otro
nodo.
11
File Locations
• Asegúrese de que los archivos se encuentran en la
ubicación correcta
Image image = new Image(getClass().getResource("Images/Duke.png"));
• Imágenes/Duke.png se refiere a una carpeta dentro de

la carpeta GoalTest
−…\GoalTest\src\goaltest\Images
−O a un paquete dentro de un
paquete
JFo 9-3
12
Escala de un nodo
• Es muy fácil hacer un rectángulo más amplio:
• Pero si intenta lo mismo con un objeto ImageView...

−¡Puede parecer horrible!
JFo 9-3
13
Escala de un nodo de forma correcta
• JavaFX es excelente para escalar gráficos
−La calidad de la imagen tiene menos probabilidades de
deteriorarse
• Tiene la opción de mantener el ratio de aspecto de un

objeto ImageView
−La altura y la anchura de un objeto Imageview se
escalan juntas
−Evita la distorsión
imageView.setPreserveRatio(true);
imageView.setFitWidth(25);
JFo 9-3
14
Ordenación de nodos
• A veces, los probadores de Java Puzzle Ball no sabían
que su objetivo era llevar la bola hasta Duke
• Pensamos que agregar un guante de béisbol ayudaría a
solucionar el problema
• Duke y el guante son dos objetos ImageView
independientes
−Tenían que ordenarse de forma adecuada ya que el guante no
se muestra detrás de la mano
JFo 9-3
15
Ordenación de nodos de forma correcta
• El orden en el que se agregan los nodos al nodo raíz
determina el orden en que se muestran
• Los nodos agregados más tarde tapan a los nodos
agregados anteriormente
root.getChildren().addAll(gloveImageView, dukeImageView);
• Para solucionarlo podría...

−Cambiar el orden en el que se agregan los nodos al nodo raíz.
−Poner un objeto ImageView delante o detrás
gloveImageView.toFront(); //Either one of these
dukeImageView.toBack(); //will solve the problem
JFo 9-3
16
Clase Goal
• Fields
−private Image gloveImage;
−private ImageView gloveImageView;
• Constructor
−Toma argumentos para las posiciones x e y
−Asigna cada imagen a su respectivo objeto ImageView
−Coloca dukeImageView según los argumentos x e y
−Coloca y escala gloveImageView en relación con
dukeImageView
JFo 9-3
17
Ejercicio 2
• Continúe editando el proyecto GoalTest
• Escriba la clase Goal de acuerdo con las
especificaciones de la diapositiva anterior
−El constructor también debe tomar solo dos argumentos
−Debe aparecer un guante encima de la mano de Duke
• Indicación: Los nodos, incluidos los objetos ImageView,
tienen los métodos getter y setter para las propiedades
como posición
JFo 9-3
18
Temas
• Gráficos
• Audio

mouse
JFo 9-3
19
Similitudes de imagen y audio
• Creación de un objeto de imagen JavaFX...
Image image = new
• Es muy similar a la creación de un objeto de audio

JavaFX
Audio audio = new
Audio(getClass().getResource("Audio/Note5.wav").toString());
• Es muy común almacenar imágenes

y audio en sus propios
paquetes/carpetas
JFo 9-3
20
Diferencias de imagen y audio
• Un objeto de audio describe la ubicación de un archivo
de audio (.wav, .mp3...)
Audio audio = new
Audio(getClass().getResource("Audio/Note5.wav").toString());
• A diferencia de una imagen...

−No hay ningún equivalente de audio de un objeto ImageView
−Se puede reproducir audio haciendo referencia directamente
al objeto de audio
audio.play();
−Hay varios métodos de audio a los que puede llamar.
JFo 9-3
21
Clase Goal
• Fields
−private Image gloveImage;
−private ImageView gloveImageView;
−private Audio tone;
• La clase Goal contiene un objeto de audio como campo

−Se reproduce un tono cuando hace clic en Duke
−Observaremos cómo implantar esta función en la siguiente
parte de esta lección
JFo 9-3
22
Ejercicio 3
• Declare un objeto de audio como campo
• Instancie el objeto de audio
−Utilice el archivo .wav en el directorio del proyecto
JFo 9-3
23
Temas
• Gráficos
• Audio

mouse
JFo 9-3
24
Eventos del mouse y del teclado
• Los nodos pueden detectar los eventos del mouse
y del teclado
−Se aplica también a los objetos ImageView
−No está limitado a los botones y a otros componentes de GUI
• Los métodos útiles para que esto suceda incluyen:
−setOnMouseClicked()
−setOnMouseDragged()
−setOnMouseEntered()
−setOnMouseExited()
−setOnMouseMoved()
−setOnMousePressed()
−setOnMouseReleased()
JFo 9-3
25
Expresiones lambda
• Estos métodos utilizan un argumento especial
denominado expresión Lambda:
imageView.setOnMousePressed( /*Lambda Expression*/ );
• Las expresiones Lambda utilizan una

sintaxis especial:
(MouseEvent me) -> System.out.println("Pressed")
• Las llaves permiten que las expresiones Lambda

incluyan varias sentencias:
(MouseEvent me) -> {
System.out.println("Statement 1");
}//end MouseEvent
JFo 9-3
Las lambdas se introdujeron en Java SE 8. Proporcionan una sintaxis más eficaz y ordenada para
trabajar con aplicaciones de GUI y listas de ordenación.
26
Expresiones lambda como argumentos
• Cuando se combinan, obtenemos lo siguiente:
imageView.setOnMousePressed( (MouseEvent me) -> {
} );
• Qué hace este código:

−Permite un objeto imageView detectar una pulsación del
mouse en cualquier momento
−Si ocurre, las dos sentencias de impresión se ejecutan
−De lo contrario, este código se ignora
JFo 9-3
27
MouseEvent
• Un objeto MouseEvent solo existe en el ámbito de la
expresión lambda
• Contiene muchas propiedades y métodos útiles:
imageView.setOnMousePressed( (MouseEvent me) -> {
System.out.println(me.getSceneX());
System.out.println(me.getSceneY());
} );
• En este ejemplo:
−me es el objeto MouseEvent
−A me se accede para imprimir las posiciones x e y del cursor
del mouse al pulsar imageView
JFo 9-3
28
Métodos MouseEvent
• getSceneX()
• getSceneY()
− Devuelve un valor double
− Devuelve la posición del cursor en la escena JavaFX
− La esquina superior izquierda de la escena es la posición (0,0)
• getScreenX()
• getScreenY()
− Devuelve un valor double
− Devuelve la posición del cursor en la pantalla de la computadora
− La esquina superior izquierda de la pantalla de la computadora es
(0,0)
JFo 9-3
Hay muchos más métodos que los que aparecen aquí.
29
Recepción de eventos
• Cuando escribe un código para MouseEvents
−Está indicando la recepción de un nodo para un evento
concreto
−Pero los eventos, en realidad, no tienen que producirse
• Mientras se está recibiendo el nodo...
−Puede detectar cualquier evento, en cualquier momento
• Un nodo puede recibir muchos eventos
imageView.setOnMousePressed( /*Lambda Expression*/ );
imageView.setOnMouseDragged( /*Lambda Expression*/ );
imageView.setOnMouseReleased(/*Lambda Expression*/ );
JFo 9-3
30
Ejercicio 4
• Complete el método interactions() para que...
−Duke reciba una pulsación del mouse y un arrastre del mouse
−Se reproduzca un sonido al pulsar el mouse
−Se impriman las posiciones x e y del evento arrastrado del
mouse. Esto resultará útil para el juego de problemas
• ¿Qué pasa si nunca se llama a interactions()?
−Comente esta llamada de método en el constructor
JFo 9-3
31
Resumen
• En esta lección, debe haber aprendido lo siguiente:
−Crear y usar una imagen JavaFX y un objeto ImageView
−Crear y usar audio JavaFX
−Crear y usar MouseEvents
−Comprender las expresiones Lambda en aplicaciones
de GUI
Java
Foundations
JFo 9-3
32
33

JFo 9 3 SG Esp

Cargado por

Copyright:

Formatos disponibles

JFo 9 3 SG Esp

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JFo 9 3 SG Esp

Cargado por

Copyright:

Formatos disponibles

1

Introducción Colores y Gráficos, audio y

−El arte para el botón de selección de nivel no lo creó JavaFX

• Un objeto ImageView es el nodo real

También deberá importar javafx.scene.image.Image and

• Los botones personalizados también se benefician

• Cómo crear un objeto ImageView:

• Cómo intercambiar una imagen en un objeto

−Un objeto Imageview mantiene sus propiedades como

• Imágenes/Duke.png se refiere a una carpeta dentro de

• Pero si intenta lo mismo con un objeto ImageView...

• Tiene la opción de mantener el ratio de aspecto de un

• Para solucionarlo podría...

Introducción Colores y Gráficos, audio y

• Es muy similar a la creación de un objeto de audio

• Es muy común almacenar imágenes

• A diferencia de una imagen...

−Hay varios métodos de audio a los que puede llamar.

• La clase Goal contiene un objeto de audio como campo

Introducción Colores y Gráficos, audio y

• Las expresiones Lambda utilizan una

• Las llaves permiten que las expresiones Lambda

• Qué hace este código:

Hay muchos más métodos que los que aparecen aquí.

También podría gustarte