Movi Les Certificacion

Capitulo Uno
Instalacin y configuracin de los ambientes.
19
Desarrollo de aplicaciones moviles con FireMonkey-Creando la

primera aplicacin.
27
Utilizar un componente Button con diversos estilos en una aplicacin

mvil.
33
Utilizar un componente calendario para recoger una fecha en una

aplicacin
37
Uso de componentes para cuadros combinados para recoger

elementos de una lista en una aplicacin mvil.
Captulo Dos
CONTENIDO
43
Uso del componente Explorador Web en una aplicacin mvil
52
Uso de componentes TAB para mostrar pginas en aplicaciones

mviles
64
Uso de componentes listbox para mostrar una vista de tabla en una

aplicacin mvil.
76
Uso de diseo para ajustar tamao forma diferente u orientaciones

en una aplicacin mvil.
84
Tomar y compartir una imagen en una aplicacin mvil.
Captulo Tres
90 Uso de sensores ubicacin en el dispositivo mvil.

98 Uso del centro de notificacin en el dispositivo
106 uso sqlite en una aplicacin Movil.
118 Conexin a una base de datos empresarial desde
un cliente mvil
INSTALACIN Y CONFIGURACIN DE
LOS AMBIENTES
Captulo Uno
Configurar el entorno de desarrollo en el Mac

Configuracin iOS
Una aplicacin FireMonkey destinada a la plataforma iOS se prueba inicialmente en

el simulador de iOS disponible en el Mac. La segunda parte del proceso de prueba
utiliza la plataforma de destino del dispositivo iOS y requiere un dispositivo iOS de
prueba conectado a la MAC.
La primera mitad de este tutorial describe los pasos que debe realizar para
ejecutar la aplicacin iOS en el simulador de iOS en el Mac.
La segunda parte de este tutorial describe los pasos adicionales necesarios para
ejecutar la aplicacin iOS para iOS.
Pasos para configurar su MAC para ejecutar la aplicacin IOS EN EL

SIMULADOR IOS
Para implementar una aplicacin iOS para el simulador de iOS en la Mac, es
necesario instalar las siguientes herramientas en su Mac:
Asistente de plataforma (PAServer)
Para propsitos de depuracin, RAD Studio utiliza el Asistente de Plataforma,
una aplicacin que debe instalar y ejecutar en el Mac.
XCode
Xcode es el entorno de desarrollo y depuracin en el Mac, y proporciona los
archivos de desarrollo necesarios para Mac OS X y las aplicaciones de iOS.
e mbarcadero
www.ittoolsltda.com
Captulo Uno
Material de capacitacin exclusivo de ITTOOLS - prohibida su reproduccin
Paso 1: Instalando el asistente de plataforma

Como se mencion, el Asistente de Plataforma debe estar ejecutndose en el Mac
al implementar una aplicacin para iOS desde su PC a un simulador de iOS o un
dispositivo iOS.
El programa de instalacin del asistente de Plataforma para Mac OS X se llama
RADPAServerXE4.pkg, y est disponible en dos lugares:
En la carpeta PAServer dentro del directorio de instalacin de RAD Studio.

En la Web, para descargar en el Mac:
http://installers.codegear.com/release/radstudio/11.0/PAServer/
RADPAServerXE4.pkg
Paso 2: Ejecute el asistente de plataforma

En el Finder del Mac, activar el archivo de aplicacin (RAD PAServer XE4.app) como
se muestra a continuacin:
Navegue al nivel superior de la carpeta de aplicaciones.

Haga doble clic en RAD PAServer XE4.app para iniciar el Asistente de la
plataforma
e mbarcadero
www.ittoolsltda.com
Recorrido por el IDE
Aparecer la ventana de terminal, que muestra la ventana Asistente Plataforma

y la solicitud de contrasea:
Pulse Intro o introduzca una contrasea para PAServer y luego pulse Intro.
A continuacin se le pedir que introduzca su contrasea de usuario de Mac
para que el Asistente de Plataforma depure (tome el control de otro proceso)

la aplicacin. Introduzca la contrasea y seleccione Tomar control:
Paso 3: Instalar Xcode en el MAC

Xcode es el entorno de desarrollo y depuracin en el Mac, y proporciona los
archivos de desarrollo necesarios para Mac OS X y las aplicaciones de iOS.
Puede instalar Xcode desde cualquiera de las siguientes fuentes:
En el DVD Mac OS X Install, Instalaciones opcionales, haga doble clic en

Xcode.mpkg para instalar Xcode en su sistema.
En App Store, descargar Xcode de forma gratuita.

Como desarrollador registrado de Apple, puedes descargar la ltima versin
de Xcode como un paquete (. Dmg). Para registrarse y descargar Xcode:
1. Registro (gratis) como un desarrollador de Apple en http://developer.

apple.com/programs/register/.
2. Descarga Xcode como un conjunto de https://developer.apple.com/
downloads.
e mbarcadero
www.ittoolsltda.com
Captulo Uno
Pasos adicionales para configurar tu Mac para ejecutar la aplicacin IOS

en tu dispositivo iOS
PASO 1: Instale la lnea de comandos de Xcode Tools en un MAC
Para instalar las herramientas Xcode necesarias utilizando Xcode para Mac:
Iniciar Xcode para Mac.

Seleccione Preferencias en el men de Xcode.
En el panel General, haga clic en Descargas.

la ventana de descargas, seleccione la pestaa Componentes.
Haga clic en el botn Instalar junto a Herramientas de lnea de comandos.

Se le pedir su nombre de usuario de Apple Developer durante el proceso de
instalacin.
e mbarcadero
www.ittoolsltda.com
PASO 2: Regstrese para obtener una cuenta de desarrollador

La membreca a uno de los programas de desarrolladores de iOS es un requisito
para la construccin, ejecucin, depuracin y despliegue de aplicaciones para iOS.
Usted puede unirse a un programa de desarrollo de una de las siguientes formas:
Como un desarrollador individual.

Como miembro (o lder) de un equipo en un programa universitario o un
programa de empresa (negocio).
PASO 3: SOLICITUD, descargar e instalar el certificado de desarrollo

Las aplicaciones que se implementan en el dispositivo (o en el simulador de iOS)
necesitan ser firmadas criptogrficamente antes de que funcionen. El certificado de
Desarrollo contiene informacin que es necesaria para la firma de las aplicaciones.
Cada individuo (un desarrollador individual o un miembro del equipo) debe tener
un certificado de desarrollo nico, que se puede utilizar para mltiples aplicaciones.
Para los equipos de desarrollo, los certificados de desarrollo deben ser solicitados por cada
miembro del equipo, y estas solicitudes deben ser aprobadas por un administrador del equipo.
Solicitar, descargar e instalar su certificado
En la aplicacin Acceso a Llaveros en su Mac, seleccione en el men Acceso a
Llaveros: Asistente para Certificados> Solicitar un certificado de una entidad

emisora de certificados:
Guardar la solicitud de certificado como un archivo y, a continuacin, enviarlo

a la entidad de certificacin, subindolo en el iOS Provisioning Portal.
1. Si usted es un miembro del equipo de desarrollo de un programa / organizacin
de la empresa, el administrador del equipo tiene que aprobar su solicitud. Una
vez que ste equipo lo aprueba, se puede descargar el certificado.
2. Si usted es un desarrollador individual, debera ver una opcin de descarga
para su certificado poco despus de que usted lo solicite. Consulte la
documentacin de Apple en: Creacin de certificados de firma para ms
detalles.
e mbarcadero
www.ittoolsltda.com
Captulo Uno
Ir a iOS Provisioning Portal. Puede descargar el certificado de Desarrollo tras el

cambio de estado de Enviado a Otorgada:
Inicie el Certificado de Desarrollo haciendo doble clic en l. Se carga

automticamente en la aplicacin Acceso a Llaveros.
PASO 4: Registrar un dispositivo para el despliegue

Antes de que un dispositivo pueda ejecutar las aplicaciones de usuario, debe estar
registrado en Apple Provisioning Portal. Los dispositivos estn registrados por su
identificador de dispositivo nico (UDID). El UDID se puede determinar usando
Xcode, de la siguiente manera:
Asegrese de que el dispositivo iOS est conectado a su mquina Mac.

Abrir Xcode y vaya a Organizador (Ventana> Organizador).
En la pestaa Dispositivos, haga clic en su dispositivo.
Al lado de la etiqueta del identificador hay una cadena de caracteres:
e mbarcadero
www.ittoolsltda.com
La cadena de identificador representa la UDID del dispositivo.
Si usted es un desarrollador individual, registre el dispositivo aadiendo el

UDID en la ficha Dispositivos en Devices tab of the Apple Provisioning Portal.
Si usted es parte de una empresa / organizacin, pregunte a su equipo de

administracin para registrar su dispositivo.
PASO 5: crear e instalar un perfil de suministro

Los perfiles de datos se utilizan para conectar un desarrollador y dispositivos a un
equipo de desarrollo. Se requiere este perfil de datos para ejecutar aplicaciones
en un dispositivo iOS.
Una vez creado el perfil de datos, debe instalar Xcode, de la siguiente manera:
Abra Xcode para Mac e ir el a Organizador (Ventana> Organizador).

En la seccin Biblioteca, seleccione perfiles de datos y haga clic en Actualizar.
Xcode le pide que inicie sesin con su ID de Apple. Introduzca sus credenciales
y seleccione Log in
Los perfiles de datos disponibles para que se instalen en su Xcode:
Seleccione un perfil de aprovisionamiento iOS vlido y arrastrar y soltar en el

perfil de aprovisionamiento del dispositivo de prueba.
Ha configurado el Mac para ejecutar su aplicacin iOS para su dispositivo iOS.
e mbarcadero
www.ittoolsltda.com
10
Captulo Uno
Configurar el entorno de desarrollo para iOS en Windows pc

Una aplicacin FireMonkey destinada a la plataforma de iOS se prueba inicialmente
en el simulador de iOS disponible en el Mac. La segunda parte del proceso
de prueba utilizando la plataforma de destino del dispositivo iOS y requiere un
dispositivo iOS de prueba conectado al MAC. Para implementar una aplicacin
iOS en su dispositivo para la depuracin y propsitos de prueba, RAD Studio utiliza
el Asistente de Plataforma, que debe instalar y ejecutar en el Mac.
Instalacin en el Entorno RAD Studio

Los siguientes pasos de configuracin aceleran el desarrollo aplicaciones iOS con
RAD Studio.
CREAR UN PERFIL
DE CONEXIN PARA
MAC
Abrir las herramientas> Opciones> Opciones de Entorno > Administrador de

conexin de perfil.
Seleccione agregar
e mbarcadero
www.ittoolsltda.com
11
A continuacin aparece el asistente para Crear un perfil de conexin. Definir

un nombre para el perfil de conexin, como por ejemplo Mi Mac.
En la pgina de informacin de la mquina, establezca el nombre o la
direccin IP del host de Mac, un nmero de puerto a utilizar (el puerto

predeterminado 64211 normalmente funciona) y una contrasea opcional
(si se desea utilizar una contrasea).
Haga clic en Probar conexin y asegrese de que el perfil de conexin se

realice correctamente, si no hay errores (debe recibir el mensaje La conexin
a <hostname> en <nmeroDePuerto> puerto se realiz con xito):
e mbarcadero
www.ittoolsltda.com
12
Captulo Uno
AADIR UN SDK al sistema de desarrollo para el dispositivo IOS conectado

