InterfaceS Graficas

Análisis y Diseño de Sistemas Facultad de Ingeniería

LABORATORIO N° 05

Tema: Interface gráfica de usuario WEB

05 Y 06 de Junio

I. INTRODUCCIÓN AL NETBEANS

NetBeans es un IDE de libre distribución bajo licencia SPL (Sun Public Licence). El mismo que se puede obtener del sitio Web www.netbeans.org .

Creacion de un Proyecto Una vez abierto el entorno de desarrollo, seleccionar en el menú:

File/New Proyect aparece la ventana de nuevo proyecto:

http://www.netbeans.org/


Como puede ver existen varias plantillas para la creación de proyectos de acuerdo al tipo de aplicación que se desea desarrollar. Nosotros por defecto usaremos de la categoría Java el proyecto Aplicación java.

A continuación procedemos a darle un nombre (Proyect Name) y crear nuestro proyecto (Finish), en este caso le damos el nombre “Ejemplo1”.

Una vez creado el proyecto, el entorno del desarrollador genera el siguiente codigo para nosotros:

/*

* To change this template, choose Tools | Templates

* and open the template in the editor.

*/

package ejemplo1;

/**

*

* @author John Gallo Ruiz

*/

public class Main {

/**

* @param args the command line arguments

*/


public static void main(String[] args) {

// TODO code application logic here

}

}

Ademas se modificaran las siguientes subventanas:


II. CREACIÓN DE LA PRIMERA VENTANA

NetBeans maneja todos sus objetos, ventanas, etc. como clases es decir cualquier ventana que nosotros creamos será una clase que heredara de javax.swing.JFrame.

Agregar una Ventana

1.- Click derecho en el paquete donde queremos agregar nuestra ventana.Ejemplo1 (click derecho)

New/ Jframe Form…

2.- Colocamos el nombre de la Clase que representara a nuestra ventana, en este caso Frame1.

3.- Click en Terminar (Finish).


Como puede observar se activan la paleta de diseño y la tabla de propiedades.

Principales Propiedades del JFrame

DefaultCloseOperation: Le da la funcion al Boton cerrar de la Ventana, por defecto estará seleccionado en EXIT_ON_CLOSE.

EXIT_ON_CLOSE : Al hacer click en el boton cerrar de la ventana, salimos de la ejecución del programa.

HIDE : Al hacer click en el boton cerrar de la ventana, oculta la ventana (Sigue Ocupando espacion en memoria).

DO_NOTHING : Al hacer click en el boton cerrar de la ventana, no hará nada (Le quita funcionalidad al boton).

DISPOSE : Al hacer click en el boton cerrar de la ventana, esta sera eliminada pero sin salir del programa (Deja de ocupar espacio en memoria).

Title: En esta propiedad podemos colocar lo que queremos que aparezca en la ventana de titulo.


Principales Métodos de la Clase JFrameEstos métodos los podremos usar sobre todo para realizar cambios durante la ejecución del Programa o para hacer cambios según los necesitemos:

setTitle(String titulo) : Cambia el titulo de la Ventana.

setDefaultCloseOperation(int operación) :Cambia la función del botón cerrar.

setResizable(boolean op) : Indica si dejaremos que el usuario pueda modificar el tamaña del Frame.

El metodo initComponents()Este metodo es creado por NetBeans y su funcion es crear con lenguaje java el diseño que nosotros habiamos creado anteriormente de una manera grafica.

Ejecucion de mi FramePara Visualizar mi Ventana debo poner en el Main principal (Main de la clase Main) las siguientes linea:

new NombredeClaseVentana().setVisible(true).

En nuestro caso sería: new Frame1().setVisible(true);


III. COMPONENTE GRÁFICOS DE JAVA

En el lenguaje java cada componente grafico esta definido por una clase, así tenemos que la clase JFrame es un frame, la clase JPanel es un panel, la clase JLabel es un label (Etiqueta de Texto), etc.

Componentes Swing y Componentes AWT Swing y AWT son las dos librerías graficas con las que cuenta java.

Los componentes AWT aparecieron en la versión 1.0 del jdk y eran los únicos componentes que se encontraban disponibles para desarrollar interfaces graficas de usuario, estos componentes se usan por lo general en las versiones 1.0 y 1.1 del lenguaje, aunque la plataforma java 2 soporta perfectamente los componentes AWT, la recomendación de Sun es que utilicemos tanto como sea posible los componentes Swing en lugar de los AWT.

Controles Swing

