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

TFrameStand: FireMonkey TFrame a la enésima potencia

Este post está dedicado a TFrameStand: un componente FireMonkey que he desarrollado
en los últimos meses (en mi tiempo libre). En primer lugar, cómo obtenerlo: el
componente (y demostraciones) están disponibles en GitHub, y se pueden
utilizar libremente. En el último número (45-46) de Blaise Pascal  encontrará mi
artículo que explica los fundamentos y muestra de las demos incluidas
actualmente en el repositorio. Nota: gran 
parte del código ha sido desarrollado con XE8, últimamente estoy usando
la versión 10 Seattle (por lo que no se ha probado en las versiones anteriores,
aunque también debe ser compatible con XE7).

Introducción

Especialmente durante el
desarrollo de aplicaciones móviles, muchos desarrolladores simplemente añaden
una gran cantidad de controles al formulario principal del proyecto (que a
menudo es el único form disponible). Esto conduce rápidamente a problemas de mantenimiento
del proyecto, porque este enfoque no fomenta la reutilización de componentes.

El concepto de TFrame se
introdujo hace mucho tiempo (incluso en el VCL) para dar al 

desarrollador la
capacidad de unir algunos elementos de la interfaz de usuario (componentes) y
su comportamiento (código) en una sola unidad, reutilizable. Esto es bueno
porque se puede dividir su uso en porciones que se pueden diseñar de forma
individual y posiblemente re-utilizarlas en otras aplicaciones!. Simplemente
poniendo una instancia de un 

TFrame en un objeto
contenedor (puede ser un form, una página de un TTabControl o

 cualquier otro componente visual ... FMX).

Un ejemplo típico en el
que un acercamiento a TFrame puede simplificar mucho es cuando se puede dividir
su aplicación móvil en un conjunto de "vistas" para mostrar al
usuario en base a la situación de la solicitud. A continuación, puede
implementar las funciones de aplicación de forma independiente, mostrando esto
o aquello "vista" (TFrame) dependiendo del estado de la propia
aplicación (como lo haría con un TTabControl, usando una 

página diferente para
cada "punto de vista").

Estos "pie" se
definen mediante una características de FireMonkey muy básica: 

los estilos!

Cada componente tiene
una propiedad TFrameStand un manual de estilo, una referencia que puede ser
utilizada para definir la colección de soporte disponible. Junto con unas
simples convenciones de nomenclatura serán la base del funcionamiento del
componente

 (por ejemplo, para definir el punto exacto
donde usted quiere que su TFrame está incrustado en el stand se debe dar un
nombre específico "contenedor" para el componente visual que debe
actuar como matriz de TFrame).

TFrameStand que nace en
este contexto le permite ir un poco más allá, ya que le da la oportunidad de
tener un nivel intermedio entre el TFrame y el objeto contenedor. Esta capa
intermedia (el"pie", de ahora en adelante) puede ser visto como la
parte visual (UI) que no está estrictamente vinculada a los efectos del TFrame
que está mostrando, sino más bien está ligado a la forma en que la TFrame se
presenta al usuario.

Stand and TFrames

Uno de los aspectos clave de TFrameStand es lo que le permite volver a
utilizar un stand con diferentes clases TFrame descendientes y también para
hacer lo contrario, es decir, para mostrar la misma clase TFrame utilizando
diferentes stands. En ambos casos, esto permite obtener un buen nivel
de   coherencia visual en su aplicación (y / o entre diferentes
aplicaciones), en beneficio de la experiencia  del usuario.

Mismo stand, varios TFrame

