Librerías necesarias para el desarrollo de interfaces graficas de usuario (GUI)

librerías necesarias para el desarrollo de interfaces graficas de usuario (GUI)

Librería Swing

La Librería libGlade

GTK

Elementos básicos de una GUI

1. Menú: Lugar que alberga las opciones funcionales ofrecidas al espectador-usuario. Pueden existir varios menús atendiendo a jerarquías, ubicaciones, etc. Se suele mantener un menú principal que se repite a lo largo de todo el programa.
2. Background: O fondo de la pantalla, es generalmente un elemento gráfico que sirve como base o soporte a cada una de las escenas o pantallas el relato y sobre el cual se sitúan los restantes.
3. Botones: Representación gráfica de las diferentes opciones/funciones que el relato ofrece al espectador-usuario. Puede considerarse botón cualquier zona interactiva, es decir allí donde el espectador-usuario pueda intervenir sobre el relato. Estos pueden ser explícitos o implícitos -no identificables como tales- dentro de cada una de las pantallas, muchas veces se refuerza su identificación con distintos tipos de “iluminación” visual o sonora, además es frecuente incorporar pequeños textos asociados que informan de su cometido. Cualquier gráfico o parte del mismo puede ser convertido en un botón que remita a otro gráfico (hipergráfico) o fragmento del programa. También se ocultan estos botones en algunas ocasiones para crear procesos de descubrimiento en el relato.
4. Ventanas: Zonas de imagen enmarcadas para la representación de “medias” gráficos, especialmente utilizadas para vídeo debido a su formato característico, también es muy utilizado para presentar texto o hipertexto, o cualquier tipo de ayuda. Los distintos elementos que se incorporan a un programa multimedia no tienen que ocupar forzosamente una ventana pueden, y en la mayoría de los casos es lo más aconsejable, integrarse en la pantalla o background. Pueden ser flotantes o fijas.
5. Ayudas: Elementos textuales o icónicos utilizados para facilitar la navegación del usuario, habitualmente se presenta en lo que llamamos ventanas flotantes que aparecen y desaparecen cumplida su misión.
6. Guías: Señales indicativas de la situación y la trayectoria realizada, pueden formar parte de lo que llamaríamos menú principal, pueden estar acompañadas de botones que permiten retroceder o recordar el trayecto realizado.
7. Resaltes: Indicaciones de puntos de decisión o interacción, ya comentados en el punto referido a los botones.
8. Objetos ornamentales: Cualquier elemento que no esté incluido en el background, sea animado o no. Se utiliza como recurso estético y participa de la composición visual de la pantalla.
9. Cursores: Representación gráfica del lugar que señala el ratón. Pueden cambiar de color, tamaño o forma, con la intención de indicar y reforzar un objeto o situación del relato.
10. Barras: Representación gráfica de “desplazadores” o “regletas” que permiten seleccionar un determinado valor del rango ofrecido; por ejemplo una barra de tiempo nos permitirá elegir un año determinado.
11. Cajas de texto: Espacios reservados para la presentación de texto o la introducción de texto por el usuario.
12. Marcadores: Espacios reservados para la presentación de valores referentes a puntuaciones obtenidas por el usuario o su contrincante (sea o no el ordenador).
13. Personajes: Representaciones animadas de seres vivos u objetos que protagonizan una determinada acción. Pueden representar al espectador-usuario.
14. Puntero: en un símbolo de pantalla que te permite mover o seleccionar objetos y comandos.
15. Periféricos de puntero: como el ratón del ordenador.
16. Iconos: Pequeñas imágenes que representan comandos, documentos o ventanas.
17. Escritorio: área de la pantalla que representa una mesa de trabajo.

Componentes GUI (widgets)

1. Botón: android.widget.Button
2. Calendario: android.widget.CalendarView
3. CheckBox: android.widget.CheckBox
4. Selección de fechas: android.widget.DatePicker.
5. Caja de texto: android.widget.EditText
6. Botón con imagen: android.widget.ImageButton
7. Image: android.widget.ImageView
8. Información de progreso: android.widget.ProgressBar
9. RadioButton: android.widget.RadioButton
10. Menú desplegable: android.widget.Spinner
11. Etiqueta de texto: android.widget.TextView

Objetos visuales del interfaz

1. Applet:  Ventana para una applet que se incluye en una página web.  
2. Button:   Crea un botón de acción.  
3. Canvas:   Crea un área de trabajo en la que se puede dibujar.
4. Checkbox:   Crea una casilla de verificación.  
5. Label:   Crea una etiqueta.  
6. Menu:   Crea un menú.  
7. ComboBox:   Crea una lista desplegable.  
8. List:   Crea un cuadro de lista.
9. Frame:   Crea un marco para las ventanas de aplicación.
10. Dialog:   Crea un cuadro de diálogo.
11. Panel:   Crea un área de trabajo que puede contener otros controles o componentes.
12. PopupMenu:   Crea un menú emergente.
13. RadioButton:   Crea un botón de radio.
14. ScrollBar:   Crea una barra de desplazamiento.  
15. ScrollPane:   Crea un cuadro de desplazamiento.  
16. TextArea:   Crea un área de texto de dos dimensiones.  
17. TextField:   Crea un cuadro de texto de una dimensión.
18. Window:   Crea una ventana.  

Disposición(layout):

1. Crea un nuevo proyecto en java.

1. Dentro de Source Packages crea un Java Package y llamalo paqueteInicial.

1. Dentro de paqueteInicial crea un JFrame Form y llamalo VentanaInicial.

1. Añade una etiqueta y un botón. Muévelos a la posición que se indica en la imagen. Deben aparecer las líneas “guía” de color azul que se muestran:

[pic 1]

1. Las líneas azules que aparecen indican con qué otro elemento está relacionado un componente de la ventana. La situación de un elemento dependerá siempre de la situación del otro.

Dicho de otra forma, las líneas azules indican las distancias que siempre se respetarán. Observa la siguiente imagen:

[pic 2]

1. Ejecuta el programa y prueba a ensanchar (o achicar) la ventana por el lado derecho y por el lado inferior. Debes observar como la etiqueta y el botón mantienen sus distancias relativas entre sí y con los bordes derecho e inferior de la ventana.

[pic 3]

1. Este comportamiento de los elementos en la ventana viene dado por una opción del NetBeans llamada Diseño Libre (Free Design).

El Diseño Libre permite que los elementos de una ventana mantengan una distribución relativa da igual el tamaño que tenga la ventana. Dicho de otra forma, los elementos se redistribuyen al cambiar el tamaño de la ventana.

El problema del Diseño Libre es el poco control que se tiene sobre los elementos que se añaden a la ventana.

...