Etiqueta: Es representada por la clase JLabel. Sirve para colocar información en pantalla, esta información por lo general se mantendrá estática, pero también puede ser modificada.

Botón: Es representado por la clase JButton, es un botón simple.

Botón de dos posiciones: Es representado por la clase JToggleButton, nos da un botón que puede estar en dos posiciones(marcado/no marcado).

Casilla de activación: También conocida como casilla de verificación, es representada por la clase JCheckBox, puede estar seleccionado o deseleccionado.

Botón de opción: Se usa generalmente para seleccionar opciones dentro de una lista, puede estar seleccionado o deseleccionado.

Grupo de botones: Se usa para agrupar botones de decisión (activados o inactivados), de tal forma que ha preguntas con múltiples opciones (casillas de verificación o botones de opción), solo pueda seleccionarse una. Esta clase no tiene representación grafica, solo sirve para agrupación de botones. Es representada por la clase JButtonGroup.

Lista Desplegable: Representado por la clase JComboBox, sirva para mostrar una lista desplegable.


Lista: Representado por la clase JList, muestra una lista con elementos donde podemos seleccionar uno o mas elementos.

Campo de Texto: Es una caja de texto donde el usuario puede ingresar información. Es representado por la clase JTextField.

Área de Texto: Es un área de varias líneas que muestra texto y dependiendo si se desea o no, el usuario puede modificar el texto.

Barra de desplazamiento: Permite ajustar el contenido de un componentes dentro de otro, por ejemplo una tabla de muchas líneas poderla ver en un panel de a lo mucho cinco líneas, etc. Es representado por la clase JScrollBar.

Deslizador: Permite seleccionar gráficamente un valor dentro de un rango de valores. Es representado por la clase JSlider.

Barra de Progreso: Sirve para mostrar el progreso de un proceso. Es representado por la clase JProgressBar.

Cuadro Formateado: Sirve para colocar un cuadro de texto con algún formato predefinido (por ejemplo fechas). Esta representado por la clase JFormattedTextField la cual hereda del JTextField, podemos usar este tipo de cuadro o el JTextField con algunas modificaciones que vendría siendo lo mismo.

Cuadro de Contraseña: Sirve para el ingreso de contraseñas. Es representado por la clase JPasswordField, que al igual que el caso anterior hereda de JTextField. Podemos usar en JTextField con algunas modificaciones y realizaría la misma función.

Spinner: Permite seleccionar valores dentro de una secuencia ordenada. Es representado por la clase JSpinner.

Separador: Es usado para poner divisores dentro de un panel, de manera que podamos separar distintas áreas dentro de un formulario. Es representado por la clase JSeparator.

Árbol: Usado para mostrar información jerarquizada. Es representado por la clase JTree.


Tabla: Usado para mostrar tablas bidimensionales con celdas. Es representado por la clase JTable.

Colocar un componente swing en nuestra ventana en NetBeansPara colocar un componente en nuestra ventana, lo primero que debemos hacer es asegurarnos que estemos ubicados en la ventana y además estemos en la pestaña de diseño. A continuación seleccionamos el componente deseado, le damos un clic y luego vamos al panel y en la ubicación requerida damos el clic para ubicar nuestro componente.

Principales métodos de los Controles Swing. Los métodos que a continuación enumeraremos se corresponden con las propiedades que podremos ver en la tabla de propiedades del NetBeans.

Etiqueta: Propiedad Método Detalle

font setFont(Font f) Cambia el tipo de letra, tamaño y detalles.

Icon setImageIcon(ImageIcon imagen) Cambio y/o coloca una imagen dentro de la etiqueta.

text setText(String text) Cambia el texto de la etiqueta.

border setBorder(Border borde) Cambia el borde de la etiqueta.

Botón: Propiedad Metodo Detalle

Icon setIcon(Icon imagen) Cambia la imagen que estará en el botón.

text setText(String texto) Cambia el texto del botón.

Casilla de activación:Propiedad Método Detalle

selected setSelected(boolean marcado) Cambia el estado de la caja a marcado o no

Text setText(String texto) Cambia el texto de la casilla

Botón de opción: Propiedad Método Detalle

selected setSelected(boolean marcado) Cambia el estado de la caja a marcado o


no

Text setText(String texto) Cambia el texto de la casilla

Lista Desplegable:Propiedad Método Detalle

Model setModel(ComboBoxModel model) Cambia el modelo y/o el contenido de la lista desplegable

selectedIndex setSelectedIndex(int index) Cambia el ítem del combo box seleccionado por defecto, según el índice de ubicación.

