SlideShare una empresa de Scribd logo
1 de 16
Descargar para leer sin conexión
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 <<

Más contenido relacionado

Similar a Lenguajes Visuales

CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdf
CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdfCAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdf
CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdfGabriel Medina
 
Lenguaje de programacion de visual basic
Lenguaje de programacion de visual basicLenguaje de programacion de visual basic
Lenguaje de programacion de visual basicRosa Marina Mosquera
 
Microsoft visual studio
Microsoft visual studioMicrosoft visual studio
Microsoft visual studiomarco368
 
Actividad nº 8
Actividad nº 8 Actividad nº 8
Actividad nº 8 marco368
 
Microsoft visual studio
Microsoft visual studioMicrosoft visual studio
Microsoft visual studiomarco368
 
02- Clase 1 - UD2 - Lenguajes.pdf
02- Clase 1 - UD2 -  Lenguajes.pdf02- Clase 1 - UD2 -  Lenguajes.pdf
02- Clase 1 - UD2 - Lenguajes.pdfNancyHerrera88
 
Herramientas para presentaciones
 Herramientas para presentaciones Herramientas para presentaciones
Herramientas para presentacionesEduardo Sanunga
 
Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014UNIVERSIDAD
 
Manual de programas ivan lopez g264 b24
Manual de programas ivan lopez g264   b24Manual de programas ivan lopez g264   b24
Manual de programas ivan lopez g264 b24ivansh1990
 
Vb studio net 2005 (i) -Alba Lydia Urcina Avilés
Vb studio net 2005 (i)   -Alba Lydia Urcina AvilésVb studio net 2005 (i)   -Alba Lydia Urcina Avilés
Vb studio net 2005 (i) -Alba Lydia Urcina AvilésAlba_Urcina
 
Vb studio net 2005 (i)
Vb studio net 2005 (i)Vb studio net 2005 (i)
Vb studio net 2005 (i)Alba_Urcina
 
Diseno implementacion modulo_hernandez_2011_anexo_a
Diseno implementacion modulo_hernandez_2011_anexo_aDiseno implementacion modulo_hernandez_2011_anexo_a
Diseno implementacion modulo_hernandez_2011_anexo_amanuel rivera rivera arce
 
[Arqui1]practica2 200815555
[Arqui1]practica2 200815555[Arqui1]practica2 200815555
[Arqui1]practica2 200815555AnGeo Gomez
 
GESTION DE PROYECTOS INFORMATICOS
GESTION  DE PROYECTOS INFORMATICOSGESTION  DE PROYECTOS INFORMATICOS
GESTION DE PROYECTOS INFORMATICOSYASMIN RUIZ
 
Introducción al curso de C.docx
Introducción al curso de C.docxIntroducción al curso de C.docx
Introducción al curso de C.docxNidia Castro Campo
 
Clase 1 - Programación.pptx
Clase 1 - Programación.pptxClase 1 - Programación.pptx
Clase 1 - Programación.pptxnaldocz1
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...delvalleelizabeth400
 

Similar a Lenguajes Visuales (20)

CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdf
CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdfCAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdf
CAPÍTULO 1 FUNDAMENTOS MZ-CV-DA-ESPE.pdf
 
Lenguaje de programacion de visual basic
Lenguaje de programacion de visual basicLenguaje de programacion de visual basic
Lenguaje de programacion de visual basic
 
VISUAL BASIC NET
VISUAL BASIC NETVISUAL BASIC NET
VISUAL BASIC NET
 
Microsoft visual studio
Microsoft visual studioMicrosoft visual studio
Microsoft visual studio
 
Actividad nº 8
Actividad nº 8 Actividad nº 8
Actividad nº 8
 
Microsoft visual studio
Microsoft visual studioMicrosoft visual studio
Microsoft visual studio
 
02- Clase 1 - UD2 - Lenguajes.pdf
02- Clase 1 - UD2 -  Lenguajes.pdf02- Clase 1 - UD2 -  Lenguajes.pdf
02- Clase 1 - UD2 - Lenguajes.pdf
 
Herramientas para presentaciones
 Herramientas para presentaciones Herramientas para presentaciones
Herramientas para presentaciones
 
Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014Librovisual basic 4to final2 2014
Librovisual basic 4to final2 2014
 
Manual de programas ivan lopez g264 b24
Manual de programas ivan lopez g264   b24Manual de programas ivan lopez g264   b24
Manual de programas ivan lopez g264 b24
 
Vb studio net 2005 (i) -Alba Lydia Urcina Avilés
Vb studio net 2005 (i)   -Alba Lydia Urcina AvilésVb studio net 2005 (i)   -Alba Lydia Urcina Avilés
Vb studio net 2005 (i) -Alba Lydia Urcina Avilés
 
Vb studio net 2005 (i)
Vb studio net 2005 (i)Vb studio net 2005 (i)
Vb studio net 2005 (i)
 
Diseno implementacion modulo_hernandez_2011_anexo_a
Diseno implementacion modulo_hernandez_2011_anexo_aDiseno implementacion modulo_hernandez_2011_anexo_a
Diseno implementacion modulo_hernandez_2011_anexo_a
 
