Issuu on Google+

MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

Tutorial: Creando una ventana de formulario para el inicio de sesión del sistema: Tabla de contenido

Pag.

Objetivos: ...................................................................................................................................... 2 Anexos para este tutorial ............................................................................................................... 2 Conocimientos previos necesarios: ................................................................................................ 2 Metodología: ................................................................................................................................. 2 Lo que hay que saber antes de… .................................................................................................... 3 Pasos previos ................................................................................................................................. 3 PASOS PARA CREAR UNA VENTANA: .............................................................................................. 4 1) crear la clase .......................................................................................................................... 4 2.) IMPORTAR LAS LIBRERÍAS NECESARIAS PARA GRAFICAR UNA VENTANA (swing) .................. 4 3.) DECLARANDO TODOS LOS COMPONENTES DE LA VENTANA: (botones, campos de texto, etiquetas para los campos, los objetos de imagen, etc.) ............................................................ 5 4.) CREAR UN MÉTODO CONSTRUCTOR SIN PARÁMETROS DE ENTRADA, (es decir, sin parámetros dentro de sus paréntesis) ........................................................................................ 6 5.) CONFIGURANDO LAS CARACTERÍSTICAS DE LA VENTANA QUE SE VA A MOSTRAR. (Esto va posicionado de último dentro del método constructor porque es el orden en que se debe ejecutar) .................................................................................................................................... 6 6.) CREANDO LOS OBJETOS DECLARADOS ANTERIORMENTE ...................................................... 7 7.) ASIGNANDO COORDENADAS (X, Y, ANCHO, ALTO) A LOS OBJETOS DENTRO DE LA VENTANA 8 8.) ADJUNTANDO LOS OBJETOS A LA VENTANA, EN SUS RESPECTIVAS COORDENADAS .............. 8 9.) LLAMANDO AL METODO CONSTRUCTOR PARA QUE PINTE UNA VENTANA EN LA PANTALLA, (desde el método main()) ........................................................................................................... 9 OTRAS COSITAS IMPORTANTES ...................................................................................................... 9 HERENCIA: ................................................................................................................................. 9 Resumen: Pasos para crear una ventana con java: ....................................................................... 10 PREGUNTAS (para resolver observando el código): ...................................................................... 11 PRACTICA (para realizar sobre el código escrito en el archivo: “pruebaLogin.java” ): ................... 11 EL CODIGO: .................................................................................................................................. 13

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

Objetivos:  

Explicar los pasos o los puntos básicos que se deben tener en cuenta para crear una ventana cualquiera con el lenguaje de programación JAVA. Explicar el los pormenores del código java necesario para crear una ventana.

Anexos para este tutorial -) Clase pruebaLogin.java, archivo con el código necesario para dibujar la ventana que aparece en la imagen anterior. -) Carpeta llamada “img” con imágenes para los botones y la ventana

Conocimientos previos necesarios:   

Saber que es y cómo se declara una clase Saber que es y cómo se declara un método Saber que es y cómo se declara una variable

Metodología: Descargar el paquete con el tutorial y los archivos anexos, descomprimir. Se puede abrir el archivo pruebaLogin.java con un editor de textos o con JCreator, y a medida que se va leyendo el tutorial se va revisando el código e identificando sus partes. Con JCreator se puede ejecutar y ver el resultado final.

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

Lo que hay que saber antes de… Una ventana tiene dos componentes principales: la parte grafica que tiene que ver con la construcción gráfica de la ventana y los eventos que son las acciones que deseamos que ocurran cuando hacemos clic, por ejemplo, sobre el botón aceptar, o el botón cancelar, o cuando digitamos alguna tecla del teclado. Los eventos deben ser programados, pero por el momento aprendamos la parte gráfica: hacer y mostrar la ventana por la pantalla. Una ventana es un recuadro o marco que tiene dimensiones de alto y ancho en pixeles, y todos los elementos que la componen son objetos (botones, campos de texto, imágenes, títulos o etiquetas), que deben ser ubicados dentro de las dimensiones de la ventana mediante coordenadas (X,Y)…

Así por ejemplo, un botón se puede ubicar mediante las coordenadas (X=100,Y=100) como como se muestra en la siguiente figura:

Teniendo en cuenta lo anterior, pasemos directamente a ver los pasos para crear una ventana cualquiera y el código java necesario para esto:

Pasos previos  

Abrir el IDE ya sea JCreator, intelliJIDEA, Netbeans, eclipse o la que estemos aprendiendo a manejar. Crear una clase con un nombre adecuado al proyecto, y con su respectivo método main() para poder ejecutar el código que vamos a escribir.

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

PASOS PARA CREAR UNA VENTANA: 1) crear la clase que construirá la ventana, será pública y la llamaremos “LogIn”; haremos que ésta herede los métodos y atributos de la clase JFrame y que contenga un método constructor y un método principal

2.) IMPORTAR LAS LIBRERÍAS NECESARIAS PARA GRAFICAR UNA VENTANA (swing) import javax.swing.*; swing es una librería donde java encuentra los elementos (clases), necesarios para hacer la parte grafica de la ventana. A continuación una lista de las clases que usaremos en el tutorial: JFrame JLabel JTextField JPasswordField JButton ImageIcon

Clase usada para crear el marco de las ventanas, con los botones de maximizar, minimizar y cerrar ventana Clase usada para crear etiquetas para títulos, para poner al frente de los campos de un formulario, etc. Clase usada para crear los campos de texto para escribir datos como el nombre, apellido, etc. Clase usada para crear los campos de texto para escribir claves, (lo que se escribe aparece en forma de asteriscos). Clase usada para crear botones Clase usada para para crear un espacio que contendrá una imagen, y este espacio debe luego ser usado dentro de in JLabel o un JButton para poder mostrar la imagen

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

3.) DECLARANDO TODOS LOS COMPONENTES DE LA VENTANA: (botones, campos de texto, etiquetas para los campos, los objetos de imagen, etc.)

Así como hacemos para declarar una variable a partir de su tipo, (ejm: int numero; esto es una variable llamada numero de tipo entero), debemos declarar objetos que representarán cada uno de los elementos de nuestra ventana a partir de las clases que nos proporciona la librería swing. NOTA: DECLARAR un objeto es decirle al programa que un objeto de cierta clase, va a existir. CREAR un objeto es darle la existencia a ese objeto mediante la palabra new y el método constructor() de la clase de donde fue creado. Tarea: termine de llenar la tabla (recuerde respetar las mayúsculas), y ubique en el código las siguientes declaraciones Objeto llamado LblUsuario, creado a partir de JLabel lblUsuario; la clase JLabel- ésta es la etiqueta del campo de usuario JLabel lblClave;

JLabel lblTitulo;

JLabel lbllogo;

JTextField txtUsuario;

JPasswordField pswClave;

JButton btnIngresar;

JButton btnCancelar;

JButton btnBOTON;

ImageIcon acept; ImageIcon logo; Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

4.) CREAR UN MÉTODO CONSTRUCTOR SIN PARÁMETROS DE ENTRADA, (es decir, sin parámetros dentro de sus paréntesis) El método constructor SIEMPRE tiene el mismo nombre que la clase que se está escribiendo, en este caso nuestra clase se llama LogIn y su método constructor LogIn(). Un método constructor de una clase es el método que se invoca cuando se quiere crear un objeto a partir de esa clase. Por eso, si el objetivo de nuestra clase es dibujar o mostrar por pantalla, una ventana de inicio, necesitamos un método que al ejecutarse haga eso exactamente: mostrar una ventana de inicio en la pantalla del computador. Y para eso dentro del método constructor debemos hacer los pasos restantes…:

5.) CONFIGURANDO LAS CARACTERÍSTICAS DE LA VENTANA QUE SE VA A MOSTRAR. (Esto va posicionado de último dentro del método constructor porque es el orden en que se debe ejecutar)

setSize (550,750); setTitle("PROGRAMA");

getContentPane().setLayout(null);

setLocationRelativeTo(null);

setResizable(true);

setVisible(true);

setDefaultCloseOperation(EXIT_ON_CLOSE);

