Programación Visual (GUI)

Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
Nicolás Álvarez S.
nalvarezs@vtr.net
Juan Monsalve Z.
jmonsalve@elo.utfsm.cl
>> Programación Visual (GUI)
Tópicos a tratar
• ¿Por qué programación visual?.
• GUIs & IDEs.
• Delphi.
• Ejemplos.
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
¿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.
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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.
8010 Star Information System, desarrollado para la
plataforma Star Workstation de Xerox en 1981
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
GUI: Graphical User Interface (ejemplos)
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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)
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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.)
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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.
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
button (OK)
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
Primer programa
• ShowMessage
muestra el
mensaje entre
comillas
• Presionemos
F9 (compilación)
• “ Listo ”
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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;
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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;
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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;
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
>> Programación Visual (GUI)
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.
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<