Curso Delphi. Lección 02A  

Send By: Ariel Bustamante
Web : N.A.
Email: N.A.
Date: 30/12/02

Tip accessed 903 times

 


CURSO PARA NO INICIADOS EN DELPHI


LECCION 2




CONVENIMOS QUE......


A partir de esta lección, comenzaremos a obviar explicaciones que ya
se han dejado lo suficientemente claras en la Lección1.

Allí decíamos "selecciona o clica sobre el Button, ve al
inspector de Objetos, en la pestaña propiedades, busca Name, clica sobre
la ventana de la derecha y escribe BotSalir.

Quedará sustituido por "NombreDelComponente/Propiedad/Name........".


Y lo que hasta ahora decíamos "clica o selecciona el componente,
ve al Inspector de Objetos, en la pestaña Events, busca OnClick, haz
dobleClick sobre la ventana de la derecha y aparecerá la Unit, allí
entre el begin y el end; pon.............. Quedará sustituido por "NombreDelComponente/Events/OnClick:"


Si ponemos "modifícale su altura o su ancho a 25"

"modifícale su Top o su Left a 20"

"cámbiale la propiedad Color"

"ponle en su propiedad Caption.."

"selecciona todos los Buttons"

damos por asentado que tú ya lo sabes hacer sin más aclaraciones
y si te topas con una duda, nada más tienes que volver a la Lección1.


A TRABAJAR


Crea dentro de nuestro directorio la carpeta Lección2, abre Delphi y
guarda la Unit con el nombre Main y el Project con el Nombre Leccion2. Si no
tienes la Form en primer plano, ponla con F12.

Verás que aún nos queda escritorio por ocupar, lo que quiere decir
que a esa Form la podemos agrandar un poco para aprovechar más superficie
de trabajo.

Agrándala con el ratón posicinando su cursor en los bordes de
la misma hasta cubrir los espacios vacíos.

Cuando el puntero del ratón se transforma en una flecha con dos puntas,
lo mantienes clicado y arrastras.

La Form tambien tiene una propiedad Height y una Widht, pruébalas.

Verdad que parece más cómoda para trabajar?

Lo mismo puedes hacer con el Inspector, verdad que deja un espacio libre abajo?,
pues estíralo y tendrás más propiedades a la vista.

Vete al Inspector. Form1/Propiedades/WindowsState/WsMaximized.

Vete a la Paleta/Standard y clica sobre Panel (lo más probable es que
sea el segundo por la derecha), deposítalo en la Form y obsérvalo.


Este es un componente prácticamente de diseño estético,
se le puede modificar sus bordes para que tome un aspecto de cuadro y dentro
depositarle Buttons, Labels etc.

Su caption por defecto (como siempre ) pone Panel1, que también es su
nombre.

Antes de emplearlo en nuestro diseño, vamos a conocerle algunas Propiedades.

Propiedad/Alignment (la segunda desde arriba).

Encontrarás tres opciones, ve cambiando de una en una y observa que pasa
con el texto del Caption. Este se va a la izquierda/derecha o al centro.

Esta Propiedad funciona así en todos los componentes que la usen (Label,
Memo etc.).

Ahora vete a la Propiedad/BevelInner (la quinta desde arriba) y repite la operación
anterior, observando a cada paso lo que ocurre cada vez que la modificas.

Repite lo mismo con con BevelOuter, y por último modifica varias veces
(poniendo 2,3,4 etc.) la Propiedad BevelWidth.

Después de probar todas estas propiedades, diseña el marco a tu
gusto y guarda el proyecto.

Ahora vamos con la Propiedad/Align (la primera), por defecto está alNone,
cámbiala alClient. Nos ha ocupado toda la Form.

Todos los componentes que tengan esta Propiedad, se comportan de igual modo.

Ahora si quisiéramos cambiar la Propiedad alClient por otra, no pasará
absolutamente nada, se quedará en alClient.

Intenta achicar el Panel con el ratón y tampoco se dejará. Haz
de cambiar la Propiedad otra vez a alNone y ahora sí podrás modificar
el ancho y el alto del Panel. Hazlo hasta que te quede del tamaño que
más o menos teníamos antes.

Recuerda que tienes tres formas de cambiar medidas si no puedes pillarlo con
el ratón.

Una vez restaurado el tamaño ponlo alTop. Nos ocupa un espacio en la
parte de arriba de la Form.

Ahora ponlo alBottom. Nos ocupa un espacio en la parte de abajo de la Form.
Continúa con alLeft y con alRigth y observa los cambios.

Para finalizar ponlo alNone y vuelve a modificar el tamaño para dejarlo
más o menos del tamaño original y con el Caption al centro, Propiedad/Alignment
/taCenter.

