Desarrollo de Apps Móviles Con Delphi

Desarrollo de Apps Móviles con Delphi (iOS y Android) www.R2datatechnology.
com
Tutorial Móvil: Creando una Aplicación

FireMonkey Mobile (iOS and Android)
Este tópico describe cómo crear una aplicación móvil FireMonkey "Hello World" ya sea para la
plataforma de destino iOS o Android.
Antes de empezar
Para desarrollar aplicaciones móviles (iOS y Android) usando RAD Studio, usted
necesita completar algunos pasos importantes de configuración. Este tutorial asume
que usted ya ha completado todos los pasos de configuración necesarios.
Por detalles, vea:
 Tutorial Móvil: Configurando Su Entorno de Desarrollo sobre la Mac (iOS)

 Tutorial Móvil: Configurando Su Entorno de Desarrollo sobre Windows PC
(iOS)
 Tutorial Móvil: Configurando Su Entorno de Desarrollo sobre Windows PC
(Android)
Paso 1: Crear una Nueva Aplicación FireMonkey para

Android o iOS
1. Seleccione File > New > FireMonkey Mobile Application - Delphi:
2. Seleccione Blank Application. El FireMonkey Mobile Form Designer muestra

un nuevo formulario para la plataforma móvil por defecto, Android:
Embarcadero Technologies 25
Desarrollo de Apps Móviles con Delphi (iOS y Android) www.R2datatechnology.com
3. Android: Si desea crear una app Android que se ejecute por defecto sobre el
emulador Android, puede usar el preseleccionado target platform.
Para información acerca de usar un dispositivo Android, vea Configurando Su

Sistema para Detectar Su Dispositivo Android.
4. iOS: Si desea crear una app iOS, abrir el nodo Target Platform en el Project
Manager y doble-click en iOS Simulator:
Paso 2: Colocar Componentes sobre el Formulario Móvil

FireMonkey
El primer paso en crear una aplicación FireMonkey Mobile es diseñar la interface de
usuario; estes es también el primer paso cuando usted apunta a plataformas de
escritorio. Hay muchos componentes reusables disponibles en el IDE para crear
interfaces de usuario.
1. Mover el puntero del ratón sobre la Tool Palette, y expanda la categoría

Standard haciendo click en el ícono mas (+) al lado del nombre de la
categoría.
2. Seleccione el componente TEdit y haga doble-click sobre el TEdit o suéltelo

sobre el FireMonkey Mobile Form Designer.
Una instancia del componente TEdit aparece sobre el formulario. Aquí está una app
Android:
3. Repetir estos pasos, pero ahora agregue un componente TLabel y

un TButton al formulario.
4. Seleccione el botón y cambié la propiedad Text en el Object Inspector a "Say
Hello".
5. Ahora debería ver tres componentes sobre el FireMonkey Mobile Form

Designer. Aquí está la app iOS:
6. Después que ha colocado esos componentes sobre el FireMonkey Mobile

Form Designer, el IDE automáticamente coloca nombres para los
componentes.
Para ver o cambiar el nombre a un componente, seleccione el componente sobre el

Form Designer, y luego encuentre su propiedad Name en el Object Inspector y el
Structure View:
Para un componente TButton, el nombre del componente es colocado por defecto

a Button1 (o Button2, Button3, dependiendo de cuántos TButtons haya creado en esta
aplicación).
7. El formulario sobre el que ha colocado estos componentes también tiene un

nombre. Seleccione el fondo del FireMonkey Mobile Form Designer, y
seleccione la propiedad Name en el Object Inspector. El nombre del
formulario Form1 (o Form2, Form3,...) es mostrado. También puede localizar
el nombre del formulario en el Structure View:
8. Puede cambiar fácilmente a source code (código fuente) seleccionando la

pestaña Code en la parte inferior del Form Designer o presionando la tecla
F12.
Puede cambiar entre el FireMonkey Mobile Form Designer y el Code Editor en
cualquier momento:
Cuando cambia hacia el Code Editor, puede ver el código fuente que el IDE tiene
generado. Puede encontrar tres componentes definidos (Edit1, Label1, y Button1):
Note que la cláusula Uses es actualizado (para agregar la unidad FMX.StdCtrls para
TLabel y la unidad FMX.Edit para TEdit) cuando usted guarde o ejecute su proyecto.
Paso 3: Escriba un Manejador de Evento en Delphi para un

Click de Botón de parte del Usuario
El siguiente paso es definiendo un manejador de evento para el componente TButton.
Usted puede definir manejadores de evento para su aplicación FireMonkey iOS en la
misma manera que define manejadores para aplicaciones de escritorio. Para el
componente TButto, el evento más típico es un click de botón.
Doble-click al botón sobre el Form Designer, y RAD Studio creará el esqueleto de

código que puede usar para implementar un manejador de evento para el evento click
del botón:
Ahora puede implementar respuestas dentro de las sentencias begin y end del
método Button1Click.
El siguiente fragmento de código implementa una respuesta que muestra una pequeña
caja de diálogo, que dice "Hola + <nombre ingresado en el edit box>":
Label1.Text := 'Hola ' + Edit1.Text + ' !';
En Delphi, las comillas que rodean cadenas literales deben ser comillas simples rectas
(de ésta manera, 'cadena'). Puede usar el sigo más (+) para concatenar cadenas. Si
necesita una comilla dentro de una cadena, puede usar dos simples comillas
consecutivas dentro de una cadena, que produce una simple comilla.
Mientas escribe código, algunas tooltip hints (sugerencias) aparecen, indicando el

tipo de parámetro que usted necesita especificar. El tooltip hints también indica el tipo
de parámetros que son soportados por una clase determinada:
Paso 4: Pruebe Su Aplicación Móvil

La implementación de ésta aplicación a finalizado, ahora usted puede ejecutar la
aplicación.
Puede hacer click en el botón Run ( ) en el IDE, presionar F9, o seleccionar Run
> Run desde el menú principal de RAD Studio:
Testeando Su Aplicación Android

Testeando sobre el Android Emulator
Por defecto, las apps Android corren sobre el Android Emulator el mismo que es
proveído en RAD Studio.
Antes de ejecutar su app Android, confirme la plataforma de destino en el Project
Manager:
Testeando sobre el Dispositivo Android

Si completa los pasos descritos en Tutorial Móvil: Configurando Su Entorno de
Desarrollo sobre Windows PC (Android) antes de crear su nuevo proyecto, puede
ejecutar su app Android sobre un dispositivo Android conectado a su PC mediante un
cable USB.
Testeando Su Aplicación iOS

Testeando sobre la Mac (iOS Simulator)
Por defecto, las aplicaciones FireMonkey iOS se ejecutan sobre la plataforma
destino iOS Simulator. Puede confirmar la plataforma destino en el Project Manager:
Cuando ejecute su aplicación, ésta es deplegada en la Mac y luego al iOS Simulator

sobre la Mac. Para nuestra app, un formulario con una caja de edición y un botón es
mostrada. Ingrese un texto en la caja de edición, y click en el botón Say Hello:
Testeando sobre un Dispositivo iOS conectado

Si ha completado los pasos descritos en Tutorial Móvil: Configurando Su Entorno
de Desarrollo sobre la Mac (iOS) and Tutorial Móvil: Configurando Su Entorno de
Desarrollo sobre Windows PC (iOS) antes de crear su nuevo proyecto, ahora puede
ejecutar su app iOS sobre un dispositivo iOS conectado a su Mac mediante un cable
USB.
Para ejecutar su app iOS sobre un dispositivo iOS conectado, primero seleccione la
plataforma destino iOS Device entonces el Platform Assistant despliega la aplicación
al Dispositivo iOS conectado:
Después que ha seleccionado la plataforma destino iOS Device, ejecute su app iOS
haciendo click en el botón Run en el IDE, presionando F9 o seleccionando Run >
Run.
Sobre su Mac, puede ver una caja de diálogo solicitándole permiso para firmar su app
iOS. Seleccione "Always Allow" o "Allow" para firmar su app.
Luego vaya a su dispositivo iOS y espere a que su app FireMonkey iOS aparezca.
Esté atento a la imágen de lanzamiento de FireMonkey (el ícono está disponible en
$(BDS)\bin\Artwork\iOS, puede cambiar la imagen de lanzamiento en Application
Options):
Tutorial Móvil: Usando un Componente Button

con Diferentes Estilos (iOS y Android)
Botones en Aplicaciones Móviles FireMonkey

FireMonkey define varios tipos de botones, y ustede puede usar esos diferentes tipos de
botones con los mismos pasos descritos aquí. Los botones FireMonkey
incluye TButton y TSpeedButton.
A continuación están algunos ejemplos de diferentes estilos con componentes Botón disponible
para que usted los use en diferentes partes de su interfase de usuario de su aplicación móvil:
 Botones en el Formulario:
iOS Android
 Botones en la Barra de Navegación (también conocido como Toolbar):

iOS Android
Defina el Look and Feel para un Componente Botón

Después que coloca un nuevo botón sobre el FireMonkey Mobile Designer, puede especificar
algunas propiedades importantes para un componente seleccionado usando el Object
Inspector.
Seleccione un componente (en este caso, un botón), y luego navegue y cambie el valor de
algunas propiedades como las siguientes:
 Cambie el texto mostrado sobre la superficie del botón actualizando el valor de la

