Interfaces de Usuario. Ingeniería en Informática. 3º Curso.

Departamento de Informática
Universidad Carlos III de Madrid - Curso 2005/2006

Práctica 6. Introducción a los Entornos y

Bibliotecas de programación WIMP (Window-
Icon-Menu-Pointer)

Objetivos
Los objetivos de esta clase de práctica son los siguientes:
• Conocer los aspectos generales de las bibliotecas de programación de
interfaces WIMP que se utilizarán en este bloque de prácticas.
• Saber localizar documentación y recursos para la programación en esas
bibliotecas.
• Familiarizarse con la sintaxis de los lenguajes de programación que se
utilizarán durante el curso y que aún no se conocen.
• Familiarizarse con los entornos de programación que se utilizarán.
Tras realizar esta práctica, el alumno conocerá lo básico acerca de los entornos de
trabajo que se utilizarán para las siguientes prácticas, y será capaz de realizar
pequeñas aplicaciones WIMP con ellos utilizando las librerías propuestas.

Enunciado
Los interfaces de tipo WIMP son el paradigma de interacción más utilizado en
sistemas informáticos de usuario 1 . La programación de estos interfaces puede
hacerse con diferentes lenguajes y bibliotecas, de los cuales hemos seleccionado
dos, que poseen características que los diferencian, si bien tienen en común, a
diferencia de las interfaces web, el uso de la programación orientada a objetos.
Como característica común, cabe citar el uso de eventos para responder a acciones
de usuario. Para trabajar con interfaces tipo WIMP vamos a utilizar dos entornos
diferentes:
• JFC/Swing, en lenguaje Java (con Netbeans 3.6)
• .NET, en lenguaje C# (con VisualStudio.NET 2003)

En esta primera práctica tomamos contacto con estos entornos, e introducimos la

motivación que nos ha llevado a seleccionarlos. Es importante resaltar que los
lenguajes y bibliotecas son un medio y no un fin en la asignatura. El fin de la
asignatura es el diseño de interfaces, y por ello, lo importante no es el
conocimiento enciclopédico de unas bibliotecas, sino el saber servirse de ellas para
hacer diseño de interfaz usables, según los criterios que se explican en las clases de
teoría, y que serán los criterios principales de la evaluación.

Los contenidos teóricos fundamentales previos a la realización de esta práctica son

los siguientes:
1. Qué es un Sistema de Ventanas dentro de un Sistema Operativo
2. Qué tipos de arquitectura de Sistema de Ventanas pueden encontrarse en
los sistemas actuales
3. Qué tipos de interfaces de programación (o bibliotecas) de interfaz gráfica
existen
4. Qué tipo de arquitectura poseen las bibliotecas de programación que vamos
a utilizar en la asignatura

1
Si bien las actuales interfaces web también se basan en elementos como menús o
iconos, se diferencian de las interfaces WIMP más convencionales en el uso del
hipertext o.

Prácticas semanales de Interfaces de Usuario 1 de 4

 Interfaces de Usuario. Ingeniería en Informática. 3º Curso.
Departamento de Informática
Universidad Carlos III de Madrid - Curso 2005/2006

Utilizaremos múltiples documentos para realizar esta y las siguientes prácticas,

cuya consulta se recomienda encarecidamente:
• Algunos apuntes sobre los contenidos previos, que ayudarán a situar el
contexto de esta práctica, pueden obtenerse en [1].
• En lo referente a Java, nos basaremos en el tutorial de Java [2], que
contiene un apartado para Swing, y en la propia documentación del API de
Java, en concreto para la versión J2SDK Standard Edition 5.0 [3]. Para
trabajar con Netbeans puede leerse un tutorial sobre este entorno que
puede obtenerse en [4]. Por último, la web de Netbeans ofrece mucha más
información adicional [5].
• Respecto a .NET, en primer lugar hay que adquirir las nociones básicas,
para lo cual se proponen transparencias sobre la arquitectura .NET [6], así
como el lenguaje diseñado específicamente para ella: C# [7]. Puede
profundizarse más sobre el tema en Tutorial de C# de José Antonio
González Seco [8], y leer una comparativa entre C# y Java en [9]. Respecto
al entorno VisualStudio.NET, puede leerse también la documentación de
MSDN [10]. Debido a que VisualStudio.NET es un entorno comercial, una
alternativa para usar desde casa puede ser Sharpdevelop [11].

Actividad 0: toma de contacto con el entorno

El objetivo de esta actividad es tener un primer contacto con la documentación y
las herramientas de trabajo que usaremos. Para ello, lo primero será consultar las
referencias propuestas en el enunciado. Por el momento es suficiente con saber que
C# guarda un gran parecido sintáctico y semántico con Java, por lo cual, basta con
hacer una lectura rápida, tratando de observar las diferencias esenciales con Java.
Una vez leídos los documentos, el siguiente paso es realizar el programa “Hola
Mundo” en las herramientas de trabajo, observando la forma que éstas tienen de
presentar la información al programador. Esta primera aplicación mostrará una
ventana con el texto “Hola Mundo”. Para ello se recomienda leer el tema 2 (hasta
llegar a compilar y ejecutar la aplicación HolaMundo) del Tutorial de C# de José
Antonio González Seco [8]. Para .NET, tenemos la primera aplicación “Hello World”
en el tutorial de swing [2].

