>> Programación Visual (GUI)

Transcripción

1 >> Programación Visual (GUI) Nicolás Álvarez S. Juan Monsalve Z.

2 Tópicos a tratar Por qué programación visual?. GUIs & IDEs. Delphi. Ejemplos.

3 Por qué programación visual? El usuario normal no desea trabajar/ver resultados por una consola de comandos. La mayoría de las aplicaciones comerciales utilizan ventanas, botones, íconos, etc. Es posible separar un código que realiza operaciones muy complejas con su interfaz hacia el usuario. Permite integrar elementos propios del sistema operativo.

4 GUI: Graphical User Interface (Interfaz Gráfica de Usuario) Permite la interacción del usuario con la máquina/aplicación en cuestión. Utiliza una serie de herramientas y tecnologías para mejorar los procesos de entrega y generación de información. Responsable en gran medida de la masificación de los computadores personales Star Information System, desarrollado para la plataforma Star Workstation de Xerox en 1981

5 GUI: Graphical User Interface (ejemplos)

6 Programando con GUI s Existen IDEs (Integrated Development Enviroment ó Ambientes de Desarrollo Integrados) que permiten programar aplicaciones con ventanas, botones, y una serie de elementos visuales de manera sencilla y en paralelo con la programación de la lógica de la aplicación propiamente tal. Dependiendo del lenguaje de programación que uno desee utilizar, existen distintos IDEs que utilizan uno u otro lenguaje. Java => Eclipse, NetBeans (Sun) C++, C#, Visual Basic => Microsoft Visual Studio (MS) Pascal => Delphi, Kylix (Borland)

7 Borland Delphi 7 En nuestro caso, utilizaremos la IDE Delphi 7, de Borland. Por su sencillez de uso y tamaño reducido. Identificaremos una serie de elementos esenciales para el trabajo con las GUI s

8 Borland Delphi 7 Barra de Herramientas Aquí están los elementos para armar la GUI (botones, textbox, etc) Editor de Código Fuente Aquí se arma la lógica del programa Forms (si, igual que en J2ME). La ventana de la aplicación donde irán los elementos de la GUI Editor de Propiedades Aquí se cambian parámetros de los elementos visuales (color, texto, posición, alineación, etc.)

9 Borland Delphi 7 Cómo agregamos elementos visuales al Form? R.- Click en la barra de herramientas, en el elemento que se desea agregar. Click en el lugar de la Form donde se desea posicionar. Ok, mi Form tiene ahora un botón y un cuadro de texto (Edit). Qué debo hacer para que cuando corra mi programa y haga click sobre el botón ocurra algo? R.- En la Form, doble click sobre el botón agregado. Aparecerá la ventana de edición de código fuente y el focus se dirigirá al procedimiento (función) que controla la acción de hacer click sobre el botón.

10 Primer programa Situarse en un Form Seleccionar la pestaña Standard Seleccionar un button (OK)

11 Primer programa Para que suceda algo: Selecciona Events en el Object Inspector Nos interesa el evento OnClick Realicemos doble Click en el espacio en Blanco de OnClick

12 Primer programa ShowMessage muestra el mensaje entre comillas Presionemos F9 (compilación) Listo

13 Borland Delphi 7 Hello World! (al hacer click en el botón, que muestre Hello World! en el cuadro de texto). procedure TForm1.Button1Click(Sender: TObject); begin Edit1.Text := 'Hello World!' end;

14 Borland Delphi 7 Como se mencionó anteriormente, el lenguaje de programación usado por Delphi es Pascal. Hay unas leves variaciones respecto a C. Definición de variables procedure TForm1.Button1Click(Sender: TObject); var i: Integer; begin Asignación de Valores i:=34;

15 Borland Delphi 7 Sentencia IF Ciclo FOR if (algo) then begin end else begin end; For var:=inicio To tope Do Begin End; Ciclo While While condicion Do Begin End;

16 Ejemplos NO HAY! (Ud. Los hará). Problema Desarrolle una calculadora simple (4 operaciones básicas), donde el usuario ingrese dos valores (dos casillas) y reciba el resultado en una tercera.