Sentencia para asignar las dimensiones iniciales de ancho y alto de nuestra ventana Sentencia usada para poner el título en la barra de título de la ventana (junto a los botones de maximizar, minimizar y cerrar) Si esta sentencia no se escribe, entonces el programa intentara automáticamente acomodar los elementos de la ventana Si esta sentencia no se escribe, nuestra ventana aparecerá en la parte superior izquierda de la pantalla, mientras que si se escribe, entonces aparecerá en el centro de la pantalla El parámetro que va en el paréntesis puede ser “true” o “false”, y esto indica si se da permiso o no de redimensionar la ventana con el mouse una vez aparezca por la pantalla El parámetro que va en el paréntesis puede ser “true” o “false”, e indica si la ventana será visible o no cuando se ejecute el programa Sentencia usada para determinar que cuando se cierre la ventana, también se interrumpa la ejecución del programa. Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

Una vez está listo el marco de nuestra ventana comenzamos a programar los elementos que la componen:

6.) CREANDO LOS OBJETOS DECLARADOS ANTERIORMENTE (lblUsuario, txtUsuario, btnIngresar.…etc.) Recordemos que para crear un objeto se usa la palabra new y luego el método constructor de la clase de donde viene el objeto, asi: clase objeto = new metodo(); Por ejemplo para crear un botón: JButton boton1 = new JButton(); En el anterior ejemplo se declaró el objeto al que llamamos “boton1” a partir de la clase JButton y seguidamente se creó con la palabra new y el método constructor de la clase: JButton(); Como los elementos de nuestra ventana ya estaban declarados, falta crearlos con palabra new. (ubicarlo en el código) acept=new ImageIcon ("img/accept.png"); logo=new ImageIcon ("img/candado.gif"); lbllogo= new JLabel(logo); lblUsuario= new JLabel(" Usuario"); lblClave= new JLabel(" Clave"); lblTitulo=new JLabel("Registro de usuario"); txtUsuario= new JTextField(); pswClave=new JPasswordField(); btnIngresar=new JButton("aceptar",acept); btnCancelar= new JButton("Cancelar"); btnBOTON= new JButton("BOTON"); Se puede apreciar que los métodos constructores para los diferentes objetos tienen en sus paréntesis diferentes datos de entrada, así por ejemplo para los elementos “ImageIcon” se escribe entre paréntesis la ruta donde está la imagen, para los “JLabel” entre paréntesis esta la leyenda o frase que será la etiqueta, para los “JButton” puede haber 2 datos de entrada en los paréntesis: el primero es la leyenda que sale en el botón y el segundo es un objeto que contiene una imagen y que queremos que aparezca dentro del botón

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

7.) ASIGNANDO COORDENADAS (X, Y, ANCHO, ALTO) A LOS OBJETOS DENTRO DE LA VENTANA Luego de haber creado los elementos, debemos posicionarlos en el marco de la ventana que habíamos creado antes, para ello se usa el método .setBounds(X, Y, ancho, alto) Entonces a cada elemento que queramos que aparezca en la ventana, le debemos especificar los valores de posición (X,Y), y los valores de dimensión (ancho, alto) Por ejemplo (ubicarlo en el código): lbllogo.setBounds (20, 340, 130, 130); lblTitulo.setBounds(50, 1, 300, 50); lblUsuario.setBounds(20, 50, 100, 25); … NOTA: para hacer este paso es muy importante tener un esquema o dibujo de la ventana en el papel, para poder tener una referencia de la posición de los elementos y asignar los valores.

8.) ADJUNTANDO LOS OBJETOS A LA VENTANA, EN SUS RESPECTIVAS COORDENADAS Una vez que cada elemento tiene asociada unos valores de posición y unos valores de dimensión, debemos “pegarlos” en el marco que habíamos construido antes. Para esto usamos la sentencia:

getContentPane().add(lbllogo); En el paréntesis del método “.add()”, debe ir el nombre del objeto que queremos “pegar” o adicionar a nuestra ventana, entonces por ejemplo, para adicionar algunos elementos… (ubicarlo en el código) getContentPane().add(lbllogo); getContentPane().add(lblTitulo); getContentPane().add(lblUsuario); getContentPane().add(txtUsuario); ….

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

9.) LLAMANDO AL METODO CONSTRUCTOR PARA QUE PINTE UNA VENTANA EN LA PANTALLA, (desde el método main()) Ya el método LogIn() está listo para pintar la ventana de inicio como la que se muestra al inicio del documento, pero necesitamos llamarlo desde el método main() para que se ejecute. public static void main(String[] args){ new LogIn(); }