Esta actividad se realizará en clase con la ayuda del profesor por lo que no se ha de
entregar.

Actividad 1: primera aplicación en Swing

Utilizando el entorno de programación NetBeans, crear una aplicación de interfaz
gráfica que contenga un botón como:

De manera que, cuando el usuario pulse en ese botón, se añadirá un nuevo botón a
la ventana. Este nuevo botón contendrá un icono y su nombre será el color del
icono que contiene. Los colores los decide la aplicación de manera aleatoria. Por
ejemplo, si pulsamos 7 veces tendremos algo parecido a:

Prácticas semanales de Interfaces de Usuario 2 de 4

 Interfaces de Usuario. Ingeniería en Informática. 3º Curso.
Departamento de Informática
Universidad Carlos III de Madrid - Curso 2005/2006

Cualquiera de los botones generados debe ser capaz a su vez de generar un nuevo
botón, con su mismo color. Ayuda: utilizar un FlowLayout y mirar cómo genera
NetBeans el código para crear el primer JButton.

Por tanto, se pide:

• Una carpeta actividad1 que contenga el proyecto NetBeans creado

Nota: se pueden bajar iconos de ejemplo de la página web de la asignatura,

sección “Prácticas” (botones.zip).

Actividad 2: primera aplicación en .NET

Realizar con VisualStudio .NET una aplicación que muestre un botón y un campo de
texto. Al pulsar el botón, se mostrará en el campo de texto el número de veces que
se ha pulsado el botón hasta ese momento. Realizar la aplicación en C#.

Por tanto, se pide:

• Una carpeta actividad2 que contenga el proyecto VisualStudio.NET

Ejercicios de trabajo personal

Actividad 3: Euroconversor (entrega opcional)

Se pide crear un conversor de pesetas a euros (y viceversa) con interfaz gráfica en
C#. El conversor debe ser lo más cómodo de usar posible.

Se pide:
• Una carpeta actividad3 que contenga el proyecto VisualStudio.NET

Actividad 4: Visual Basic.NET (entrega opcional)

Se pide realizar la aplicación de la actividad 1 en Visual Basic.NET. Como .NET no
trabaja con Layout Managers, puede ser necesario, cada vez que se añada un
botón, calcular el lugar donde debe colocarse de acuerdo al tamaño de la ventana,
e incluso redimensionar la misma para que quepan los botones.
Para introducir Visual Basic .NET, podemos leer el tutorial que puede encontrarse
en la web MSDN de Microsoft [12]. La referencia del lenguaje, así como ejemplos
de código para tareas concretas pueden encontrarse también en dicha web [13] (se
recomienda tener a mano las secciones "Language Reference", "Language
Specification" y "Visual Basic Language Walkthroughs").

Se pide:
• Una carpeta actividad4 que contenga el proyecto VisualStudio.NET

Normas de Entrega
Deberán observarse cuidadosamente las siguientes normas para entregar la
práctica:
1. La fecha límite de entrega es diez días después del día de clase
práctica, teniendo en cuenta el día en que se imparte la clase para el grupo
en que el alumno este matriculado
2. En ningún caso se aceptará n prácticas entregadas por correo
electrónico
3. Deberá entregarse un único fichero ZIP con nombre NIA- IUP6.zip, que
contendrá un directorio con el mismo nombre, en el que se incluirán los
ficheros solicitados en el enunciado

Prácticas semanales de Interfaces de Usuario 3 de 4

 Interfaces de Usuario. Ingeniería en Informática. 3º Curso.
Departamento de Informática
Universidad Carlos III de Madrid - Curso 2005/2006

4. La práctica se entregará desde Aula Global, sección Actividades|Practicas de

la asignatura Interfaces de Usuario.

Lecturas recomendadas
[1] Introducción plataformas WIMP, disponible en la web de la asignatura, sección
“Prácticas”.

Java
[2] Tutorial de Java, http://java.sun.com/docs/books/tutorial/uiswing/index.html.
[3] Java2 Platform Standard Edition 5.0 API Specification, en
http://java.sun.com/j2se/1.5.0/docs/api/.
[4] Tutorial de NetBeans, disponible en la web de la asignatura, sección “Prácticas”.
[5] Web de Netbeans, disponible en http://www.netbeans.org

.NET
[6] Introducción a la arquitectura .NET. Transparencias disponibles en la web de la
asignatura, sección prácticas
[7]Introducción al lenguaje C#. Transparencias disponibles en la web de la
asignatura, sección prácticas
[8] Tutorial de C# de José Antonio González Seco, en http://www.josanguapo.com.
[9] A Comparative Overview of C#, en
http://genamics.com/developer/csharp_comparative.htm.
[10] Visual Studio Walkthroughs, en
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/vsintro7/html/vbconVisualStudioSharedWalkthroughs.asp.
[11] SharpDevelop, the Open Source Development Environment for .NET, en
http://www.icsharpcode.net/OpenSource/SD/Default.aspx.
[12] Getting Started with Visual Basic .NET, en
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/dnaa/html/getstart_VBasic.asp.
[13] Visual Basic Language Tour, en
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/vbcn7/html/vaorivisualbasiclanguagetour.asp.

Prácticas semanales de Interfaces de Usuario 4 de 4