selectedItem setSelectedItem(Object item) Cambia el item del combo box seleccionado por defecto, según el objeto de ubicación.

Lista:Propiedad Método Detalle

Model setModel(ListModel model) Cambia el modelo y/o el contenido de la lista

SelectionMode setSelectionMode(int seleccion) Cambio el tipo de selección de la Lista(SINGLE, SINGLE_INTERVAL, MULTIPLE_INTERVAL) para poder seleccionar solo un ítem, un intervalo de ítems, o múltiples intervalos de ítems.

Campo de Texto:Propiedad Método Detalle

Editable setEditable(boolean valor) Activa o desactiva la opción para poder editar el texto.

Text setText(String text) Cambia el texto que aparecerá por defecto en la caja.


Área de Texto:Propiedad Método Detalle

Columns setColumns(int columnas) Indica y/o cambia el numero de columnas que tendra de ancho.

Editable setEditable(boolean) Activa o desactiva la opción para poder editar el texto.

Rows setRows(int filas) Indica y/o cambia el numero de filas que tendra de alto.

tabSize setTabSize(int tabulacion) Indica y/o cambia el tamaño de la tabulacion en nuestro JTextArea.

Barra de desplazamiento:Propiedad Método Detalle

Orientation setOrientation(int Orientacion) Indica y/o cambia la orientación de la barra.

Deslizador:Propiedad Método Detalle

Orientation setOrientation(int Orientacion) Indica y/o cambia la orientación del deslizador.

Barra de Progreso:Propiedad Método Detalle

Orientation setOrientation(int Orientacion) Indica y/o cambia la orientación de la barra.

Spinner:Propiedad Método Detalle

Model setModel (SpinnerModel modelo) Permite cambiar el modelo del Spinner, pudiendo ser este fechas, texto, o números.

Separador:Propiedad Método Detalle

Orientation setOrientation(int Orientacion) Indica y/o cambia la orientación del separador.


Árbol:Propiedad Método Detalle

Model setModel (TreeModel modelo) Permite cambiar el modelo del Árbol, permitiéndonos agregar niveles y subniveles.

Tabla:Propiedad Método Detalle

Model setModel (TableModel modelo) Permite cambiar el modelo de la tabla, permitiéndonos agregar filas y columnas, así como editar los valores k tomaran.

Contenedores Swing Con esta nomenclatura agrupamos a una serie de clases que se corresponden con componentes swing que realizan la función de contenedores de otros componentes. Los mas importantes son:

Panel: Es el mas flexible y utilizado de todos. Se utiliza normalmente para agrupar componentes, se le puede asignar un borde definido. Es representado por la clase JPanel.

Panel con Pestañas: Contiene muchos componentes, pero solo puede mostrar un conjunto de ellos a la vez, el usuario puede ir cambiando de manera sencilla el componente a observar, sus componentes suelen ser por lo general paneles. Es representado por la clase JTabbedPane.

Panel divisor: Este panel agrupa dos componentes, uno al lado de otro. El usuario puede ajustar la línea divisoria que separa ambos componentes arrastrándola. El aspecto es similar al que ofrece el explorador de Windows. Es representado por la clase JSplitPane.

Panel de desplazamiento: Ofrece una vista de Scholl de un componente, suele contener componentes grandes o que pueden crecer (Ejemplo Tablas). Se utilizan debido a las limitaciones del tamaño de la pantalla. Es representado por la clase JScrollPane.


Barra de herramientas: Agrupa una serie de herramientas (Normalmente botones) en una fila o en una columna, pueden permitir al usuario arrastrar la barra a distintos lugares. Es representado por la clase JToolBar.

Panel de Escritorio: Permite emular el comportamiento de un escritorio, es usado por lo general para crear escritorios virtuales. Es representado por la clase JDesktopPane.

Ventana Interna: Permite mostrar una ventana dentro de otra. Parece ventana y ofrece toda su funcionalidad, pero debe permanecer siempre dentro de otra ventana que la contiene. Es representada por la clase JInternalFrame.

Panel con Capas: Este panel ofrece una tercera dimensión, la profundidad, para poder posicionar componentes de esta forma. Al añadir un componente a un panel de este tipo de específica también su profundidad mediante un entero, cuanto mayor sea el entero, mayor será su profundidad. Es representado por la clase JLayeredPane.


IV. TUTORIALES

Desarrollo de tutoriales para profundizar los conocimientos adquiridos.

Conceptos Previos