al Mac
Abrir Herramientas> Opciones> Entorno Opciones> SDK Manager:
Seleccionar agregar
En el cuadro de dilogo Agregar Nuevo SDK, seleccione Dispositivo iOS como
plataforma.
Seleccione una plataforma para conectar (como el iOS Device):
e mbarcadero
www.ittoolsltda.com
13
Despus de seleccionar un perfil, el IDE se llena un perfil (por ejemplo,
Mi Mac) y el combo box SDK versin con la lista de las versiones SDK
disponibles en la plataforma de destino:
Haga clic en Aceptar para cerrar el dilogo.
CONFIGURACIN
ANDROID
Configurar Android tools

Al instalar RAD Studio se instala tambin Android Tools, que es la herramienta que
permite actualizar las SDK y utilizar el simulador de Android.
Los primero a realizar es actualizar el Android tools para esto ir a Men de
Inicio->Todos los programas-> Embarcadero RAD Studio -> Android SDKs>Android Tools.
e mbarcadero
www.ittoolsltda.com
14
Captulo Uno
A continuacin instalar todos los paquetes: tools, Android 4.4 y las versiones de
Android que necesite. Adems puede instalar los Extras.
Luego presionar Install packages.
e mbarcadero
www.ittoolsltda.com
15
Configurar el
simulador de
Una vez actualizado Android tools ir a Tools->Manage AVDs
Android
A continuacin configurar un simulador presionando en NEW.
e mbarcadero
www.ittoolsltda.com
16
Captulo Uno
En la siguiente imagen se muestra la configuracin:
Despus de haber configurado el simulador, seleccionarlo y presionar Start.
e mbarcadero
www.ittoolsltda.com
17
Una vez realizados estos pasos Delphi detectara el simulador de Android. Si conecta
un dispositivo Android al pc Delphi lo detectara y podr realizar el despliegue en
el dispositivo directamente.
Las SDK`s para Android se configuran con la instalacin de RAD Studio.
e mbarcadero
www.ittoolsltda.com
18
Captulo Uno
DESARROLLO DE APLICACIONES
MOVILES CON FIREMONKEY CREANDO LA PRIMERA APLICACIN
Captulo Uno
1. Crear una nueva aplicacin mvil FireMonkey. Seleccione Archivo> Nuevo> FireMonkey
aplicaciones mviles (File>New>FireMonkey Mobile Application - Delphi).
2. Seleccione Aplicacin en blanco (Blank Application). El diseador FireMonkey

Mobile muestra una nueva forma para una aplicacin mvil.
e mbarcadero
www.ittoolsltda.com
20
Captulo Uno
Puede seleccionar el tipo de plataforma para el diseo de su aplicacin.
3. Diseo de la interfaz de usuario

El primer paso para crear una aplicacin FireMonkey Mvil es el diseo de la interfaz
de usuario, el mismo primer paso al que se dirigen las plataformas de escritorio. Hay
muchos componentes reutilizables disponibles en el IDE para la creacin de interfaces
de usuario.
Mueva el puntero del ratn sobre la paleta de herramientas, y ampliar la
categora Estndar, haga clic en el icono de signo ms (+) junto al nombre de

la categora.
Seleccione el componente TEdit y sultelo en el Diseador de formularios. Una

instancia del componente TEdit aparece en el formulario:
Repita estos pasos, pero ahora agregar un componente TLabel y TButton al formulario.
Seleccione el botn y cambie la propiedad Text en el Inspector de Objetos para Decir
hola.
e mbarcadero
www.ittoolsltda.com
21
Ahora debera ver tres componentes en el Diseador de formularios:
Despus de colocar estos componentes en el Diseador de formularios, el IDE establece

automticamente los nombres de los componentes.
Para ver o cambiar el nombre de un componente, haga clic en el componente en el
Diseador de formularios y, a continuacin, encontrar su propiedad Name en el Object
Inspector y el Structure View:
e mbarcadero
www.ittoolsltda.com
22
Captulo Uno
Para un componente TButton, el nombre del componente est configurado por defecto
para Button1 (o Button2 Button3, dependiendo del nmero de TButtons que ha creado
en esta solicitud).
La forma (Form) en la que se encuentran estos componentes tambin tiene un nombre.
Seleccione el fondo del FireMonkey Mobile Form Designer y seleccione la propiedad
Name en el Object Inspector. Se muestra el nombre del formulario Form1 (o Form2,
Form3, ...). Tambin puede buscar el nombre de la forma en la vista de estructura:
Usted puede cambiar fcilmente al cdigo fuente, seleccione la pestaa Cdigo en la

parte inferior del Diseador de formularios o pulsando la tecla F12. Se puede cambiar
entre el Diseador de formularios y el Editor de cdigo cada vez que quiera:
e mbarcadero
www.ittoolsltda.com
23
Cuando cambie al Editor de cdigo, se puede ver el cdigo fuente que el IDE ha
generado. Usted debe encontrar tres componentes definidos (Edit1, Label1 y Button1):
4. Escribir un controlador de eventos en Delphi a un click del botn

El siguiente paso es definir un controlador de eventos para el componente TButton.
Se pueden definir controladores de eventos de la aplicacin FireMonkey de la misma
manera que definir controladores de eventos para aplicaciones de escritorio. Para el
componente de TButton, el caso ms tpico es un clic de botn.
Haga doble clic en el botn en el Diseador de formularios, y RAD Studio crea cdigo
base que se puede utilizar para implementar un controlador de eventos para el evento
clic del botn:
Ahora puede aplicar cdigo en el bloque begin .. end del mtodo Button1Click.
El siguiente fragmento de cdigo implementa una respuesta que muestra un pequeo
cuadro de dilogo que dice Hola + <nombre que ingreso en la caja de texto>:
e mbarcadero
www.ittoolsltda.com
24
Captulo Uno
En Delphi, las comillas que rodean literales de cadena deben ser comillas simples (es
decir, cadena). Usted puede utilizar el signo ms (+) para concatenar cadenas. Si
usted necesita una comilla simple dentro de una cadena, se pueden utilizar dos comillas
simples consecutivas dentro de una cadena, que produce una nica comilla.
Mientras que usted est escribiendo cdigo, algunos tooltip aparecen, indicando el tipo
de parmetro que debe especificar. Los tooltip tambin muestran los tipos de miembros
que se apoyan en una clase determinada:
5. Probar la aplicacin en las diferentes plataformas

La implementacin de esta aplicacin ha terminado, por lo que ahora puede ejecutar
la aplicacin. Puede hacer clic en el botn Ejecutar ( ) en el IDE, pulse F9 o seleccione
Ejecutar> Ejecutar en el men principal de RAD Studio:
Usted puede confirmar la plataforma de destino en el Administrador del Proyecto:
e mbarcadero
www.ittoolsltda.com
25
Al ejecutar la aplicacin, esta se despliega en la plataforma seleccionada ya sea en

un dispositivo o simulador. Para nuestra aplicacin, se muestra un formulario con un
cuadro de edicin y un botn. Introduzca el texto en el cuadro de edicin y haga clic
en el botn decir hola:
UTILIZAR UN COMPONENTE BUTTON

CON DIVERSOS ESTILOS EN UNA
APLICACIN MVIL
Captulo Uno
FireMonkey define varios tipos de botones, y puede utilizar estos diferentes tipos de botones
con los mismos pasos que se describen aqu. Los botones FireMonkey incluyen TButton y
TSpeedButton.
A continuacin se presentan algunos ejemplos de diferentes estilos con componentes
Button disponibles para que usted pueda utilizar en diferentes partes de la interfaz de
usuario de una aplicacin mvil:
Definir el aspecto
y la sensacin de
un componente
Button
Despus de colocar un nuevo botn en el Diseador FireMonkey Mobile, puede especificar algunas
propiedades importantes para un componente seleccionado utilizando el Inspector de Objetos.
Seleccionar un componente (en este caso, un botn), y a continuacin, busque y cambie
el valor de algunas propiedades de la siguiente manera:
Cambie el texto que aparece en la superficie de botn mediante la actualizacin

del valor de la propiedad Text.
Cambie el valor de las propiedades position.y position.x (o arrastre el

componente con el ratn.)
Cambie el valor de la altura y / o propiedades Width (o arrastre el borde del

componente con el ratn.)
Haga clic en la flecha hacia abajo en la propiedad StyleLookup.
e mbarcadero
www.ittoolsltda.com
28
Captulo Uno
En la lista desplegable StyleLookup, puede seleccionar un estilo predefinido basado en

cmo el componente se va a utilizar:
e mbarcadero
www.ittoolsltda.com
29
Crear un control
segmentado
utilizando los
componentes
Button (Solo iOS)
FireMonkey utiliza el componente Button para definir el control segmentado, que ofrece a
los usuarios la posibilidad de seleccionar un valor entre varias opciones.
Para definir un control segmentado, siga estos pasos:

Coloque tres componentes TSpeedButton de la paleta de herramientas.
Coloque los componentes TSpeedButton lado a lado con el ratn:
Seleccione el primer componente, y cambie su propiedad StyleLookup a

segmentedbuttonleft:
Seleccione el segundo componente, y cambie su propiedad StyleLookup a

segmentedbuttonmiddle.
Seleccione el tercer componente, y cambie su propiedad StyleLookup

a segmentedbuttonright. Ahora los tres botones parecen un control
segmentado:
e mbarcadero
www.ittoolsltda.com
30
Captulo Uno
Seleccione cada elemento y cambie la propiedad Text a su gusto:
Haga clic y arrastre estos tres botones para seleccionar estos componentes:
Establezca la propiedad GroupName para un nombre exclusivo como

LocationSegments:
Para especificar que uno de estos componentes aparezca Presionado por

omisin, establezca la propiedad IsPressed en True:
e mbarcadero
www.ittoolsltda.com
31
Crear un scope
bar en un
componente
toolbar
Es posible definir un control segmentado en una barra de herramientas, lo que tambin se

conoce como una barra de Alcance, un control segmentado que puede ser utilizado para
controlar el alcance de una bsqueda.
Utilice los mismos controles TSpeedButton como en los pasos anteriores, pero con los
siguientes valores para la propiedad StyleLookup:
toolbuttonleft
toolbuttonmiddle
toolbuttonright
e mbarcadero
www.ittoolsltda.com
32
Captulo Uno
UTILIZAR UN COMPONENTE
CALENDARIO PARA RECOGER UNA
FECHA EN UNA APLICACIN
Captulo Uno
FireMonkey utiliza el componente TDateEdit para envolver un componente de calendario o

datepicker para la plataforma:
e mbarcadero
www.ittoolsltda.com
34
Captulo Uno
Usted puede utilizar el componente TDateEdit con los siguientes pasos:
Seleccione el componente TDateEdit en la paleta de herramientas, y colocar
el componente en el FireMonkey Mobile Form Designer. Para encontrar el

componente en la paleta de herramientas, escriba los primeros caracteres
(Date) en el cuadro de bsqueda ( ):
Despus de soltar el componente, se puede ver el componente TDateEdit en

el Diseador de formularios:
Bsicamente, eso es todo. Ejecute la aplicacin ya sea en el simulador de iOS,

Android o en algn dispositivo conectado. Despus de tocar el TCalendarEdit,
aparece el control de calendario, y usted puede seleccionar una fecha.
Despus de que el usuario cambie la fecha, el evento OnChange se desencadena. Se

puede implementar un controlador de eventos para el evento OnChange para reaccionar
a la accin del usuario.
e mbarcadero
www.ittoolsltda.com
35
Para implementar un controlador de eventos OnChange:
Seleccione el componente TDateEdit.

En el inspector de objetos, abra la pgina de eventos y haga doble clic en el
espacio vaco al lado de Onchange.
Escriba el cdigo de la siguiente manera:
Este cdigo muestra un cuadro de dilogo de mensaje con una fecha seleccionada. La
funcin FormatDateTime convierte la fecha seleccionada en un formato especificado (en
este caso dddddd da formato de fecha y el estilo de largo):
e mbarcadero
www.ittoolsltda.com
36
Captulo Uno
USO DE COMPONENTES PARA

CUADROS COMBINADOS PARA
RECOGER ELEMENTOS DE UNA
LISTA EN UNA APLICACIN MVIL
Captulo Uno
FireMonkey envuelve el componente Picker con el componente TComboBox:
Para definir un Picker y los elementos de la lista para elegir:
Seleccione Archivo> Nuevo> FireMonkey de aplicaciones mviles - Delphi>

Aplicacin blanco.
Seleccione el componente TComboBox en la paleta de herramientas y

colquelo en el FireMonkey Mobile Form Designer.
Para encontrar el TComboBox, introduzca los primeros caracteres (Com)

en el cuadro de bsqueda de la paleta de herramientas:
e mbarcadero
www.ittoolsltda.com
38
Captulo Uno
Despus de soltar el componente, se puede ver el componente TComboBox en

el Diseador de formularios.
Haga clic en el componente y seleccione TComboBox Items Editor ...
Para definir elementos, haga clic en Agregar Elemento en varias ocasiones.
En la vista de estructura, seleccione ListBoxItem1 (el primer elemento de la lista).
e mbarcadero
www.ittoolsltda.com
39
En el Inspector de Objetos, editar la propiedad Text de ListBoxItem1.

En este ejemplo, (los departamento de Colombia.), el primer elemento de la
lista es Amazonas.
Editar otros artculos, as como Antioquia, Arauca, Atlntico, y as

sucesivamente.
Ejecute la aplicacin ya sea en el simulador de iOS, Android o algn

dispositivo conectado.
Despus de tocar el TComboBox, aparece el control de seleccin y se puede

seleccionar un elemento.
Construccin de una
lista de productos
utilizando el cdigo
Para crear una lista de elementos mediante cdigo, se puede utilizar el mtodo Add de la
siguiente manera:
e mbarcadero
www.ittoolsltda.com
40
Captulo Uno
Visualizacin
un elemento
especfico
El elemento actualmente seleccionado se indica en la propiedad ItemIndex. ItemIndex es un

valor entero que especifica el uso de un ndice basado en cero (es decir, el primer elemento
es cero).
Para mostrar la lista con el quinto elemento seleccionado (Bolvar en el cdigo de ejemplo
siguiente), especifique ItemIndex de la siguiente manera:
Si usted no sabe el valor del ndice, se puede calcular el valor mediante el mtodo IndexOf
de la siguiente manera:
e mbarcadero
www.ittoolsltda.com
41
Ejecucin de un
controlador de
eventos para
la seleccin del
usuario
Cuando el usuario selecciona un elemento, el evento OnChange se desencadena. Para

responder a la accin del usuario, se puede implementar un controlador de eventos para
el evento OnChange.
Para implementar un controlador de eventos OnChange:
Seleccione el componente TComboBox.

En el inspector de objetos, abra la pgina de eventos y haga doble clic en el
espacio vaco al lado de OnClick.
Se abrir el Editor de cdigo. Escriba el cdigo de la siguiente manera:
Este controlador de eventos muestra un mensaje de dilogo que indica el elemento

seleccionado.
La funcin Format devuelve una cadena con formato montado a partir de una cadena de
formato y una serie de argumentos:
e mbarcadero
www.ittoolsltda.com
42
Captulo Uno
Uso del componente

Explorador Web en una
aplicacin mvil.
Captulo Dos
DISEO DE INTERFAZ DEL USUARIO

PASO 1:
Seleccione Archivo> Nuevo> FireMonkey aplicaciones mviles - Delphi>

Aplicacin blanco.
Seleccione el componente TToolBar en la paleta de herramientas y colquelo
en el FireMonkey Mobile Form Designer. Para encontrar TToolBar, introduzca

unos pocos caracteres (como tool) en el cuadro de bsqueda de la paleta
de herramientas:
Despus de soltar el componente, se puede ver el componente TToolBar en

la parte superior del Diseador de formularios Mobile:
e mbarcadero
www.ittoolsltda.com
44
Captulo Dos
Material de capacitacin exclusivo para el SENA - prohibida su reproduccin
Seleccione el componente TButton en la paleta de herramientas y colquelo en

el ToolBar.
Seleccione el componente Button en el Diseador de formularios Mobile y, a

continuacin, seleccione priortoolbuttonbordered en la propiedad StyleLookup
en el Inspector de Objetos.
El valor priortoolbuttonbordered para StyleLookup agrega un nuevo TButton

con el estilo de la plataforma seleccionada:
e mbarcadero
www.ittoolsltda.com
Programacin Orientada a Objetos
45
Seleccione el componente TEdit en la paleta de herramientas y colquelo
en el ToolBar. Asegrese de que el tamao del control de edicin es lo

suficientemente amplio como para cubrir la zona del ToolBar:
Seleccione el componente TWebBrowser en la paleta de herramientas y

colquelo en el formulario.
Seleccione el componente explorador Web en el Diseador de formularios
Mobile, vaya al inspector de objetos y seleccione alClient para la propiedad

Align.
e mbarcadero
www.ittoolsltda.com
46
Captulo Dos
PASO 2:
escribir un controlador de eventos para abrir una pgina Web

cuando el usuario cambia la direccin URL en el control de
edicin
A diferencia de las plataformas de escritorio, en dispositivos mviles Utilice el teclado virtual
para introducir texto como en la imagen siguiente. El usuario puede completar la accin
haciendo clic en Done o Return.
FireMonkey ofrece muchos tipos de controladores de eventos para cubrir la mayora de las
acciones de los usuarios. Despus se seleccionar el botn Done, el marco FireMonkey
enva un evento OnChange al control TEdit. Por otra parte, no hay ningn evento especfico
para el botn de retorno. En esta seccin, se implementan manejadores de eventos para
apoyar a ambos escenarios.
e mbarcadero
www.ittoolsltda.com
47
IMPLEMENTAR UN MTODO COMN PARA ABRIR UNA PAGINA WEB

Antes de implementar controladores de eventos, primero aplicar un mtodo comn para
abrir una pgina web en base a la propiedad Text del control Edit.
En el Editor de cdigo, cree la siguiente lnea:
Presione CTRL + SHIFT + C para crear un marcador de posicin al final del

archivo
Implemente el mtodo OpenURL como en el siguiente fragmento de cdigo:
e mbarcadero
www.ittoolsltda.com
48
Captulo Dos
Implementar un controlador de eventos para el evento ONCHANGE
En el Diseador de formularios Mobile, seleccione el componente Edit y, a

continuacin, en el inspector de objetos (ficha Eventos), haga doble clic en
el espacio en blanco junto al evento OnChange para crear el controlador de
eventos.
El inspector de objetos crea un nuevo controlador de eventos denominado

Edit1Change:
Complete el controlador de eventos, agregue el cdigo siguiente:
Implementar un controlador de eventos para soportar la tecla Enter

No hay ningn evento especfico definido para la tecla Enter. Sin embargo, todava se
puede controlar este tipo de eventos a travs del evento OnKeyDown.
OnKeyDown da informacin acerca de la tecla pulsada a travs de varios parmetros en el
controlador de eventos. Puede implementar este evento de la siguiente manera:
e mbarcadero
www.ittoolsltda.com
49
Implementar un controlador de eventos para el botn ATRS

Para implementar un botn Atrs para su navegador web, slo tiene que llamar al mtodo
GoBack en el componente explorador Web:
El comportamiento bsico ahora se implementa para esta aplicacin Web Browser. Pruebe
a ejecutar su aplicacin ya sea en el simulador de iOS o Android.
Seleccione el teclado adecuado para la aplicacin web browser

PASO 3:
Despus de ejecutar la primera aplicacin del navegador Web, es posible darse cuenta de
que el teclado virtual no est optimizado.
IOS y Android proporcionan varios teclados virtuales de la siguiente manera:
e mbarcadero
www.ittoolsltda.com
50
Captulo Dos
Seleccione vktURL como el teclado virtual adecuado en la propiedad KeyboardType para el

control de edicin:
e mbarcadero
www.ittoolsltda.com
51
Uso de componentes TAB

para mostrar pginas en
aplicaciones mviles
Captulo Dos
Los TABS se definen por FMX.TabControl.TTabControl, que es un contenedor que puede

contener varias pginas de pestaas:
Cada pestaa puede contener cualquier tipo de control como un elemento

de interfaz de usuario.
Se puede ocultar la pestaa de estas pginas, y cambiar pginas sin mostrar

las pestaas.
Para cada pestaa, puede especificar iconos predefinidos (iOS), as como un icono
personalizado, y una etiqueta de texto.
Adems, usted puede colocar pestaas en la parte superior o la parte inferior del control.
Diseo pginas con pestaas mediante el diseador de formularios

Para crear pginas con pestaas en la aplicacin, utilizar el componente TTabControl con
los siguientes pasos:
Para crear una aplicacin mvil HD FireMonkey, seleccione Archivo> Nuevo>

FireMonkey de aplicaciones mviles - Delphi> Aplicacin en blanco.
Seleccione TTabControl de la paleta de herramientas:
e mbarcadero
www.ittoolsltda.com
53
Despus de arrastrar el TTabControl, un TabControl vaco se muestra en el

formulario FireMonkey Mobile:
Normalmente, las aplicaciones que utilizan TabControl utilizan la pantalla

para mostrar las pginas. Para ello, es necesario cambiar la alineacin
predeterminada del TabControl. En el inspector de objetos, cambie la propiedad
del TabControl Align a alClient:
e mbarcadero
www.ittoolsltda.com
54
Captulo Dos
Haga clic con el TabControl y seleccione Editor de Elementos ... en el men

contextual:
Haga clic en Add Item tres veces, por lo que ahora tiene tres instancias de
TabItem. Cierre el cuadro de dilogo.
e mbarcadero
www.ittoolsltda.com
55
En FireMonkey Mobile Form Designer, seleccione el primer TabItem y cambie su

propiedad StyleLookup a tabitembookmarks (Solo iOS):
Puede colocar cualquier componente en cada pgina. Para ir a una pgina
diferente, simplemente haga clic en la pestaa que desee en el Diseador de

formularios, o cambiar la propiedad activeTab en el inspector de objetos:
e mbarcadero
www.ittoolsltda.com
56
Captulo Dos
Para cambiar la ubicacin de las pestaas, seleccione la propiedad TabPosition

para el componente TabControls. En cada pestaa, puede seleccionar
cualquiera de los siguientes valores de la propiedad TabPosition en el inspector
de objetos:
Uso de iconos personalizados para las pestaas

Usted puede utilizar iconos personalizados, as como texto personalizado para pginas con
pestaas siguiendo estos pasos:
Coloque un TabControl, establezca su alineacin (propiedad Align), y crear

varias pestaas en l:
e mbarcadero
www.ittoolsltda.com
57
Seleccione una pestaa y seleccione el botn de puntos suspensivos [...] en

el campo de mapa de bits de la propiedad CustomIcon del TTabItem en el
inspector de objetos:
Seleccione ... en el men:
En la propiedad text, cambie el texto de la ficha.
e mbarcadero
www.ittoolsltda.com
58
Captulo Dos
Despus de definir un icono personalizado, el marco FireMonkey genera una imagen

seleccionada y no seleccionada (atenuado) Imagen basada en el .Png determinado. Esta
transformacin se realiza utilizando el canal alfa de los datos de mapa de bits. Por ejemplo:
Definir controles dentro de un tabcontrol

Como hemos comentado, cada pgina puede contener cualquier nmero de controles,
incluyendo otro TabControl. En tal caso, usted puede navegar con facilidad y gestionar
diferentes pginas con pestaas en la vista de estructura:
e mbarcadero
www.ittoolsltda.com
59
Cambio de la pgina en tiempo de ejecucin

Por el usuario punteando en la pestaa
Si las pestaas son visibles (cuando la propiedad TabPosition se establece que no sea
tpNone), el usuario final slo tiene que pulsar Tab para cambiar entre las pginas.
Por las acciones y un actionlist.
Una accin corresponde a uno o ms elementos de la interfaz de usuario, como comandos
de men, botones de barra de herramientas y controles. Las acciones tienen dos funciones:
Las acciones representan las propiedades comunes de los elementos de la

interfaz de usuario, como si un control est habilitado o si una casilla est
seleccionada.
Las acciones responden como en un control de incendios, por ejemplo, cuando

el usuario hace clic en un botn de aplicacin o escoge un elemento de men.
Aqu estn los pasos para habilitar al usuario moverse a diferentes pginas de la ficha
haciendo clic en un botn:
En una aplicacin mvil FireMonkey, coloque un TabControl, y aada varios

elementos en l (TabItem1, TabItem2 y TabItem3).
De la paleta de herramientas, agregue un TButton a la forma, y luego aadir

un componente ActionList:
e mbarcadero
www.ittoolsltda.com
60
Captulo Dos
Seleccione el componente button en el Inspector de Objetos y seleccione

Accin | Nueva Accin estndar | Tab> TChangeTabAction en el men
desplegable. Despus de que el usuario haga clic en este botn, se realiza la
accin que acaba de definir (la pestaa cambia):
Seleccione ChangeTabAction1 en la Vista de Estructura y seleccione TabItem2

para la propiedad Tab en el Inspector de Objetos. Al vincular a TabItem2, esta
accin puede cambiar la pgina a TabItem2:
e mbarcadero
www.ittoolsltda.com
61
Con el paso anterior, ahora el ttulo (la propiedad Text) del botn se cambia
automticamente a Go To Security, ya que el ttulo de TabItem2 es Security
en nuestro ejemplo. Cambiar el tamao del botn para ajustar el nuevo texto,
o cambiar la propiedad CustomText del componente ChangeTabAction1 como
se muestra aqu:
ChangeTabAction tambin es compatible con la animacin de la diapositiva

para indicar una transicin entre pginas. Para utilizarlo, establezca la
propiedad Transition a ttSlide:
e mbarcadero
www.ittoolsltda.com
62
Captulo Dos
Por cdigo fuente

Puede utilizar cualquiera de las siguientes tres maneras de cambiar la etiqueta activa desde
el cdigo fuente:
Asigne una instancia de TTabItem a la propiedad activeTab:

TabControl1.ActiveTab:= TabItem1;
Cambie la propiedad TabIndex en un valor diferente. La propiedad TabIndex
es un valor entero de base cero (Se puede especificar cualquier nmero entre
0 y TabControl1.TabCount - 1).
TabControl1.TabIndex:=1;
Si se define ChangeTabAction, puede ejecutar una accin desde el cdigo as:

// You can set the target at run time if it is not defined yet.
ChangeTabAction1.Tab:= TabItem2;
// Call the action
ChangeTabAction1.Execute;
e mbarcadero
www.ittoolsltda.com
63
Uso de componentes
listbox para mostrar una
vista de tabla en una
aplicacin mvil.
Captulo Dos
FireMonkey utiliza el componente FMX.ListBox.TListBox para presentar una vista de tabla,

como estos ListBoxes:
Crear elementos en el componente LISTBOX

Seleccione Archivo> Nuevo> FireMonkey aplicaciones mviles - Delphi>
Aplicacin en blanco.
Seleccione el componente TListBox en la paleta de herramientas y colquelo
en el FireMonkey Mobile Form Designer. Para encontrar TListBox, introduzca

unos pocos caracteres (como tlist) en el cuadro de bsqueda de la paleta
de herramientas:
e mbarcadero
www.ittoolsltda.com
65
Seleccione el componente TListBox en el Diseador de formularios Mobile, vaya

al inspector de objetos y seleccione alClient para la propiedad Align:
En el FireMonkey Mobile Form Designer, haga clic en el componente TListBox y

seleccione Editor de Elementos:
e mbarcadero
www.ittoolsltda.com
66
Captulo Dos
En diseo de elementos, haga clic en el botn Agregar elemento varias veces

para agregar varios elementos al ListBox:
Cerrar el diseo de elementos. Ahora usted puede encontrar sus elementos

ListBox en el componente TListBox. Por ejemplo:
Agregar un encabezado
e mbarcadero
www.ittoolsltda.com
67
Puede definir un encabezado en el componente TListBox

utilizando los siguientes pasos:
En el FireMonkey Mobile Form Designer, haga clic en el componente TListBox y
seleccione Agregar elemento> TListBoxHeader:
En la paleta de herramientas, seleccione el componente TLabel y colquelo en

la parte superior del componente TListBoxHeader que acaba de agregar:
En el inspector de objetos, cambie las propiedades del componente TLabel la

siguiente manera:
Property
Value
Align
StyleLookup
TextAlign
Text
alClient
toollabel
taCenter
(texto que quiere)
e mbarcadero
www.ittoolsltda.com
68
Captulo Dos
Agregar un grupo encabezado / pie a la lista

Puede definir un encabezado de grupo y Pie de grupo para los artculos en el TListBox de
la siguiente manera:
Por FireMonkey Mobile Form Designer, haga clic en el componente TListBox y

seleccione Elementos Editor.
En el Diseador de elementos, seleccione TListBoxGroupHeader de la lista

desplegable y, a continuacin, seleccione Agregar elemento:
e mbarcadero
www.ittoolsltda.com
69
Seleccione TListBoxGroupFooter de la lista desplegable y seleccione Agregar

elemento.
Seleccione ListBoxGroupHeader1 en la lista de elementos y haga clic en el

botn varias veces hasta que este tema se convierta en el primer elemento de
la lista:
Cierre el cuadro de dilogo. Ahora usted tiene un encabezado de grupo y Pie

de grupo en el componente TListBox.
Indicar los elementos de lista como grupos elementos separados

Los elementos de un ListBox se pueden mostrar ya sea como una lista simple o una lista
agrupada. Esta eleccin es controlada por la propiedad GroupingKind y la propiedad
StyleLookup, como se muestra en el siguiente grfico:
Show Items as Plain List
Show Items as Grouped List
e mbarcadero
www.ittoolsltda.com
70
Captulo Dos
gsPlain = GroupingKind Property Value

listboxstyle = StyleLookup Property Value
gsGrouped = GroupingKind Property

Value
transparentlistboxstyle = StyleLookup
Property Value
Puede seleccionar cualquiera de los estilos para su componente TListBox en el Inspector

de Objetos.
Aadir una casilla de verificacin o cualquier otro accesorio a

un elemento LISTBOX
Cada elemento en un TListBox puede usar un accesorio, como marca de verificacin a
travs de la propiedad ItemData.Accessory. La siguiente imagen muestra el valor que se
puede asignar a ItemData.Accessory:
Usted puede seleccionar la propiedad Accessory en el inspector de objetos cuando se

selecciona un elemento del ListBox en el diseador de formularios.
e mbarcadero
www.ittoolsltda.com
71
Aadir un icono a un elemento LISTBOX

Cada elemento en un componente ListBox puede contener datos de mapa de bits, como un
icono, a travs de la propiedad ItemData.Bitmap:
Usted puede seleccionar la propiedad Bitmap en el inspector de objetos cuando se selecciona

el ListBoxItem en el Diseador de formularios.
Aadir informacin detallada de un elemento

Puede agregar informacin de texto adicional a cada elemento en el componente ListBox.
Especifique el texto adicional en la propiedad ItemData.Detail y seleccione la ubicacin del
Texto Detalle a travs de la propiedad StyleLookup, como se muestra en la siguiente tabla:
StyleLookup property
listboxitemnodetail
Look & Feel
listboxitembottomdetail
listboxitemrightdetail
listboxitemleftdetail
e mbarcadero
www.ittoolsltda.com
72
Captulo Dos
Agregar elementos a un listbox desde el cdigo

Para agregar elementos a un ListBox regular, slo tiene que llamar al mtodo Items.Add
como el siguiente cdigo:
ListBox1.Items.Add(Text to add);
Si desea crear objetos que no sean un elemento simple, o controlar otras propiedades, se
puede crear una instancia de la tarea primero, y luego aadirlo a la lista.
El cdigo siguiente agrega elementos a un ListBox, como se muestra en la imagen:
e mbarcadero
www.ittoolsltda.com
73
procedure TForm40.FormCreate(Sender:TObject);
var
c:Char;
i:Integer;
Buffer:String;
ListBoxItem : TListBoxItem;
ListBoxGroupHeader : TListBoxGroupHeader;
begin
ListBox1.BeginUpdate;
for c :=atozdo
begin
// Add header (A to Z) to the List
ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBox1);
ListBoxGroupHeader.Text:=UpperCase(c);
ListBox1.AddObject(ListBoxGroupHeader);
// Add items (a, aa, aaa, b, bb, bbb, c, ...) to
the list
for i :=1to3do
begin
// StringOfChar returns a string with a specified number of repeating characters.
Buffer :=StringOfChar(c, i);
// Simply add item
// ListBox1.Items.Add(Buffer);
// or, you can add items by creating an instance of TListBoxItem
by yourself
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;
e mbarcadero
www.ittoolsltda.com
74
Captulo Dos
Aadir una caja de bsqueda

Usted puede agregar un cuadro de bsqueda a un ListBox. Con un cuadro de bsqueda,
los usuarios pueden reducir fcilmente por una seleccin a partir de una larga lista, como
en las siguientes imgenes:
Para agregar un cuadro de bsqueda para el componente ListBox, haga clic en el

componente TListBox y simplemente seleccione Agregar elemento> TSearchBox en el
men contextual:
e mbarcadero
www.ittoolsltda.com
75
Uso de diseo para ajustar tamao

forma diferente u orientaciones en
una aplicacin mvil.
Captulo Dos
Este tutorial describe una estrategia general para el uso de una forma comn para los
diferentes factores de la forma (como iOS, Android), sin necesidad de utilizar diferentes
formas para cada factor de forma.
En el FireMonkey Mobile Form Designer, puede obtener una vista previa de la interfaz de
usuario sin necesidad de ejecutar la aplicacin en un dispositivo - slo cambiar el dispositivo
u orientacin en el desplegable de la esquina superior derecha:
Cada componente firemonkey puede tener un propietario, un

padre y un hijo
En primer lugar, todos los componentes FireMonkey tienen la idea de propietario, padres e
hijos. Si se coloca un componente en un formulario, la forma se convierte en el dueo y el
padre del componente.
Si aaden componentes (por ejemplo, un Button, Label y otros) a otro componente (por
ejemplo, una barra de herramientas), la barra de herramientas es el padre y el dueo del
Button, Label y otros. Usted puede ver esta relacin padre-hijo representada grficamente
en la vista de rbol en la vista de estructura.
e mbarcadero
www.ittoolsltda.com
77
El diseo de un hijo se define como un valor relativo a su padre. En la siguiente imagen,

Label1 es hijo de Barra de Toolbar1 y el diseo de Label1 es relativo a Toolbar1.
Uso de propiedades comunes relacionadas con el diseo de un

componente firemonkey
Usando la propiedad Align
La propiedad Align de un control determina si se vuelve a colocar de forma automtica
y/o cambiar de tamao a lo largo de los cuatro lados o el centro de su matriz, tanto
inicialmente como a medida que se cambia el tamao de la matriz. El valor predeterminado
de la propiedad Align es alNone, lo que significa que no se realizan clculos automticos:
el control se queda donde est colocado.
Los valores tpicos para la propiedad Align son los siguientes (Dodgerblue indica el rea
para el hijo):
alNone
alTop
alBottom
alLeft
alRight
alCenter
alClient
Si utiliza un valor Align en alTop, alBottom, alLeft o para un componente, la propiedad

Align de otros componentes utilizan el rea restante.
El tamao y la forma de la superficie restante (alClient) tambin cambia en funcin de la
orientacin del dispositivo, y con base en el factor de forma.
e mbarcadero
www.ittoolsltda.com
78
Captulo Dos
Las siguientes imgenes muestran el diseo de paisaje (horizontal) y para el retrato (vertical)
cuando se tienen dos (2) componentes que utilizan alTop, y un (1) componente que utiliza
alClient.
USO DE LA PROPIEDAD MARGINS

Margins garantiza la separacin entre los controles colocados automticamente por un
padre.
En la siguiente imagen, el lado derecho del componente (alClient) utiliza la propiedad
Margins para asegurar el espacio alrededor del componente.
e mbarcadero
www.ittoolsltda.com
79
USO DE LA PROPIEDAD PADDING

Relleno deja de lado el espacio en el interior de la caja de Contenido de los padres. En el
inspector de objetos, puede configurar los valores (en pxeles) para el relleno:
Left
Right
Bottom
Top
En la siguiente imagen, el componente principal (que contiene dos regiones) utiliza la
propiedad Padding para asegurar el espacio en el interior del componente principal:
Uso de la propiedad anchors

Se necesitan anclajes cuando un control debe mantener su posicin a una cierta distancia
de los bordes de su padre, o se deben estirar mientras se mantiene la distancia original
entre sus bordes y los bordes de su matriz. Anclando stick controles a los lados de los
contenedores y de estiramiento, si as se especifica.
Propiedades anchors del control Edit

Si usted tiene un control de edicin en la parte superior de una barra de herramientas,
es posible que desee mantener una distancia fija entre el borde derecho del control de
edicin y el borde de la forma (barra de herramientas). Anchor permiten especificar que un
control permanezca fijo en relacin a los lados de su padre.
e mbarcadero
www.ittoolsltda.com
80
Captulo Dos
Si desea que el control de edicin mantenga la misma posicin relativa con respecto a
la barra de herramientas (su padre), se puede establecer la propiedad Anchors en akLeft,
akTop, akRight. Cuando se cambia el tamao de la barra de herramientas, el control de
edicin cambia el tamao de acuerdo a la configuracin Anclas:
Propiedad Anchors en control Button

Si usted tiene un control Button en el extremo derecho de la barra de herramientas, es
posible que desee mantener la misma distancia entre el borde derecho del control Button y
el borde de la forma. Sin embargo, puede que no desee mantener la misma distancia entre
el borde izquierdo del control Button y el borde izquierdo del formulario. En este caso, se
puede establecer la propiedad Anchors en akTop, akRight (deselecionar akLeft), por lo que
el control Button mantiene las mismas distancias con la barra de herramientas (matriz) para
arriba y derecha.
Utilizacin del componente TLAYOUT

TLayout, es un componente que no es visible en tiempo de ejecucin, se puede utilizar para
agrupar controles secundarios para ser manipulados en su conjunto. Por ejemplo, puede
establecer la visibilidad de un grupo de controles a la vez estableciendo la propiedad Visible
de la disposicin. TLayout no configura automticamente cualquiera de las propiedades de
sus hijos. Para seleccionar los controles hijos del TLayout, utilice la vista de estructura.
e mbarcadero
www.ittoolsltda.com
81
Seleccione los controles que desea mover. A continuacin, arrastre el grupo de los controles
sobre el control que debe ser el padre, y soltar los controles all. En la vista de estructura,
el grupo de controles ahora es hijo de la nueva matriz:
1. Initial State
2. Highlight the Controls to

Move
3. Drag onto Parent
Usted puede utilizar Alinear, relleno, mrgenes, anclas, y otras propiedades de TLayout
para definir el diseo de un rea especfica. Usted puede utilizar el componente TLayout
igual que la etiqueta DIV en HTML.
e mbarcadero
www.ittoolsltda.com
82
Captulo Dos
TRABAJAR CON UNA INTERFAZ

COMPONENTE TVERTSCROLLBOX
BUSY:
USO
DE
UN
En general, usted no quiere que su forma tenga demasiados elementos, que puedan obligar
a los usuarios desplazarse por la interfaz de usuario. En muchos casos, se puede utilizar un
componente TabControl con varias pginas para evitar cualquier desplazamiento.
Si tiene que colocar muchos elementos en el formulario, puede utilizar un componente
TVertScrollBox para definir un rea de desplazamiento como se describe aqu:
Seleccione el dispositivo personalizado en FireMonkey Mobile Form Designer.
Cambiar el tamao del dispositivo personalizado arrastrando el borde de la

diseadora de la forma al tamao que desee.
Coloque un componente TVertScrollBox, y establezca su propiedad Align a

alClient. Esto hace que el TVertScrollBox llene el rea de cliente.
Localice los componentes en el componente TVertScrollBox:
e mbarcadero
www.ittoolsltda.com
83
Tomar y compartir una

imagen en una aplicacin
mvil.
Captulo Dos
Esta funcionalidad se proporciona como acciones, y usted tiene que escribir una sola lnea
de cdigo para cada tarea.
Una accin corresponde a uno o ms elementos de la interfaz de usuario, como comandos
de men, botones de barra de herramientas y controles.
Las acciones tienen dos propsitos:
Una accin puede representar propiedades comunes de elementos de la

interfaz de usuario por ejemplo, si un control est habilitado o si una casilla
est seleccionada.
Una accin puede responder a un control de incendios, por ejemplo, cuando

el usuario hace clic en un botn o elige un elemento del men.
CONSTRUYENDO LA INTERFAZ DE USUARIO PARA LA

APLICACIN
La interfaz de usuario de esta aplicacin de ejemplo es bastante simple, como se muestra
en la siguiente imagen:
e mbarcadero
www.ittoolsltda.com
85
Coloque los siguientes componentes en el Diseador de formularios:
Componente TToolBar
Tres componentes TButton. Cada botn utiliza diferentes iconos.
Establecer la propiedad StyleLookup para los tres botones
para cameratoolbuttonbordered, searchtoolbuttonbordered y
actiontoolbuttonbordered, respectivamente.
Componente TImage
Configurar la propiedad Align a alClient.
Componente TActionList
TOMAR UNA IMAGEN CON LA CMARA DEL DISPOSITIVO

MOVIL
Puede definir una accin para tomar una foto con la cmara del dispositivo mvil mediante
el uso de los siguientes pasos:
En el Diseador de formularios, seleccione el botn (para tomar una foto).

En el Inspector de Objetos, seleccione la propiedad Action de la lista desplegable.
Seleccione Nuevo Accin estndar | Mediateca | TTakePhotoFromCameraAction:
e mbarcadero
www.ittoolsltda.com
86
Captulo Dos
En la ficha Eventos, expanda el nodo de accin y, a continuacin, haga doble

clic en el evento OnDidFinishTaking.
Agregue el cdigo siguiente al controlador de eventos OnDidFinishTaking:
Este cdigo asigna una imagen tomada de la cmara del dispositivo mvil a la propiedad
de mapa de bits del componente TImage.
e mbarcadero
www.ittoolsltda.com
87
USANDO UNA IMAGEN DE LA FOTOTECA DEL DISPOSITIVO

MOVIL
Puede definir una accin para usar una foto de la Biblioteca de fotos con los siguientes
pasos:
En el Diseador de formularios, elija el botn que desea utilizar (para recoger

una foto).
En el Inspector de Objetos, haga clic en la lista desplegable de la
propiedad Accin y seleccione Nuevo Accin estndar | Mediateca |

TTakePhotoFromLibraryAction.

clic en el evento OnDidFinishTaking.
Agregue el cdigo siguiente al controlador de eventos OnDidFinishTaking.
El cdigo anterior asigna una imagen tomada de la Biblioteca de fotos de la propiedad de

mapa de bits del componente TImage.
Compartir o imprimir una imagen

Desde una aplicacin mvil, puede compartir una foto en los sitios de redes sociales (como
Facebook y Twitter), puede enviar la imagen a una impresora, usar la imagen como un
archivo adjunto a un correo electrnico, asignarla a contactos, y as sucesivamente.
e mbarcadero
www.ittoolsltda.com
88
Captulo Dos
Este servicio multi-accin se denomina Funcionalidad Share Sheet, y se puede implementar

esta funcionalidad utilizando los siguientes pasos:
En el Diseador de formularios, seleccione un botn (para compartir una

foto).
En el Inspector de Objetos, haga clic en la lista desplegable de la
propiedad Accin y seleccione Nuevo Accin estndar | Mediateca |

ShowShareSheetAction.

clic en el evento OnBeforeExecute.
Agregue el cdigo siguiente al controlador de eventos OnBeforeExecute:
El cdigo anterior asigna una imagen del componente TImage a Share Sheet Functionality.
Despus de seleccionar Facebook de la lista de servicios, puede publicar la foto en
Facebook con su comentario:
e mbarcadero
www.ittoolsltda.com
89
Recorrido por DataSnap
Captulo Tres
En esta seccin se describen los pasos bsicos para localizar su dispositivo mvil (con
latitud y longitud), como en la siguiente imagen:
DISEO DE LA INTERFAZ DE USUARIO

Esta aplicacin est diseada con dos componentes principales: un TListBox (a la izquierda)
y un TWebBrowser.
e mbarcadero
www.ittoolsltda.com
91
En el TListBox, establezca la propiedad Align a alLeft para reservar la parte

izquierda de la interfaz de usuario. A continuacin, cree los siguientes
subcomponentes en el marco del ListBox:
un componente TListBoxHeader con los siguientes sub-componentes:

un componente TLabel para mostrar el ttulo Situacin Demo.
un componente Switch (Switch1) para seleccionar on / off de
TLocationSensor.
un TListBoxGroupHeader con el texto su ubicacin.

un TListBoxItem con el nombre ListBoxItemLatitude y Latitude como
texto.
un TListBoxItem con el nombre ListBoxItemLongitude y Longitud como

texto.
un TListBoxGroupHeader con el texto Direccin actual.

un TListBoxItem con el nombre ListBoxItemAdminArea y AdminArea
como texto.
un TListBoxItem con el nombre ListBoxItemCountryCode y cdigo de

pas como texto.
un TListBoxItem con el nombre ListBoxItemCountryName y CountryName

como texto.
a TListBoxItem with the name ListBoxItemFeatureName and FeatureName

as text.
un TListBoxItem con el nombre ListBoxItemLocality y Localidad como

texto.
un TListBoxItem con el nombre ListBoxItemPostalCode y CdigoPostal

como texto.
un TListBoxItem con el
SubAdminArea como texto.
nombre
ListBoxItemSubAdminArea
un TListBoxItem con el nombre ListBoxItemSubLocality y SubLocality

como texto.
un TListBoxItem con el nombre ListBoxItemSubThoroughfare y

SubThoroughfare como texto.
un TListBoxItem con el nombre ListBoxItemThoroughfare y Vas como
texto.
un componente TWebBrowser (WebBrowser1) para mostrar la pgina Web
(Google Maps). Establecer la propiedad Align a alClient.
e mbarcadero
www.ittoolsltda.com
92
Captulo Cuatro
Despus de crear estos componentes, seleccione todos los artculos TListBoxItem y seleccione
listboxitemleftdetail en la propiedad StyleLookup. Esto permite que el TListBoxItem muestre
tanto el rtulo como el texto detallado.
EL SENSOR DE UBICACIN
El sensor de localizacin est envuelto por el componente TLocationSensor.
TLocationSensor dispara un evento OnLocationChanged cuando el dispositivo
detecta el movimiento. Puede ajustar la sensibilidad de TLocationSensor mediante la
propiedad Distance. Si establece Distance a 10, TLocationSensor dispara un evento
OnLocationChanged al mover 10 metros.
Lea la informacin localizacin (latitud y longitud) del componente

locationsensor
En primer lugar, el componente TLocationSensor necesita ser activado para su uso. Puede
activar / desactivar TLocationSensor basado en su entrada, como un componente TSwitch,
u otros eventos de aplicacin.
He aqu un fragmento de cdigo para controlar TLocationSensor basado en el cambio de
valor en el componente TSwitch:
Como se seal anteriormente, TLocationSensor dispara un evento OnLocationChanged

cuando se mueve el dispositivo mvil. Usted puede mostrar la ubicacin actual (latitud y
longitud) usando los parmetros de este controlador de eventos de la siguiente manera:
e mbarcadero
www.ittoolsltda.com
93
Mostrar la posicin actual usando google maps mediante un componente

Twebbrowser
Usted puede llamar a Google Maps desde el componente TWebBrowser con los siguientes
parmetros de URL:
http://maps.google.com/maps?q=Latitud,Longitud
As que usted puede agregar esta URL para el controlador de eventos creado anteriormente
OnLocationChanged la siguiente manera:
procedure
TForm44.LocationSensor1LocationChanged(Sender:TObject;
const OldLocation, NewLocation: TLocationCoord2D);
var
URLString:String;
begin
var
URLString:String;
begin
ListBoxItemLatitude.ItemData.Detail:= NewLocation.Latitude.
ToString;
ListBoxItemLongitude.ItemData.Detail:= NewLocation.Longitude.
ToString;
FormatSettings.DecimalSeparator := .;
URLString := http://maps.google.com/maps?q= + NewLocation.
Latitude.ToString + , + NewLocation.Longitude.ToString;
WebBrowser1.Navigate(URLString);
end;
Uso decodificacin inversa

TGeocoder es un objeto que envuelve el servicio de geocodificacin (o geocodificacin
inversa).
La Geocodificacin es el proceso de transformacin de datos geogrficos, tales como la
direccin y el cdigo postal, en coordenadas geogrficas. La Geocodificacin inversa es el
proceso de transformacin de coordenadas geogrficas en otros datos geogrficos, tales
como la direccin.
En este caso, utilizamos TGeocoder para hacer geocodificacin inversa a nuestra ubicacin
(latitud y longitud) de la informacin de direccin legible.
e mbarcadero
www.ittoolsltda.com
94
Captulo Cuatro
Esta es la secuencia bsica de acciones con TGeocoder:
Crear una instancia de TGeocoder.

Definir un evento OnGeocodeReverse para que usted pueda recibir el evento
despues.
Establezca un conjunto de datos para ejecutar geocodificacin inversa.

TGeocoder accede al servicio en la red para resolver la informacin de
direccin.
TGeocoder dispara un evento OnGeocodeReverse.

Su aplicacin iOS recibe la informacin de la direccin a travs del parmetro
OnGeocodeReverse y actualiza la interfaz de usuario.
Como TGeocoder no es un componente (esto es slo una clase), usted necesita definir
estos pasos a travs de su cdigo (no se puede colocar un componente, ni asignar un
controlador de eventos a travs del Inspector de Objetos).
En primer lugar, definir un nuevo campo FGeocoder: TGeocoder en la seccin privada
de la forma. Tambin puede definir un procedimiento OnGeocodeReverseEvent como en
el siguiente fragmento de cdigo.
Despus de definir las 2 lneas, vaya a la lnea OnGeocodeReverseEvent y digite CTRL +

SHIFT + C. Esto crea el siguiente procedimiento en el cdigo (que se utilizar ms adelante):
e mbarcadero
www.ittoolsltda.com
95
Ahora usted puede crear una instancia de TGeocoder y configurarla con los datos con el
siguiente cdigo
TGeocoder.Current da el tipo de clase que pone efectivamente en marcha el Servicio de

geocodificacin. El cdigo TGeocoder.Current.Create llama al constructor (Create) para
el tipo especificado y lo guarda en el campo FGeocoder. Tambin es necesario especificar
un controlador de eventos, que se activa cuando TGeocoder completa geocodificacin
inversa. Asignar OnGeocodeReverseEvent (que acaba de definir en el paso previo) a
FGeocoder.OnGeocodeReverse.
Por ltimo, si ha creado con xito una instancia de TGeocoder y TGeocoder no se est
ejecutando, llame TGeocoder.GeocodeReverse con la informacin de ubicacin. Despus
TGeocoder recibe datos, y el evento OnGeocodeReverseEvent se dispara.
procedure
TForm44.LocationSensor1LocationChanged(Sender:TObject;
const OldLocation, NewLocation: TLocationCoord2D);
begin
// code for previous steps goes here
// Setup an instance of TGeocoder
if not Assigned(FGeocoder)then
begin
if Assigned(TGeocoder.Current)then
FGeocoder := TGeocoder.Current.Create;
If Assigned(FGeocoder)then
FGeocoder.OnGeocodeReverse:= OnGeocodeReverseEvent;
end;
// Translate location to address
if Assigned(FGeocoder)and not FGeocoder.Geocoding then
FGeocoder.GeocodeReverse(NewLocation);
end;
e mbarcadero
www.ittoolsltda.com
96
Captulo Cuatro
MOSTRAR UNA DIRECCIN DE LECTURA EN EL COMPONENTE LISTBOX

Como se ha descrito anteriormente, una vez completada la geocodificacin inversa, un
envento OnGeocodeReverseEvent se dispara.
A continuacin, asignar propiedades del parmetro de direccin TCivicAddress para
mostrar la informacin de direcciones legibles en los campos del cuadro de lista:
procedure
TForm44.OnGeocodeReverseEvent(const Address: TCivicAddress);
begin
ListBoxItemAdminArea.ItemData.Detail:= Address.AdminArea;
ListBoxItemCountryCode.ItemData.Detail:= Address.CountryCode;
ListBoxItemCountryName.ItemData.Detail:= Address.CountryName;
ListBoxItemFeatureName.ItemData.Detail:= Address.FeatureName;
ListBoxItemLocality.ItemData.Detail:= Address.Locality;
ListBoxItemPostalCode.ItemData.Detail:= Address.PostalCode;
ListBoxItemSubAdminArea.ItemData.Detail:= Address.SubAdminArea;
ListBoxItemSubLocality.ItemData.Detail:= Address.SubLocality;
ListBoxItemSubThoroughfare.ItemData.Detail:= Address.SubThoroughfare;
ListBoxItemThoroughfare.ItemData.Detail:= Address.Thoroughfare;
end;
e mbarcadero
www.ittoolsltda.com
97
USO DEL CENTRO DE

NOTIFICACIN EN EL
DISPOSITIVO.
Captulo Tres
Cuando los usuarios configuran las notificaciones de aplicaciones en sus dispositivos, las
notificaciones pueden ser entregadas desde aplicaciones en los tres estilos bsicos que se
muestran aqu. El banner aparece brevemente, pero la alerta requiere un despido por parte
del usuario.
ACCEDER AL SERVICIO DE NOTIFICACIN

La interfaz del servicio de notificacin (IFMXNotificationCenter) se define como uno de los
servicios de la plataforma FireMonkey (TPlatformServices).
Para acceder al servicio de notificacin, hacer estas dos cosas:
Aadir las siguientes 2 unidades a la clusula uses si no estn presentes:
Ejecutar una consulta de la plataforma de servicios FireMonkey utilizando el

siguiente cdigo:
La interfaz IFMXNotificationCenter proporciona servicios bsicos para utilizar el nmero de

placa del icono, as como la notificacin.
e mbarcadero
www.ittoolsltda.com
99
INDIQUE EL NMERO DE INSIGNIA DEL ICONO DESDE CDIGO

IFMXNotificationCenter tiene el mtodo SetIconBadgeNumber para definir el nmero de
placa del icono:
Despus de establecer el nmero de placa del icono a 18, se puede ver en su pantalla de
inicio de iOS:
Tambin puede restablecer el nmero de placa del icono con el mtodo

ResetIconBadgeNumber:
HORARIO DE NOTIFICACIN
Tambin puede programar mensajes de notificacin por el mtodo ScheduleNotification.
Para mostrar un mensaje de notificacin, es necesario crear una instancia de la clase
TNotification y, a continuacin, definir el nombre (identificador) y el mensaje:
e mbarcadero
www.ittoolsltda.com
100
Captulo Cuatro
procedure TForm1.ScheduleNotification;
var
NotificationService: IFMXNotificationCenter;
Notification: TNotification;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNot
ificationCenter)then
NotificationService := TPlatformServices.Current.GetPlatform
Service(IFMXNotificationCenter)as IFMXNotificationCenter;
ifAssigned(NotificationService)then
begin
Notification := TNotification.Create;
try
Notification.Name:=MyNotification;
Notification.AlertBody:=Delphi for iOS is here!;
// Fired in 10 second
Notification.FireDate:=Now+EncodeTime(0,0,10,0);
// Send notification in Notification Center
NotificationService.ScheduleNotification(Notification);
finally
Notification.Free;
end;
end
end;
Despus de configurar la notificacin de mensajes, se puede ver en la parte superior de la

pantalla principal del iOS:
e mbarcadero
www.ittoolsltda.com
101
ACTUALIZAR O
PROGRAMADO
CANCELAR
UN
MENSAJE
DE
NOTIFICACIN
Cada mensaje de notificacin programada se identifica mediante la propiedad Name del

objeto TNotification.
Para actualizar una notificacin programada, simplemente llame ScheduleNotification de
nuevo con una instancia de TNotification que tiene el mismo nombre (Nombre de propiedad).
Para cancelar una notificacin programada, slo tiene que llamar al mtodo
CancelNotification con el identificador que utiliz:
procedure TForm1.CancelNotification;
var
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNoti
ficationCenter)then
NotificationService := TPlatformServices.Current.GetPlatfo
rmService(IFMXNotificationCenter)as IFMXNotificationCenter;
NotificationService.CancelNotification(MyNotification);
end;
PRESENTAR EL MENSAJE DE NOTIFICACIN INMEDIATA

Tambin puede mostrar el mensaje de notificacin inmediata a travs PresentNotification.
Para mostrar un mensaje de notificacin, es necesario crear una instancia de la clase
TNotification y, a continuacin, definir el nombre (identificador) y el mensaje:
procedure TForm1.PresentNotification;
var
Notification: TNotification;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNoti
ficationCenter)then
NotificationService := TPlatformServices.Current.GetPlatfo
rmService(IFMXNotificationCenter)as IFMXNotificationCenter;
begin
try
// Set Icon Badge Number as well
Notification.ApplicationIconBadgeNumber:=18;
e mbarcadero
www.ittoolsltda.com
102
Captulo Cuatro
// Show Notification Message

NotificationService.PresentNotification(Notification);
finally
Notification.Free;
end;
end;
end;
e mbarcadero
www.ittoolsltda.com
103
BANNER DE NOTIFICACIN O AVISO DE NOTIFICACIN

Por defecto, la aplicacin muestra el banner de aviso:
Banner de notificacin en el iPad
Alerta de notificacin
Para utilizar una alerta de notificacin en lugar de un banner de aviso, el usuario final
tiene que cambiar el estilo de comunicacin a travs de la pgina de configuracin del
Centro de Notificacin:
e mbarcadero
www.ittoolsltda.com
104
Captulo Cuatro
AADIR ACCIN PARA LA NOTIFICACIN DE ALERTA

Tambin puede personalizar una alerta mediante la adicin de un botn de accin.
Para personalizar una accin de alerta, es necesario configurar la accin en la propiedad
Alertaction, a continuacin, establecer la propiedad HasAction en True, de la siguiente
manera:
try
Notification.AlertAction:=Code Now!;
Notification.HasAction:=True;
// Fired in 10 seconds
Notification.FireDate:=Now+EncodeTime(0,0,10,0);
// Show Notification Message
NotificationService.ScheduleNotification(Notification);
finally
Notification.Free;
end;
e mbarcadero
www.ittoolsltda.com
105
Uso sqlite en una

aplicacin Movil.
Captulo Tres
Uso dbexpress para conectarse a la base de datos

DbExpress es un marco de acceso a base de datos muy rpido, escrito en Delphi. RAD
Studio proporciona controladores para la mayora de las principales bases de datos, como
InterBase, Oracle, DB2, SQL Server, MySQL, Firebird, SQLite y ODBC. Puede acceder
a estas diferentes bases de datos utilizando procedimientos similares al procedimiento
descrito aqu.
Para la plataforma iOS y Android, dbExpress apoya InterBase Togo, as como

SQLite. Estos productos de bases de datos se pueden ejecutar en dispositivos
iOS.
Para otras bases de datos como Oracle, es necesario tener al menos una
biblioteca de cliente. En las plataformas Windows, la biblioteca cliente

se proporciona como un archivo DLL para conectarse. Por lo tanto, es
necesario desarrollar aplicaciones que utilicen tecnologas de nivel medio
como DataSnap para conectarse a estos productos de base de datos desde
dispositivos iOS y Android.
CREACIN DE LA BASE DE DATOS EN EL ENTORNO WINDOWS PARA

FINES DE DESARROLLO
En primer lugar, es necesario crear un archivo de base de datos SQLite en su plataforma
de desarrollo de Windows. Utilice los pasos siguientes, de modo que usted puede utilizar el
Diseador de formularios Mobile para disear la interfaz de usuario de la aplicacin iOS.
CREAR LA BASE DE DATOS DE LOS DATOS EXPLORER

En el disco c: crear una carpeta llamada temp y dentro de esta un archivo
llamado prueba.db: C:\temp\prueba.db
Agregar el archivo al Deployment Project->Deployment.
e mbarcadero
www.ittoolsltda.com
107
Ir al Explorador de datos, haga clic en el nodo SQLite y seleccione Agregar

nueva conexin:
Defina el nombre de la conexin, como ShoppingList.
Especifique la ubicacin del archivo de base de datos:
Haga clic en el botn Opciones avanzadas y abrir el cuadro de dilogo

Propiedades avanzadas.
Cambie la propiedad FailIfMissing a False y cierre el cuadro de dilogo:
Nota: El ajuste FailIfMissing en False indica al explorador de datos que debe crear un nuevo
archivo de base de datos si el archivo no est disponible.
e mbarcadero
www.ittoolsltda.com
108
Captulo Cuatro
Haga clic en el botn Probar conexin. Con esta operacin, se crea el nuevo
archivo de base de datos si no exista el archivo:
Crear tabla en el Dataexplorer

En el Explorador de datos, seleccione el nodo ShoppingList en la seccin de
SQLite y seleccione Nueva tabla en el men contextual.
Especifique una columna titulada ShopItem como valor = TEXT.
Haga clic en el botn Guardar y especifique un nombre de la tabla (por

ejemplo, Item.)
e mbarcadero
www.ittoolsltda.com
109
Crear y configurar la interfaz de usuario
Para configurar un componente ListBox y otros elementos de interfaz de usuario, siga estos
pasos:
Crear una aplicacin FireMonkey mvil mediante Archivo> Nuevo> FireMonkey

aplicaciones mviles - Delphi.
Agregar un TToolBar en el formulario.

Agregar un TButton en el componente TToolBar.
Establezca las siguientes propiedades en el inspector de objetos:
Establezca la propiedad Name a ButtonAdd.
Ajuste StyleLookup a addtoolbuttonbordered.
Agregar un TButton en el componente TToolBar.

Establezca la propiedad Name a ButtonDelete.
Ajuste StyleLookup a deletetoolbutton.
Establecer el texto para eliminar.
Ajuste Visible a False.
Agregar un TLabel en el componente TToolBar.
e mbarcadero
www.ittoolsltda.com
110
Captulo Cuatro

Ajuste Align a alClient.
Ajuste StyleLookup a toollabel.
Establecer el texto a Shopping List.
Ajuste TextAlign a taCenter.
Coloque un componente TListBox en el formulario.

Establecer la propiedad Align a alClient, por lo que el componente
ListBox utiliza el formulario completo.
CONEXIN A LOS DATOS

Los siguientes son los pasos bsicos para conectarse a los datos en una base de datos que
ya est definida en el explorador de datos:
Seleccione la tabla Item en el explorador de datos y arrstrela al diseador de

formularios.
Nota: Esto crea dos componentes (ShoppingList: TSQLConnection e Item:

TSQLDataSet) en el formulario.
Seleccione el componente ShoppingList en el formulario y, a continuacin,

cambie la propiedad Connected a True.
Seleccione el componente Item en el formulario y, a continuacin, cambie la

propiedad Active a True.
Seleccione Ver> LiveBindings Designer y se abre el Diseador LiveBindings.

Seleccione ShopItem en el componente Item y arrastre ShopItem a ListBox1.
e mbarcadero
www.ittoolsltda.com
111
Despus de estos pasos se conecta la interfaz de usuario de la aplicacin con los datos
de una base de datos SQLite. Si ha utilizado una tabla con los datos existentes para este
tutorial, ahora debera ver los datos reales en el Diseador de formularios.
Crear el controlador de eventos para que el botn Delete sea visible cuando
el usuario selecciona un elemento de la lista
La propiedad Visible para el botn Delete se establece en False. Por lo tanto, por defecto,
el usuario final no ve este botn. Puede que sea visible cuando el usuario selecciona un
elemento de la lista, de la siguiente manera:
Seleccione ListBox1 y definir el siguiente controlador de eventos para el evento OnItemClick.
Creacin de la controlador de eventos para el botn agregar para agregar

una entrada a la lista
El siguiente paso es agregar una funcin a esta aplicacin para aadir un elemento a la
lista de la compra.
Coloque un componente TSQLQuery al formulario.

Establezca la propiedad Name a SQLQueryInsert.
Establezca la propiedad SqlConnection a ShoppingList.
Establezca la propiedad SQL de la siguiente manera:
INSERT INTO ITEM (ShopItem) VALUES (:ShopItem)
Seleccione el botn Expand (...) en la propiedad Params.
Seleccione el parmetro ShopItem y establecer DataType a ftString:
e mbarcadero
www.ittoolsltda.com
112
Captulo Cuatro
En el Diseador de formularios, haga doble clic en el componente
AddButton. Agregue el siguiente cdigo a este controlador de eventos:
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;
ButtonDelete.Visible:= ListBox1.Selected<>nil;
end;
except
on e: Exception do
begin
ShowMessage(e.Message);
end;
end;
end;
La funcin InputQuery muestra un cuadro de dilogo que pide al usuario que introduzca
texto. Esta funcin devuelve True cuando el usuario selecciona OK, as que usted puede
agregar datos a la base de datos slo cuando el usuario selecciona OK y el texto contiene
algunos datos.
e mbarcadero
www.ittoolsltda.com
113
Creacin del controlador de eventos para el botn eliminar para eliminar

una entrada de la lista
El siguiente paso es agregar una funcin a esta aplicacin para eliminar un elemento de la
lista de la compra:
Coloque un componente TSQLQuery en el formulario.
Establezca la propiedad Name a SQLQueryDelete.
Establezca la propiedad SqlConnection a ShoppingList.
Establezca la propiedad SQL de la siguiente manera:
delete from Item where ShopItem = :ShopItem
Seleccione el botn Expand (...) en la propiedad Params.
Seleccione el parmetro ShopItem y establecer DataType a ftString.
En el Diseador de formularios, haga doble clic en el componente
DeleteButton. Agregue el siguiente cdigo a este controlador de eventos.
procedure TForm1.ButtonDeleteClick(Sender:TObject);
var
TaskName:String;
begin
TaskName := ListBox1.Selected.Text;
try
me;
SQLQueryDelete.ParamByName(ShopItem).AsString:= TaskNa-
SQLQueryDelete.ExecSQL();
Item.Refresh;
ButtonDelete.Visible:= ListBox1.Selected<>nil;
except
on e: Exception do
begin
SHowMessage(e.Message);
end;
end;
end;
e mbarcadero
www.ittoolsltda.com
114
Captulo Cuatro
Modificacin de su cdigo para conectarse a un archivo local de base de

datos en IOS/Android
Las caractersticas bsicas de esta aplicacin 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 IOS a menos que lo copie en el
dispositivo iOS o lo crear en la marcha.
Puede crear una base de datos y una tabla SQLite con los siguientes pasos:
Especificacin de la ubicacin de la base de datos sqlite en el dispositivo IOS/
Android
En el Diseador de formularios, seleccione el componente ShoppingList.

En el Inspector de Objetos, haga doble clic en el evento BeforeConnect.
Agregue el siguiente cdigo a este controlador de eventos:
procedure TForm1.SQLConnectionSQLiteBeforeConnect(Sender:TObj
ect);
begin
{$IFDEF IOS}
ShoppingList.Params.Values[Database]:= GetHomePath + PathDelim +
Documents+ PathDelim +shoplist.s3db;
{$ENDIF}
end;
La funcin GetHomePath le da la ubicacin real de una aplicacin para iOS/Android.

Usar el System.SysUtils.PathDelim es recomendable, PathDelim utiliza especficamente el
delimitador de la plataforma de destino (en lugar de los delimitadores no modificables,
como \ o /).
e mbarcadero
www.ittoolsltda.com
115
CREACIN DE UNA TABLA SI NO EXISTE NINGUNA

Con SQLite puede crear una tabla cuando no existe ninguna tabla, utilizando la sentencia
CREATE TABLE IF NOT EXISTS. Usted puede crear una tabla despus de que el componente
TSQLConnection se conecta a la base de datos y antes de que el componente TSQLDataSet
se conecta a la tabla. Utilice los siguientes pasos:
En el Diseador de formularios, seleccione el componente ShoppingList.
En el Inspector de Objetos, haga doble clic en el evento AfterConnect.
Agregue el siguiente cdigo a este controlador de eventos:
procedure TForm1.ShoppingListAfterConnect(Sender:TObject);
begin
ShoppingList.ExecuteDirect(CREATE TABLE IF NOT EXISTS Item
(ShopItem TEXT NOT NULL));
end;
Ejecutar la aplicacin en el simulador de iOS/Android o en un dispositivo

Ahora la aplicacin est lista para funcionar (seleccione Ejecutar> Ejecutar).
e mbarcadero
www.ittoolsltda.com
116
Captulo Cuatro
CONEXIN A UNA BASE

DE DATOS EMPRESARIAL
DESDE UN CLIENTE
MOVIL.
Captulo Tres
El primer paso es crear un servidor DataSnap.

Ir a File->New->Other.
Seleccionar DataSnap Server->DataSnap Server
e mbarcadero
www.ittoolsltda.com
119
Se puede escoger entre 3 tipos de servidor: VCL, Consola o Servicio. En este caso Se
creara un servidor VCL.
Se puede escoger protocolos entre otras opciones. Puede seleccionar la combinacin

que desee, pero asegrese de que TCP/IP este siempre seleccionado. La seleccin de un
protocolo de comunicacin de esta lista permite la seleccin de los puertos de comunicacin
para los protocolos que se han seleccionado, en el siguiente paso del asistente DataSnap
Server.
Nota: si selecciona HTTPS como el protocolo de comunicacin, el Asistente DataSnap
servidor mostrar una pgina adicional, solicitando informacin sobre los archivos de
certificado.
e mbarcadero
www.ittoolsltda.com
120
Captulo Cuatro
Luego escoger el puerto a trabajar, por defecto se utiliza el puerto 211. Se puede verificar
que el puerto a utilizar se encuentre libre o buscar un puerto disponible.
A continuacin seleccionar el ancestro de la clase del servidor.
e mbarcadero
www.ittoolsltda.com
121
e mbarcadero
www.ittoolsltda.com
122
Captulo Cuatro
A continuacin se configurara la interfaz de usuario del servidor. Se agregaran dos botones

y un Label.
Antes de continuar la propiedad AutoStart del componente DSServer se lleva a False.
e mbarcadero
www.ittoolsltda.com
123
Regresando a la interfaz de usuario del servidor, se procede a programar los botones pero
primero hay que usar la unidad ServerContainer.
e mbarcadero
www.ittoolsltda.com
124
Captulo Cuatro
La programacin para el botn iniciar y detener:
El siguiente paso ser guardar nuestro servidor, para esto se creara un conjunto de carpetas,
una carpeta para los archivos del servidor y otra carpeta para los archivos del cliente.
e mbarcadero
www.ittoolsltda.com
125
Se guardara el proyecto con el nombre Servidor en la carpeta servidor.
A continuacin en la unidad ServerMethodsUnit1 se configurara una conexin a la base de

datos de ejemplo de FireBird EMPLOYEE.FDB.
e mbarcadero
www.ittoolsltda.com
126
Captulo Cuatro
El paso siguiente es agregar un componente TSqlQuery (dbExpress) y un componente

TDataSetProvider (Data Access) y configurar estos componentes:
e mbarcadero
www.ittoolsltda.com
127
Se configuran las propiedades SQLConnection y SQL.
e mbarcadero
www.ittoolsltda.com
128
Captulo Cuatro
Se agrega el componente TDataSetProvider y se configura
e mbarcadero
www.ittoolsltda.com
129
A continuacin se ejecuta el servidor y luego se inicia:
Con el servidor iniciado se procede a crear el cliente mvil que va a consumir los datos,
para esto se creara un nuevo proyecto en el grupo de proyectos del proyecto existente
haciendo clic derecho sobre ProjectGroup1:
e mbarcadero
www.ittoolsltda.com
130
Captulo Cuatro
Luego se guarda el nuevo proyecto en una carpeta llamada cliente:
El archivo ProjectGroup1.groupproj se guarda en la raz del conjunto de carpetas:
e mbarcadero
www.ittoolsltda.com
131
Para un mayor orden se le cambiara el nombre a los proyectos a servidor y cliente.
A continuacin se procede a crear el cliente DataSnap dentro del proyecto cliente. ir a File>New->other.
e mbarcadero
www.ittoolsltda.com
132
Captulo Cuatro
Seleccionar DataSnap Client Module.
Se debe especificar si el servidor es remoto o local.
e mbarcadero
www.ittoolsltda.com
133
A continuacin se especifica si el servidor es totalmente DataSnap o se trabajara en conjunto

con otras tecnologas de servidor.
Luego se selecciona el protocolo(s) con el que el servidor trabaja.
e mbarcadero
www.ittoolsltda.com
134
Captulo Cuatro
Por ltimo se especifica la direccin y el puerto de conexin al servidor.
Se crea el conjunto de archivos del cliente.
e mbarcadero
www.ittoolsltda.com
135
A continuacin se guarda el proyecto en la carpeta cliente creada previamente.
El archivo ProjectGroup1.groupproj no pertenece ni al cliente ni al servidor por lo tanto se

guarda en la raz del conjunto de carpetas.
e mbarcadero
www.ittoolsltda.com
136
Captulo Cuatro
Se procede a configurar la unidad ClientModuleUnit1, en esta unidad se agrega un

componente DSProviderConnection que se encuentra en la pestaa DataSnap Client de la
paleta de herramientas.
Se configuran las propiedades SQLConnection y ServerClassName del componente

DSProviderConnection1 (la propiedad ServerClassName representa la clase del servidor
donde estn los objetos de bases de datos).
A continuacin se agrega un componente ClientDataSet que se encuentra en la pestaa

Data Access de la paleta de herramientas.
e mbarcadero
www.ittoolsltda.com
137
Luego se configuran las propiedades RemoteServer y ProviderName (Este es el DataSetProvider

del servidor).
A continuacin se procede a configurar la unidad que representa la interfaz de usuario, en

este caso es Unit5, el primer paso ser usar la unidad ClientModuleUnit1.
e mbarcadero
www.ittoolsltda.com
138
Captulo Cuatro
Luego se agrega un componente DataSource de la pestaa Data Access y se enlaza su

propiedad DataSet con el componente ClientDataSet1 de la unidad ClientModule1.
A continuacin se agrega un componente StringGrid de la pestaa Grids de la paleta de

componentes.
e mbarcadero
www.ittoolsltda.com
139
Tambin agregar un componente BindNavigator de la pestaa LiveBindings en la paleta de

herramientas y de la propiedad Visible Buttons Seleccionar todas las casillas.
e mbarcadero
www.ittoolsltda.com
140
Captulo Cuatro
A continuacin presionar clic derecho del mouse sobre el formulario y seleccionar Bind
Visually.
Luego, en el LiveBindings Designer enlazar con el mouse el ClientDataSet con los

componentes BindNavigtor1 y StringGrid1.
e mbarcadero
www.ittoolsltda.com
141
A continuacin agregar el siguiente cdigo al evento OnShow del formulario.

Como paso final ejecutar la aplicacin. Para ms informacin sobre configuracin,
desarrollo y despliegue mvil consulte: http://docwiki.embarcadero.com/RADStudio/XE5/
en/Main_Page seccin Mobile Development.
e mbarcadero
www.ittoolsltda.com
142
Captulo Cuatro

Movi Les Certificacion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Movi Les Certificacion

Uploaded by

Copyright:

Available Formats

Capitulo Uno

Instalacin y configuracin de los ambientes.

Desarrollo de aplicaciones moviles con FireMonkey-Creando la

Utilizar un componente Button con diversos estilos en una aplicacin

Utilizar un componente calendario para recoger una fecha en una

Uso de componentes para cuadros combinados para recoger

Uso del componente Explorador Web en una aplicacin mvil

Uso de componentes TAB para mostrar pginas en aplicaciones

Uso de componentes listbox para mostrar una vista de tabla en una

Uso de diseo para ajustar tamao forma diferente u orientaciones

Tomar y compartir una imagen en una aplicacin mvil.

90 Uso de sensores ubicacin en el dispositivo mvil.

Configurar el entorno de desarrollo en el Mac

Una aplicacin FireMonkey destinada a la plataforma iOS se prueba inicialmente en

Pasos para configurar su MAC para ejecutar la aplicacin IOS EN EL

Material de capacitacin exclusivo de ITTOOLS - prohibida su reproduccin

Paso 1: Instalando el asistente de plataforma

En la carpeta PAServer dentro del directorio de instalacin de RAD Studio.

Paso 2: Ejecute el asistente de plataforma

Navegue al nivel superior de la carpeta de aplicaciones.

Recorrido por el IDE

Aparecer la ventana de terminal, que muestra la ventana Asistente Plataforma

A continuacin se le pedir que introduzca su contrasea de usuario de Mac

para que el Asistente de Plataforma depure (tome el control de otro proceso)

Paso 3: Instalar Xcode en el MAC

En el DVD Mac OS X Install, Instalaciones opcionales, haga doble clic en

En App Store, descargar Xcode de forma gratuita.

1. Registro (gratis) como un desarrollador de Apple en http://developer.

Material de capacitacin exclusivo de ITTOOLS - prohibida su reproduccin

Pasos adicionales para configurar tu Mac para ejecutar la aplicacin IOS

Iniciar Xcode para Mac.

En el panel General, haga clic en Descargas.

Haga clic en el botn Instalar junto a Herramientas de lnea de comandos.

Recorrido por el IDE

PASO 2: Regstrese para obtener una cuenta de desarrollador

Como un desarrollador individual.

PASO 3: SOLICITUD, descargar e instalar el certificado de desarrollo

En la aplicacin Acceso a Llaveros en su Mac, seleccione en el men Acceso a

Llaveros: Asistente para Certificados> Solicitar un certificado de una entidad

Guardar la solicitud de certificado como un archivo y, a continuacin, enviarlo

Material de capacitacin exclusivo de ITTOOLS - prohibida su reproduccin

Ir a iOS Provisioning Portal. Puede descargar el certificado de Desarrollo tras el

Inicie el Certificado de Desarrollo haciendo doble clic en l. Se carga

PASO 4: Registrar un dispositivo para el despliegue

Asegrese de que el dispositivo iOS est conectado a su mquina Mac.

Recorrido por el IDE

La cadena de identificador representa la UDID del dispositivo.

Si usted es un desarrollador individual, registre el dispositivo aadiendo el

Si usted es parte de una empresa / organizacin, pregunte a su equipo de

PASO 5: crear e instalar un perfil de suministro

Abra Xcode para Mac e ir el a Organizador (Ventana> Organizador).

Los perfiles de datos disponibles para que se instalen en su Xcode:

Seleccione un perfil de aprovisionamiento iOS vlido y arrastrar y soltar en el

Ha configurado el Mac para ejecutar su aplicacin iOS para su dispositivo iOS.

Material de capacitacin exclusivo de ITTOOLS - prohibida su reproduccin

Configurar el entorno de desarrollo para iOS en Windows pc

Instalacin en el Entorno RAD Studio

Abrir las herramientas> Opciones> Opciones de Entorno > Administrador de

Recorrido por el IDE

A continuacin aparece el asistente para Crear un perfil de conexin. Definir

En la pgina de informacin de la mquina, establezca el nombre o la

direccin IP del host de Mac, un nmero de puerto a utilizar (el puerto

Haga clic en Probar conexin y asegrese de que el perfil de conexin se