propiedad Text.
 Cambie el valor de las propiedades Position.X y Position.Y (o arrastre el componente
usando el mouse.)
 Cambie el valor de las propiedades Height y/o Width (o arrastre el borde del componente
usando su mouse.)
 Click en el down-arrow de la propiedad StyleLookup.
En la lista drop-down del StyleLookup, usted puede seleccionar un Estilo predefinido

basado en cómo su componente será usado:
Crear un Control Segmentado Usando Componentes Button

FireMonkey usa un componente SpeedButton para definir el Control Segmentado, que le dá a
los usuarios la habilidad de seleccionar un valor desde varias opciones.
iOS Android
Para definir un Control Segmentado, siga los siguientes pasos:
1. Coloque tres componentes TSpeedButton desde el Tool Palette. Coloque los

componentes TSpeedButton al lado del otro usando el mouse:
iOS Android
2. Seleccione el primer componente, y cambie su propiedad StyleLookup a

segmentedbuttonleft:
iOS Android
3. Seleccione el segundo componente, y cambie su propiedad StyleLookup a

segmentedbuttonmiddle.
4. Seleccione el tercer componente, y cambie su propiedad StyleLookup a
segmentedbuttonright. Ahora los tres botones lucen como un Control Segmentado:
iOS Android
5. Seleccione cada componente, y cambie la propiedad Text como usted guste:

iOS Android
6. Seleccione estos tres botones con el mouse:

iOS Android
7. Setear la propiedad GroupName a un nombre único como LocationSegments:
8. Para especificar que uno de esos componentes aparezca Presionado por defecto,
setear la propiedad IsPressed para un componente a True:
iOS Android
Crear un Scope Bar en un Componente Toolbar

Usted puede definir un Control Segmentado sobre un toolbar; esto es conocido también como
un Scope Bar, un control segmentado puede ser usado para controlar el ámbito de una
búsqueda.
Use los mismos controles TSpeedButton como en los pasos anteriores, pero con los siguientes
valores para la propiedad StyleLookup:
 Toolbuttonleft
 toolbuttonmiddle
 toolbuttonright
iOS Android
Tutorial Móvil: Usando un Componente Calendar

para Seleccionar una Fecha (iOS y Android)
Calendario en Aplicaciones Móviles FireMonkey

FireMonkey usa el componente TCalendarEdit para envolver un componente calendar o
datepicker para la plataforma móvil de destino:
iOS (iPad) Android (LG-E612)
Puede usar fácilmente el componente TCalendarEdit con los siguientes simples pasos:
1. Seleccione el componente TCalendarEdit en el Tool Palette, y suelte el componente

sobre el FireMonkey Mobile Form Designer. Para encontrar el componente en el Tool
Palette, ingrese los primeros caracteres ("Cale") en la caja de búsqueda ( ):
Después que suelta el componente, puede ver su componente TCalendarEdit sobre el

Mobile Form Designer:
2. Básicamente, eso es todo. Ejecute su aplicación sobre un simulator/emulator o su

dispositivo móvil conectado. Después de tocar el TCalendarEdit, el control calendar
aparece, y puede seleccionar una fecha.
Implementando un Manejador de Evento Para que el Usuario

Cambie la Fecha
Después que el usuario cambia la fecha, el evento OnChange es disparado. Usted puede
implementar un manejador de evento para el evento OnChange para reaccionar a la acción del
usuario.
Para implementar un manejador de evento OnChange:
1. Seleccione el componente TCalendarEdit.

2. En el Object Inspector, abrir la página Events, y doble-click en el espacio en blanco al
lado de OnChange.
3. Escribir el código como sigue:
procedure TForm25.CalendarEdit1Change(Sender: TObject);

begin
ShowMessage(FormatDateTime('dddddd', CalendarEdit1.Date));
end;
Este código muestra un mensaje con la fecha seleccionada. La

función FormatDateTime convierte la fecha seleccionada a un formato especificado (en este
caso dddddd entrega un formato de fecha extendido):
Tutorial Móvil: Usando Componentes Combo Box

para escoger Items desde una Lista (iOS y
Android)
Implementando un Picker en Aplicaciones Móviles FireMonkey

Para plataformas móviles, FireMonkey envuelve el componente Picker con el componente
TComboBox:
iOS Android
Android LG-E612
Para definir un picker y la lista de items para escoger:
1. Seleccione File > New > FireMonkey Mobile Application - Delphi > Blank
Application.
2. Seleccione el componente TComboBox en el Tool Palette, y suéltelo sobre

el FireMonkey Mobile Form Designer.
Para encontrar el TComboBox, ingrese los primeros caracteres ("Com") en la caja de
Búsqueda del Tool Palette:
3. Después de soltar el componente, usted puede ver el componente TComboBox sobre

el Form Designer.
Click-derecho en el componente TComboBox y seleccione Items Editor...:
4. Para definir items, click en Add Item varias veces.
5. En el Structure View, seleccione ListBoxItem1 (el primer item de la lista).
6. En el Object Inspector, edite la propiedad Text para ListBoxItem1.

En éste ejemplo (los cincuenta estados de USA), el primer item es "Alabama".
7. Edite otros items así, por ejemplo Alaska, Arizona, Arkansas, California, Colorado, y así
sucesivamente.
8. Ejecute la aplicación en su plataforma móvil seleccionada (iOS Simulator, iOS Device,
Android Emulator, o Android Device).
Luego toque el TComboBox, el control Selector aparece, y usted puede seleccionar un
item.
Construyendo una Lista de Items Usando Código

Para construir una lista de items usando código, usted puede usar el método Add como sigue:
procedure TForm27.FormCreate(Sender: TObject);
begin
ComboBox1.Items.Add('Alabama');
ComboBox1.Items.Add('Alaska');
ComboBox1.Items.Add('Arizona');
ComboBox1.Items.Add('Arkansas');
ComboBox1.Items.Add('California');
// Other states can be listed here
ComboBox1.Items.Add('Virginia');
ComboBox1.Items.Add('Washington');
ComboBox1.Items.Add('West Virginia');
ComboBox1.Items.Add('Wisconsin');
ComboBox1.Items.Add('Wyoming');
end;
Mostrando un Item Específico

El item seleccionado actualmente es especificado por la propiedad ItemIndex. ItemIndex es un
valor entero que es especificado usando un índice basado en cero (esto quiere decir, que el
primer ítem es cero).
Para mostrar la lista con el item cinco seleccionado ("California" en el siguiente código de
ejemplo), especifique el ItemIndex así:
begin
// Otros estados pueden ser listados aquí
// El índice del 5to item es "4"
ComboBox1.ItemIndex := 4;
end;
Si usted no conoce el valor del índice, puede encontrar el valor usando el método IndexOf así:
begin
// Otros estados pueden ser listados aquí
ComboBox1.ItemIndex := ComboBox1.Items.IndexOf('California');
end;
Implementando un Manejador de Evento para la Selección del

Usuario
Después que el usuario selecciona un item, el evento OnChange es disparado. Para responder
a la acción del usuario, puede implementar un manejador de evento para el evento OnChange.
Para implementar un manejador de evento OnChange:
1. Seleccione el componente TComboBox.

2. En el Object Inspector, abrir la página Events, y doble-click en el espacio vacío al lado
de OnChange.
3. Se abrirá el Code Editor. Escriba el código de la siguiente manera:
procedure TForm27.ComboBox1Change(Sender: TObject);

begin
ShowMessage(Format('Item %s at Index %d was selected. ',
[ComboBox1.Selected.Text, ComboBox1.ItemIndex]));
end;
Este manejador de evento muestra una caja de mensaje que indica el item que fué
seleccionado.
La función Format retorna una cadena formateada a partir de una cadena y un array de
argumentos:
iOS Android
iPad Android LG-E612
Tutorial Móvil: Usando el Componente Web

Browser (iOS y Android)
Usando el componente Web Browser en Aplicaciones Móviles
FireMonkey
Para plataformas móviles, FireMonkey envuelve el componente Web Browser como el
componente TWebBrowser. Éste tópico describe cómo crear una simple aplicación
FireMonkey Web Browser para plataformas iOS y Android.
Paso 1: Diseñe la Interface de Usuario
Application.
2. Seleccione el componente TToolBar en el Tool Palette, y suéltelo sobre el FireMonkey

Mobile Form Designer. Para encontrar el TToolBar, ingrese los primeros caractéres
(como "tool") en la caja de Búsqueda del Tool Palette:
3. Luego de soltar el componente, usted puede ver el componente TToolBar en la parte

superior del Mobile Form Designer:
4. Seleccione el componente TButton en el Tool Palette y suéltelo sobre el ToolBar.
5. Seleccione el componente Button en el Mobile Form Designer, y entonces

seleccione priortoolbuttonbordered en la propiedad StyleLookup en el Object
Inspector.
El valor priortoolbuttonbordered StyleLookup para el TButton añade una etiqueta
Back. En dispositivos iOS, es similar a la siguiente imágen:

