TGmailLabel un ejemplo de componente Firemonkey personalizado

 Por Andrea Magni

Para mi conferencia "estilos FireMonkey" de ITDevCon 2013, me han preparado algunos ejemplos prácticos. Un ejemplo de ello es un nuevo componente visual (derivado de TStyledControl) con un estilo gráfico que imita el aspecto de las etiquetas de Gmail. El ejemplo está destinado a mostrar cómo:

• componer un estilo utilizando el IDE de Delphi;


• crear un nuevo componente derivado de TStyledControl;


• complementar el estilo del componente en los recursos del ejecutable;


• instalar el componente en el IDE de Delphi, de modo que esté disponible en tiempo de diseño.

Es necesario familiarizarse con los nuevos conceptos de diseño (en comparación con el mundo VCL), es relativamente fácil crear un nuevo componente visual que puede ser utilizado en todas las plataformas soportadas actualmente (con Delphi XE5: . Windows, Mac OS, iOS y Android) Las diapositivas preparé para mi presentación en ITDevCon ofrece una breve introducción a FireMonkey, la nueva plataforma de aplicaciones presente en las últimas versiones de Delphi (XE2 -. XE5) Uno de los conceptos básicos es el "estilo": que implementa el aspecto visual de un componente derivado de FM TStyledControl En términos más simples, Los componentes visuales de FireMonkey pueden ser "formas simples" (líneas, rectángulos, formas geométricas, texto ...) o "complejos" (el resultado de la composición de otros objetos). Aquí haremos un estilo de composición uniendo los componentes que producen las características visuales de un componente "complejo".

Marque el estilo visual

Un estilo es en sí mismo es un objeto FM (una instancia de TFmxObject) y su representación textual no es diferente de la utilizada en los archivos .fmx desde el diseñador de formularios IDE, que se utiliza para cargar los objetos en tiempo de ejecución que componen un form FM (de manera similar a lo que sucede con los archivos .dfm de forma VCL).

Visualmente los estilos de edición del IDE nos proporciona una herramienta específica, similar a la del diseñador de formularios, llamado "Diseñador de estilo". Se puede ver haciendo doble clic sobre un componente TStyleBook y junto al Inspector de Objetos y la paleta de componentes, también le permite manipular los elementos de estilo y también  cargar / guardar archivos de estilos  de FireMonkey  .

El IDE de Delphi XE5 abierto el diseñador de estilos

Por desgracia, esta herramienta está todavía sufriendo de algunos problemas y, a veces puede ser un poco "difícil de usar. Para evitar esto, se puede ir a otra ruta y utilizar el diseñador de formularios para componer, cualquier form de "ayuda", a la parte visual del componente. 

El Diseñador de formularios IDE Delphi XE5

Cuando haya terminado, gracias a la compatibilidad del formato utilizado en los estilos y la utilizada en el archivos .fmx de la forma, sólo pide el IDE mostrar el form en modo texto (botón derecho -> "Ver como texto") y copia -pegar nuestra composición del form a un archivo de texto (.style extensión).

La representación textual del form de "apoyo"

Después de hacer algunos cambios simples (como la eliminación de todos los nombres de los componentes que hay), el archivo será perfectamente compatible y podrá ser utilizado como una definición de estilo para nuestro componente.

El estilo, consiguió "limpiar" la representación textual de nuestro diseño

Ahora podemos incluir el contenido del arcivo .style entre los recursos de nuestro ejecutable binario, y hacer uso de ella en tiempo de ejecución; preparar otro archivo de texto con la extensión .rc y solicitar la inclusión del archivo con los nombres que se asignarán a los recursos relacionados. 

El contenido del archivo GMailLabel.rc

Cuando el IDE procese este archivo, se generará un archivo que contiene el recurso .res "GMailLabelstyle" que (gracias a una directiva especial en el archivo de origen del componente) completado se incluirá en el ejecutable.

El código de componente

Una vez preparado el recurso que contiene la definición de estilo que se aplicará al componente, sólo tenemos que crear la clase del componente.

He utilizado el asistente para crear los componentes (IDE de Delphi, del menú Archivo -> Nuevo -> Otros -> archivos de Delphi -> Componentes). NB: El código fuente completo está disponible en el enlace que aparece en la sección Los materiales de este artículo.

Básicamente he creado un componente heredado de TStyledControl  y anulé algunos de los métodos fundamentales para la gestión de estilos, incluyendo 

