Creación de Componentes I: Básico

No voy a empezar por ver el funcionamiento de los componentes con los que viene Delphi para PHP, que creo yo, deben funcionar como debe ser. Además cualquiera que haya utilizado Visual Basic, Visual NET o Delphi ya intuye como utilizarlo, ya que es exactamente igual a estos IDEs.

Lo que pasa es que me parece inconcebible que sólo se pueda trabajar con los componentes con que viene el IDE, que son por demás, insuficientes. Definitivamente se tienen que crear más componentes.

Digamos que me gusta un framework javascript determinado como alguna librería para tooltips, o una librería para hacer reportes PDF o Excel, etc. Ahora, deseo implementarlo como un componente (claro que podría hacerlo directamente editando el código PHP, pero ya no aprovecharía el hecho de hacerlo visual, lo cual desvirtua el uso del IDE), es mejor hacerlo legalmente, creando un componente nuevo que se pueda ver en la Paleta de Herramientas.

Tal vez pueda llegar a hacer un componente utilizando la librería javascript ExtJS como se puede ver en este demo:

Demostración de la futura integración con ExtJS

Antes de empezar, sólo aclarar que la ubicación de los archivos tiene que ser en el mismo directorio donde se encuentra el framework VCL, no lo he podido ubicar en otro lado. Ahora sí, empecemos:

• En la carpeta del framework VCL (C:\Archivos de Programa\CodeGear\Delphi for PHP\2.0\vcl\), crear una sub-carpeta para los archivos del paquete que se va a crear (un paquete es un archivo que hace referencia a varios controles). Por ejemplo la carpeta miscontroles.
  
• Utilizando el IDE, crear un nuevo paquete y guárdelo dentro de la carpeta que se acaba de crear. Por ejemplo miscontroles.package.php.
  

• Establezca el parámetro de la función setPackageTitle con el texto que quiere que aparezca en el manejador de paquetes.
• Establezca los parámetros de la función registerComponents con el título que quiere que aparezca en la paleta, el array de nombres de componentes y el archivo donde se encuentra dichos componentes.

• dd
  

Ajax

Vamos a ver ahora cómo se implementa Ajax en Delphi para PHP.

Hay que entender que Delphi para PHP no trata a los componentes como elementos HTML, por lo tanto para cambiar algún elemento, no se hace utilizando la propiedad innerHTML como se hacía normalmente con Ajax, sino que, deben establecerse las propiedades de los componentes directamente.

Delphi para PHP utiliza internamente la librería Xajax.

Sigamos ahora los pasos para implementar Ajax:

• Establecer la propiedad UseAjax de la página a true.
• Poner un botón sobre la página (formulario).
• Poner una etiqueta sobre la página.

• Seleccionamos el botón y hacemos doble click sobre el para crear el método asociado al evento OnClick (Button1Click). Ingresamos el siguiente código para cambiar el caption y el color de fondo del Label:

$this->Label1->Caption="Hola desde Ajax!!";
$this->Label1->Color="#".dechex(rand(0,0xFFFFFF));

• Teniendo el botón seleccionado, hacemos doble click en el valor de la propiedad OnClick (Button1JSClick) de la pestaña javascript para que nos cree el método asociado a este evento. Y escribimos el siguiente código que llama a la función ajax:
  

echo $this->Button1->ajaxCall("Button1Click");

• En la parte de código de javascript escribimos return false para evitar que se haga submit al formulario.

Ejecute el programa y vea como funciona.

Aplicación: "Hola Mundo"

Yo siempre pruebo un IDE por la cantidad de código que hay que escribir en un programa "Hola Mundo". Veamos como se hace:

• Crear una nueva Aplicación.
• Crear un nuevo Formulario.
• Poner un botón (Button) en el formulario.
  

• Hacer doble click sobre el botón, nos creará un método asociado al evento Click para PHP.

• Ahora ejecutamos la página; al hacer click en el botón se hará un submit, y en la siguiente página nos aparecerá el mensaje "Hola Mundo".

Como ven, sólo he escrito una sóla línea de código, y es código es PHP puro.

Pero la pregunta lógica sería, como hago para que al hacer click en el botón me aparezca el mensaje, digamos un alert de javascript, con el texto "Hola Mundo".

Primero, como sabemos, un button, por defecto hace submit; así que debemos establecer el valor de la propiedad ButtonType a btNormal, para que no haga submit.

Luego para implementar un evento javascript, seleccionamos la pestaña Javascript, de la ventana de propiedades y hacemos doble click en el valor de la propiedad OnClick. Luego escribimos el alert debajo del código que dice Añada su código javascript aquí. Más fácil, no hay.