Para más detalle acerca de seleccionar un estilo en aplicaciones FireMonkey iOS,
vea Tutorial Móvil: Usando un Componente Button con Diferentes Estilos (iOS y
Android).
6. Seleccione el componente TEdit en el Tool Palette y suéltelo en el ToolBar. Asegúrese

que el tamaño del control Edit es suficientemente amplia para ocupar el área del
ToolBar:
7. Seleccione el componente TWebBrowser en el Tool Palette y suéltelo sobre el

formulario.
8. Seleccione el componente Web Browser sobre el Mobile Form Designer, vaya al Object
Inspector y seleccione alClient para la propiedad Align.
Después que complete estos pasos, el formulario debería lucir como en la siguiente
imágen:
Paso 2: Escriba un Manejador de Evento para Abrir una Página

Web cuando el usuario Cambia la URL en el Control Edit
A diferencia de las plataformas de escritorio, los dispositivos móviles usan el Virtual Keyboard
para ingresar texto como en las siguientes imágenes. El usuario puede completar la acción
clickeando el botón "Done".
iOS (iPad) Android (LG - E612)
FireMonkey proporciona varios tipos de manejadores de eventos para cubrir la mayoría de

acciones de los usuarios. Después que el botón "Done" es seleccionado, el FireMonkey
framework envía un evento OnChange al control TEdit. Por otra parte, no hay un evento
específico para el botón "Back". En esta sección, usted implementará manejadores de evento
para soportar ambos escenarios.
Implemente un Método Común para Abrir una Página Web

Antes de implementar manejadores eventos, implementaremos primero un método común para
abrir una página web basada en la propiedad Text del control Edit.
1. En el Code Editor, crear la siguiente nueva línea:
procedure OpenURL; next to { Private declarations }
2. Presione CTRL+SHIFT+C para crear un marcador de posición al final del archivo:
3. Implemente el método OpenURL como en el siguiente fragmento de código:
Implement an Event Handler for the OnChange Event

1. En el Mobile Form Designer, seleccione el componente Edit, y luego en el Object
Inspector (Events tab), doble-click en el espacio en blanco al lado del evento
OnChange para crear el manejador de evento.
El Object Inspector crea un nuevo manejador de evento llamado Edit1Change:
2. Complete el manejador de evento añadiendo el siguiente código:
Implementar un manejador de Evento para Soportar la Tecla Enter

No hay un evento específico definido para la tecla Enter. Sin embargo, usted aún puede
monitorear dichos eventos a través del evento OnKeyDown.
OnKeyDown da información acerca de la tecla presionada a través de varios parámetros en su

manejador de evento. Usted puede implementar éste evento como sigue:
Implementar un Manejador de Eventos para el Botón Back

Para implementar un botón Back para su Web Browser, usted puede simplemente llamar al
método GoBack del componente Web Browser:
El comportamiento básico está ahora implementado para esta aplicaciónWeb Browser. Intente
ejecutar su aplicación ya sea sobre su Simulador iOS o su Dispositivo iOS.
Paso 3: Seleccione el Keyboard Apropiado para la Aplicación

Web Browser
Después que usted ejecute su primera aplicación Web Browser, puede darse cuenta que el
Virtual Keyboard no está optimizado.
iOS proporciona varios teclados virtuales de la siguiente manera:
vktAlphabet: vktDefault: vktEmailAddress: vktNamePhonePad:
vktNumbersAndPun
vktNumberPad: vktPhonePad: vktURL:
ctuation:
Android proporciona varios teclados virtuales de la siguiente manera:
vktAlphabet: vktDefault: vktEmailAddress: vktNamePhonePad:
vktNumbersAndPun
vktNumberPad: vktPhonePad: vktURL:
ctuation:
Seleccione vktURL como el tipo de teclado virtual adecuado en la propiedad

KeyboardType para el control Edit, y establezca la propiedad KillFocusByReturn a
True :
Tutorial Móvil: Usando LiveBindings para Poblar

un ListView (iOS y Android)
Este tutorial muestra cómo usar el LiveBindings Designer para poblar un componente
FireMonkey ListView desde un TPrototypeBindSource conteniendo algunos datos de
ejemplo. El tutorial muestra cómo agregar datos de ejemplo y cómo hacer el enlace entre el
prototyping source y el componente list view a fin de llenar la lista.
Como con cada LiveBinding, éste tutorial no requiere código. Sin embargo, a fin de crear una
aplicación útil, usted necesita agregar manejadores de evento y otro código.
Paso 1: Creando el Proyecto

1. Crear un nuevo proyecto. Escoja una FireMonkey Mobile Application para este ejemplo.
En el asistente, escoja Blank Application.
2. En el Tool Palette, localize un componente TListView y suéltelo sobre el formulario.

3. Agregue un componente TPrototypeBindSource al formulario.
4. Sobre el formulario, seleccione el componente ListView1, y entonces en el Object

Inspector, setear la propiedad Align a alClient.
Después de colocar los componentes necesarios sobre el formulario móvil, el

formulario debería lucor como la siguiente imágen.
Paso 2: Agregando Campos

1. Click-derecho en el componente TPrototypeBindSource y seleccione Add Field....
2. Desde la caja de diálogo Add Field, seleccione ColorsNames y click en OK.
Paso 3: Creando LiveBindings

1. Abra el LiveBindings Designer, si no está ya abierto, y enlazar la propiedad
ColorsName1 del TPrototypeBindSource a la propiedad Item.Text del list
view.
El componente list view pobla automáticamente los items con nombres de color desde
el componente de datos de prototipos.
2. En el Structure View, ubique el componente ListView1 y luego click en la

jerarquía ItemAppearance.
3. En el Object Inspector, localize la propiedad ItemAppearance y cambie su valor a
ImageListItemRightButton.
4. Cambie la propiedad ItemEditAppearance a
ImageListItemRightButtonDelete.
En este punto, el componente list view está configurado para mostrar una imágen sobre el lado
izquierdo del texto del item, y un botón en el lado derecho del texto del item. La imágen y botón
son poblados con datos de ejemplo que usted agregará en el siguiente paso.
Paso 4: Agregando Más Campos

Usted necesita agregar dos campos más con el fin de hacer que el componente list view
muestre una imágen y un texto en el botón asociado con cada ítem de la lista.
1. Click-derecho en el componente TPrototypeBindSource y seleccione Add Field....

2. En la caja de diálogo Add Field, Ctrl+Click para seleccionar los campos de datos
Bitmaps y Currency.
3. Vaya al LiveBindings Designer y haga lo siguiente:
1. Conecte la propiedad Bitmap1 del prototyping source data a la propiedad
Item.Bitmap del componente list view.
Este paso añade un botón representando el color y número de cada item del list view,
tales como Blue 19.
2. Conecte la propiedad CurrencyField1 desde el prototyping source data

a la propiedad Item.ButtonText del componente list view.
Este paso muestra el valor del campo currency sobre el botón localizado en el lado
derecho de cada item del list view.
4. Click en OK.
Ahora el list view muestra algunos datos de color asociado con cada item y también muestra
datos de dinero sobre el botón asociado en cada ítem de la lista.
Paso 5: Agregando el Manejador de Evento onButtonClick

Para crear una aplicación práctica, puede agregar el manejador de evento onButtonClick que
se dispare cuando usted hace click en un item del ListView.
Para añadir elmanejador de evento onButtonClick
1. En el formulario de la aplicación móvil, seleccione el componente ListView1.

