TALLERES DE CLASE

INTERFACES

Repaso.

Cada interfaz de usuario considera los siguientes tres

aspectos principales:
Elementos de la interfaz de usuario: estos son los
elementos visuales centrales que el usuario ve e
interactúa eventualmente. JavaFX proporciona una lista
enorme de elementos comunes y ampliamente utilizados que
varían de básicos a complejos, luego se van a explicar.
Diseños: definen cómo se deben organizar los
elementos de la interfaz de usuario en la pantalla y
proporcionan una apariencia final a la GUI (interfaz
gráfica de usuario).
Comportamiento: estos son eventos que ocurren cuando
el usuario interactúa con los elementos de la interfaz de
usuario.
JavaFX proporciona varias clases en el paquete
javafx.scene.control. Para crear varios componentes GUI
(controles), JavaFX admite varios controles, como el
selector de fecha, el campo de texto del botón, etc.
Cada control está representado por una clase; puede crear
un control instanciando su clase respectiva.
A continuación, se muestra la lista de controles de uso
común, mientras que la GUI está diseñada con JavaFX.
 lista de controles

Label: Un objeto Label es un componente para colocar

texto.
Botton: Esta clase crea un botón etiquetado.
ColorPicker: un ColorPicker proporciona un panel de
controles diseñado para permitir al usuario manipular y
seleccionar un color.
CheckBox: un CheckBox es un componente gráfico que puede
estar en estado activado (verdadero) o desactivado
(falso).
RadioButton: La clase RadioButton es un componente
gráfico, que puede estar en estado ON (verdadero) u OFF
(falso) en un grupo.
ListView: un componente ListView presenta al usuario una
lista de elementos de texto que se desplaza.
TextField: un objeto TextField es un componente de texto
que permite la edición de una sola línea de texto.
PasswordField: un objeto PasswordField es un componente
de texto especializado para la entrada de contraseñas.
Scrollbar: O Barra de desplazamiento es un control de
barra de desplazamiento que representa un componente de
la barra de desplazamiento para permitir al usuario
seleccionar entre un rango de valores.
FileChooser. Un control FileChooser representa una
ventana de diálogo desde la que el usuario puede
seleccionar un archivo.
ProgressBar: a medida que la tarea avanza hacia su
finalización, la barra de progreso muestra el porcentaje
de finalización de la tarea.
Slider: o control deslizante permite al usuario
seleccionar gráficamente un valor deslizando una perilla
dentro de un intervalo limitado.

Crear una interface con estilos CSS, para

mostrar las cajas de dialogo para capturar
el correo y el passwd.
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import static javafx.application.Application. launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class Logueadome extends Application {

@Override
public void start(Stage stage) {
// creando la etiqueta Email
Text textCorreo = new Text("Correo");

// creando la etiqueta para el passwd

Text textClave = new Text("Password");

// Creando el campo de texto para el email

TextField correo = new TextField();

// Creando el campo de texto para la clave

PasswordField clave = new PasswordField();

// Creating Buttons
Button btEnviar = new Button("Enviar");
Button btCancelar = new Button("Cancelar");

// Creando la malla
GridPane gridPane = new GridPane();

// configurando el tamaño de la malla

gridPane.setMinSize(400, 200);

// configurado márgenes
gridPane.setPadding(new Insets(10, 10, 10, 10));

// Estableciendo los espacios verticales y horizontales entre las columnas

gridPane.setVgap(10);
gridPane.setHgap(10);
 // Estable la alineación de la cuadrícula
gridPane.setAlignment(Pos.CENTER);

// Organizar todos los nodos en la cuadrícula

gridPane.add(textCorreo, 0, 0); // cajon de texo correo
gridPane.add(correo, 1, 0);
gridPane.add(textClave, 0, 1); // cajon de texto correo
gridPane.add(clave, 1, 1);
gridPane.add(btEnviar, 0, 2);
gridPane.add(btCancelar, 1, 2);

// Fijar los estilos para los nodos

btEnviar.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
btCancelar.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

textCorreo.setStyle("-fx-font: normal bold 20px 'serif' ");

textClave.setStyle("-fx-font: normal bold 20px 'serif' ");
gridPane.setStyle("-fx-background-color: BEIGE;");

Scene scene = new Scene(gridPane);

stage.setTitle("Ejemplo CSS ");
stage.setScene(scene);
stage.show();
}

public static void main(String args[]) {

launch(args);
}
}

