Curso Delphi. Lección 01. Primeros pasos.
|
Estimados Trucomaniacos. Gracias al ofrecimiento de Ariel Bustamante, iremos publicando un curso de Delphi para no iniciados. La idea del curso, y su contenido irán a cargo de Ariel. Yo iré publicandolo leccion por lección en trucos como este, que incluye la primera, de tal forma que quedará recogido tanto en la web como en el TMania Explorer (explorador offline). Para todos aquellos que tengan dudas acerca de la leccion, les rogaria que no nos las expresen por email, sino que lo hagan en la página web, dentro del truco de la lección, al final hay un servicio de mensajeria (estilo foro), en el que seguramente las dudas puedan ser leidas (y contestadas) por otros usuarios con las mismas inquietudes. Tal como he colocado en algun otro truco (y sin éxito alguno), si alguien con buen nivel de inglés nos envia este truco traducido al inglés... pues le estaremos agradecidos. Radikal CURSO PARA NO INICIADOS EN DELPHILECCION 1OBJETIVOEs nuestra intención llegar a todos aquellos que están intentando iniciarse en el desarrollo de aplicaciones en DELPHI. Nos proponemos acompañarlos en sus primeros pasos dentro de este mundo, intentando explicarles la teoría más elemental de dicho programa en un lenguaje sencillo y comprensible para aquellos que no manejan ni los términos más básicos de los lenguajes de programación. Aquí vamos a desarrollar muchas aplicaciones -sencillas y no tanto-, pero esto no quiere decir que vamos a crear programadores, al final del mismo y con los conceptos aprendidos, cada uno decidirá como mejorar sus conocimientos de acuerdo a las metas que se proponga. El curso será encarado con mucha agilidad -dentro de quince minutos tendrás tu primera aplicación ejecutada- haciendo especial hincapié en la práctica, aunque eso no quiere decir que ignoraremos la parte teórica, si no que esta se irá integrando a un ritmo muy pausado a medida que avance el curso. Siendo su comienzo en la lección 3. Partimos de la base que los lectores de esta página tienen como mínimo la version 3 de Delphi, aunque las primeras lecciones se pueden realizar hasta con la version 1. Nosotros estamos realizando estos ejemplos con Delphi 5.0 y podrá ocurrir que cuando te indicamos que tal componente es el tercero por la derecha en la Paleta, en tu versión de Delphi no sea así, para eso con solo pasar el ratón sobre los diferentes componentes un Hint (rotulo) te va indicando su nombre. AULA ABIERTALo dicho, estamos abiertos a todo aquel que le interese colaborar con esta iniciativa ya sea redactando lecciones completas, interviniendo en Consejos Utiles o echando una mano donde cada uno crea que puede aportar algo. ESTRUCTURACada lección aparecerá con un intérvalo de unos siete días, pausa esta que recomendamos sea aprovechada para repasar o realizar nuevamente lo aprendido en la lección anterior y para efectuar las consultas en el foro de dudas. Rogamos que todas las consultas vengan acompañadas de ese trozo de código que les presenta el problema. Cada lección constará de cinco partes: La Introducción, La práctica -crear una aplicación o mejorar la anterior-, La Teórica -inevitable, por más odiosa que os parezca- . La de Consejos Útiles y por último una copia (en texto) de la Unit que hemos desarrollado, ideal para cuando nos han quedado dudas "colgadas". ANTES DE COMENZARSiempre es importante fijar como definitiva alguna terminología que se va a aplicar reiterativamente, esta irá siempre en esteapartado. Y comenzamos...... CONVENIMOS QUE...Aplicación = programa
también es ignorado por el compilador. Ya lo escribiremos y lo comprobarás en la práctica. Si ponemos Inspector/Name, queremos decir que se ha de ir al Inspector y buscar la Propiedad name. Este mismo sistema de la barra inclinada lo emplearemos para los diferentes menús de Delphi cuando estos constan de varios pasos. Cuando hagamos referencia a un componente, su nombre (el que le haya designado Delphi por defecto o el que le hayamos puesto nosotros) se escirbirá con Mayúscula al principio, cuando escribas código, acostúmbrate a hacerlo de la misma forma y verás como es más práctico a la hora de revisar el mismo. PRIMERA APLICACIÓNCrea en C: una carpeta llamada CursoQ3, así cuando hacemos referencia a un directorio, todos tenemos los mismos. Dentro de CursoQ3 crea otra carpeta llamada Lección1, aquí guardarás esta aplicación, más el texto de esta página que en un futuro te servirá para saber de que se trataba esta aplicación y como se diseñaba. Abrimos Delphi (si no, imposible) y ahí está el monstruo, esperando a que tú cometas algún error para machacarte con sus advertencias. No te preocupes, también es un buen asesor a la hora que empiezan a surgir los errores. Tenemos arriba ocupando todo el ancho de la pantalla las teclas de menú rápido a la izquierda y la paleta de componentes a la derecha, esta última con una serie de pestañas que agrupan una cantidad de componentes por categoría. Clica sobre las pestañas y pasa el ratón sobre los componentes para ir enterándote como se llamarán de ahora en más tus "amigos". Más abajo y ocupando una buena superficie sobre la derecha está la Form (Forma), este es algo así como el "contenedor" donde irás colocando los componentes de la paleta para realizar tu aplicación. A la izquierda de la Form está el Object Inspector (Inspector de Objetos; nada que ver con hacienda) que también tiene dos pestañas Properties (propiedades) y Events (eventos). Detrás (a veces puede aparecer delante) está la Unit (Unidad), esta es algo así como el contenedor del código, aquí es donde hay que teclear y teclear hasta que por fin lo logramos. Para eso Delphi también nos da una mano. Presiona F12 y verás como pasas de la Form a la Unit (recuerda esta tecla, que te acelerará mucho el trabajo). ¡A TRABAJAR!Primero vamos a guardar el trabajo asignándole un nombre al Project (Proyecto) y otro a la Unit. Abre el menú File y luego clica sobre Save As, nos aparece la ventana Save Unit 1 As, despliega el árbol de directorios busca la carpeta Q3 y dentro de esta Leccion1, cambia el nombre Unit1 y pon Main (central), aquí lo que estamos guardando es la Unit y como esta es la que va a manejar nuestra aplicación le ponemos este nombre. clica sobre el botón Guardar. Abre otra vez el menú File y vete hasta Save Project As aparecerá la ventana ya con nuestra carpeta Lección1, le pondremos en lugar de Project1, Leccion1, guardamos y tarea acabada. Ahora a medida que vayamos guardando los cambios lo haremos con el cuarto Icono desde la izquierda ese que tiene varios disketes. Clicando ahí Delphi guarda Unit y Project de un solo golpe en nuestra carpeta. Ahora en la pestaña Standard busca un Button (botón), octavo desde la izquierda, aquel rectángulo que pone OK, si no pasa lentamente el ratón y los nombres irán apareciendo. Haz clic sobre él y luego clic sobre la Form. Ya tenemos un componente depositado sobre la Form y con este solito nuestra aplicación algo va a hacer. Verás que en su superficie pone Button1, Delphi le da este nombre por defecto incrementando el número en relación a la cantidad de botones que deposites en la Form. Pero este nombre es muy poco explicativo si tuviéramos 10 botones sería imposible memorizar para qué pusimos cada uno, así que vamos a darle un nombre acorde con la tarea que va a realizar. Clica sobre el Button y vete al Inspector de Objetos (Object Inspector) y en la pestaña Properties busca Name, borra el texto Button1 que aparece a la derecha y ponle Salir, verás que inmediatamente aparece el nuevo nombre sobre el botón. Y ahora que ya sabemos como se llama solo falta que haga algo porque si no.............. Otra vez en el Inspector en la pestaña Events clica dos veces sobre la ventana de la derecha del evento OnClick, automáticamente aparece la Unit con el cursor posicionado en el sitio donde haz de escribir el código (entre el begin y el end;). Ya ves que me salto todo ese pequeño texto que encuentras en la Unit, pero eso solo por ahora, ya lo machacaremos. Escribe ahí donde está el cursor entre begin y end;
Solo esas cinco letras acabadas en punto y coma y ya tienes un programa. Abre el menú Run y clica sobre Run. Tu programa se ha ejecutado. Ahora clica sobre el botón Salir y tu programa vuelve a la fase de diseño para seguir agregándole cositas. No me digas que no da una cosquillita interior, hace poco, casi nada pero es tu programa y funciona. Este ha sido tu bautizo en Delphi. Guarda todo con el botón que comentamos anteriormente. Pon la Form en primer plano (con el F12), ve a la pestaña Standard y coge otro Button y una Label (Etiqueta). Ahora que tienes tres componentes sobre la Form clica uno y otro y observa como el inspector va cambiando el título del componente según cual hayas clicado. Esto quiere decir que para yo poder cambiar la propiedad o el evento de un componente en el Inspector, primero he de clicar (seleccionar) ese componente en la Form. En parte cierto, aunque hay otro método que veremos más adelante. Bien vamos a ponerle un nombre a la Label que de momento se llama Label1. Clicamos sobre ella, vamos al inspector, buscamos Name y ponemos a la derecha LabelSaludo y ahora sin más explicación de como se procede al Button2 le vamos a nombrar BotSaludo. Si lo has hecho correctamente, en el botón como siempre está el nuevo nombre, pero no en la Label, porque lo que tú estás leyendo en la Label es un Caption por defecto que pone Delphi. El Caption no es otra cosa que una cadena de caracteres de lectura que nos sirve mucho para el diseño del programa. Por ejemplo un Label que diga 'todos los derechos reservados' y cosas por el estilo, aunque el componente Label también tiene Events que pueden hacer algunas cosillas. Ahora busca en el Inspector el Caption de la Label (que dirá Label1) , borra eso y pon Hola este es mi primer programa en Delphi. Ahora sí verás este texto sobre la Form. Venga, guarda todo y Run. Bueno, ya apareció otra cosa y verás que el segundo botón apareció con el texto BotSaludo, porque el Caption del botón si no se modifica toma el nombre del mismo y como la habíamos llamado BotSaludo eso es lo que muestra. Cerramos la aplicación y volvemos a fase de diseño. Vamos a modificar el Caption de BotSaludo y le pondremos solamente Saludo. Ahora el Name es BotSaludo y el Caption Saludo. Depositaremos sobre la Form otra Label (Atención esta Label se volverá a llamar por defecto Label1, puesto que a la anterior le hemos cambiado el nombre, si hubiéramos dejado la primera con el Name Label1, esta sería Label2) a la nueva Label solo le modificaremos el Caption, iremos al inspector y borraremos el Caption Label1 y no pondremos absolutamente nada en su lugar. Ahora seleccionamos el Botsaludo iremos al Inspector pestaña Events, buscaremos OnClick, haremos dobleclick sobre la ventana de la derecha de OnClick y se nos aparecerá nuevamente la Unit, ahora procederemos como en el caso del Button anterior, entre el begin y end, allí donde está seguramente el cursor, pondremos lo siguiente con la comilla simple incluída :
Ya sé que he sido reiterativo al explicar como escribir un código en un Evento OnClick, puesto que ya lo habíamos hecho en el Botón Salir, pero es que lo quise machacar un poco porque es la última vez que lo detallo. De ahora en más y en pos de la agilidad del curso, te diré: escribe en el Evento OnClick tal cosa. Ahora guardamos y ejecutamos pero esta vez vamos a usar el método tecla para ejecutar el programa. Clica sobre F9, el programa arrancará igual que picando Run y observa que tenemos los dos botones tal cual como los hemos nombrado, la LabelSaludo pero no la Label1, eso es simplemente porque no le hemos puesto ningún texto en el Caption, pero sí, "le dimos la orden" al botón saludo para que le pusiera un Caption cuando hiciéramos clic sobre él. Anda haz clic, ¿a qué estás esperando?. Vale, no te regociges, clica Salir y vuelve a la fase de diseño. Digo yo, no te parece que la Form aparece muy pequeña en la pantalla?. Vamos a hacerle algunos retoques. Clica sobre un espacio vacío (sin componentes) de la Form, vete al Inspector/Propiedades y busca al final de la lista la propiedad WindowsState, desplega el menú de la derecha del mismo y déjalo en wsMaximized, esto quiere decir que indepen- dientemente del tamaño en que tengamos la Form en tiempo de diseño, esta aparecerá ocupando toda la pantalla en tiempo de ejecución. Ahora vamos hasta la propiedad Caption de la Form y ahí escribe lo que quieras, tu nombre, tu equipo de fútbol, en fin. Guarda y ejecuta, no te olvides con F9 que es más práctico. Ya habrás observado los cambios realizados, la ventana cubre toda la pantalla y arriba en la zona azul está el texto que escribistes. En ese sitio podría ir el nombre de la aplicación, un reloj, un calendario etc. Ya los pondremos. Verdad que ese color gris de la pantalla no te gusta? Pues ha cambiarlo. Clica Salir y vuelve a diseño. Clica sobre la Form, vete al Inspector/Propiedades/Color, desplega el menú de la derecha y elige el color que más te agrade de esa lista, este color aparecerá en tiempo de diseño y también en tiempo de ejecución. Que no te gusta ninguno? Vaya problema. Clica dos veces sobre el nombre de ese color y te aparecerá una paleta de colores, clicas sobre Definir colores Personalizados, te buscas uno, Agregar a colores Personalizados/Aceptar y ya está. Esta tarea es igual a la que realizas con cualquier programa de diseño gráfico. Hasta ahora te he venido diciendo "guarda todo y ejecuta", esto lo digo porque vamos sobre seguro, ya conocemos de sobra lo que va a pasar, en realidad acostúmbrate a hacerlo a la inversa porque si llegara a ocurrir algo (sobre todo en aplicaciones más complejas) que dañara irremediablemente el proyecto, tú cerrarías Delphi y volverías a abrir el proyecto sin los cambios que lo dañaron. Todos los errores los decteta el compilador antes de ejecutar el programa y por lo tanto, no se realiza la ejecución. Nosotros hasta ahora no hemos compilado nada, si no que hemos arrancado directamente el programa, Delphi lo ha compilado y ejecutado por sí solo. En la siguiente lección vamos a hablar y trabajar con el compilador, cometeremos a propósito algunos errores y veremos sus reacciones. Un programador avanzado compila su código prácticamente cada vez que escribe una línea del mismo, porque si has cometido un error ya Delphi te lo avisa y te pones a solucionarlo en ese mismo momento, en cambio si has escrito mucho código sin compilar y tienes diez errores es un lío tremendo. Bien, volviendo al ruedo. Tenemos una Form, dos Label (una con Caption y otra sin el) y dos Button, la ventana está maximi zada, tiene un Caption escrito por nosotros y un color también elegido por nos. Lo ejecutamos y vemos que todos los componentes estan desalineados y puestos de cualquier manera. Así que ¡al curro!. Cuando tu seleccionas un componente sobre la Form verás que aparece una herramienta alrededor del mismo, esta además de indicarnos que es el componente seleccionado, nos permite modificar la posición y el tamaño del componente en cuestión. No es la única manera de realizar estas modificaciones, las veremos todas, pero empecemos por esta. Programa abierto en fase de diseño. Selecciona un botón. Ahora arrástralo con el ratón y déjalo donde quieras. Así puedes repetir la tarea con el otro y con la Label. Claro hay una Label que no verás porque no tiene Caption, fácil vas al inspector y le pones un Caption provisorio como AAAAAAAAAAAAAAAAAAAAAAAAAA, ¿pero, si no la veo, como la selecciono?. Te vas al Inspector y desplegas la lista que hay arriba y verás que aparecen los nombres de todos los componentes que estás usando hasta este momento. Seleccionas Label1 y verás que aparece una pequeña herramienta en la Form indicándote donde se encuentra esta. Pero eso no importa tu te vas al Caption y pones lo que te guste para que quede visble. Ya tienes los cuatro componentes visibles. Por favor dales una ubicación armoniosa. Maximiza la Form (que es como apare- cerá en ejecución) y distribuye todo según tu gusto. Un orden lógico para los botones es que el Cerrar esté abajo a la derecha y el otro lo pondríamos abajo a la izquierda. La grilla (los puntitos) de la Form nos son de mucha ayuda para esta tarea pero la precisión final se la vamos a dar a estos botones con una propiedad. Con la tecla mayúscula presionada, clica sobre un botón y sin soltarla sobre el otro, ahora verás que la herramienta los envuelve a los dos Button y ha quedado de color grisáceo, eso quiere decir que cada propiedad que cambiemos en el Inspector, la estamos cambiando para los dos al mismo tiempo. Pero como tenemos la Form maximizada no vemos el Inspector. Solución: una vez seleccionados los botones presiona Intro y aparecerá el Inspector. Para hacer aparecer el Inspector de Objetos cuando este está detrás de la Form o simplemente lo hemos cerrado hay tres métodos: Uno seleccionar un componente y clicar Intro. Dos: Menú View/Object Inspector. Tres clicar F11( atento a este último, controla en la ventana superior a que componente está apuntando). Pruébalos todos. Continuando, aquella lista de arriba que habías desplegado aparece en blanco (no puede nombrar dos componentes a la vez) y la cantidad de propiedades se han reducido a un poco más de la mitad (solo nos muestra las propiedades que tienen en común). Bien, busca la propiedad Top y en la ventana de la derecha escribe 30 y pica Intro, los botones se han ido para arriba los dos a 30 pixels del borde superior. La propiedad Top es eso, la distancia que separa al componente del borde superior, ve aumentando el número, picando siempre Intro e irán bajando. También existe la propiedad Left que funciona exacta- mente igual pero distanciado al componente desde el borde izquierdo de la Form. Pruébala poniendo algún número en la ventana de la derecha. Para deseleccionar los Buttons, clica el ratón sobre cualquier superficie libre de la Form. Otra forma de mover componentes (ya hemos visto dos) es con el teclado, esta puede ser más lenta pero no menos efectiva. Selecciona un Button y con la tecla Ctrl siempre apretada clica flecha arriba/abajo/izq/der, verás que el componente se mueve en el sentido de la flecha. Quieres que se mueva más rápido?, además de mantener Ctrl mantén Mayúsculas apretada y clica sobre las flechas, ahora los Buttons se mueven a pasos más largos. Resumiendo posición de un componente: esta propiedad puede ajustarse en tiempo de diseño de tres maneras diferentes. Arrastrando el componente con el ratón. Variando la Propiedad Left (para movimiento horizontal) y la Propiedad Top (para vertical) en el Inspector de Objetos. Con la combinación de las teclas Ctrl+arrow o Ctrl+Mayúsculas+Arrow. En tu tiempo libre coloca Buttons sobre una Form y practica las tres para tenerlas realmente incorporadas, todas te serán de muchísima utilidad. Tamaño del componente. Normalmente la medida por defecto de un Button es 75 de ancho y 25 de alto, esto lo puedes ver si seleccionas un Button y vas al Inspector/Propiedades/Height (altura) y luego si sigues un poquito más abajo y vas a Width (ancho). Creo que está todo dicho, si cambias los valores a esas ventanas, modificas el ancho y el alto del Button. Haz unas pruebas y el resultado lo observarás en tiempo de diseño. Segunda forma de hacerlo: seleccionas el Button y pones el cursor del ratón sobre uno de los lados de la herramienta que lo envuelve (el cursor se transformará en una flecha de dos puntas), clica y arrastra y el componente irá creciendo en ese sentido (alto o ancho) hasta que sueltes el ratón. Prueba este método con los dos Buttons estirándolos tanto vertical como horizontal- mente. Tercer método: selecciona un Button y manteniendo la tecla Mayúsculas presionada, presiona flecha arriba/abajo/derecha/iz- quierda. Pruébalo también con los dos Buttons e incluso con la Label que tienes visible, trata que al final de esta práctica te queden los dos Buttons de tamaño muy diferente, así trabajaremos en el próximo ejemplo. Esto de que existan tres métodos para realizar una misma función de diseño no es puro capricho (por eso hay que practicar los tres), si no que el método ratón se aplica cuando hay que hacer un desplazamiento rápido y sin mucha precisión, el método teclas es más lento pero más preciso, eso sí solo a ojo y finalmente el método de colocar un valor en su Propiedad Width o Heigth es preciso cien por cien si nos proponemos que todos los Buttons (en este caso) sean iguales. Tanto la posición como el tamaño (y tantos otros), también pueden modificarse en tiempo de ejecución. Más adelante lo veremos. Si yo tuviera diez Buttons todos de diferente tamaño y quisiera dejarlos a todos con el mismo Width y el mismo Heigth, hacerlo uno por uno sería un tedio. Así que vamos a proceder como en el ejemplo del Top, selecionamos los dos Buttons con la tecla Mayúsculas presionada y nos vamos al Inspector, allí en Heigth pondremos 35 y en Width 80, picamos Intro y ya está, lo mismo hubiera ocurrido si hubiésemos seleccionado diez Buttons o si junto con los Buttons también hubiésemos seleccionado la Label. Ejecuta tu aplicación, obsérvala con detenimiento en tiempo de ejecución y quizás se te ocurra hacerle algo por tu cuenta, (cambiar Captions, Names, colores etc.). Antes de intentar nada guárdala como está hasta aquí y ya sabes si pasa algo cierras Delphi, lo abres y la recuperas. Cerrar un proyecto sin cerrar Delphi: menú File/Close All. File/Exit cierra aplicación y a Delphi. Abrir un proyecto: metódo uno. Vas a la carpeta donde lo has guardado y haces doble clic sobre Leccion1 archivo de tipo Aplicación (ojo que hay varios archivos que tomaron este nombre), el archivo ya ejecuta Delphi. Método dos: File/Reopen y te abre una lista de los últimos proyectos abiertos, busca el que quieras. Método tres: el típico File/Open Project y a buscar tu carpeta en la ventana que se te abre. Hasta aquí hemos visto los componentes Button y Label, las propiedades Caption, Name, Top, Left, Color, Heigth, Width y WindowsState. Varias maneras de realizar una misma operación y dos líneas de código. Si todo te ha salido bien, "juega" con esta. Cambia propiedades e incluso el texto del evento OnClick del botón. Si haces una nueva aplicación o intentas repetir esta de memoria, no te olvides siempre de crear una carpeta donde guardar lo hecho, porque si no vas a acumular mucho archivo repetido que cuando lo quieras limpiar no te recordarás donde está. En la próxima veremos los componentes Panel y Memo y realizaremos una pequeña aplicación que trabaje con texto tecleado por el usuario. Entre otras propiedades veremos Align, Alignment, BevelInner, BevelOuter, BevelWidth, Anchors, BorderStyle y Font. Veremos un Evento con varias líneas de código y modificaremos propiedades en tiempo de ejecución. CONSEJOS ÚTILES Para mandar ese trozo de código que te provoca problemas puedes copiarlo desde la Unit arrastrando el ratón como si se tratara de un archivo de texto. Conserva en un folio siempre a mano todas las teclas, o combinaciones de teclas que te permiten trabajar más agilmente que con el ratón, al menos hasta que las memorices. En el foro de dudas puedes consultar las mismas así como hacernos saber tus críticas sobre este curso, malas, buenas, no importa, estamos abiertos a todo. Ariel Bustamante para Trucomania. Acontinuación el código fuente de lo realizado:
Para los que aún non encuentran el resto de lecciones (hay que tener valor...) las teneis en: http://www.q3.nu/trucomania/indicetrucos.cgi?esp#Guias No obstante, es mucho más cómodo que os bajeis el TMania explorer, que es un programa para tener todo Trucomania en tu disco duro (entre otras muchas cosas, podreis encontrar ahí el curso de Delphi), que lo teneis en: http://www.q3.nu/trucomania/explorer.htm |