Delphi Heaven • Delphi + FireMonkey + Android: diseño de una aplicación móvi

Página 1 de 1

Delphi + FireMonkey + Android: diseño de una aplicación móvi

Publicado: Mié Sep 09, 2026 7:17 pm

por jaoj

Delphi + FireMonkey + Android: diseño de una aplicación móvil

Esta guía recoge el método que utilizo como referencia para desarrollar proyectos Delphi + FireMonkey (FMX) para Android, tomando CAFEBAKS como ejemplo práctico.

El objetivo no consiste únicamente en conseguir que Delphi compile para Android: la aplicación debe parecer diseñada realmente para un dispositivo móvil.

[hr]

1. Delphi + FireMonkey

Para Android se utiliza FireMonkey (FMX) en lugar de VCL.

Código: Seleccionar todo

DELPHI
│
▼
FIREMONKEY
│
┌────────┴────────┐
▼                 ▼
WINDOWS            ANDROID
pruebas rápidas      destino final

Durante el desarrollo:

Se diseña visualmente desde el IDE.
Se prueba rápidamente en Windows.
Se prueba periódicamente en Android real.
El código se reserva principalmente para la lógica.
Cada versión estable se actualiza en GitHub.

[hr]

2. Diseñar pensando en móvil

No se crea una aplicación Windows para reducirla posteriormente.

En Android se priorizan:

Controles táctiles grandes.
🖼 Imágenes e iconos.
Tarjetas gráficas.
Layouts adaptables.
Textos breves.
Navegación sencilla.

[hr]

3. Un formulario, varias vistas

Siempre que resulta razonable se mantiene un único FormMain y se crean las vistas mediante TLayout:

Código: Seleccionar todo

FormMain
│
├── LayoutCafeteria
├── LayoutTienda
├── LayoutStock
├── LayoutResumen
└── LayoutMenuInferior

Cuando se cambia de sección:

Código: Seleccionar todo

Vista activa    -> Visible = True
Otras vistas    -> Visible = False

El usuario percibe diferentes pantallas, aunque Delphi continúa trabajando sobre el mismo formulario.

[hr]

4. Navegación inferior

Una barra inferior permite acceder a las funciones principales:

Código: Seleccionar todo

┌──────────┬──────────┬──────────┐
│    ☕    │    📦    │    🛒    │
│CAFETERÍA │  STOCK   │  TIENDA  │
└──────────┴──────────┴──────────┘

Los controles se diseñan grandes y separados para utilizarlos cómodamente con los dedos.

[hr]

5. La pantalla se construye por piezas

No se utiliza una única imagen para representar toda la pantalla.

Código: Seleccionar todo

FONDO
+
PERSONAJE
+
OBJETOS
+
TEXTOS
+
CONTROLES
=========

PANTALLA

Los recursos permanecen independientes:

Código: Seleccionar todo

images/
├── fondos/
├── personajes/
├── productos/
├── equipamiento/
└── iconos/

Por ejemplo, al aparecer otro cliente únicamente cambia la imagen y el pedido. El escenario permanece igual.

[hr]

6. Tarjetas táctiles

En lugar de depender de botones tradicionales, una acción puede presentarse como:

Código: Seleccionar todo

┌────────────────┐
│       ☕       │
│  CAPPUCCINO    │
│     3,00 €     │
└────────────────┘

En FMX puede construirse mediante:

Código: Seleccionar todo

TRectangle
├── TImage
├── TLabel
└── TLabel

Toda la tarjeta puede responder a OnClick.

También se puede utilizar TSpeedButton estilizado.

[hr]

🖱 7. Diseñar desde el IDE

Siempre que Delphi lo permite se utilizan:

Designer:
TLayout, TRectangle, TImage, TLabel, TGridLayout...

Object Inspector:
Align, Margins, Padding, Visible, Fill, Stroke...

Events:
OnClick, OnChange...

El código se reserva para comprar, vender, calcular, gestionar estados, guardar datos, etc.

[hr]

➡ Continúa en la Parte 2: adaptación a Android, estructura del código, versiones y ejemplo CAFEBAKS.

Re: Delphi + FireMonkey + Android: diseño de una aplicación móvi

Publicado: Mié Sep 09, 2026 7:18 pm

por jaoj

Delphi + FireMonkey + Android — Parte 2

Continuación de la guía de diseño y desarrollo de aplicaciones Android mediante Delphi + FireMonkey.

