>> programación visual (gui) - elo.utfsm.cliwg101/clasevisual.pdf · • el usuario...
TRANSCRIPT
>> Programación Visual (GUI)
Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
Nicolás Álvarez [email protected]
Juan Monsalve [email protected]
• ¿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.