[Arqui1]practica2 200815555
[Arqui1]practica2 200815555[Arqui1]practica2 200815555
[Arqui1]practica2 200815555
 
Gap 1 informatica internet word excel
Gap 1 informatica internet word excelGap 1 informatica internet word excel
Gap 1 informatica internet word excel
 
Programacion 5%
Programacion 5%Programacion 5%
Programacion 5%
 
GESTION DE PROYECTOS INFORMATICOS
GESTION  DE PROYECTOS INFORMATICOSGESTION  DE PROYECTOS INFORMATICOS
GESTION DE PROYECTOS INFORMATICOS
 
Introducción al curso de C.docx
Introducción al curso de C.docxIntroducción al curso de C.docx
Introducción al curso de C.docx
 
Clase 1 - Programación.pptx
Clase 1 - Programación.pptxClase 1 - Programación.pptx
Clase 1 - Programación.pptx
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...
 

Más de José Tomás Diarte Añazco

Introducción a la Arquitectura de Computadoras.
Introducción a la Arquitectura de Computadoras.Introducción a la Arquitectura de Computadoras.
Introducción a la Arquitectura de Computadoras.José Tomás Diarte Añazco
 

Más de José Tomás Diarte Añazco (20)

S2214750014000067 gr1.jpg
S2214750014000067 gr1.jpgS2214750014000067 gr1.jpg
S2214750014000067 gr1.jpg
 
Primer trabajo practico de dreamweaver cs3
Primer trabajo practico de dreamweaver cs3Primer trabajo practico de dreamweaver cs3
Primer trabajo practico de dreamweaver cs3
 
VARIABLE COMPLEJA
VARIABLE COMPLEJAVARIABLE COMPLEJA
VARIABLE COMPLEJA
 
Control Industrial
Control IndustrialControl Industrial
Control Industrial
 
Microcontroladores
MicrocontroladoresMicrocontroladores
Microcontroladores
 
Investigación Cientifica
Investigación CientificaInvestigación Cientifica
Investigación Cientifica
 
Introduccion a la Robótica
Introduccion a la RobóticaIntroduccion a la Robótica
Introduccion a la Robótica
 
Sistemas de ecuaciones Lineales
Sistemas de ecuaciones Lineales Sistemas de ecuaciones Lineales
Sistemas de ecuaciones Lineales
 
Algebra de Boole
Algebra de BooleAlgebra de Boole
Algebra de Boole
 
Introducción a la Gerencia Informática
Introducción a la Gerencia InformáticaIntroducción a la Gerencia Informática
Introducción a la Gerencia Informática
 
Introducción al Lenguaje de Programación
Introducción al Lenguaje de ProgramaciónIntroducción al Lenguaje de Programación
Introducción al Lenguaje de Programación
 
Auditoria de SISTEMAS
Auditoria de SISTEMASAuditoria de SISTEMAS
Auditoria de SISTEMAS
 
Auditoria de sistemas
Auditoria de sistemasAuditoria de sistemas
Auditoria de sistemas
 
Investigación de Operaciones
Investigación de OperacionesInvestigación de Operaciones
Investigación de Operaciones
 
Proyectos Informaticos
Proyectos InformaticosProyectos Informaticos
Proyectos Informaticos
 
Seguridad informatica
Seguridad informaticaSeguridad informatica
Seguridad informatica
 
Introducción a la Arquitectura de Computadoras.
Introducción a la Arquitectura de Computadoras.Introducción a la Arquitectura de Computadoras.
Introducción a la Arquitectura de Computadoras.
 
Introducción de Ingeniería de Software
Introducción de Ingeniería de SoftwareIntroducción de Ingeniería de Software
Introducción de Ingeniería de Software
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
 
Inteligencia Artificail
Inteligencia ArtificailInteligencia Artificail
Inteligencia Artificail
 

Último

Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Rosabel UA
 
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)jlorentemartos
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024gharce
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfssuser50d1252
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAlejandrino Halire Ccahuana
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...YobanaZevallosSantil1
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfssuser50d1252
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxRosabel UA
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajeKattyMoran3
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FJulio Lozano
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAJesus Gonzalez Losada
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Carol Andrea Eraso Guerrero
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxRAMON EUSTAQUIO CARO BAYONA
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2Eliseo Delgado
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).hebegris04
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxFabianValenciaJabo
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...MagalyDacostaPea
 

Último (20)

Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024
 
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdf
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptx
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguaje
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICA
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
 

Lenguajes Visuales

  • 1. 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
  • 2. >> 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 <<
  • 3. >> 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 <<
  • 4. >> 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 <<
  • 5. >> Programación Visual (GUI) GUI: Graphical User Interface (ejemplos) Introducción a la Ingeniería Telemática - UTFSM – 2008 <<
  • 6. >> 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 <<
  • 7. >> 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 <<
  • 8. >> 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 <<
  • 9. >> 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 <<
  • 10. >> 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 <<
  • 11. >> 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 <<
  • 12. >> 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 <<
  • 13. >> 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 <<
  • 14. >> 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 <<
  • 15. >> 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 <<
  • 16. >> 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 <<