JFo 9 1 SG Esp

1
Java Foundations
9-1
Introducción a JavaFX
Copyright © 2020, Oracle y/o sus filiales. Todos los derechos reservados. 2
2
Objetivos
• En esta lección se abordan los siguientes objetivos:
−Crear un proyecto JavaFX
−Explicar los componentes del proyecto JavaFX
por defecto
−Describir los diferentes tipos de nodos y paneles
−Explicar el gráfico de escenas, el nodo raíz, las escenas
y las etapas
JFo 9-1
Introducción a JavaFX Copyright © 2020, Oracle y/o sus filiales. Todos los derechos reservados. 3
3
Temas
• Usuarios
• Creación de un programa JavaFX
• El nodo raíz
• El gráfico de escenas, la escena y la etapa
Introducción Colores y Gráficos, audio y

a JavaFX formas Eventos del
mouse
JFo 9-1
4
¡Están a punto de llegar
los exámenes finales!
• Estudiar es importante
• ¿Quiere estudiar con un amigo?
−¿Pero sus amigos viven en otras residencias?
−¿Cuál es el mejor lugar para encontrarse?
−¿Cuál es el punto más céntrico del campus?
Gracias por
recordármelo...
JFo 9-1
5
JavaFX puede ayudarle
• JavaFX se utiliza para crear aplicaciones de GUI
• GUI: Interfaz gráfica de usuario
• Una aplicación de GUI nos permite ver la respuesta en
un mapa
JFo 9-1
6
Ejercicio 1
• Ejecute CampusMap.jar
• Alinee cada cuadrado con la residencia correcta
en el mapa
• Estime y ajuste la población de cada residencia
−Haga clic y arrastre el texto debajo de cada cuadrado
• Observe los cambios en los siguientes puntos
centrales:
−Todos los estudiantes en todas las residencias
−Un grupo de estudio de tres amigos que viven en las
residencias 1, 2 y 4
JFo 9-1
7
Pero, ¡este no es mi campus!
• Tienes razón
• Sería mejor si la escuela utilizara el programa...
−Mapa del campus
−Nombre de las residencias
−Población de las residencias
−Y su grupo de amigos
• Este es el juego de problemas de la sección En la
sección 9 se explica todo lo que necesitará para volver
a crear el programa
JFo 9-1
Java Puzzle Ball es también una aplicación JavaFX, pero se tardaría demasiado en volverla a
crear.
8
Temas
• Usuarios
• El nodo raíz

mouse
JFo 9-1
9
Cómo crear un programa JavaFX
• En NetBeans, haga clic en el botón New Project ( )
• Seleccione JavaFX para la categoría y JavaFX
Application para el proyecto y, a continuación, haga clic
en Next
• Continúe como si estuviera creando otro proyecto Java
JFo 9-1
10
Ejercicio 2
• Cree un proyecto JavaFX
−Java debe proporcionarle un programa por defecto
• Practique con el programa. ¿Puede hacer estos

cambios?
−Cambiar la etiqueta del botón
−Cambiar lo que se imprime cuando se hace clic en el botón
−Crear otro botón y mostrar ambos botones
−Cambiar el tamaño por defecto de la ventana de la aplicación
JFo 9-1
11
Proyecto JavaFX por defecto
public class JavaFXTest extends Application {
@Override
public void start(Stage primaryStage) {
Button btn = new Button();
btn.setText("Say 'Hello World'");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}
});
StackPane root = new StackPane();

root.getChildren().add(btn);
Continued on next slide..
JFo 9-1
JavaFX debe haberle proporcionado un programa similar a este. Observaremos con atención los
componentes de este código.
12
Proyecto JavaFX por defecto
… continued
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}//end method start
public static void main(String[] args) {

launch(args);
}//end method main
}//end class JavaFXTest
JFo 9-1
JavaFX debe haberle proporcionado un programa similar a este. Observaremos con atención los
componentes de este código.
13
Dos métodos: start() y main()
• start() es el punto de entrada para todas las
aplicaciones JavaFX
−Se puede considerar como el método main para JavaFX
…
}//end method start
• main() también es necesario en sus programas

−Inicia la aplicación JavaFX
public static void main(String[] args) {
launch(args);
}//end method main
JFo 9-1
A pesar de que los programas JavaFX necesitan un método main, es posible empaquetar
algunas aplicaciones JavaFX con un iniciador, de manera que no se necesita un método main.
14
Los botones son objetos
• Los botones son como cualquier otro objeto
−Se pueden instanciar
−Contienen campos
−Contienen métodos
Button btn = new Button();
…
}//end method start
• A partir de este código podemos decir que...