2. En el Object Inspector, abra la ficha Events, y luego doble-click en OnButtonClick.
3. En el Code Editor, implemente una manejador de evento apropiado OnButtonClick.
El siguiente código de ejemplo agrega el manejador de eventos que muestra una caja de
mensaje cuando usted hace click en un ítem del ListView:
procedure TForm1.ListView1ButtonClick(const Sender: TObject;
const AItem: TListViewItem; const AObject:
TListItemSimpleControl);
begin
ShowMessage(AItem.Text + ' ' +AItem.ButtonText + ' is
clicked.');
end;
Los Resultados
Ejecute la aplicación en su dispositivo móvil, pulsando F9 o seleccionando Run > Run.
Android (LG - E612) iOS (iPad)
Si usted clickea el item Mediumaquamarine, la aplicación muestra el siguiente mensaje:
Tutorial Móvil: Usando Componentes ListBox

para Mostrar un Table View (iOS y Android)
Usando Componentes ListBox para Mostrar un Table View en

Aplicaciones Móviles
Sobre la plataforma móvil, FireMonkey usa el componente FMX.ListBox.TListBox para
presentar una Table View en un estilo móvil, igual a las siguientes ListBoxes.
Lista Plana (Plain List)

iOS Android (LG E-612)
Lista Agrupada
Nota: Solo dispositivos iOS soportan listas agrupadas.
Este tutorial describe los pasos básicos para construir items para una Table View en sus
aplicaciones móviles FireMonkey.
Crear Items sobre el Componente ListBox
Application.
2. Seleccione el componente TListBox en el Tool Palette, y suéltelo sobre el FireMonkey

Mobile Form Designer. Para encontrar TListBox, ingrese algunos caracteres (como
"TListB") en la casilla Search del Tool Palette:
3. Seleccione el componente TListBox sobre el Mobile Form Designer, vaya al Object

Inspector y seleccione alClient para la propiedad Align:
4. Sobre el FireMonkey Mobile Form Designer, click-derecho en el componente TListBox,

y seleccione Items Editor:
5. Sobre el Items Designer, click en el botón Add Item varias veces para agregar varios
items al ListBox:
6. Cierre el Items Designer. Ahora usted puede ubivar sus Items sobre el componente
TListBox. Por ejemplo:
Agregar un Header
Usted puede definir un Header sobre el componente TListBox usando los siguientes pasos:
Un Header para un TListBox

y seleccione Add Item > TListBoxHeader:
2. Sobre el Tool Palette, seleccione el componente TLabel y suéltelo en la parte superior

del componente TListBoxHeader que usted agregó:
3. En el Object Inspector, cambie las propiedades del componente TLabel como se

muestra:
Property Value
Align alClient
StyleLookup toollabel
TextAlign taCenter
Text (Valor de texto que usted quiera)
Agregar un Group Header/Footer a la Lista

Usted puede definir un Group Header y un Group Footer para items sobre el TListBox como se
muestra:

y seleccione Items Editor.
2. Sobre el Item Designer, seleccione el TListBoxGroupHeader desde la lista drop-

down, y luego seleccione Add Item:
3. Seleccione TListBoxGroupFooter desde la lista drop-down, y luego seleccione Add

Item.
4. Seleccione ListBoxGroupHeader1 en la lista de items, y click en el botón Up varias

veces hasta que este item se posicione en la parte superior en la lista:
5. Cierre la caja de diálogo. Ahora usted tiene un Group Header y un Group Footer en el
componente TListBox.
Mostrar List Items como Separate Grouped Items

Los Items sobre un ListBox pueden ser mostrados como una Lista Plana o una Lista Agrupada
(solo para plataforma iOS). Esta elección es controlada por la propiedad GroupingKind y la
propiedad StyleLookup, como se muestra en la siguiente figura:
Muestra Items como Lista Plana o Simple Muestra Items como Lista Agrupada
gsPlain = GroupingKind Valor de la Propiedad gsGrouped = GroupingKind Valor de la Propiedad
listboxstyle = StyleLookup Valor de la transparentlistboxstyle = StyleLookup Valor de la

Propiedad Propiedad
Importante: Para dispositivos iOS, puede especificar cualquiera de los estilos para su
componente TListBox en el Object Inspector. Para dispositivos Android, puede especificar
solamente la lista plana.
Agregar un Check Box u otro Accesorio a un ListBox Item

Cada item en un TListBox puede usar un Accessory como una Marca de Verificación (Check
Mark) a través de la propiedad ItemData.Accessory. La siguiente figura muestra el valor que
puede asignar a ItemData.Accessory y el Accessory asignado:
Puede seleccionar la propiedad Accessory en el Object Inspector cuando el ListBox Item es

seleccionado en el Form Designer.
Agregar un Icon a un ListBox Item

Cada Item en el componente ListBox puede contener información Bitmap, como un Icon, a
través de la propiedad ItemData.Bitmap:
Puede seleccionar la propiedad Bitmap en el Object Inspector cuando el ListBoxItem es

seleccionado en el Form Designer.
Agregar Información Detallada a un Item

Usted puede agregar un texto de información adicionañ para cada item del componente
ListBox.
Especifique texto adicional en la propiedad ItemData.Detail, y seleccione la ubicación del Detail

Text a través de la propiedad StyleLookup, como se muestra en la siguiente tabla:
Propiedad StyleLookup Look & Feel
listboxitemnodetail
listboxitembottomdetail
listboxitemrightdetail
listboxitemleftdetail
Agregar Items a un ListBox desde Su Código

Para agregar items al ListBox, puede simplemente llamar al método Items.Add como en el
siguiente código:
ListBox1.Items.Add('Text to add');
Si quiere crear otros items diferentes a un simple item, o controlar otras propiedades, puede
crear una instancia del primer item, y luego agregarlo al ListBox.
El siguiente código añade items al ListBox, como se muestra en la figura:
iOS Android (LG E-612)

var
c: Char;
i: Integer;
Buffer: String;
ListBoxItem : TListBoxItem;
ListBoxGroupHeader : TListBoxGroupHeader;
begin
ListBox1.BeginUpdate;
for c := 'a' to 'z' do
begin
// Agrega una cabecera ('A' to 'Z') a la Lista
ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBox1);
ListBoxGroupHeader.Text := UpperCase(c);
ListBox1.AddObject(ListBoxGroupHeader);
// Agrega items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c',

...) a la Lista
for i := 1 to 3 do
begin
// StringOfChar retorna una cadena con un número
especificado de caracteres repetidos.
Buffer := StringOfChar(c, i);
// Simply add item
// ListBox1.Items.Add(Buffer);
// o, usted puede agragar items creando used mismo una

instancia de TListBoxItem.
ListBoxItem := TListBoxItem.Create(ListBox1);
ListBoxItem.Text := Buffer;
// (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
ListBoxItem.ItemData.Accessory :=
TListBoxItemData.TAccessory(i);
ListBox1.AddObject(ListBoxItem);
end;
end;
ListBox1.EndUpdate;
end;
Agregar un Search Box

Usted puede agregar una caja de búsqueda al ListBox. Con una caja de búsqueda, los
usuarios pueden fácilmente realizar una selección desde una larga lista tal como se muestra en
las siguientes imágenes:
 Para agregar una Caja de Búqueda (Search Box) al componente ListBox, click-derecho en
el componente TListBox y simplemente seleccione Add Item > TSearchBox desde el
menú contextual:
Tutorial Móvil: Usando LiveBindings para Llenar

un ListBox en Aplicaciones Móviles (iOS y
Android)
Este tutorial le guía paso a paso para conectar datos a un control ListBox de FireMonkey sobre
sus dispositivos móviles, usando LiveBindings.
Paso 1: Creando el Proyecto

En este proyecto, necesita un list box, un rectángulo, y también un prototyping binding source.
Para agregar esos componentes, siga los pasos de abajo:
Application.
2. Seleccione el componente TListBox en el Tool Palette, y suéltelo sobre el FireMonkey
Mobile Form Designer.
3. Seleccione el compnente list box sobre el Mobile Form Designer, y en el Object
Inspector, localize la propiedad DefaultItemStyles.ItemStyle. Establecer
el estilo listboxitemrightdetail.
4. Seleccione el componente TRectangle en el Tool Palette, y suéltelo sobre el

FireMonkey Mobile Form Designer.
5. Seleccione el componente rectangle sobre el Mobile Form Designer, y en el Object
Inspector, setear la propiedad Align a alBottom.
6. Seleccione el componente list box y setear la propiedad Align a alClient.
7. Ahora suelte un TPrototypeBindSource desde el Tool Palette en su formulario.
En este punto, su formulario debería ser similar a la siguiente pantalla iOS:
Usted necesita agregar datos de ejemplo para colors y color names para el
componente TPrototypeBindSource con el fín de apoyar el propósito de este tutorial y para
enlazar al list box y el rectángulo.
1. Click-derecho en el componente TPrototypeBindSource, y luego click en Add

Field sobre el menú contextual.
2. Seleccione AlphaColors y ColorsNames desde la lista Field Data, y limpiar la casilla
de verificación Shuffle Values.
Esta operación añade datos de ejemplo ordenados alfabéticamente (valores de color

alfa y nombres).
3. Valide su selección cliqueando el botón OK. Ahora la información de ejemplo está lista
para ser usada a través de LiveBindings.
Paso 2: Creando el LiveBindings

Abrir el LiveBindings Designer. El diagrama sin conexiones es similar a la siguiente imágen:
1. Enlazar ColorsName1 desde PrototypeBindSource1 a Item.Text desde ListBox1.

(Click en ColorsName1 y arrastrar el ratón a Item.Text.) Ahora el list box muestra
todos los nombres de color en el prototyping binding source.
2. Enlazar ColorsName1 desde PrototypeBindSource1 a ItemHeader.Text desde List
Box1. Ahora el list box también muestra headers con todos los nombres de color en el
prototyping binding source.
3. En el LiveBindings Designer, click el enlace que conecta
ColorsName1 a ItemHeader.Text.
4. En el Object Inspector, localize la propiedad FillHeaderCustomFormat y
setearlo a SubString(%s, 0, 1) desde la lista drop-down.
En este punto, el list box agrupa todos los nombres de color en categorías alfabéticas:
5. Enlazar AlphaColor1 desde PrototypeBindSource1 a Item.LookupData desde List

Box1. Esto asegura que la selección del nombre del color también apunte al valor de
color alfa correcto.
6. Enlazar AlphaColor1 desde PrototypeBindSource1 a Item.Detail desde ListBox1.
Esto asegura que el valor del color alfa aparece en la parte derecha del item del list
box.
7. Click en el botón ellipsis [...] sobre el bloque de diagrama Rectangle1 en el
LiveBindings Designer, y en el diálogo que aparece, tipear Fill.Color. Seleccione la
casilla de verificación Fill.color, luego click en OK:
8. Enlazar Fill.Color desde Rectangle1 a SelectedValue desde ListBox1. Esto asegura