OTRAS COSITAS IMPORTANTES Tal vez notaste que en la declaración de la clase se está usando la palabra “extends”; esto se usa para denotar, lo que en la POO (Programación Orientada a Objetos) se denomina HERENCIA. public class LogIn extends JFrame { ….. ….. }

HERENCIA: Se dice que cuando una clase hija (LogIn) HEREDA de una clase padre (JFrame), la primera puede usar todos los atributos y los métodos de la clase padre, como si fueran propios. En nuestro ejemplo se puede ver de la siguiente forma: Los métodos usados para especificar las características de nuestra ventana (setSize(), setTitle(), setResizable()….. etc.) y el método getContentPane().add() son propios de la clase JFrame, y si se desean usar esos métodos se debe crear un objeto de tipo JFrame por medio del cual se pueda acceder a ellos. Por otro lado cuando se hereda, como en este caso, no hay necesidad de crear tal objeto, si no que los métodos son usados directamente.

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

Resumen: Pasos para crear una ventana con java: 1. Crear la clase 2. Importar las librerías necesarias:

import javax.swing.*;

3. Declarar todos los componentes de la ventana (botones, campos de texto, etiquetas, campos para imágenes, etc.) ejem: JButton btnIngresar; JButton btnCancelar;….. 4. Crear un método constructor sin parámetros de entrada, luego dentro del método constructor hacer los pasos del 4 al 7 public LogIn() { …… } 5. Configurar las características de la ventana que se va a mostrar (setSize(), setTitle(), setVisible()…. Etc.) 6. Crear los objetos declarados anteriormente, usando la palabra new y el método constructor de la clase de donde se han declarado, ejem: btnIngresar = new JButton ("aceptar",acept); "aceptar" = leyenda que aparece dentro del botón acept = objeto que contiene una imagen que aparecerá dentro del botón

7. Asignar coordenadas (x,y, ancho, alto) a cada objeto que se va a mostrar dentro de la ventana, usando la sentencia setBounds(X, Y, ancho, alto); ejem: btnIngresar.setBounds(20, 120, 150, 50); 8. Adjuntar o “poner” los objetos dentro del marco de la ventana creada previamente, ejem: getContentPane().add(btnIngresar); 9. Llamar al método constructor desde el método main(), para que se ejecute y pinte una ventana en la pantalla: public static void main(String[] args){ new LogIn(); } Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

PREGUNTAS (para resolver observando el código): 1. Como se llama la clase? 2. La clase es pública o privada? 3. Cuál es la clase padre de la cual se esta heredando? 4. En qué tipo de objeto está el título: "Registro de usuarios"? 5. Cuál es el método constructor de la clase? 6. Para qué sirve un método constructor? 7. Que está haciendo el método constructor de ésta clase? 8. Explique qué método() se usa para ubicar mediante coordenadas, un elemento dentro de la ventana que se está creando?, explique también sus parámetros. 9. Cuál es el nombre del objeto que contiene la imagen del candado y de qué tipo es (de que clase sale)? 10. Cuáles son los pasos que se debe seguir para ponerle una imagen a un botón? 11. Que librerías se deben importar para: a. Crear los componentes gráficos de la ventana b. Controlar los eventos en la ventana 12. En general, para qué se usa el método .setBounds(X,Y,an,alt); 13. En general, para qué se usa el método .getContentPane().add(objeto); 14. Que significa la palabra extends?, explique

PRACTICA (para realizar sobre el código escrito en el archivo: “LogIn.java” ): 1. CAMBIAR EL TITULO DE LA VENTANA DE "Registro de usuarios" A "Inicio de sesión" 2. ALARGAR EL CAMPO CLAVE PARA QUE QUEDE DEL MISMO TAMAÑO DEL CAMPO USUARIO, 3. BORRAR TODO RASTRO DEL BOTON QUE SOBRA (el que no tiene ningún tipo de imagen y tiene la leyenda “BOTON”) 4. IGUAL QUE AL BOTON "ACEPTAR", PONGALE UNA IMAGEN AL BOTON "CANCELAR" (las imagenes estan en la carpeta adjunta "img") 5. MOVER EL LOGO DE LAS CANDADO AL FRENTE DE LOS CAMPOS DE TEXTO Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