Ejecute la aplicación y verá que funciona.

Como vemos, también se ha escrito sólo una línea de código.

Comentario

Lo que me llamó bastante la atención es que realmente no hay nada del otro mundo, se utiliza el mismo código PHP (con su propio modelo de clases, sus funciones y su sintaxis) y javascript, mientras que otros frameworks se tiene que aprender una nueva sintaxis.

Enlaces

• Site del framework VCL: http://www.qadram.com/vcl4php/index.php.
• Site de Delphi para PHP: http://www.codegear.com/products/delphi/php.
• Foro de Delphi para PHP: http://forums.delphi-php.net.
• Wiki: http://www.qadram.com/vcl4php/docwiki/index.php/Main_Page.
  
• Un tutorial sobre el framework ExtJS que estoy haciendo: http://extjsref.blogspot.com/

Videos Demostrativos (Screencast)

• Demostración del uso del componente PEARDataGrid.
• Utilización de Ajax optimizado.
• Ejemplo del componente de validación de formulario.
• Demostración de la futura integración con ExtJS.
  

Plan de Trabajo Futuro de VCL para PHP

El proyecto VCL para PHP tiene programado realizar los siguientes cambios:

• Integración con Zend Framework adicionando más componentes de esta colección.
• Terminar el conjunto de componentes ExtJS.
• Componentes que permitan la presentación de informes similar a Delphi de Windows: QuickReports o FastReport.
• Componente JPGraph que permita realizar gráficos estadísticos.
• Añadir componentes JQuery.

Esperemos que estos cambios y otros que tienen planeados se implementen, por lo pronto parece que lleva un poco de retraso.

Para más detalla puede consultar: VCL for PHP Roadmap.
Aquí hay demo de cómo sería utilizar la librería ExtJS: ExtJS Integration.

IDE

El IDE del Delphi para PHP es intuitivo, tiene la estructura típica de un entorno de desarrollo Drag a Drop como Delphi o Visual Basic.

Como se ve, no hay nada del otro mundo, tiene lo básico:

• Un Editor de Formulario.
• Un Editor de Código, muy malo por cierto.
  
• Una Paleta de herramientas.
• Un Gestor de Proyectos.
• Una zona para Mensajes para Errores, Depuración, Valores de variables, etc.
• Una zona que muestra la estructura del archivo editado.
• Un navegador de archivos.
• Una pestaña de Propiedades.
• Una pestaña de Eventos PHP.
• Una pestaña de Eventos Javascript.
• Ayuda contextual.

Algo adicional que tiene:

• Conexión con bases de datos, lo que permite arrastrar bases de datos y tablas directamente sobre el formulario, como el Delphi. También se puede ejecutar consultas.
• Algo muy particular y que forma parte de este nuevo paradigma de programación es una zona debajo del editor de formularios, donde aparece el código html que genera el componente actualmente seleccionado, este código no es modificable, sólo es referencial para saber cómo se va a mostrar en la página html.

Hasta aquí no hay nada del otro mundo.

En Delphi para PHP 2 hay hasta tres formas de diseñar un formulario:

Diseño Normal de Formulario (Form Designer).

Es el diseño por defecto y que está presente desde la primera versión.

En este diseño los componentes son arrastrados, se les da una posición y un tamaño, y se pueden establecer las propiedades de la página.

Se muestran dos pestañas:

• Código: Donde se escribe el código PHP y javascript asociado a los eventos de los componentes, u otro código que pudiera implementarse.
• Diseño: Muestra la posición, el tamaño y la apariencia de los elementos, pudiendo interactuar con ellos.

Diseño de Formulario Plantilla (Template Form Designer)

En este diseño, los componentes se combinan con elementos html, e incluso pueden estar dentro de elementos html, si el elemento es un contenedor, porsupuesto.

A los componentes no se les puede establecer las propiedades top ni left, a los elementos html se les puede establecer las propiedades pero sólo de html. La página viene a ser un elemento html más.

Se muestran una pestaña adicional (Plantilla - Template) que es un esquema del código html, y puede ser modificado. Los componentes se muestran con un tag especial.

Este diseño puede ser utilizado para realizar combinaciones con elementos html que pudieran no existir como componentes, como por ejemplo tablas, zonas de edición, tabuladores; y también podría servir para hacer ciertos tipos de distribuciones como las tablas que tienen más flexibilidad que los componentes.

Diseñador HTML (HTML Designer)

Permite realizar el diseño HTML, sin más. No se pueden insertar componentes VCL.

Tienes dos pestañas:

• Código: Que es el código HTML generado.
• Design: Que nos permite diseñar la página visualmente.