Herencia aplicada al diseño

By: Marcelo Damián Alegre

Abstract: Utilizar la herencia como método para facilitar el diseño

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) :

Hide image

    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:

Hide image

    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:

Hide image

    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:

Hide image

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:

Hide image

    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:

Hide image

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

Server Response from: ETNASC04