Vete a Propiedades/Font (fuente) del Panel, verás dos cosas diferentes
de la vistas hasta ahora en una ventana de Propiedades, la primera que aparece
un signo + a la izquierda lo que quiere decir que estamos ante una lista desplegable,
la segunda que nos aparece un botón con tres puntos a la derecha de la
ventana derecha. Esta Propiedad es importantísima en el diseño
estético de tu aplicación.

Si desplegamos la lista veremos que nos aparecen las diferentes Propiedades
de la fuente de letra para el Caption, modifica algunos valores y veras que
el tipo/tamaño/color de letra van cambiando.

Pero (como casi todo en Delphi) puede hacerse de otra manera, esto es cuestión
de gustos, en lo que a mí respecta yo prefiero hacer clic sobre el botoncito
de la derecha y desplegar la ventana Fuente que vas a ver ni bien lo hagas.


Allí como ocurre con cualquier editor de texto, puedes modificar la fuente
del Caption a tu gusto. Hazlo cambia color, tipo, fuente y tamaño varias
veces para familiarizarte con ella.

Tus cambios te los va mostrando en la ventana Muestra y cuando clicas aceptar
te los muestra ya en el Caption. Fíjate que puedes chequear la opción
Tachado y Subrayado o ninguna, también puedes cambiar los alfabetos,
en fin, tócalo todo y verás.

Todos los componentes que poseen la propiedad Caption, tienen una propiedad
Font que funciona de igual forma.

Si ya has acabado el "juego", vete a la Propiedad/Caption del Panel
y bórrala, ya no la necesitamos.

Ahora al Panel sin Caption y con ese marco que le has diseñado vamos
a darle Height de 697, un Width de 139, un Top de 23 y un Left de 870.

Que ha pasado?, que como nos hemos excedido de la superficie de trabajo nos
han aparecido dos ScrollBars (barras de des plazamiento) para poder acceder
al sitio donde tenemos el Panel. Pero trabajar así sería un problema
porque al no ver toda la Form, estamos diseñando prácticamente
a ciegas. Así que vamos a trabajar con la Form maximizada, clica sobre
el cuadrado de arriba a la derecha y agrándala.

Ya sabes que para poder ver el Inspector ahora o clicas Intro o F11 y para ver
la Unit F12, para quitar cualquiera de los dos, clicas con el ratón sobre
la Form. ¿Pero y para ver la Paleta?. Fácil, picas F10.