1. procedimientos ApplyStyle;


2. funcionar GetStyleObject (const Clon: Boolean): TFmxObject; 

que pertenecen a:

1. ejecutar código de conexión entre los elementos de estilo, y los datos del componente (. ej puse la propiedad Text del componente Texto a SI que muestra el valor de la propiedad LabelName);


2. De vuelta, cargué los recursos del ejecutable,  y el estilo de objeto que hay que aplicar al componente;

El archivo entero no es más largo de 180 líneas (incluyendo los vacíos), y el código es muy simple.

Paquete: código y recursos

Una vez creado el componente, podemos crear un nuevo paquete que lo contiene (IDE de Delphi, del menú Archivo -> Nuevo -> Proyectos Delphi -> Package) y seguir estos sencillos pasos:

• añadir la unit del nuevo componente;


• eliminar las dependencias de la VCL que el asistente puede haber establecido;


• Añadimos a empaquetar todas las plataformas para las que queremos poner a disposición del componente;


• Seleccionamos de nuevo la plataforma Win32;


• Clic derecho sobre el nombre del paquete en el Project Manager, clic en Generar;


• Clic derecho sobre el nombre del paquete en el Administrador de proyectos, clic en  Instalar;

Y ya tenemos la confirmación de que nuestro nuevo componente está instalado en el IDE.

Si creamos una nueva aplicación (de escritorio o móvil), y abrimos un formulario, debemos ver aparecer en la paleta de herramientas nuestro nuevo componente.

Recuerde que el componente se registra en la página de la paleta que ha especificado en el asistente para crear el componente (se puede comprobar en el archivo .pas de los valores de los componentes de los parámetros del procedimiento RegisterComponents . Si lo cambiaron, recuerde reinstalar su paquete después de una nueva reconstrucción).

procedure Register;
begin
  RegisterComponents('Andrea', [TGMailLabel]);
end;

El procedimiento Registrar mi componente TGMailLabel 

Recuerde incluir el .style archivo y archivos rc, para que los recursos se compilen cada vez que realice un Build y (gracias a la directiva {$ R} GMailLabel.res  estarán presentes en el archivo .pas) incluido en el ejecutable de la aplicación compilado.

Un componente, 4 plataformas

Tenemos, pues, un nuevo componente visual que puede utilizar tanto en aplicaciones de escritorio FireMonkey (Windows y Mac OS X) que en aplicaciones móviles (Android y iOS). Estas son algunas capturas de pantalla del IDE de las aplicaciones en ejecución:

El form de escritorio con algunos  TGMailLabel, en tiempo de diseño

Como se puede ver en la vista de estructura también se ha aplicado a un componente ShadowEffect1 GMailLabel4: por supuesto, se puede utilizar el componente TGMailLabel al igual que todos los componentes FireMonkey estándar y luego añadir un shadow que se aplicará en tiempo de ejecución (en la siguiente imagen no es visible debido a mi Win XP se ejecuta en máquinas virtuales en mi MacBookPro, pero se puede ver en la captura de pantalla de Mac OS X).

Form FireMonkey en un escritorio, se ejecuta en Windows (Win XP)

Formulario FireMonkey que se ejecuta en Mac OS X (Mavericks)

Form FireMonkey móvil (plataforma Android), en tiempo de diseño

Form FireMonkey móvil (plataforma iOS), en tiempo de diseño

Form FireMonkey  en Samsung S2

FireMonkey en el simulador de iOS

Referencias

Si usted está interesado en escribir componentes FireMonkey, sólo puedo aconsejarle el material de Ray Konopka disponibles on-line, o las últimas dos sesiones CodeRage, "Creación de controles personalizados para la plataforma de aplicaciones de FM" y "la utilización eficaz de controles de lista en Mobile Aplicaciones ".

Conclusiones

Además de ser una herramienta vital con la que FireMonkey permite crear aplicaciones GUI en diferentes plataformas, los estilos pueden ser utilizados para crear componentes personalizados con poco esfuerzo explotando el potencial de la IDE. 

Una vez instalado en el IDE, los componentes pueden ser utilizados en el escritorio y / o móvil sobre cuatro plataformas soportadas actualmente por Delphi XE5.

Materiales

Puede descargar el código fuente completo del ejemplo en el siguiente enlace:

 El código fuente - Enlace a DropBox

Fuente: blog.delphiedintorni.it