que el color de relleno del rectángulo cambie de acuerdo al item seleccionado de su
list box.
Nota: Cuando intenta enlazar Fill.Color a SelectedValue, una caja con un mensaje de
confirmación se abre. En ésta caja de mensaje, escoja Yes.
Después de completar los pasos de arriba, el diagrama LiveBindings será similar a la siguiente
imágen:
Su aplicación está ahora lista para ejecutarse en el dispositivo móvil.
Los Resultados
Para ejecutar la aplicación, presione F9 o escoja Run > Run.
Cuando selecciona un item del list box, el color del rectángulo cambia consecuentemente:
Tutorial Móvil: Usando SQLite (iOS y Android)

Antes de empezar este tutorial, usted debería leer y realizar el siguiente tutorial:
 Tutorial Móvil: Usando Componentes ListBox para Mostrar un Table View (iOS y
Android)
Este tutorial describe los pasos básicos para usar SQLite como almacenamiento local de datos
sobre su dispositivo móvil a través del framework dbExpress.
iOS Android
Usando dbExpress para Conectarse a la Base de Datos

dbExpress es un framework de acceso a datos muy rápido, escrito en Delphi. RAD Studio
prové drivers para bases de datos, como InterBase, Oracle, DB2, SQL Server, MySQL,
Firebird, SQLite y ODBC. Usted puede acceder a diferentes bases de datos usando
procedimientos similares al procedimiento descrito aquí.

 Para las plataformas móviles, dbExpress soporta InterBase ToGo así como SQLite. Esos
productos de bases de datos pueden ejecutarse sobre dispositivos iOS y Android.
 Para otras bases de datos como Oracle, es necesario tener al menos una librería cliente.
En plataformas Windows, la librería cliente se proporciona como un archivo DLL para
conectarse. Por lo tanto, usted necesita para desarrollar aplicaciones utilizando tecnologías
de nivel medio, como DataSnap para conectarse a estos productos de base de datos
desde un dispositivo móvil.
Otro tutorial muestra cómo conectarse a una base de Datos Empresarial sin usar una librería
cliente sobre el dispositivo móvil; vea Tutorial Móvil: Conectándose a una Base de Datos
Empresarial desde un Cliente Móvil (iOS y Android).
Creando la Base de Datos en el Entorno Windows para

Propósitos de Desarrollo
Primero, usted necesita crear un archivo de base de datos SQLite sobre su plataforma de
desarrollo Windows. Siga los siguientes pasos, puede usar el FireMonkey Mobile Form
Designer para diseñar la interface de usuario de su App Móvil.
Crear la base de Datos en el Data Explorer

1. Vaya al Data Explorer, click-derecho en el nodo SQLite y seleccione Add New
Connection:
2. Defina el nombre de la conexión, como por ejemplo ShoppingList.
3. Especifique la ubicación del archivo de base de datos:

4. Click en el botón Advanced y abra la caja de diálogo Advanced Properties.
5. Cambie la propiedad FailIfMissing a False y click en OK para cerrar la caja de diálogo

Advanced Properties:
Nota: Seteando FailIfMissing a False instruye al Data Explorer a crear un nuevo

fichero de base de datos si no existe.
6. Regrese a la caja de diálogo en el Modify Connection, click en el botón Test

Connection. Con ésta operación, el nuevo archivo de base de datos es creado si no
existe.
Nota: Asegúrese que sqlite3.dll está presente en su sistema de desarrollo. Si el

archivo no está presente, descargue el sqlite3.dll
desde http://www.sqlite.org/download.html a la ruta system
(como C:\Windows\SysWOW64 para 64-bit Windows).

Crear una Tabla sobre el DataExplorer

1. En el Data Explorer, doble-click en el nodo ShoppingList bajo la sección SQLite, click-
derecho en Tables, y luego seleccione New Table desde el menú contextual.
2. Setear Data Type para una columna ShopItem a TEXT.
3. Click el botón Save y especificar un nombre de tabla (por ejemplo, Item.)
Diseñando y Configurando la Interface de Usuario
Los componentes de Interface de Usuario visibles son cargados sobre el diseñador
Este tutorial usa un componente TListBox como el elemento de Interface de Usuario.
Para configurar un componente ListBox y otros elementos UI, use los siguientes pasos:
1. Crear una aplicación FireMonkey Mobile usando File > New > FireMonkey Mobile
Application - Delphi.
2. Suelte un TToolBar sobre el Formulario.

3. Suelte un TButton sobre el componente ToolBar y establezca las siguientes

propiedades en el Object Inspector:
 Setear la propiedad Name a ButtonAdd.
 Setear el StyleLookup a addtoolbuttonbordered.
4. Suelte un TButton sobre el componente ToolBar y establezca las siguientes
 Setear la propiedad Name a ButtonDelete.
 Setear el StyleLookup a deletetoolbutton.
 Setear el Text a Delete.
 Setear el Visible a False.
5. Suelte un TLabel sobre el componente ToolBar y establezca las siguientes
 Setear el Align a alClient.
 Setear el StyleLookup a toollabel.
 Setear el Text a Shopping List.
 Setear el TextAlign a taCenter.
6. Arrastre un componente TListBox sobre el formulario y setear las siguientes
 Setear la propiedad Align a alClient, entonces el componente ListBox usará el
formulario completo.
Conectando a los Datos

Los siguientes son los pasos básicos para conectarse a los datos en una base de datos que ya
está definida en el Data Explorer:
1. Seleccione la tabla Item sobre el Data Explorer y suéltelo en el Form Designer.
Nota: Esto crea dos componentes (ShoppingList: TSQLConnection e

Item: TSQLDataSet) sobre el Formulario.

2. Seleccione el componente ShoppingList en el Formulario, y entonces cambie la

propiedad Connected a True.
3. Seleccione el componente Item en el Formulario, y lyuego cambie la
propiedad Active a True.
4. Seleccione View > LiveBindings Designer y el LiveBindings Designer se abre.
5. Seleccione ShopItem en el componente Item y suelte ShopItem a ListBox1.
Siguiendo esos pasos conectamos la interface de usuario de la app con la información

contenida en la base de datos SQLite. Si usted ha usado una tabla con datos existentes para
este tutorial, ahora podría ver la información actual con el Diseñador de Formulario.
Creando el Manejador de Evento para Hacer Visible el Botón

Delete Cuando el Usuario Seleccione un Item desde la Lista
La propiedad Visible para el botón Delete es seteado a False. Por lo tanto, por defecto, el
usuario final no ve este botón. Usted puede hacerlo visible cuando el usuario seleccione un
item de la lista, de la siguiente manera:
 Seleccione ListBox1 y defina el siguiente manejador de evento para el evento

OnItemClick.
procedure TForm1.ListBox1ItemClick(const Sender: TCustomListBox;

const Item: TListBoxItem);
begin
ButtonDelete.Visible := ListBox1.Selected <> nil;
end;

Creando el Manejador de Evento para el Botón Add para Agregar

una Entrada a la Lista
Conexiones de base de datos también son configurados
El siguiente paso es agregar una característica a esta aplicación para añadir un item al
shopping list.
1. Suelte un componente TSQLQuery al formulario.

2. Establecer las siguientes propiedades en el Object Inspector:
 Setear la propiedad Name a SQLQueryInsert.
 Setear la propiedad SQLConnection a ShoppingList.
 Setear la propiedad SQL como se muestra:
INSERT INTO ITEM (ShopItem) VALUES (:ShopItem)
 Seleccione el botón Expand (...) sobre la propiedad Params.
 Seleccione el parámetro ShopItem y setear DataType a ftString:

3. En el Form Designer, doble-click al componente AddButton. Añada el siguiente código

para este manejador de evento:
procedure TForm1.ButtonAddClick(Sender: TObject);

var
TaskName: String;
begin
try
if InputQuery('Enter New Item', 'Name', TaskName) and
(TaskName.Trim <> '') then
begin
SQLQueryInsert.ParamByName('ShopItem').AsString :=
TaskName;
SQLQueryInsert.ExecSQL();
Item.Refresh;
end;
except
on e: Exception do
begin
ShowMessage(e.Message);
end;
end;
end;
La función InputQuery muestra un cuadro de diálogo que pide al usuario final que introduzca
un texto. Esta función devuelve True cuando el usuario selecciona OK, así que usted puede
agregar datos a la base de datos sólo cuando el usuario selecciona OK y el texto contenga
algunos datos.
iOS Android

Creando el Manejador de evento para el Botón Delete para

remover una Entrada desde la Lista
El siguiente paso es agregar una característica a esta aplicación para remover un item desde el
shopping list:
1. Suelte un componente TSQLQuery al formulario.

2. Establecer las siguientes propiedades en el Object Inspector:
 Setear la propiedad Name a SQLQueryDelete.
 Setear la propiedad SQLConnection a ShoppingList.
 Setear la propiedad SQL como se muestra:
DELETE FROM ITEM WHERE ShopItem = :ShopItem
 Seleccione el botón Expand (...) sobre la propiedad Params.

 Seleccione el parámetro ShopItem y setear DataType a ftString.
3. En el Form Designer, doble-click al componente DeleteButton. Agregue el siguiente
código a este manejador de evento.
procedure TForm1.ButtonDeleteClick(Sender: TObject);

var
TaskName: String;
begin

