Confección de interfaces de usuario



teoria-dint-tema01.md

**Confección de interfaces de usuario**

Parte de una aplicación se ejecuta en navegador web que podrán ver los clientes.

[Lesson: Using Swing Components (The Java™ Tutorials > Creating a GUI With JFC/Swing)](https://docs.oracle.com/javase/tutorial/uiswing/components/index.html)

**Índice**

[TOC]

# Elaboración de interfaces de usuario

**Interfaz de usuario:** elemento de una aplicación informática que permite al usuario comunicarse con ella.

**Tipos de interfaz:**

- **Textuales:** mediante inserción de órdenes escritas en un intérprete de órdenes.

- **Gráficas:** comunicación mediante un conj. de elementos visuales como iconos o menús con los que se interacciona mediante un elemento apuntador.

Están formadas por **formularios** (ventanas con **controles** o **componentes**) con los que se interactúa para dar órdenes o recibir información

- **Táctiles:** comunicación a través de un dispositivo táctil.

# Componentes

**Componente de un interfaz:** elemento gráfico que permiten a usuario enviar peticiones a una aplicación y recibir respuestas.

**Tipos de componentes:**

1. **Etiquetas:** Para escribir texto no interactivo.

2. **Campos de texto:**

3. **Áreas de texto:**

4. **Botones:** se pulsan para realizar acción

5. **Botones radio:**

6. **Cuadros de verificación:**

7. **Imágenes:**

8. **Password:** cuadro de texto con caracteres ocultos.

9. **Listas:**

10. **Listas desplegables:**

## Bibliotecas de componentes.

Los componentes se pueden agrupar en bibliotecas.

Un usuario puede crear sus propios componentes y crear sus propias bibliotecas.

El usu de unas bibliotecas u otras depende del *lenguaje de programación* y del *entorno de desarrollo*.

1. **Java Fundation Classes (JFC):** incluyen bibliotecas para interfaces gráficas de aplicaciones Java y applets de Java.

- **AWT:** Primera biblioteca Java para interfaces común a todas las plataformas. (en desuso)

- **Swing:** Componentes multiplataforma sin código nativo.

- **Bibliotecas para 2D y 3D:** para arrastrar y soltar (drag and drop)

2. **Bibliotecas MSDN de Microsoft (C#, ASP):**

[.NET Framework 4.7, 4.6 y 4.5 | Microsoft Docs](https://docs.microsoft.com/es-es/dotnet/framework/index)

- **.NET framework:**

1. componente integral que permite compilación y ejecución de aplicaciones y webs

2. biblioteca de componentes que permite la creación de la interface.

Incluye:

1. **ADO.NET:**

2. **ASP.NET:**

3. **Formularios Windows Forms:**

4. **WPF:** Windows Presentation Fundation

3. **Bibliotecas basadas en XML:** implementadas en lenguajes intermedios y basados en tecnología XML.

Permiten elaborar interfaces y traducirlas a diferentes lenguajes de programación.

**Ejemplo:** librerías **QT**.

# Herramientas para la elaboración de interfaces.

**IDE:** Integrated Development Environment con **toolkit** (conj. de herramientas) que proveen procedimientos para incluir componentes de bibliotecas de componentes gráficos añadirlos a la aplicación a desarrollar.

**Ejemplos IDEs:**

- **Microsoft Visual Studio:** Uso de la biblioteca .NET (framework de microsoft) que permite lenguajes C++, C# o ASP

- **Eclipse:** Sistema base más módulos.

- **JDeveloper:** para Java, HTML, XML, SQL, PL/SQL, Javascript, PHP, Oracle ADF, UML, .... actualmente basado en Java (en desuso)

- **Netbeans:** Pemite crear aplicaciones en diferentes lenguajes (Java, C++, PHP, Ajax, Python,...)

## Netbeans

Utiliza la biblioteca **Swing** para la generación de interfaces.

Permite crear aplicaciones de escritorio, web, móvil y es multiplataforma.

Coloca los componentes en una interfaz gráfica y permite la inclusión de componentes creados por otros desarrolladores.

**Instalación:** Necesario instalar el **JDK** previamente.

...

**Crear proyecto que pueda usar las clases incluidas en la librería swing:**

1. **Tipo de proyecto:** Java Desktop Application

2. **Nombre, localización de archivos en disco...**

3. **Aplicación Básica/BBDD**

**Inspección del proyecto:**

- Se permite el acceso a los archivos que componen los proyectos.

1. **src:** código fuente

2. **lib:** bibliotecas

3. **test:** de pruebas

4. **manifest:** hace que el directorio sea un proyecto

5. **build.xml:** para construir la aplicación.

6.


- **Inspector:** Muestra la jerarquía de componentes gráficos que se incluyen en la ventana con la que trabajamos (barra menú, barra de estado,...)


- **Área de diseño:** zona en la que añadimos los componentes arrastrando.


- **Editor de propiedades:** Para modificar las propiedades del componente y accediendo al código y a los eventos asociados.


- **Paleta de componentes:** Desde ella, arrastramos los componentes al área de diseño.


# Contenedores

El contenedor será en el que situemos nuestros componentes.

**Formulario:** ventana con botones de min/max/cerrar, barra de título y delimitado por unos bordes sobre el que añadir componentes.

Una aplicación se compone de una serie de formularios.

**Crear formulario:** mediante un **contenedor Java** que es un componente que permite incluir otros componentes (incluso otros contenedores) formando una estructura jerárquica.

**Tipos de contenedor:**

1. **Ventana (JFrame): **Se suele usar un una aplicación de escritorio como ventana principal

2. **Diálogo (JDialog):** formulario para solicitar información (modal o no).

3. **Applet (JApplet):** Ventana que ejecuta una aplicación Java en el contexto de una página web.

<a href="res/06-contenedores.pdf">Crear contenedores a aplicación Java en Netbeans</a>

## Contenedores secundarios

Querríamos añadir un panel con pestañas a nuestro contenedor principal.

**Tipos:**

1. **Otros diálogos:**

1. **Panel de Opciones (JOptionPane):** ventana para respuestas Sí/No

2. **Selector de Archivos (JFileChooser):**

3. **Selector de Colores (JColorChooser):**

2. **Paneles (JPanel):** contenedor intermedio para colocar controles.

3. **Barra de Menús (JMenu):** creación de menús complejos.

4. **Barra de Herramientas (JToolBar):** para colocar iconos de acceso a las opciones de la app

5. **Pestañas (JTabbedPane):** panel con distribución en pestañas

6. **Paneles deslizables (JScrollPane):** panel que permite desplazar contenidos de forma automática.

7. **Ventanas internas (JInternalFrame):** ventanas hijas que no pueden rebasar los límites del padre.

8. **Paneles divididos (JSplitPane):** para visualizar componentes simultánemente asignando espacio dinámicamente.

# Componentes de la interfaz

Añadir controles a la ventana con pestañas.

**Nombre de un componente:** Identifica al componente dentro de la aplicación.

**Clase de un componente:** Definen su aspecto y funcionalidad

**Layout:** Reglas que rigen la colocación de los componentes en el orden o posición (según límites, rejilla, fluídos)

**Tipos:**

- **Componentes activos:** para recabar información del usuario (cuadros de texto, botones, listas de selección,...)

- **Componentes pasivos:** para mostrar información (etiquetas, imágenes, listas, árboles,...)

**Evento:** acción realizada sobre un componente que provoca una respuesta.

**Manejador de eventos:** función específica que gestiona la respuesta al evento al asociarse con el **escuchador (listener)** que es un elemento del componente.

## Añadir y eliminar componentes de la interfaz

Los componentes se añaden desde la paleta.

Se selecciona el componente y despúes se pincha en la interfaz (aparece con los valores por defecto).

Podremos arrastrarlo y modificar su tamaño.


**Categorías componentes:**

- **Contenedores Swing:** contenedores secundarios para distribuir y el resto de controles.

- **Controles Swing:** básicos

...