Es muy común que cuando desarrollamos un sitio web, usemos elementos comunes a todas las páginas del mismo. Cuando hablamos de esto seguramente se nos viene a la mente el uso de un encabezado (Header) es cual, como es lógico, normalmente... ¡es siempre es el mismo!, y lo utilizamos es todas y cada una de las pantallas de nuestra aplicación web.
La sola idea de agregar siempre “lo mismo” resulta engorrosa. Por eso, en esta oportunidad veremos como Delphi para PHP hace fácil la reutilización de un mismo encabezado mediante el mecanismo de herencia.
Ahora sí, ya planteada esta simple, pero muy normal situación, es momento de ponernos manos a la obra para solucionarla:
Paso 1: Comenzando
En este escenario crearemos un proyecto e insertaremos un componente de tipo Panel (el cual se convertirá en nuestra cabecera o header) :
Paso 2: Creando nuestro Header
Quitaremos lo escrito en la propiedad Caption, y daremos a nuestro Panel la ubicación y tamaño adecuado, acorde a nuestras necesidades:
Paso 3: Ajustando Propiedades
Aquí vamos a hacer 3 cosas:
- La primera es modificar la propiedad Name de nuestra Unit, a la que le pondremos My_Header (Veremos luego que vamos a hacer con este nombre).
- La segunda es poner la propiedad IsMaster en True.
- La tercera es un cambio de tamaño o resize del formulario, con el objetivo de que este se ajuste al tamaño del Panel. Esto lo podemos hacer tanto desde las propiedades del mismo como desde el IDE:
Paso 4: Agregando la Imagen
Utilizando la propiedad Background del Panel, escribiremos la ruta de la imagen que usaremos en nuestro encabezado, con lo cual, estaría terminada la labor más compleja:
Ahora solo queda grabar esa Unit a la que le pondremos Uheader.php, la cual luego utilizaremos.
Paso 5: Nueva Pagina
Ahora en el mismo proyecto crearemos una de las tantas páginas (Units) de nuestra aplicación web. A modo de ejemplo la página que se muestra tiene un menú típico del componente MainMenu:
Paso 6: Aplicando el Header
Si analizaron lo que se ve en el diseño de la Unit anterior pueden observar que se ha dejado un espacio en blanco el la parte superior, esto es efectivamente con el objetivo poner nuestro Header. Para esto, presionaremos las teclas ALT F11 o desde el Menú “File” -> “Use Unit” y agregaremos la unit Uheader.php, la cual agregará esta línea en el código fuente de pagina:
require_once("Uheader.php");
Esto quiere decir que en nuestra Unit actual, vamos a hacer uso de Uheader.php
Ahora, ya en el código de nuestro formulario, realizaremos un simple cambio. Donde dice:
class Unit2 extends Page
lo cambiaremos por:
class Unit2 extends My_Header
O sea, que estaremos heredando del formulario que denominamos My_Header.
Con esto damos por terminada toda la cuestión, dado que presionando F9 y ejecutando nuestra creación, veremos hecha realidad nuestra necesidad:
Como conclusión podemos denotar la facilidad que nos puede brindar una simple herencia a nivel diseño, con lo cual podemos reutilizar una y otra vez un mismo elemento como lo vemos en este caso.
Marcelo D. Alegre
Desarrollador
Connect with Us