Diseño de Interfaz Gráfica de Usuario en El Desarrollo de Software

10 de febrero de 2017 DISEÑO DE INTERFAZ GRÁFICA DE USUARIO CON EL LENGUAJE JAVA
Diseño de interfaz gráfica de usuario en el desarrollo de software
En el desarrollo de un producto software el diseño de la interfaz gráfica de usuario tiene un rol muy importante
en el momento de establecer una buena comunicación con el cliente y usuario del sistema a construir. En un
proceso de construcción de software moderno es necesario incluir al usuario del sistema en el proceso
constructivo. En un proceso de desarrollo tradicional se consideraba solamente la realimentación entre las fases de
desarrollo. Hay muchos modelos llamados ciclos de vida del desarrollo de software que no incluyen al usuario
durante todo el proceso de desarrollo y tienen una mirada muy técnica, tecnológica, basada en normas, estándares
y herramientas CASE.
Proceso constructivo tradicional de un producto software
Análisis Diseño Programar Probar
¿Qué se desea ¿Cómo se debe Escribir el Poner en

construir? construir? código fuente funcionamiento
Diseño de Interfaz de usuario
El diseño de interfaces de usuarios en el proceso de desarrollo de software brinda una oportunidad muy buena
para establecer en cada fase del desarrollo una comunicación que ayude a mejorar la calidad del producto software
que se está construyendo.
https://carlosprivitera.blogspot.com.ar/ Página 1 de 53
Proceso constructivo moderno de desarrollo de un producto software basado en el diseño de la interfaz

para usuario
Crear una interfaz Crear una interfaz Crear una interfaz Crear una interfaz
pensando en el pensando en los basada en el usuario útil, que se pueda
usuario requerimientos y sus usar y sea funcional
de usuario requerimientos
 Prototipo  Producto
 Maqueta  Prototipos  Prototipos
¿Qué se desea ¿Cómo se debe Escribir código Poner en

construir? construir? funcionamiento
Muchas metodologías orientadas a la gestión de proyectos de construcción de productos software tienen un

conjunto de principios que las caracterizan. El conjunto de principios se centran en el cliente.
Los métodos ágiles promueven los siguientes principios
 Valores: http://agilemanifesto.org/iso/es/manifesto.html
o Individuos e interacciones sobre procesos y herramientas
o Software funcionando sobre documentación extensiva
o Colaboración con el cliente sobre negociación contractual
o Respuesta ante el cambio sobre seguir un plan (Los clientes cambian los requerimientos)
Principios: http://agilemanifesto.org/iso/es/principles.html
Satisfacer al cliente mediante la entrega temprana y El software funcionando y probado por el cliente es la medida principal de
continua de software con valor. progreso.
Aceptar que los requisitos cambian, aprovechar el Los procesos Ágiles promueven el desarrollo sostenible, continuo e indefinido.
cambio para proporcionar ventaja competitiva al Los desarrolladores, usuarios y cliente trabajan de forma continua.
cliente.
La atención continua a la excelencia técnica y al buen diseño mejora la
Entregas de productos software al cliente que sea Agilidad.
funcional en tiempos cortos.
La simplicidad, o el arte de maximizar la cantidad de trabajo no realizado, son
El cliente y usuarios trabajamos juntos de forma esenciales.
cotidiana durante todo el proyecto.
Las mejores arquitecturas, requisitos y diseños emergen de equipos auto-
Los proyectos se desarrollan con clientes, usuarios organizados.
y equipos de desarrollo motivados.
A intervalos regulares el equipo reflexiona sobre cómo ser más efectivo para a
Clientes, usuarios y equipos de desarrollo se continuación ajustar y perfeccionar su comportamiento en consecuencia.
comunican verbalmente y cara a cara.
El método RUP promueve los siguientes principios
Principios: https://es.wikipedia.org/wiki/Proceso_Unificado_Racional
 Adaptar el proceso
o El proceso deberá adaptarse a las necesidades del cliente ya que es muy importante interactuar con él.
 Equilibrar prioridades
o Los requisitos de los diversos participantes pueden ser diferentes, contradictorios o disputarse
recursos limitados.
 Demostrar valor iterativamente