−Los botones contienen un campo de texto
−Los botones contienen un método para cambiar el campo de
texto
JFo 9-1
15
Los botones son nodos
• Algunos de estos campos y métodos están diseñados
para almacenar y manipular propiedades visuales:
−btn.getText()
−btn.setMinHeight()
−btn.setLayoutX() //set x position
−btn.setLayoutY() //set y position
−btn.isPressed() //is it pressed?
• Los objetos como este se denominan nodos JavaFX
JFo 9-1
16
Nodos
• Existen muchos tipos de nodos JavaFX:
PieChart
Button Rectangle
ScrollBar Text ImageView
• La mayoría de objetos visuales que creará

probablemente...
−Serán un nodo o
−Incluirán un nodo como campo
JFo 9-1
17
Interacción de nodo
• Esto ayuda a manejar la interacción del botón:
…
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}//end method handle
});//end setOnAction
…
}//end method start
• Se denomina "clase interna anónima"
− ¿La sintaxis no parece un lío?
− Las expresiones Lambda Java SE 8 son una alternativa elegante
− Trataremos las expresiones Lambda más adelante en esta sección
JFo 9-1
18
Temas
• Usuarios
• El nodo raíz

mouse
JFo 9-1
19
Creación de nodos
• Los nodos se instancian como cualquier otro objeto
Java:void start(Stage primaryStage) {
public
Button btn1 = new Button();
btn1.setText("Say 'Hello World'");
btn2.setText("222");
…
}//end method start
• Después de instanciar un nodo:

−Hay una memoria asignada para almacenar el objeto
−Los campos se pueden manipular y se puede llamar a los
métodos
−Pero puede que no se muestre...
JFo 9-1
20
Muestra de nodos
• Hay algunos pasos para mostrar un nodo
btn.setText("222");
root.getChildren().add(btn1);
…
}//end method start
• En primer lugar, agregue cada nodo al nodo raíz

−Se suele denominar root
−Es muy similar a una clase ArrayList de todos los nodos
JFo 9-1
21
Adición de nodos al nodo raíz
• Puede agregar cada nodo por separado:
• O bien, puede agregar muchos nodos a la vez:

root.getChildren().addAll(btn1, btn2, btn3);
JFo 9-1
22
Adición de nodos al nodo raíz
• Pero no agregue el mismo nodo más de una vez
−Causa un error del compilador:
JFo 9-1
23
Nodo raíz StackPane
• El nodo raíz de este ejemplo es un StackPane
root.getChildren().addAll(btn1, btn2);
−El StackPane apila los nodos uno por encima de otro
−Pero los botones pequeños podrían volverse ocultos e
inaccesibles
JFo 9-1
24
Los paneles como nodos Raíz
• Cada panel determina el diseño de los nodos
JFo 9-1
25
Programación de distintos paneles como nodos raíz
• Diseñar el nodo raíz como un panel diferente es fácil
• Solo tiene que especificar un tipo de referencia y un
tipo de objeto distintos

TilePane root = new TilePane();

VBox root = new VBox();

JFo 9-1
26
Ejercicio 3
• Edite el proyecto JavaFX actual
−Vamos a experimentar un poco
• Después de agregar un botón al nodo raíz, pruebe a
cambiar su posición
− btn1.setLayoutY(100);
• ¿La posición de un botón cambiará si el nodo raíz no
era un StackPane? Pruebe estas alternativas:
−TilePane
−VBox
−Group
JFo 9-1
27
Nodos raíz Group
• Un Group permite colocar los nodos en cualquier lugar
Group root = new Group();
btn1.setLayoutY(100);
• Un panel puede restringir dónde se colocan los nodos

−No se pueden mover, aunque lo desee
−No se puede hacer clic ni arrastrar un nodo que se ha
bloqueado en un panel
btn1.setLayoutY(100); //Has no effect
JFo 9-1
28
Un grupo puede contener un panel
• Los paneles también son nodos
−Cualquier nodo se puede agregar al nodo raíz
• Un panel puede ser una buena opción para almacenar

los botones, los cuadros de diálogo de entrada de texto
y otros elementos de GUI
−No puede mover los nodos individuales en un panel
−Pero puede mover todo el panel a un Group
−Mueva el panel como lo haría con cualquier otro nodo
JFo 9-1
29
Ejercicio 4
• Edite el proyecto JavaFX actual
−Es el momento de experimentar más
• ¿Puede averiguar cómo hacer lo siguiente?