TaskName := ListBox1.Selected.Text;
try
SQLQueryDelete.ParamByName('ShopItem').AsString := TaskName;
SQLQueryDelete.ExecSQL();
Item.Refresh;
except
on e: Exception do
begin
SHowMessage(e.Message);
end;
end;
end;
Configurando el Despliegue de Su Base de Datos para móviles
Hasta este punto, se ha utilizado SQLite en su escritorio. Esto significa que la base de datos
real se encuentra en la unidad de su disco duro local (por ejemplo, C:\Users\Public\Documents
\RAD Studio\12.0\Samples\Data\shoplist.s3db). En el dispositivo móvil, las aplicaciones son
sand-boxed, y por lo general sólo se pueden leer y escribir datos que se encuentran en la
carpeta Documents (sólo para dispositivos iOS) y internal storage (para dispositivos Android)
en su carpeta de aplicaciones.
Para conectarse a una base de datos local en el móvil, es necesario realizar las siguientes
acciones:
 Desplegar la base de datos al Dispositivo móvil.

 Cambiar la configuración (para conectarse al archivo de base de datos) a un archivo local
bajo el folder Documents (para Dispositivos iOS) o internal storage (para Dispositivos
Android).
Añada y Configure Su Archivo de Base de Datos en el Deployment

Manager
Antes de poder ejecutar la aplicación en el móvil, es necesario configurar el despliegue de su
archivo de base de datos (shoplist.s3db).
1. Abrir el Deployment Manager seleccionando Project > Deployment.
2. Seleccione Add Files, y seleccione el archivo de base de datos (por ejemplo,

C:\Users\Public\Documents\RAD Studio\12.0\Samples\Data\shoplist.s3db).

3. Seleccione shoplist.s3db, y cambie Remote Path a StartUp\Documents\ (para iOS

platform) o assets\internal\ (para Android platform).
RemotePath sobre iOS device platform
RemotePath sobre Android platform
4. Seleccione la columna Platforms (doble-click en el ellipsis [...] en la línea de

shoplist.s3db):
1. Asegúrese que iOS Simulator y iOS Device o Android están presentes para
shoplist.s3db.
2. Remueva Win32 desde la lista si está presente (usted no tiene que copiar
archivos de base de datos para la plataforma Win32).
5. Seleccione All-Configurations - iOS Device platform o All-Configurations -
Android platform y asegúrese que shoplist.s3db está seteada para ser desplegada a
StartUp\Documents\ o assets\internal.
Como usted lo ha configurado, cuando ejecute la aplicación en el dispositivo móvil, el archivo

de base de datos (shoplist.s3db) esta fijada para ser desplegada en la carpeta
Documents (para la plataforma iOS) o internal storage (para la plataforma Android) en el área
sandbox (caja de arena) de su aplicación móvil.
Modificando Su Código para Conectarse al Archivo de Base de

Datos Local en el Móvil
Las características básicas de esta aplicación ahora son implementadas. Como usted trabajó
en el explorador de datos, ha creado un archivo de base de datos en Windows. El archivo de
base de datos no está disponible en su dispositivo móvil a menos que usted lo copie en el
dispositivo móvil o lo cree sobre la marcha.
Puede crear una base de datos SQLite y Tabla con los siguientes pasos::
Especificando la Ubicación de la base de datos SQLite sobre el

Dispositivo Móvil
1. En el Form Designer, seleccione el componente ShoppingList.

2. En el Object Inspector, doble-click al evento BeforeConnect.
3. Añada el siguiente código al manejador de evento:

procedure TForm1.SQLConnectionSQLiteBeforeConnect(Sender:
TObject);
begin
{$IF DEFINED(iOS) or DEFINED(ANDROID)}
ShoppingList.Params.Values['Database'] :=
TPath.Combine(TPath.GetDocumentsPath, 'shoplist.s3db');
{$ENDIF}
end;
El registro TPath está declarado en la unidad System.IOUtils, solo necesita agregar

System.IOUtils en la uses clause de su unidad.
Crear una Tabla si No Existe

Con SQLite puede crear una tabla cuando la tabla no existe, usando la sentencia CREATE
TABLE IF NOT EXISTS. Puede crear una tabla después que el componente SQLConnection
se conecte a la base de datos y antes que el componente TSQLDataSet se conecte a la tabla.
Use los siguientes pasos:
1. En el Form Designer, seleccione el componente ShoppingList.

2. En el Object Inspector, double-click en el evento AfterConnect.
3. Agregue el siguiente código para manejar este evento:
procedure TForm1.ShoppingListAfterConnect(Sender: TObject);

begin
ShoppingList.ExecuteDirect('CREATE TABLE IF NOT EXISTS Item
(ShopItem TEXT NOT NULL)');
end;
Ejecutando Su Aplicación en el Simulador o sobre un Dispositivo

Móvil
Ahora su aplicación está lista para ejecutarse sobre el simulador o su dispositivo móvil
conectado.
Para ejecutar su aplicación

1. En el Project Manager, seleccione su plataforma objetivo.
2. Escoja alguno de los siguientes comandos:

 Run > Run
 Run > Run Without Debugging
iOS Android

Nota: Si tiene algún problema ejecutando la aplicación, siga los pasos ofrecidos en
Troubleshooting.

Tutorial Móvil: Conectando a una Base de Datos

Empresarial desde un Cliente Móvil (iOS y
Android)
Antes de empezar este tutorial, debería leer y realizar los siguientes tutoriales:
 Tutorial Móvil: Usando Componentes ListBox para Mostrar una Table View (iOS y
Android)
 Tutorial Moóvil: Usando InterBase ToGo (iOS y Android)
Este tutorial describe cómo conectarse a una base de datos Empresarial desde una aplicación
móvil cliente.
Para conectarse a una Base de Datos Empresarial, usted necesita tener una librería cliente.
En muchos casos, la librería cliente es proveída por el database vendor en formato DLL. Esta
estrategia no trabaja bien para dispositivos móviles porque las librerías cliente no están
disponibles. Para resolver esto, puede desarrollar una capa intermedia (middle tier) para
conectarse a una Base de Datos Empresarial, y su aplicación móvil pueda comunicarse con
la capa intermedia.
RAD Studio prové el DataSnap framework con el que usted puede desarrollar la capa
intermedia (y acceder a la capa intermedia) casi sin necesidad de codificación. Este tutorial
describe los pasos para desarrollar la capa intermedia y luego desarrollar el cliente móvil.
Creando la Capa Intermedia, un DataSnap Server

Primero, crear un DataSnap server que expone una tabla desde un servidor de base de datos.
Este tutorial usa un DataSnap Server VCL Forms Application como un servidor DataSnap.
Nota: En éste tutorial, el DataSnap server (una aplicación VCL) funciona como la capa
intermedia en una aplicación de base de datos multi-capa. Usted puede fácilmente crear y
luego borrar una instancia de un servidor DataSnap. Después de entender los pasos básicos,
usted puede convertir la capa intermedia a una aplicación de tipo Servicio de Windows.

Crear una DataSnap Server VCL Application

1. Crear un nuevo proyecto. Escoja File > New > Other y desde el diálogo New
Items seleccione Delphi Projects > DataSnap Server > DataSnap Server en orden
para crear un nuevo proyecto Delphi.
2. El asistente New DataSnap Server aparece y usted necesita seguir los pasos sin
modificar demasiados parámetros.
En el asistente New DataSnap Server:
1. Como primer paso, seleccione VCL Forms Application como tipo de

aplicación.

2. Como segundo paso, escoga el protocolo TCP/IP, Server Methods

Class y Sample Methods desde la lista Server Features.
3. En el tercer paso, dejar el puerto de comunicaciones TCP/IP por
defecto al 211. Esto garantizará que la comunicación entre el cliente
y el servidor pasará a través del puerto por defecto del DataSnap.
4. En el paso final (número cuatro) seleccione TDSServerModule como
el ancestor para el Server Methods.
3. Guarde la unidad del formulario como DataSnapServerUnit.pas.
4. Cambie a DataSnapServerUnit, y cambie la propiedad Name del formulario
a DSServerForm.
5. Guarde el server methods unit por defecto es creado por el
asistente: ServerMethodsUnit1) como ServerModuleUnit.pas.
6. Guarde el server container unit (por defecto es creado por el
asistente: ServerContainerUnit1) como ServerContainerUnit.pas.
7. Guarde el nuevo proyecto como DataSnapServerProject.droj.
8. Seleccione ProjectGroup1 en el Project Manager, y guarde el proyecto

como DataSnapTutorialProjectGroup.groupproj.
Defina un DataSet en el DataSnap Server
1. Cambie al archivo ServerContainerUnit.pas y reemplaze la cláusula uses en la

implementación con: uses Winapi.Windows, ServerModuleUnit;
2. Cambie al archivo ServerModuleUnit.pas.
3. En el Form Designer, cambie la propiedad Name del Server Module
a DSServerModule_EMPLOYEE.
4. Configure los siguientes componentes sobre el Server Module:
 Suelte un componente TSQLConnection sobre el Server Module, y establezca las

siguientes propiedades:
TSQLConnection encapsula una conexión dbExpress hacia un servidor de base de

datos.

 Setear la propiedad Name a SQLConnection_EMPLOYEE.

 Setear la propiedad LoginPrompt a False.
 Setear Driver a InterBase Server.
 Expanda el nodo Driver, y setear la
