REVISANDO EL ENTORNO DE INTERFAZ GRÁFICA DE USUARIO

OBJETIVO.

Crear una primera aplicación en el entorno de trabajo grafico (aplicaciones Windows), de tal forma que se familiarice con los controles y propiedades más comunes de este entorno.

[pic 5]

ANTECEDENTES PARA INICIAR LA PRÁCTICA

Para iniciarse en el mundo de la programación, no existe un “lenguaje de programación” inicial o básico; La base de la programación empieza sobre un papel, haciendo algoritmos. Para ver si los algoritmos funcionan, puede ser más cómodo utilizar un “lenguaje de programación”, lo único que generalmente se recomienda es utilizar un lenguaje de alto nivel que no sea orientado a objetos, ni gráfico. Es por ello que en el tercer y cuarto nivel se utilizó el lenguaje “C”.

En este quinto nivel, trabajaremos en un lenguaje orientado a objetos (Visual Basic .NET), pero es recomendable que tengamos una tenue idea de los tipos de lenguaje, de lo que es un compilador y otras cosas generales.

A continuación, se muestra una breve lista de los lenguajes de programación:

La programación orientada a objetos (POO) es una evolución de la programación por procedimientos llamada también estructurada. La programación estructurada se basaba en funciones y procedimientos, así como un código principal que controlaba el flujo de las llamadas a estas funciones y procedimientos. En Visual Basic, sobre todo en versiones anteriores se sigue programando mucho bajo este paradigma estructurado; a veces por desconocimiento y otras por "miedo" no se da el salto a la POO, aunque un programador con experiencia en VB puede hacer magníficas aplicaciones sin utilizar la POO (y sin aprovecharse de sus ventajas.

El modo como interactúan las diversas aplicaciones con el usuario final, es decir las interfaces gráficas, han evolucionado a un ritmo acelerado en esta última década; de monitores con texto color ámbar o verde en los años ochenta, hemos pasado a pantallas súper VGA de alta definición controladas por GUI (Graphic User Interface) que hacen más fácil y amigable el manejo de las diversas aplicaciones de la computadora. La interfaz gráfica del usuario, es el conjunto de elementos gráficos (ventanas, menús, botones, etc.) que permiten la interacción entre el usuario y la aplicación informática.

Es importante observar que una GUI es diferente a una API. Una API (Interfaz de Programación de Aplicaciones) es un conjunto de funciones que permite al programador acceder a servicios de una aplicación a través del uso de un lenguaje de programación. Una API ofrece al programador un cierto nivel de abstracción que enmascara la complejidad de acceso a un sistema o aplicación, proponiéndole un conjunto de funciones de las cuales sólo se conocen los parámetros y los valores devueltos. Asimismo, por analogía con un automóvil, el conductor no necesita conocer la mecánica del motor para conducir el automóvil. El conductor sólo tiene acceso a la interfaz compuesta por el volante, los pedales (acelerador, embrague, freno), los controles (indicadores, luces delanteras, caja de cambios), interruptores (luces de emergencia, luces antiniebla, bocina, etc.). En cierta forma, es similar a la interfaz presentada al usuario.

Gracias a las API, un desarrollador no necesita preocuparse de cómo funciona una aplicación remota ni de la forma en que las funciones fueron implementadas, para poder utilizarla en un programa. Una API puede estar disponible para un lenguaje específico o para diversos lenguajes de programación.

NOTA:        Se le recuerda al alumno que trabajar directamente en la USB puede llegar a crear un conflicto durante el desarrollo de la misma, por lo tanto se recomienda que para cada práctica debe realizar lo siguiente: 

• En el escritorio crear una nueva carpeta llamada   Practicas Desarrollo Software
• Verificar que la configuración referente al proyecto está establecida de manera que me permita salvar el nuevo proyecto en el momento es que es creado y la ubicación de los proyectos este dirigida a la ubicación de la carpeta generada en el punto anterior.
• Hacer respaldo de la práctica a la USB, al menos cada media hora.
• Al término de la práctica no olvide respaldar la información a la USB

PROCEDIMIENTO

Por muy alta que sea una colina siempre hay un sendero hacia su cima.

• Ejecute Microsoft Visual Studio 2010

• Crear un nuevo proyecto "Aplicación de Windows Forms"

[pic 6]

• Escriba en la sección de nombre “EntornoGrafico” y presione el botón [pic 7]
• En el proyecto, se habrá cargado un formulario que se mostrará de forma automática. Si no se mostrase nada y siguiera estando la pantalla de inicio, dejar pasar un momento, ya que seguramente lo estará cargando; dado que es un entorno que consume muchos recursos, el proceso puede ser lento en la carga de determinadas partes.
• Fíjate en el lado derecho de la pantalla, verás que hay un "panel" o ventana en la que se indica el proyecto actual y se muestran los ficheros que lo componen. Ese panel es el Explorador de Soluciones.

[pic 8]

Figura: Explorador de soluciones

• Donde distinguimos en la parte izquierda el cuadro de herramientas, en el centro el formulario principal y en la parte derecha las ventanas de propiedades y el explorador de soluciones.

[pic 9]

Figura: Entorno de Visual Basic

• Los controles son los elementos que insertamos dentro de un formulario y que nos va a permitir interactuar entre el usuario y el código: botones, cuadros de texto, etiquetas, cuadros desplegables, cuadrículas de datos. En definitiva todos y cada uno de los elementos que vemos en los formularios de todas las aplicaciones. La lista de controles básicos disponibles la tenemos a la izquierda, en el panel de herramientas.
• Para añadir controles al formulario utilizaremos la barra de herramientas. Por ejemplo, para añadir una etiqueta (Label) y una caja de texto (TextBox), simplemente haremos doble-clic sobre esos elementos de la barra de herramientas y se añadirán al formulario o podemos también agarrarlos y arrastrarlos hasta nuestro formulario.

[pic 10]        Figura: formulario

• Para nuestro ejemplo, añadiremos los controles siguientes para que quede de semejante al de la Figura: Diseño del formulario

[pic 16]        Figura: Diseño inicial del Formulario

• Como vemos, por defecto, el IDE pone unos nombres genéricos a los controles, como label1, textbox1, button1, es decir utiliza el tipo de control y lo va numerando tantas veces como controles iguales tengamos en el formulario(label1, label2, label3,...). Siempre los controles deben tener un nombre único, es por ello que por defecto el IDE pone un nombre inicial.
• Ahora vamos a cambiar el texto que contiene el botón "Button1". Para cambiarle este texto hay que utilizar la ventana de propiedades (A la derecha-abajo), en esta ocasión el elemento que nos interesa de esa ventana de propiedades es Text, escribimos en esta propiedad la palabra "Mostrar" y cuando pulses Intro o el tabulador veremos que el texto del botón se ha actualizado.

[pic 17]

Figura: ventana de propiedades del control button1

• Hacemos lo mismo con la etiqueta "Label1", recordemos que hay que seleccionar primero el control haciendo clic para que se muestren las propiedades de la etiqueta. Escribimos "Nombre:" en Text y pulsamos intro o el tabulador.

[pic 18]

Figura: ventana de propiedades del control label1

• Hacemos lo mismo con las siguientes etiquetas y el botón2, de tal forma que su diseño del formulario sea algo semejante a la Figura

[pic 19]

Figura: : Diseño final del Formulario

• Pulsamos F5 para que se ejecute la aplicación, o bien seleccionamos el botón [pic 20] de la barra de herramientas estándar.
• Observe el diseño de su aplicación.

INICIA LA PROGRAMACIÓN

...