Eventos: Los eventos son los que se encargan de realizar la comunicación del usuario con el sistema a través de la interfaz. El lenguaje java nos ofrece una completa jerarquía de clases cuya función es la de representar los distintos tipos de eventos que podemos tratar desde una interfaz de usuario.

Navegabilidad: Se llama navegabilidad a la comunicación entre una ventana y otra, transmisión de información así como actualizacion, etc. Para lograrla trataremos de emular la estructura de una lista enlazada, en cada ventana nueva pondremos una clase de la cual será llamada.

Tutorial 1: Uso de los Campos de Texto, Etiquetas y Botones.

En este tutorial crearemos una ventana que nos permitirá ingresar texto en un texfield y ponerlo en un label.

1. Creamos un nuevo proyecto de nombre Tutorial1.

2. Agregamos al proyecto un Formulario JFrame.

3. Agregamos un JTextField, dos JLabel y un JButton de la siguiente forma:

4. Hacemos clic derecho sobre cada elemento y damos clic en “Editar Texto” de tal manera que quede así:


5. A continuación añadimos un evento a nuestro botón. Para esto tenemos dos formas: a) Damos doble clic al botón b) Clic derecho, eventos, action, actionperformed.

6. Dentro del método creado (jButton1ActionPerformed) escribiremos las siguientes líneas de código:

Aquí estamos creando una variable de tipo string llamada linea en la cual ingresamos el valor tomado del textfield mediante el método getText(), luego el valor de la variable linea lo ponemos como texto del label2, mediante el método setText().

7. A continuación agregamos las líneas necesarias en el main para poder visualizar la ventana.

Tutorial 2: Uso de las casillas de activación y de los botones de opción.

En este tutorial aprenderemos a usar las casillas de activación y los botones de opción. El ejercicio consiste en crear un formulario de elección donde el usuario pueda elegir sus gustos y sus platos favoritos, cabe resaltar que puede elegir más de una opción.


2. Agregamos al proyecto un nuevo JFrame de nombre “Ventana”.

3. En la ventana creada agregamos los siguientes componentes: 3 Etiquetas, 3 Casillas de activación, 3 Botones de opción, 2 Separadores y un Botón. A continuación editamos los textos de tal manera que tengamos lo siguiente:

4. Damos la funcionalidad al Botón de igual manera que en el caso anterior y al método ActionPerformed del botón le agregamos las siguientes líneas:


Aquí estamos creando una variable de tipo String llamada salida y le damos un valor inicial. A continuación verificación si la casilla de activación esta marcada o no, para esto usamos el método isSelected(). En caso de estar seleccionado agregamos un valor a la variable salida. Hacemos lo mismo para la casilla de activación 2, pero ahora en lugar de agregar un texto, obtenemos el texto desde la casilla, con el método getText(). Hacemos lo mismo para las siguientes casillas. El manejo en el caso de los Botones de opción es el mismo. Finalmente cambiamos el texto de la etiqueta tres, colocándole el valor obtenido en salida.

5. A continuación agregamos las líneas necesarias en el main para poder visualizar la ventana.

Tutorial 3: Uso del Grupo de Botones.

En este tutorial aprenderemos a usar el grupo de botones, esta opción nos servirá para elegir una y solo una opción de un conjunto de botones de opción y/o casillas de activación. El ejercicio consiste en crear un formulario de elección donde el usuario pueda elegir su mascota favorita, pudiendo elegir una y solo una opción.



2. Agregamos al proyecto un Formulario Jframe de nombre Ventana.

3. En la ventana creada agregamos los siguientes componentes: 3 Etiquetas, 3 casillas de verificación, 2 botones de opcion, 1 separador, 1 boton y 2 Grupos de botones (Los que aparentemente no hacen nada y no tienen ningun grafico que los represente en el Frame). A continuación editamos los textos de tal manera que tengamos lo siguiente:

4. En el constructor de la Ventana agregamos debajo de la invocación del metodo initComponents() las siguientes lineas.

Aquí lo que estamos haciendo es agregar los jCheckBox al buttonGroup1 y los jRadioButton al buttonGroup2.

5. A continuación le damos la funcionalidad al botón jButton1 colocando las siguientes líneas de código en su método manejador del evento:


Aquí estamos declarando una variable de tipo String llamada linea y la inicializamos, luego vemos cual de los jCheckBox es el seleccionado mediante una serie de sentencias if-else y agregamos el texto a la variable linea, luego hacemos lo propio con los jRadioButton y finalmente cambiamos el texto al jLabel3 colocando el hemps guardado en la variable linea.

InterfaceS Graficas

Documents

Transcript of InterfaceS Graficas