>> Programación Visual (GUI)

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

Nicolás Álvarez S.nalvarezs@vtr.net

Juan Monsalve Z.jmonsalve@elo.utfsm.cl

• ¿Por qué programación visual?.

• GUIs & IDEs.

>> Programación Visual (GUI)

Tópicos a tratar

• Delphi.

• Ejemplos.

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• 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.

>> Programación Visual (GUI)

¿Por qué programación visual?

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.

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• Permite la interacción del usuario con la máquina/aplicación en cuestión.

• Utiliza una serie de

>> Programación Visual (GUI)

GUI: Graphical User Interface (Interfaz Gráfica de Usuario)

• 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.

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

8010 Star Information System, desarrollado para la plataforma Star Workstation de Xerox en 1981

>> Programación Visual (GUI)

GUI: Graphical User Interface (ejemplos)

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• 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.

>> Programación Visual (GUI)

Programando con GUI’s

• Dependiendo del lenguaje de programación que uno desee utilizar, existen distintos IDEs que utilizan uno u otro lenguaje.

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

Java => Eclipse, NetBeans (Sun)C++, C#, Visual Basic => Microsoft Visual Studio (MS)Pascal => Delphi, Kylix (Borland)

• En nuestro caso,utilizaremos la IDE“Delphi 7”, de Borland.Por su sencillez de uso ytamaño reducido.

>> Programación Visual (GUI)

Borland Delphi 7

tamaño reducido.

• Identificaremos unaserie de elementosesenciales para eltrabajo con las GUI’s

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

>> Programación Visual (GUI)

Borland Delphi 7

Barra de HerramientasAquí están los elementos

para armar la GUI (botones, textbox, etc)

Editor de Código Fuente

Aquí se arma la lógica del programa

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

Forms(si, igual que en J2ME).

La ventana de la aplicación donde irán los elementos de

la GUI

programa

Editor de PropiedadesAquí se cambian parámetros de los

elementos visuales (color, texto, posición, alineación,

etc.)

• ¿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é

>> Programación Visual (GUI)

Borland Delphi 7

• 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.

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

>> Programación Visual (GUI)

Primer programa

• Situarse en un

Form

• Seleccionar la

pestaña “Standard”

• Seleccionar un

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• Seleccionar un

button (OK)

>> Programación Visual (GUI)

Primer programa

Para que suceda

algo:

• Selecciona

Events en el

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

Events en el

Object Inspector

• Nos interesa el

evento OnClick

• Realicemos

doble Click en el

espacio en Blanco

de OnClick

>> Programación Visual (GUI)

Primer programa

• ShowMessage

muestra el

mensaje entre

comillas

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

comillas

• Presionemos

F9 (compilación)

• “ Listo ”

• Hello World! (al hacer click en el botón, que muestre “Hello World!” en el cuadro de texto).

procedure TForm1.Button1Click(Sender: TObject);

begin

>> Programación Visual (GUI)

Borland Delphi 7

begin

Edit1.Text := 'Hello World!'

end;

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• Como se mencionó anteriormente, el lenguaje de programación usado por Delphi es Pascal. Hay unas leves variaciones respecto a C.

Definición de variablesprocedure TForm1.Button1Click(Sender: TObject);

var

>> Programación Visual (GUI)

Borland Delphi 7

var

i: Integer;

begin

…

Asignación de Valores

i:=34;

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

• Sentencia IF

if (algo) then

begin

…

end

>> Programación Visual (GUI)

Borland Delphi 7

• Ciclo FOR

For var:=inicio To tope Do

Begin

…

End;end

else

begin

…

end;

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

End;

• Ciclo While

While condicion Do

Begin

…

End;

>> Programación Visual (GUI)

Ejemplos

NO HAY!

(Ud. Los hará).

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<

Problema

Desarrolle una calculadora simple (4 operaciones básicas), donde el usuario ingrese dos valores (dos casillas) y reciba el resultado en una tercera.