You are on page 1of 16

>> Programacin Visual (GUI)

Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<


Nicols lvarez S.
nalvarezs@vtr.net
Juan Monsalve Z.
jmonsalve@elo.utfsm.cl
Por qu programacin visual?.
GUIs & IDEs.
>> Programacin Visual (GUI)
Tpicos a tratar
Delphi.
Ejemplos.
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
El usuario normal no desea trabajar/ver
resultados por una consola de comandos.
La mayora de las aplicaciones comerciales utilizan
ventanas, botones, conos, etc.
>> Programacin Visual (GUI)
Por qu programacin visual?
ventanas, botones, conos, etc.
Es posible separar un cdigo que realiza operaciones
muy complejas con su interfaz hacia el usuario.
Permite integrar elementos propios del sistema
operativo.
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Permite la interaccin del
usuario con la
mquina/aplicacin en
cuestin.
Utiliza una serie de
>> Programacin Visual (GUI)
GUI: Graphical User Interface (Interfaz Grfica de Usuario)
Utiliza una serie de
herramientas y tecnologas
para mejorar los procesos
de entrega y generacin de
informacin.
Responsable en gran
medida de la masificacin
de los computadores
personales.
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
8010 Star Information System, desarrollado para la
plataforma Star Workstation de Xerox en 1981
>> Programacin Visual (GUI)
GUI: Graphical User Interface (ejemplos)
Introduccin a la Ingeniera Telemtica - 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 programacin de la lgica de la
aplicacin propiamente tal.
>> Programacin Visual (GUI)
Programando con GUIs
Dependiendo del lenguaje de programacin que uno desee utilizar,
existen distintos IDEs que utilizan uno u otro lenguaje.
Introduccin a la Ingeniera Telemtica - 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 y
tamao reducido.
>> Programacin Visual (GUI)
Borland Delphi 7
tamao reducido.
Identificaremos una
serie de elementos
esenciales para el
trabajo con las GUIs
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
>> Programacin Visual (GUI)
Borland Delphi 7
Barra de Herramientas
Aqu estn los elementos
para armar la GUI
(botones, textbox, etc)
Editor de Cdigo
Fuente
Aqu se arma la lgica del
programa
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Forms
(si, igual que en J2ME).
La ventana de la aplicacin
donde irn los elementos de
la GUI
programa
Editor de Propiedades
Aqu se cambian
parmetros de los
elementos visuales (color,
texto, posicin, alineacin,
etc.)
Cmo 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 botn y un cuadro de texto (Edit). Qu
>> Programacin Visual (GUI)
Borland Delphi 7
Ok, mi Form tiene ahora un botn y un cuadro de texto (Edit). Qu
debo hacer para que cuando corra mi programa y haga click sobre el
botn ocurra algo?
R.- En la Form, doble click sobre el botn agregado. Aparecer la
ventana de edicin de cdigo fuente y el focus se dirigir al
procedimiento (funcin) que controla la accin de hacer click sobre
el botn.
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
>> Programacin Visual (GUI)
Primer programa
Situarse en un
Form
Seleccionar la
pestaa Standard
Seleccionar un
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Seleccionar un
button (OK)
>> Programacin Visual (GUI)
Primer programa
Para que suceda
algo:
Selecciona
Events en el
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Events en el
Object Inspector
Nos interesa el
evento OnClick
Realicemos
doble Click en el
espacio en Blanco
de OnClick
>> Programacin Visual (GUI)
Primer programa
ShowMessage
muestra el
mensaje entre
comillas
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
comillas
Presionemos
F9 (compilacin)
Listo
Hello World! (al hacer click en el botn, que muestre Hello World!
en el cuadro de texto).
procedure TForm1.Button1Click(Sender: TObject);
begin
>> Programacin Visual (GUI)
Borland Delphi 7
begin
Edit1.Text := 'Hello World!'
end;
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Como se mencion anteriormente, el lenguaje de programacin
usado por Delphi es Pascal. Hay unas leves variaciones respecto a C.
Definicin de variables
procedure TForm1.Button1Click(Sender: TObject);
var
>> Programacin Visual (GUI)
Borland Delphi 7
var
i: Integer;
begin

Asignacin de Valores
i:=34;
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Sentencia IF
if (algo) then
begin

end
>> Programacin Visual (GUI)
Borland Delphi 7
Ciclo FOR
For var:=inicio To tope Do
Begin

End; end
else
begin

end;
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
End;
Ciclo While
While condicion Do
Begin

End;
>> Programacin Visual (GUI)
Ejemplos
NO HAY!
(Ud. Los har).
Introduccin a la Ingeniera Telemtica - UTFSM 2008 <<
Problema
Desarrolle una calculadora simple (4 operaciones
bsicas), donde el usuario ingrese dos valores
(dos casillas) y reciba el resultado en una
tercera.

You might also like