[hr]

8. Separar interfaz y lógica

La interfaz muestra el estado; las clases gestionan las reglas:

Código: Seleccionar todo

INTERFAZ FMX
Imágenes
Tarjetas
Labels
Layouts
│
▼
LÓGICA
Comprar
Vender
Stock
Clientes
Cálculos
Guardar/cargar

Así se puede modificar posteriormente el diseño sin rehacer la lógica.

[hr]

9. Adaptación a diferentes Android

Se evitan posiciones absolutas:

Código: Seleccionar todo

NO:
X = 40
Y = 720

SÍ:
TLayout
TGridLayout
TGridPanelLayout
Align
Margins
Padding

Por ejemplo:

Código: Seleccionar todo

┌────────────┬────────────┐
│ Espresso   │ C/leche    │
├────────────┼────────────┤
│ Cappuccino │ Chocolate  │
└────────────┴────────────┘

La distribución se adapta a diferentes móviles y tablets.

[hr]

10. Ejemplo de pantalla

Código: Seleccionar todo

┌────────────────────────────┐
│ CAFEBAKS  Día 3    1.245 € │
├────────────────────────────┤
│                            │
│      FONDO CAFETERÍA       │
│           👩               │
│    "Un cappuccino"         │
│                            │
├─────────────┬──────────────┤
│ Espresso    │ C/leche      │
│ Cappuccino  │ Chocolate    │
├─────────────┴──────────────┤
│ ☕ CAFÉ   📦 STOCK  🛒 TIENDA│
└────────────────────────────┘

[hr]

11. Primero funcional, después bonito

No se crea la interfaz gráfica definitiva desde el primer día.

Código: Seleccionar todo

FUNCIONALIDAD
↓
DISEÑO BÁSICO
↓
PRUEBA
↓
FUNCIONA
↓
MEJORA VISUAL
↓
PRUEBA ANDROID
↓
VERSIÓN ESTABLE

Los gráficos provisionales se sustituyen progresivamente cuando la mecánica funciona correctamente.

[hr]

12. Desarrollo por versiones

Cada incremento sigue el mismo ciclo:

Código: Seleccionar todo


1. Nueva funcionalidad
   ↓
2. Diseño FMX
   ↓
3. Prueba Windows
   ↓
4. Prueba Android
   ↓
5. Correcciones
   ↓
6. Versión estable
   ↓
7. Commit + GitHub
   ↓
8. Siguiente función

Cada versión debe quedar ejecutable y funcional.

[hr]

13. Estructura progresiva

Se comienza con lo necesario:

Código: Seleccionar todo

PROYECTO/
├── Proyecto.dpr
├── Proyecto.dproj
├── Main.pas
├── Main.fmx
└── README.md

Cuando aumenta la lógica:

Código: Seleccionar todo

PROYECTO/
├── Main.pas
├── Main.fmx
├── Estado.pas
├── Producto.pas
├── Cliente.pas
├── images/
└── README.md

La arquitectura crece cuando aparece una necesidad real.

[hr]

14. Caso práctico: CAFEBAKS

CAFEBAKS aplica este método a un juego de gestión de cafetería:

Código: Seleccionar todo

Capital
↓
Comprar equipamiento
↓
Comprar stock
↓
Abrir cafetería
↓
Cliente → Pedido → Preparar → Cobrar
↓
Consumir stock
↓
Cerrar jornada
↓
Ingresos - gastos = beneficio
↓
Mejorar negocio
↓
Siguiente día

Sus vistas principales son:

Código: Seleccionar todo

CAFEBAKS
│
┌─────────┼─────────┐
▼         ▼         ▼
CAFETERÍA     STOCK     TIENDA
│
▼
RESUMEN

[hr]

15. Valor para portfolio

El proyecto permite demostrar:

Delphi y Object Pascal.
FireMonkey.
Desarrollo Android.
Diseño móvil adaptable.
POO y gestión de estados.
Persistencia.
Git y GitHub.
Compilación y distribución móvil.

[hr]

Regla de trabajo

Diseñar para móvil → desarrollar → probar en Windows → probar en Android → corregir → documentar → GitHub → continuar.

El objetivo no consiste simplemente en conseguir que Delphi ejecute una aplicación en Android, sino en crear una aplicación que parezca diseñada realmente para Android.

DelphiHeaven / InformatOLI — Desarrollo Delphi documentado paso a paso.