o Los proyectos se entregan al cliente, aunque sea de un modo interno, en etapas iteradas.
 Colaboración entre equipos
o El desarrollo de software no lo hace una única persona sino múltiples equipos.
 Enfocarse en la calidad
o El control de calidad no debe realizarse al final de cada iteración, sino en todos los aspectos de la
producción, entregas funcionales y continuas al cliente.
 Elevar el nivel de abstracción (Usar representaciones visuales para el cliente, usuarios y desarrolladores)
o Este principio dominante motiva el uso de conceptos reutilizables tales como patrones de diseño del
software, lenguajes 4GL o esquemas (frameworks) por nombrar algunos. Estos se pueden acompañar
por las representaciones visuales de la arquitectura, por ejemplo con UML (Lenguaje Unificado de
Modelado), GUI (Interfaz Gráfica de Usuario).
Conclusión
Las interfaces gráficas de usuarios irrumpieron en la sociedad en la década de los 90’ del siglo pasado, tienen más
de 30 años de crecimiento y de desarrollo de ingeniería informática. Deben ser valorizadas dentro del proceso de
desarrollo de software tradicional y unir a dicho proceso las metodologías modernas de gestión de proyectos.
Sinergia de procesos en busca de la calidad del producto software
1. Ingeniería del software (cascada, espiral, prototipo, etc.)

a. Interfaces gráficas de usuario, GUI (Valorizar el diseño de GUI como herramienta de comunicación con
el cliente)
2. Proceso de construcción de software ágil (SCRUM, KANBAN, XP, etc.)
3. Procesos de construcción de software modernos RUP
4. Procesos de modelados de software modernos UML
5. Uso de herramientas CASE modernas que brinden soporte a todo el ciclo de vida del desarrollo de software
a. JDeveloper 12g de Oracle
6. Otras tecnologías …
Creando una interfaz a la solución de la comunicación entre habitantes del universo
Seleccionar de la barra de comandos la

opción Nueva Aplicación
Seleccionar el ítem Aplicación de Escritorio

Java
Escribir el nombre de la aplicación
Escribir el nombre del paquete que se creará

por defecto para cada nuevo proyecto
Escribir el nombre del proyecto
Escribir el nombre del paquete que contendrá

las nuevas clases y recursos
Hacer click con el botón derecho del ratón sobre el

nombre del proyecto y seleccionar la opción de
nuevas características de proyecto
Seleccionar el ítem Frame como nueva

característica para el proyecto
Escribir el nombre de la nueva clase tipo

Frame
Resultado de la tarea realizada
Poner a en la clase VentanaPrincipal el valor de

BorderLayout a la propiedad layout
Esto hará que la vista de la clase VentanaPrincipal

se haga responsiva
Java es responsivo desde sus orígenes,

simplemente hay que seleccionar un valor de
layout adecuado para los componentes
contenedores
Paso 2:
Hacer click sobre this para indicar que el

componente JSplitPane debe ser
colocado dentro de VentanaPrincipal
Paso 1:
Hacer click sobre el componente

contenedor JSplitPane
Paso 2:
Hacer click sobre this para indicar que el

componente JToolBar debe ser colocado
dentro de VentanaPrincipal
Paso 1:

contenedor JToolBar
Paso 2:
Hacer click sobre jSplitPane1 para indicar

que el componente JPanel debe ser
colocado dentro de jSplitPane1
Hacer otro click más para colocar otro

JPanal
Paso 1:

contenedor JPanel
Paso 2:
Hacer click sobre jToolBar1 para indicar

que el componente JTextField debe ser
colocado dentro de jToolBar1
Paso 1:

JTextField
Paso 1:

JTextField
Paso 2:
Hacer click sobre jPanel1 para indicar

que el componente JTextField debe ser
colocado dentro de jPanel1
Repetir los pasos 1 y 2 para el

componente jPanel2
Paso 1:

JButton
Paso 2:

que el componente JButton debe ser
Repetir los pasos 1 y 2 para el

componente jPanel2
Paso 1:

JLabel
Paso 2:

que el componente JLabel debe ser
Repetir los pasos 1 y 2 para el componente