6. CAMBIAR EL LOGO DEL CANDADO POR EL DE LAS LLAVES (LAS IMAGENES ESTAN EN LA CARPETA "IMG") 7. CAMBIAR EL TAMAテ前 DE LA VENTANA A UN ANCHO DE 450 POR UN ALTO DE 250 8. ASEGURARSE DE HACER TODO LO NECESARIO PARA QUE LA VENTANA SE VEA BIEN

Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

EL CODIGO: //2.) IMPORTAR LAS LIBRERIAS NECESARIAS import javax.swing.*;//controla parte grรกfica import java.awt.*;//eventos import java.awt.event.*;//acciones public class LogIn extends JFrame { //3.) DECLARANDO TODOS LOS COMPONENTES DE LA VENTANA DE LOGIN: botones, //campos de texto, etiquetas para los campos, la ventana, los objetos de imagen JLabel lblUsuario; JLabel lblClave; JLabel lblTitulo; JLabel lbllogo; JTextField txtUsuario; JPasswordField pswClave; JButton btnIngresar; JButton btnCancelar; JButton btnBOTON; ImageIcon acept; ImageIcon logo; //---------------------------------------------------------------------------------//4.)METODO CONSTRUCTOR SIN PARAMETROS DE ENTRADA public LogIn() { super(); //inicializando la clase padre //6.) CREANDO LOS OBJETOS DECLARADOS ANTERIORMENTE acept=new ImageIcon ("img/accept.png"); logo=new ImageIcon ("img/candado.gif"); lbllogo= new JLabel(logo); lblUsuario= new JLabel("* Usuario"); lblClave= new JLabel("* Clave"); lblTitulo=new JLabel("Registro de usuario"); txtUsuario= new JTextField(); pswClave=new JPasswordField(); btnIngresar=new JButton("aceptar",acept); btnCancelar= new JButton("Cancelar"); Profesor: Juan Diego Porras


MEDIA TECNICA Modulo: Const. de elementos de software 1.

CONSTRUCCION DEL PPI

btnBOTON= new JButton("BOTON"); Font f =new Font("broadway",3,18); //estableciendo un tipo de letra para usar con el label de tutulo lblTitulo.setFont(f);//FUENTE DEL TITULO //7.) ASIGNANDO COORDENADAS (X,Y, ANCHO, ALTO) A LOS OBJETOS DENTRO DE LA VENTANA lbllogo.setBounds (20, 340, 130, 130); lblTitulo.setBounds(50, 1, 300, 50); lblUsuario.setBounds(20, 50, 100, 25); txtUsuario.setBounds(110, 50, 200, 25); lblClave.setBounds(20, 78, 100, 25); pswClave.setBounds(110, 78, 50, 25); btnIngresar.setBounds(20, 120, 150, 50); btnCancelar.setBounds(180, 120, 150, 50); btnBOTON.setBounds(50, 200, 150, 50); //8) ADJUNTANDO LOS OBJETOS A LA VENTANA, EN SUS RESPPECTIVAS COORDENADAS getContentPane().add(lbllogo); getContentPane().add(lblTitulo); getContentPane().add(lblUsuario); getContentPane().add(txtUsuario); getContentPane().add(lblClave); getContentPane().add(pswClave); getContentPane().add(btnIngresar); getContentPane().add(btnCancelar); getContentPane().add(btnBOTON); //5)) CONFIGURANDO LAS CARACTERISTICAS DE LA VENTANA PARA MOSTRARLA COMPLETA setSize (550,750); setTitle("PROGRAMA"); getContentPane().setLayout(null);//el dise単ador voy a ser yo setLocationRelativeTo(null);//centra la ventana setResizable(true);//no deja cambiar el tama単o de la ventana setVisible(true);//mostrar la ventana setDefaultCloseOperation(EXIT_ON_CLOSE);//activa los botones de maximizar, minimizar y cerrar de una ventana } // FIN DEL METODO CONSTRUCTOR //9). LLAMANDO AL METODO CONSTRUCTOR PARA QUE PINTE UNA VENTANA EN LA PANTALLA public static void main(String[] args){ new LogIn(); } //FIN DEL METODO MAIN } //FIN DE LA CLASE Profesor: Juan Diego Porras


Tutorial01 creando una ventana para el inicio de sesión del sistema