Por ejemplo, imagine que tiene un stand que implementa un
"camino" para mostrar un TFrame, por ejemplo, con un efecto LightBox:
a continuación, será capaz de mostrar diferentes contenidos (TFrame diferentes
instancias) utilizando el mismo efecto visual (utilizando una "caja de luz
"). Las ventajas son evidentes, por ejemplo, es necesario aplicar el
efecto visual (stand / soporte) una sola vez y luego se puede volver a utilizar
y, al hacerlo, cualquier cambio (mejora) en el stand afectará a todas las
partes de laaplicación que lo utiliza (consistencia!).

TFrame iguales, diferentes stands

Imagine que tiene una serie de soportes que ayudan al usuario a reconocer
el  contexto. Por ejemplo, usted puede tener un soporte que indica claramente
que el contenido está relacionado con una notificación de error, otro soporte
para situaciones de atención (advertencia) y otra acción del usuario cuando se requiere
(confirmaciones, opciones , y así sucesivamente). Si, por ejemplo, usted tiene
una TFrame específico para llevar a cabo ciertas tareas y tiene que mostrar los
resultados al usuario, es posible que desee que se muestre al usuario el uso de
diferentes significados (número de stand!).

Tenga en cuenta que, puesto una vez implementado para todas las opciones,
puede  usarlos con cualquier TFrame 
y se puede elegir de vez en cuando, que opción usar.

En una aplicación real, muchas situaciones caen en estas dos categorías.

Funcionalidad

Hasta ahora, hemos hablado de algunas de las ventajas de este enfoque, que
son: descomponer la complejidad de una aplicación utilizando el TFrame y el uso
de los componentes TFrameStand que descomponen de alguna manera la forma en que  se
muestra el TFrame con respecto al contenido específico.

Hay algunos otros beneficios al utilizar TFrameStand, aquí hay una lista de
los

principales:

1.  Puede trabajar
en tiempo de diseño ya 
que es el TFrame que el soporte;

2.  Hay un soporte
integrado para la realización de una tarea en segundo plano (utilizando
la biblioteca de programación en paralelo internamente) y al mismo tiempo
mostrar una interfaz gráfica adecuada (stand + TFrame) al usuario; Una vez
finalizada la operación, esta "forma de espera" se puede ocultar
fácilmente (con un poco de programación asincrónica muy simplificada);

3.     TFrameStand es capaz
de iniciar automáticamente

4.       un poco de animación (objetos
TAnimation y descendientes) que      consten en la definición de base o en la
instancia TFrame; Se admiten      actualmente dos eventos: OnShow y OnHide
(esto significa que se puede      utilizar transiciones animadas en el
proceso para mostrar y ocultar las      acciones fácilmente y sin tener que
escribir código);

5.  Hay un (simple) mecanismo
de inyección de dependencia que permite obtener fácilmente una referencia a
objetos en su contexto, incluso en el código de la aplicación
específica para cada TFrame para mostrar.

6.  No es una forma de
representar comportamientos compartidos (piezas de código compartido) a
través de diferentes combinaciones de soporte / TFrame.

7.  Hay una manera
(altamente personalizable) para reemplazar la clase
TFrame utilizada en tiempo de ejecución; Esto significa que
usted puede desarrollar una clase considerando TFrame  "padre" y luego tener que ejecutar
una instancia de una clase descendiente, seleccionando sobre la base de un
algoritmo completamente personalizable (por ejemplo, puede decidir utilizar
clases descendientes que difieren dependiendo de la Plataforma  de
ejecución);

Estos

son los videos con la demo en funcionamiento (en Win32):

Autor: Andrea Magni y Paolo Rossi

Fuente: blog.delphiedintorni.it

Juego de ajedrez

Este es un nuevo juego de ajedrez avanzado programado en Delphi que incorpora un algoritmo de cálculo de posiciones bastante bueno, aún en los niveles de juego básicos el programa tiene bastante fuerza.

Permite seleccionar el bando con el quieres jugar, tiene diferentes niveles de profundidad de cálculo de posiciones, posee una biblioteca de aperturas muy básica pero creo que suficiente para lo que pretende el programa y un diseño de tablero modificable por el usuario.

Autor: Montero-Ribas

Licencia: GNU GPL



Descargar codigo fuente



Relacionado:

http://delphimagic.blogspot.com/2008/11/ajedrez-con-delphi-chess-with-delphi.html

Ajedrez con Delphi - Chess with Delphi

Para los apasionados del fascinante juego del ajedrez, aquí tenéis un componente que os permitirá programarlo. El software cumple por supuesto las reglas básicas del juego y además contempla el enroque, comer al paso, etc...

También permite ver el tablero desde el punto de vista del oponente, mostrar / ocultar coordenadas y cambiar el diseño de las piezas.

Otra de las buenas características que tiene, es que se puede modificar la profundidad de búsqueda de la mejor jugada con el fin de hacerlo más "inteligente".

Para descargarlo pulsar en el siguiente enlace (incluye el código fuente)



El archivo ejecutable está en la carpeta EXAMPLE->PLAYER.EXE

Rutinas para utilizar ficheros y carpetas con Firemonkey

A continuación les relaciono una serie de rutinas basadas en Firemonkey, asociadas con la utilización de ficheros y carpetas.

Realmente hay muchas más, pero como lo que quiero es que esta página les pueda ser útil, sólamente he puesto las que mas se usan cuando se programa.

Algunas realmente simplifican lo que antes teníamos en la VCL, como por ejemplo el obtener los ficheros de una carpeta, ya que con Firemonkey se puede hacer con una única instrucción:  TDirectory.GetFiles



Recordar que hay que añadir en el apartado "uses" la unit System.IOUtils 



- Obtener los ficheros de una carpeta

VAR
  DirList: TStringDynArray;
  S:String;
BEGIN

    DirList := TDirectory.GetFiles(DirPath, '*.jpg');
    IF Length(DirList) = 0 THEN
    BEGIN
    // showmessage('No hay ficheros en ' + DirPath)
    END
    ELSE // Ficheros encontrados
    BEGIN
      FOR S IN DirList DO
        BEGIN
             listbox1.items.add(S);
        END;
    END;
END;

- Obtener el tamaño de un fichero


FilesizeByName esta en la unit  IDGlobalProtocols

Tamano := FilesizeByName('c:\fichero.txt');

- Obtener la fecha de creación de un fichero

fecha := DatetimeToStr(Tfile.GetCreationTime('c:\fichero.txt'));

- Obtener la fecha del último acceso

fecha := DatetimeToStr(Tfile.GetLastAccessTime('c:\fichero.txt'));

- Obtener la fecha de la última modificación

fecha := DatetimeToStr(Tfile.GetLastWriteTime('c:\fichero.txt'));

- Guardar el contenido de un fichero en un string

var
s:string;
S := Tfile.ReadAllText('c:\fichero.txt'));