jPanel2
Seleccionar la clase VentanaPrincipal y dejar el

puntero del ratón un par de segundos sobre la
clase, debe de aparecer un cartel con el camino
al archivo que contiene la clase
Copiar el camino a la clase
Agregar dos imágenes en el paquete et
Agregar el siguiente código
ImageIcon terrestre = new ImageIcon(this.getClass().getResource("terrestre.png"));
ImageIcon extraterrestre = new

ImageIcon(this.getClass().getResource("extraterrestre.png"));
Agregar dos propiedades miembro del tipo

ImageIcon a la clase VentanaPrincipal
Relacionar la imagen con la etiqueta
Relacionar la imagen con la etiqueta
Agregar el método main()
public static void main(String[] args) {
VentanaPrincipal vp = new VentanaPrincipal();
vp.setDefaultCloseOperation(vp.EXIT_ON_CLOSE);
vp.setLocationRelativeTo(null);
vp.setVisible(true);
Agregar el método main()
Hacer Run
Buscar la clase que tiene el método main()
El diagrama jerárquico de contenedores y componentes comparados con la estructura del proyecto Vista
JFrame
JSplitPane JToolBar
JPanel JPanel JTextField
JTextField JLabel JButton JTextField JLabel JButton
Imagen Imagen
El diagrama jerárquico de componentes es la documentación del proceso de análisis y diseño.
La estructura del proyecto Vista y la instancia de ejecución de la vista y el diagrama jerárquico de componentes son
equivalentes, y es el principal vehículo de comunicación con el cliente o usuarios del producto software a construir
JFrame
JSplitPane JToolBar
Crear una interfaz Crear una interfaz Crear una interfaz Crear una interfaz
pensando en el pensando en los basada en el usuario útil, que se pueda
usuario requerimientos y sus usar y sea funcional
de usuario requerimientos
 Prototipo  Producto
 Maqueta  Prototipos  Prototipos
¿Qué se desea ¿Cómo se debe Escribir código Poner en

construir? construir? funcionamiento
Hacer click con el botón derecho del ratón sobre

el paquete et y seleccionar New…
Seleccionar crear una nueva clase
Escribir el nombre de la clase
Escribir el siguiente código
public String[] convertirLista(String listaPalabras[], String alfabetoCivilizacion1,

String alfabetoCivilizacion2 ) {
String[] listaSolucion = null;
//Algoritmo solución del problema...
listaSolucion = new String[listaPalabras.length];
StringBuilder palabraAConvertir = null;
String palabraConvertida = ""; char caracter; int lugarCaracter;
for(int conPalabras=0; conPalabras<listaPalabras.length; conPalabras++){
palabraAConvertir = new StringBuilder(listaPalabras[conPalabras]);
for(int conCaracter=0; conCaracter<palabraAConvertir.length(); conCaracter++){
caracter=palabraAConvertir.charAt(conCaracter);
lugarCaracter = alfabetoCivilizacion1.indexOf("" + caracter);
palabraConvertida = palabraConvertida +
alfabetoCivilizacion2.charAt(lugarCaracter);
}
listaSolucion[conPalabras] = palabraConvertida;
palabraConvertida = "";
}
return listaSolucion;
}//fin solución
Seleccionar el evento click para el

componente jButton1
Escribir el nombre para el evento
Escribir el siguiente código en el evento
private void jButton1_actionPerformed(ActionEvent e) {
Civilizacion civilizacion = new Civilizacion();
this.jTextField1.setText("");
String lista[] = this.jTextField2.getText().split(" ");
String alfabetoTerrestre = "abcdefghijklmnopqrstuvwxyz";
String alfabetoExtraterrestre = "!#$%&/()=?¡'¿+{[}]_-^~*>|<";
String[] solucion = new String[lista.length];
solucion = civilizacion.convertirLista(lista, alfabetoTerrestre,

alfabetoExtraterrestre);
for(int con=0; con<solucion.length; con++){
this.jTextField1.setText(this.jTextField1.getText() + solucion[con] + "

");
}
Hacer un Run y verificar el correcto

funcionamiento
Escribir el siguiente código para el evento click

del componente jButton2
private void jButton2_actionPerformed(ActionEvent e) {
Civilizacion civilizacion = new Civilizacion();
this.jTextField1.setText("");
String lista[] = this.jTextField3.getText().split(" ");
String alfabetoTerrestre = "abcdefghijklmnopqrstuvwxyz";
String alfabetoExtraterrestre = "!#$%&/()=?¡'¿+{[}]_-^~*>|<";
String[] solucion = new String[lista.length];
solucion = civilizacion.convertirLista(lista, alfabetoExtraterrestre,

alfabetoTerrestre);
for(int con=0; con<solucion.length; con++){
this.jTextField1.setText(this.jTextField1.getText() + solucion[con] + "

");
Hacer un Run y verificar el correcto

funcionamiento
Resultado y conclusión final
JFrame
JSplitPane JToolBar
Código Código Java

Java para el para el
terrestre extraterrestre

Diseño de Interfaz Gráfica de Usuario en El Desarrollo de Software

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

Diseño de Interfaz Gráfica de Usuario en El Desarrollo de Software

Cargado por

Copyright:

Formatos disponibles

10 de febrero de 2017 DISEÑO DE INTERFAZ GRÁFICA DE USUARIO CON EL LENGUAJE JAVA

Diseño de interfaz gráfica de usuario en el desarrollo de software

Proceso constructivo tradicional de un producto software

Análisis Diseño Programar Probar

¿Qué se desea ¿Cómo se debe Escribir el Poner en

Diseño de Interfaz de usuario

Proceso constructivo moderno de desarrollo de un producto software basado en el diseño de la interfaz

Análisis Diseño Programar Probar

¿Qué se desea ¿Cómo se debe Escribir código Poner en

Muchas metodologías orientadas a la gestión de proyectos de construcción de productos software tienen un

Los métodos ágiles promueven los siguientes principios

El método RUP promueve los siguientes principios

Sinergia de procesos en busca de la calidad del producto software

1. Ingeniería del software (cascada, espiral, prototipo, etc.)

Creando una interfaz a la solución de la comunicación entre habitantes del universo

Seleccionar de la barra de comandos la

Seleccionar el ítem Aplicación de Escritorio

Escribir el nombre de la aplicación

Escribir el nombre del paquete que se creará

Escribir el nombre del proyecto

Escribir el nombre del paquete que contendrá

Hacer click con el botón derecho del ratón sobre el

Seleccionar el ítem Frame como nueva

Escribir el nombre de la nueva clase tipo

Resultado de la tarea realizada

Resultado de la tarea realizada

Poner a en la clase VentanaPrincipal el valor de

Esto hará que la vista de la clase VentanaPrincipal

Java es responsivo desde sus orígenes,

Resultado de la tarea realizada

Hacer click sobre this para indicar que el

Hacer click sobre el componente

Hacer click sobre this para indicar que el

Hacer click sobre el componente

Hacer click sobre jSplitPane1 para indicar

Hacer otro click más para colocar otro

Hacer click sobre el componente

Hacer click sobre jToolBar1 para indicar

Hacer click sobre el componente

Hacer click sobre el componente

Hacer click sobre jPanel1 para indicar

Repetir los pasos 1 y 2 para el

Hacer click sobre el componente

Hacer click sobre jPanel1 para indicar

Repetir los pasos 1 y 2 para el

Hacer click sobre el componente

Hacer click sobre jPanel1 para indicar

Repetir los pasos 1 y 2 para el componente

Seleccionar la clase VentanaPrincipal y dejar el

Resultado de la tarea realizada

Copiar el camino a la clase

Agregar dos imágenes en el paquete et

Resultado de la tarea realizada

Agregar el siguiente código

ImageIcon terrestre = new ImageIcon(this.getClass().getResource("terrestre.png"));

ImageIcon extraterrestre = new

Agregar dos propiedades miembro del tipo

Relacionar la imagen con la etiqueta

Relacionar la imagen con la etiqueta

Agregar el método main()

public static void main(String[] args) {

VentanaPrincipal vp = new VentanaPrincipal();

Agregar el método main()