propiedad DataBase a C:\Users\Public\Documents\RAD
Studio\<n.n>\Samples\Data\EMPLOYEE.GDB.
 Cambie la propiedad Connected a True. Si obtiene un error, vuelva a

verificar las propiedades que ha configurado:
 Suelte un componente TSQLDataSet sobre el Server Module, y setear las

TSQLDataSet representa la información recuperada usando dbExpress.
 Setear la propiedad Name a SQLDataSet_EMPLOYEE.

 Setear la propiedad SQLConnection a SQLConnection_EMPLOYEE.
 Setear la propiedad CommandType a ctTable.
 Setear la propiedad CommandText a EMPLOYEE.
 Cambiar la propiedad Active a True. Si obtiene un error, vuelva a
verificar las propiedades que ha configurado.
 Suelte un componente TDataSetProvider sobre el Server Module, y setear las

TDataSetProvider empaqueta la información desde un dataset y pasa uno o más data

packets transportables al cliente DataSnap.
 Setear la propiedad Name a DataSetProvider_EMPLOYEE.

 Setear la propiedad DataSet a SQLDataSet_EMPLOYEE:


Nota: Este tutorial usa InterBase como un ejemplo. Sin embargo, usted puede conectarse a
cualquier servidor de base de datos usando los mismos pasos. Seleccione el driver apropiado,
y otras propiedades para apuntar a su base de datos.
Exponer el DataSet desde el DataSnap Server

Usted acaba de crear un nuevo Server Module que contiene un DataSet y un DataSetProvider
que empaqueta la información para la siguiente capa. El siguiente paso es exponer el Server
Module al cliente DataSnap.
1. En el Form Designer, abrir ServerContainerUnit.

2. Seleccione DSServerClass1, y actualice el manejador de evento existente para el
evento OnGetClass. Agregue el siguiente código al manejador de evento
del DSServerClass1:
procedure
TServerContainer1.DSServerClass1GetClass(DSServerClass:
TDSServerClass;
var PersistentClass: TPersistentClass);
begin
PersistentClass := TDSServerModule_EMPLOYEE;
end;
Con este manejador de evento, el DataSnap Server expone los proveedores así como los
métodos públicos de esta clase a un cliente DataSnap. Basado en los pasos de la sección
previa, ahora vamos a exponer el componente DataSetProvider_EMPLOYEE
DataSetProvider para su cliente DataSnap.
Ejecutar el DataSnap Server

La implementación del DataSnap Server está completa. Click-derecho
en DataSnapServerProject.exe y seleccionar Run Without Debugging.

Ahora puede ver el DataSnap server ejecutándose en su máquina Windows. Porque éste
DataSnap server no tiene Interface de usuario, sólo luce un formulario en blanco, y esto es lo
que se esperaba en este punto.
Creando una Aplicación Móvil que se Conecta al DataSnap

Server
El siguiente paso es crear la aplicación móvil cliente.
1. En el Project Manager, click-derecho en DataSnapTutorialProjectGroup, y

seleccione Add New Project.
2. Seleccione FireMonkey Mobile Application en la página Delphi Projects:

3. Guarde la nueva Unidad como DataSnapClientUnit.pas.

4. Guarde el nuevo Proyecto como DataSnapClientProject.droj.
5. Abrir DataSnapClientUnit, y cambie la propiedad Name del formulario a
DSClientForm.
6. Suelte los siguientes componentes sobre el FireMonkey Mobile Form Designer:
 Componente TSQLConnection (SQLConnection1)
TSQLConnection encapsula una conección dbExpress al servidor de base de datos.

Además, es compatible con el DataSnap server.
 Setear la propiedad Driver a DataSnap.

 Expandir la propiedad Driver, y setear la propiedad HostName al nombre
del host del DataSnap server.
 Setear la propiedad LoginPrompt a False.
 Setear la propiedad Connected a True.
Si obtiene un error, por favor vuelva a comprobar las propiedades que se acaban de
ajustar.
 Componente TDSProviderConnection (DSProviderConnection1)
El componente TDSProviderConnection prové de conectividad al DataSnap server

usando dbExpress.
 Setear la propiedad SQLConnection al SQLConnection1.

 Setear ServerClassName a TDSServerModule_EMPLOYEE. Este
nombre debe de coincider con el nombre de clase del Modulo Servidor
del DataSnap server.
 Setear la propiedad Connected a True.
 Componente TClientDataSet (ClientDataSet1)
TClientDataSet implementa un dataset independiente de la base de datos, y ésta

puede ser usada como un buffer local in-memory de los registros desde otro dataset.
 Setear la propiedad RemoteServer a DSProviderConnection1.

 Setear la propiedad ProviderName a DataSetProvider_EMPLOYEE.
Este nombre necesita concidir con el nombre del provider del DataSnap
server.
 Setear la propiedad Active a True.
 Componente TListBox
 Setear la propiedad Align a alClient:

7. Abrir el LiveBindings Designer y conectar los datos y la interface de usuario:
1. Click en FULL_NAME en BindSourceDB1, y arrastrar el cursor del mouse

a Item.Text en ListBox1:
2. Ahora ha creado y configurado el cliente DataSnap en la plataforma

móvil. Usted debería poder ver la información traída desde el DataSnap
server en el IDE:
iOS Android

Desplegar el MIDAS Library al iOS Simulator

Para ejecutar su aplicación sobre el iOS Simulator, necesita desplegar los siguientes archivos:
 MIDAS Library
2. Seleccione Add Featured Files ( ):
3. Seleccione el siguiente módulo, y luego click en OK para cerrar el Deployment

Manager:
 MIDAS Library

Ejecute Su Aplicación en la plataforma móvil

Ahora su aplicación está lista para ejecutarse.
En el Project Manager, seleccione la plataforma móvil destino, y ejecute su aplicación. Usted

debe ser capaz de navegar por los datos tal como lo hace en el IDE.

Tutorial Móvil: Usando FireDAC en Aplicaciones

Móviles (iOS y Android)
Este tutorial describe los pasos básicos para usar SQLite como almacén de datos local en su
dispositivo móvil a través del framework FireDAC.
iOS Android
Usando FireDAC para Conectar a la Base de Datos

FireDAC es un único conjunto de Componentes Universal Data Access para desarrollar
aplicaciones de base de datos de plataforma cruzada para Delphi y C++Builder. Con su
poderosa arquitectura común, FireDAC permite el acceso nativp directo de alta velocidad desde
Delphi a InterBase, SQLite, MySQL, SQL Server, Oracle, PostgreSQL, IBM DB2, SQL
Anywhere, Access, Firebird, Informix, y más.
El driver nativo de FireDAC soporta base de datos SQLite version 3.0 y superior. Para una
discusión detallada sobr el uso de SQLite en FireDAC para una aplicación Delphi, lea el artículo
"Usando SQLite con FireDAC".

Para usar SQLite en su aplicación, el archivo sqlite3.dll debe estar presente en su sistema de
desarrollo. Si el archivo no está presente, descargue sqlite3.dll
desde http://www.sqlite.org/download.html a su ruta de sistema (como
C:\Windows\SysWOW64 para Windows 64-bit).
Diseñe y Configure la Interfase de Usuario

Cree un nuevo proyecto. Escoger una FireMonkey Mobile Application.
1. Suelte un componente TFDConnection sobre el formulario.

2. Click derecho sobre el componente TFDConnection y escoga Connection Editor.
3. En el FireDAC Connection Editor, cambie los siguientes parámetros del
TFDConnection:
1. Setear la propiedad Driver ID a SQLite.
2. Setear el parámetro Database a:
C:\Users\Public\Documents\RAD
Studio\<n.n>\Samples\Data\Employees.s3db (locaclización de la base de datos)
click en Open de la caja de diálogo File Open.
(Para mostrar Employees.s3db en el diálogo Open, setear la opción All Files (*.*).)
3. Click en el botón Test para probar la conexión.
4. Click en OK para cerrar el Connection Editor.

4. En el Object Inspector, comfigure las siguientes propiedades de TFDConnection:

1. Setear la propiedad LoginPrompt a False, entonces al usuario no se le
requerirá por una identificación (login).
2. Setear la propiedad Connected a True.
Usando el Asistente LiveBindings

Use el Asistente LiveBindings para agregar los componentes LiveBindings
(TBindSourceDB, TBindingsList), TFDQuery, y el componente TListView.
Añadiendo los componentes LiveBinding
1. Seleccione View > LiveBindings Designer y se abrirá el LiveBindings Designer.
2. Seleccione LiveBindings Wizard.
3. Select Create a data source binding task.

4. Click en el botón Next.
5. Seleccione FireDAC class name.
7. Cambie el Command Type a Query.
8. Configure la propiedad Command Text a select Name, Department,
Seniority from Employee order by Department.

9. Click en el botón Test Command.

11. Click en el botón Finish.
En éste punto, los componentes TBindSourceDB y TFDQuery se añadieron a su formulario.
Añadir el componente ListView
1. Reabrir el LiveBindings Wizard.
2. Seleccione la tarea de enlace Link a control with a field.

4. Seleccione TListView.
6. Seleccione BindSourceDB1.

8. Seleccione el campo Name.