Atención, ya conocemos el funcionamiento de cuatro teclas rápidas
que nos aliviarán mucho dolor de muñeca, a saber:


  • F9 ejecuta el programa

  • F10 nos muestra la Paleta (si esta estuviera ocula por la Form o la Unit)

  • F11 nos muestra el Inspector

  • F12 nos cambia de Unit a Form

  • Pero hay otra que también te será muy útil cuando desarrolles
    por tí solo una aplicación, es F1, la clásica tecla de
    Ayuda, seleccionas un componente, clicas F1 y Delphi te muestra una ventana
    con una infinidad de información sobre dicho componente.

    Eso sí, para sacarle mayor provecho hay que estar un poco "puesto"
    en lengua inglesa.

    Normaliza la Form para ver la Paleta (clicando sobre las dos cuadraditos de
    arriba a la derecha) y ahora vamos a depositar diez Buttons sobre el Panel.
    Vaya rollo clicar diez veces en la Paleta y depositar diez veces un button sobre
    el Panel.

    Nada de eso. Con la tecla Mayúsculas presionada, clicas el Button en
    la Paleta, ahora el Button de la Paleta ha quedado con un marco de color azul
    a su alrededor.

    Eso quiere decir que de ahora en más cada clic del ratón sobre
    la superficie de trabajo, nos dejará depositado un Button. Maximiza la
    Form, vete al Panel y comenzando por arriba haces el primer clic, un poco más
    abajo el segundo y así hasta diez. Normaliza la Form y clica en la Paleta
    esa flecha que aparece al principio de la misma.

    Desapareceel marco azul del Button y este queda deseleccionado.

    Maximiza la Form.

    Ahora observa que el Caption de los Buttons han aparecido con otra Font de letra
    de la que vimos en la Leccion1.

    Selecciona un Button y haz aparecer al Inspector. Mira la Propiedad/ParentFont
    (fuente emparentada)y verás que esta está en True (cierto), eso
    quiere decir que el Caption de este componente va a tomar la Font que se ha
    usado en el Caption del componente donde fué depositado.

    Si tú ahora cambias True por la otra opción que es False (falso),
    el Caption no cambiará el tipo de Font, pero quedará liberado
    para que le seleccionemos nosotros un tipo de Font.

    Déjalo en True.

    Seleccionemos los diez Buttons (con la tecla Mayúscula presionada, clicamos
    de uno en uno), Intro, aparece el Inspector nos vamos a la Propiedad/ParentFont
    , seleccionamos False y picamos Intro (los diez botones han pasado de True a
    False).

    Mostramos otra vez el Inspector (los diez botones siguen seleccionados), vamos
    a la Propiedad/Font y cambiamos la fuente a nuestro gusto. Elige la que quieras.

    Vamos a alinear los botones para que tengan un orden estécticamente pasable.


    Como verás nos sobra espacio en el Panel para colocarlos, así
    que podemos modificarles el Height y el Width para que "rellenen"
    un poco más el Panel y todos tengan el msimo tamaño.

    Eso ya lo dejo por tu cuenta. Ahora vamos a alinearlos con el Left.

    Atención ahora el valor Left (así como el Top) nos hablarán
    de espacios dentro del Panel que es donde fueron depositados, no dentro de la
    Form como en la Lección1. Los valores Top y Left siempre se refieren
    a una posición dentro del componente contenedor, en este caso es el Panel.

    Ve probando valores Left hasta que te queden bien centrados. Y la posición
    vertical (todos los Buttons con una separación vertical igual) la haces
    a ojo con el método tecla. Se podría hacer con la propiedad Top,
    donde cada Button llevaría un valor Top diferente, pero tendrías
    que coger papel y lápiz y empezar a hacer cuentas.

    Por ejemplo (si amas el trabajo lo haces):

    en la Propiedad/Top del primer botón pondríamos 10, en el segundo
    botónpondríamos esos 10, sumándole el valor Height y 10
    más del segundo espacio, en mi caso que el botón tiene 30 de Height
    el segundo botón tendría un Top de 50 y así el segundo
    botón estaría a la misma distancia que está el primer botón
    del borde superior del Panel y así sucesivamente, ¿verdad que
    es una locura? y como esta aplicación no es con fines comerciales, nos
    saltamos tanta precisión, con buen ojo lo podemos dejar casi perfecto.



    Nota de Radikal:

    Esto está muy bien, pero yo casi que prefiero usar la paleta de alineacion, que la teneis en el IDE en:
    View/Alingment Palette que hará este trabajo por nosotros. Esto y el mover el componente con las flechas del teclado pero con el CTRL pulsado te permitirán alinear todo como debe ser y sin calculos.




    Cuando acabes este centrado guarda todo.

    Que si esto se llega a perder después de tanta faena............

    Al primer botón de abajo (sería el Button10) le pondremos de Name
    BCerrar y de Caption Salir, pero esta vez al caption lo escribiremos así:
    &Salir

    Que ha pasado? El tipo & no aparece escrito, pero la S de Salir aparece
    subrayada.

    Esto quiere decir que ahora tenemos dos forma para cerrar la aplicación
    en tiempo de ejecución. Una. la típica, clicar el botón,
    la otra: manteniendo la tecla Alt presionada picar la tecla s.

    El comodín & puede ir delante de cualquier letra asignándole
    a esa letra la tecla que cerrará la aplicación.

    Esto es aplicable a los Buttons y a los Menús.

    Al BSalir (ya ni te menciono que es un Button) ponle en el evento OnClick: Close;

    Ejecuta la aplicación dos veces cerrándola con las dos opciones.


    Vuelve a tiempo de diseño y sin maximizar la Form, guarda todo.

    Maximiza la Form.

    Sabes?, no me gusta tanto gris, vamos a cambiarle la Propiedad/Color al Panel.
    Panel/Propiedades/color y desplega esa lista que aparece a la derecha, ve eligiendo
    colores (que te aparecerán en tiempo de diseño) y elígele
    el que más te agrade.

    Cuando sugiero hacer estas cosas (como cambiar el color del Panel) que parecen
    caprichos intrascendentes, aclaro que lo hago unicamente con el fin de familiarizarte
    con las diferentes propiedades.

    Normaliza la Form para que se vea la Paleta.

    Busca en la Paleta/Standard el componente Memo y deposítalo en la Form.

    Maximiza la Form y verás que tenemos un pequeño cuadro blanco
    que pone Memo1. Este es un componente ideal (no el único) para que el
    usuario de la aplicación trabaje con texto.

    Por ejemplo es muy útil a la ahora de diseñar un editor de textos
    tipo WordPad.

    Dale un valor Height y Top igual a las del Panel, la Widthla pones en 840 y
    la Left de tal manera que tengamos el mismo espacio entre el borde izquierdo
    de la Form y el borde izquierdo del Panel. Ahora tenemos un cuadro del mismo
    alto que el Panel y centrado todo coherentemente.

    Hay unos espacios donde aún vemos al fondo el gris de la Form. Vamos
    a poner la Propiedad/Color de la Form igual que la del Panel, tú sabrás
    de que color es tu Panel.

    Selecciona el Memo1 y ve a Propiedades/Lines, clica el botón de los tres
    puntos y se te abrirá el StringListEditor, allí borra (como en
    cualquier editor de texto) esa línea que pone Memo1, hasta que arriba
    a la izquierda cambie a "0 Lines" clica OK y ahora verás el
    Memo1 sin ningún texto escrito.

    Hemos acabado con el diseño puramente estético de la Form y buena
    faena que nos ha llevado, ahora vamos a trabajar solamente escribiendo código,
    Names y Captions y ocurrirá que de tanto y tanto clicar sobre los componentes,
    puedes moverlos de su posición sin querer.

    Para prevenir esto una vez que has colocado todos los componentes y entras en
    la etapa de solamente escribir código, vas al menú Edit de Delphi
    y allí buscas Lock Controls (ese que tiene una llave), si estuviera desactivado
    (todo en gris), guarda todo y se activará, clicas sobre él y tus
    componentes ya no se moverán más dentro de la Form hasta que no
    repitas esta operación o cierres y vuelvas a abrir Delphi.

    Ejecuta la aplicación y escribe algo en el Memo. Ya tienes un pequeño
    trozo de un editor de textos elemental.

    Todo aquello que escribas se borrará al cerrar la aplicación pues
    aún no disponemos de ningún componente que sea capaz de Guardar.

    Cierra la aplicación. Normaliza la Form. Guarda todo. Maximiza la Form.
    Verás que siempre te digo guarda todo antes de maximizar la Form, eso
    es porque si guardas el diseño con la Form maximizada, Delphi comenzará
    mostrándola siempre así y siempre tendrás que corregirle
    el Width y el Height para trabajar.

    Vamos al Button1 (sería el primero desde arriba). Propiedades/Name/BSeleccion
    y ahora Propiedades/Caption/S&eleccionar Todo.

    Si no te entra tanto texto en el Button o achicas la Font del Caption del botón
    o agrandas el Button -recuerda que cualquier modificación, se la haz
    de hacer a los diez Buttons al mismo tiempo-.

    Ahora verás que la combinación de teclas que cumple la misma función
    que el clic sobre el Button es Alt+e.

    Al inspector, busca a BSeleccion/Events/OnClick y en la Unit escribe:

    Memo1.SelectAll;


    ATENCION VAMOS A USAR EL COMPILADOR.


    Con la tecla Ctrl presionada, pica F9. Ha aparecido por un instante un reloj
    (según la versión de Delphi que uses todas las líneas han
    sido señaladas con un punto azul en la ventana de la Unit) y no ha pasado
    nada. ¿Entonces, que hemos hecho con Ctrl+F9?.

    Nosotros nada, Delphi ha transformado nuestro código en "lenguaje
    máquina" y como no hemos cometido ningún error no nos ha
    dicho nada. Eso quiere decir que nuestro código está bien escrito,
    pero no quiere decir que vaya a cumplir el cometido que le hemos encomendado,
    esto último solo se sabe arrancando el programa.

    ¿Que le hemos encomendado al BSeleccion?, si sabes un poquito de inglés,
    seguro que ya lo entiendes. Que seleccione (Select) todo (All) en el Memo1.

    Pero al mismo evento vamos a encomendarle otra misión. Debajo de la línea
    Memo1.SelectAll; escribe esta:


    Memo1.SetFocus;


    Quedará algo así:



       begin //esto lo ha escrito Delphi
         Memo1.SelectAll;
         Memo1.SetFocus;
       end; //esto lo ha escrito Delphi
    


    El Evento OnClick seleccionará todo el texto y mantendrá el foco
    (la atención) sobre el Memo1, eso nos permitirá ver el texto sombreado.

    Ejecuta el programa, escribe varias líneas de texto y luego clica el
    botón Seleccionar Todo (o Alt+e) y verás que como encualquier
    editor de textos, todo el texto aparece sombreado.

    Vuelve a tiempo de diseño. Guarda Todo y Maximiza la Form.

    Ve al Button2 (segundo desde arriba). Propiedades/Name/BCopiar y Propiedades/Caption/&Copiar.

    Atencion: estas dos operaciones (y las tres con el Evento incluído) se
    pueden hacer de un solo golpe.

    Si estas en Caption, escribes este y con flecha abajo, bajas hasta Name, escribes
    el Name y clicas la pestaña Events y ya está todo hecho llamando
    solo una vez al Inspector.

    Estamos prestando mucha atención a no repetir la combinación de
    teclas, Salir es con s, Seleccionar con e y Copiar con c, cuando tienes tantos
    botones, este es un detalle a tener en cuenta. Anótalos en un folio.


    Seguimos, en BCopiar/Eventos/OnClick:



     Memo1.CopyToClipBoard;
     Memo1.SetFocus;