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

...