SEGUNDO EJEMPLO
/*
* El siguiente programa es un ejemplo de un formulario de registro, que muestra
* controles en JavaFX como Selector de fecha, Botón de radio, Botón de alternancia,
* Casilla de verificación, Vista de lista, Lista de opciones, etc.
*/

import javafx.application.Application;
//import static javafx.application.Application.launch;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.control.ToggleButton;
import javafx.stage.Stage;

public class Registro extends Application {

@Override
public void start(Stage escenarioPpal) {
// nombre de la etiqueta
Text nombreLabel = new Text("Nombre");

// nombre del campo para el texto

TextField nombreTexto = new TextField();

// Etiqueta para fecha de nacimiento

Text FecNaclabel = new Text("Fecha Nacimiento");

// selector de fecha para elegir la fecha

DatePicker selectorFechas = new DatePicker();

// Etiqueta por género

Text generolabel = new Text("Género");

// Alternar grupo de radioBottons

ToggleGroup grupoGenero = new ToggleGroup();
RadioButton masculinoGenero = new RadioButton("hombre");
masculinoGenero.setToggleGroup(grupoGenero);
RadioButton femeninoGenero = new RadioButton("mujer");
femeninoGenero.setToggleGroup(grupoGenero);

// Label for reservacion

Text reservacionLabel = new Text("Reservación");

// Tbotón de alternancia para la reserva

ToggleButton reservacion = new ToggleButton();
ToggleButton yes = new ToggleButton("Yes");
ToggleButton no = new ToggleButton("No");
ToggleGroup groupreservacion = new ToggleGroup();
yes.setToggleGroup(groupreservacion);
no.setToggleGroup(groupreservacion);

// Etiqueta de tecnologías conocidas

Text tecnologiasLabel = new Text("Tecnologías conocidas");

// casilla de verificación para educación

CheckBox javaCheckBox = new CheckBox("Java");
javaCheckBox.setIndeterminate(false);

// casilla de verificación para educación

CheckBox puntoNetCheckBox = new CheckBox("punto net");
javaCheckBox.setIndeterminate(false);

// Etiqueta para la educación

Text educacionLabel = new Text("Calificación educativa");

// Vista de lista para calificación educativa

ObservableList<String> habilidades = FXCollections.observableArrayList("Ingeniería",
"Msc", "MBA",
 "Especialización", "BachillerTécnico", "Tecnologo", "Doctorado");
ListView<String> educationListView = new ListView<String>(habilidades);

// Etiqueta de ubicación
Text localizacionLabel = new Text("Localización");

// Cuadro de elección para ubicación

ChoiceBox localizacionchoiceBox = new ChoiceBox();
localizacionchoiceBox.getItems().addAll("Bogotá", "Bucaramanga", "Cali", "Medellín",
"Concepción");

// Etiqueta de registro
Button botonRegistro = new Button("Registro");

// Crear un panel de cuadrícula

GridPane gridPane = new GridPane();

// Configuración del tamaño del panel

gridPane.setMinSize(500, 500);

// Configuración de margenes
gridPane.setPadding(new Insets(10, 10, 10, 10));

// Establece los espacios verticales y horizontales entre las columnas

gridPane.setVgap(5);
gridPane.setHgap(5);

// Establece la alineación de la cuadrícula

gridPane.setAlignment(Pos.CENTER);

// Organizar todos los nodos en la cuadrícula

gridPane.add(nombreLabel, 0, 0);
gridPane.add(nombreTexto, 1, 0);

gridPane.add(FecNaclabel, 0, 1);
gridPane.add(selectorFechas, 1, 1);

gridPane.add(generolabel, 0, 2);
gridPane.add(masculinoGenero, 1, 2);
gridPane.add(femeninoGenero, 2, 2);
gridPane.add(reservacionLabel, 0, 3);
gridPane.add(yes, 1, 3);
gridPane.add(no, 2, 3);

gridPane.add(tecnologiasLabel, 0, 4);
gridPane.add(javaCheckBox, 1, 4);
gridPane.add(puntoNetCheckBox, 2, 4);

gridPane.add(educacionLabel, 0, 5);
gridPane.add(educationListView, 1, 5);

gridPane.add(localizacionLabel, 0, 6);
gridPane.add(localizacionchoiceBox, 1, 6);

gridPane.add(botonRegistro, 2, 8);

// Estilo de los nodos

botonRegistro.setStyle("-fx-background-color: white; -fx-textfill: darkslateblue;");

nombreLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

FecNaclabel.setStyle("-fx-font: normal bold 15px 'serif' ");
generolabel.setStyle("-fx-font: normal bold 15px 'serif' ");
reservacionLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
tecnologiasLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
educacionLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
localizacionLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

// Establecer el color de fondo

gridPane.setStyle("-fx-background-color: BEIGE;");
 // Creando un objeto de escena
Scene escena = new Scene(gridPane);

// Poniendo título al escenarioPpal

escenarioPpal.setTitle("Formulario de registro");

// Añadiendo escena al escenarioPpal

escenarioPpal.setScene(escena);

// mostrando el contenido del escenarioPpal

escenarioPpal.show();
}

public static void main(String args[]) {

launch(args);
}
}
Taller del login con captura de datos:

mport javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import static javafx.application.Application. launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;

public class MiLoginFX extends Application {

@Override
public void start(Stage stage) {
Text textUsuario = new Text("Usuario");
Text textContraseña = new Text("Contraseña");
TextField usuario = new TextField();
PasswordField Contraseña = new PasswordField();

TextField Datos1 = new TextField();

TextField Datos2 = new TextField();

Button btLogin = new Button("Login");

Button btCancelar = new Button("Cancelar");
GridPane gridPane = new GridPane();
gridPane.setMinSize(500, 300);
gridPane.setPadding(new Insets(20, 20, 20, 20));
gridPane.setVgap(20);
gridPane.setHgap(20);
gridPane.setAlignment(Pos.CENTER);
gridPane.add(textUsuario, 0, 0);
gridPane.add(usuario, 1, 0);
gridPane.add(textContraseña, 0, 1);
gridPane.add(Contraseña, 1, 1);
gridPane.add(btLogin, 0, 2);
gridPane.add(btCancelar, 1, 2);
gridPane.add(Datos1, 1, 3);
gridPane.add(Datos2, 2, 3);
 btLogin.setStyle("-fx-background-color: red;
-fx-text-fill: white;");
btCancelar.setStyle("-fx-background-color: red;
-fx-text-fill: white;");

textUsuario.setStyle("-fx-font: normal bold 20px

'red' ");
textContraseña.setStyle("-fx-font: normal bold
20px 'red' ");
gridPane.setStyle("-fx-background-color:
GREEN;");

btLogin.setOnMouseClicked(new
EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
// TODO Auto-generated method stub
Datos1.setText("Usuario: " +
usuario.getText());
Datos2.setText("contraseña: " +
Contraseña.getText());
} //btCancelar
});

btCancelar.setOnMouseClicked(new
EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
// TODO Auto-generated method stub
Datos1.setText("Cancelado ");
} //btCancelar
});

Scene scene = new Scene(gridPane);

stage.setTitle("App login ");
stage.setScene(scene);
stage.show();

}
 public static void main(String args[]) {
launch(args);
}
}

TALLER PARA EL VIERNES 22 DE OCTUBRE.

Desarrolle en java el siguiente formulario. Que capture datos y luego los muestre en la consola
para ver que si los ha tomado del formulario
Bibliografía

https://www.youtube.com/watch?v=AKYnfYJxO8U

Como actualizar el java?

use: Esemble:

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
Instale. Escene builder:

https://www.youtube.com/watch?v=n1G90HK4gLc

ejemplos:

https://www.youtube.com/watch?v=n1G90HK4gLc

https://www.youtube.com/watch?v=OLhKHLhb7ow

https://www.youtube.com/results?search_query=1+-+JavaFX+Formulario+B%C3%A1sico+-
+JavaFX+Scene+Builder+