1- introducción. apariencia del entorno delphi · al final, tendremos un nuevo icono en el...

Fuente: http://www.aprendeaprogramar.com/course/view.php?id=16 PCI 2011 � 1er. Cuatrimestre

1- Introducción. Apariencia del entorno

En este curso veremos una introducción a laprogramación visual en lenguaje Pascal.

Para llevar a cabo este cometido bajo Windows,existe una herramienta muy conocida: Delphi,desarrollada por Borland. El problema es queDelphi no es una herramienta gratuita, aunquealgunas versiones lo han sido con anterioridad.

Alternativamente, si queremos desarrollarprogramas para Linux, tenemos a nuestradisposición Kylix, también de Borland, y quetambién fue gratis en su primera versión, pero yano lo es en el momento de escribir este texto(octubre de 2006).

Afortunadamente, existe una tercera aplicaciónque nos puede servir si nuestra economía no esmuy holgada: Lazarus. Se trata de un proyectodesarrollada a partir de Free Pascal, gratuito(realmente de "código abierto") y que estádisponible para Windows y para Linux.

El manejo básico de las tres herramientas es elmismo, por lo que nosotros emplearemos Lazaruspara comenzar a practicar sin gastar dinero.

En concreto, yo usaré Lazarus 0.9.18. La versiónmás reciente en cada momento se podrádescargar desde

http://www.lazarus.freepascal.org/

La instalación de Lazarus debería ser poco másque hacer doble clic en el fichero descargado.Primero se nos pregunta qué idioma queremosusar durante la instalación (en esta versión no estáel castellano, aunque sí el inglés -como eshabitual- u otros como el catalán). Yo usaré lainstalación en inglés, que es poco más que pulsar"Next" varias veces:

Al final, tendremos un nuevo icono en el escritorio,que nos permitiría empezar a trabajar conLazarus-Y si entramos, veremos cómo es elentorno de trabajo de Lazarus:

Las zonas en que se divide esta pantalla son:

� La parte central es nuestra ventana detrabajo, en la que teclearemos el códigofuente de nuestra aplicación.

� En la parte superior tenemos el menú, juntocon las barras de herramientas, que nospermitirán incluir los distintos elementos(botones, listas, etc) que necesitemos ennuestra aplicación.

� En la parte izquierda está el "Inspector deobjetos", desde el que podremos cambiarcon precisión ciertos detalles como laanchura, altura o posición de un elemento.

Todos ellos los iremos manejando a partir delpróximo tema.

Pero si hablamos de programación "visual",¿donde está nuestra ventana, en la que pongamoslos componentes visuales, como botones,etiquetas de texto, líneas de edición, listasdesplegables, etc? Aparecerá si pulsamos F12:

En el próximo tema crearemos realmente nuestraprimera aplicación.

Nota: daré por sentado que se tienen unosconocimientos mínimos de Pascal. Quien vengade programar en otros lenguajes quizá no tengadifícil aprender por comparación con lo que yaconoce, pero no descenderé hasta el nivel deexplicar todas y cada una de las construccionesbásicas del lenguaje.

Hoja 1 de 5


2- Botones y etiquetas de texto

Vamos a crear nuestra primera aplicación conLazarus (o con Delphi, se haría igual). Va a seruna mini-utilidad capaz de sumar dos números.

Para ello, usaremos dos casillas de introducciónde texto, un botón y varias etiquetas de texto.

Podemos comenzar por incluir el botón que habráque pulsar para sumar los dos números.

En la barra de herramientas aparece uncomponente llamado "TButton":

Hacemos clic sobre él para escogerlo y luegohacemos clic en cualquier parte de nuestraventana de trabajo (Form, en inglés) para que elbotón aparezca allí. Si luego acercamos el ratón aél, nos informará sobre su posición (Left es ladistancia desde el borde izquierdo de la ventana, yTop es la distancia desde el borde superior) ysobre su tamaño (width es el ancho, height es elalto):

El siguiente paso es cambiar el texto que apareceescrito en el botón. Para eso nos acercamos al"Inspector de objetos", en la parte izquierda de lapantalla, y modificamos la propiedad llamada"Caption", para darle un valor más adecuado (porejemplo, "Sumar"):

A continuación, incluimos la primera casilla deintroducción de texto (TEdit), de la misma forma:primero un clic en el correspondiente componentede la barra de herramientas:

Y después hacemos clic en nuestra ventana, paraindicar dónde queremos que aparezca dichorecuadro de introducción de texto. En él apareceráescrito "Edit1". Para cambiarlo, no tenemospropiedad "Caption", sino que el texto quecontiene se guarda en la propiedad "Text":

Hoja 2 de 5


Deberíamos dejar este texto en blanco, ya quevamos a sumar números:

Cuando tengamos los dos recuadros deintroducción, necesitaremos tres etiquetas detexto: dos de ellas serán para aclarar qué es cadarecuadro. La tercera será la que muestre elresultado. Para todas ellas, usaremos elcomponente TLabel:

Estas etiquetas, al igual que ocurría con losbotones, no son algo modificable por el usuario, demodo que el texto que muestran en pantalla seencuentra en la propiedadCaption:

Cuando ya tenemos todos los componentes enpantalla, podemos arrastrarlos con el ratón hastala posición que nos parezca más adecuada, igualque podemos cambiar el tamaño de la ventana:

Ya hemos creado la parte visual de nuestroprograma.

Ahora vamos a completar con el código fuente dela aplicación. En nuestro caso, deberemos decirqué se debe haber cuando se pulse el botón.

Los componentes en Lazarus (y Delphi) soncapaces de responder a ciertos "eventos"(sucesos). Los eventos se encuentran tambiénaccesibles en el Inspector de Objetos. El sucesomás frecuente al que deberá responder un botónes al hecho de que se haga clic sobre él(OnClick), pero hay muchos más, que iremosviendo más adelante:

Como ese "OnClick" es el evento más frecuente,ya está previsto por los diseñadores de Lazarus (oDelphi) una forma sencilla de llegar hasta él: sihacemos doble clic en el botón, automáticamenteaparece la ventana de código, y en ellaencontramos que se ha escrito el "esqueleto" deese suceso:

En nuestro caso, queremos que el texto de laetiqueta 3 (Label3.Caption) sea la suma de los quese ha tecleado en el recuadro de edición 1(Edit1.Text) y en el recuadro 2 (Edit2.Text). Eso sí,

Hoja 3 de 5


como los Text y los Caption son texto, debemosconvertir a números para poder sumar(con StrToInt) y luego convertir esa suma a texto(conIntToStr), así:

Label3.Caption := 'Suma: ' + IntToStr(StrToInt(Edit1.Text) + StrToInt(Edit2.Text));

Según empezamos a escribir, Lazarus conoce losmétodos, propiedades y eventos relacionados concada componente, y nos sugiere los que consideraque nos pueden interesar, para ayudarnos a ganartiempo:

Cuando todo el código esté escrito, pulsamos elbotón "Ejecutar" para poner en marcha nuestraaplicación:

Si hemos escrito todo correctamente, nuestraaplicación debería compilar sin problemas y teneresta apariencia:

3. Mejorando lo hecho

Nuestro proyecto anterior debería funcionar, perohay cosas que debemos saber antes de continuar:

3.1. Guardar el proyecto

En general, deberíamos guardar nuestro proyectoantes de probarlo. En unos casos, porque elcompilador nos obligará, si no es capaz de

compilar un fuente que no esté guardado un disco.En otros casos, por seguridad, para tener lacerteza de que los últimos

Cuando guardemos, se nos pedirán dos nombresde fichero. El primero es para nuestra ventana (ysu código fuente asociado), que en nuestro casopodría ser "principal". El segundo es para nuestroproyecto (podría ser "sumador").

El ejecutable de la aplicación tendrá el mismonombre que el proyecto, y es encontrará en lamisma carpeta.

3.2. Colocar elementos con precisión

En general, no nos podemos permitir que loselementos de nuestra pantalla queden malalineados. En el apartado anterior los hemoscolocado "a ojo", pero tenemos ayudas para quelas cosas salgan mejor.

La primera ayuda viene de parte del entornográfico: cuando movamos un elemento hasta unaposición en la que quede alineado con otro,aparecerá una raya azul uniéndolos, paraavisarnos:

La segunda ayuda vendrá de las propiedades quepodemos modificar en el Inspector de Objetos: sidos objetos deben estar en la misma vertical,podemos indicar "a mano" el mismo valor en lapropiedad "Left" (posición desde la izquierda de laventana) para esos dos objetos. Si deben estar enla misma horizontal, daríamos el mismo valor a lapropiedad "Top" de ambos objetos.

3.3. Más sobre el "Inspector de Objetos"

Hemos comentado algunas propiedades de lasque podemos modificar mediante el inspector deobjetos:

� Left es la posición horizontal, a partir delextremo izquierdo de la ventana.

� Top es la posición vertical, a partir delextremo superior de la ventana.

Hoja 4 de 5


� Caption es el texto que muestra el elemento(botones, etiquetas, etc.; incluso la propiaventana de trabajo -form- tiene su "caption",que se muestra en la barra de título).

� Text es el texto de ciertos elementosmodificables, como las casillasdeintroducción de texto.

Pero hay muchas más. Por ejemplo, para un botóntenemos disponibles todas estas:

Algunas de las más importantes son:

� Height es la altura (tamaño vertical delelemento).

� Width es la anchura (tamaño horizontal delelemento).

� Name es el nombre del elemento. Lo másrazonable es que tuviera un nombrerelacionado con su función. Se suele hacerademás que el nombre comience por unasletras que recuerden el tipo de elementoque es. Por ejemplo, para este botón,encargado de sumar, un nombre adecuadopodría ser "btSumar".

� Color sirve para indicar el color de unelemento.

� Font permite indicar el tipo de letra queusará ese elemento.

� Hint es una línea de ayuda que aparece alacercarnos a ese elemento (se muestra si"ShowHint" es True).

� Visible hace que el objeto sea visible o no,lo que puede ser útil para mostrar ciertosobjetos sólo cuando se cumpla algunacondicion concreta.

Ejercicio propuesto:Mejora el ejercicio anterior, para que la ventana demanejo del programa tenga como nombre"Sumador", el botón tenga una ayuda que diga"Calcula la suma y muestra su resultado", y eltamaño del botón sea de 80 píxels de ancho y 30de alto.

Hoja 5 de 5

1- introducción. apariencia del entorno delphi · al final, tendremos un nuevo icono en el...

Documents