−Cree un panel HBox y agregue varios botones para él
−Agregue el panel HBox a un nodo raíz Group
−Coloque el HBox cerca del botón de la ventana
JFo 9-1
30
Temas
• Usuarios
• El nodo raíz

mouse
JFo 9-1
31
El gráfico de escenas JavaFX
• Cómo decidir que los nodos agregados se pueden
dibujar como un gráfico de escenas
−El nodo raíz contiene un Hbox
−El HBox actúa como un contenedor para los botones
Group
Root Node
HBox
Button Button Button
JFo 9-1
Nota para los instructores: Los gráficos en estas dos diapositivas deben estar en la misma
posición.
32
El gráfico de escenas
• El HBox mantiene la GUI organizada y colocada en el
lugar apropiado
• El resto de la ventana se puede utilizar para otros
nodos
Group
Root Node
HBox Rectangle Text ImageView
Button Button Button
JFo 9-1
Nota para los instructores: Los gráficos en estas dos diapositivas deben estar en la misma
posición.
33
La escena y la etapa
• Si observamos el resto del programa JavaFX por
defecto, vemos dos cosas más:
• Una escena (que contiene el nodo raíz)
• Una etapa (que contiene la escena)
…
Scene scene = new Scene(root, 300, 250);
}//end method start
JFo 9-1
34
¿Qué es la escena?
• Hay algunas propiedades importantes que describen
una Scene:
• Gráfico de escenas
− La Scene es el contenedor para todo el contenido en el gráfico de
escenas JavaFX
• Size
− La anchura y la altura de la Scene se pueden definir
• antecedentes
− El fondo se puede establecer como un Color o una imagen de
fondo
• Información del cursor
− La Scene puede detectar los eventos del mouse y manejar las
propiedades del cursor.
Scene scene = new Scene(root, 300, 250, Color.BLACK);
JFo 9-1
35
¿Qué es la etapa?
• Considere la etapa como la ventana de la aplicación
• Estas son dos de las propiedades

importantes de la etapa:
• Title
−El título de la etapa se puede definir
• Escena
−La etapa contiene una Scene
JFo 9-1
36
Animación de jerarquía
• Una etapa es un contenedor de nivel superior
• Una etapa contiene una escena
• Una escena contiene un nodo raíz
• El nodo raíz contiene otros nodos
Stage
Scene
Root Node
Node Node
Node
JFo 9-1
37
Varias escenas, una etapa
• Es posible intercambiar cualquier escena en una sola
etapa
JFo 9-1
En Java Puzzle Ball utilizamos una sola etapa. Si hubiésemos utilizado varias etapas, sería un lío
ver como las ventanas se abren y se cierran al desplazarse por los menús.
38
Varias escenas, varias etapas
• También se pueden crear varias etapas
JFo 9-1
Normalmente se realiza con las herramientas. Pero no tanto con los juegos.
39
Resumen
• En esta lección se abordan los siguientes objetivos:
−Crear un proyecto JavaFX
−Explicar los componentes del proyecto JavaFX por defecto
−Describir los diferentes tipos de nodos y paneles
−Explicar el gráfico de escenas, el nodo raíz, las escenas y las
etapas
JFo 9-1
40
41

JFo 9 1 SG Esp

Cargado por

Información del documentohacer clic para expandir la información del documento

Información del documentohacer clic para expandir la información del documento

Copyright:

Formatos disponibles

JFo 9 1 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 1 SG Esp

Cargado por

Copyright:

Formatos disponibles

1

Introducción Colores y Gráficos, audio y

Introducción Colores y Gráficos, audio y

• Practique con el programa. ¿Puede hacer estos

StackPane root = new StackPane();

Scene scene = new Scene(root, 300, 250);

public static void main(String[] args) {

• main() también es necesario en sus programas

• A partir de este código podemos decir que...

• Los objetos como este se denominan nodos JavaFX

ScrollBar Text ImageView

• La mayoría de objetos visuales que creará

Introducción Colores y Gráficos, audio y

• Después de instanciar un nodo:

• En primer lugar, agregue cada nodo al nodo raíz

• O bien, puede agregar muchos nodos a la vez:

StackPane root = new StackPane();

TilePane root = new TilePane();

VBox root = new VBox();

• Un panel puede restringir dónde se colocan los nodos

• Un panel puede ser una buena opción para almacenar

• ¿Puede averiguar cómo hacer lo siguiente?

Introducción Colores y Gráficos, audio y

Button Button Button

HBox Rectangle Text ImageView

Button Button Button

• Estas son dos de las propiedades

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.