- Borrar un fichero

Tfile.Delete(TPath.Combine(DirPath, 'fichero.txt'));

- Comprobar que existe un fichero

if tFile.Exists(TPath.Combine(DirPath, 'fichero.txt')) 
then showmessage('Existe') 
else showmessage('NO existe');

- Copiar un fichero

tfile.Copy('c:\origen.jpg','c:\destino.jpg');

- Encriptar y desencriptar un fichero (sólo para Windows)

tfile.Encrypt('c:\fich.jpg');
tfile.Decrypt('c:\fich.jpg');

- Añadir texto a un fichero existente

texto:='texto que se quiere añadir';
TFile.AppendAllText('c:\fichero.txt',texto,tEncoding.utf8);

- Crear una carpeta

TDirectory.CreateDirectory(DirTMP);

- Comprobar que existe una carpeta

  IF TDirectory.Exists(DirTMP) THEN
  BEGIN
    showmessage('existe la carpeta');
  END;

- Copiar el contenido de una carpeta en otra

   TDirectory.Copy('c:\carpetaOrigen','c:\carpetaDestino')

- Borrar recursivamente el contenido de una carpeta

  BorrarRecursivamente:=true;
  tDirectory.Delete('c:\carpetaABorrar',BorrarRecursivamente);

- Obtener la fecha de creación de una carpeta

fecha := DatetimeToStr(TDirectory.GetCreationTime('c:\documentos'));

- Obtener la fecha del último acceso a una carpeta

fecha := DatetimeToStr(TDirectory.GetLastAccessTime('c:\documentos'));

- Obtener la fecha de la última modificación de una carpeta

fecha := DatetimeToStr(TDirectory.GetLastWriteTime('c:\documentos'));

Juego del Tetris

 

Para los aficionados a los videojuegos, aquí les muestro el famoso juego del Tetris realizado con Delphi 10.4.1 usando Firemonkey, lo que hace que se pueda ejecutar en Windows, Android y IOS.

El nombre «tetris» deriva del étimo griego «tetra», que significa «cuatro», y hace referencia a la cantidad de cuadros que componen las piezas.
Su autor es Alekséi Pázhitnov

ingeniero informático ruso.
Tetris comienza a ganar popularidad cuando Vadim Gerasimov, un joven de dieciséis años que trabajaba en la Academia de Ciencias, portó el juego a IBM PC. Desde ahí se distribuye gratuitamente a Hungría, donde es programado para Apple II y Commodore 64 por programadores húngaros.
Tetris ha sido históricamente uno de los videojuegos más versionados y es, junto a las Torres de Hanói, el predilecto por los programadores noveles de juegos. Lucharon por robarse la idea y licenciarla Atari y Nintendo, lográndolo finalmente este último gracias a Henk Rogers. Tetris fue el juego que acompañaría a su novedosa consola portátil Game Boy

en su debut, lo que popularizó tanto Tetris como la consola por todo el mundo.
En 1991, Alekséi Pázhitnov emigra a Estados Unidos y, cinco años después, en 1996 funda su propia compañía, Tetris Company, junto con Henk Rogers y se apropia de los derechos de autor.
 

Volviendo al programa en Delphi, este se desarrolló durante una transmisión en vivo en Twitch el 11 y 18 de abril de 2021. 

Si no tiene Delphi para compilar y probar el juego, puede descargar el programa para:

• Windows 10 de 32 bits
• Windows 10 de 64 bits
• Mac OS
• Android de 32 bits
• Android de 64 bits

Para ver cómo se ha desarrollado este software, puede consultar las reposiciones de las sesiones de codificación en Twitch:

• en Serial Streamer con cientos de horas de codificación de software y videojuegos de la página del proyecto Tetris Like ,
• en VOD en Vimeo ondemande .
  
  
  

  TEMAS PENDIENTES DE PROGRAMAR
  

• administrar la tecla ESC en el escritorio para salir del programa
• administrar la tecla HARDWARE BACK en Android
• administrar la pausa en caso de pérdida de enfoque de la aplicación en tabletas y teléfonos inteligentes
• administrar el botón de pausa en las plataformas de escritorio
  
  El autor de este programa es: Patrick Prémartin (MVP Embarcadero)
  
  Página de descarga: https://github.com/DeveloppeurPascal/TetrisLike