10. Click en el botón Finish para cerrar el asistente.
Usando el Asistente LiveBindings
LiveBindings Designer
Use el LiveBindings Designer para agregar nuevas conecciones entre los

componentes TBindSourceDB y TListView.
1. Seleccione el miembro ItemHeader.Text desde TListView.

2. Enlace al miembro Department del componente BindSourceDB1 arrastrándolo (una
linea de conexión aparece).

3. Seleccione el miembro Item.Text desde TListView.

4. Enlace al miembro Name del componente BindSourceDB1 arrastrándolo (una linea de
conexión aparece).
5. En el Object Inspector, setear las siguientes propiedades de TListView:
1. Setear el ItemAppearance a ImageListItemRightButton.
En el LiveBindings Designer, el TListView debería tener un nuevo

miembro, Item.ButtonText.
2. Setear la propiedad Align a alClient.

6. En el LiveBindings Designer, seleccione el miembro Item.ButtonText desde TListView.
7. Enlace al miembro Seniority del componente BindSourceDB1 arrastrándolo (una
linea de conexión aparece).
Preparando Su Aplicación para el Tiempo de Ejecución

FireDAC tiene una arquitectura multicapas de acoplamiento flexible, donde las capas provén
servicios. Un servicio API es definido como una interfase COM que otras capas pueden requerir
usando la interface factory.
Para que funcione correctamente FireDAC, debe vincular la implementación de las

interfaces IFDGUIxWaitCursor y IFDPhysDriver a su aplicación.
Para esto, suelte los componentes TFDGUIxWaitCursor y TFDPhysSQLiteDriverLink en el

formulario.
Configurando el Despliegue de la Base de Datos al Móvil

En este punto, ha usado SQLite en su escritorio. Esto hace que la base de datos actual esté
localizada en su disco duro local (por ejemplo, C:\Users\Public\Documents\RAD
Studio\12.0\Samples\Data\Employees.s3db). En el Dispositivo móvil, las aplicaciones son sand-
boxed, y generalmente solo puede leer y escribir datos que estén localizados en la
carpeta Documents (para dispositivos iOS) e internal storage (para dispositivos Android) en
su carpeta de aplicación.
Para conectarse a la base de datos local en el móvil, necesita realizar las siguientes acciones:
 Desplegar la base de datos al Dispositivo móvil.

 Cambie la configuración (para conectarse al archivo de base de datos) a un archivo local
bajo la carpeta Documents (para dispositivos iOS) o internal storage (para dispositivos
Android).

Agregue y Configure Su Archivo de Base de Datos en el Deployment

Manager
Antes de que ejecute su aplicación en el móvil, usted necesita configurar el deployment para
su archivo de base de datos (Employees.s3db).
2. Seleccione Add Files y seleccione el archivo de base de datos (por ejemplo,

C:\Users\Public\Documents\RAD Studio\12.0\Samples\Data\Employees.s3db).
3. Seleccione Employees.s3db, y cambie Remote Path a StartUp\Documents\ (para

iOS platform) o assets\ (para Android platform).
RemotePath en iOS device platform
RemotePath en Android platform
4. Seleccione la columna Platforms (doble-click la ellipsis [...] en la línea para

Employees.s3db):
1. Asegúrese que iOS Simulator y iOS Device o Android están presentes para
Employees.s3db.
2. Remueva Win32 desde la lista si está presente (no tiene que copiar los
archivos de base de datos para la plataforma Win32).
5. Seleccione All-Configurations - iOS Device platform o All-Configurations -
Android platform y asegurarse que Employees.s3db está seteado para ser
desplegado a StartUp\Documents\ o assets\.
Una vez configurado, cuando ejecute la aplicación en el dispositivo móvil, el archivo de base de
datos (Employees.s3db) está seteada para desplegarse a la carpeta Documents (para iOS
platform) o internal storage (para Android platform) en el sandbox area de su app móvil.

Modificando Su Código para Conectarse al archivo de Base de

Datos Local sobre el Móvil
Las características básicas de la aplicación ahora serán implementadas. El archivo de base de
datos usada en esta aplicación fué creada en Windows y el archivo no está disponible en su
dispositivo móvil a menos que usted lo copie al dispositivo o lo cree en tiempo de ejecución.
Especificando la Localización de la Base de Datos SQLite en el

Dispositivo Móvil
1. En el Form Designer, seleccione el componente FDConnection1.

2. En el Object Inspector, haga doble click en el evento BeforeConnect.
3. Agregue el siguiente código a éste manejador de evento:
procedure TForm1.FDConnection1BeforeConnect(Sender: TObject);

begin
FDConnection1.Params.Values['Database'] :=
'$(DOC)/Employees.s3db';
end;
Note, $(DOC) es la path variable.
Corriendo Su Aplicación en el Simulador o en el Dispositivo Móvil

Ahora su aplicación está lista para correr (seleccione Run > Run).
iOS Android


Desarrollo de Apps Móviles Con Delphi

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Desarrollo de Apps Móviles Con Delphi

Загружено:

Авторское право:

Доступные форматы

Desarrollo de Apps Móviles con Delphi (iOS y Android) www.R2datatechnology.

Tutorial Móvil: Creando una Aplicación

 Tutorial Móvil: Configurando Su Entorno de Desarrollo sobre la Mac (iOS)

Paso 1: Crear una Nueva Aplicación FireMonkey para

2. Seleccione Blank Application. El FireMonkey Mobile Form Designer muestra

Para información acerca de usar un dispositivo Android, vea Configurando Su

Paso 2: Colocar Componentes sobre el Formulario Móvil

1. Mover el puntero del ratón sobre la Tool Palette, y expanda la categoría

2. Seleccione el componente TEdit y haga doble-click sobre el TEdit o suéltelo

3. Repetir estos pasos, pero ahora agregue un componente TLabel y

5. Ahora debería ver tres componentes sobre el FireMonkey Mobile Form

6. Después que ha colocado esos componentes sobre el FireMonkey Mobile

Para ver o cambiar el nombre a un componente, seleccione el componente sobre el

Para un componente TButton, el nombre del componente es colocado por defecto

7. El formulario sobre el que ha colocado estos componentes también tiene un

8. Puede cambiar fácilmente a source code (código fuente) seleccionando la

Paso 3: Escriba un Manejador de Evento en Delphi para un

Doble-click al botón sobre el Form Designer, y RAD Studio creará el esqueleto de

Label1.Text := 'Hola ' + Edit1.Text + ' !';

Mientas escribe código, algunas tooltip hints (sugerencias) aparecen, indicando el

Paso 4: Pruebe Su Aplicación Móvil

Testeando Su Aplicación Android

Testeando sobre el Dispositivo Android

Testeando Su Aplicación iOS

Cuando ejecute su aplicación, ésta es deplegada en la Mac y luego al iOS Simulator

Testeando sobre un Dispositivo iOS conectado

Tutorial Móvil: Usando un Componente Button

Botones en Aplicaciones Móviles FireMonkey

 Botones en la Barra de Navegación (también conocido como Toolbar):

Defina el Look and Feel para un Componente Botón

 Cambie el texto mostrado sobre la superficie del botón actualizando el valor de la

 Click en el down-arrow de la propiedad StyleLookup.

En la lista drop-down del StyleLookup, usted puede seleccionar un Estilo predefinido

Crear un Control Segmentado Usando Componentes Button

Para definir un Control Segmentado, siga los siguientes pasos:

1. Coloque tres componentes TSpeedButton desde el Tool Palette. Coloque los

2. Seleccione el primer componente, y cambie su propiedad StyleLookup a

3. Seleccione el segundo componente, y cambie su propiedad StyleLookup a

5. Seleccione cada componente, y cambie la propiedad Text como usted guste:

6. Seleccione estos tres botones con el mouse:

7. Setear la propiedad GroupName a un nombre único como LocationSegments:

Crear un Scope Bar en un Componente Toolbar

Tutorial Móvil: Usando un Componente Calendar

Calendario en Aplicaciones Móviles FireMonkey

iOS (iPad) Android (LG-E612)

1. Seleccione el componente TCalendarEdit en el Tool Palette, y suelte el componente

Después que suelta el componente, puede ver su componente TCalendarEdit sobre el

2. Básicamente, eso es todo. Ejecute su aplicación sobre un simulator/emulator o su

Implementando un Manejador de Evento Para que el Usuario

Para implementar un manejador de evento OnChange:

1. Seleccione el componente TCalendarEdit.

procedure TForm25.CalendarEdit1Change(Sender: TObject);

Este código muestra un mensaje con la fecha seleccionada. La

iOS (iPad) Android (LG-E612)

Tutorial Móvil: Usando Componentes Combo Box

Implementando un Picker en Aplicaciones Móviles FireMonkey

Para definir un picker y la lista de items para escoger:

2. Seleccione el componente TComboBox en el Tool Palette, y suéltelo sobre

3. Después de soltar el componente, usted puede ver el componente TComboBox sobre

4. Para definir items, click en Add Item varias veces.

5. En el Structure View, seleccione ListBoxItem1 (el primer item de la lista).

6. En el Object Inspector, edite la propiedad Text para ListBoxItem1.

Construyendo una Lista de Items Usando Código

Mostrando un Item Específico