Vous êtes sur la page 1sur 313

Tutoriales móviles

RAD Studio 10.2 Tokio


© 2017 Embarcadero Technologies, Inc. Embarcadero, los logos de Embarcadero Technologies, y todos los otros nombres Embarcadero
Technologies productos o servicios son marcas comerciales o marcas comerciales registradas de Embarcadero Technologies, Inc. Todas las
demás marcas comerciales son propiedad de sus respectivos dueños.

Embarcadero Technologies, Inc. es un proveedor líder de herramientas premiadas para los desarrolladores de aplicaciones y
profesionales de bases de datos para que puedan diseñar sistemas derecha, construirlos más rápido y funcionar mejor,
independientemente de su plataforma o lenguaje de programación. Noventa de la lista Fortune 100 y una comunidad activa de más de
tres millones de usuarios de todo el mundo confían en los productos de Embarcadero para aumentar la productividad, reducir costes,
simplificar la gestión del cambio y el cumplimiento y acelerar la innovación. herramientas del buque insignia de la compañía incluyen:
Embarcadero® Change Manager ™, CodeGear RAD Studio ™, DBArtisan®, Delphi®, ER / Studio, JBuilder® y Rapid SQL®. Fundada en
1993, Embarcadero tiene su sede en Austin, con oficinas ubicadas en todo el mundo. Embarcadero está en línea en www.embarcadero.com
. De marzo de 2017

Embarcadero Technologies 2
do ONTENIDOS
Tutoriales móviles: Desarrollo de aplicaciones móviles (iOS y Android) ........................... 10
Preparar ................................................. .................................................. .................................... 11
El uso de elementos de la interfaz de usuario básico ............................................. ....................................... 11
El uso de la funcionalidad del dispositivo ............................................... .................................................. ... 13
El uso de backend como servicio ............................................. .................................................. .... 14
Acceso a una base de datos ............................................... .................................................. ........... 15
Ver también ................................................ .................................................. ............................ 15
Tutorial móvil: Configurar el entorno de desarrollo en el Mac (IOS) .................... 16
Requisitos en el Mac y el IOS ............................................ ....................................... dieciséis
Pasos para configurar su Mac para ejecutar su aplicación iOS ........................................ ... dieciséis
Paso 1: Instalar el Asistente Plataforma ........................................... .................................. 17
Paso 2: Ejecutar el Asistente Plataforma ........................................... ..................................... 18
Paso 3: Instalar Xcode en el Mac .......................................... ........................................ 19
Próximos pasos ................................................ .................................................. ..................... 20
Pasos adicionales para configurar su Mac para ejecutar su aplicación iOS en tu dispositivo iOS
... ..................... ........................................ . ............................................................................... . 20
Paso 1: Asegúrese de que las herramientas Xcode línea de comandos se ha instalado en su Mac .. 20 Paso 2: Regístrese para
obtener una cuenta de desarrollador ...................... .................................................. 22
Paso 3: Solicitud, descargar e instalar su certificado de Desarrollo ......................... 22
Solicitud, descargar e instalar su certificado ........................................... ............... 22
Paso 4: Registrar un dispositivo para la implementación .......................................... ....................... 24
Paso 5: crear e instalar un archivo de suministro ......................................... ..................... 24
Ver también ................................................ .................................................. ............................ 25
Tutorial móvil: configurar el entorno de desarrollo en PC con Windows (IOS) ............ 26
Configuración de la RAD Studio Ambiente ............................................ ........................... 26
Crear un perfil de conexión para el Mac ........................................... ........................... 26
Añadir un SDK para el Sistema de Desarrollo para el dispositivo iOS conectado a la Mac29 Véase también
................................. .................................................. ........................................... 31
Tutorial móvil: configurar el entorno de desarrollo en PC con Windows (Android) ..... 33
Ver también ................................................ .................................................. ............................ 33
Tutorial móvil: Creación de una aplicación para plataformas móviles (iOS y Android) ......... 34
Antes de que empieces ............................................... .................................................. ................ 34
Paso 1: Crear una nueva aplicación de FireMonkey para Android o iOS ............................... 34
Paso 2: Seleccione un estilo ............................................ .................................................. ............ 36
Paso 3: colocar los componentes en el Formulario de ....................................... Multi-Device ............ 36
Paso 4: Adición de vistas para su proyecto .......................................... ..................................... 39
Paso 5: Escribir un controlador de eventos para un clic de botón por el usuario .................................... 39 ..
Paso 6: Prueba de su aplicación móvil ........................................... .................................... 40
Probar la aplicación Android en el dispositivo Android .......................................... .... 41
Probar la aplicación iOS .............................................. ............................................... 42
Ver también ................................................ .................................................. ............................ 43
Tutorial móvil: El uso de una libreta de direcciones de componentes (iOS y Android) ........................ 45
Características básicas de los componentes TAddressBook ............................................ .............. 46

Embarcadero Technologies 3
Creación de una aplicación de ejemplo .............................................. ........................................... 46
El diseño de la interfaz de usuario .............................................. ........................................... 46
Recuperando la lista de contactos .............................................. ............................................. 49
Implementación del Control de Elementos Funcionalidad ............................................. ......... 51
Mantener libreta de direcciones de sincronización ............................................. ........................................ 54
Configuración del acceso a la libreta de direcciones ............................................. .............................. 55
Ejecución de la aplicación de ejemplo .............................................. ........................................ 57
Ver también ................................................ .................................................. ............................ 59
Ejemplos de código ................................................ .................................................. ............... 59
Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android) .... 60
Botones en plataformas móviles .............................................. ................................................ 60
Definir la apariencia de un componente Button ......................................... .............. 61
Usando tintColor y IconTintColor en los botones ............................................ ............... 62
Usando diseñadas y coloreadas botones de Plataformas de destino .......................................... ... 64
Personalización de botones con estilos .............................................. ..................................... 64
La colocación de una imagen sobre un botón ............................................ ........................................ 64
Crear un control segmentado Utilización de componentes Botón ........................................... ... sesenta y cinco
Crear una barra de Alcance en una barra de herramientas de componentes .......................................... ...................... 67
Las diferencias importantes entre un TButton y TSpeedButton ..................................... 68
Ver también ................................................ .................................................. ............................ 68
Tutorial móvil: Utilizar un componente de calendario para seleccionar una fecha (iOS y Android) .......... 69
Calendario en plataformas móviles .............................................. .............................................. 69
La implementación de un controlador de eventos para los cambios del usuario de la Fecha .................................... 71
Ver también ................................................ .................................................. ............................ 72
Las muestras ................................................. .................................................. ........................ 73
Tutorial móvil: Usando Combo componentes de la caja para recoger cosas de una lista (iOS y Android)
... ..................... ........................................ . ............................................................................... . 74
La implementación de un selector de aplicaciones en múltiples dispositivos .......................................... ............ 74
La construcción de una lista de artículos mediante código ........................................... ....................................... 76
Viendo un artículo específico .............................................. .................................................. . 77
La implementación de un controlador de eventos para la selección del usuario .......................................... ..... 78
Ver también ................................................ .................................................. ............................ 79
Las muestras ................................................. .................................................. ........................ 80
Tutorial móvil: El uso de un componente de mapa para trabajar con mapas (iOS y Android) ......... 81
Características básicas de los componentes TMapView ............................................ ..................... 81
Creación de una aplicación de ejemplo .............................................. ........................................... 82
Configuración de aplicaciones de Android para utilizar el componente TMapView ...................... 82
El diseño de la interfaz de usuario .............................................. ........................................... 82
Ejecución de la aplicación de ejemplo .............................................. ........................................ 87
Ver también ................................................ .................................................. ............................ 88
Ejemplos de código ................................................ .................................................. ............... 88
Tutorial móvil: Utilizar un componente MultiView a la pantalla alternativa Vistas de la Información (iOS y Android)
................................ .................................................. ......................................... 89
Sobre el Componente TMultiView .............................................. ..................................... 89
Maestras del panel modos de presentación .............................................. ................................... 90

Embarcadero Technologies 4
El diseño de la interfaz de usuario .............................................. ............................................... 97
Diseñar el panel principal .............................................. ............................................. 97
Diseñar el panel de detalles .............................................. ............................................... 98
La implementación de la funcionalidad de la cámara Botones ............................................. ........... 98
Configuración de las propiedades del componente TMultiView ............................................. ............ 101
Ejecutar el Ejemplo de Aplicación .............................................. .................................... 102
Las muestras de productos móviles que utilizan TMultiView ............................................ .................. 102
Ver también ................................................ .................................................. .......................... 103
Tutorial móvil: Uso del Explorador de componentes (iOS y Android) ...................... 104
Diseñar la interfaz de usuario .............................................. .................................................. 105
Escribir un controlador de eventos para abrir una página Web cuando el usuario cambia la dirección URL en el control de edición
............................... .................................................. ............................................. 107
Implementar un método común para abrir una página Web ......................................... .... 108
Implementar un controlador de eventos para el evento OnChange .......................................... 109 ..
Implementar un controlador de eventos para el botón Volver .......................................... ........... 110
Selección del teclado virtual apropiado para la aplicación Web Browser .................. 110
WebBrowser Código Móvil de fragmentos .............................................. .................................. 112
Ver también ................................................ .................................................. .......................... 112
Tutorial móvil: Utilización de componentes de la ficha para mostrar las páginas (iOS y Android) .............. 114
Usando el estilo nativo de aquí en iOS y Android ........................................ ........ 114
Proyectos Tab páginas utilizando el Diseñador de formularios ........................................... ................ 115
La comparación de los Parámetros de la ficha en iOS y Android .......................................... .......... 120
Uso de Multi-resolución personalizada iconos para las pestañas ......................................... ............ 125
Viendo multi-resolución de los iconos personalizados en la más aquí .......................................... ........ 126
El uso de un solo mapa de bits Resolución de un icono personalizado ........................................ ....... 129
Definición de controles dentro de un TabControl ............................................. .............................. 130
Cambio de la página en tiempo de ejecución ............................................ ......................................... 132
Por el usuario tocando la pestaña ............................................ ........................................... 132
Por acciones y un ActionList ............................................. .......................................... 132
Por código fuente ............................................... .................................................. ........... 137
Ver también ................................................ .................................................. .......................... 140
Las muestras ................................................. .................................................. ...................... 140
Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android) 141 Utilización de componentes
ListBox para mostrar una vista de tabla en plataformas móviles .................. 141
Lista llanura ................................................ .................................................. ....................... 142
Lista agrupados ................................................ .................................................. ............... 143
Caja de búsqeda ................................................ .................................................. .................. 143
Crear artículos por el componente ListBox ............................................ ........................... 144
Agregar un encabezado ............................................... .................................................. ............... 146
Añadir un encabezado de grupo / pie de página a la Lista ......................................... ............................ 147
Mostrar elementos de lista como elementos agrupados por separado ........................................... .................. 148
Añadir una casilla de verificación u otro accesorio a un elemento de cuadro de lista ....................................... .... 149
Añadir un icono a un elemento de cuadro de lista ........................................... .......................................... 150
Agregar información detallada a un elemento ............................................ .................................. 150
Ejecución de la aplicación ............................................... ............................................. 151

Embarcadero Technologies 5
Crear su aplicación ListBox .............................................. ....................................... 151
Agregar elementos a un cuadro de lista a partir del código .......................................... ........................... 151
Crear un menú de desbordamiento .............................................. .............................................. 154
Crear el controlador de eventos para el botón de desbordamiento .......................................... ...... 155
Añadir un cuadro de búsqueda .............................................. .................................................. ......... 156
Ejecución de la aplicación ............................................... ............................................. 157
Ver también ................................................ .................................................. .......................... 158
Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android) ............ 159
Paso 1: Crear el proyecto ............................................ ................................................ 159
Paso 2: Añadir campos ............................................. .................................................. ........ 160
Paso 3: Creación de LiveBindings ............................................. ............................................ 161
Paso 4: Añadir más campos (mapas de bits, moneda) ....................................... ................... 164
Paso 5: Adición de la onButtonClick controlador de eventos .......................................... ............... 165
Los resultados ................................................ .................................................. ...................... 166
Ver también ................................................ .................................................. .......................... 167
Tutorial móvil: Usando LiveBindings rellenar un cuadro de lista en aplicaciones móviles (iOS y Android)
................................. .................................................. ............................................. 169
Paso 1: Crear el proyecto ............................................ ................................................ 169
Paso 2: Creación de los LiveBindings ............................................ ...................................... 171
Los resultados ................................................ .................................................. ...................... 174
Ver también ................................................ .................................................. .......................... 174
Tutorial móvil: Usar diseño de Ajuste forma diferente tamaños u orientaciones (iOS y Android)
... ..................... ........................................ . ............................................................................. . 175
Cada componente FireMonkey puede tener un propietario, un padre y niños ............ 175
El uso de propiedades de un componente FireMonkey ................. 175 relacionados con el diseño común
Utilizar la propiedad Align .............................................. ................................................ 175
El uso de los márgenes de la propiedad .............................................. ........................................... 177
Utilizar la propiedad Relleno .............................................. .......................................... 177
Utilizar la propiedad Anclas .............................................. ........................................... 178
Uso del componente TLayout .............................................. ......................................... 179
Ver también ................................................ .................................................. .......................... 179
Tutorial móvil: tomar y compartir una imagen y texto Sharing (iOS y Android) .... 181
Temas ................................................. .................................................. ............................. 184
Ver también ................................................ .................................................. .......................... 184
Tutorial móvil: Usando Ubicación Sensores (iOS y Android) ....................................... ..... 186
Diseñar la interfaz de usuario .............................................. .................................................. 187
La posición del sensor ............................................... .................................................. ........ 188
Leer información de ubicación (Latitud, Longitud) del Componente LocationSensor
.................... ........................................ . ............................................................................. . 189
Mostrar la ubicación actual Uso de Google Maps a través de un componente TWebBrowser ... 190 Uso de geocodificación
inversa ................................ .................................................. ................ 191
Mostrar una dirección de lectura mecánica en el componente ListBox .......................................... ....... 193
Al describir por qué su aplicación necesita la ubicación del usuario ........................................ 194
Ver también ................................................ .................................................. .......................... 194
Las muestras ................................................. .................................................. ...................... 194

Embarcadero Technologies 6
Tutorial móviles: El uso de Notificaciones (iOS y Android) ........................................ ........... 196
Tres de notificación o alerta estilos básicos ............................................ .............................. 196
Bandera de aviso en dispositivos móviles ............................................. ......................... 196
Los diálogos de alerta: IOS número de placa y número de notificaciones de Android ................... 197
El centro de notificaciones en dispositivos móviles ............................................. ............................. 197
Acceder al servicio de notificación .............................................. ......................................... 198
Añadir FMLocalNotificationPermission (IOS) ............................................. ........................ 199
Establecer el número de placa del icono y notificación Número de Código ............................ 199
Notificación horario ................................................ .................................................. ..... 201
Repetir un mensaje de notificación de .............................................. ......................................... 202
Actualizar o cancelar una notificación de mensajes programada o repetida ............................ 203
Presentar el mensaje de notificación Inmediatamente ............................................. ................ 204
Personalización del sonido de notificación .............................................. ................................ 205
Banner notificación o la notificación de alertas ............................................. .......................... 208
Añadir acción a la notificación de alertas (Sólo IOS) ........................................ .................... 209
Agregar acción de Notificaciones .............................................. ............................................... 211
Ejecutar la aplicación ............................................... .................................................. . 212
Ver también ................................................ .................................................. .......................... 212
Las muestras ................................................. .................................................. ...................... 212
Tutorial móvil: Usando el Marcador de teléfono en dispositivos móviles (iOS y Android) ........... 213
Acerca del teléfono Servicios del Marcador en dispositivos móviles .......................................... ......... 213
Acceder a los servicios de teléfono del Marcador ............................................. ................................. 213
El diseño de la interfaz de usuario .............................................. ............................................. 214
Obtener las propiedades del portador .............................................. ........................................... 215
Ejecutar la aplicación ............................................... ............................................... 215
Haciendo una llamada ............................................... .................................................. ................... 216
La detección de los cambios de estado de llamada ............................................. ..................................... 218
La aplicación de la Handler OnCallStateChanged Evento .......................................... 219
Ver también ................................................ .................................................. .......................... 221
Las muestras ................................................. .................................................. ...................... 222
Móviles Tutorial: Uso de notificaciones remotas (iOS y Android) ..................................... 223
Push Notification remota ............................................... ................................................. 223
RESTO marco BAAS ............................................... .................................................. .... 224
Temas en este tutorial móvil ............................................. ............................................. 224
Ver también ................................................ .................................................. .......................... 224
Ejemplos de código ................................................ .................................................. ............. 224
Tutorial móvil: Usando BaaS de backend de almacenamiento (iOS y Android) ............................ 225
Cómo hacer llegar su aplicación compatible en Kinvey y Parse .......................................... ...................... 226
Diseño y montaje de la interfaz de usuario .......................................... .............................. 226
Adición de los componentes Backend .............................................. ................................... 227
Creación y almacenamiento de objetos .............................................. ........................................... 228
Eliminar objetos ................................................ .................................................. ............ 229
Recuperando objetos ................................................ .................................................. .......... 231
Ejecución de la aplicación ............................................... ................................................. 234
Ver también ................................................ .................................................. .......................... 235

Embarcadero Technologies 7
Ejemplos de código ................................................ .................................................. ............. 235
Móviles Tutorial: Uso de FireDAC y SQLite (iOS y Android) ...................................... 236
Usando FireDAC para conectarse a la base de datos ........................................... ....................... 236
La creación de la base de datos utilizando el framework FireDAC ............................................ ............ 237
Diseño y configurar la interfaz de usuario ........................................... ................................. 239
Uso del Asistente LiveBindings .............................................. .......................................... 240
Añadir los componentes LiveBinding .............................................. ................................ 240
Conexión a los datos .............................................. ................................................. 241
Viendo ShopItem en el ListView ............................................. .............................. 243
Crear el controlador de eventos para que el botón Borrar visible cuando el usuario selecciona un elemento de la lista de
............................... .................................................. ............................ 244
Crear el controlador de eventos para el botón Agregar para añadir una entrada en la Lista .............. 245
Crear el controlador de eventos para el botón Eliminar para eliminar una entrada de la List249 Preparar la aplicación
de tiempo de ejecución ............................. ......................................... 250
Configuración de la implementación de la base de datos para móviles ........................................... ........... 250
Agregar y configurar su base de datos de archivos en el gestor de despliegue .................... 251
Modificar su código para conectarse a un archivo de base de datos local en el móvil ...................... 252
Especificación de la ubicación de la base de datos SQLite en el dispositivo móvil ................. 252
Creación de una tabla Si no existe ninguno ............................................ ....................................... 253
Ejecución de la aplicación en un simulador o en un dispositivo móvil ............................... 253
Ver también ................................................ .................................................. .......................... 255
Tutorial móvil: El uso de InterBase Togo con FireDAC (iOS y Android) ...................... 256
Usando FireDAC para conectarse a la base de datos ........................................... ....................... 257
Diseño y configurar la interfaz de usuario ........................................... ................................. 258
Conexión a los datos .............................................. .................................................. ... 258
Distribución de aplicaciones para móviles ............................................. .............................. 262
La implementación de InterBase Togo Archivos necesarios y el archivo de base a móvil ......... 262
Ejecutar la aplicación en un simulador o en un dispositivo móvil ....................................... 265
Solución de problemas ................................................. .................................................. ............ 266
Problemas InterBase ................................................ .................................................. .......... 266
Problemas de manejo de excepciones ............................................... ............................................ 266
Ver también ................................................ .................................................. .......................... 267
Las muestras ................................................. .................................................. ...................... 267
Tutorial móvil: Usando dbexpress y SQLite (iOS y Android) ................................... 268
Usando dbexpress para conectarse a la base de datos ........................................... ................... 269
La creación de la base de datos en el entorno Windows para fines de desarrollo .... 270
Crear la base de datos en el Explorador de datos ........................................... ...................... 270
Crear tabla en DataExplorer .............................................. ...................................... 271
Diseño y configurar la interfaz de usuario ........................................... ................................. 273
Conexión a los datos .............................................. .................................................. ... 274
Crear el controlador de eventos para que el botón Borrar visible cuando el usuario selecciona un elemento de la lista de
............................... .................................................. ............................ 275
Crear el controlador de eventos para el botón Agregar para añadir una entrada en la Lista .............. 277
Crear el controlador de eventos para el botón Eliminar para eliminar una entrada de la List281 Configuración de la base de
datos de despliegue para plataformas móviles ........................... .......... 282

Embarcadero Technologies 8
Agregar y configurar su base de datos de archivos en el gestor de despliegue .................... 283
Modificar su código para conectarse a un archivo de base de datos local en plataformas móviles ..... 284
Especificación de la ubicación de la base de datos SQLite en el dispositivo móvil ................. 284
Creación de una tabla Si no existe ninguno ............................................ ....................................... 284
Ejecución de la aplicación en un dispositivo móvil ........................................... ................... 285
Ver también ................................................ .................................................. .......................... 287
Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android) ................... 288
Usando dbexpress para conectarse a la base de datos ........................................... ................... 289
Diseño y configurar la interfaz de usuario ........................................... ................................. 290
Conexión a los datos .............................................. .................................................. ... 290
Distribución de aplicaciones para móviles ............................................. ............................. 293
Implementar InterBase Togo, dbExpress driver y el Archivo de Base de datos para móvil ....... 294
Modificar el código para conectarse a un archivo de base de datos local en el móvil ........................ 296
Ejecutar la aplicación en un simulador o en un dispositivo móvil ....................................... 297
Solución de problemas ................................................. .................................................. ............ 297
Problemas InterBase ................................................ .................................................. .......... 297
Problemas de manejo de excepciones ............................................... ............................................ 298
Ver también ................................................ .................................................. .......................... 298
Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y Android)
... ..................... ........................................ . ............................................................................. . 300
Creación de la etapa intermedia, un servidor DataSnap .......................................... ...................... 300
Crear una aplicación de servidor DataSnap VCL ............................................ ................... 301
Definir un conjunto de datos en el servidor DataSnap ........................................... ...................... 303
Exponer el conjunto de datos desde el servidor DataSnap ........................................... .............. 305
Ejecutar el servidor DataSnap .............................................. ............................................... 306
Creación de una aplicación móvil que se conecta al servidor DataSnap ...................... 306
Implementar la Biblioteca MIDAS al simulador de iOS ........................................... ....................... 309
Ejecutar la aplicación en la plataforma móvil ........................................... .................... 310
Ver también ................................................ .................................................. .......................... 310
Tutoriales móviles: Tabla de los componentes utilizados ........................................... ....................... 311

Embarcadero Technologies 9
Tutoriales móviles: Desarrollo de aplicaciones
móviles (iOS y Android)

Este conjunto integrado de tutoriales le guía a través del desarrollo de un Delphi o C ++ aplicación multi-dispositivo para iOS y
Android:

o Después de los tres tutoriales de configuración inicial, el primer tutorial que muestra cómo construir un IOS
o aplicación Android usando herramientas FireMonkey.

o Los tutoriales restantes demuestran los componentes FireMonkey recomendados para usar
con el fin de lograr un look-and-feel nativo en iOS y aplicaciones Android. Estos tutoriales móviles

también están disponibles en formato PDF aquí:


http://docs.embarcadero.com/products/rad_studio/radstudioTokyo/Mobile_Tutorials_en.pdf

Embarcadero Technologies 10
Preparar

o Configurar el entorno de desarrollo en el Mac (IOS)

o Configurar el entorno de desarrollo en PC con Windows (IOS)

o Configurar el entorno de desarrollo de Windows en el PC


(Androide)

El uso de elementos de la interfaz de usuario básico

o Creación de una aplicación multi-dispositivo (iOS y Android)

o El uso de la libreta de direcciones de componentes (iOS y Android)

Embarcadero Technologies 11
o El uso de un componente de botón con diferentes estilos (IOS y
Androide)

o Utilizar un componente de calendario para seleccionar una fecha (iOS y Android)

o El uso de componentes de la caja Combo escoger elementos de una lista (IOS


y Android)

o El uso de un componente de mapa para trabajar con mapas (iOS y Android)

o Uso del componente MultiView (iOS y Android)

o Uso del Explorador de componentes (iOS y Android)

o Utilización de componentes de la ficha para mostrar las páginas (iOS y Android)

Embarcadero Technologies 12
o Usando LiveBindings para rellenar un ListView (iOS y Android)

o Utilización de componentes ListBox para mostrar una vista de tabla (IOS y


Androide)

o Usando LiveBindings para rellenar un cuadro de lista (iOS y Android)

o El uso de Layout para ajustar diferentes tamaños forma u orientaciones (IOS


y Android)

El uso de la funcionalidad del dispositivo

o Tomar y compartir una imagen, y compartir texto (IOS y


Androide)

o Ubicación utilizando sensores (iOS y Android)

Embarcadero Technologies 13
o Uso de Notificaciones (iOS y Android)

o Tutorial móvil: Usando el Marcador de teléfono en dispositivos móviles (IOS


y Android)

El uso de backend como Servicio

o Móviles Tutorial: Uso de notificaciones remotas (iOS y Android)

o Tutorial móvil: Usando BaaS de backend de almacenamiento (IOS y


Androide)

Embarcadero Technologies 14
Acceso a una base de datos

o El uso de InterBase Togo con FireDAC (iOS y Android)

o El uso de InterBase Togo con dbexpress (iOS y Android)

o El uso de SQLite y FireDAC (iOS y Android)

o El uso de SQLite y dbexpress (iOS y Android)

o Conexión a una base de datos empresarial desde un cliente móvil (iOS


y Android)

o Usando FireDAC en aplicaciones móviles (iOS y Android)

Ver también

o RAD Studio Mobile tutoriales (pdf)

o Tutoriales móviles: Tabla de los componentes utilizados

o FireMonkey de inicio rápido

o La creación de una aplicación para iOS

o La creación de una aplicación para Android

o Diseño de aplicaciones FireMonkey

o Fragmentos de código móvil

o Desarrollo de aplicaciones móviles iOS

o Desarrollo de aplicaciones móviles Android

o Plataformas de destino compatibles

o Vista previa de múltiples dispositivos

Embarcadero Technologies 15
Tutorial móvil: Configurar el entorno de desarrollo en el
Mac (IOS)

Una aplicación FireMonkey Delphi destinado para la plataforma de destino iOS puede ser probado opcionalmente en el simulador de
iOS disponible en el Mac. aplicaciones FireMonkey C ++ y Delphi pueden ser probados usando el dispositivo iOS orientar la plataforma;
esta prueba requiere un dispositivo iOS de prueba conectada al Mac.

o La primera mitad de este tutorial se describen los pasos que debe llevar a cabo con el fin de ejecutar
su aplicación iOS (Delphi solamente) en el simulador de iOS en el Mac.

o La segunda mitad de este tutorial se describen los pasos adicionales necesarios para ejecutar su
aplicación iOS (Delphi o C ++) en su dispositivo iOS. Nota: los simulador de iOS no es compatible con BCCIOSARM,

el compilador ++ C para el dispositivo iOS . Sólo los dispositivos IOS están soportados por BCCIOSARM.

Requisitos en el Mac y iOS


o 10.9 Mavericks

o 10.10 Yosemite

o 10.11 El Capitán

(Ni OS es compatible con los sistemas heredados y PowerPC Macintosh 680x0-basa Todos los Mac desde 2007 están basados ​en Intel;. Todas
las Mac desde el año 2008 son de 64 bits.)

o Para el desarrollo de OS X, la última versión del Xcode

o Para el desarrollo de iOS, la última versión del SDK de iOS y Xcode instalado, junto con
las herramientas de línea de comando Xcode .

Nota: RAD Studio no es compatible con versiones del SDK de iOS inferiores a 8,0.

o La membresía en el Programa de desarrollador de Apple .

o Un dispositivo iOS conectado al Mac por el puerto USB (requerido para la verificación o el funcionamiento de su
iOS aplicación en el dispositivo)

Pasos para configurar su Mac para ejecutar su aplicación para iOS

Para implementar una aplicación de iOS a su dispositivo con fines de depuración y prueba, el sistema debe tener la
configuración mostrada en la siguiente figura. RAD Studio se ejecuta en un ordenador PC con Windows. Este ordenador PC
está conectado a un Mac con el plataforma Auxiliar y teniendo

Embarcadero Technologies dieciséis


instalado las versiones adecuadas de Xcode y el IOS SDK (para el desarrollo de iOS). Para ejecutar aplicaciones de iOS en un
dispositivo iOS, el dispositivo iOS debe conectarse mediante un cable USB al Mac.

Para implementar una aplicación de iOS a la simulador de iOS en el Mac oa un dispositivo iOS, es necesario instalar las siguientes
herramientas en su Mac:

o Plataforma Auxiliar (PAServer)

ß utiliza el RAD Studio plataforma Auxiliar a ejecutar y depurar multidispositivo


aplicaciones y para implementar aplicaciones múltiples dispositivos en los dispositivos OS X y iOS.

ß Instalar y correr el Asistente de plataforma en su Mac.

o Xcode

Xcode es el entorno de desarrollo y depuración en el Mac y proporciona los archivos de desarrollo necesarios
para OS X y iOS aplicaciones.

Paso 1: Instalar el Asistente de Plataforma

los plataforma Auxiliar debe estar ejecutando en el Mac al implementar una aplicación de iOS desde su PC a un simulador de
iOS o un dispositivo iOS. El instalador de OS X para el Asistente de plataforma se llama PAServer19.0.pkg y está disponible en dos
lugares:

o Dentro del directorio de instalación de RAD Studio en su PC:

C: \ Archivos de programa (x86) \ Embarcadero \ Studio \ 19.0 \ PAServer \ PAServer19.0.pkg

o En la Web, para descargar a la Mac:

http://altd.embarcadero.com/releases/studio/19.0/PAServer/PAServer19.0.pkg

Embarcadero Technologies 17
Para más detalles, véase Instalación del Asistente de plataforma en un Mac .

Paso 2: Ejecutar el Asistente de Plataforma

En el Finder en el Mac, activar el archivo .app ( PAServer-19.0.app) como sigue:

1. Navegue hasta el nivel superior aplicaciones carpeta.

2. Haga doble clic PAServer-19.0.app para iniciar el Asistente Plataforma:

Aparece la ventana de terminal, mostrando la bandera Asistente de Plataforma y la solicitud de contraseña:

Perfil de conexión contraseña <pulse Intro para ninguna contraseña>

o bien pulse Regreso, o introduzca una contraseña para PAServer y pulse Retorno.

3. A continuación se le pedirá que introduzca su contraseña de usuario de Mac para permitir que el Asistente de Plataforma
de depurar (tomar el control de otro proceso) su aplicación.

Embarcadero Technologies 18
Introduzca su contraseña y seleccione Tomar el control:

Para más detalles sobre cómo ejecutar el Asistente de plataforma, véase Ejecución del Asistente de la plataforma en un Mac .

Paso 3: Instalar Xcode en el Mac

Xcode es el entorno de desarrollo y depuración en el Mac, y proporciona los archivos de desarrollo necesarios para OS

X y iOS aplicaciones. Puede instalar Xcode desde cualquiera de las siguientes fuentes:

o En su "Instalar OS X" de DVD, bajo Instalaciones opcionales, haga doble clic Xcode.mpkg a
instalar Xcode en su sistema.

o En el Mac App Store , Xcode descarga de forma gratuita.

o Como desarrollador de Apple registrado, puede descargar la última versión de Xcode como
paquete (. dmg). Para registrarse y luego descargar Xcode:

1. Registrarse (gratuitamente) como un desarrollador de Apple en


http://developer.apple.com/programs/register/ .

2. Descarga Xcode como un paquete de https://developer.apple.com/downloads .

Embarcadero Technologies 19
Próximos pasos

Ha configurado su Mac para ejecutar una aplicación de iOS en el simulador de iOS.

Nota: Sólo las aplicaciones Delphi se pueden ejecutar en el simulador de iOS. C ++ Builder no admite el
simulador de iOS.

o simulador de iOS: Para ejecutar una aplicación iOS (Delphi solamente) en el simulador de iOS sobre el
Mac, no tiene que completar la segunda mitad de este tutorial. En cambio, ahora se puede pasar a la siguiente
tutorial ( Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (IOS) ) Para completar la
configuración de su IDE RAD Studio.

o iOS Dispositivo: Para ejecutar la aplicación iOS (ya sea Delphi o C ++ Builder) en su iOS
Dispositivo, por favor utilice los siguientes pasos de este tutorial para completar la configuración de su Mac. A
continuación, vaya al siguiente tutorial ( Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (IOS) )
Para completar la configuración de su IDE RAD Studio.

Pasos adicionales para configurar su Mac para ejecutar su


aplicación iOS en tu dispositivo iOS

Los siguientes pasos adicionales que permiten ejecutar su aplicación iOS en su Dispositivo IOS.

Recuerde que su dispositivo iOS debe estar conectado a su Mac mediante un cable USB.

Paso 1: Asegúrese de que las herramientas Xcode línea de comandos se ha


instalado en su Mac
Nota: A partir de la versión 6.1 de Xcode, las Herramientas Xcode de línea de comandos se instalan automáticamente durante la
instalación de Xcode.

Embarcadero Technologies 20
Para asegurarse de que el herramientas de línea de comandos Xcode se instalan en tu Mac :

1. Xcode comenzar en el Mac.

2. Escoger preferencias desde el Xcode menú.

3. En el General ventana, haga clic en el Ubicaciones lengüeta.

4. Sobre el Ubicación ventana, compruebe que la Herramientas de línea de comandos muestra el Xcode
versión (con el que se han instalado las herramientas de línea de comandos). Esto significa que las herramientas Xcode línea de
comandos ya están instalados y que no es necesario para instalarlos.

5. Si las herramientas Xcode de línea de comandos no están instalados, el Herramientas de línea de comandos no muestran la versión de
Xcode.

1. En este caso, haga clic en el descargas lengüeta de la Ubicación ventana.

2. Sobre el descargas ventana, seleccione la componentes lengüeta.

Embarcadero Technologies 21
3. Haga clic en el Instalar botón al lado de Herramientas de línea de comandos.

Se le pregunta por su desarrollador de inicio de sesión de Apple durante el proceso de instalación. Para más detalles, véase Instalación

de las herramientas Xcode de línea de comandos en un Mac .

Paso 2: Regístrese para obtener una cuenta de desarrollador

La pertenencia al Programa de Desarrolladores de Apple es un requisito para la construcción, funcionamiento, depurar y

desplegar aplicaciones para iOS. Siga los pasos descritos en el Unirse al Programa de Desarrolladores de Apple .

Paso 3: Solicitud, descargar e instalar su certificado de


Desarrollo
Las aplicaciones que se despliegan en el dispositivo (o en el simulador de iOS) necesitan ser criptográficamente firmado antes de
que funcionen. los certificado de desarrollo contiene información que es necesaria para la firma de las aplicaciones. Cada individuo
(un desarrollador individual o un miembro del equipo) deben tener un certificado de desarrollo único, que puede ser utilizado para
múltiples aplicaciones.

Para los equipos de desarrollo, certificados de desarrollo deben ser solicitados por cada miembro del equipo, y estas solicitudes deben ser
aprobadas por un administrador del equipo.

Solicitud, descargar e instalar su certificado

1. En el Acceso a Llaveros aplicación en su Mac, seleccione una de las Acceso a Llaveros


menú: Asistente Certificado> solicitar un certificado de una autoridad de certificación:

Embarcadero Technologies 22
ß Si usted es un miembro del equipo de desarrollo de un programa de empresa / organización, el administrador
del equipo tiene que aprobar su solicitud. Después de su administrador de equipo lo aprueba, se puede
descargar el certificado.

ß Si eres un desarrollador individual, debería ver una opción de descarga de su certificado, poco después de que
usted lo solicite. Consulte la documentación de Apple en: Guía de firma de código para detalles.

Guardar la solicitud de certificado como un archivo CSR, y luego enviarlo a la entidad de certificación a través de la portal de
aprovisionamiento iOS de la siguiente manera:

1. Cuando se le solicite, introduzca su ID de Apple y contraseña y, a continuación, haga clic Registrarse.

2. Debajo Aplicaciones iOS, hacer clic Certificados.

3. En la página que se abre, haga clic en el icono del signo más (+).
Esto abre la Agregar certificado iOS mago.

4. Sobre el Seleccione tipo página, haga clic Continuar y siga las instrucciones en pantalla para
continuar con el asistente.

5. Cuando se le solicite, cargue el archivo CSR que guardó en su Mac.

2. Ir Portal de aprovisionamiento iOS . Puede descargar el certificado clic en el Desarrollo Descargar botón como se muestra
a continuación:

3. Lanzar el Certificado de Desarrollo haciendo doble clic en él. Se carga automáticamente en el


Acceso a Llaveros solicitud.

Embarcadero Technologies 23
Paso 4: Registrar un dispositivo para la implementación

Antes de que un dispositivo puede ejecutar aplicaciones de usuario, debe estar inscrito en el Portal de Aprovisionamiento de Apple . Dispositivos son
registrados por su ID de dispositivo único (UDID). El UDID se puede determinar usando Xcode, como sigue:

1. Asegúrese de que su dispositivo iOS está conectado a su máquina Mac.

2. Xcode, y va a dispositivos (Ventana> Dispositivos).

3. Haga clic en su dispositivo.

4. Al lado de identificador etiqueta es una cadena de caracteres:

La cadena de identificador representa UDID del dispositivo.

ß Si eres un desarrollador individual, registre el dispositivo añadiendo el UDID en el


Dispositivos de la pestaña Provisioning Portal de Apple .

ß Si usted es parte de una empresa / organización, pida al administrador del equipo para registrar su dispositivo.

Paso 5: crear e instalar un archivo de suministro


perfiles de datos se utilizan para vincular un desarrollador y dispositivos a un equipo de desarrollo. Se requiere este perfil de
datos para ejecutar aplicaciones en un dispositivo iOS.

o Si eres un desarrollador individual, debe crear un perfil de aprovisionamiento. para específica


información, consulte: Cómo crear y descargar un perfil de distribución de aprovisionamiento .

o Si usted es parte de una empresa / organización, sus administradores equipo debe crear una provisión
perfil que se puede utilizar.

Una vez creado el archivo de suministro, debe instalarlo en Xcode, de la siguiente manera:

1. Xcode abierta en el Mac e ir a los dispositivos ( Ventana> Dispositivos).

2. Haga clic derecho en el dispositivo y seleccione Mostrar Perfiles de datos ...

Embarcadero Technologies 24
3. Haga clic en el más una tecla cantar añadir un archivo de suministro.

4. Encontrar su archivo de suministro, seleccionarlo y hacer clic Instalar.

5. Hacer clic Hecho para cerrar la ventana.

Ha configurado su Mac para ejecutar su aplicación iOS en su Dispositivo IOS.

Para ejecutar la aplicación de iOS, consulte Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (IOS) y
completar la configuración de su IDE RAD Studio. (Si ha configurado su PC como parte de la gestión de su aplicación en
el simulador de iOS, puede omitir este paso).

Ver también

o Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (IOS)

o Tutorial móvil: Creación de una aplicación para plataformas móviles (iOS y Android)

o paserver, la plataforma de aplicaciones de Server Assistant

o La instalación de Xcode en un Mac

o Instalación de las herramientas Xcode de línea de comandos en un Mac

o Instalación del Asistente de plataforma en un Mac

o Ejecución del Asistente de la plataforma en un Mac

o La adquisición de un certificado de desarrollador de iOS

o Solución de problemas: No se puede implementar en el dispositivo iOS

o Páginas útiles Web de Apple:

ß Creación y configuración de los ID de aplicaciones

ß Creación de certificados de firma (firma de código Guía)

ß iOS Provisioning Portal (Requiere su nombre de usuario desarrollador de Apple)

ß Dispositivos de la pestaña Provisioning Portal de Apple

ß Crear un ID de Apple

ß Cómo crear y descargar un perfil de distribución de aprovisionamiento

Embarcadero Technologies 25
Tutorial móvil: Configurar el entorno de desarrollo en
PC con Windows (IOS)

Antes de comenzar este tutorial, usted debe leer y realizar la siguiente sesión de tutoría:

o Tutorial móvil: Configurar el entorno de desarrollo en el Mac (IOS)

Una aplicación FireMonkey destinado para la plataforma de destino iOS puede ser probado inicialmente en el simulador de iOS disponible
en el Mac. El segundo medio del proceso de prueba utiliza la dispositivo iOS
plataforma de destino y requiere un dispositivo iOS de prueba conectada al Mac.

Nota: En los dispositivos iOS, puede ejecutar tanto aplicaciones C ++ y Delphi. sin embargo, el simulador de iOS no es compatible
con BCCIOSARM , De modo que sólo los dispositivos IOS son compatibles para C ++. Para implementar una aplicación iOS para su
dispositivo iOS o simulador de iOS para fines de depuración y prueba, RAD Studio utiliza el plataforma Auxiliar , Que se debe instalar
y correr en el Mac. Su entorno de desarrollo de hardware y software debe tener la configuración demostrada en la siguiente figura.
RAD Studio se ejecuta en un ordenador PC con Windows. El ordenador PC debe estar conectado a un Mac con el plataforma
Auxiliar y después de haber instalado las versiones adecuadas de Xcode y el IOS SDK (para el desarrollo de iOS). Para ejecutar
aplicaciones de iOS en un dispositivo iOS, el dispositivo iOS debe conectarse mediante un cable USB al Mac.

En esta sección se describen los pasos para configurar el entorno de desarrollo después configurar el entorno de su
Mac.

Configuración de la RAD Studio Ambiente


Hay que realizar los siguientes pasos de configuración para preparar el desarrollo de iOS con RAD Studio.

Crear un perfil de conexión para el Mac

1. En el estudio IDE RAD, abierto Herramientas> Opciones> Opciones de entorno> Administrador de perfiles de conexión .

2. Hacer clic Añadir:

Embarcadero Technologies 26
3. A continuación aparece el Crear un perfil de conexión mago. Definir un nombre para la conexión
perfil, como "Mi Mac". Asegúrese de seleccionar OS X como la plataforma y, a continuación, haga
clic Siguiente:

Embarcadero Technologies 27
4. Sobre el información de la máquina remota página, establecer el nombre o la dirección IP de la máquina Mac,
un número de puerto a utilizar (el puerto predeterminado 64211 normalmente funciona), y una contraseña opcional (si se desea utilizar una
contraseña).

Embarcadero Technologies 28
5. Hacer clic Conexión de prueba, y asegúrese de que el perfil de conexión se realiza correctamente sin
de error (que debe recibir el mensaje " La conexión a <nombre de host> en el puerto <número de puerto>
tenido éxito ").

6. Si el Conexión de prueba tiene éxito, haga clic en el Terminar botón, pues comprobar los ajustes y vuelve a intentarlo.

Añadir un SDK al Sistema de Desarrollo para el dispositivo IOS Conectado a la Mac

1. Abierto Herramientas> Opciones> Opciones de entorno> Manager SDK :

Embarcadero Technologies 29
2. Hacer clic Añadir.

3. Sobre el Añadir un nuevo SDK cuadro de diálogo, seleccione iOS Device - 32 bit o iOS Device - 64 bit
como plataforma.

Embarcadero Technologies 30
4. Después de seleccionar una plataforma, el IDE llena un perfil (por ejemplo, "Mi Mac") y la versión del SDK
cuadro combinado con la lista de versiones de SDK disponibles en la máquina donde el servidor Asistente Plataforma se está
ejecutando:

5. Hacer clic DE ACUERDO añadir la versión del SDK seleccionado.

6. Una vez finalizada la operación, haga clic Cerca para cerrar el diálogo.

Ver también

o Tutorial móvil: Creación de una aplicación para plataformas móviles (iOS y Android)

o Tutorial móvil: Configurar el entorno de desarrollo en el Mac (IOS)

o Trabajar con un Mac y un PC

o Ejecución de la aplicación iOS en un dispositivo iOS

o Ejecución de la aplicación iOS en el simulador de iOS

o FireMonkey Plataforma Requisitos previos

o La creación de una aplicación para iOS

o Desarrollo de aplicaciones OS X

o Crear una aplicación FireMonkey

o páginas developer.apple.com manzana

ß iOS Developer Library

ß iOS Developer Library: Introducción

ß iOS Dev Center

Embarcadero Technologies 31
ß El lanzamiento de su aplicación en dispositivos

ß Preparación de su aplicación iOS para su distribución en la App Store

ß iAd Red

Embarcadero Technologies 32
Tutorial móvil: Configurar el entorno de desarrollo en
PC con Windows (Android)

Durante el instalación RAD Studio , Las herramientas de desarrollo de Android necesarios están instalados y configurados en el

sistema. Nada más es necesario para iniciar el desarrollo de Android . Con el fin de ser capaz de ejecutar aplicaciones en un dispositivo

Android, también es necesario:

o Instalar el controlador USB para el dispositivo Android

o Habilitar la depuración USB en el dispositivo Android

o Configurar el sistema para detectar su dispositivo Android

Ver también

o Tutorial móvil: Creación de una aplicación para plataformas móviles (iOS y Android)

Embarcadero Technologies 33
Tutorial móvil: Creación de una aplicación para
plataformas móviles (iOS y Android)
En este tema se describe cómo crear una aplicación "Hello World" multidispositivo (C ++ o Delphi), ya sea para el iOS o Android plataforma
de destino .

Antes de que empieces

Para desarrollar aplicaciones móviles (Android iOS y) usando RAD Studio, es necesario completar algunos pasos de configuración

importantes. Este tutorial asume que ha completado todos los pasos de configuración necesarios. Para más detalles, véase:

o Tutorial móvil: Configurar el entorno de desarrollo en el Mac (IOS)

o Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (IOS)

o Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (Android)

Paso 1: Crear una nueva aplicación de FireMonkey para Android o


iOS
1. Seleccione:

ß Archivo> Nuevo> Aplicación Multi-Device - Delphi

ß Archivo> Nuevo> Aplicación Multi-Device - C ++ Builder

los Aplicación Multi-Device asistente aparece:

Embarcadero Technologies 34
2. Seleccionar Aplicación en blanco. los Diseñador de formularios muestra una nueva forma:

3. Seleccione la plataforma de destino de la Gerente de proyecto .

1. Androide: Ver Configuración del sistema para detectar su dispositivo Android usar
un dispositivo Android.

Embarcadero Technologies 35
2. iOS: Si desea crear una iOS aplicación, abra el Plataforma de destino nodo en el
Gerente de proyecto y haga doble clic iOS Simulator ( sólo para Delphi) o un dispositivo iOS conectado (ya sea
para Delphi o C ++):

Nota: Al seleccionar una plataforma, los componentes que no están disponibles para esta plataforma en particular aparecen como no disponibles.

Paso 2: Seleccione un estilo

1. Seleccione ya sea iOS o Android a partir de la Estilo en el menú desplegable con el fin de definir la
vista maestra para mostrar todas las propiedades relacionadas con este estilo.

Nota: Ver Selector de estilo para más información.

Paso 3: colocar los componentes en el Formulario de Multi-Device

Le recomendamos que lea este tutorial antes de empezar a colocar componentes: Tutorial móvil: Usar diseño de Ajuste forma

diferente tamaños u orientaciones (iOS y Android) . El primer paso en la creación de una aplicación multi-dispositivo está

diseñando la interfaz de usuario. Hay muchos componentes reutilizables disponibles en el IDE para la creación de interfaces de

usuario.

1. Mover el puntero del ratón sobre la paleta de herramientas Y ampliar la Estándar por categoría
clic en el icono de signo más (+) junto al nombre de la categoría.

2. Selecciona el TEdit componentes y haga doble clic en TEdit o soltarlo en el Formar


Diseñador .

3. Repita estos pasos, pero ahora agregar una TLabel y una TButton componente al formulario.

4. Seleccione el cuadro de edición y establecer el KillFocusByReturn propiedad en el Inspector de Objetos a


Cierto.

5. Seleccione el botón y cambiar el Texto propiedad en el Inspector de Objetos para saludar".

6. Ahora debería ver tres componentes en el Diseñador de formularios . Aquí es una aplicación para iOS:

Embarcadero Technologies 36
7. Después de colocar estos componentes en el Diseñador de formularios , El IDE establece automáticamente los nombres de los
componentes.

Para ver o cambiar el nombre de un componente, haga clic en el componente en el Diseñador de formularios , Y luego encontrar su Nombre

propiedad en el Inspector de Objetos y el estructura Ver : Para TButton componente, el nombre del componente está configurado por

defecto para Botón 1 ( o Button2 Button3, dependiendo del número de TButtons que ha creado en esta solicitud).

8. La forma en la que se encuentran estos componentes también tiene un nombre. Selecciona el


Antecedentes de la Diseñador de formularios Y seleccione la Nombre propiedad en el inspector de objetos. El nombre del
formulario Formulario 1 ( o se muestra Form2, Form3, ...). También puede localizar el nombre del formulario en el estructura
Ver :

Embarcadero Technologies 37
Nota: nombres de los formularios establecidos por defecto como Form1, Form2, Form3, ... son de la opinión Maestro. vistas de dispositivos se
denominan FormName_ViewName como Form1_iPhone ( iPhone 3,5” forma) y
Form1_NmXhdpiPh ( Android la forma del teléfono 4” ).

9. Puede cambiar fácilmente a código fuente mediante la selección de la código ( para Delphi) o < unidad
nombre> .cpp / <nombre de unidad> .h ( para la ficha C ++) en la parte inferior del Diseñador de formularios. También puede pulsar el F12 tecla
para cambiar entre el Diseñador de formularios y el Editor de código :

Delphi C ++

los Editor de código muestra el código fuente que el IDE ha generado. Usted debe encontrar tres componentes
definidos (Edit1, Label1 y Button1):

Embarcadero Technologies 38
Delphi C ++

Nota: Al guardar o ejecutar su proyecto, el usos y incluir cláusulas se actualizan (para añadir FMX.StdCtrls de TLabel y
para FMX.Edit TEdit ).

Paso 4: Adición Vistas a su proyecto


Si desea personalizar que la solicitud de un determinado tipo de dispositivo, puede hacerlo utilizando
Puntos de vista .

1. Ve a la Puntos de vista selector.

2. Seleccione las vistas disponibles que quiere añadir simplemente haciendo clic sobre ellos.

3. Vaya a la vista de hacer los cambios que desee incluir. Para añadir una vista personalizada, consulte Adición

de una vista personalizada para el Selector de .

Paso 5: Escribir un controlador de eventos para un clic de botón por el usuario

El siguiente paso es definir un controlador de eventos Para el TButton componente. Se pueden definir los controladores de eventos para su
aplicación en la misma forma que defina controladores de eventos para plataformas de escritorio. Para el TButton componente, el caso más
típico es un clic de botón.

Haga doble clic en el botón en el Diseñador de formularios, y RAD Studio crea esqueleto de código que puede utilizar para implementar un
controlador de eventos para el evento de clic de botón:

Embarcadero Technologies 39
Delphi C ++

Ahora se puede implementar respuestas dentro de la Button1Click método. Los códigos siguientes fragmentos (Delphi y C ++)

implementar una respuesta que muestra un pequeño cuadro de diálogo, que dice "Hola + <nombre entró en el cuadro de

edición>": código de Delphi:

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

Código C ++:

Label1-> Text = "Hola" + Edit1-> Texto + "!";

En Delphi, las comillas que rodean los literales de cadena deben ser comillas simples rectas (es decir, ' cuerda'). Puede utilizar el
signo más (+) para concatenar cadenas. Si necesita una comilla simple dentro de una cadena, se pueden utilizar dos comillas
simples consecutivas dentro de una cadena, que produce una comilla simple.

Mientras que usted está escribiendo código, algunos consejos sobre herramientas aparecerá, indicando el tipo de parámetro es necesario especificar.
Los consejos sobre herramientas también muestran los tipos de miembros que se admiten en una clase determinada:

Delphi C ++

Paso 6: Prueba de su aplicación móvil


La implementación de esta aplicación ha terminado, por lo que ahora se puede ejecutar la aplicación. Puede hacer clic en el correr

botón ( ) en el IDE, pulse F9, o seleccione Ejecutar> Ejecutar Del RAD Studio
menú principal:

Embarcadero Technologies 40
Delphi C ++

Probar la aplicación Android en el dispositivo Android

Si completa los pasos descritos en Tutorial móvil: Configurar el entorno de desarrollo en PC con Windows (Android) antes
de crear su nuevo proyecto, ahora se puede ejecutar su aplicación para Android en un dispositivo Android conectado a su PC
mediante un cable USB.

Embarcadero Technologies 41
Prueba de su IOS pruebas de aplicaciones en el

Mac (simulador de iOS)

Por defecto, las aplicaciones Delphi FireMonkey IOS se ejecutan en el simulador de iOS plataforma de destino. Se puede confirmar la plataforma
de destino en el Gerente de proyecto :

Cuando se ejecuta la aplicación, que se implementa en el Mac y luego al simulador de iOS en el Mac. Para nuestra aplicación, se muestra
un formulario con un cuadro de edición y un botón. Introducir texto en el cuadro de edición y haga clic en el Di hola botón:

Nota: En los simuladores de iOS, se puede probar únicamente sus aplicaciones Delphi.

Embarcadero Technologies 42
Las pruebas en un dispositivo iOS conectado

Si completa los pasos descritos en Tutorial móvil: Configurar el entorno de desarrollo en el Mac (IOS) y Tutorial móvil:
Configurar el entorno de desarrollo en PC con Windows (IOS) antes de crear su nuevo proyecto, ahora se puede ejecutar su
aplicación para iOS en un dispositivo iOS conectado a su Mac mediante un cable USB. Para ejecutar la aplicación de iOS en un
dispositivo iOS conectado, primero seleccione el iOS Device - 32 bit o iOS Device - 64 bit orientar la plataforma de manera que el
Asistente Plataforma despliega la aplicación al conectado Dispositivo iOS:

Después de seleccionar la adecuada dispositivo iOS plataforma de destino, ejecute su aplicación para iOS haciendo clic en el
correr botón en el IDE, presionando F9 o seleccionar Ejecutar> Ejecutar .

En el Mac, es posible que aparezca un cuadro de diálogo pidiendo su permiso para firmar el código aplicación de iOS. Seleccione "Permitir siempre" o
"Permitir" para firmar su aplicación.

A continuación, vaya a su dispositivo iOS y espere a que aparezca su aplicación FireMonkey IOS. Ver la imagen de la puesta en marcha de FireMonkey
(el icono está disponible en $ (BDS) \ bin \ ilustraciones \ IOS, y se puede establecer la imagen lanzamiento en Opciones de aplicación ):

Ver también

o Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android)

Embarcadero Technologies 43
o Desarrollo de aplicaciones móviles Android

o Desarrollo de aplicaciones móviles iOS

o Desarrollo de aplicaciones OS X

o Fragmentos de código móvil

Embarcadero Technologies 44
Tutorial móvil: El uso de una libreta de direcciones de
componentes (iOS y Android)

Antes de comenzar este tutorial, se recomienda que lea y realizar las siguientes tutoriales:

o Tutorial móvil: Utilizar un componente MultiView a la pantalla alternativa Vistas de Información


(IOS y Android)

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

FireMonkey proporciona la TAddressBook componente para trabajar con libreta de direcciones en los dispositivos iOS y Android.

Este tutorial describe cómo crear una aplicación FireMonkey simple que utiliza el
TAddressBook componente.

iOS Androide

iphone 5

Android (LG - E612)

Embarcadero Technologies 45
Características básicas de los componentes TAddressBook

En las plataformas móviles (iOS y Android), apoya la FireMonkey TAddressBook componente que permite a las aplicaciones acceder a un
libro de direcciones del dispositivo. Las características básicas de este componente son los siguientes:

o El envío de una solicitud de acceso a un libro de direcciones del dispositivo y obtener el estado de acceso.

o Acceso a todas las fuentes definidas en el libro de direcciones del dispositivo.

o Obtención de todas o individuales contactos de la fuente especificada.

o Obtención de todos los contactos del grupo (s) especificado.

o Editar o eliminar contactos y grupos existentes.

o Creación de nuevos contactos.

o Creación de nuevos grupos.

Creación de una aplicación de ejemplo

Esta sección le ayuda a desarrollar una aplicación de ejemplo (para plataformas de destino Android y iOS) que ilustra el
uso de la TAddressBook componente. La aplicación muestra las técnicas siguientes:

o La solicitud de un permiso de acceso a libreta de direcciones.

o Recuperando todos los contactos del defecto fuente en el libro de direcciones del dispositivo.

o Adición de un nuevo contacto a la libreta de direcciones.

o Eliminación de un contacto seleccionado de libreta de direcciones.

El diseño de la interfaz de usuario

1. Crear un espacio en blanco Aplicación Multi-Device , seleccionando:

ß por Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blank


Solicitud

ß por C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blank


Solicitud

2. En el Gerente de proyecto , Establecer la plataforma de destino para Android o iOS.

3. En el paleta de herramientas , Selecciona el TToolBar , TAddressBook y TListBox componentes y soltarlos en el Diseñador de


formularios .

4. En el Inspector de Objetos , selecciona el Alinear propiedad de TListBox a Cliente.

5. Sobre el Diseñador de formularios , botón derecho del ratón TListBox, y luego en el menú contextual, seleccione Añadir
Elemento> TSearchBox .

Embarcadero Technologies 46
6. En el paleta de herramientas , Selecciona el TMultiView componente, y soltarlo en el Diseñador de formularios .

El diseño de la barra de herramientas de aplicaciones y Panel Maestro

Coloque todos los elementos de control en la barra de herramientas y panel de Maestro:

o La barra de herramientas contiene tres botones de velocidad:

ß : Elimina un contacto seleccionado de la libreta de direcciones.

ß : Actualiza la lista actual de los contactos.

ß : Se abre el panel principal para agregar un nuevo contacto a la libreta de direcciones.

o El Panel Master proporciona una forma para especificar y añadir un nuevo contacto a la libreta de direcciones.

Para el diseño de la barra de herramientas de aplicación:

1. En la barra de herramientas superior, la caída de tres TSpeedButton componentes.

2. En el Diseñador de formularios , Haz lo siguiente:

ß Seleccionar SpeedButton1, y establecer el Nombre y StyleLookup a propiedades


btnRemove y trashtoolbuttonordered, respectivamente.

ß Seleccionar SpeedButton2, y establecer el Nombre y StyleLookup a propiedades


btnRefresh y refreshtoolbuttonordered, respectivamente.

ß Seleccionar SpeedButton3, y establecer el Nombre y StyleLookup a propiedades btnAdd


y addtoolbuttonordered, respectivamente.

Embarcadero Technologies 47
Después de realizar los pasos anteriores, su Diseñador de formularios será similar a la siguiente pantalla:

Para el diseño del panel de Maestro:

1. En el estructura Ver , seleccione MultiView1, y luego en el Inspector de Objetos , Especificar las siguientes propiedades:

ß Selecciona el MasterButton propiedad a btnAdd.

ß Selecciona el Modo propiedad a Cajón.

ß Para hacer el MultiView1 visible, establecer el Visible propiedad a Cierto.

2. En el paleta de herramientas , Seleccione tres TLabel componentes, tres TEdit componentes, y dos
TButton componentes, y caer al Multiview1.

3. En el Inspector de Objetos , Especifique las siguientes propiedades de los elementos de control que ha colocado en MultiView1:

ß por Label1, Label2, y Label3: selecciona el Texto a propiedades Nombre, Apellido


Nombre, y Correo de trabajo, respectivamente.

ß por Edit1, Edit2, y Edit3:

ß selecciona el Nombre propiedad a edtFirstName, edtLastName, y


edtWorkMail, respectivamente.

ß selecciona el KillFocusByReturn propiedad a cierto

ß selecciona el ReturnKeyType propiedad a Ir.

Embarcadero Technologies 48
ß por Botón 1 y button2:

ß selecciona el Texto propiedad a Añadir y Cancelar

ß selecciona el Nombre propiedad a btnOK y btnCancel, respectivamente.

Le recomendamos que organizar los elementos de control del panel principal de la siguiente manera:

Recuperando la lista de contactos

En esta sección se explica cómo recuperar la lista de contactos de la fuente por defecto en un libro de direcciones del dispositivo.

En su aplicación, definir los siguientes métodos privados:

o FillContactsList: Obtiene la lista de contactos de la fuente por defecto en el dispositivo de Dirección


Libro;

o AddListBoxItem: añade un nuevo elemento a Cuadro de lista.

Realizar los siguientes cambios en la sección privada de su código de aplicación:

Delphi:

privado
{} declaraciones privadas

Embarcadero Technologies 49
procedimiento FillContactList;
AddListBoxItem procedimiento (Contacto: TAddressBookContact);

C ++ Builder:

privadas: // declaraciones de los usuarios


void __fastcall FillContactsList ();
anulará __fastcall AddListBoxItem (TAddressBookContact * Contacto);

implementar el FillContactslist y AddListBoxItem métodos como sigue:

Delphi:

// Llenar la lista de contactos procedimiento

TForm1.FillContactList; var I: Integer;

Contactos: TAddressBookContacts; empezar

Contactos: = TAddressBookContacts.Create; tratar AddressBook1.AllContacts (AddressBook1.DefaultSource,

Contactos);
ListBox1.BeginUpdate; tratar ListBox1.Clear;

porque yo: = 0 a Contacts.Count - 1 hacer


AddListBoxItem (Contacts.Items [I]); finalmente

ListBox1.EndUpdate; fin;
finalmente

Contacts.Free; fin; fin;

// ------------------------------------------------ -------------------- // Añadir un nuevo contacto a la lista cuadro

procedimiento TForm1.AddListBoxItem (Contacto: TAddressBookContact); var ListBoxItem: TListBoxItem;

empezar

tratar ListBoxItem: = TListBoxItem.Create (nil);

ListBoxItem.Text: = Contact.DisplayName; ListBoxItem.Tag: =


Contact.ID; ListBox1.AddObject (ListBoxItem); finalmente

ListBoxItem.Free; fin; fin;

C ++ Builder:

// Llenar el cuadro de lista con los nombres de visualización de contacto existido. anulará
__fastcall TForm1 :: FillContactsList () {

Embarcadero Technologies 50
int i;
TAddressBookContacts * Contactos = new TAddressBookContacts (); __tratar { AddressBook1-> AllContacts (AddressBook1->

DefaultSource (), Contactos);


__tratar { ListBox1-> BeginUpdate ();

ListBox1-> Borrar ();


for (i = 0; i <contactos-> count; i ++)
AddListBoxItem (contactos-> Los productos que [i]);

} __finalmente {

ListBox1-> EndUpdate (); }}

__finalmente {
Contactos-> Libre (); }

} // ----------------------------------------------- ---------------------------- // Añadir un nuevo contacto a la lista cuadro

anulará __fastcall TForm1 :: AddListBoxItem (TAddressBookContact * Contacto) {


TListBoxItem * ListBoxItem = new TListBoxItem (ListBox1);

__tratar {

ListBoxItem-> Text = Contacto-> DisplayName; ListBoxItem-> Etiqueta


= Contacto-> ID; ListBox1-> AddObject (ListBoxItem); } __finalmente {

ListBoxItem-> Libre (); }}

Implementación del Control de Elementos Funcionalidad

Para completar el desarrollo de la aplicación, se debe implementar controladores de eventos para todos los elementos de control que se
le ha caído en el formulario de solicitud.

Para implementar los controladores de eventos OnClick para botones de velocidad:

1. Sobre el Diseñador de formularios , Haga doble clic en un botón de velocidad ( btnRefresh o btnRemove).

2. En el Editor de código , Especifique los siguientes controladores de eventos para cada botón:

Delphi:

// ------------------- Para botón Quitar -------------------------- --------------- procedimiento TForm1.btnRemoveClick (Sender: TObject); var ContactIndex,

ContactID: Integer;

Contacto: TAddressBookContact; empezar

ContactIndex: = ListBox1.ItemIndex; si (ContactIndex> -1) A


continuación, comenzará

Embarcadero Technologies 51
ContactID: = ListBox1.ListItems [ContactIndex] .Tag; Contacto: =
AddressBook1.ContactByID (Contact ID); Si los contactos <> nil entonces

tratar AddressBook1.RemoveContact (Contacto);

ListBox1.BeginUpdate;
ListBox1.Items.Delete (ContactIndex); finalmente

ListBox1.EndUpdate;
Contact.Free; fin; fin; fin;

// ------------------- Para botón Actualizar -------------------------- ------------- procedimiento TForm1.btnRefreshClick (Sender: TObject);
empezar

FillContactsList; fin;

C ++ Builder:

// ------------------- Para botón Quitar -------------------------- --------------- // Eliminar el contacto seleccionado de la lista de cuadro vacío
__fastcall TForm1 :: btnRemoveClick (TObject * remitente) {

int ContactIndex = ListBox1-> ItemIndex; si (ContactIndex> -1) {

int Contact ID = ListBox1-> ListItems [ContactIndex] -> Tag; TAddressBookContact * Contacto = AddressBook1->
ContactByID (Contact ID); si (Contacto! = NULL) {

__tratar { AddressBook1-> RemoveContact (Contacto);

ListBox1-> BeginUpdate (); ListBox1-> Productos-> Eliminar

(ContactIndex); } __finalmente {

ListBox1-> EndUpdate (); Contacto->


Libre (); }}}

} // -------------------------- Para botón Actualizar ------------------ ------------------- __fastcall vacío TForm1 :: btnRefreshClick (TObject * remitente) {

FillContactsList (); }

Para implementar los controladores de eventos onClick para los botones del panel principal:

1. En el estructura Ver , seleccione MultiView1.

2. En el Inspector de Objetos , selecciona el Visible propiedad a Cierto.


Esto hace que el panel principal visible.

3. En el panel principal, haga doble clic en el Añadir botón y, a continuación, aplicar el siguiente
controlador de eventos:

Embarcadero Technologies 52
ß por Delphi:

// ------------------------------------------------ -------------------- // Agregar un contacto de nueva creación a libreta de direcciones


procedimiento TForm1.btnOKClick (Sender: TObject); var Contacto: TAddressBookContact;

emails: TContactEmails; Direcciones:

TContactAddresses; empezar

Contacto: = AddressBook1.CreateContact (AddressBook1.DefaultSource); tratar Contact.FirstName: =

edtFirstName.Text;
Contact.LastName: = edtLastName.Text; // Añadir los correos electrónico de trabajo: = TContactEmails.Create;
tratar eMails.AddEmail (TContactEmail.TLabelKind.Work, edtWorkMail.Text);

Contact.eMails: = mensajes de correo electrónico;


finalmente
eMails.Free; fin;

AddressBook1.SaveContact (Contacto); tratar ListBox1.BeginUpdate;

AddListBoxItem (Contacto); finalmente

ListBox1.EndUpdate; fin;
finalmente

Contact.Free; fin;

MultiView1.HideMaster; fin;

ß por C ++:

// Añadir un contacto recién creado a libreta de direcciones sin efecto __fastcall TForm1 ::
btnOKClick (TObject * Remitente) {

TContactEmails * Los correos electrónicos;


TAddressBookContact * = Contacto
AddressBook1-> CreateContact (AddressBook1-> DefaultSource ()); __tratar {

Contacto-> Nombre = edtFirstName-> texto; Contacto-> Apellido = edtLastName-> texto; // Añadir


los correos electrónico de trabajo = nuevos TContactEmails (); __tratar { eMails-> AddEmail
(TContactEmail :: :: TLabelKind trabajo,

edtWorkMail-> texto); Contacto-> = mensajes de correo


electrónico mensajes de correo electrónico; }

Embarcadero Technologies 53
__finalmente {
eMails-> Libre (); } AddressBook1->

SaveContact (Contacto); __tratar { ListBox1-> BeginUpdate

();
AddListBoxItem (Contacto); } __finalmente

{
ListBox1-> EndUpdate (); }} __finalmente

Contacto-> Libre (); } MultiView1->

HideMaster (); }

4. En el panel principal, haga doble clic en el Cancelar botón y, a continuación, aplicar el siguiente
controlador de eventos:

ß por Delphi:

// Borrar y cerrar el Agregar nuevo contacto procedimiento de forma


TForm1.btnCancelClick (Sender: TObject); empezar

edtFirstName.Text: = '';
edtLastName.Text: = ''; edtWorkMail.Text:
= ''; MultiView1.HideMaster; fin;

ß por C ++:

// Borrar y cerrar el Agregar nuevo contacto formulario vacío __fastcall TForm1 ::

btnCancelClick (TObject * Remitente) {

edtFirstName-> Text = ""; edtLastName->


Text = ""; edtWorkMail-> Text = ""; MultiView1->
HideMaster (); }

Mantener libreta de direcciones de sincronización

Tal vez algunas herramientas de terceros realizar cambios en una libreta de direcciones del dispositivo cuando se ejecuta la aplicación. En
este escenario, es importante para mantener la información sincronizada entre el libro de direcciones del dispositivo y la instancia de la libreta
de direcciones con las que su aplicación está trabajando directamente. Para este fin, proporciona la FireMonkey

TAddressBook.RevertCurrentChangesAndUpdate método.

Embarcadero Technologies 54
Para mantener la sincronización de libreta de direcciones

1. En el Inspector de Objetos , seleccione AddressBook1, y abra la Eventos lengüeta.

2. Haga doble clic al lado OnExternalChange, y luego poner en práctica el siguiente evento
entrenador de animales:

ß por Delphi:

procedimiento TForm1.AddressBook1ExternalChange (ASender: TObject); empezar

AddressBook1.RevertCurrentChangesAndUpdate; FillContactsList; fin;

ß por C ++:

vacío __fastcall TForm1 :: AddressBook1ExternalChange (TObject * ASender) {


AddressBook1-> RevertCurrentChangesAndUpdate (); FillContactsList (); }

Configuración del acceso a la libreta de direcciones

antes de utilizar TAddressBook , Su aplicación debe solicitar un permiso para acceder a la libreta de direcciones en un
dispositivo móvil de destino.

Esta sección proporciona los pasos para configurar sus aplicaciones para Android e iOS para acceder a la libreta de direcciones en los
dispositivos móviles de destino.

Para solicitar permiso para acceder a la libreta de direcciones:

1. En el Inspector de Objetos , seleccione Formulario 1, y abra la Eventos lengüeta.

2. Haga doble clic al lado en el programa, y luego poner en práctica el siguiente controlador de eventos:

ß por Delphi:

TForm1.FormShow procedimiento (Sender: TObject); empezar

// mostrar este cuadro de información durante la carga de los contactos si AddressBook1.Supported


luego comenzar

TDialogService.ShowMessage ( 'Carga de contactos ...');


AddressBook1.RequestPermission; end else

ShowMessage ( 'Esta plataforma no soporta el servicio de libreta de direcciones'); fin;

Embarcadero Technologies 55
ß por C ++:

anulará __fastcall TForm1 :: FormShow (TObject * Remitente) {


si (AddressBook1-> Compatible ()) {
// mostrar este cuadro de información mientras se carga el TDialogService contactos ::

ShowMessage ( "Carga de los contactos ..."); AddressBook1-> requestPermission (); } Else {

TDialogService :: ShowMessage

( "Esta plataforma no soporta la libreta de direcciones


Servicio.");
}}

Nota Usar el TDialogService.ShowMessage método, asegúrese de que su código incluye las


siguientes instrucciones:

Delphi:

usos
FMX.DialogService;

C ++:

# incluir <FMX.DialogService.hpp>

3. En el Inspector de Objetos , seleccione AddressBook1, y abra la Eventos lengüeta.

4. Haga doble clic al lado OnPermissionRequest, y luego poner en práctica el siguiente evento
entrenador de animales:

ß por Delphi:

procedimiento TForm1.AddressBook1PermissionRequest (ASender: TObject;


const unMensaje: string; const AAccessGranted: Boolean); empezar

Si a continuación, AAccessGranted
Empezar
FillContactlist; Fin

más
ShowMessage ( 'No se puede tener acceso a la Libreta de direcciones Motivo:'. + UnMensaje);

fin;

ß por C ++:

Embarcadero Technologies 56
vacío __fastcall TForm1 :: AddressBook1PermissionRequest (TObject * ASender,
const UnicodeString unMensaje, const int AAccessGranted) {if (AAccessGranted) {

FillContactsList (); } Else { ShowMessage ( "No se puede tener acceso a la Libreta de

direcciones Motivo:". + UnMensaje);

}}

Configuración de aplicaciones de Android para acceder a la libreta de direcciones

Antes de ejecutar aplicaciones Android que utilizan el TAddressBook componente, es necesario configurar algunos utiliza
permisos para su proyecto.

Para configurar utiliza permisos:

1. En el estudio IDE RAD, abierto Proyecto> Opciones> utiliza permisos .

2. Activar los permisos siguientes:

ß Obtener cuentas

ß leer los contactos

ß contactos escribir

Ejecución de la aplicación de ejemplo


Para ejecutar esta aplicación, haga lo siguiente:

1. En el Gerente de proyecto , Seleccionar la plataforma de destino (con el apoyo de plataformas: Android o iOS).

Importante: Antes de ejecutar esta aplicación en los dispositivos Android, asegúrese de que ha completado los pasos de Configuración
de aplicaciones de Android para acceder a la libreta de direcciones .

2. prensa Shift + Ctrl + F9 para ejecutar la aplicación sin depurar. Para probar la

aplicación, puede utilizar los siguientes escenarios.

Para añadir un nuevo contacto a la libreta de direcciones

1. En la barra de herramientas de aplicaciones, pulse .


Esto abre el panel principal.

2. En el panel principal, introduzca la información correspondiente en el Nombre Apellido, y


electrónico del trabajo cajas de texto. Cuando termine, pulse Añadir para agregar el contacto recién creado a libreta de direcciones.

Embarcadero Technologies 57
Para eliminar un contacto

1. En la lista de contactos, pulse un contacto que desea eliminar.

2. En la barra de herramientas de aplicaciones, pulse


¡Atención! Esto elimina el contacto de la libreta de direcciones del dispositivo sin mostrar un mensaje de confirmación!

Embarcadero Technologies 58
Ver también

o TAddressBook

o Tutorial móvil: Utilizar un componente MultiView a la pantalla alternativa Vistas de Información


(IOS y Android)

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

Ejemplos de código

o Cumpleaños Recordatorio Muestra

o Dirección Muestra libro

Embarcadero Technologies 59
Tutorial móvil: Uso de un botón
Componente con diferentes estilos (iOS y Android)

Botones en plataformas móviles


FireMonkey define varios tipos de botones, y se puede utilizar estos diferentes tipos de botones con los mismos pasos
descritos aquí. Los botones incluyen FireMonkey TButton y
TSpeedButton .

Los siguientes son algunos ejemplos de diferentes estilos con componentes de botón disponibles para su uso en diferentes partes
de la interfaz de usuario de la aplicación:

o Los botones de la forma:

iOS Androide

o Los botones de la barra de navegación ( también conocido como barra de herramientas):

Embarcadero Technologies 60
iOS Androide

Definir la apariencia de un componente Button


Después de colocar un nuevo botón en la Diseñador de formularios , Puede especificar algunas propiedades importantes para un componente seleccionado
mediante el uso de la Inspector de Objetos .

Seleccione un componente (en este caso, un botón), a continuación, busque y cambie el valor de algunas propiedades de la siguiente manera:

o Cambiar el texto que aparece en la superficie botón mediante la actualización del valor de la Texto
propiedad en el Inspector de Objetos .

o Cambiar el valor de la Position.X y Position.Y propiedades (o arrastrar el componente


con el ratón.)

o Cambiar el valor de la Altura y / o Anchura propiedades (o arrastrar el borde de la


componente utilizando el ratón.)

o Haga clic en la flecha hacia abajo en el StyleLookup propiedad. En el StyleLookup En la lista desplegable, puede seleccionar

un estilo predefinido en función de cómo su componente se va a utilizar:

Embarcadero Technologies 61
o Para crear un botón de color, cambiar los valores de la tintColor y IconTintColor
propiedades. Esta última propiedad sólo está disponible para los botones de estilo con iconos. La siguiente sección proporciona
más detalles sobre el uso de tintColor y IconTintColor.

Usando tintColor y IconTintColor en los botones

por TButton y TSpeedButton , FireMonkey proporciona dos propiedades que determinan cómo teñir o colorear el botón:

o tintColor Especifica el color de fondo del botón.

o IconTintColor especifica el color del icono de estilo botones.

Embarcadero Technologies 62
Nota: los tintColor y IconTintColor propiedades sólo están disponibles en el
Inspector de Objetos si selecciona un estilo adecuado para el botón y seleccione una vista adecuada en el Diseñador de

formularios (Estas propiedades no son visibles en todos Puntos de vista). Para la plataforma de destino Android:

Se puede aplicar un tinte a la mayoría de los botones de cualquier estilo:

o Para los botones de velocidad, es necesario seleccionar un valor StyleLookup adecuada con el fin de cambiar
el tintColor valor en el inspector de objetos.

o Modificar tintColor y IconTintColor, elegir un dispositivo Android desde el Puntos de vista lista
en la parte superior derecha del diseñador de formularios.

Para las plataformas de destino iOS:

o FireMonkey proporciona botones que corresponden a la Guía de estilo de manzana , Y algunos botones no sean compatibles
con la función de tinte.

o Por ejemplo, en IOS, botones segmentados tienen la tintColor propiedad. Cuando se cambia el StyleLookup propiedad

de un botón, el Inspector de Objetos Muestra u oculta la automáticamente tintColor y IconTintColor propiedades como

apropiado para el
StyleLookup El valor de la propiedad. La siguiente imagen muestra tres TSpeedButtons en una aplicación para Android:

Embarcadero Technologies 63
Usando diseñadas y coloreadas botones de Plataformas de destino

Para obtener información sobre la disponibilidad de la StyleLookup , tintColor y IconTintColor propiedades de botones en todas las plataformas
de destino, ver este cuadro resumen: Usando diseñadas y coloreadas botones de Plataformas de destino .

Personalización de botones con Estilos

Ahora en FireMonkey, una TStyleBook componente es una colección de estilos para diferentes plataformas de destino. Usted puede crear
sus estilos personalizados de un solo botón o para una clase de control conjunto ( TButton o TSpeedButton ).

Para empezar a trabajar con estilos personalizados para los botones

1. En el Diseñador de formularios , Asegúrese de que ha seleccionado Dominar desde el selector de vista .

2. Sobre el Diseñador de formularios , Haga clic en un botón de velocidad botón o, a continuación, elija en el menú contextual uno de los siguientes
elementos:

ß Editar estilo personalizado: se abre la FireMonkey estilo del diseñador para editar los estilos de
botón seleccionado.

ß Editar estilo por defecto: se abre la FireMonkey estilo del diseñador para editar los estilos de
la clase de control seleccionada (tal como TButton o TSpeedButton ).

Para obtener más información acerca de trabajar con estilos personalizados, consulte los siguientes temas:

o Personalización de las aplicaciones FireMonkey con Estilos

o FireMonkey estilo del diseñador

o Editor BitmapLinks

La colocación de una imagen sobre un botón

RAD Studio le permite poner fácilmente imágenes personalizadas en componentes de botón en tiempo de diseño.

Embarcadero Technologies 64
Para colocar una imagen sobre un botón:

1. Con un TButton y TImage componente en el Diseñador de formularios , hacer TImage un niño


componente de TButton . (Utilizar el estructura Ver .)

2. En el Inspector de Objetos , seleccione TImage y establecer su Alinear propiedad a Cliente.

3. En el estructura Ver , Seleccione el botón, expanda el Imagen nodo y, a continuación, haga clic 0 - Empty (1.000).

4. En el Inspector de Objetos , Haga clic en el botón de puntos suspensivos (...) junto a Mapa de bits.

5. Añadir la imagen personalizada en el Editor MultiResBitmap .

6. En el Inspector de Objetos , seleccione TButton, y hacer lo siguiente:

ß Limpiar el Texto propiedad.

ß Selecciona el Altura y Anchura propiedades de TButton a la altura y la anchura real


de la imagen.

Crear una Uso del control segmentado Componentes de botón


FireMonkey utiliza un componente SpeedButton para definir el Control de segmentada, el cual ofrece a los usuarios la posibilidad de
seleccionar un valor entre varias opciones.

iOS Androide

Para definir un control segmentado, utilice los pasos siguientes:

Embarcadero Technologies sesenta y cinco


1. Coloque tres TSpeedButton componentes de la paleta de herramientas . Coloque los componentes TSpeedButton
lado de la otra con el ratón:

iOS Androide

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


segmentedbuttonleft:

iOS Androide

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


segmentedbuttonmiddle.

4. Seleccione el tercer componente, y cambie su propiedad a StyleLookup


segmentedbuttonright. Ahora los tres botones se ven como un control segmentado:

iOS Androide

5. Seleccione cada componente, y cambiar el Texto propiedad a su gusto:

iOS Androide

6. Utilizar el ratón para seleccionar estos tres botones:

Embarcadero Technologies 66
iOS Androide

7. Selecciona el Nombre del grupo propiedad a un nombre exclusivo como LocationSegments:

8. Para especificar que uno de estos componentes es que aparezca como Presionado por defecto, establecer el
Se presiona propiedad de un componente a Cierto:

iOS Androide

Crear una barra de Alcance en un componente de barra de herramientas

Se puede definir un control segmentado en una barra de herramientas; Esto también se conoce como una Ámbito de bar, un control segmentado
que se puede utilizar para controlar el ámbito de una búsqueda.

Usa los mismos controles TSpeedButton como en los pasos anteriores, pero con los siguientes valores para la StyleLookup propiedad
(sólo disponible en la plataforma de destino IOS):

o toolbuttonleft

o toolbuttonmiddle

o toolbuttonright

(En el conjunto de plataforma de destino Android StyleLookup como Botón de herramienta para cada uno de los botones).

Embarcadero Technologies 67
iOS Androide

Las diferencias importantes entre un TButton y


TSpeedButton
o TSpeedButton no puede recibir LENGÜETA atención. Eso también significa que al pulsar una TSpeedButton
no le quita el foco de otros elementos.

o TSpeedButton se entiende principalmente para ser un botón de la barra de herramientas.

o El estilo de TSpeedButton puede ser diferente que el estilo de TButton . Por ejemplo, en la plataforma Android, el estilo por
defecto de la TSpeedButton es similar a la Botón de herramienta
estilo de la TButton . Si quieres una TSpeedButton con un estilo similar al de la TButton , elegir el ButtonStyle
estilo.

Ver también

o Tutorial móvil: Creación de una aplicación para plataformas móviles (iOS y Android)

o Tutorial móvil: Utilizar un componente de calendario para seleccionar una fecha (iOS y Android)

o Tutorial: Uso del editor BitmapLinks

o FireMonkey estilo del diseñador

o Desarrollo de aplicaciones móviles Android

o Muestra FMX.Controls

o FMX.StdCtrls.TButton

o FMX.StdCtrls.TSpeedButton

o FMX.Controls.TStyledControl.StyleLookup

o FMX.StdCtrls.TToolBar

o FMX.StdCtrls.TCustomButton.IconTintColor

o FMX.StdCtrls.TCustomButton.TintColor

o FMX.StdCtrls.TToolBar.TintColor

Embarcadero Technologies 68
Tutorial móvil: Utilizar un componente de calendario
para seleccionar una fecha (iOS y Android)

Calendario en plataformas móviles


FireMonkey utiliza el TDateEdit componente para envolver un componente de calendario o planificador de evento para la plataforma de destino
móvil:

ios 7 Androide

Ipad 2

LG-E612

Nota: los TCalendarEdit componente utilizado en RAD Studio XE5 o anterior está en desuso. Utilizar el TDateEdit
componente en su lugar.

Usar el TDateEdit componente, realice los siguientes pasos:

1. Selecciona el TDateEdit componente en el paleta de herramientas , Y soltar el componente sobre la


Diseñador de formularios . Para encontrar el componente en la paleta de herramientas, introduzca los primeros caracteres (como "DAT")

en el buscador ( ):

Embarcadero Technologies 69
Después se le cae el componente, se puede ver la TDateEdit componente en el Diseñador de formularios:

Opcionalmente, en el Inspector de Objetos , Se pueden establecer las siguientes propiedades de TDateEdit:

ß ShowCheckBox : cuando cierto, muestra una casilla de verificación en la TDateEdit controlar. Esta
casilla de verificación permite activar / desactivar el TDateEdit el control en tiempo de ejecución.

ß ShowClearButton : cuando cierto, muestra un botón en el TDateEdit controlar. Hacer clic


este botón para borrar los valores de este control en tiempo de ejecución.

2. Básicamente, eso es todo. Ejecutar la aplicación ya sea en un simulador o el móvil conectado


dispositivo. Después de tocar TDateEdit, aparece el control de calendario, y se puede seleccionar una fecha.

Embarcadero Technologies 70
iOS6 (iPhone5) Android (LG-E612)

La implementación de un controlador de eventos para los cambios del usuario de la Fecha

Después de que el usuario cambia la fecha, la AlCambiar evento se dispara. Se puede implementar un controlador de eventos para el AlCambiar evento
para reaccionar a la acción del usuario.

Para implementar el controlador de eventos OnChange'

1. Selecciona el TDateEdit componente.

2. En el Inspector de Objetos , abre el Eventos página, y haga doble clic en el espacio vacío al lado de AlCambiar.

3. Escribir el código de la siguiente manera:

Delphi:

procedimiento TForm25.DateEdit1Change (Sender: TObject); empezar ShowMessage

(FormatDateTime ( 'dddddd', DateEdit1.Date)); fin;

C ++ Builder:

Embarcadero Technologies 71
vacío __fastcall TForm25 :: DateEdit1Change (TObject * Remitente) {

ShowMessage (FormatDateTime ( "dddddd", DateEdit1-> Fecha)); }

Este código muestra un cuadro de diálogo de mensaje con una fecha seleccionada. los FormatDateTime función convierte la fecha seleccionada en un
formato especificado (en este caso dddddd da formato de fecha al estilo de largo):

iOS (iPad) Android (LG-E612)

Ver también

o Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android)

o Tutorial móvil: Usando Combo componentes de la caja para recoger cosas de una lista (IOS y
Androide)

o Fecha y Hora de apoyo

o rutinas de conversión de tipo

o FMX.DateTimeCtrls.TDateEdit

Embarcadero Technologies 72
Las muestras

o Selector de fechas muestra

Embarcadero Technologies 73
Tutorial móvil: Usando Combo componentes de la caja para
recoger cosas de una lista (iOS y Android)

La implementación de un selector de aplicaciones en múltiples dispositivos

Para plataformas móviles, FireMonkey envuelve el componente Selector con el TComboBox


componente:

iOS Androide

Para definir un selector y los elementos de la lista asociados:

1. Seleccione una de las siguientes:

ß Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Aplicación en blanco

ß Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Aplicación en blanco

2. Selecciona el TComboBox componente en el paleta de herramientas , Y soltarlo en el Formar


Diseñador .
Para encontrar TComboBox, introduzca los primeros caracteres ( "com") en el cuadro de búsqueda de la paleta de herramientas:

Embarcadero Technologies 74
3. Después se le cae el componente, se puede ver el componente TComboBox en el Formulario
Diseñador. Haga clic con el TComboBox del componente y seleccione Los productos editor ...:

4. Para definir elementos, haga clic Añadir artículo varias veces.

5. En el estructura Ver , seleccione ListBoxItem1 ( el primer elemento de la lista).

6. En el Inspector de Objetos , Edite el Texto viviendas en ListBoxItem1.


En este ejemplo (los cincuenta estados de los EE.UU.), introduzca "Alabama" como el primer elemento de la lista:

Embarcadero Technologies 75
7. Editar otros elementos, así, como Alaska, Arizona, Arkansas, California, Colorado, y por lo
adelante.

8. Selecciona el TComboBox componente y en el inspector de objetos, establezca la


TComboBox.Align propiedad a Parte superior.

9. Añadir un segundo TComboBox ( ComboBox2) a la forma. Selecciona el TComboBox


componente en el paleta de herramientas Y dejarlo caer de nuevo en el Diseñador de formularios .

10. Seleccionar ComboBox2 y en el Inspector de Objetos , selecciona el TComboBox.Align propiedad a


Fondo.

11. Ejecutar la aplicación en la plataforma de destino elegido móvil (simulador de iOS (para Delphi
solamente), iOS Device, o Dispositivo Android). Después de tocar una TComboBox , Aparece el control Selector, y se puede
seleccionar un elemento.

La construcción de una lista de artículos mediante código

Para crear una lista de artículos que utilizan código, debería poner en práctica el onFormCreate controlador de eventos de la siguiente manera:

Delphi:

procedimiento TForm1.FormCreate (Sender: TObject); empezar

ComboBox2.Items.Add ( 'Tiger'); ComboBox2.Items.Add (


'Cat'); ComboBox2.Items.Add ( 'Penguin');
ComboBox2.Items.Add ( 'Bee'); // Otros animales se pueden
enumerar aquí ComboBox2.Items.Add ( 'elefante');
ComboBox2.Items.Add ( 'Lion'); fin;

Embarcadero Technologies 76
C ++ Builder:

anulará __fastcall TForm1 :: FormCreate (TObject * Remitente) {ComboBox2->

Productos-> Añadir ( "Tiger");


ComboBox2-> Productos-> Añadir ( "gato"); ComboBox2->
Productos-> Añadir ( "pingüino"); ComboBox2-> Productos->
Añadir ( "abeja"); // Otros animales se pueden enumerar aquí
ComboBox2-> Productos-> Añadir ( "elefante"); ComboBox2->
Productos-> Añadir ( "León"); }

Viendo un artículo específico


El elemento seleccionado se especifica por el ItemIndex propiedad. ItemIndex es un valor entero que se 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 ( "California"), especifique ItemIndex para ComboBox1 de la siguiente manera:

Delphi:

procedimiento TForm1.FormCreate (Sender: TObject); empezar

// Índice del quinto elemento es "4" ComboBox1.ItemIndex: =


4; ComboBox2.Items.Add ( "Tiger"); ComboBox2.Items.Add (
"gato"); ComboBox2.Items.Add ( "Penguin");
ComboBox2.Items.Add ( "abeja"); // Otros animales se
pueden enumerar aquí ComboBox2.Items.Add ( "elefante");
ComboBox2.Items.Add ( "Lion"); fin;

C ++ Builder:

vacío __fastcall TForm1 :: FormCreate (TObject * Remitente) {// Índice del quinto

elemento es "4"
ComboBox1-> ItemIndex = 4; ComboBox2-> Productos->
Añadir ( "Tiger"); ComboBox2-> Productos-> Añadir ( "gato");
ComboBox2-> Productos-> Añadir ( "pingüino"); ComboBox2->
Productos-> Añadir ( "abeja"); // Otros animales se pueden
enumerar aquí ComboBox2-> Productos-> Añadir ( "elefante");
ComboBox2-> Productos-> Añadir ( "León"); }

Embarcadero Technologies 77
Si usted no sabe el valor del índice, se puede encontrar el valor mediante el uso de la Índice de método. Para mostrar la ComboBox2
con el artículo cuyo texto es 'Penguin' seleccionado, añada la línea siguiente al código anterior:

Delphi:

ComboBox2.ItemIndex: = ComboBox2.Items.IndexOf ( 'Penguin');

C ++ Builder:

ComboBox2-> ItemIndex = ComboBox2-> los items> IndexOf ( "Penguin");

La implementación de un controlador de eventos para la selección del usuario

Después de que el usuario selecciona un elemento, el AlCambiar evento se dispara. Para responder a la acción del usuario, se puede implementar un
controlador de eventos para el evento OnChange.

Nota: Antes de continuar con este escenario, realice los siguientes pasos:

1. Selecciona el TMemo componente en el paleta de herramientas , Y soltarlo en el


Diseñador de formularios .

2. En el Inspector de Objetos , selecciona el TMemo.Align propiedad a Cliente.

Para implementar un controlador de eventos OnChange:

1. Selecciona el ComboBox1 componente.

2. En el Inspector de Objetos , abre el Eventos página, y haga doble clic en el espacio vacío al lado de AlCambiar.

3. los Editor de código se abre. Escribir el código de la siguiente manera:

Delphi:

procedimiento TForm1.ComboBox1Change (Sender: TObject); empezar

Memo1.Lines.Insert (0, ((Formato '% s: se seleccionó elemento% s en el índice% d.', [ComboBox1.Name,


ComboBox1.Selected.Text, ComboBox1.ItemIndex]))); fin;

C ++ Builder:

vacío __fastcall TForm1 :: ComboBox1Change (TObject * Remitente)


{Memo1-> líneas-> Insertar (0, ComboBox1-> Nombre + ": El artículo" + ComboBox1-> Seleccionado-> Texto + "en el Índice" + IntToStr

(ComboBox1-> ItemIndex) + "Se seleccionó"); }

Embarcadero Technologies 78
Este controlador de eventos muestra un diálogo de mensaje que indica el elemento seleccionado. En el código de Delphi, el Formato función

devuelve una cadena con formato montado a partir de una cadena de formato y una serie de argumentos:

Android (LG - E612) iOS6 (IPAD)

Ver también

o Tutorial móvil: Utilizar un componente de calendario para seleccionar una fecha (iOS y Android)

o Tutorial móvil: Utilización de componentes de la ficha para mostrar las páginas (iOS y Android)

o Creación de una interfaz de usuario ComboBox Metropolis

o Desarrollo de aplicaciones móviles iOS

o Desarrollo de aplicaciones OS X

Embarcadero Technologies 79
Las muestras

o FireMonkey Selector personalizada muestra

Embarcadero Technologies 80
Tutorial móvil: El uso de un componente de mapa para
trabajar con mapas (iOS y Android)

FireMonkey envuelve un componente de mapa como TMapView . Este componente proporciona acceso a las API de mapas que dependen de
la plataforma de destino de la siguiente manera:

o En los dispositivos Android: API de Google Maps para Android

o En los dispositivos iOS: Mapa del Kit

Este tutorial describe cómo crear una aplicación FireMonkey simple que utiliza el TMapView
componente.

iOS Androide

Protectores

Android (LG - E612)

Características básicas de los componentes TMapView

los TMapView componente añade mapas interactivos a sus aplicaciones móviles. Las características básicas de este
componente son los siguientes:

Embarcadero Technologies 81
o Cuatro tipos de mapas: Normal, satélite, híbrido, y (para Android solamente) Terreno

o Control de gestos: de inclinación intuitiva, rotar, y los controles de zoom gesto

o Controlar el mapa: Capacidad para controlar las propiedades de mapa, como el centro del mapa
coordina, la orientación del mapa, etc.

Creación de una aplicación de ejemplo

Esta sección le ayuda a desarrollar una aplicación de ejemplo (para plataformas de destino Android y iOS) que ilustra
el uso de la TMapView componente. La aplicación muestra las técnicas siguientes:

o Selección de un tipo de mapa

o Al girar el mapa

o Especificando las coordenadas del centro del mapa

o Adición de marcadores para el mapa

Configuración de aplicaciones de Android para utilizar el componente TMapView

Antes de usar Google Maps, asegúrese de que tiene una API de Google Maps para Android clave (libremente disponible). Sin esta

clave en su lugar, su aplicación de mapas generará un error en tiempo de ejecución. También es necesario configurar algunas permisos y

opciones de proyectos para su aplicación. Para obtener instrucciones detalladas sobre cómo configurar la aplicación, consulte Configuración

de aplicaciones de Android para usar Google Maps .

El diseño de la interfaz de usuario

1. Crear un espacio en blanco Aplicación Multi-Device , seleccionando:

ß por Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blank


Solicitud

ß por C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blank


Solicitud

2. Seleccionar dos TToolBar componentes de la paleta de herramientas Y soltarlos en el Formar


Diseñador .

3. Selecciona el TMapView componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

4. En el Inspector de Objetos , selecciona el Alinear propiedad de TMapView a Cliente.

5. En el Inspector de Objetos , selecciona el Alinear propiedades de las barras de herramientas a Parte superior y Fondo,
respectivamente.

Embarcadero Technologies 82
El diseño de las barras de herramientas de aplicación

Coloque todos los elementos de control sobre las barras de herramientas. La aplicación utiliza dos barras de herramientas (Una barra de herramientas superior,
y una barra de herramientas inferior).

Para el diseño de la barra de herramientas superior

o En el paleta de herramientas , Seleccione los siguientes componentes y los deje caer sobre la barra de herramientas superior:

ß TTrackBar : Rota el mapa.

ß Dos TEdit componentes: le permiten establecer las coordenadas del centro del mapa (latitud
y longitud).

ß TButton : Actualiza el mapa con el centro del mapa actual coordina. Para especificar las propiedades

adecuadas para los elementos de control, haga lo siguiente:

1. En el Diseñador de formularios , seleccione TrackBar1 y establecer el Max propiedad a 359.

2. Seleccionar edit1, y establecer el Nombre y Texto a propiedades edLat y 0.0, respectivamente.

3. Seleccionar Edit2, y establecer el Nombre y Texto a propiedades edLong y 0.0, respectivamente.

4. Seleccionar Botón 1, y establecer el Texto propiedad a Ir.

Para el diseño de la barra de herramientas inferior

1. En el paleta de herramientas , Selecciona el TLayout componentes y colóquelo en la barra de herramientas inferior.

2. En el Inspector de Objetos , Especifique las siguientes propiedades de Layout1:

ß Selecciona el Alinear propiedad a Centrar.

ß Selecciona el Anchura propiedad a 241.

3. En el paleta de herramientas , Seleccione tres TSpeedButton componentes y agregarlos como elementos secundarios de Layout1.

4. En el Inspector de Objetos , Especifique las siguientes propiedades de los botones de velocidad:

ß Selecciona el Texto propiedad de botones para Normal, satélite, y Híbrido,


respectivamente.

ß Selecciona el Nombre del grupo propiedad de cada botón para Selector.

ß Selecciona el StyleLookup propiedad a segmentedbuttonleft,


segmentedbuttonmiddle, y segmentedbuttonright, respectivamente.

Después de realizar los pasos anteriores, su Diseñador de formularios será similar a la siguiente pantalla:

Embarcadero Technologies 83
Implementación del Control de Elementos Funcionalidad

Para completar el desarrollo de la aplicación, se debe implementar controladores de eventos para todos los elementos de control que se le ha
caído en las barras de herramientas.

Para implementar los controladores de eventos OnClick para botones de velocidad

1. Sobre el Diseñador de formularios , Haga doble clic en un botón de velocidad ( Normal, satélite, y Híbrido).

2. En el Editor de código , Especifique los siguientes controladores de eventos para cada botón:

Delphi:

// ------------------- Para botón normal -------------------------- --------------


-
procedimiento TForm1.SpeedButton1Click (Sender: TObject); empezar

MapView1.MapType: = TMapType.Normal;
TrackBar1.Value: = 0,0; fin;

// ------------------- Para botón de satélite -------------------------- -----------


- -

procedimiento TForm1.SpeedButton2Click (Sender: TObject); empezar

MapView1.MapType: = TMapType.Satellite;
TrackBar1.Value: = 0,0; fin;

// -------------------- Para botón híbrido ------------------------- --------------


- -

Embarcadero Technologies 84
procedimiento TForm1.SpeedButton3Click (Sender: TObject); empezar

MapView1.MapType: = TMapType.Hybrid;
TrackBar1.Value: = 0,0; fin;

C ++ Builder:

// ------------------- Para botón normal -------------------------- --------------


-
vacío __fastcall TForm1 :: SpeedButton1Click (TObject * Remitente) {
MapView1-> MapType = TMapType :: normal; TrackBar1->
Valor = 0,0;
} // ------------------- Para botón de satélite ------------------------- ------------

- -

vacío __fastcall TForm1 :: SpeedButton2Click (TObject * Remitente) {


MapView1-> MapType = TMapType :: satélite; TrackBar1-> Valor =
0,0;
} // -------------------- Para botón híbrido ------------------------ ---------------

- -

vacío __fastcall TForm1 :: SpeedButton3Click (TObject * Remitente) {


MapView1-> MapType = TMapType :: híbrido; TrackBar1->

Valor = 0,0; }

Para implementar el controlador de eventos OnChange para el elemento de barra de la pista

1. Sobre el Diseñador de formularios , Seleccione TrackBarl1.

2. En el Inspector de Objetos , abre el Eventos pestaña, y luego haga doble clic al lado onChange.
Especifique el siguiente código:

Delphi:

procedimiento TForm1.TrackBar1Change (Sender: TObject); empezar

MapView1.Bearing: = TrackBar1.Value; fin;

C ++ Builder:

anulará __fastcall TForm1 :: TrackBar1Change (TObject * Remitente) {MapView1-> Teniendo

TrackBar1- => Valor; }

Para implementar el controlador de eventos OnClick para el botón Ir

Embarcadero Technologies 85
1. Sobre el Diseñador de formularios , Haga doble clic en el Ir botón.

2. En el Editor de código , Especifique el siguiente código:

Delphi:

procedimiento TForm1.Button1Click (Sender: TObject); var centro del mapa:

TMapCoordinate; empezar

centro del mapa: = TMapCoordinate.Create (StrToFloat (edLat.Text),


StrToFloat (edLong.Text)); MapView1.Location: =
centro del mapa; fin;

C ++ Builder:

vacío __fastcall TForm1 :: Button1Click (TObject * Remitente) {


TMapCoordinate centro del mapa = TMapCoordinate :: Create (StrToFloat (edLat-
> Texto),
StrToFloat (edLong-> texto)); MapView1->

Localización = centro del mapa; }

Los marcadores identifican ubicaciones en el mapa. Si desea agregar marcadores al mapa, se puede implementar el OnMapClick
controlador de eventos para el mapa de la siguiente manera.

Para implementar el controlador de eventos OnMapClick para ver el mapa

1. En el estructura Ver , seleccione MapView1.

2. En el Inspector de Objetos , abre el Eventos pestaña, y haga doble clic al lado OnMapClick.

3. En el Editor de código , Implementar el controlador de eventos siguiente:

Delphi:

procedimiento TForm1.MapView1MapClick (Posición const: TMapCoordinate); var MyMarker:

TMapMarkerDescriptor; empezar

MyMarker: = TMapMarkerDescriptor.Create (posición, 'MyMarker'); // Hacer un marcador de


MyMarker.Draggable arrastrable: = True; // Hacer un marcador visible MyMarker.Visible: = True;
MapView1.AddMarker (MyMarker); fin;

C ++ Builder:

Embarcadero Technologies 86
vacío __fastcall TForm1 :: MapView1MapClick (const TMapCoordinate y posición) {
TMapMarkerDescriptor myMarker = TMapMarkerDescriptor :: Create ( "MyMarker" Posición,);

// Hacer un marcador myMarker.Draggable


arrastrable = true; // Hacer un marcador visible
myMarker.Visible = true; MapView1-> AddMarker
(myMarker); }

Ejecución de la aplicación de ejemplo


Para ejecutar esta aplicación, haga lo siguiente:

1. En el Gerente de proyecto , Seleccionar la plataforma de destino (con el apoyo de plataformas: Android o iOS).

Importante: Antes de ejecutar esta aplicación en los dispositivos Android, asegúrese de que ha completado los pasos
de Configuración de aplicaciones de Android para usar Google Maps .

2. prensa Shift + Ctrl + F9 para ejecutar la aplicación sin depurar. Para probar la

aplicación, puede utilizar el siguiente escenario:

1. Haga clic en el Híbrido botón.

2. Especifique el nuevo centro del mapa (por defecto el centro del mapa es (0.0, 0.0)):

ß En el cuadro de texto a la izquierda, establecer el valor de latitud (tal como 50 grados).

ß En el cuadro de texto a la derecha, establecer el valor de la longitud (tal como 20 grados).

ß Haga clic en el Ir botón.

3. Haga clic en cualquier punto del mapa para añadir un marcador.

4. Toca el elemento de barra de la pista, y luego mover el indicador de deslizamiento arrastrándolo a una
Ubicación particular. [ Esto cambia la orientación del mapa (cojinete). La orientación del mapa es la dirección en la que una
línea vertical en los puntos del mapa, medida en grados en sentido horario desde el norte.]

Embarcadero Technologies 87
iOS Androide

Android (LG - E612)

Protectores

Ver también

o TMapView

o Configuración de aplicaciones de Android para usar Google Maps

o Tutorial móvil: Usando Ubicación Sensores (iOS y Android)

Ejemplos de código

o Muestra pestañas Mapa

o Muestra un mapa

Embarcadero Technologies 88
Tutorial móvil: Utilizar un componente MultiView a la
pantalla alternativa Vistas de la Información (iOS y
Android)

Sobre el Componente TMultiView


los FMX.MultiView.TMultiView componente representa un recipiente (el panel principal) para otros controles, y proporciona una manera
para que usted presente fácilmente vistas alternativas de información. los
TMultiView componente le permite implementar una interfaz maestro-detalle, que puede ser utilizado para cualquier plataforma de
destino apoyado .

o los panel principal puede mostrar una colección de controles visuales, tales como cuadros de edición,
etiquetas, listas, y así sucesivamente.

o los panel de detalles típicamente muestra información sobre la base de las propiedades de los controles en
el panel principal.

La pantalla siguiente ilustra un ejemplo de interfaz maestro-detalle. En el panel principal (el panel de Acoplado a la izquierda), se introduce una
posición geográfica y, a continuación, haga clic en Buscar para hacer que el panel de detalles (panel derecho) para visualizar el mapa de
Google adecuado.

Embarcadero Technologies 89
Maestro panel de presentación Modos

los TMultiView clase define un conjunto de propiedades que le permiten controlar el comportamiento de la interfaz. Por ejemplo, el TMultiView.Mode
propiedad especifica el modo de presentación de panel principal como se describe en la siguiente tabla:

Embarcadero Technologies 90
TMultiView.Mode Maestro panel de presentación

En el modo de cajón , el panel principal puede ser si oculta o se puede deslizar para solapar el panel de
Cajón
detalles .

Maestra y detalle paneles siempre se muestran, independientemente de un tipo de dispositivo y la orientación. El


Panel panel principal está acoplada a la izquierda oa la derecha del componente MultiView.

Una aplicación selecciona automáticamente el modo de presentación de panel principal. ver el Plataforma Modo de
PlatformBehaviour
comportamiento dependiente subsección.

popover Menú emergente .

Panel de navegación Panel de navegación .

El usuario puede personalizar la presentación panel principal. La clase de presentación personalizada se debe
Personalizado establecer en el CustomPresentationClass propiedad. ver el Modo personalizado subsección.

Nota: En tiempo de diseño, después de cambiar el TMultiView.Mode valor de la propiedad en el Inspector de Objetos , El
panel principal podría llegar a ser invisible. Para solucionar este problema, en el Diseñador de formularios , Selecciona el TMultiView
componente y, a continuación, en el Inspector de Objetos , selecciona el Visible propiedad a Cierto.

Nota: En tiempo de diseño, puede mostrar / ocultar TMultiView de dos maneras:

1 en Vista Estructura, haga clic en un TMultiView nodo y seleccionar el Espectáculo o


Esconder comandos.

2. En Vista Estructura, Haga doble clic en una TMultiView nodo.

Modo cajón

Si se establece el TMultiView.Mode propiedad a cajón ( utilizando


TDrawerAppearance.Mode = OverlapDetailView), el panel principal está oculto inicialmente. Para mostrar el panel principal, el usuario
pasa la derecha desde el borde izquierdo de la pantalla, como se muestra en la siguiente imagen animada:

Embarcadero Technologies 91
Modo popover

También puede establecer la TMultiView.Mode propiedad a popover para hacer que el panel principal de un menú emergente que
aparece junto al botón master especificado en el TMultiView.MasterButton
propiedad.

Embarcadero Technologies 92
Importante: En el modo de Popover, debe establecer el TMultiView.MasterButton
propiedad. Esta propiedad se refiere a un elemento de interfaz de usuario que muestra u oculta el panel principal. En la
pantalla anterior, el botón principal es la Mostrar ocultar botón.

Modo Panel de navegación

Si se establece el TMultiView.Mode propiedad a Panel de navegación, el panel principal se muestra inicialmente como un panel
acoplado minimizado. Se puede controlar la anchura inicial de este panel con el
CollapsedWidth propiedad (por defecto, CollapsedWidth = 50).

Inicialmente minimizada panel de navegación

Embarcadero Technologies 93
Propina Para recortar cualquier parte de los elementos secundarios movidos fuera del panel de exploración
minimizado, establecer el TMultiview.ClipChildren propiedad a Cierto.

Para expandir el panel de navegación para mostrar todos los controles secundarios, pulse el botón master especificado en el TMultiView.MasterButton
propiedad.

Embarcadero Technologies 94
Panel de navegación ampliado

Importante: En el modo de panel de exploración, debe establecer el


TMultiView.MasterButton propiedad. Esta propiedad se refiere a un elemento de interfaz de usuario que

Embarcadero Technologies 95
colapsa o expande el panel principal. En la pantalla anterior, el botón Master es

el

Plataforma Modo de comportamiento dependiente

Puede dejar que la aplicación selecciona automáticamente el modo de presentación de panel principal, si el
TMultiView.Mode propiedad se establece en PlatformBehaviour. Para esta configuración, el comportamiento de la aplicación depende
del tipo de dispositivo y la orientación, como se describe en la siguiente tabla:

Tipo de dispositivo de orientación del dispositivo Maestro panel de presentación

Teléfono Paisaje, retrato del cajón (push / superposición)

Tableta Paisaje panel acoplado

Tableta Retrato Cajón (push / superposición)

Modo personalizado

En el modo personalizado, puede personalizar la presentación panel maestro para cumplir con sus tareas. Para personalizar la
presentación panel principal, realice los siguientes pasos básicos:

1. Declarar su propia clase, tales como MyPresentationClass que desciende desde


TMultiViewPresentation o de otras clases que fueron declarados en la unidad
FMX.MultiView.Presentations.

2. En el MyPresentationClass, opcionalmente, anular los siguientes métodos virtuales definidos en la clase base:

ß DoOpen

ß DoClose

ß GetDisplayName

ß DoInstall

ß DoUninstall
Estos métodos definen el comportamiento panel principal.

3. En el Diseñador de formularios , Selecciona el TMultiView componente y, a continuación, en el Inspector de Objetos , Establezca su


propiedad Modo a Personalizado.

4. implementar el onFormCreate controlador de eventos de la siguiente manera:

ß por Delphi:

procedimiento TForm1.FormCreate (Sender: TObject); empezar

MultiView1.CustomPresentationClass: = MyPresentationClass;

Embarcadero Technologies 96
fin;

ß por C ++:

vacío __fastcall TForm1 :: FormCreate (TObject * Remitente)


{MultiView1-> CustomPresentationClass = __classid (MyPresentationClass); }

Este tema le ayuda a desarrollar una sencilla aplicación que ilustra el uso de la TMultiView
componente.

El diseño de la interfaz de usuario


1. Crear un espacio en blanco Aplicación Multi-Device , seleccionando:

ß por Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blank


Solicitud

ß por C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blank


Solicitud

2. Selecciona el TMultiView componente en el paleta de herramientas , Y soltarlo en el Formar


Diseñador .

3. Caída de otros controles, como botones, cuadros de edición o cualquier otro control que necesita sobre la
recipiente MultiView.

4. En el paleta de herramientas , Seleccione un componente que desea utilizar como un panel de detalles (por ejemplo,
TPanel ), Y soltar los controles en este panel.

5. En el Inspector de Objetos , Especificar las propiedades correspondientes de la TMultiView


componente.

Para aclarar este procedimiento, las siguientes secciones consideran un ejemplo particular: una aplicación que controla la cámara
del dispositivo móvil.

Diseñar el panel de Maestro

1. Selecciona el TMultiView componente en el paleta de herramientas , Y soltarlo en el Formar


Diseñador .

2. Caída de dos TButton componentes en el TMultiview recipiente y, a continuación, en el Objeto


Inspector especificar las siguientes propiedades de los botones:

ß Selecciona el Nombre propiedad a bStartCamera y bStopCamera, respectivamente.

ß Selecciona el Texto propiedad a iniciar la cámara y Cámara de parada, respectivamente.

3. Caída de una TLabel componente en el TMultiview recipiente y, a continuación, en el Objeto


Inspector , Establece su Texto propiedad a Tipo de cámara :.

Embarcadero Technologies 97
4. Caída de dos TButton componentes en el TMultiview recipiente y, a continuación, en el Objeto
Inspector especificar las siguientes propiedades de los botones:

ß Selecciona el Nombre propiedad a bFrontCamera y bBackCamera, respectivamente.

ß Selecciona el Texto propiedad a Frente y Espalda, respectivamente.

Diseñar el panel de detalles

1. Selecciona el TPanel componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

2. En el Inspector de Objetos , selecciona el TPanel.Align propiedad a Cliente.

3. Suelta el TCameraComponent en el TPanel envase.

4. Suelta el TImage en el TPanel contenedor, y establezca las siguientes propiedades:

ß name = imgCameraView

ß align = Cliente

Propina: Ponga todos los elementos del panel de detalles en un recipiente único (una TPanel
componente en nuestro ejemplo). Este recipiente debe ser especificado en el
TMultiView.TargetControl propiedad.

La implementación de la funcionalidad de la cámara Botones

Para completar el desarrollo de la aplicación, se debe implementar controladores de eventos para los botones de aplicación y la Obtener
la imagen método privado que obtiene una imagen de la cámara del dispositivo.

Para implementar los controladores de eventos OnClick

1. Sobre el Diseñador de formularios , Haga doble clic en el iniciar la cámara botón, e inserte el siguiente
código:

ß por Delphi:

Embarcadero Technologies 98
procedimiento TForm1.bStartCameraClick (Sender: TObject); empezar

CameraComponent1.Active: = true; fin;

ß por C ++:

anulará __fastcall TForm1 :: bStartCameraClick (TObject * Remitente) {CameraComponent1->

Activo = true; }

2. Haga doble clic en el cámara de parada botón, e inserte el siguiente código:

ß por Delphi:

procedimiento TForm1.bStopCameraClick (Sender: TObject); empezar

CameraComponent1.Active: = false; fin;

ß por C ++:

anulará __fastcall TForm1 :: bStopCameraClick (TObject * Remitente) {CameraComponent1->

Activo = false; }

3. Haga doble clic en el Frente botón, e inserte el siguiente código:

ß por Delphi:

procedimiento TForm1.bFrontCameraClick (Sender: TObject); empezar

CameraComponent1.Active: = false;
CameraComponent1.Kind: = FMX.Media.TCameraKind.FrontCamera; CameraComponent1.Active: =
true; fin;

ß por C ++:

vacío __fastcall TForm1 :: bFrontCameraClick (TObject * Remitente) {


// selecciona CameraComponent1- cámara frontal> Activo
= false;
CameraComponent1-> Clase = TCameraKind :: FrontCamera; CameraComponent1->
Activo = true;

Embarcadero Technologies 99
}

4. Haga doble clic en el Espalda botón, e inserte el siguiente código:

ß por Delphi:

procedimiento TForm1.bBackCameraClick (Sender: TObject); empezar

CameraComponent1.Active: = false;
CameraComponent1.Kind: = FMX.Media.TCameraKind.BackCamera; CameraComponent1.Active:
= true; fin;

ß por C ++:

vacío __fastcall TForm1 :: bBackCameraClick (TObject * Remitente) {


// seleccione Atrás CameraComponent1- Cámara> Activo = false;
CameraComponent1-> Clase = TCameraKind :: BackCamera; CameraComponent1->
Activo = true; }

Para implementar el controlador de eventos onSampleBufferReady

o En el Diseñador de formularios , Haga doble clic en el CameraComponent1 y aplicar el


siguiente código:

ß por Delphi:

procedimiento TForm1.CameraComponent1SampleBufferReady (Sender: TObject;


const ATIME: Int64); empezar TThread.Synchronize (TThread.CurrentThread, GetImage); fin;

ß por C ++:

vacío __fastcall TForm1 :: CameraComponent1SampleBufferReady (TObject * Sender,


const __int64 ATIME)
{
Obtener la imagen(); }

Para el TForm1 clase, se debe implementar el método privado Obtener la imagen. El controlador de eventos
onSampleBufferReady llama a este método para obtener la imagen de la cámara del dispositivo.

Haz lo siguiente:

Embarcadero Technologies 100


1. En la sección privada de la TForm1 clase, declarar la Obtener la imagen método:

ß por Delphi:

privado
{} Declaraciones privadas procedimiento
GetImage;

ß por C ++:

ß En el archivo de cabecera (.h), agregue el código siguiente:

privadas: // declaraciones de los usuarios


void __fastcall GetImage ();

2. implementar el Obtener la imagen método como sigue:

ß por Delphi:

procedimiento TForm1.GetImage; empezar

CameraComponent1.SampleBufferToBitmap (imgCameraView.Bitmap, true); fin;

ß por C ++:

anulará __fastcall TForm1 :: GetImage () {

CameraComponent1-> SampleBufferToBitmap (imgCameraView-> Mapa de bits, true); }

Establecer las propiedades de componentes TMultiView

En el Diseñador de formularios, seleccione la TMultiView componente y, a continuación, en el Inspector de Objetos , Establezca las propiedades siguientes:

o TargetControl = O panel1 Modo = cajón o Visible = verdadera o Ampliar la DrawerOptions nodo, y establecer el Modo propiedad

a OverlapDetailView. o Ampliar la ShadowOptions nodo, y establecer el Color propiedad a Beige. ( Esta propiedad

define el color de la sombra del panel principal. Se puede utilizar cualquier color disponible.)

Embarcadero Technologies 101


Ejecutar el Ejemplo de Aplicación
Para ejecutar esta aplicación, haga lo siguiente:

1. En el Gerente de proyecto , Seleccionar la plataforma de destino (con el apoyo de plataformas: Android o iOS).

2. prensa Shift + Ctrl + F9 para ejecutar la aplicación sin depurar.

3. Para abrir el panel principal, desliza desde el borde izquierdo de la pantalla del dispositivo.

4. Para activar la cámara del dispositivo, en el panel principal, haga clic Iniciar la cámara.

5. Opcionalmente, se puede seleccionar la cámara delantera o trasera (si está disponible) mediante el uso de la Frente o
Espalda botón, respectivamente.

Para cerrar el panel principal, deslícelo hacia la izquierda.

Las muestras de productos móviles que utilizan TMultiView

Ir a la carpeta Ejemplos móviles en


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples.

o MultiView demostración muestra

o Localización de demostración muestra

o Reproductor de música muestra

o RESTO Surf Buscador de punto muestra (Delphi)

Embarcadero Technologies 102


o RESTO Surf Buscador de punto muestra (C ++)

Ver también

o FMX.MultiView.TMultiView

o FMX.MultiView.TMultiViewPresentation

o Controles FireMonkey nativo de iOS

Embarcadero Technologies 103


Tutorial móvil: Uso del Explorador de componentes
(iOS y Android)

FireMonkey envuelve el componente navegador web como el TWebBrowser componente. Puedes usar
TWebBrowser en las aplicaciones de escritorio, así como aplicaciones móviles, pero este tema se describe cómo crear una sencilla aplicación de
navegador Web FireMonkey para las plataformas iOS y Android.

Embarcadero Technologies 104


Diseñar la interfaz de usuario
1. Seleccione:

ß Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Aplicación en blanco

ß Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Aplicación en blanco

Embarcadero Technologies 105


2. Selecciona el TToolBar componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

Encontrar TToolBar, introducir unos pocos caracteres (como "herramienta") en el Buscar cuadro de la paleta de herramientas:

3. Después se le cae el componente, se puede ver la TToolBar componente en la parte superior de la


Diseñador de formularios. Aquí está una captura de pantalla después de ajustar el estilo de iOS en el diseñador de la forma:

4. Selecciona el TButton componente en la paleta de herramientas y soltarlo en el TToolBar.

5. Selecciona el TButton componente en el Diseñador de formularios, y luego en el Inspector de Objetos , selecciona el StyleLookup propiedad
a priortoolbutton.

ß los priortoolbutton valor para StyleLookup TButton añade una etiqueta de botón Volver.

En los dispositivos IOS, la etiqueta es similar a la imagen siguiente:

ß Para más detalles sobre la selección de un estilo en aplicaciones multi-dispositivo, consulte Móvil
Tutorial: Utilizar un componente de botón con diferentes estilos (iOS y Android) .

6. Selecciona el TEdit componente en la paleta de herramientas y soltarlo en el TToolBar. Asegurarse


que el tamaño del control Edit es lo suficientemente amplia como para rellenar el área de la TToolBar:

Embarcadero Technologies 106


7. Seleccione la casilla de edición en el Diseñador de formularios, y luego en el Inspector de Objetos , selecciona el

ReturnKeyType propiedad a Hecho, el KeyboardType propiedad a URL, y el


KillFocusByReturn propiedad a Cierto.

Para obtener más información sobre cómo seleccionar el tipo de teclado virtual más adecuado en plataformas móviles, consulte Selección
del teclado virtual apropiado para el navegador web de aplicaciones .

8. Selecciona el TWebBrowser componente en la paleta de herramientas y soltarlo en el formulario.

9. Seleccione el componente de explorador Web en el Diseñador de formularios, vaya a la Inspector de Objetos


y seleccione Cliente Para el Alinear propiedad.

Después de completar estos pasos, la forma debe ser similar a la siguiente imagen:

Escribir un controlador de eventos para abrir una página Web cuando el usuario cambia la
dirección URL en el control de edición

A diferencia de las plataformas de escritorio, las plataformas móviles usar el teclado virtual para introducir texto como en las siguientes
imágenes. El usuario puede completar la acción haciendo clic en "Done".

Embarcadero Technologies 107


iOS Androide

Protectores

Android (LG - E612

FireMonkey ofrece muchos tipos de controladores de eventos para cubrir la mayoría de las acciones de los usuarios. Después se
selecciona el botón "Hecho", el marco FireMonkey envía una AlCambiar evento para el control TEdit. Por otra parte, no hay ningún
evento específico para el botón "Atrás". En esta sección, se implementa controladores de eventos para apoyar ambos escenarios.

Implementar un método común para abrir una página Web

Antes de implementar controladores de eventos, aplicar primero un método común para abrir una página Web basada en el Texto propiedad
del control de edición.

1. En la sección privada de la clase TForm1, declarar la OpenURL método:

Delphi:

privado
{} Declaraciones privadas procedimiento
OpenURL;

Embarcadero Technologies 108


C ++ Builder:

privado: // declaraciones de los usuarios


anular __fastcall openURL ();

2. implementar el openURL método como sigue:

Delphi:

procedimiento TForm1.OpenURL; empezar

WebBrowser1.Navigate (Edit1.Text); fin;

C ++ Builder:

anulará __fastcall TForm1 :: openURL () { WebBrowser1->

Navegar (Edit1-> texto); }

Implementar un controlador de eventos para el evento OnChange

1. Crear el controlador de eventos mediante la selección de la Editar componente (en el Diseñador de formularios), y
haga doble clic en el espacio en blanco al lado de la AlCambiar evento (en el inspector de objetos de Eventos lengüeta).

El inspector de objetos crea un nuevo controlador de eventos denominado Edit1Change:

2. Completar el controlador de eventos añadiendo el siguiente código:

Delphi:

procedimiento TForm1.Edit1Change (Sender: TObject): iniciar

OpenURL; fin;

C ++ Builder:

Embarcadero Technologies 109


anulará __fastcall TForm1 :: Edit1Change (TObject * Remitente) {openURL (); }

Implementar un controlador de eventos para el botón Atrás

Para poner en práctica el Espalda botón de su navegador web, sólo tiene que llamar al Regresa método en el componente de
explorador Web:

Delphi:

procedimiento TForm1.Button1Click (Sender: TObject); empezar

WebBrowser1.GoBack; fin;

C ++ Builder:

anulará __fastcall TForm1 :: Button1Click (TObject * Remitente) {WebBrowser1-> GoBack

(); }

El comportamiento básico ahora se implementa para esta aplicación Web Browser. Intente ejecutar la aplicación en su
dispositivo Android, el simulador de iOS, o el dispositivo IOS.

Selección del teclado virtual apropiado para el navegador web de


aplicaciones
Después de ejecutar su aplicación de navegador Web primero, es posible darse cuenta de que el teclado virtual no está optimizado.

IOS ofrece varios teclados virtuales de la siguiente manera:

Embarcadero Technologies 110


Alfabeto: Defecto: Dirección de correo electrónico: NamePhonePad:

Teclado numérico: NumbersAndPunctuation: PhonePad: URL:

Android proporciona varios teclados virtuales de la siguiente manera:

Alfabeto: Defecto: Dirección de correo electrónico: NamePhonePad:

Teclado numérico: NumbersAndPunctuation: PhonePad: URL:

El tipo de teclado virtual más adecuado para los componentes de navegador Web es URL. Como ya hemos discutido en Diseñar la
interfaz de usuario , Los pasos siguientes establecen el URL como el tipo de teclado virtual para el componente de explorador Web en
este ejemplo. Seleccione la casilla de edición en el Diseñador de formularios, y luego en el Inspector de Objetos , selecciona el KeyboardType
propiedad a URL.

Embarcadero Technologies 111


WebBrowser Código Móvil de fragmentos
los Navegador web proyecto en Fragmentos de código móvil demuestra la funcionalidad descrita en este tutorial. Puede encontrar

el Navegador web proyecto en:

o Inicio | programas | Embarcadero RAD Studio 10.2 Tokio | Las muestras y vaya a
\ Object Pascal \ móvil Fragmentos \ WebBrowser

o Subversión
Repositorio: http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADS tudio_Tokyo / Objeto%
20Pascal / Móvil% 20Snippets / WebBrowser

Ver también

o Tutorial móvil: Usando Combo componentes de la caja para recoger cosas de una lista (IOS y
Androide)

o Tutorial móvil: Utilización de componentes de la ficha para mostrar las páginas (iOS y Android)

o Muestra FMX.KeyboardTypes

o TWebBrowser

o TToolBar

o TButton

o TEdit

Embarcadero Technologies 112


o KeyboardType

o StyleLookup

Embarcadero Technologies 113


Tutorial móvil: Utilización de componentes de la ficha para mostrar
las páginas (iOS y Android)

Aquí se definen por FMX.TabControl.TTabControl , Que es un contenedor que puede contener varias páginas con pestañas. Cada pestaña puede
contener cualquier control como un elemento de interfaz de usuario. Puede ocultar la pestaña de estas páginas, y cambiar las páginas sin mostrar
pestañas.

Para cada pestaña, puede especificar:

o Una etiqueta de texto - tanto para iOS y Android

o - iconos predefinidos para iOS solamente

o Los iconos personalizados - tanto para iOS y Android

Usando el estilo nativo de aquí en iOS y Android

Este tutorial muestra pestañas con el mismo estilo tanto en iOS y Android, pero no se recomienda esta práctica.

Recomendamos que se observa el estilo nativo de cada plataforma, de la siguiente manera:

o En Android:

ß Las fichas se colocan habitualmente en la parte superior de la pantalla (lo que debe establecer
TTabPosition ya sea para Parte superior o para PlatformDefault).

ß Las fichas muestran tradicionalmente sólo texto. Sin embargo, FireMonkey le permite especificar
iconos personalizados que se mostrarán en las pestañas (véase Con Personal multi-resolución de los iconos de las pestañas ).

o En iOS:

ß Las fichas se muestran normalmente en la parte inferior de la pantalla (lo que debe establecer
TTabPosition ya sea para Fondo o para PlatformDefault).

Embarcadero Technologies 114


ß elementos de la ficha siempre muestran tanto el texto como un icono, que puede ser ajustado a través de la
StyleLookup propiedad para cada pestaña.

Nota: Se puede utilizar el PlatformDefault valor de la TTabPosition enumeración para ajustar la posición de tabulación de
acuerdo con el comportamiento por defecto de la plataforma de destino. Cuando PlatformDefault se establece para TTabPosition
:

o En aplicaciones de iOS, las pestañas se alinean en el borde inferior de la TTabControl .

o En aplicaciones de Android, lengüetas están alineados en el borde superior de la TTabControl .

Proyectos Tab páginas utilizando el Diseñador de formularios

Para crear páginas de fichas en su aplicación, utilice el TTabControl componente con los pasos siguientes:

1. Seleccionar:

ß Para Delphi: Archivo> Nuevo> Aplicación Multi-Device - Delphi> Blanco


Solicitud

ß Para C ++: Archivo> Nuevo> Aplicación Multi-Device - C ++ Builder> Blanco


Solicitud

2. Seleccionar TTabControl desde el paleta de herramientas :

3. Después se le cae el TTabControl, un vacío TabControl se muestra en la Diseñador de formularios


(Puede que tenga que ajustar manualmente la posición del TabControl):

Embarcadero Technologies 115


4. Normalmente, las aplicaciones que utilizan TabControl usar la pantalla completa para mostrar las páginas.
Para ello, es necesario cambiar la alineación predeterminada de TabControl. En el Inspector de Objetos , cambiar
el Alinear propiedad de TabControl Cliente:

Embarcadero Technologies 116


5. Haga clic con el TabControl y seleccione Artículos Editor ... en el menú contextual:

6. Hacer clic Añadir artículo tres veces, de modo que ahora tiene tres instancias de TabItem aquí.
Cerrar el cuadro de diálogo.

7. Sobre el Diseñador de formularios , Seleccione la primera TabItem y cambiar su StyleLookup propiedad:

Embarcadero Technologies 117


iOS

Embarcadero Technologies 118


Androide

9.

10. Puede colocar cualquier componente en cada página.


Para ir a una página diferente, basta con hacer clic en la pestaña que desee en el Diseñador de formularios, o cambiar el activeTab
propiedad en el Inspector de Objetos :

11. Para cambiar la ubicación de las pestañas, seleccione la TabPosition propiedad para el TabControl
componente, y configurarlo para que uno de los valores siguientes en el Inspector de Objetos :

Embarcadero Technologies 119


La comparación de los Parámetros de la ficha en iOS y Android

Las siguientes figuras muestran ambas aplicaciones con la misma TabPosition (ajustes Arriba, Abajo, puntos,
y Ninguna) en iOS y Android.
Sin embargo, se debe configurar los diferentes ajustes apropiados de la ficha para cada plataforma móvil, como se indica en #using
el estilo nativo de aquí en iOS y Android .

Embarcadero Technologies 120


Parte superior

iOS Androide

Fichas se muestran en la parte superior.

Embarcadero Technologies 121


Fondo

iOS Androide

Fichas se muestran en la parte inferior.

Embarcadero Technologies 122


puntos

iOS Androide

No se visualizan aquí.

En su lugar, tres puntos ([...]) se muestran para indicar las páginas adicionales.

Embarcadero Technologies 123


Ninguna

iOS Androide

No hay aquí o puntos se visualizan en tiempo de ejecución, aunque se pueden ver en tiempo de diseño. La página sólo se puede
cambiar a través de código o acción.

Embarcadero Technologies 124


plataforma por defecto

iOS Androide

Fichas se muestran con sus ajustes por defecto de la plataforma.

Con Personal multi-resolución de los iconos de las pestañas


Puede utilizar iconos personalizados multi-resolución, así como el texto de encargo en las pestañas de la aplicación. En este tutorial se
muestra cómo construir las siguientes tres fichas que tienen los iconos y el texto de encargo:

notas:

o En Androide aplicaciones, iconos predefinidos no son compatibles, por lo que debe utilizar iconos personalizados.

o En iOS aplicaciones, se puede utilizar cualquiera de los iconos predefinidos o iconos personalizados.

Embarcadero Technologies 125


o Para utilizar iconos personalizados a cada iOS o Android, seleccione el IOS o Android apropiadas
Estilo en el Diseñador de formularios , selecciona el StyleLookup propiedad de TTabItem a
tabitemcustom, especificar su icono personalizado como se describe en esta sección, y luego construir su aplicación.

o Para iOS, puede utilizar nuestros iconos predefinidos mediante el establecimiento de la StyleLookup propiedad de

TTabItem al icono de su elección, tales como ( tabitemsearch).

o Los glifos personalizados utilizados en esta sección están disponibles en un archivo zip que se entrega en su
C: \ Archivos de programa (x86) \ Embarcadero \ Studio \ 19.0 \ Images \ GlyFX directorio. Los tres PNG utilizados aquí
se encuentran en el Iconos \ Aero \ PNG \ 32x32 directorio:

ß users_32 ( Gente)

ß unlock_32 ( Seguridad)

ß tree_32 ( Organización)

descomprimir el glyFX.zip presentar antes de utilizar el Editor de MultiResBitmap si desea utilizar estas imágenes o cualquier
otro disponible en la colección GlyFX.

Viendo multi-resolución de los iconos personalizados en la más aquí

1. En el Inspector de Objetos , seleccione TabItem1, y luego cambiar el subtítulo de pestaña, que se especifica en el Texto
propiedad a Gente; cambiar el Texto propiedad de TabItem2 a
Seguridad, y TabItem3 a Organización.

2. Seleccione una ficha y haga clic en el botón de puntos suspensivos [...] en el CustomIcon propiedad de TTabItem en
el Inspector de Objetos :

Embarcadero Technologies 126


3. los Editor MultiResBitmap se abre:

4. Asegúrese de que está en la vista principal y, en el Editor de MultiResBitmap, haga clic en la matriz
cerca de Tamaño personalizado, y luego elegir tamaño predeterminado.

5. Repita los pasos siguientes para añadir cualquier escalas adicionales que desee para apoyar:

1. En el Editor de MultiResBitmap, haga clic ( Agregar ítem nuevo).

2. Introduzca la escala adicional que desee apoyar, tales como 1,5, 2, o 3.

ß Cuando haya añadido todas las escalas que desea, el editor tiene el siguiente aspecto:

Embarcadero Technologies 127


6. Haga clic en el Todo lo de llenar Archivo botón , navegue a un archivo de imagen que desea utilizar, y
a continuación, haga clic Abierto.

La imagen seleccionada aparece ahora escala apropiada en cada una de las entradas de cal en el Editor de
MultiResBitmap:

7. Cierre el Editor MultiResBitmap.

8. Repita los pasos 2 a 7 para cada uno de los restantes TabItems, y asignar a cada una TabItem
imagen de icono personalizado.

Después de definir un icono personalizado, el marco FireMonkey genera una imagen seleccionada y
No seleccionada (atenuado) Imagen basado en el archivo .png dado. Esta transformación se realiza mediante el canal alfa de los
datos de mapa de bits. Por ejemplo:

Embarcadero Technologies 128


Imagen no seleccionada Imagen original Imagen seleccionada

El uso de un solo mapa de bits Resolución de un icono personalizado

También puede utilizar solamente un mapa de bits de una sola resolución mediante el uso de la Editor de mapa de bits . Una resolución de
mapa de bits sola muestra sólo una escala en la vista de estructura:

Para especificar un mapa de bits de una sola resolución de un icono personalizado, realice el primer paso del procedimiento anterior y luego
proceder como sigue:

1. En el estructura Ver , seleccione Vacío bajo CustomIcon:

2. Ahora, en el Inspector de Objetos , Haga clic en el botón de puntos suspensivos [...] en el mapa de bits campo (de la
TabItem1.CustomIcon [0] ). Esto abre la Editor de mapa de bits :

3. En el Editor de mapa de bits , haga clic en el Carga... botón y seleccionar un archivo PNG. Se recomienda un tamaño de 30x30
píxeles de resolución normal, y 60x60 píxeles para alta resolución:

Embarcadero Technologies 129


4. Hacer clic DE ACUERDO para cerrar la Editor de mapa de bits.

5. En el Inspector de Objetos , selecciona el StyleLookup propiedad esté tabitemcustom:

Definición de controles dentro de un TabControl

Como se ha comentado, cada página de la ficha puede contener cualquier número de controles incluyendo otra TabControl. En tal caso, se puede
navegar y gestionar las diferentes páginas de la lengüeta en la facilidad estructura Ver :

Embarcadero Technologies 130


iOS

Embarcadero Technologies 131


Androide

Cambio de la página en tiempo de ejecución

Por el usuario tocando la pestaña

Si aquí son visibles (cuando el TabPosition propiedad se establece que no sea Ninguna), un usuario final puede simplemente toque una ficha para
abrir la página correspondiente.

Por acciones y un ActionList

Un acción corresponde a uno o más elementos de la interfaz de usuario, tales como comandos de menú, botones de la barra, y los
controles. Acciones cumplen dos funciones:

Embarcadero Technologies 132


o Acciones representan las propiedades comunes a los elementos de la interfaz de usuario, tales como si una
el control está activado o si se selecciona una casilla de verificación.

o Acciones responden cuando se activa un control, por ejemplo, cuando el usuario hace clic en un aplicación
botón o elige un elemento del menú.

Estos son los pasos para habilitar un usuario para mover a diferentes páginas de la ficha haciendo clic en un botón:

1. Sobre el Diseñador de formularios , haga clic TabItem1 para seleccionarlo.

2. Desde el paleta de herramientas , Agrega un TActionList componente de la forma y, a continuación, añadir una
TButton a TabItem1:

3. Con el botón seleccionado, en el Inspector de Objetos , seleccione acción | Nueva Acción estándar
| Tab> TChangeTabAction en el menú desplegable. Después de que el usuario hace clic en este botón, se realiza la acción
que acaba de definir (la página cambia pestaña):

Embarcadero Technologies 133


4. Seleccionar ChangeTabAction1 en el estructura Ver Y seleccione TabItem2 Para el Lengüeta
propiedad en el inspector de objetos. Al vincular a TabItem2, esta acción puede cambiar la página de TabItem2:

Embarcadero Technologies 134


5. Con el paso anterior, el título (la propiedad Text) del botón es automáticamente
cambiado a "Ir a la seguridad", porque el título de TabItem2 es "Seguridad" en nuestro ejemplo. Selecciona el Texto
personalizado propiedad de la ChangeTabAction1 componente para
Seguridad como se muestra a continuación y cambiar el tamaño del botón para adaptarse al nuevo texto del título, si es necesario.

Embarcadero Technologies 135


6. ChangeTabAction también es compatible con el Diapositiva animación para indicar una transición entre
páginas. Para usarlo, establecer el Transición propiedad a Diapositiva:

7. En el Diseñador de formularios, seleccione TabItem2 y soltar dos TButtons de la paleta de herramientas para
TabItem2.

8. En el Diseñador de formularios, seleccione button2 y en el inspector de objetos, seleccione acción | Nuevo


Acción estándar | Tab> TPreviousTabAction en el menú desplegable.

9. En el Diseñador de formularios, seleccione Button3 y en el inspector de objetos, seleccione acción | Nuevo


Acción estándar | Tab> TNextTabAction en el menú desplegable.

10. Seleccionar PreviousTabAction1 en la vista de estructura y en el inspector de objetos, establecer su


TabControl propiedad a TabControl1.

Embarcadero Technologies 136


11. Seleccionar NextTabAction1 en la vista de estructura y en el inspector de objetos, establecer su
TabControl propiedad a TabControl1.

12. En el Diseñador de formularios, seleccione TabItem3 y soltar un TButton de la paleta de herramientas para
TabItem3.

13. En el inspector de objetos, establecer el Acción propiedad del botón de PreviousTabAction1.

Por Código Fuente

Puede utilizar cualquiera de las tres formas siguientes para cambiar la etiqueta activa a partir del código fuente, haciendo clic en el
botón.

Asignar una instancia de TTabItem al activeTab Propiedad

1. Desde la paleta de herramientas, añadir una TButton a TabItem3.

2. En el inspector de objetos, establecer su Texto propiedad a Ir a la gente.

Embarcadero Technologies 137


3. En el Diseñador de formularios, haga doble clic en el botón para crear el Al hacer clic controlador de eventos y
agregue el código siguiente:

Delphi:

TabControl1.ActiveTab: = TabItem1;

C ++:

TabControl1-> activeTab = TabItem1;

Cambiar el ÍndiceDeTabulación Propiedad a un valor diferente

La propiedad TabIndex es un valor entero de base cero. Se puede especificar cualquier número entre 0
y TabControl1.TabCount - 1.

1. Desde la paleta de herramientas, añadir una TButton a TabItem1.

2. En el inspector de objetos, establecer su Texto propiedad a Ir a la Organización.

Embarcadero Technologies 138


3. En el Diseñador de formularios, haga doble clic en el botón para crear el Al hacer clic controlador de eventos y
agregue el código siguiente:

Delphi:

TabControl1.TabIndex: = 2;

C ++:

TabControl1-> TabIndex = 2;

Llama a ExecuteTarget Método de Acción Tab

Se puede llamar al ExecuteTarget Método de cualquiera de las acciones de control de pestaña ( TChangeTabAction ,
TNextTabAction y TPreviousTabAction ). Debe asegurarse de definir el
TChangeTabAction.Tab , TPreviousTabAction.TabControl o el TNextTabAction.TabControl
propiedades.

Delphi:

// Puede fijar el objetivo en tiempo de ejecución si no está definido todavía. ChangeTabAction1.Tab: =


TabItem2;

Embarcadero Technologies 139


// Llamar a la acción
ChangeTabAction1.ExecuteTarget (nil);

C ++:

// Puede fijar el objetivo en tiempo de ejecución si no está definido todavía. ChangeTabAction1-> Tab =

TabItem2; // Llamar a la acción

ChangeTabAction1-> ExecuteTarget (NULL);

Ver también

o Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android)

o Tutorial móvil: Uso del Explorador de componentes (iOS y Android)

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

Las muestras

o pestaña deslizante

Embarcadero Technologies 140


Tutorial móvil: El uso de ListBox
Componentes para mostrar una vista de tabla (iOS y
Android)

Utilización de componentes ListBox para mostrar una vista de tabla en plataformas


móviles

En la plataforma móvil, utiliza el FireMonkey FMX.ListBox.TListBox componente de presentar una


Ver Tabla en un estilo móvil, como los siguientes ListBoxes.

Nota: FMX.ListBox.TListBox el rendimiento puede ser lento en el móvil. Utilizar TListView Si desea desarrollar aplicaciones
más complejas, especialmente las aplicaciones con grandes bases de datos.

Embarcadero Technologies 141


Lista llanura

iOS Android (LG E-612)

Embarcadero Technologies 142


Lista agrupadas

Caja de búsqeda

Puede añadir un cuadro de búsqueda a un cuadro de lista. Con un cuadro de búsqueda, los usuarios pueden reducir fácilmente una selección de una
lista larga como en las siguientes imágenes.

Embarcadero Technologies 143


En este tutorial se describen los pasos básicos para construir elementos para una vista de tabla en las aplicaciones de múltiples dispositivos para
plataformas móviles.

Crear artículos por el componente ListBox


1. Seleccionar:

ß Para Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blanco


Solicitud

ß Para Builder C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blanco


Solicitud

2. Selecciona el TListBox componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios . Para encontrar TListBox, introducir
unos pocos caracteres (como "TList") en el Buscar cuadro de la paleta de herramientas:

Embarcadero Technologies 144


3. Selecciona el TListBox componente en el Diseñador de formularios, vaya a la Inspector de Objetos y
seleccionar Cliente Para el Alinear propiedad.

4. En el Diseñador de formularios, haga clic en el componente TListBox y seleccione Artículos Editor:

5. Sobre el Artículos de diseño, haga clic en el Añadir artículo varias veces el botón para añadir varios artículos a
el cuadro de lista:

Embarcadero Technologies 145


6. Cierre el Diseñador de artículos. Ahora usted puede encontrar sus artículos por el ListBox TListBox
componente. Por ejemplo:

Añadir una cabecera

Se puede definir un encabezado en el componente TListBox mediante el uso de los siguientes pasos:

A la cabecera de un TListBox

1. En el Diseñador de formularios, haga clic en el componente TListBox y seleccione Agregar elemento>


TListBoxHeader:

Embarcadero Technologies 146


2. En la paleta de herramientas, seleccione la TLabel componente y soltarlo en la parte superior de la
TListBoxHeader componente que acaba de añadir:

3. En el inspector de objetos, cambiar las propiedades de la TLabel componente como sigue:

Propiedad Valor

Alinear Cliente

StyleLookup toollabel

TextSettings.HorzAlign Centro

Texto (Valor de texto como desee)

Añadir un encabezado de grupo / pie de página a la lista

Se puede definir un encabezado de grupo y un pie del grupo de artículos en TListBox de la siguiente manera:

Embarcadero Technologies 147


1. En el Diseñador de formularios, haga clic en el TListBox componente y seleccione Artículos Editor.

2. Sobre el Diseñador de artículos, seleccionar TListBoxGroupHeader de la lista desplegable, y luego


seleccionar Añadir artículo:

3. Seleccionar TListBoxGroupFooter de la lista desplegable y, a continuación, seleccione Añadir artículo.

4. Seleccionar ListBoxGroupHeader1 en la lista de elementos y haga clic en el Arriba varias veces el botón
hasta que este elemento se convierte en el primer elemento de la lista:

5. Cerrar el cuadro de diálogo. Ahora usted tiene un encabezado de grupo y un pie de página en el Grupo
TListBox componente.

Mostrar elementos de lista como elementos agrupados por separado

Los artículos por un cuadro de lista se pueden mostrar, ya sea como Llanura o una lista agrupados lista. Esta elección es controlada por el GroupingKind
propiedad y el StyleLookup propiedad, como se muestra en el siguiente gráfico:

Embarcadero Technologies 148


Mostrar elementos como lista simple Los productos que mostrar como lista agrupada

= Plain GroupingKind El valor de la propiedad agrupados = GroupingKind El valor de la propiedad

listboxstyle = StyleLookup El valor de la propiedad transparentlistboxstyle = StyleLookup El valor de la propiedad

Se puede seleccionar el GroupingKind propiedad y el StyleLookup propiedad en el inspector de objetos cuando el cuadro de lista
se selecciona en el Diseñador de formularios.

Añadir una casilla de verificación u otro accesorio a un elemento de cuadro de lista

Cada artículo en un TListBox puede usar un accesorio como Marca de verificación a través de la
ItemData.Accessory propiedad. El siguiente cuadro muestra el valor se puede asignar a ItemData.Accessory
y el accesorio asignado:

Se puede seleccionar la propiedad de accesorios en el inspector de objetos al cuadro de lista de artículos está seleccionado en el diseñador de formularios.

Embarcadero Technologies 149


Añadir un icono a un elemento de cuadro de lista

Cada artículo en un componente ListBox puede contener datos de mapa de bits, como una Icono, a través de
ItemData.Bitmap propiedad:

Se puede seleccionar el mapa de bits propiedad en el inspector de objetos cuando el ListBoxItem se selecciona en el Diseñador de

formularios. Con el fin de ver el Icono, debe seleccionar un StyleLookup que apoya la mapa de bits propiedad. Cambie la propiedad

StyleLookup a listboxitemleftdetail.

Agregar información detallada a un elemento

Se puede añadir información adicional al texto de cada elemento en el componente ListBox. Especificar texto adicional en el ItemData.Detail

propiedad, y seleccionar la ubicación del texto de detalle a través de la StyleLookup propiedad, como se muestra en la siguiente tabla:

Embarcadero Technologies 150


propiedad StyleLookup Mira y siente

listboxitemnodetail

listboxitembottomdetail

listboxitemrightdetail

listboxitemleftdetail

Ejecución de la aplicación

Ejecutar la aplicación, ya sea por la elección Ejecutar> Ejecutar o pulsando F9.

Crear su aplicación ListBox


1. Seleccionar:

ß Para Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blanco


Solicitud

ß Para Builder C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blanco


Solicitud

2. Selecciona el TListBox componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

3. Selecciona el TListBox componente en el Diseñador de formularios, vaya a la Inspector de Objetos y


seleccionar Cliente Para el Alinear propiedad.

Agregar elementos a un cuadro de lista a partir del código

Para añadir elementos regulares a un cuadro de lista, sólo tiene que llamar al Artículos. Añadir método como se muestra en el siguiente fragmento de
código:

o Delphi:

ListBox1.Items.Add ( 'texto para añadir');

o C ++:

ListBox1-> Productos-> Añadir ( "texto para añadir");

Embarcadero Technologies 151


Si desea crear artículos que no sean un elemento simple, o controlar otras propiedades, se puede crear una instancia del artículo primero y, a

continuación, agregarlo al cuadro de lista. Los siguientes códigos de muestra añadir elementos a un cuadro de lista, como se muestra en la imagen:

iOS Android (LG E-612)

Delphi:

procedimiento TForm1.FormCreate (Sender: TObject); var c: Char;

i: Integer; Buffer: String;

ListBoxItem: TListBoxItem;
ListBoxGroupHeader: TListBoxGroupHeader; empezar

ListBox1.BeginUpdate; para C: = 'a' a


la 'z' do begin

// Añadir cabecera ( 'A' a 'Z') a la Lista

Embarcadero Technologies 152


ListBoxGroupHeader: = TListBoxGroupHeader.Create (ListBox1); ListBoxGroupHeader.Text: =
mayúsculas (c); ListBox1.AddObject (ListBoxGroupHeader);

// Añadir elementos ( 'a', 'AA', 'aaa', 'b', 'bb', 'BBB', 'c', ...) a la lista para i: = 1 a 3 do begin

// StringOfChar devuelve una cadena con un número determinado de caracteres repetidos.

Buffer: = StringOfChar (c, i); // Basta con añadir el


artículo
// ListBox1.Items.Add (tampón);

// o, puede agregar elementos mediante la creación de una instancia de TListBoxItem por sí mismo ListBoxItem: =
TListBoxItem.Create (ListBox1); ListBoxItem.Text: = Buffer;

// (anona = 0, Amore = 1, aDetail = 2, aCheckmark = 3)


ListBoxItem.ItemData.Accessory: = TListBoxItemData.TAccessory (i); ListBox1.AddObject (ListBoxItem); fin; fin;

ListBox1.EndUpdate; fin;

C ++:

vacío __fastcall TForm1 :: FormCreate (TObject * Remitente) {

Char c; int i;

Búfer de cadena;
TListBoxItem * ListBoxItem;
TListBoxGroupHeader * ListBoxGroupHeader; ListBox1-> BeginUpdate

(); para (c = 'a'; c <= 'z'; c ++) {

// Añadir cabecera ( 'A' a 'Z') a la Lista


ListBoxGroupHeader = new TListBoxGroupHeader (ListBox1); ListBoxGroupHeader-> Text =
mayúsculas (c); ListBox1-> AddObject (ListBoxGroupHeader);

// Añadir elementos ( 'a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', -> -> ->) a la lista para (i = 1; i <4; i ++) { // StringOfChar devuelve una
cadena con un número determinado de repetir personajes->

Buffer = StringOfChar (c, i); // Basta con añadir el


artículo
// ListBox1-> Productos-> Añadir (buffer);

// o, puede agregar elementos mediante la creación de una instancia de TListBoxItem por sí mismo ListBoxItem = new
TListBoxItem (ListBox1); ListBoxItem-> Text = Buffer;

// (anona = 0, Amore = 1, aDetail = 2, aCheckmark = 3) ListBoxItem->


ItemData-> accesorio =
static_cast <TListBoxItemData :: TAccessory> (i);
ListBox1-> AddObject (ListBoxItem); };

Embarcadero Technologies 153


};
ListBox1-> EndUpdate (); }

Crear un menú de desbordamiento

Un menú emergente de desbordamiento se accede a través de la barra de acción y se utiliza para proporcionar acceso a los artículos o elementos

que se utilizan con menos frecuencia adicionales. En FireMonkey, se puede implementar fácilmente un menú de desbordamiento usando TListBox :

1. Agrega un TToolBar componente en el formulario y establecer la alineación a Parte superior.

2. Coloque tres TSpeedButton componentes de la TToolBar componente:

ß Por el primero TSpeedButton :

ß Selecciona el Alinear propiedad a Izquierda.

ß Cambiar el Nombre propiedad a OrganizeButton.

ß Selecciona el StyleLookup a organizetoolbutton.

ß Para el segundo TSpeedButton :

ß Selecciona el Alinear propiedad a Derecha.

ß Cambiar el Nombre propiedad a OverflowButton.

ß Seleccionar detailstoolbutton Para el StyleLookup propiedad.

ß Por el último TSpeedButton :

ß Selecciona el Alinear propiedad a Derecha.

ß En Inspector de Objetos ampliar la márgenes nodo y establecer el Derecha margen de 5.

ß Cambiar el Nombre propiedad a SearchButton.

ß Selecciona el StyleLookup a searchtoolbutton.

3. Caída de una TListBox a la forma.

ß Añadir cinco TListBoxItem de Artículos Editor.

ß Comprobar akTop y Akright desde el anclas propiedad de la TListBox


componente.

ß Conjunto Altura a 220.

ß Cambio Nombre a OverflowMenu.

Embarcadero Technologies 154


ß Selecciona el Visible propiedad a Falso.

4. Durante los primeros cuatro TListBoxItem componentes en TListBox ir Inspector de Objetos , expandir
ItemData :

ß Definir el mapa de bits propiedad.

ß Cambiar el Texto propiedad en el valor de texto que desea.

ß Seleccionar listboxitemleftdetail Para el StyleLookup propiedad.

5. Por el último TListBoxItem , en el Inspector de Objetos expandir ItemData :

ß Conjunto Accesorio a Amore y Texto a Más.

6. Agrega un TShadowEffect componente para el menú de desbordamiento.

estructura Ver Android LG-E612

Crear el controlador de eventos para el botón de desbordamiento

En el Diseñador de formularios, haga doble clic en el OverflowButton componente. Agregue el código siguiente a este controlador de eventos:

o Delphi:

procedimiento TForm1.OverflowButtonClick (Sender: TObject); empezar

OverflowMenu.Visible: = no OverflowMenu.Visible; // cambiar el estado de visibilidad


comenzará entonces si OverflowMenu.Visible // Se visualiza el menú de desbordamiento

Embarcadero Technologies 155


OverflowMenu.BringToFront;
OverflowMenu.ItemIndex: = -1; // la propiedad ItemIndex especifica el elemento (valor por defecto es -1 que significa que se selecciona
ningún elemento) elegido actualmente
OverflowMenu.ApplyStyleLookup;
OverflowMenu.RealignContent; // vuelve a alinear los controles de la OverflowMenu TListBox los niños TListBoxItem

fin; fin;

o C ++:

vacío __fastcall TForm1 :: OverflowButtonClick (TObject * Remitente) {

OverflowMenu-> Visible = (OverflowMenu-> Visible!); // cambiar el estado de visibilidad

si (OverflowMenu-> Visible) {// Se visualiza el menú de desbordamiento OverflowMenu-> BringToFront ();

OverflowMenu-> ItemIndex = -1; // la propiedad especifica el ItemIndex


elemento actualmente seleccionado (valor predeterminado es -1 que significa que se selecciona ningún elemento)
OverflowMenu-> ApplyStyleLookup ();
OverflowMenu-> RealignContent (); // vuelve a alinear los niños TListBoxItem
controles de la OverflowMenu TListBox
}}

Añadir un cuadro de búsqueda

o Para añadir un cuadro de búsqueda al componente ListBox, haga clic en el TListBox componentes y
sólo tiene que seleccionar Agregar elemento> TSearchBox en el menú contextual:

o Para añadirlo a la barra de acción:

ß Selecciona el Visible propiedad a Falso.

ß Para crear el controlador de eventos para el SearchButton, Haga doble clic en él y añadir el
siguiente código:

Delphi:

procedimiento TForm1.SearchButtonClick (Sender: TObject);

Embarcadero Technologies 156


empezar
SearchBox1.Visible: = no SearchBox1.Visible; // cambiar el extremo estado de visibilidad;

C ++:

vacío __fastcall TForm1 :: SearchButtonClick (TObject * Remitente) {


SearchBox1-> Visible = (SearchBox1-> Visible!); // cambiar el estado de visibilidad}

Ejecución de la aplicación

1. Seleccione:

ß Ejecutar> Ejecutar

ß Ejecutar> Ejecutar sin depurar

2. Para invocar el menú adicional, haga clic en los puntos suspensivos vertical en la barra de acción.

3. Para ver el cuadro de búsqueda, haga clic en el SearchButton.

Embarcadero Technologies 157


Android (Samsung Tab 2.0) Android (Samsung Tab 2.0)

Visualización del menú de desbordamiento Viendo el cuadro de búsqueda

Ver también

o FMX.ListBox.TListBox

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

o Tutorial móvil: Usando LiveBindings rellenar un cuadro de lista en aplicaciones móviles (IOS
y Android)

o Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android)

o Tutorial móvil: Uso del Explorador de componentes (iOS y Android)

o Tutorial móvil: Utilización de componentes de la ficha para mostrar las páginas (iOS y Android)

Embarcadero Technologies 158


Tutorial móvil: Usando LiveBindings para rellenar
un ListView (iOS y Android)

Este tutorial muestra cómo utilizar LiveBindings diseñador para llenar una componente ListView FireMonkey a partir de una TPrototypeBindSource
que contiene algunos datos de ejemplo. El tutorial muestra cómo agregar los datos de la muestra y cómo hacer que los enlaces entre
la fuente de creación de prototipos y el componente de vista de lista con el fin de llenar la lista. Como cada LiveBinding, este tutorial
requiere sin código. Sin embargo, con el fin de crear una aplicación útil, es necesario agregar controladores de eventos y otros
códigos.

Paso 1: Crear el proyecto


1. Crear un nuevo proyecto. Escoge un Aplicación Multi-Device para este ejemplo. En el asistente,
escoger Aplicación en blanco.

2. En el paleta de herramientas , Ubicar una TListView componente y soltarlo en el formulario.

3. Agrega un TPrototypeBindSource componente al formulario.

Embarcadero Technologies 159


4. En el formulario, seleccione el ListView1 componente y, a continuación, en el Inspector de Objetos , selecciona el
Alinear propiedad a Cliente y el SearchVisible propiedad a Cierto.

La forma debe parecerse a la siguiente pantalla, antes de establecer la Estilo o Ver en el


Diseñador de formularios :

Nota: Para obtener más información acerca de la selección de la Estilo y Puntos de vista, ver Selector de estilo y
Usando FireMonkey Vistas .

Paso 2: Añadir campos


1. Haga clic con el TPrototypeBindSource componente y seleccione Agregue campo....

Embarcadero Technologies 160


2. Desde el Agregue campo cuadro de diálogo, seleccione ColorsNames y haga clic DE ACUERDO.

Paso 3: Creación de LiveBindings


1. Abre el LiveBindings diseñador (escoger Ver> LiveBindings diseñador ), Y arrastrar el
ColorsName1propiedad de la TPrototypeBindSource en el Item.Text propiedad del ListView para unir estas
propiedades.

Embarcadero Technologies 161


El componente ListView rellena automáticamente sus artículos con nombres de colores desde el componente de datos de
prototipos:

2. Conjunto TListView.ItemAppearance a ImageListItemRightButton, como sigue:

ß Coloque el foco en el componente ListView seleccionándolo (en el estructura Ver , el


Diseñador de formularios , o el Inspector de Objetos ).

ß Luego, en el Inspector de Objetos , Localizar el ItemAppearance nodo, expandirlo y


cambiar el ItemAppearance propiedad a ImageListItemRightButton:

Embarcadero Technologies 162


3.

4. Opcionalmente, se puede aplicar un tinte a la TListView botones de texto. Haz lo siguiente:

ß Coloque el foco en el componente ListView seleccionándolo (en el estructura Ver , el


Diseñador de formularios , o el Inspector de Objetos ).

ß En el estructura Ver , debajo ItemAppearance, expandir ít. y luego seleccione


TEXTBUTTON .

ß En el Inspector de Objetos , Localizar el tintColor propiedad y establezca su valor en un valor adecuado, como
por ejemplo Mar verde.

La siguiente imagen muestra tanto la estructura Ver y el Inspector de Objetos . En el estructura Ver , ít. y se expande TEXTBUTTON
está seleccionado, y en el Inspector de Objetos , tintColor se establece en Mar verde:

5.

Embarcadero Technologies 163


6.

7.

Nota: En tiempo de diseño, el color de la tinta que ha aplicado a los botones de texto podría no ser visible. Para que
los cambios visibles, elija el Dominar vista en el selector de estilo para cambiar el estilo actual de su Diseñador de
formularios a cualquiera Androide o
IOS. Para más detalles, véase Diseñador de formularios .

En este punto en el tutorial, se ha configurado el componente ListView para mostrar una imagen en el lado izquierdo del
elemento de texto y para mostrar un botón en el lado derecho del elemento de texto.

En el siguiente paso, se rellenan de la imagen y el botón con datos de la muestra.

Paso 4: Añadir más campos (mapas de bits, moneda)


Es necesario agregar dos campos más con el fin de hacer que aparezca el componente de vista de lista de una imagen y un texto sobre el
botón asociado a cada elemento de la lista.

1. Haga clic con el TPrototypeBindSource del componente y seleccione Agregue campo....

2. En el Agregue campo caja de diálogo, Ctrl + clic para seleccionar Los mapas de bits y Moneda datos de campo. Cuando haya terminado, haga
clic DE ACUERDO.

3. Ve a la LiveBindings diseñador y hacer lo siguiente:

Embarcadero Technologies 164


1. Conecta el Bitmap1 propiedad de los datos de origen de prototipos a la
Item.Bitmap propiedad del componente de lista.

Este paso agrega un botón que representa el color y el número de cada elemento de vista de lista, tales como Blue
19.

2. Conecta el CurrencyField1 la propiedad de los datos de origen de prototipos a la


Item.ButtonText propiedad del componente de lista.

Este paso muestra el valor de campo de moneda en el botón situado en la parte derecha de cada elemento de lista.

Ahora la vista de lista muestra algunos datos de color asociados con cada elemento y también muestra los datos de moneda de muestra en el
botón asociado a cada elemento de la lista.

Paso 5: Adición de la onButtonClick controlador de eventos

Para crear una aplicación practica, se puede añadir el onButtonClick controlador de eventos que se activa cuando se hace clic en un elemento
ListView.

Para agregar el controlador de eventos onButtonClick

1. En el formulario de aplicación multi-dispositivo, seleccione el ListView1 componente.

Embarcadero Technologies 165


2. En el Inspector de Objetos , abre el Eventos pestaña y haga doble clic OnButtonClick.

3. En el Editor de código , Implementar un proceso adecuado OnButtonClick controlador de eventos. El siguiente código de ejemplo agrega el

controlador de eventos que muestra un cuadro de mensaje que aparece cuando un elemento ListView:

Delphi:

procedimiento TForm1.ListView1ButtonClick (Sender const: TObject;


const AItem: TListViewItem; const AObject: TListItemSimpleControl); empezar

ShowMessage (AItem.Text + '' + AItem.ButtonText + 'se hace clic'.); fin;

C ++ Builder:

anulará __fastcall TForm1 :: ListView1ButtonClick (TObject * Remitente const,


TListViewItem * const AItem, TListItemSimpleControl * const AObject) {ShowMessage (AItem-> Texto + "" + AItem->

ButtonText + "se hace clic."); }

Los resultados

Para ver su aplicación móvil tal y como aparecería en un dispositivo móvil, es necesario configurar el sistema como se describe en la
apropiada Preparar tutorial, disponibles aquí Y establecer el Ver a un dispositivo móvil de destino (tal como Iphone 4") en el Diseñador de
formularios. Luego hay que completar las medidas necesarias para el despliegue de su aplicación a la plataforma móvil de destino. A
continuación, puede ejecutar la aplicación en su dispositivo móvil, ya sea pulsando F9 o eligiendo

Ejecutar> Ejecutar .

Embarcadero Technologies 166


iOS Androide

Protectores Galaxy s4

Si hace clic en el Azul artículo, la aplicación muestra el cuadro de mensaje siguiente:

Ver también

o Tutorial móvil: Utilización de componentes de la ficha para mostrar las páginas (iOS y Android)

Embarcadero Technologies 167


o Tutorial móvil: Usando LiveBindings rellenar un cuadro de lista en aplicaciones móviles (IOS
y Android)

o Tutorial móvil: Usar diseño de Ajuste forma diferente tamaños u orientaciones (IOS y
Androide)

o Personalización de FireMonkey ListView Apariencia

o FMX.ListView.TListView

o TPrototypeBindSource

o LiveBindings en RAD Studio

o LiveBindings diseñador

o Usando FireMonkey Vistas

o Usando diseñadas y coloreadas botones de Plataformas de destino

o RAD Studio Tutoriales

Embarcadero Technologies 168


Tutorial móvil: Usando LiveBindings rellenar un cuadro
de lista en aplicaciones móviles (iOS y Android)

Este tutorial le guiará por los pasos de conectar datos a un control ListBox FireMonkey en sus dispositivos móviles,
utilizando LiveBindings.

Paso 1: Crear el proyecto


En este proyecto, se necesita un cuadro de lista, un rectángulo, y también una fuente de unión de prototipos. Para agregar estos componentes,
siga los siguientes pasos:

1. Seleccionar:

ß Para Delphi: Archivo> Nuevo> Aplicación Multi-Device - Delphi

ß Para C ++: Archivo> Nuevo> Aplicación Multi-Device - C ++ Builder

2. Selecciona el TListBox componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

3. Seleccione el componente de cuadro de lista en el diseñador de formularios, y en el Inspector de Objetos , Localizar el DefaultItemStyles.ItemStyle
propiedad. Configurarlo para que la listboxitemrightdetail estilo.

4. Deseleccionar el componente de cuadro de lista, haga clic en un área en blanco del diseñador de formularios.

5. Selecciona el TRectangle componente en el paleta de herramientas , Y soltarlo en el Diseñador de formularios .

6. Seleccione el componente de rectángulo en el Diseñador de formularios, y en el Inspector de Objetos , selecciona el Alinear propiedad a Fondo.

7. Seleccione el componente de cuadro de lista y establecer su Alinear propiedad a Cliente.

8. Ahora deja caer una TPrototypeBindSource desde el paleta de herramientas en su forma. En este punto, su

forma debe ser similar a la siguiente pantalla de iOS:

Embarcadero Technologies 169


Es necesario añadir datos de la muestra de colores y nombres de los colores al TPrototypeBindSource
componente con el fin de apoyar el propósito de este tutorial y de ligar el cuadro de lista y el rectángulo.

1. Haga clic con el TPrototypeBindSource componente y, a continuación, haga clic Agregue campo sobre el
Menú de contexto.

Embarcadero Technologies 170


2. Seleccionar AlphaColors y ColorsNames desde el Datos de campo enumerar y desactive la Barajar
Valores casilla de verificación.
Esta operación añade muestra de datos ordenados alfabéticamente (valores de color alfa y nombres).

3. Validar su selección haciendo clic en el DE ACUERDO botón. Ahora los datos de la muestra está lista para ser
utilizado a través de LiveBindings.

Paso 2: Creación de los LiveBindings


Abre el LiveBindings diseñador . El diagrama sin conexiones es similar a la imagen siguiente:

Embarcadero Technologies 171


1. Enlazar ColorsName1 de PrototypeBindSource1 a Item.Text de ListBox1. ( Hacer clic
ColorsName1 y arrastrar el ratón para Item.Text). Ahora el cuadro de lista muestra todos los nombres de los colores en la fuente
de unión de prototipos.

2. Enlazar ColorsName1 de PrototypeBindSource1 a ItemHeader.Text de ListBox1.


Ahora el cuadro de lista también muestra los encabezados con todos los nombres de los colores en la fuente de unión de prototipos.

3. En el LiveBindings diseñador , Haga clic en el enlace que conecta ColorsName1 a


ItemHeader.Text.

4. En el Inspector de Objetos , Localizar el FillHeaderCustomFormat propiedad y seleccione la


Subcadena (% s, 0, 1) expresión de enlace de la lista desplegable. En este punto, el cuadro de grupos de listas de

todos los nombres de los colores en categorías por orden alfabético:

5. Enlazar AlphaColor1 de PrototypeBindSource1 a Item.LookupData de ListBox1.


Esto asegura que la selección del nombre del color también señala el valor de color alfa correcta.

Embarcadero Technologies 172


6. Enlazar AlphaColor1 de PrototypeBindSource1 a Item.Detail de ListBox1. Esta
asegura que el valor de color alfa aparece en el lado derecho del elemento del cuadro de lista.

7. Haga clic en el botón de puntos suspensivos [...] en el Rectángulo1 Diagrama de bloques en el LiveBindings
Diseñador Y en el diálogo que se abre, escriba Color de relleno. Selecciona el Color de relleno casilla de verificación, haga clic en DE
ACUERDO:

8. Enlazar Color de relleno de Rectángulo1 a SelectedValue de ListBox1. Esto asegura la


rectángulo de llenar los cambios de color de acuerdo a la selección de lista de elementos caja.

Nota: Al intentar unirse Color de relleno a SelectedValue, Se abre un cuadro de mensaje de confirmación. En
este cuadro de mensaje, seleccione Sí.

Después de completar los pasos anteriores, el diagrama LiveBindings será similar a la siguiente imagen:

Su aplicación está ahora listo para funcionar en el dispositivo móvil.

Embarcadero Technologies 173


Los resultados

Para ejecutar la aplicación, pulse F9 o elegir Ejecutar> Ejecutar .

Cuando se selecciona un elemento del cuadro de lista, los cambios de color del rectángulo en consecuencia:

iOS (iPad) Android (LG-E612)

Ver también

o LiveBindings en RAD Studio

o LiveBindings diseñador

o El uso de formato personalizado y Analizar las expresiones en LiveBindings

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

o Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android)

Embarcadero Technologies 174


Tutorial móvil: Usar diseño de Ajuste forma diferente
tamaños u orientaciones (iOS y Android)

En este tutorial se describe una estrategia general para el uso de la Dominar ver para diferentes factores de forma (tales como teléfono o tableta),
sin el uso de diferentes puntos de vista para cada factor de forma.

Cada componente FireMonkey puede tener un propietario, un padre y


niños
En primer lugar, todos los componentes FireMonkey tiene la idea de dueño, padre y niños. Si se coloca un componente en un
formulario, el formulario se convierte en el propietario y el padre del componente. Si se agrega componentes (por ejemplo, un botón,
etiqueta, y otros) a otro componente (por ejemplo, una barra de herramientas), la barra de herramientas es el padre y el propietario del
botón, etiqueta, y otros. Se puede ver esta relación padre-hijo gráficamente representado en la vista de árbol en el estructura Ver .

El diseño para un niño se define como un valor relativo a su padre. En la siguiente imagen, Label1 es el hijo de Toolbar1,
y la distribución de Label1 es relativa a Toolbar1.

El uso de propiedades de un componente FireMonkey relacionados con


el diseño común

Utilizar la propiedad Align

Un control de Alinear propiedad determina si se vuelve a colocar de forma automática y / o cambiar de tamaño a lo largo de cuatro lados

o centro de su matriz, tanto inicialmente como que el padre se cambia el tamaño. El valor por defecto para el Alinear propiedad es Ninguna,

lo que significa que no hay cálculos automáticos se realizan: el control queda donde se coloca:

Embarcadero Technologies 175


Align = Ninguno

Los valores típicos para el Alinear propiedad son los siguientes (Dodgerblue indica el área para el niño):

Parte superior Fondo

Izquierda Derecha

Centrar Cliente

Si se utiliza una Alinear valor de Arriba, Abajo, Izquierda, Derecha o de un componente, el Alinear
propiedades para otros componentes utilizan el área restante. El tamaño y forma de la zona restante ( Cliente) también

cambia en base a la orientación del dispositivo, y con base en el factor de forma (iPhone o iPad).

Las siguientes imágenes muestran el diseño de paisaje (horizontal) y para el retrato (vertical) cuando se tienen dos (2) componentes
que utilizan Parte superior, y un (1) componente que utiliza Cliente.

Embarcadero Technologies 176


El uso de los márgenes de la propiedad

márgenes asegurar la separación entre los controles posicionado automáticamente por un padre. En la siguiente imagen, el

lado derecho del componente (align = Cliente) utiliza el márgenes


de establecimiento para asegurar el espacio alrededor del componente.

Utilizar la propiedad Relleno

Relleno deja de lado el espacio en el interior del cuadro de contenido de los padres. En el inspector de objetos, puede establecer los valores
(en píxeles) para el Relleno :

o Izquierda

o Derecha

o Fondo

o Parte superior

En la siguiente imagen, el componente principal (que contiene dos regiones) utiliza el Relleno
de establecimiento para asegurar el espacio en el interior del componente de los padres:

Embarcadero Technologies 177


Utilizar la propiedad Anclas

Se necesitan Anchors cuando un control debe mantener su posición a una cierta distancia de los bordes de su padre, o se debe
estirar el tiempo que se mantiene la distancia original entre sus bordes y los bordes de su matriz. controles anclados 'palo' a los lados
de los contenedores y estiramiento, si es así se especifique.

Anclas Propiedad en el control de edición

Si usted tiene una Editar de control en la parte superior de una Barra de herramientas, es posible que desee mantener una distancia fija entre el borde

derecho de la Editar Control y el borde de la forma ( Barra de herramientas). Anclajes permiten especificar que un control debe permanecer fijo en relación

a los lados de su padre. Si desea que el Editar control para mantener la misma posición relativa en relación con la barra de herramientas (su padre), se

puede establecer el anclas propiedad a akLeft, akTop, Akright. Cuando se cambia el tamaño de la barra de herramientas, el control de edición se cambia

el tamaño de acuerdo a la configuración Anclajes:

iOS

Androide

Anclajes de la propiedad para el Control de botón

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 derecho borde del control Button y el borde de la Forma. Sin embargo, puede que no desee mantener la misma
distancia entre el izquierda borde del control Button y el izquierda borde de la Forma. En este caso, se puede establecer el anclas propiedad
a akTop, Akright
(De-seleccione akLeft), de manera que el control Button mantiene las mismas distancias con la barra de herramientas (matriz) para Parte superior y Derecha.

Embarcadero Technologies 178


iOS:

Androide:

Uso del componente TLayout


TLayout , Un componente que no es visible en tiempo de ejecución, se puede utilizar para grupo su niño controla para ser manipulado como un
todo. Por ejemplo, se puede establecer la visibilidad de un grupo de controles a la vez mediante el establecimiento de la Visible propiedad de la
disposición. TLayout no configura automáticamente cualquiera de las propiedades de sus hijos.

Para hacer controles seleccionados hijos de TLayout, utilice la vista de estructura.


Destacar los controles que desea mover. A continuación, 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 son hijos de la nueva matriz:

2. Resalte los controles para mover 3. Arrastre en Parent


1. Estado Inicial

Puedes usar Alinear , Relleno , márgenes , anclas , Y otras propiedades de TLayout para definir el diseño para un área específica.
Usted puede utilizar el componente TLayout al igual que el DIV etiqueta en HTML.

Ver también

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

o Tutorial móvil: Usando Ubicación Sensores (iOS y Android)

Embarcadero Technologies 179


o Tutorial: Uso de FireMonkey Presentaciones

o FireMonkey Presentaciones Estrategias

o Organizar Controles FireMonkey

o Gestos en FireMonkey

Embarcadero Technologies 180


Tutorial móvil: tomar y compartir una imagen,
texto y compartir (iOS y Android)

Antes de comenzar este tutorial, usted debe leer y realizar el siguiente tutorial:

o Tutorial móvil: El uso de un componente de botón con diferentes estilos (iOS y Android)

Este tutorial cubre las siguientes tareas típicas para el uso de imágenes y compartir el texto con sus aplicaciones en
plataformas móviles.

En los dispositivos iOS:

Tomar una foto con la cámara del dispositivo Usando una imagen del dispositivo Photo Library

Embarcadero Technologies 181


Compartir o imprimir una imagen compartir el texto

En los dispositivos Android:

Embarcadero Technologies 182


Tomar una foto con la cámara del dispositivo Usando una imagen del dispositivo Photo Library

Embarcadero Technologies 183


Compartir o imprimir una imagen compartir el texto

temas
o Tomar y compartir imágenes y texto Usando las listas de acciones

o Toma de fotografías mediante FireMonkey Interfaces

Ver también

o Tutorial móvil: Usando Ubicación Sensores (iOS y Android)

o Móviles Tutorial: Uso de notificaciones (iOS y Android)

o Fragmentos de código móvil

o acciones FireMonkey

o FMX.StdCtrls.TButton

o FMX.Objects.TImage

Embarcadero Technologies 184


o FMX.MediaLibrary

o Muestra FMX.PhotoEditorDemo

o Muestra FMX.CameraComponent

o http://appleinsider.com/articles/12/02/16/share_sheets

Embarcadero Technologies 185


Tutorial móvil: Usando Ubicación Sensores (iOS y
Android)

Antes de comenzar este tutorial, usted debe leer y llevar a cabo las siguientes sesiones de tutoría:

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (iOS y Android)

o Tutorial móvil: Uso del Explorador de componentes (iOS y Android)

o Tutorial móvil: Usar diseño de Ajuste forma diferente tamaños u orientaciones (IOS y
Androide)

Nota: En los dispositivos Android, TLocationSensor requiere específica utiliza permisos a ajustar y, específicamente Acceso a la
ubicación gruesa y Acceso a la ubicación bien.

En este tutorial se describen los pasos básicos para localizar su dispositivo móvil (usando latitud y longitud), y utilizar La
geocodificación inversa para convertir a una dirección legible, como en la siguiente imagen:

Embarcadero Technologies 186


Diseñar la interfaz de usuario
Esta aplicación demo está diseñado con dos componentes principales: una TListBox (En el lado izquierdo) y una TWebBrowser
.

Nota: Antes de continuar con este escenario, en el Gerente de proyecto , Configurar la plataforma de destino activa
para dispositivo iOS o Androide. De lo contrario, no se puede añadir el
TWebBrowser componente.

Caída de una TListBox y una TWebBrowser componente en el formulario.

o En el TListBox, establecer el Alinear propiedad a Izquierda para reservar la parte izquierda de la interfaz de usuario. Entonces
crear los siguientes subcomponentes bajo el cuadro de lista:

ß Un componente TListBoxHeader con los siguientes subcomponentes:

ß Un componente TLabel con el texto "Ubicación Demo"

ß Un componente TSwitch (Switch1) para seleccionar on / off de TLocationSensor

ß Un TListBoxGroupHeader con el texto "Su ubicación"

ß Un TListBoxItem con el nombre "ListBoxItemLatitude" y "Latitud" como texto

ß Un TListBoxItem con el nombre "ListBoxItemLongitude" y "Longitud" como texto

ß Un TListBoxGroupHeader con el texto "Dirección actual"

ß Un TListBoxItem con el nombre "ListBoxItemAdminArea" y "AdminArea" como


texto

ß Un TListBoxItem con el nombre "ListBoxItemCountryCode" y "countryCode"


como texto

Embarcadero Technologies 187


ß Un TListBoxItem con el nombre "ListBoxItemCountryName" y "del País"
como texto

ß Un TListBoxItem con el nombre "ListBoxItemFeatureName" y "FeatureName"


como texto

ß Un TListBoxItem con el nombre "ListBoxItemLocality" y "Localidad" como texto

ß Un TListBoxItem con el nombre "ListBoxItemPostalCode" y "PostalCode" como


texto

ß Un TListBoxItem con el nombre "ListBoxItemSubAdminArea" y


"SubAdminArea" como texto

ß 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 "Vías"


como texto

o Un componente TWebBrowser (WebBrowser1) para mostrar la página Web (Google Maps). Conjunto
el Alinear propiedad a Cliente.

Después de crear estos componentes, seleccionar todo TListBoxItem elementos y seleccione


listboxitemleftdetail en el StyleLookup propiedad. Esto permite TListBoxItem para mostrar tanto una etiqueta y texto detallada.

La posición del sensor


El sensor de localización está envuelto por el TLocationSensor componente.

TLocationSensor dispara una OnLocationChanged evento cuando el dispositivo detecta movimiento. Se puede ajustar la
sensibilidad de TLocationSensor utilizando el Distancia y Exactitud propiedades.

o los Distancia propiedad especifica la distancia mínima (en metros) por el cual el dispositivo
debe moverse con el fin de hacer que el sensor de localización reubicar el dispositivo y volver nueva información de ubicación. Por
ejemplo, si se establece Distancia a "10", TLocationSensor dispara una
OnLocationChanged evento al mover "10 metros".

o los Exactitud propiedad representa el nivel de precisión (en metros) por el cual el sensor
localiza el dispositivo geográficamente, en relación con el punto geográfico en el que en realidad se encuentra el dispositivo.

Propina: Se debe especificar la precisión más bajo que funcione para su aplicación; cuanto mayor sea la precisión, más el
tiempo y la energía que requiere el sensor para determinar la ubicación. Los valores recomendados: distancia = 0; Precisión
= 0.

Embarcadero Technologies 188


Leer información de ubicación (Latitud, Longitud) del Componente
LocationSensor
los TLocationSensor componente necesita ser activado para su uso. Puede activar / desactivar
TLocationSensor basado en su entrada, como una TSwitch componente, o otros eventos de la aplicación.

1. Coloque una TLocationSensor componente de la paleta de herramientas .

2. Sobre el Diseñador de formularios , Selecciona el TSwitch componente.

3. En el Inspector de Objetos , en el Eventos pestaña doble clic OnSwitch evento.

4. Agregue el código siguiente a la OnSwitch controlador de eventos:

Delphi:

TForm1.Switch1Switch procedimiento (Sender: TObject); empezar

LocationSensor1.Active: = Switch1.IsChecked; fin;

C ++:

vacío __fastcall TForm1 :: Switch1Switch (TObject * Remitente) {

LocationSensor1-> Activo = Switch1-> IsChecked; }

Como se señaló anteriormente, TLocationSensor dispara una OnLocationChanged evento cuando se mueve el dispositivo móvil.
Puede mostrar la ubicación actual (latitud y longitud) usando los parámetros con un controlador de eventos.

1. Sobre el Diseñador de formularios , Selecciona el TLocationSensor .

2. En el Inspector de Objetos , en el Eventos pestaña doble clic OnLocationChange evento.

3. Agregue el código siguiente a la OnLocationChange controlador de eventos:

Delphi:

procedimiento TForm1.LocationSensor1LocationChanged (Sender: TObject;


const OldLocation, newLocation: TLocationCoord2D); var LDecSeparator: String;

empezar

LDecSeparator: = FormatSettings.DecimalSeparator;
FormatSettings.DecimalSeparator: =; '' // Muestra la ubicación actual

ListBoxItemLatitude.ItemData.Detail: = Format ( '% 2.6f', [NewLocation.Latitude]); ListBoxItemLongitude.ItemData.Detail: = Format ( '%


2.6f', [NewLocation.Longitude]);

Embarcadero Technologies 189


fin;

C ++:

anulará __fastcall TForm1 :: LocationSensor1LocationChanged (TObject * Sender, const TLocationCoord2D y OldLocation,

const TLocationCoord2D y newLocation)


{
Char LDecSeparator = FormatSettings.DecimalSeparator;
FormatSettings.DecimalSeparator = ''; // Muestra la ubicación actual

ListBoxItemLatitude-> ItemData-> Detalle = ListBoxItemLatitude-> ItemData-


> Detail.sprintf (L "% 2.6f", NewLocation.Latitude);
ListBoxItemLongitude-> ItemData-> Detalle = ListBoxItemLongitude-> ItemData-
> Detail.sprintf (L "% 2.6f", NewLocation.Longitude); }

Mostrar la ubicación actual Uso de Google Maps a través de un componente


TWebBrowser
Como se discutió en la Tutorial móvil: Uso del Explorador de componentes (iOS y Android) , el
TWebBrowser componente se ajusta un navegador web para plataformas móviles. Puede llamar a Google Maps desde

el componente TWebBrowser con los siguientes parámetros de URL:

https://maps.google.com/maps?q=(Latitude-value),(Longitude-value)

Así puede añadir esta URL a su controlador de eventos previamente creado OnLocationChanged como sigue:

Delphi:

procedimiento TForm1.LocationSensor1LocationChanged (Sender: TObject;


const OldLocation, newLocation: TLocationCoord2D); var UrlString: String; empezar

// código para paso anterior va aquí // Ver mapa usando

Google Maps URLString: = Format (

'Https://maps.google.com/maps?q=%s,%s',
[Format ( '% 2.6f', [NewLocation.Latitude]), Formato ( '% 2.6f', [NewLocation.Longitude])]);

WebBrowser1.Navigate (URLString); fin;

C ++:

Embarcadero Technologies 190


anulará __fastcall TForm1 :: LocationSensor1LocationChanged (TObject * Sender, const TLocationCoord2D y OldLocation,

const TLocationCoord2D y newLocation)


{
// código para paso anterior va aquí // Ver mapa usando

Google Maps
Cadena LLongitude = FloatToStr (NewLocation.Longitude, FormatSettings); Cadena URLString = "";

URLString = URLString.sprintf (L "https://maps.google.com/maps?q=%2.6f,%2.6f",


NewLocation.Latitude, NewLocation.Longitude);

FormatSettings.DecimalSeparator = LDecSeparator; WebBrowser1-> Navegar (URLString); }

El uso de geocodificación inversa

TGeocoder es un objeto que envuelve la codificación geográfica (o geocodificación inversa) de servicio.

geocodificación es el proceso de transformación de datos geográficos, tales como la dirección y el código postal, en coordenadas

geográficas. geocodificación inversa es el proceso de transformación de coordenadas geográficas en otros datos geográficos, tales

como la dirección. En este caso, utilizamos TGeocoder "revertir Geocode" nuestra localización (latitud y longitud) a la información de

dirección de lectura. Aquí está la secuencia básica de acciones con TGeocoder:

1. Crear una instancia de TGeocoder.

2. Definir un evento OnGeocodeReverse para que pueda recibir el evento más tarde.

3. conjunto de datos para ejecutar "geocodificación inversa".

4. TGeocoder accede al servicio en la red para resolver la información de dirección.

5. TGeocoder dispara una OnGeocodeReverse evento.

6. Su aplicación iOS recibe la información de dirección a través del parámetro de la


evento OnGeocodeReverse y actualiza la interfaz de usuario.

Nota: Como TGeocoder no es un componente (esto es sólo una clase), es necesario definir los pasos a través de su código (no se
puede colocar un componente, ni asignar un controlador de eventos a través del Inspector de Objetos).

En primer lugar, definir un nuevo campo "FGeocoder" en la sección privada de la forma. También puede definir un "procedimiento
OnGeocodeReverseEvent", como en los siguientes fragmentos de código.

Delphi:

tipo
TForm1 = class (TForm)
// IDE define componentes visibles (o no visuales) aquí automáticamente

Embarcadero Technologies 191


privado
{} declaraciones privadas FGeocoder:
TGeocoder;
OnGeocodeReverseEvent procedimiento (const Dirección: TCivicAddress); público

{} Las declaraciones públicas fin;

C ++: Nota: Coloque este fragmento de código en el archivo de cabecera (.h)

clase TForm1: TForm pública {

// IDE define componentes visibles (o no visuales) aquí automáticamente privado:


// declaraciones del usuario
TGeocoder * FGeocoder;
anulará __fastcall OnGeocodeReverseEvent (TCivicAddress * const Dirección); público:
// declaraciones de usuario __fastcall TForm1
(TComponent * Propietario); };

Ahora se puede crear una instancia de TGeocoder y configurarlo con datos con la siguiente Delphi o código C ++.

TGeocoder.Current da el tipo de clase que realmente implementa el servicio de codificación geográfica. El código de " TGeocoder.Current.Create"
llama al constructor (Crear) para el tipo especificado, y lo guarda en el FGeocoder campo. También es necesario especificar un
controlador de eventos, que se dispara cuando TGeocoder completa geocodificación inversa. Asignar OnGeocodeReverseEvent
( que se acaba de definir en el paso anterior) a FGeocoder.OnGeocodeReverse.

Por último, si ha creado una instancia del juego TGeocoder, y TGeocoder no se está ejecutando, llame TGeocoder.GeocodeReverse
con información de ubicación. Después TGeocoder recibe datos, la
OnGeocodeReverseEvent evento se dispara.

Delphi:

procedimiento TForm1.LocationSensor1LocationChanged (Sender: TObject;


const OldLocation, newLocation: TLocationCoord2D); empezar

// código para los pasos anteriores va aquí tratar //

Configuración una instancia de TGeocoder


si no se asignan (FGeocoder) luego comenzar

si Asignado (TGeocoder.Current) entonces


FGeocoder: = TGeocoder.Current.Create; si Asignado
(FGeocoder) entonces
FGeocoder.OnGeocodeReverse: = OnGeocodeReverseEvent; fin;

// Traducir ubicación para abordar


Si Asignado (FGeocoder) y no FGeocoder.Geocoding entonces

Embarcadero Technologies 192


FGeocoder.GeocodeReverse (newLocation); excepto

ListBoxGroupHeader1.Text: = 'error de servicio Geocoder'; fin; fin;

C ++:

anulará __fastcall TForm1 :: LocationSensor1LocationChanged (TObject * Sender, const TLocationCoord2D y OldLocation,

const TLocationCoord2D y newLocation)


{
// código para los pasos anteriores va aquí

// Configuración de una instancia de TGeocoder try {

si (FGeocoder == NULL) {
si (TGeocoder :: actual! = NULL) {
FGeocoder = (TGeocoder *) nueva TGeocoderClass (TGeocoder :: actual); } si (FGeocoder! = NULL) {

FGeocoder-> OnGeocodeReverse = OnGeocodeReverseEvent; }} // Traducir ubicación

para abordar

if ((FGeocoder! = NULL) && (! (FGeocoder-> geocodificación ()))) {


FGeocoder-> GeocodeReverse (newLocation); }} captura (...) {

ListBoxGroupHeader1-> Text = "error de servicio Geocoder"; }}

Mostrar una dirección de lectura mecánica en el componente ListBox

Como se describió anteriormente, después de Reverse codificación geográfica se ha completado, una OnGeocodeReverseEvent Está despedido.

A continuación, asignar propiedades de la TCivicAddress Dirección de parámetro para mostrar información de la dirección de lectura en los campos del
cuadro de lista:

Delphi:

TForm1.OnGeocodeReverseEvent procedimiento (const Dirección: TCivicAddress); empezar

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;

Embarcadero Technologies 193


ListBoxItemSubLocality.ItemData.Detail : = Address.SubLocality;
ListBoxItemSubThoroughfare.ItemData.Detail: = Address.SubThoroughfare; ListBoxItemThoroughfare.ItemData.Detail
: = Address.Thoroughfare;
fin;

C ++:

vacío __fastcall TForm1 :: OnGeocodeReverseEvent (TCivicAddress * const Dirección) {

Si (Dirección! = NULL) {
ListBoxItemAdminArea-> ItemData-> Detalle = Dirección-> AdminArea;
ListBoxItemCountryCode-> ItemData-> Detalle = Dirección-> countryCode;
ListBoxItemCountryName-> ItemData-> Detalle = Dirección-> CountryName;
ListBoxItemFeatureName-> ItemData-> Detalle = Dirección-> FeatureName;
ListBoxItemLocality-> ItemData-> Detalle = Dirección-> localidad;
ListBoxItemPostalCode-> ItemData-> Detalle = Dirección-> PostalCode;
ListBoxItemSubAdminArea-> ItemData-> Detalle = Dirección-> SubAdminArea;
ListBoxItemSubLocality-> ItemData-> Detalle = Dirección-> SubLocality;
ListBoxItemSubThoroughfare-> ItemData-> Detalle = Dirección-
> SubThoroughfare; ListBoxItemThoroughfare-> ItemData-> Detalle
= Dirección-> Vías;
}}

Al describir por qué su aplicación necesita la ubicación del usuario

Antes de ti desplegar su aplicación definitiva hay que seleccionar Proyecto> Opciones> Información de la versión , Con IOS
Dispositivo como el objetivo, y actualizar los valores de NSLocationAlwaysUsageDescription y
NSLocationWhenInUseUsageDescriptioncon un mensaje que explica por qué su solicitud pide la ubicación del usuario. Sus
usuarios ver este mensaje cuando la aplicación les pide que se autorice IOS para proporcionar la ubicación del
dispositivo iOS con la aplicación.

Ver también

o Tutorial móvil: Usar diseño de Ajuste forma diferente tamaños u orientaciones (IOS y
Androide)

o Móviles Tutorial: Uso de notificaciones (iOS y Android)

o Móviles Tutorial: Uso de notificaciones remotas (iOS y Android)

o System.Sensors.TGeocoder

o System.Sensors.Components.TLocationSensor

o Fragmentos de código móvil: Notificaciones

Las muestras

o Ubicación muestra

Embarcadero Technologies 194


o Sensores VCL muestra

Embarcadero Technologies 195


Móviles Tutorial: Uso de notificaciones (iOS y
Android)

En este tutorial se describen los pasos básicos para usar las notificaciones en su dispositivo móvil; para más detalles, véase el uso de
notificaciones .

Tres de notificación o alerta estilos básicos


Cuando los usuarios configurar las notificaciones para aplicaciones en sus dispositivos móviles, las notificaciones pueden ser liberados de aplicaciones en los
tres estilos básicos que se muestran aquí. El banner aparece brevemente, pero el cuadro de diálogo de alerta requiere el despido por parte del usuario.

Bandera de aviso en dispositivos móviles

iOS

Androide

Embarcadero Technologies 196


Los diálogos de alerta: iOS y Android insignia Número Número Notificación

IOS número de placa

Protectores

Número de notificaciones de Android

Androide

El centro de notificaciones en dispositivos móviles

Las siguientes imágenes muestran el centro de notificaciones en un iPad (Centro de Notificaciones) y Android (buzón de notificaciones), donde el
usuario puede tirar hacia abajo la lista de todas las notificaciones recientes.

iOS

Embarcadero Technologies 197


Androide

Acceder al servicio de notificación


RAD Studio proporciona la TNotificationCenter componente que le permite acceder fácilmente al servicio de notificación.

Para acceder al servicio de notificación, haga lo siguiente:

1. Crear una nueva aplicación móvil:

ß por Delphi: Archivo> Nuevo> Aplicación Multi-Device - Delphi

ß por C ++: Archivo> Nuevo> Aplicación Multi-Device - C ++ Builder

2. Selecciona el TNotificationCenter componente en el paleta de herramientas , Y soltarlo en el Formar


Diseñador .

3. Compruebe que la siguiente unidad se ha añadido automáticamente al proyecto:

ß Para aplicaciones Delphi, agregue la siguiente unidad a la cláusula uses si no es


presente:

usos
System.Notification;

ß Para aplicaciones C ++, agregue la siguiente incluir operador a la cabecera del proyecto
archivo (archivo .h):

# incluir <System.Notification.hpp>

los System.Notification.TNotificationCenter.CreateNotification método le permite crear una instancia de la TNotification


objeto de clase.

Embarcadero Technologies 198


Añadir FMLocalNotificationPermission (IOS)
Con el fin de utilizar las notificaciones en dispositivos iOS 8+, es necesario asegurarse de que la
FMLocalNotificationPermission par clave / valor está habilitada en el Información de la versión la página de opciones del proyecto.

1. Escoger Proyecto> Opciones> Información de la versión .

2. En el Objetivo campo, seleccione configuración de depuración - dispositivo IOS - plataforma de 32 bits.

3. Selecciona el Valor campo de FMLocalNotificationPermission a cierto.

los FMLocalNotificationPermission configuración habilita las notificaciones locales en los dispositivos iOS 8+:

Establecer el icono número de placa y número de notificaciones de Código

TNotification.Number define el Icono número de placa ( para iOS dispositivos) y la número de notificación ( para dispositivos
Android).

Para establecer el número de iOS icono insignia (para Delphi o C ++) o el número de notificaciones de Android (sólo para aplicaciones de Delphi), es
necesario poner en práctica el método correspondiente.

1. Caída de una TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a NúmeroConjunto.

3. crear el Al hacer clic caso de la NúmeroConjunto botón haciendo doble clic en el botón.

4. implementar el controlador de eventos Para el evento OnClick del NúmeroConjunto botón añadiendo el siguiente código:

ß por Delphi:

procedimiento TForm1.SetNumberClick (Sender: TObject); var MyNotification:

TNotification; empezar

// Crear una instancia de TNotification


MyNotification: = NotificationCenter1.CreateNotification; tratar

Embarcadero Technologies 199


// --- su código va aquí --- // Establecer el icono o número de
notificación MyNotification.Number: = 18; // Establecer el mensaje
de alerta

MyNotification.AlertBody: = 'Delphi para su dispositivo móvil ya está aquí!'; // Nota: Usted debe enviar la notificación al
centro de notificación para el número de placa del icono que se mostrará.

NotificationCenter1.PresentNotification (MyNotification); finalmente

MyNotification.DisposeOf; fin; fin;

ß por C ++:

anulará __fastcall TForm1 :: SetNumberClick (TObject * Remitente) {

si (NotificationCenter1-> Compatible ()) {


TNotification * myNotification = NotificationCenter1-
> CreateNotification ();
__tratar { myNotification-> Number = 18;

myNotification-> AlertBody = "C ++ para tu dispositivo móvil


¡es aquí!";
NotificationCenter1-
> PresentNotification (myNotification);
} __finalmente {

myNotification-> DisposeOf (); }}}

Después de ejecutar la aplicación (pulse F9) y haciendo clic en el NúmeroConjunto botón, se puede ver lo siguiente:

o Una tarjeta de identificación en el icono de la aplicación (en la pantalla de inicio de iOS):

o Un número que aparece junto al mensaje de notificación en el centro de notificaciones (en Android):

Androide

Embarcadero Technologies 200


Notificación horario
También puede programar mensajes de notificación mediante el ScheduleNotification método que el
TNotificationCenter clase hereda de TCustomNotificationCenter . Para mostrar un mensaje de notificación, es necesario

crear una instancia de la TNotification clase y, para definir la Nombre , AlertBody y FireDate campos.

1. Caída de una nueva TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a ScheduleNotification.

3. crear el Al hacer clic caso de la ScheduleNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del ScheduleNotification botón añadiendo el siguiente
código:

ß por Delphi:

procedimiento TForm1.ScheduleNotificationClick (Sender: TObject); var MyNotification: TNotification;

empezar

MyNotification: = NotificationCenter1.CreateNotification; tratar MyNotification.Name: =

'MyNotification';
MyNotification.AlertBody: = 'Delphi para su dispositivo móvil ya está aquí!'; // Fired en 10 segundos

MyNotification.FireDate: = ahora + EncodeTime (0, 0, 10, 0); // Enviar notificación al centro de


notificación NotificationCenter1.ScheduleNotification (MyNotification); finalmente

MyNotification.DisposeOf; fin; fin;

ß por C ++:

vacío __fastcall TForm1 :: ScheduleNotificationClick (TObject * Remitente) {

si (NotificationCenter1-> Compatible ()) {


TNotification * myNotification = NotificationCenter1-
> CreateNotification ();
__tratar { myNotification-> Name = "MyNotification";

myNotification-> AlertBody = "C ++ para tu dispositivo móvil


¡es aquí!";
// fuego en 10 segundos
myNotification-> FireDate = Now () + EncodeTime (0, 0, 10,
0);
// enviar notificación al centro de notificación NotificationCenter1-

> ScheduleNotification (myNotification);


}

Embarcadero Technologies 201


__finalmente {
myNotification-> DisposeOf (); }}}

Después de ejecutar la aplicación (pulse F9) y haciendo clic en el ScheduleNotification botón, se puede ver el mensaje de notificación
(AlertBody) en la parte superior de su dispositivo de pantalla de inicio. Para los dispositivos IOS, este mensaje es similar a la pantalla
siguiente:

Repetir un Mensaje de Notificación


También puede repetir una notificación de mensajes utilizando el Intervalo de repetición propiedad de la
TNotification objeto.

Para repetir un mensaje de notificación, es necesario crear una instancia de la TNotification clase y, para definir la Nombre , AlertBody
y FireDate campos. También es necesario utilizar la ScheduleNotification método y fijar el Intervalo de repetición propiedad. En el
siguiente código, el intervalo repetido se establece en un minuto.

1. Caída de una nueva TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a RepeatedNotification.

3. crear el Al hacer clic caso de la RepeatedNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del RepeatedNotification botón añadiendo el siguiente
código:

ß por Delphi:

procedimiento TForm1.RepeatedNotificationClick (Sender: TObject); var MyNotification: TNotification;

empezar

MyNotification: = NotificationCenter1.CreateNotification; tratar MyNotification.Title: =

'MyNotification';
MyNotification.AlertBody: 'notificación repitiendo cada minuto!'; // Fired en 10 segundos

MyNotification.FireDate: = ahora + EncodeTime (0, 0, 10, 0); // repetida cada minuto

MyNotification.RepeatInterval: = TRepeatInterval.Minute; // Enviar notificación al centro de


notificación NotificationCenter1.ScheduleNotification (MyNotification); finalmente

Embarcadero Technologies 202


MyNotification.Free; fin; fin;

ß por C ++:

vacío __fastcall TForm1 :: RepeatedNotificationClick (TObject * Remitente) {


si (NotificationCenter1-> Compatible ()) {
TNotification * = myNotification
NotificationCenter1-> CreateNotification (); __tratar {

myNotification-> Name = "MyNotification";


myNotification-> AlertBody = "La repetición de alerta cada minuto!"; // fuego en 10 segundos

myNotification-> FireDate = Now () + EncodeTime (0, 0, 10, 0); // repetida cada minuto

myNotification-> repeatInterval = TRepeatInterval :: minuto; // Enviar notificación al centro de


notificación NotificationCenter1-> ScheduleNotification (myNotification); } __finalmente {

myNotification-> Libre (); }}}

Después de ejecutar la aplicación (pulse F9) y haciendo clic en el RepeatedNotification botón, se puede ver el mensaje de notificación
(AlertBody) en la parte superior de su dispositivo de pantalla de inicio. Para los dispositivos IOS, este mensaje es similar a la pantalla
siguiente:

Actualizar o cancelar una notificación de mensajes programada o repetida

Cada mensaje de notificación programada se identifica a través de la Nombre propiedad de la


TNotification objeto.

Embarcadero Technologies 203


Nota: Para la plataforma iOS, CancelNotification y ScheduleNotification puede cancelar o actualizar las notificaciones que no se han

presentado todavía. Para actualizar una notificación programada, simplemente llame al ScheduleNotification método de nuevo con

una instancia de TNotification que tiene el mismo nombre (propiedad Name). Para cancelar una notificación programada, sólo

tiene que llamar al CancelNotification método con el identificador que utilizó.

1. Caída de una nueva TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a CancelNotification.

3. crear el Al hacer clic caso de la CancelNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del CancelNotification botón añadiendo el siguiente
código:

ß por Delphi:

procedimiento TForm1.CancelNotificationClick (Sender: TObject); empezar

NotificationCenter1.CancelNotification ( 'MyNotification'); fin;

ß por C ++:

anulará __fastcall TForm1 :: CancelNotificationClick (TObject * Remitente) {NotificationCenter1->

CancelNotification ( "MyNotification"); }

Presentar el mensaje de notificación Inmediatamente


También puede mostrar el mensaje de notificación inmediata a través de la PresentNotification
función.

Para mostrar un mensaje de notificación, es necesario crear una instancia de la TNotification clase y, para definir la Nombre y
AlertBody campos.

1. Caída de una nueva TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a PresentNotification.

3. crear el Al hacer clic caso de la PresentNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del PresentNotification botón añadiendo el siguiente
código:

Embarcadero Technologies 204


ß por Delphi:

procedimiento TForm1.PresentNotificationClick (Sender: TObject); var MyNotification: TNotification;

empezar

MyNotification: = NotificationCenter1.CreateNotification; tratar MyNotification.Name: =

'MyNotification';
MyNotification.AlertBody: = 'Delphi para su dispositivo móvil ya está aquí!'; // Conjunto del icono del número de placa (para
iOS) o el número de mensajes (para Android), así MyNotification.Number: = 18; MyNotification.EnableSound: = false; // Enviar
mensaje al centro de notificación NotificationCenter1.PresentNotification (MyNotification); finalmente

MyNotification.DisposeOf; fin; fin;

ß por C ++:

vacío __fastcall TForm1 :: PresentNotificationClick (TObject * Remitente) {if (NotificationCenter1-> Apoyado ()) {

TNotification * myNotification = NotificationCenter1-


> CreateNotification ();
__tratar { myNotification-> Name = "MyNotification";

myNotification-> AlertBody = "C ++ para su dispositivo móvil es


¡aquí!";
// Conjunto del icono del número de placa (para iOS) o el número de mensajes (por
Androide), así myNotification-> Number = 18;

myNotification-> EnableSound = false; // Enviar notificación al centro de notificación


NotificationCenter1-> PresentNotification (myNotification);

} __finalmente {

myNotification-> DisposeOf ();


}
} }

Personalización del sonido de notificación


Puede usar un sonido personalizado para el mensaje de notificación inmediata a través de la
SoundName propiedad de la TNotification objeto. Es necesario crear una instancia de la TNotification clase,

definir el Activar sonido y el


SoundName propiedades. También es necesario indicar la ruta completa al archivo de sonido y la extensión de archivo.

1. Caída de una nueva TButton al formar .

Embarcadero Technologies 205


2. En el Inspector de Objetos , cambiar el Nombre propiedad a SoundNotification.

3. crear el Al hacer clic caso de la SoundNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del SoundNotification botón añadiendo el siguiente
código:

ß por Delphi:

procedimiento TForm1.SoundNotificationClick (Sender: TObject); var MyNotification: TNotification;

empezar

MyNotification: = NotificationCenter1.CreateNotification; tratar MyNotification.Name: =

'MyNotification';
MyNotification.AlertBody: = 'Delphi para su dispositivo móvil ya está aquí!'; MyNotification.EnableSound: = True;
MyNotification.SoundName: = GetSoundName; MyNotification.FireDate: = ahora + EncodeTime (0, 0, 10, 0); // Enviar
mensaje al centro de notificación NotificationCenter1.ScheduleNotification (MyNotification); finalmente

MyNotification.Free; fin; fin;

ß por C ++:

ß En el archivo .cpp, agregue el código siguiente:

anulará __fastcall TForm1 :: SoundNotificationClick (TObject * Remitente) {* TNotification myNotification = NotificationCenter1->

CreateNotification ();
__tratar {
myNotification-> Name = "MyNotification";
myNotification-> AlertBody = "C ++ para su dispositivo móvil ya está aquí!"; myNotification-> EnableSound = true;
myNotification-> SoundName = GetSoundName (); myNotification-> FireDate = Now () + EncodeTime (0, 0, 10, 0);
// Enviar notificación al centro de notificación NotificationCenter1-> ScheduleNotification (myNotification); } __finalmente
{

myNotification-> Libre (); }}

5. declarar la GetSoundName función.

ß por Delphi:

ß Establecer la declaración GetSoundName en la sección privada de la unidad.

Embarcadero Technologies 206


ß Añade el System.IOUtils al proyecto utiliza cláusulas.

usos
System.IOUtils; privado

GetSoundName función: string;

ß por C ++:

ß En el archivo de cabecera (.h), agregue la declaración siguiente:

ß Establecer la declaración GetSoundName en la sección privada de la unidad.

ß Incluir la System.IOUtils.hpp al proyecto utiliza cláusulas.

# incluir <System.IOUtils.hpp> privada:


// declaraciones de los usuarios
__fastcall UnicodeString GetSoundName ();

6. implementar el GetSoundName función.

Nota: Dependiendo del sistema operativo de destino, los datos de sonido debe ser una extensión de archivo diferente.

ß por Delphi:

{$ R * .fmx}
TForm1.GetSoundName función: string; begin {$ IFDEF IOS}

Resultado: = 'myiOSSound.caf'; {$ ENDIF} {$


IFDEF ANDROID}

Resultado: = TPath.Combine (TPath.GetSharedDocumentsPath, 'myAndroidSound.mp3'); {$ ENDIF} end;

ß por C ++:

ß En el archivo .cpp, agregue el código siguiente:

UnicodeString __fastcall TForm1 :: GetSoundName () {resultado UnicodeString;

# si está definido (_PLAT_IOS)


resultado = "myiOSSound.caf";
# terminara si
# si está definido (__ ANDROID__)
resultado =
Sistema :: :: Ioutils TPath :: Combine (Sistema :: Ioutils :: :: TPath GetSharedDocumentsPath (
) , "MyAndroidSound.mp3");
# terminara si

Embarcadero Technologies 207


return resultado; //}

7. Añadir los archivos de sonido a su proyecto:

ß Encuentra la myAndroidSound.mp3 y archivos de Windows en el myiOSSound.caf


Explorer, y les arrastre a la Gerente de proyecto . Soltarlos en el nombre de su proyecto.

Nota: El myAndroidSound.mp3 archivos de sonido y myiOSSound.caf no están incluidos en la instalación RAD Studio. Se puede utilizar
cualquier archivos CAF que tiene MP3 y, pero recuerde que debe cambiar el nombre en el fragmento de código anterior para el nombre de
los archivos. Vea este enlace para obtener más información sobre cómo convertir archivos MP3 a formato CAF: Cómo convertir de MP3 a la
CAF

ß En el Confirmar diálogo, haga clic Sí para agregar los archivos de sonido a su proyecto.

8. Abre el Gestor de despliegue para asegurarse de que los archivos de sonido se despliegan con su
solicitud. Puede ver las entradas correspondientes en la columna de la ruta de acceso remoto:

ß Para iOS: Inicio \ Documentos ( ver la distribución de archivos en aplicaciones de iOS ).

ß Para Android: \ activos internos ( ver la distribución de archivos en aplicaciones de Android ).

9. Cambiar la ruta remota de los archivos añadidos en la Gestor de despliegue :

ß Para iOS:. \

ß Para Android: bienes\

Banner notificación o la notificación de alertas


Por defecto, la aplicación muestra la bandera de aviso:

o Bandera de aviso en el iPad

o Bandera de aviso en los dispositivos Android

Androide

o Notificación de alertas (sólo para dispositivos IOS)

Embarcadero Technologies 208


Para utilizar una alerta de notificación en lugar de una bandera de aviso (sólo para dispositivos IOS), el usuario final tiene que cambiar la Alerta estilo
de alertas a través de la página de configuración del centro de notificaciones, disponible en la configuración del dispositivo:

Añadir acción a la notificación de alertas (Sólo IOS)


También puede personalizar una alerta mediante la adición de un botón de acción que se abre la aplicación. Para personalizar una acción de alerta,

es necesario establecer el alertaction campo para el nombre del botón de acción, y luego configurar el HasAction campo para Cierto, como sigue.

Embarcadero Technologies 209


1. Caída de una nueva TButton al formar .

2. En el Inspector de Objetos , cambiar el Nombre propiedad a ActionNotification.

3. crear el Al hacer clic caso de la ActionNotification botón haciendo doble clic en el


botón.

4. implementar el controlador de eventos Para el evento OnClick del ActionNotification botón añadiendo el siguiente
código:

ß por Delphi:

procedimiento TForm1.ActionNotificationClick (Sender: TObject); var MyNotification: TNotification;

empezar

MyNotification: = NotificationCenter1.CreateNotification; tratar MyNotification.Name: =

'MyNotification';
MyNotification.AlertBody: Delphi =' para iOS ya está aquí! '; MyNotification.Number: = 2;
MyNotification.AlertAction: = 'Launch'; MyNotification.HasAction: = True;

MyNotification.FireDate: = ahora + EncodeTime (0, 0, 20, 0);


NotificationCenter1.ScheduleNotification (MyNotification); finalmente

MyNotification.DisposeOf; fin; fin;

ß por C ++:

vacío __fastcall TForm1 :: ActionNotificationClick (TObject * Remitente) {if (NotificationCenter1-> Apoyado ()) {

TNotification * myNotification = NotificationCenter1-


> CreateNotification ();
__tratar { myNotification-> Name = "MyNotification";

myNotification-> AlertBody = "C ++ para iOS ya está aquí!"; myNotification-> Number =


2; myNotification-> alertaction = "lanzamiento"; myNotification-> HasAction = true;

myNotification-> FireDate = Now () + EncodeTime (0,0,20,0); NotificationCenter1->

ScheduleNotification (myNotification); } __finalmente {

myNotification-> DisposeOf (); }}}

Nota: Sólo los dispositivos iOS compatibles con la función de alerta de notificación. La notificación de alerta se abre en

el momento que se especifica a través de la FireDate campo.

Embarcadero Technologies 210


Agregar acción de Notificaciones
los TNotificationCenter clase proporciona el onReceiveLocalNotification controlador de eventos que le permite escribir una respuesta cuando

el usuario hace clic en el mensaje de notificación en el centro de notificaciones. Para escribir la respuesta, haga doble clic en el TNotificationCenter

componente en el Diseñador de formularios Y luego poner en práctica el OnReceiveLocalNotification controlador de eventos. El siguiente

fragmento de código implementa una respuesta para mostrar un cuadro de mensaje que dice: "El <Nombre de la notificación>" hace clic en

la notificación ".

o por Delphi:

procedimiento TForm1.NotificationCenter1ReceiveLocalNotification (Sender: TObject; ANotification: TNotification);

empezar
ShowMessage ( 'El' + + ANotification.Name 'notificación clic en él.'); fin;

o por C ++:

anulará __fastcall TForm1 :: NotificationCenter1ReceiveLocalNotification (TObject * Sender, TNotification * ANotification) {

ShowMessage ( "El" + ANotification-> Nombre + "hace clic en la notificación."); }

Embarcadero Technologies 211


Ejecutar la aplicación
Para ejecutar la aplicación, o bien elegir Ejecutar> Ejecutar o presione F9. Haga clic en los diferentes botones para programar o
notificaciones presentes en su dispositivo.

Ver también

o Uso de notificaciones

o Tutorial móvil: tomar y compartir una imagen, texto y compartir (iOS y Android)

o Tutorial móvil: Usando Ubicación Sensores (iOS y Android)

o Móviles Tutorial: Uso de notificaciones remotas (iOS y Android)

o Fragmentos de código móvil: Notificaciones

o Índice de eventos que crean

o Uso del Centro de Notificación OS X

o Cómo convertir de MP3 a la CAF

Las muestras

o FireMonkey Enviar Cancelar Notificación muestra

o Servicio de notificación de Android FireMonkey muestra

o FireMonkey Conjunto Restablecer número de placa muestra

o OSX Muelle Distintivos (Delphi)

o FireMonkey Notificación Mac (Delphi)

o FireMonkey Notificación Mac (C ++)

Embarcadero Technologies 212


Tutorial móvil: Usando el Marcador de teléfono en
dispositivos móviles (iOS y Android)

En este tutorial se describen los pasos básicos para utilizar los servicios de marcación del teléfono en su dispositivo móvil.

Acerca del teléfono Servicios del Marcador en dispositivos móviles

En las plataformas móviles, proporciona la FireMonkey IFMXPhoneDialerService interfaz que define la estructura de las clases de servicio

de marcación del teléfono, tales como TPhoneDialerService . Los servicios de marcación del teléfono le permiten realizar las siguientes

operaciones:

o Obtener la información relacionadas con la operadora.

o Haz una llamada.

o Detectar los cambios de estado de llamada.

Acceso al Teléfono Servicios del Marcador


Para crear una aplicación que utiliza los servicios de marcación del teléfono, realice los siguientes pasos básicos:

1. Seleccionar:

ß Para Delphi: Archivo> Nuevo> Aplicación Multi-Device - Delphi

ß Para C ++: Archivo> Nuevo> Aplicación Multi-Device - C ++ Builder

2. Abre el Editor de código y hacer lo siguiente:

o Añadir las siguientes líneas a su código si no están presentes:

Delphi:

usos
FMX.Platform, FMX.PhoneDialer;

C ++:

# incluir <FMX.Platform.hpp>
# incluir <FMX.PhoneDialer.hpp>

o Sólo para aplicaciones de Delphi: Añadir la siguiente línea a la sección pública de la definición del formulario:

Crear constructor (AOwner: TComponent); anular;

Embarcadero Technologies 213


o Añadir las siguientes propiedades a la sección privada de la definición del formulario:

Delphi:

privadas: // declaraciones de los usuarios


PhoneDialerService: IFMXPhoneDialerService;

C ++:

privadas: // declaraciones de los usuarios


_di_IFMXPhoneDialerService phoneDialerService; bool serviceSupported;

o Sólo para aplicaciones de Delphi: en la sección de implementación, anular el constructor de forma tan
de la siguiente manera:

constructor TForm1.Create (AOwner: TComponent); empezar

heredado Crear (AOwner);


TPlatformServices.Current.SupportsPlatformService (IFMXPhoneDialerService, IInterface (PhoneDialerService)); fin;

o Sólo para C ++ Builder aplicaciones: en el estructura Ver , Haga clic en la forma y en el Objeto
Inspector , abre el Eventos pestaña y haga doble clic onCreate. Implementar la siguiente onCreate controlador
de eventos para el formulario de solicitud:

vacío __fastcall TForm1 :: FormCreate (TObject * Remitente) {

serviceSupported = (TPlatformServices :: current-


> SupportsPlatformService (__ uuidof (IFMXPhoneDialerService)) &&
(PhoneDialerService = TPlatformServices :: current-
> GetPlatformService (__ uuidof (IFMXPhoneDialerService)))); }

Ahora su aplicación puede acceder a los servicios de marcación del teléfono.

El diseño de la interfaz de usuario


En este tutorial se utiliza el TLabel , TButton y TEdit componentes como los elementos de la interfaz de usuario.

Para configurar los elementos de interfaz de usuario, realice los siguientes pasos:

1. Caída de dos TLabel componentes en el Diseñador de formularios, y luego puesto su Nombre


a propiedades lblCarrierName y lblISOCountryCode, respectivamente.

Embarcadero Technologies 214


2. Selecciona el Texto viviendas en las etiquetas a Nombre de la compañía y Código ISO del país,
respectivamente.

3. Caída de una TButton componente en el Diseñador de formularios, y en el inspector de objetos, establecer el


siguiente propiedades de este botón:

ß Nombre a btnGetCarrierInfo

ß Texto a Obtener Información Carrier

Obtener las propiedades del portador

Para obtener información sobre el soporte, realizar los siguientes cambios:

1. En el Diseñador de formularios, seleccione la Obtener Información Carrier botón.

2. En el Inspector de Objetos, haga doble clic en el al hacer clic acontecimiento, y aplicar el al hacer clic
controlador de eventos de la siguiente manera:

Delphi:

procedimiento TForm1.btnGetCarrierInfoClick (Sender: TObject); empezar

{Prueba de si los servicios PhoneDialer son compatibles con su dispositivo} if Assigned (PhoneDialerService), entonces
comienzan

{Si es así, actualizar las etiquetas con la información recuperada} lblCarrierName.Text: = 'Nombre de la
compañía:' + PhoneDialerService.GetCarrier.GetCarrierName;

lblISOCountryCode.Text: = 'Código de país ISO:' +


PhoneDialerService.GetCarrier.GetIsoCountryCode;
fin; fin;

C ++:

vacío __fastcall TForm1 :: btnGetCarrierInfoClick (TObject * Remitente) {

si (serviceSupported) {
lblCarrierName-> Text = "Nombre de la compañía:" + phoneDialerService-
> GetCarrier () -> GetCarrierName ();
lblISOCountryCode-> Text = "Código de país ISO:" + phoneDialerService-
> GetCarrier () -> GetIsoCountryCode ();
} Else ShowMessage ( "Este dispositivo no es compatible con los servicios del marcador del teléfono."); }

Ejecutar la aplicación

Importante: Antes de ejecutar su aplicación Delphi en un dispositivo Android, compruebe que los siguientes
permisos se establecen en

Embarcadero Technologies 215


Proyecto> Opciones> utiliza permisos Para el Todas las configuraciones de la plataforma Android - objetivo:

o Llamada telefónica

o Leer el estado del teléfono

Para más información, ver utiliza permisos .

Para ejecutar la aplicación, seleccione ejecutar> correr o pulse F9.

Después de hacer clic en el Obtener Información Carrier botón, la aplicación muestra la información básica sobre el portador, similar a las
pantallas siguientes:

iOS Androide

Haciendo una llamada

FireMonkey proporciona la IFMXPhoneDialerService.Call método que hace una llamada telefónica a un número de teléfono
especificado.

Para su aplicación para realizar llamadas, añadir los siguientes elementos al diseñador de la forma:

1. Agrega un TLabel componente y, a continuación, establecer su Texto propiedad a Número de teléfono.

Embarcadero Technologies 216


2. Agrega un TEdit componente, y en el inspector de objetos, establezca las propiedades siguientes:

ß Nombre a edtTelephoneNumber.

ß KillFocusByReturn a Cierto.

ß KeyboardType a PhonePad.

ß ReturnKeyType a Ir.

3. Agrega un TButton componente, y en el inspector de objetos, haga lo siguiente:

o Selecciona el Nombre propiedad a btnMakeCall.

o Selecciona el Texto propiedad a Hacer una llamada.

o Sobre el Eventos pestaña, haga doble clic al hacer clic, y luego poner en práctica el al hacer clic controlador de eventos
como sigue:

Delphi:

procedimiento TForm1.btnMakeCallClick (Sender: TObject); empezar

{Prueba de si los servicios PhoneDialer son compatibles con su dispositivo} if Assigned (PhoneDialerService), entonces
comienzan

{Si se introduce el número de teléfono en el cuadro de edición y luego hacer la llamada, de lo


mostrará un mensaje de error si edtTelephoneNumber.Text}
<> '', entonces
PhoneDialerService.Call (edtTelephoneNumber.Text) else begin

ShowMessage ( 'type-in ​por favor un número de teléfono.');


edtTelephoneNumber.SetFocus; fin; fin; fin;

C ++:

vacío __fastcall TForm1 :: btnMakeCallClick (TObject * Remitente) {

si (serviceSupported) {
si (edtTelephoneNumber-> texto! = "") {
phoneDialerService-> Llamada (edtTelephoneNumber-> texto); }

else {
ShowMessage ( "type-in ​por favor un número de teléfono."); edtTelephoneNumber->
SetFocus (); }

} Else ShowMessage ( "Este dispositivo no es compatible con los servicios del marcador del teléfono."); }

Hacer una llamada:

Embarcadero Technologies 217


1. Ejecutar la aplicación.

2. En el campo bajo TEdit Número de teléfono, escriba el número de teléfono.

3. Haga clic en el Hacer una llamada botón.

iOS Androide

Detección del estado Cambios de llamadas

los IFMXPhoneDialerService interfaz proporciona el OnCallStateChanged evento que le permite manejar los cambios de estado de
llamada. los TCallState enumeración describe los posibles estados de llamada telefónica.

En la siguiente tabla se describen los elementos de la TCallState enumeración (los estados admitidos para cada plataforma están
marcados con "+").

Embarcadero Technologies 218


ít. Descripción iOS Android

Ninguna Sin estado de la llamada. + -

La persona que llama conectado teléfono está conectado a la parte llamada. + +

Entrante Una llamada telefónica entrante. + +

Discado El teléfono está en un estado de marcación. + -

Llamada desconectada está desconectado. + +

La aplicación de la OnCallStateChanged Gestor de Eventos

Para poner en práctica el OnCallStateChanged controlador de eventos, realice los pasos siguientes:

1. Añadir el siguiente encabezado procedimiento para la sección privada de la definición del formulario:

Delphi:

procedimiento MyOnCallStateChanged (const ACallID: String; const ACallState: TCallState);

C ++:

void __fastcall MyOnCallStateChanged (const UnicodeString aCallID, const TCallState aCallState);

2. Vuelva a escribir la forma constructor (aplicaciones Delphi) o la onFormCreate controlador de eventos


(aplicaciones C ++) que se han definido en el #Accessing el teléfono Servicios del Marcador
sección como sigue:

Delphi:

constructor TForm1.Create (AOwner: TComponent); empezar

heredado Crear (AOwner);


TPlatformServices.Current.SupportsPlatformService (IFMXPhoneDialerService, IInterface (PhoneDialerService));

si Asignado (PhoneDialerService) entonces


PhoneDialerService.OnCallStateChanged: = MyOnCallStateChanged; fin;

C ++:

vacío __fastcall TForm1 :: FormCreate (TObject * Remitente)

Embarcadero Technologies 219


{
serviceSupported = (TPlatformServices :: current-
> SupportsPlatformService (__ uuidof (IFMXPhoneDialerService)) &&
(PhoneDialerService = TPlatformServices :: current-
> GetPlatformService (__ uuidof (IFMXPhoneDialerService))));
si (serviceSupported) {
phoneDialerService-> OnCallStateChanged = MyOnCallStateChanged; }}

3. Agrega un TLabel componente al diseñador de formularios, y en el Inspector de Objetos , Establece su


Nombre propiedad a lblCallState.

4. En el Editor de código , Añadir el siguiente código de controlador de eventos:

Delphi:

procedimiento TForm1.MyOnCallStateChanged (const ACallID: String; const ACallState: TCallState); var OUTTEXT: String; Empezar

caso de ACallState
TCallState.None: OUTTEXT: = '' No hay llamadas;
TCallState.Connected: OUTTEXT: = 'conectado';
TCallState.Incoming: OUTTEXT: = 'Llamada entrante';
TCallState.Dialing: OUTTEXT: = 'Marcación';
TCallState.Disconnected: OUTTEXT: = 'desconectado'; fin;

lblCallState.Text: = OUTTEXT; Fin;

C ++:

vacío __fastcall TForm1 :: MyOnCallStateChanged (const UnicodeString aCallID, const TCallState aCallState) {

interruptor (aCallState) {
TCallState caso :: Ninguno:
lblCallState-> Texto = "No hay llamadas"; descanso;

TCallState caso :: Conectado:


lblCallState-> Text = "Conectado"; descanso;

TCallState caso :: entrante:


lblCallState-> Text = "Llamada entrante"; descanso;

caso TCallState :: Marcado:


lblCallState-> Text = "rápida"; descanso;

caso TCallState :: desconectados:


lblCallState-> Text = "desconectado"; descanso; }}

Embarcadero Technologies 220


Después de implementar este controlador de eventos, la aplicación muestra el estado de la llamada telefónica. Por ejemplo, la

siguiente pantalla de iOS indica que el teléfono está en un estado de marcación:

Nota: En este proyecto de ejemplo, la TLabel componente está al lado de la caja y la TEdit Hacer una llamada botón,
bajo Número de teléfono.

Ver también

o Tutorial móvil: tomar y compartir una imagen, texto y compartir (iOS y Android)

o Tutorial móvil: Usando Ubicación Sensores (iOS y Android)

o Desarrollo de aplicaciones móviles Android

o Desarrollo de aplicaciones móviles iOS

Embarcadero Technologies 221


o Fragmentos de código móvil: Marcador de teléfono

o FMX.PhoneDialer.IFMXPhoneDialerService

Las muestras

o FireMonkey Marcador de teléfono muestra

Embarcadero Technologies 222


Móviles Tutorial: Uso de notificaciones
remotas (iOS y Android)

Este tutorial da los pasos básicos para configurar y utilizar las notificaciones remotas (notificaciones push) en su
iOS o dispositivo móvil Android.

Nota: dispositivos Kindle Fire no son compatibles con las notificaciones push.

Push Notification remoto


Notificaciones remotas son las notificaciones enviadas a un dispositivo móvil utilizando un canal de datos de un proveedor de servicios en

tiempo real. Ambos iOS y Androide oferta de soporte integrado para las notificaciones remotas, y RAD Studio ofrece un marco RESTO

BaaS que soporta los siguientes protocolos, los proveedores de nube y servicios de back-end:

o protocolos:

ß iOS: Apple Push Notification APN

ß Android: Google mensajería en la nube GCM

o los proveedores de servicios en la nube:

ß Analizar gramaticalmente

ß Kinvey

o servicio de back-end:

ß ccsme

Para recibir notificaciones push, es necesario configurar el servicio de mensajería (APS o GCM), el dispositivo, el proveedor de
servicios de nube o EMS, y su aplicación RAD Studio, como se describe en las tres páginas de este tutorial móvil.

notas:

o El termino Notificaciones remotas cubiertas De Apple Push Notification tanto como google Cloud
Mensajería.

o iOS y Androide También tienen notificaciones locales que se envían desde una aplicación o desde el
OS para llamar la atención del usuario. Para más información, ver Móviles Tutorial: Uso de notificaciones
(iOS y Android) .

o El termino Proveedor de servicio cubre en este tutorial los proveedores de servicios cloud (Kinvey y
Analizar) y el proveedor de servicios de back-end EMS.

Embarcadero Technologies 223


RESTO marco BAAS
Nuestro marco RESTO BAAS le ofrece una variedad de acciones:

o Crear, recuperar, actualizar y eliminar objetos

o Registrarse, iniciar sesión, recuperar, actualizar y borrar usuarios

o Cargar, descargar y borrar archivos o flujos

o objetos de consulta y usuarios

o Enviar notificaciones push

o Regístrese y recibir notificaciones push en un dispositivo

Temas en este tutorial móvil


Recomendamos que realice estos secuencialmente como pasos en un procedimiento.

1. Configuración del servicio de mensajería

2. Configuración del proveedor de servicios. Elija una de las siguientes opciones, dependiendo de
el proveedor de servicios:

ß Utilizando el servicio de nube para enviar notificaciones Push

ß El uso de EMS para enviar notificaciones Push

3. Aplicación multi-dispositivo para recibir notificaciones Push

Ver también

o BaaS general

o Introducción a Kinvey y Parse

o EMS Notificaciones Push

o Enterprise Mobility Services (EMS)

o Gestión de usuarios Baas

o Usando BaaS de backend de almacenamiento

o Móviles Tutorial: Uso de notificaciones (iOS y Android)

o Tutorial móvil: Usando BaaS de backend de almacenamiento (iOS y Android)

Ejemplos de código

o BaaS ToDo Muestra

Embarcadero Technologies 224


Tutorial móvil: Usando BaaS de backend de
almacenamiento (iOS y Android)

Este tutorial da los pasos básicos para usar almacenamiento de back-end utilizando Kinvey y Analizar gramaticalmente como proveedores Baas.

En este tutorial se crea una Lista de la compra donde los elementos agregados se almacenan en la nube por el proveedor BaaS, por lo que estos elementos
pueden ser compartidos y actualizados entre los diferentes dispositivos, si es necesario.

iOS Androide

iPod Nexus 7

Con el almacenamiento de back-end que puede almacenar archivos y datos en la nube. Posteriormente, esta información puede ser

recuperada, actualiza, y se elimina. En este tutorial se va a:

o Crear nuevos elementos y almacenarlos en la nube.

Embarcadero Technologies 225


o Recuperar los elementos de la nube.

o Eliminar elementos de la nube.

Cómo hacer llegar su aplicación compatible en Kinvey y Parse

Antes de empezar a hacer este tutorial, asegúrese de que ya tiene una cuenta con Kinvey o Analizar gramaticalmente
y que usted ya tiene una aplicación creada en el proveedor de back-end.

o Introducción a Kinvey y Parse

ß Creación de una cuenta con Kinvey

ß Creación de una cuenta con Parse

ß Creación de una aplicación con Kinvey

ß Creación de una aplicación con Parse

Diseño y montaje de la interfaz de usuario


En este tutorial se utiliza una TListView como componente de interfaz de usuario para mostrar la información recuperada de la nube.

Para configurar la interfaz de usuario para esta muestra tutorial siga estos pasos:

1. Crear un espacio en blanco Aplicación Multi-Device , seleccionando:

ß por Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blank


Solicitud

ß por C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blank


Solicitud

2. Caída de una TLabel en el formulario y establezca las siguientes propiedades en el Inspector de Objetos :

ß Selecciona el Texto propiedad a Lista de la compra.

ß Selecciona el Alinear propiedad a Parte superior.

ß Selecciona el HorzAlign bienes en TextSettings a Centrar.

3. Caída de una TButton sobre el TLabel y establezca las siguientes propiedades en el Inspector de Objetos:

ß Selecciona el Alinear propiedad a Derecha.

ß Selecciona el StyleLookup propiedad a refreshtoolbutton.

ß Selecciona el Nombre propiedad a Botón Actualización.

4. Caída de una TEdit en el formulario y establezca las siguientes propiedades en el Inspector de Objetos:

ß Selecciona el Alinear propiedad a Parte superior.

5. Caída de una TButton sobre el TEdit y establezca las siguientes propiedades en el Inspector de Objetos:

Embarcadero Technologies 226


ß Selecciona el Alinear propiedad a Derecha.

ß Selecciona el Texto propiedad a Añadir artículo.

ß Selecciona el Nombre propiedad a AddItemButton.

6. Caída de una TListView en el formulario y establezca las siguientes propiedades en el Inspector de Objetos:

ß Selecciona el Alinear propiedad a Cliente.

Adición de los componentes Backend


En este tutorial se utiliza el TBackendStorage componente de servicio para gestionar el almacenamiento de back-end con el fin de crear,
recuperar, actualizar y eliminar objetos. Esta aplicación también utiliza uno de los componentes de proveedor Baas:

o TKinveyProvider es el Kinvey componente proveedor de BaaS que contiene la información


acerca de la Kinvey podría servicio de conexión.

o TParseProvider es el Analizar gramaticalmente componente proveedor de BaaS que contiene la información


acerca de la Parse podría servicio de conexión. Continúe

con los siguientes pasos:

1. Caída de uno de los dos componentes de proveedor Baas en el formulario TKinveyProvider o


TParseProvider dependiendo del proveedor de back-end que utiliza en su aplicación.

2. Caída de una TBackendStorage en el formulario, y en el Inspector de Objetos selecciona el Proveedor


propiedad para el componente proveedor de BaaS que está utilizando.

3. Dependiendo del proveedor de BaaS que está utilizando:

ß Selecciona el KinveyProvider1 componente y en el Inspector de Objetos selecciona el


AppKey , App secreta y MasterSecret a los valores proporcionados por Kinvey.

ß Selecciona el ParseProvider1 componente y en el Inspector de Objetos selecciona el


ID de aplicación , Llave maestra y RestApiKey a los valores proporcionados por Analizar gramaticalmente.

Embarcadero Technologies 227


Creación y almacenamiento de objetos

En la aplicación, cuando se escribe algo en el TEdit y haga clic Añadir artículo, el contenido escrito en el
TEdit se almacena en la nube, en el Kinvey o Analizar gramaticalmente proveedor de BaaS. Para crear el objeto, utilice el Crear objeto método.

1. Haga doble clic en el AddItemButton y escriba el código siguiente:

Delphi:

procedimiento TForm1.AddItemButtonClick (Sender: TObject); var LJSONObject:

TJSONObject;
LEntity: TBackendEntityValue; empezar si

Edit1.Text = '' entonces


ShowMessage ( 'Por favor, introduzca un elemento.') Else

empezar
LJSONObject: = TJSONObject.Create; LJSONObject.AddPair ( 'item',
Edit1.Text);
BackendStorage1.Storage.CreateObject ( 'ShoppingList', LJSONObject, LEntity);

Embarcadero Technologies 228


ShowMessage ( 'Nuevo elemento de creación:' + Edit1.Text);
LJSONObject.Free; Edit1.Text: = ''; terminar extremo;

C ++:

vacío __fastcall TForm1 :: AddItemButtonClick (TObject * Remitente) {

TJSONObject * LJSONObject;

TBackendEntityValue LEntity; si (Edit1-> Texto

== "") {
ShowMessage ( "Por favor, introduzca un elemento."); } Else {

LJSONObject = new TJSONObject;


LJSONObject-> AddPair ( "elemento", Edit1-> texto);
BackendStorage1-> Almacenamiento-> CreateObject ( "ShoppingList", LJSONObject,
LEntity);
ShowMessage ( "Nuevo elemento de creación:" + Edit1-> texto); LJSONObject->
Libre (); eliminar LJSONObject; Edit1-> Text = ""; }

Eliminar objetos
Para permitir a los usuarios eliminar cualquier elemento de la lista. En el TListView componente, si usted pase su dedo hacia la izquierda o hacia la
derecha sobre uno de los elementos de la TListView, un Borrar botón se muestra en la parte derecha. Para eliminar el elemento cuando el Borrar se
hace clic en el botón de dicho elemento, haga lo siguiente:

1. Selecciona el TListView y en el Eventos pestaña de la Inspector de Objetos , Haga doble clic en el


OnDeletingItem evento. Este evento se produce antes de que se elimina el elemento. Agregue el código siguiente:

Delphi:

procedimiento TForm1.ListView1DeletingItem (Sender: TObject; AIndex: Integer; var ACanDelete: Boolean); var LQuery: string;

LJSONArray: TJSONArray;
LEntities: tarray <TBackendEntityValue>; empezar

ACanDelete: = false;
LJSONArray: = TJSONArray.Create; tratar

Embarcadero Technologies 229


LQuery: = Format ( 'query = { "elemento": "% s"}', [(Sender como TListView) .Items [AIndex] .Texto]); // 'query = {
"elemento": "% s"}' en Kinvey y 'donde = { "elemento": "% s"}' en Parse

BackendStorage1.Storage.QueryObjects ( 'ShoppingList', [LQuery], LJSONArray, LEntities);

si (Longitud (LEntities)> 0) y
BackendStorage1.Storage.DeleteObject ( 'ShoppingList', LEntities [0] .ObjectID) entonces
ACanDelete: = true demás

ShowMessage ( 'El artículo no se ha podido eliminar.'); finalmente

LJSONArray.Free; fin; fin;

Nota: La línea LQuery: = Format ( 'query = { "elemento": "% s"}', [(Sender como TListView) .Items [AIndex] .Texto]); es para Kinvey. En Parse, la
palabra consulta debe cambiar para dónde por lo que si usted está usando Analizar como proveedor Baas, en esta línea debe ser LQuery: = Format (
'donde = { "elemento": "% s"}', [(Sender como TListView) .Items [AIndex] .Texto]); .

C ++:

anulará __fastcall TForm1 :: ListView1DeletingItem (TObject * Sender, int AIndex, bool y ACanDelete) {

System :: UnicodeString LQuery [1]; DynamicArray <TBackendEntityValue> LEntities; ACanDelete = false;


TJSONArray * LJSONArray; LJSONArray = new TJSONArray; tratar { TListView * list = reinterpret_cast
<TListView *> (Sender);

LQuery [0] = ( "query = {\" punto \ ": \" "+ (listView1-> los items
> operador [] (AIndex) -> texto) + "\"} "); // "query = {\" punto \": \ "" en Kinvey y "dónde = {\" punto \ ": \"" en Analizar
gramaticalmente
BackendStorage1-> Almacenamiento-> QueryObjects ( "ShoppingList", LQuery, 0,
LJSONArray, LEntities);
if (((LEntities.Length)> 0) y BackendStorage1-> Almacenamiento-
> DeleteObject ( "ShoppingList", LEntities [0] .ObjectID)) {
ACanDelete = true; } Else { ShowMessage ( "artículo no se pudo eliminar."); }} __finalmente

LJSONArray-> Libre (); }}

Nota: La línea LQuery [0] = ( "query = {\" punto \ ": \" "+ (lista-> Productos-> Artículo [AIndex] -> texto) +" \ "}"); es para Kinvey. En Parse, la palabra consulta
debe cambiar para dónde por lo que si usted está usando Analizar como proveedor Baas, en esta línea debe ser LQuery [0] = artículo ( "donde = {\" \
": \" "+ (lista-> Productos-> Artículo [AIndex] -
> Texto) + "\"} ") ;.

Embarcadero Technologies 230


Recuperando objetos
Para actualizar todos los contenidos en el TListView para reflejar cualquier cambio posible, puede recuperar los objetos con QueryObjects ,
Desactive la vista de lista y añadir todos los elementos que se han recuperado del almacenamiento de back-end.

1. Para añadir un nuevo método para actualizar la lista:

Delphi:

ß Abre el Explorador de clase ventana seleccionando Ver> Explorador de Clase .

ß En el Visor de clase panel, haga clic TForm1 debajo Unidad 1 y seleccione Agregar método .

ß Escribir Actualizar lista en “Nombre de método”, seleccione Procedimiento en “Método


escribir" y haga clic DE ACUERDO.

C ++:

ß Abre el Explorador de clase ventana seleccionando Ver> Explorador de Clase C ++ .

ß En el Lista de tipos panel (panel izquierdo), ampliar su proyecto, haga clic TForm1 bajo y seleccione Agregar
método .

ß Escribir Actualizar lista bajo el nombre", vacío en “Tipo de retorno”, ajuste “visibilidad” a
público y haga clic Añadir.

Embarcadero Technologies 231


2. Agregue el código siguiente para el nuevo método:

Delphi:

procedimiento TForm1.RefreshList; var LJSONArray:

TJSONArray;
Litém: TListViewItem; I: Integer;
empezar

LJSONArray: = TJSONArray.Create; tratar BackendStorage1.Storage.QueryObjects ( 'ShoppingList', [], LJSONArray);

ListView1.ClearItems;
porque yo: = 0 a 1 LJSONArray.Count-do begin

Litém: = ListView1.Items.Add;
LItem.Text: = (LJSonArray.Items [I] .GetValue <string> ( 'item')); fin; finalmente

LJSONArray.Free; fin; fin;

C ++:

TForm1 vacío :: RefreshList () {

Cadena LQuery [1]; TJSONArray *


LJSONArray; TListViewItem * litem;
TJSONObject * LJSONObject; ItemText
cadena;

Embarcadero Technologies 232


int i;
LJSONArray = new TJSONArray; tratar { BackendStorage1-> Almacenamiento-> QueryObjects ( "ShoppingList",

LQuery,
0, LJSONArray); ListView1-> Productos-> Borrar ();

for (i = 0; i <LJSONArray-> count; i ++) {


Litém = ListView1-> Productos-> Añadir (); LJSONObject = dynamic_cast <TJSONObject
*> (LJSONArray-
> Artículos [i]);
ItemText = (LJSONObject-> Valores [ "elemento"] -> Valor ()); LItem-> Text =
itemText; }} __finalmente {

LJSONArray-> Libre (); }}

3. Haga doble clic en el botón Actualización y el siguiente código por lo que este botón llama al
Actualizar lista método:

Delphi:

procedimiento TForm1.RefreshButtonClick (Sender: TObject); empezar

Actualizar lista; fin;

C ++:

vacío __fastcall TForm1 :: RefreshButtonClick (TObject * Remitente) {

Actualizar lista(); }

4. Para actualizar la lista una vez que se agrega un elemento, haga doble clic en el AddItemButton para acceder a la
Código de la Al hacer clic evento añadió antes y agregue el código siguiente como la última frase de la
sentencia else:

Delphi:

Actualizar lista;

C ++:

Actualizar lista();

Embarcadero Technologies 233


5. Para actualizar la lista después de eliminar un elemento, seleccione el TListView y en el Eventos pestaña de
el Inspector de Objetos , Haga doble clic en el OnDeleteItem evento. Este evento se produce después de que se elimina el elemento.
Agregue el código siguiente:

Delphi:

procedimiento TForm1.ListView1DeleteItem (Sender: TObject; AIndex: entero); empezar

Actualizar lista; fin;

C ++:

anulará __fastcall TForm1 :: ListView1DeleteItem (TObject * Sender, int AIndex) {

Actualizar lista(); }

Ejecución de la aplicación
Para ejecutar la aplicación, siga estos pasos:

1. En el Gerente de proyecto , Seleccionar la plataforma de destino en la que desea ejecutar la aplicación.

Nota: Esta aplicación utiliza la deslizar-a-eliminar característica que se apoya en aplicaciones móviles (iOS y Android), así como
aplicaciones de escritorio (Windows y OS X) cuando la entrada táctil está disponible.

2. Seleccionar Ejecutar> Ejecutar o Ejecutar> Ejecutar sin depurar .

3. Una vez que añadir o eliminar elementos en su aplicación, puede ir a la consola Kinvey o
a Analizar su tablero de instrumentos para ver los cambios también desde la nube.

Embarcadero Technologies 234


iOS Androide

iPod Nexus 7

Ver también

o BaaS general

o Introducción a Kinvey y Parse

o Gestión de usuarios Baas

o Usando BaaS de backend de almacenamiento

o Móviles Tutorial: Uso de notificaciones remotas (iOS y Android)

Ejemplos de código

o BaaS ToDo Muestra

Embarcadero Technologies 235


Tutorial móvil: Usando FireDAC y SQLite (iOS y
Android)

Antes de comenzar este tutorial, usted debe leer y realizar la siguiente sesión de tutoría:

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

En este tutorial se describen los pasos básicos para utilizar SQLite como un almacenamiento de datos local en el dispositivo móvil a través
del marco FireDAC.

iOS Androide

Usando FireDAC para conectarse a la base de datos

FireDAC es un conjunto único de Universal Data Access componentes para el desarrollo de aplicaciones de bases de datos
multiplataforma para Delphi y C ++ Builder. Con su potente arquitectura común, FireDAC permite el acceso directo de alta
velocidad nativa de Delphi a InterBase, SQLite, MySQL,

Embarcadero Technologies 236


SQL Server, Oracle, PostgreSQL, IBM DB2, SQL Anywhere, Access, Firebird, Informix, y mucho más.

o Para las plataformas móviles, FireDAC soportes InterBase Togo tanto como SQLite. Estas
productos de base de datos pueden funcionar en dispositivos iOS y Android.

o Para otras bases de datos, como Oracle, es necesario tener al menos una biblioteca de cliente. En
plataformas Windows, la biblioteca cliente se proporciona como un archivo DLL conectarse. Por lo tanto, es necesario desarrollar
aplicaciones utilizando tecnologías de nivel medio como DataSnap REST para conectarse a estos productos de base de datos desde
un dispositivo móvil.

Otro tutorial explica cómo conectarse a la base de datos de Enterprise sin necesidad de utilizar una biblioteca de cliente en un
dispositivo móvil; ver Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y Android) .

La creación de la base de datos utilizando el framework FireDAC

En primer lugar, es necesario crear un archivo de base de datos SQLite en su plataforma de desarrollo de Windows. Utilice los siguientes pasos, para
que pueda utilizar el Diseñador de formularios para diseñar la interfaz de usuario de su aplicación móvil.

Nota: En el Diseñador de formularios , Activar el Dominar ver para este tutorial.

1. Para crear una Aplicación Multi-Device , Seleccione:

ß Para Delphi: Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Blank


Solicitud

ß Para C ++: Archivo> Nueva> Aplicación Multi-Device - C ++ Builder> Blank


Solicitud

2. Sobre el paleta de herramientas , Haga doble clic en el TFDConnection componente.

3. Clic derecho en el TFDConnection componente y seleccione Editor de conexión.

4. En el Editor de conexión FireDAC, ajustar los siguientes parámetros de la TFDConnection :

ß Selecciona el identificación del conductor propiedad a SQLite.

ß Selecciona el Base de datos parámetro a:

C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ shoplist.s3db


(Ubicación de la base de datos) y haga clic Abierto en el cuadro de

diálogo Archivo Abrir.

Embarcadero Technologies 237


Nota: Es posible ajustar el anterior Base de datos incluso si el parámetro shoplist.s3db no existe, RAD Studio crea automáticamente. (Para
mostrar Employees.s3db u otro *. s3db archivos en el cuadro de diálogo Abrir, establecen el Todos los archivos (*.*) opción.)

ß Selecciona el LockingMode parámetro para normal.

ß Haga clic en el Prueba el botón para comprobar la conexión.

ß Hacer clic DE ACUERDO para cerrar el Editor de conexión.

5. En el Inspector de Objetos , Establezca las siguientes propiedades de TFDConnection:

ß Selecciona el LoginPrompt propiedad a Falso, de manera que el usuario no se le pida una


iniciar sesión.

ß Selecciona el Conectado propiedad a Cierto.

6. Sobre el paleta de herramientas , Haga doble clic en el TFDQuery componente.

7. En el Inspector de Objetos , Establezca las siguientes propiedades de TFDQuery:

ß Selecciona el Nombre propiedad a FDQueryCreateTable.

ß Establecer la propiedad SQL de la siguiente manera:

CREAR TABLA SI NO EXISTE Artículo (ShopItem TEXT NOT NULL)

8. Clic derecho en el FDQueryCreateTable y elige Ejecutar.

Embarcadero Technologies 238


Diseño y configurar la interfaz de usuario

componentes de interfaz de usuario visibles se cargan en el diseñador

Este tutorial usa una TListView componente como el elemento de interfaz de usuario.

Para configurar un componente ListView y otros elementos de interfaz de usuario, usar los siguientes pasos:

1. Caída de una TToolBar en forma.

2. Caída de una TButton en el componente de barra de herramientas y establecer las siguientes propiedades en el
Inspector de Objetos :

ß Selecciona el Nombre propiedad a ButtonAdd.

ß Selecciona el StyleLookup a addtoolbutton.

ß Selecciona el Alinear a Derecha.

3. Caída de una TButton en el componente de barra de herramientas y establecer las siguientes propiedades en el
Inspector de Objetos :

ß Selecciona el Nombre propiedad a ButtonDelete.

ß Selecciona el StyleLookup a deletetoolbutton.

Embarcadero Technologies 239


ß Selecciona el Alinear a Izquierda.

ß Selecciona el Texto a Borrar.

ß Selecciona el Visible propiedad a Falso.

4. Caída de una TLabel en el componente de barra de herramientas y establecer las siguientes propiedades en el Objeto
Inspector :

ß Selecciona el Alinear a Cliente.

ß Selecciona el StyleLookup a toollabel.

ß Selecciona el Texto a Lista de la compra.

ß Ampliar la TTextSettings nodo y establecer el HorzAlign propiedad a Centrar.

5. Caída de una TListView componente en el formulario y establezca las siguientes propiedades en el Objeto
Inspector :

ß Selecciona el Alinear propiedad a Cliente, de modo que el componente ListView utiliza el entero
formar.

Uso del Asistente LiveBindings


En este tutorial se utiliza el Asistente LiveBindings añadir los componentes LiveBindings ( TBindSourceDB
, TBindingsList ), y el TFDQuery componente.

Añadir los componentes LiveBinding

1. Seleccionar Ver> LiveBindings diseñador y el LiveBindings diseñador se abre.

2. Seleccionar Asistente LiveBindings .

3. Seleccionar Crear una fuente de datos tarea vinculante.

4. Haga clic en el Siguiente botón.

5. Seleccionar FireDAC nombre de la clase.

Embarcadero Technologies 240


6. Haga clic en el Siguiente botón.

7. Cambiar el Tipo de comando a Consulta.

8. Selecciona el Texto de comandos propiedad a seleccione ShopItem del artículo.

9. Haga clic en el Comando de prueba botón.

10. Haga clic en el Siguiente botón.

11. Haga clic en el Terminar botón. En este punto, TBindSourceDB y TFDQuery componentes se añadieron a su

formulario.

Conexión a los Datos

1. Vuelva a abrir el Asistente LiveBindings .

2. Seleccionar Enlazar un control con un campo tarea vinculante.

Embarcadero Technologies 241


3. Haga clic en el Siguiente botón.

4. Selecciona el control existente lengüeta.

5. Selecciona el ListView1 componente.

6. Haga clic en el Siguiente botón.

7. Seleccionar BindSourceDB1.

8. Haga clic en el Siguiente botón.

9. Seleccionar ShopItem Nombre del campo.

Embarcadero Technologies 242


10. Haga clic en el Siguiente botón.

11. Haga clic en el Terminar botón para cerrar el asistente.

Nota: Estos últimos pasos no son obligatorios para este tutorial, ya que sólo hay un campo en
BindSourceDB1. Estos pasos son útiles para enlazar con el valor seleccionado si estamos manejando varios campos de una base de
datos.

Viendo ShopItem en el ListView

El siguiente paso muestra el texto de ShopItem en el TListView componente.

1. En el LiveBindings diseñador seleccionar ShopItem en el BindSourceDB1 componente y arrastre ShopItem a Item.Text


en ListView1.

Embarcadero Technologies 243


Después de estos pasos se conecta la interfaz de usuario de la aplicación con los datos de una base de datos SQLite. Si ha utilizado una tabla con
los datos existentes para este tutorial, ahora debería ver los datos actuales de diseñador de formularios.

Crear el controlador de eventos para que el botón Borrar visible cuando el


usuario selecciona un elemento de la lista
los Visible propiedad para el Borrar botón se establece en Falso. Por lo tanto, por defecto, el usuario final no ve este botón. Puede que
sea visible cuando el usuario selecciona un elemento de la lista, de la siguiente manera:

o Seleccionar ListView1 y definir el siguiente controlador de eventos para el OnItemClick evento.

Delphi:

procedimiento TForm1.ListView1ItemClick (Sender const: TObject;


const AItem: TListViewItem); empezar

ButtonDelete.Visible: = ListView1.Selected <> nil; fin;

o por C ++:

anulará __fastcall TForm1 :: ListView1ItemClick (const TObject * Sender,


const * TListViewItem AItem) {
ButtonDelete-> Visible = (ListView1-> seleccionada! = Null); }

Embarcadero Technologies 244


Crear el controlador de eventos para el botón Agregar para añadir una entrada en
la Lista

conexiones de bases de datos también se configuran

El siguiente paso es añadir una característica a esta aplicación para añadir un elemento a la lista de la compra.

1. Caída de una TFDQuery componente en el formulario.

2. Establecer las siguientes propiedades en el Inspector de Objetos :

ß Selecciona el Nombre propiedad a FDQueryInsert.

ß Establecer la propiedad SQL de la siguiente manera:

INSERT INTO PUNTO (ShopItem) VALORES (: ShopItem)

ß Selecciona el Expandir (...) botón de la Parámetros propiedad.

ß Selecciona el ShopItem de parámetros y conjunto Tipo de datos a ftString:

Embarcadero Technologies 245


3. En el estructura Ver , Haga clic en el ButtonAdd del componente y seleccione Control> Traer al frente . Esto hace que el
botón en la parte delantera visual de la forma activa.

o por Delphi:

o Declarará terminada la fase siguiente en la sección privada:

privado
procedimiento OnInputQuery_Close (const aResult: TModalResult; aValores const: array de cadena);

o Añadir el siguiente procedimiento:

procedimiento TForm1.OnInputQuery_Close (const aResult: TModalResult; aValores const: array de cadena); var TaskName: String; empezar

TaskName: = String.Empty; Si aResult <>


Mrok entonces
Salida;
TaskName: = aValores [0]; tratar si

(TaskName.Trim <> '')


luego
comenzar
. FDQueryInsert.ParamByName ( 'ShopItem') AsString: = TaskName; FDQueryInsert.ExecSQL ();
FDQuery1.Close (); FDQuery1.Open;

ButtonDelete.Visible: = ListView1.Selected <> nil; fin;

Embarcadero Technologies 246


excepto
en el correo: Excepción do
begin
ShowMessage (e.Message); fin; fin; fin;

o En el Diseñador de formularios, haga doble clic en el ButtonAdd componente. Agregue el código siguiente
a este controlador de eventos:

procedimiento TForm1.ButtonAddClick (Sender: TObject); empezar

TDialogServiceAsync.InputQuery ( 'Enter nuevo elemento', [ 'nombre'], [ ''], Self.OnInputQuery_Close) final;

o por C ++:

Para replicar la misma funcionalidad en C ++, se requieren pasos adicionales.

o Añadir la siguiente definición después de la definición TForm1 (en el archivo .h de su unidad):

typedef void __fastcall (__ cierre TInputCloseQueryProcEvent *)


(Const Sistema :: :: Uitypes TModalResult aResult,
Sistema :: UnicodeString const * aValores, const int AValues_High);

o Añadir la siguiente definición de clase (en el archivo .h de su unidad, después de que el previamente definido
tipo):

clase InputQueryMethod: TCppInterfacedObject público <TInputCloseQueryProc> {private:

Evento TInputCloseQueryProcEvent; público:

InputQueryMethod (TInputCloseQueryProcEvent _Event) {


Evento = _Event; }

vacío __fastcall Invoke (const Sistema :: :: Uitypes TModalResult aResult,


Sistema :: UnicodeString const * aValores, const int) {AValues_High eventos (aResult, aValores,
AValues_High); }};

o Agregue la siguiente declaración de conformidad con la sección privada de la forma (en el archivo .h de su
unidad):

privadas: // declaraciones de los usuarios

Embarcadero Technologies 247


anulará __fastcall OnInputQuery_Close
(Const Sistema :: :: Uitypes TModalResult aResult, Sistema :: UnicodeString const * aValores, const int
AValues_High);

o Agregue el código siguiente (en el archivo .cpp de su unidad):

anulará __fastcall TForm1 :: OnInputQuery_Close (const Sistema :: :: Uitypes TModalResult aResult, Sistema :: UnicodeString const *

aValores, const int AValues_High) {


TaskName cadena; TaskName = "";
si (aResult! = Mrok)

regreso;
TaskName = aValores [0]; tratar {

if (! (Trim (TaskName) == "")) {


FDQueryInsert-> ParamByName ( "ShopItem") -> AsString = TaskName; FDQueryInsert-> ExecSQL ();
FDQuery1-> Close (); FDQuery1-> Open ();

ButtonDelete-> Visible = (ListView1-> seleccionada! = Null); }} catch (Exception & e) {

ShowMessage (e.Message); }}

o En el Diseñador de formularios, haga doble clic en el ButtonAdd componente. Agregue el código siguiente
a este controlador de eventos:

vacío __fastcall TForm1 :: ButtonAddClick (TObject * Remitente) {


Cadena caption = "Introducir Nuevo elemento"; Prompts String
[1]; Indicaciones [0] = "Nombre:"; Valores predeterminados
String [1]; Valores predeterminados [0] = "";

_di_TInputCloseQueryProc Met = new InputQueryMethod (y OnInputQuery_Close); TDialogServiceAsync :: InputQuery (

subtítulo, Avisos, 0, valores predeterminados, 0, (TInputCloseQueryProc *) Met); }

los InputQuery función muestra un cuadro de diálogo preguntando al usuario final para introducir texto. Esta función devuelve Cierto cuando el usuario
selecciona DE ACUERDO, por lo que se puede agregar datos a la base de datos sólo cuando el usuario selecciona DE ACUERDO y el texto contiene algunos
datos.

Embarcadero Technologies 248


iOS Androide

Crear el controlador de eventos para el botón Eliminar para eliminar una


entrada de la Lista
El siguiente paso es añadir una característica a esta solicitud para eliminar un elemento de la lista de la compra:

1. Caída de una TFDQuery componente en el formulario.

2. Establecer las siguientes propiedades en el Inspector de Objetos :

ß Selecciona el Nombre propiedad a FDQueryDelete.

ß Establecer la propiedad SQL de la siguiente manera:

eliminar del artículo donde ShopItem =: ShopItem

ß Selecciona el Expandir (...) botón de la Parámetros propiedad.

ß Selecciona el ShopItem de parámetros y conjunto Tipo de datos a ftString.

3. En el estructura Ver , Haga clic en el ButtonDelete del componente y seleccione Control> Traer al frente . Esto hace
que el botón en la parte delantera visual de la forma activa.

4. En el Diseñador de formularios, haga doble clic en el ButtonDelete componente. Agregue el código siguiente a este controlador de
eventos.

Embarcadero Technologies 249


o por Delphi:

procedimiento TForm1.ButtonDeleteClick (Sender: TObject); var TaskName: String;

empezar

TaskName: = TListViewItem (ListView1.Selected) .Texto; tratar . FDQueryDelete.ParamByName (

'ShopItem') AsString: = TaskName;


FDQueryDelete.ExecSQL ();
FDQuery1.Close; FDQuery1.Open;

ButtonDelete.Visible: = ListView1.Selected <> nil; excepto

en el correo: Excepción do
begin
ShowMessage (e.Message); fin; fin; fin;

o por C ++:

vacío __fastcall TForm1 :: ButtonDeleteClick (TObject * Remitente) {


Cadena TaskName = ((TListViewItem *) (ListView1-> Seleccionado)) -> texto; tratar { FDQueryDelete->

ParamByName ( "ShopItem") -> AsString = TaskName;


FDQueryDelete-> ExecSQL (); FDQuery1->
Close (); FDQuery1-> Open ();

ButtonDelete-> Visible = (ListView1-> seleccionada! = Null); } catch (Exception & e) {

ShowMessage (e.Message); }}

Preparar la aplicación de tiempo de ejecución


FireDAC tiene una arquitectura de múltiples capas de acoplamiento flexible, donde las capas proporcionan servicios. Una API de servicio se
define como una interfaz COM que otras capas pueden solicitar el uso de la fábrica de interfaz.

Para que funcione correctamente FireDAC, debe vincular la aplicación de la IFDGUIxWaitCursor


y IFDPhysDriver interfaces para su aplicación. Para ello, soltar el TFDGUIxWaitCursor y TFDPhysSQLiteDriverLink componentes

en el formulario.

Configuración de la implementación de la base de datos para móviles

Hasta este punto, usted ha usado SQLite en el escritorio. Esto significa que la base de datos real se encuentra en la unidad de
disco duro local (por ejemplo,

Embarcadero Technologies 250


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ shoplist.s3db). En el dispositivo móvil, las aplicaciones son de
arena en caja, y por lo general sólo se pueden leer y escribir datos que se encuentra en el Documentos carpeta (por dispositivo IOS) y interno de
almacenamiento (por dispositivo Android) debajo de la carpeta de la aplicación.

Para conectarse a una base de datos local en el móvil, es necesario realizar las siguientes acciones:

o Implementar la base de datos al dispositivo móvil.

o Compruebe la configuración (para conectarse a la base de datos de archivo) en un archivo local en el marco del
Documentos carpeta (por dispositivo IOS) o interno almacenamiento (para el dispositivo Android).

Agregar y configurar su base de datos de archivos en el gestor de despliegue

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. Puede agregar la base de datos a su proyecto con uno de los dos métodos siguientes:

ß Haga clic en el nombre del proyecto en el Gerente de proyecto y seleccione Añadir… desde el
menú contextual (o Proyecto> Agregar al proyecto ) para mostrar la Añadir al proyecto caja de diálogo. Vaya a la
ubicación de base de datos
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data,
seleccione la base de datos shoplist.s3db y haga clic Abierto.

ß Vaya a la ubicación de base de datos


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data y arrastrar y soltar la base de datos shoplist.s3db
al proyecto en el Administrador de proyectos. Hacer clic Sí para confirmar que desea agregar el archivo
a su proyecto.

2. Después de añadir el archivo de base de datos, la archivos destacados escaparates, haga clic Cancelar a
cierralo.

3. Abre el Gestor de despliegue seleccionando Proyecto> Implementación .

4. Seleccionar configuración de depuración - iOS Device - plataforma de 32 bits, configuración de depuración -


iOS Device - plataforma de 64 bit o configuración de depuración - plataforma Android de la lista desplegable de las
plataformas de destino en la parte superior del gestor de despliegue y ver que la base de datos shoplist.s3db se ha
agregado a las plataformas.

5. Ver cómo el Ruta remota de shoplist.s3db se ha establecido para iOS y Android


plataformas:

ß Ruta remota en la plataforma de dispositivos iOS: Inicio \ documentos \

ß Ruta remota en la plataforma Android: activos \ \ internos

Embarcadero Technologies 251


Como se acaba de configurar, al ejecutar la aplicación en el dispositivo móvil, el archivo de base de datos (shoplist.s3db) está listo para
ser desplegado en el Documentos carpeta (para la plataforma iOS) o interno
almacenamiento (para la plataforma Android) en la zona del recinto de seguridad de la aplicación de dispositivos múltiples.

Modificar su código para conectarse a un archivo de base de datos local en el


móvil

Las características básicas de esta aplicación están implementadas. Siguiendo los pasos de este tutorial, 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 copiarlo en el

dispositivo móvil o crear sobre la marcha. Puede crear una base de datos SQLite y tabla con los siguientes pasos:

Especificación de la ubicación de la base de datos SQLite en el dispositivo móvil

1. En el Diseñador de formularios, seleccione la FDConnection1 componente.

2. En el Inspector de Objetos , Haga doble clic en el BeforeConnect evento.

3. Agregue el código siguiente a este controlador de eventos:

o por Delphi:

procedimiento TForm1.FDConnection1BeforeConnect (Sender: TObject); empezar

{$ Si está definido (IOS) o definido (Android)}


FDConnection1.Params.Values ​[ 'Database']: =
TPath.Combine (TPath.GetDocumentsPath, 'shoplist.s3db'); {$ ENDIF} end;

los TPath expediente se declara en System.IOUtils unidad, por lo que es necesario añadir System.IOUtils en la cláusula usos de su unidad.

aplicación {$ R * .fmx}

utiliza System.IOUtils;

o por C ++:

vacío __fastcall TForm1 :: FDConnection1BeforeConnect (TObject * Remitente) {


# si está definido (_PLAT_IOS) || definido (_PLAT_ANDROID)
FDConnection1-> params-> Valores [ "Base de datos"] =
Sistema :: :: Ioutils TPath :: Combine (Sistema :: Ioutils :: :: TPath GetDocumentsPath (), "shoplist.s3db");

# terminara si }

Embarcadero Technologies 252


Necesitas agregar # incluir <System.IOUtils.hpp>.

Creación de una tabla Si no existe ninguno

Con SQLite puede crear una tabla cuando no existe una tabla, mediante el uso de la CREAR TABLA SI NO EXISTE declaración. Puede
crear una tabla después de que el componente TFDConnection se conecta a la base de datos y antes de que el componente
TFDQuery conecta a la mesa. Utilice los siguientes pasos:

1. En el Diseñador de formularios, seleccione la FDConnection1 componente.

2. En el Inspector de Objetos , Haga doble clic en el AfterConnect evento.

3. Agregue el código siguiente a este controlador de eventos:

o por Delphi:

procedimiento TForm1.FDConnection1AfterConnect (Sender: TObject); empezar

FDConnection1.ExecSQL ( 'CREATE TABLE SI NO EXISTE Artículo (ShopItem TEXT NOT NULL)'); fin;

o por C ++:

vacío __fastcall TForm1 :: FDConnection1AfterConnect (TObject * Remitente) {


FDConnection1-> ExecSQL ( "CREATE TABLE SI NO EXISTE Artículo (ShopItem TEXT NOT NULL)"); }

Ejecución de la aplicación en un simulador o en un dispositivo móvil

Ahora su aplicación está lista para funcionar con un simulador o dispositivo móvil conectado.
Para ejecutar la aplicación

Embarcadero Technologies 253


1 en Gerente de proyecto , Selecciona la plataforma de destino.

2. Elegir cualquiera de los siguientes comandos:

ß Ejecutar> Ejecutar

ß Ejecutar> Ejecutar sin depurar

Embarcadero Technologies 254


iOS Androide

Nota: Si usted tiene un problema con el funcionamiento de la aplicación, siga los pasos que se indican en
Solución de problemas .

Ver también

o Tutorial móvil: El uso de InterBase Togo con FireDAC (iOS y Android)

o Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y
Androide)

o SQLite en RAD Studio

o Desarrollo de aplicaciones móviles Android

o Desarrollo de aplicaciones móviles iOS

Embarcadero Technologies 255


Tutorial móvil: El uso de InterBase Togo con FireDAC
(iOS y Android)

Antes de comenzar este tutorial, usted debe leer y realizar la siguiente sesión de tutoría:

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

Propina: Para seguir este tutorial, se necesita una licencia para IBToGo o IBLite:

o Si ha adquirido una de las siguientes versiones de RAD Studio, usted tiene


recibida en el correo electrónico una clave para un desarrollo ilimitado y la licencia de despliegue para IBLite:

ß RAD Studio Tokio profesionales o higherAll ediciones

ß Delphi Tokio Profesional o superior con Mobile

o Si usted es un usuario de prueba, la instalación incluye una licencia de prueba para IBToGo.
Puede probar InterBase en iOS y Android mediante la selección de su licencia de prueba durante la fase de
despliegue, tal como se describe en este tutorial. Las licencias de prueba se instalan con el producto de
prueba, en
C: \ Users \ Public \ Documents \ Embarcadero \ InterBase \ Redist \ Inte rBaseXE7.

Siga los pasos a IBLite e implementación de prueba IBToGo Licencias obtener e instalar el archivo de
licencia.

Nota: En los dispositivos Android, aplicaciones InterBase ToGo requieren específica permisos a ajustar y, específicamente:

o Leer almacenamiento externo ( la base de datos se coloca en la memoria externa)

o Escribir de almacenamiento externo ( la base de datos se coloca en la memoria externa)

o internet ( es necesario conectar con un servidor remoto) En este tutorial se describen los pasos básicos para navegar por los

datos gestionados por InterBase Togo en sus dispositivos iOS y Android a través del marco FireDAC.

Embarcadero Technologies 256


iOS Androide

Nota: Puede utilizar FireDAC, dbexpress y Interbase expresos componentes (IBX) para construir
interbase Togo aplicaciones. Para una discusión detallada sobre el uso de Interbase expreso componentes en una
aplicación Delphi, lea la Introducción a InterBase expreso artículo. Para este tutorial, vamos a conectar a interbase Togo utilizando
FireDAC.

Usando FireDAC para conectarse a la base de datos

FireDAC es un conjunto único de Universal Data Access componentes para el desarrollo de aplicaciones de bases de datos
multiplataforma para Delphi y C ++ Builder. Con su potente arquitectura común, FireDAC permite el acceso directo de alta
velocidad nativa de Delphi a InterBase, SQLite, MySQL, SQL Server, Oracle, PostgreSQL, IBM DB2, SQL Anywhere, Access,
Firebird, Informix, y mucho más.

o Para las plataformas móviles, FireDAC soportes InterBase Togo tanto como SQLite. Estas
productos de base de datos pueden funcionar en dispositivos iOS y Android.

o Para otras bases de datos, como Oracle, es necesario tener al menos una biblioteca de cliente. En
plataformas Windows, la biblioteca cliente se proporciona como un archivo DLL conectarse. Por lo tanto, es necesario desarrollar
aplicaciones utilizando tecnologías de nivel medio como DataSnap para conectarse a estos productos de base de datos desde un
dispositivo móvil.

Embarcadero Technologies 257


Otro tutorial explica cómo conectarse a la base de datos de Enterprise sin necesidad de utilizar una biblioteca de cliente en un
dispositivo móvil; ver Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y Android) .

Diseño y configurar la interfaz de usuario


Este tutorial usa TListView y TPanel componentes como los elementos de interfaz de usuario.

Para configurar un ListView y un componente de panel, utilice los pasos siguientes:

1. Para crear una HD multi-dispositivo de aplicación , Seleccione una de las siguientes:

ß Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Aplicación en blanco

ß Archivo> Aplicación Nueva> Multi-Device - C ++ Builder> Aplicación en blanco

2. Caída de una TListView componente en el formulario.

3. En el Inspector de Objetos , Establezca las siguientes propiedades de la ListView:

ß Selecciona el Alinear propiedad a Cliente, de modo que el componente ListView utiliza el entero
formar.

ß Selecciona el ItemAppearance a ListItemRightDetail.

ß Selecciona el SearchVisible a cierto.

4. Agrega un TPanel componente al formulario y establezca las siguientes propiedades en el Objeto


Inspector:

ß Selecciona el Alinear propiedad para el TPanel componente para Parte superior.

5. Agrega un TLabel componente al Grupo Especial, y establezca las siguientes propiedades en el Objeto
Inspector:

ß Selecciona el Alinear propiedad para el TLabel componente para Cliente.

ß Selecciona el Puntos de vista ya sea a iOS o Android.

ß Selecciona el StyleLookup propiedad a listboxitemlabel.

ß Un retroceso en el Puntos de vista a Dominar.

ß Selecciona el HorzAlign bienes en TextSettings a Centrar.

ß Selecciona el Texto propiedad a DEMO DB.

Conexión a los Datos


Los siguientes son los pasos básicos para conectarse a los datos en una base de datos utilizando FireDAC:

1. Sobre el paleta de herramientas , Haga doble clic en el TFDConnection componente.

Embarcadero Technologies 258


2. Haga clic con el TFDConnection componente y seleccione Editor de conexión.

3. En el Editor de conexión FireDAC, ajustar los siguientes parámetros de la TFDConnection :

1. Selecciona el identificación del conductor propiedad a IB.

2. Selecciona el Base de datos parámetro a:

C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ dbdemos.gdb


(Ubicación de la base de datos) y haga clic Abierto en el cuadro de

diálogo Archivo Abrir.

3. Selecciona el nombre_usuario parámetro para sysdba.

4. Selecciona el Contraseña parámetro para llave maestra.

5. Selecciona el Protocolo parámetro para TCPIP.

6. Haga clic en el Prueba el botón para comprobar la conexión.

7. Haga clic DE ACUERDO para cerrar el Editor de conexión.

2. En el Inspector de Objetos , Establezca las siguientes propiedades de TFDConnection:

Embarcadero Technologies 259


1. Selecciona el LoginPrompt propiedad a Falso, de manera que el usuario no se le pida una
iniciar sesión.

2. Selecciona el Conectado propiedad a Cierto. Nota: Si se produce un error ( "base de datos no disponible") en el

entorno de desarrollo, esto significa que usted no tiene una licencia vigente para InterBase. La licencia de InterBase Developer

Edition se incluye como parte del producto de algunas ediciones del producto. Para más información, ver

Solución de problemas .

3. Agrega un TFDQuery componente al formulario.

4. Haga clic con el TFDQuery componente y seleccione Editor de consultas.

1. Escribir en el Comando SQL Editor de texto seleccione COMMON_NAME, SPECIES_NAME


desde el pedido BIOLIFE por COMMON_NAME.

2. Haga clic en el Ejecutar botón para ver los resultados del comando.

3. Haga clic DE ACUERDO para cerrar el Editor de consultas.

5. En el Inspector de Objetos , selecciona el Activo propiedad de la TFDQuery componente para Cierto.

6. Abre el LiveBindings diseñador y conectar los datos y la interfaz de usuario como sigue:

1. Haga clic NOMBRE COMÚN en FDQuery1, y arrastrar el cursor del ratón para Item.Text
en ListView1.

Embarcadero Technologies 260


En este punto, TBindSourceDB y TBindingsList componentes se añadieron a la forma.

2. Haga clic SPECIES_NAME en BindSourceDB1, y arrastrar el cursor del ratón para


Item.Detail en ListView1.

7. Agrega un TFDPhysIBDriverLink componente al formulario.

8. Agrega un TFDGUIxWaitCursor componente al formulario.

Nota: los Preparación de una aplicación de tiempo de ejecución FireDAC tema, se explica el uso de los componentes
TFDGUIxWaitCursor y TFDPhysIBDriverLink en una aplicación FireDAC.

Embarcadero Technologies 261


Distribución de aplicaciones para móviles
Hasta este punto, usted ha usado InterBase en su escritorio. Esto significa que la base de datos real se encuentra en la unidad de
disco duro local (por ejemplo,
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ dbdemos.gdb).
En el dispositivo móvil, la aplicación es de arena en caja, y por lo general sólo se puede leer y escribir los datos que se encuentran en el Documentos
carpeta (por dispositivo IOS) y interno de almacenamiento (por dispositivo Android) debajo de la carpeta de la aplicación.

Para conectarse a una base de datos local en el móvil, es necesario realizar las siguientes acciones:

o Implementar la base de datos al dispositivo móvil.

o Compruebe la configuración (para conectarse a la base de datos de archivo) en un archivo local en el marco del
Documentos carpeta (por dispositivo IOS) o interno almacenamiento (para el dispositivo Android).

La implementación de InterBase Togo Archivos necesarios y el archivo de base de datos para móviles

Para ejecutar la aplicación en el móvil, que necesita para implementar los siguientes archivos:

o archivo requerido interbase Togo (el archivo de licencia y otros archivos de configuración)

o El archivo de base de datos (dbdemos.gdb) Implementar estos archivos a

su aplicación de la siguiente manera:

1. Puede agregar la base de datos a su proyecto con uno de los dos métodos siguientes:

ß Haga clic en el nombre del proyecto en el Gerente de proyecto y seleccione Añadir… desde el
menú contextual (o Proyecto> Agregar al proyecto ) para mostrar la Añadir al proyecto caja de diálogo. Vaya a la
ubicación de base de datos
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data,
seleccione la base de datos dbdemos.gdb y haga clic Abierto.

ß Vaya a la ubicación de base de datos


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data y arrastrar y soltar la base de datos dbdemos.gdb
al proyecto en el Administrador de proyectos. Hacer clic Sí para confirmar que desea agregar el archivo
a su proyecto.

2. Después de añadir el archivo de base de datos, la archivos destacados escaparates. Seleccionar InterBase
Ir en el Función ficheros, y haga clic DE ACUERDO para cerrar el cuadro de diálogo Archivos destacado.

ß En el nodo InterBase Togo es necesario seleccionar la licencia que se utilizará cuando


despliegue de la aplicación en el dispositivo.

ß los Propina al principio de este tutorial describe cómo activar un


InterBase licencia.

ß Los nombres sugeridos para los archivos de licencia disponibles se enumeran en el


Destacado de diálogo Archivos , Bajo el siguiente patrón de nombre: reg _ *. txt.

Como se puede ver en la siguiente imagen, el reg_ibtogo.txt archivo de licencia se ha seleccionado para este tutorial.

Embarcadero Technologies 262


ß Es posible que haya recibido de Embarcadero un archivo de licencia para IBToGo o
IBLite que tiene un patrón de reg_nnnnnnn.txt, dónde nnnnnnn es un número
generado:

ß Si ha guardado ese archivo de más de reg_ibtogo.txt o reg_iblite.txt en la ubicación de


abajo (por ejemplo,
C: \ Users \ Public \ Documents \ Embarcadero \ InterBase \ Redis t \ InterBaseXE7), sólo se
puede utilizar la licencia que se desea.

ß Si ha guardado el archivo con su nombre original, a continuación, seleccione Agregar archivos ( se


muestra en el siguiente paso) e incluir el archivo de licencia en la lista de archivos que necesitan ser
desplegado con la aplicación.

3. Abre el Gestor de despliegue seleccionando Proyecto> Implementación .

Embarcadero Technologies 263


4. Seleccionar configuración de depuración - iOS Device - plataforma de 32 bits, configuración de depuración -
iOS Device - plataforma de 64 bit o configuración de depuración - plataforma Android de la lista desplegable de las
plataformas de destino en la parte superior del gestor de despliegue y ver que la base de datos dbdemos.gdb se ha agregado
a las plataformas.

5. Ver cómo el Ruta remota de dbdemos.gdb se ha establecido para las plataformas iOS y Android:

ß Ruta remota en la plataforma de dispositivos iOS: Inicio \ documentos \

ß Ruta remota en la plataforma Android: activos \ \ internos

Como se acaba de configurar, al ejecutar la aplicación en el dispositivo móvil, el archivo de base de datos (dbdemos.gdb) se va
a desplegar a la Documentos carpeta (para la plataforma iOS) o interno
almacenamiento (para la plataforma Android) en la zona del recinto de seguridad de la aplicación de dispositivos múltiples. Para el TFDConnection

, Crear la BeforeConnect controlador de eventos de la siguiente manera:

1. En el Diseñador de formularios , Selecciona el TFDConnection componente.

2. En el Inspector de Objetos , Ir a la pestaña de Eventos y haga doble clic en el BeforeConnect evento.

3. implementar el controlador de eventos Para el BeforeConnect evento añadiendo el siguiente código:

ß por Delphi:

procedimiento TForm1.FDConnection1BeforeConnect (Sender: TObject); empezar

{$ Si está definido (IOS) o definido (Android)} FDConnection1.Params.Values ​[


'Protocolo']: = 'local'; FDConnection1.Params.Values ​[ 'Base de datos']: = TPath.Combine
(TPath.GetDocumentsPath, 'dbdemos.gdb');

{$ ENDIF} end;

los TPath expediente se declara en System.IOUtils unidad, por lo que es necesario añadir System.IOUtils
en la cláusula de usos, como sigue:

aplicación {$ R * .fmx}

{$ R * .NmXhdpiPh.fmx ANDROID} {$ R *
.iPhone4in.fmx IOS}

Embarcadero Technologies 264


utiliza System.IOUtils;

procedimiento TForm1.FDConnection1BeforeConnect (Sender: TObject); // código anterior va aquí

ß por C ++:

anulará __fastcall TForm1 :: SQLConnection1BeforeConnect (TObject * Remitente) {#if defined (_PLAT_IOS) ||

definido (_PLAT_ANDROID)
FDConnection1-> params-> Valores [ "Protocolo"] = "local"; FDConnection1-> params->
Valores [ "Base de datos"] =
Sistema :: :: Ioutils TPath :: Combine (Sistema :: Ioutils :: :: TPath GetDocumentsPath (), "dbdemos.gdb");

# terminara si }

Necesitas agregar # incluir <System.IOUtils.hpp> en la unidad (archivo .cpp).

Ejecutar la aplicación en un simulador o en un dispositivo móvil

Ahora su aplicación está lista para funcionar ( Ejecutar> Ejecutar o pulse F9). Usted debe ser capaz de navegar por los datos del
mismo modo que en el IDE. Puede reducir la lista use la búsqueda.

Embarcadero Technologies 265


iOS Androide

Solución de problemas

Problemas InterBase

Véase el siguiente sección con información detallada sobre problemas de licencia de Interbase.

Nota: Siga los pasos a IBLite e implementación de prueba IBToGo Licencias para obtener un archivo de licencia válido.

Problemas de manejo de excepciones

Si la aplicación genera una excepción sin tener código correcto manejo excepción, su aplicación multi-dispositivo simplemente se
bloquea (desaparece) en tiempo de ejecución.

Si se encuentra con un accidente, es posible que desee conectarse manualmente a la base de datos, mientras que a solucionar el
problema siguiendo los siguientes pasos:

1. Selecciona el FDConnection1 componente, y cambiar el Conectado propiedad a Falso.

Embarcadero Technologies 266


2. Caída de un botón en el formulario, y crear el siguiente controlador de eventos para conectar manualmente
a la base de datos:

Delphi:

procedimiento TForm1.Button1Click (Sender: TObject); empezar

tratar FDConnection1.Connected: = true;

FDQuery1.Active: = true; excepto

en el correo: Excepción do
begin
ShowMessage (e.Message); fin; fin; fin;

C ++:

vacío __fastcall TForm1 :: Button1Click (TObject * Remitente) {


tratar { FDConnection1-> Conectado = true;

FDQuery1-> Activo = true; } catch

(Exception & e) {
ShowMessage (e.Message); }}

3. Comprobar el mensaje de error.

Ver también

o InterBase Togo

o IBLite y IBToGo Licencias

o Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android)

o http://www.embarcadero.com/products/interbase/product-editions

o Tutorial móvil: Usando FireDAC y SQLite (iOS y Android)

o Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y
Androide)

Las muestras

o FireDAC InterBase muestra

Embarcadero Technologies 267


Móvil Tutorial: Uso de dbexpress y SQLite (iOS
y Android)

Precaución: dbExpress, que se describe en este tutorial, está siendo obsoleto. Esto significa que dbexpress será retirado de

RAD Studio en una próxima versión. En lugar de dbexpress, recomendamos que utilice nuestra solución de base de datos más

reciente, FireDAC,
que se describe en un tutorial similares, aquí:
Tutorial móvil: Usando FireDAC y SQLite (iOS y Android) . Antes de comenzar este tutorial, usted debe

leer y realizar la siguiente sesión de tutoría:

o Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (IOS y
Androide)

En este tutorial se describen los pasos básicos para utilizar SQLite como un almacenamiento de datos local en el dispositivo móvil a
través del marco dbexpress.

Embarcadero Technologies 268


iOS Androide

Usando dbexpress para conectarse a la base de datos


dbexpress es un marco de acceso a base de datos muy rápido, escrito en Delphi. RAD Studio proporciona controladores para la mayoría de las
bases de datos importantes, 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í.

o Para las plataformas móviles, soporta dbexpress InterBase Togo tanto como SQLite. Estas
productos de base de datos pueden funcionar en dispositivos iOS y Android.

o Para otras bases de datos, como Oracle, es necesario tener al menos una biblioteca de cliente. En
plataformas Windows, la biblioteca cliente se proporciona como un archivo DLL conectarse. Por lo tanto, es necesario 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 explica cómo conectarse a la base de datos de Enterprise sin necesidad de utilizar una biblioteca de cliente en un
dispositivo móvil; ver Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y Android) .

Embarcadero Technologies 269


La creación 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 siguientes pasos,
para que pueda utilizar el Diseñador de formularios para diseñar la interfaz de usuario de la aplicación.

Crear la base de datos en el Explorador de datos

1. Ir Data Explorer , Haga clic en el SQLite nodo y seleccione Agregar nueva conexión:

2. Definir el nombre de la conexión, como por ejemplo Lista de la compra.

3. Especifique la ubicación del archivo de base de datos:

4. Haga clic en el Avanzado botón y abrir la Propiedades avanzadas caja de diálogo.

5. Cambiar el FailIfMissing propiedad a Falso y haga clic en OK para cerrar el Avanzado


propiedades caja de diálogo:

Embarcadero Technologies 270


Nota: Ajuste FailIfMissing a Falso da instrucciones al explorador de datos para crear un nuevo archivo de base de datos si el archivo no está disponible.

6. De vuelta a la Nuevo enlace cuadro de diálogo, haga clic en el Conexión de prueba botón. Con este
operación, el nuevo archivo de base de datos se crea si no existía un archivo:

Nota: Asegurarse de que sqlite3.dll está presente en el sistema de desarrollo. Si este archivo no está presente, descarga de
sqlite3.dll http://www.sqlite.org/download.html a la ruta del sistema (por ejemplo,
C: \ Windows \ SysWOW64 para Windows de 64 bits).

Crear tabla en DataExplorer

1. Sobre el Data Explorer , Haga doble clic en el Lista de la compra nodo bajo la sección SQLite,
botón derecho del ratón Mesas, y luego seleccione nueva tabla en el menú contextual.

Embarcadero Technologies 271


2. Conjunto Tipo de datos para ShopItem columna para TEXTO.

3. Haga clic en el Salvar botón y especificar un nombre de tabla (por ejemplo, Ít.)

Embarcadero Technologies 272


Diseño y configurar la interfaz de usuario

componentes de interfaz de usuario visibles se cargan en el diseñador

Este tutorial usa una TListBox componente como el elemento de interfaz de usuario.

Para configurar un componente ListBox y otros elementos de interfaz de usuario, usar los siguientes pasos:

1. Crear una aplicación multi-dispositivo utilizando Archivo> Nueva> Aplicación Multi-Device -


Delphi o Archivo> Nueva> Aplicación Multi-Device - C ++ Builder .

2. Caída de una TToolBar en forma.

3. Caída de una TButton en el componente de barra de herramientas y establecer las siguientes propiedades en el
Inspector de Objetos :

ß Selecciona el Alinear a Derecha.

ß Selecciona el Nombre propiedad a ButtonAdd.

ß Selecciona el StyleLookup a addtoolbutton.

4. Caída de una TButton en el componente de barra de herramientas y establecer las siguientes propiedades en el
Inspector de Objetos :

Embarcadero Technologies 273


ß Selecciona el Alinear a Izquierda.

ß Selecciona el Nombre propiedad a ButtonDelete.

ß Selecciona el StyleLookup a deletetoolbutton.

ß Selecciona el Texto a Borrar.

ß Selecciona el Visible a Falso.

5. Caída de una TLabel en el componente de barra de herramientas y establecer las siguientes propiedades en el Objeto
Inspector :

ß Selecciona el Alinear a Cliente.

ß Selecciona el StyleLookup a toollabel.

ß Selecciona el Texto a Lista de la compra.

ß Selecciona el TextSettings.HorzAlign a Centrar.

6. Caída de una TListBox componente en el formulario y establezca las siguientes propiedades en el Objeto
Inspector :

ß Selecciona el Alinear propiedad a Cliente, de modo que el componente ListBox utiliza el entero
formar.

Conexión a los Datos


Los siguientes son los pasos básicos para conectarse a los datos en una base de datos que ya se define en el
Data Explorer :

1. Selecciona el ít. tabla de la Data Explorer y arrastrarlo al diseñador de formularios.

Nota: Esto crea dos componentes (ShoppinglistConnection: TSQLConnection y ItemTable:


TSQLDataSet ) en forma.

Embarcadero Technologies 274


2. Selecciona el ShoppinglistConnection componente en el formulario, y luego cambiar el
Conectado propiedad a Cierto.

3. Selecciona el ItemTable componente en el formulario, y luego cambiar el Activo propiedad a


Cierto.

4. Seleccionar Ver> LiveBindings diseñador y el LiveBindings diseñador se abre.

5. Seleccionar ShopItem en el ItemTable componente y arrastre ShopItem a Item.Text de


ListBox1.

Después de estos pasos se conecta la interfaz de usuario de la aplicación con los datos de una base de datos SQLite. Si ha utilizado una tabla con
los datos existentes para este tutorial, ahora debería ver los datos actuales de diseñador de formularios.

Crear el controlador de eventos para que el botón Borrar visible cuando el


usuario selecciona un elemento de la lista
los Visible propiedad para el Borrar botón se establece en Falso. Por lo tanto, por defecto, el usuario final no ve este botón. Puede que
sea visible cuando el usuario selecciona un elemento de la lista, de la siguiente manera:

o Seleccionar ListBox1 y definir el siguiente controlador de eventos para el OnItemClick evento.

Delphi:

Embarcadero Technologies 275


procedimiento TForm1.ListBox1ItemClick (Sender const: TCustomListBox;
Artículo const: TListBoxItem); empezar

Si ListBox1.Selected <> nil entonces


ButtonDelete.Visible: = true demás

ButtonDelete.Visible: = false; fin;

C ++ Builder:

anulará __fastcall TForm1 :: ListBox1ItemClick (const TCustomListBox * Remitente, const TListBoxItem * Elemento) {

si (ListBox1-> Seleccionado)
ButtonDelete-> Visible = True; más

ButtonDelete-> Visible = False;


}

Embarcadero Technologies 276


Crear el controlador de eventos para el botón Agregar para añadir una entrada en
la Lista

conexiones de bases de datos también se configuran

El siguiente paso es añadir una característica a esta aplicación para añadir un elemento a la lista de la compra.

1. Caída de una TSQLQuery componente al formulario.

2. Establecer las siguientes propiedades en el Inspector de Objetos :

ß Selecciona el Nombre propiedad a SQLQueryInsert.

ß Selecciona el SQLConnection propiedad a ShoppinglistConnection.

ß Establecer la propiedad SQL de la siguiente manera:

INSERT INTO PUNTO (ShopItem) VALORES (: ShopItem)

ß Selecciona el Expandir (...) botón de la Parámetros propiedad.

ß Selecciona el ShopItem de parámetros y conjunto Tipo de datos a ftString:

Embarcadero Technologies 277


3. En el Diseñador de formularios, haga doble clic en el ButtonAdd componente. Agregue el código siguiente a este controlador de eventos:

Delphi:

procedimiento TForm1.ButtonAddClick (Sender: TObject); empezar

TDialogServiceAsync.InputQuery ( 'Enter nuevo elemento', [ 'nombre'], [ ''], Self.OnInputQuery_Close); fin;

procedimiento TForm1.OnInputQuery_Close (const aResult: TModalResult; aValores const: array de cadena); var TaskName: string; empezar

TaskName: = String.Empty; Si aResult <>


Mrok entonces
Salida;
TaskName: = aValores [0]; tratar si no (TaskName.Trim = String.Empty)

entonces
empezar
. SQLQueryInsert.ParamByName ( 'ShopItem') AsString: = TaskName; SQLQueryInsert.ExecSQL ();
ItemTable.Refresh;

LinkFillControlToField1.BindList.FillList; Si ListBox1.Selected <> nil


entonces
ButtonDelete.Visible: = true demás

ButtonDelete.Visible: = false; fin; excepto

sobre el Ex: Excepción hacer


ShowMessage ( 'Error:' + ex.Message); fin; fin;

Declarar este prototipo procedimiento descrito en la sección privada de la clase Form:

Embarcadero Technologies 278


privado
procedimiento OnInputQuery_Close (const aResult: TModalResult; aValores const: array de cadena);

C ++ Builder:

Para replicar la misma funcionalidad en C ++, se requieren pasos adicionales:

1. Añadir la siguiente definición de tipo después de la definición TForm1:

typedef void __fastcall (__closure * TInputCloseQueryProcEvent) (const Sistema :: :: Uitypes TModalResult aResult,

Sistema :: UnicodeString const * aValores, const int AValues_High);

2. Añadir la siguiente definición de clase:

clase InputQueryMethod: TCppInterfacedObject público <TInputCloseQueryProc> {private:

Evento TInputCloseQueryProcEvent; público:

InputQueryMethod (TInputCloseQueryProcEvent _Event) {


Evento = _Event; }

vacío __fastcall Invoke (const Sistema :: :: Uitypes TModalResult aResult,


Sistema :: UnicodeString const * aValores, const int) {AValues_High eventos (aResult, aValores,
AValues_High); }};

3. Agregue la siguiente declaración de conformidad con la sección privada de la forma:

vacío __fastcall OnInputQuery_Close (const Sistema :: :: Uitypes TModalResult aResult,


Sistema :: UnicodeString const * aValores, const int AValues_High);

4. Añadir las funciones reales:

vacío __fastcall TForm1 :: ButtonAddClick (TObject * Remitente) {


Cadena caption = "Leyenda"; Prompts String
[1]; Prompts [0] = "Prompt 0"; Valores
predeterminados String [1]; Valores
predeterminados [0] = "default 0";

_di_TInputCloseQueryProc Met = new InputQueryMethod (y OnInputQuery_Close); TDialogServiceAsync :: InputQuery (

Embarcadero Technologies 279


"Subtítulo", Avisos, 0, valores predeterminados, 0, (TInputCloseQueryProc *) Met); } Void __fastcall TForm1 ::

OnInputQuery_Close (const Sistema :: :: Uitypes TModalResult aResult, Sistema :: UnicodeString const * aValores, const int

AValues_High) {
TaskName cadena; TaskName = "";
si (aResult! = Mrok)

regreso;
TaskName = aValores [0]; tratar { si (TaskName.Trim

()! = "")
SQLQueryInsert-> ParamByName ( "ShopItem") -> AsString = TaskName; SQLQueryInsert-> ExecSQL
(); ItemTable-> Actualizar ();

LinkFillControlToField1-> BindList-> FillList (); si (ListBox1-> seleccionada! =


NULL)
ButtonDelete-> Visible = True; más ButtonDelete->

Visible = False; } catch (Exception y ex) {

ShowMessage ( "Error:" + ex.Message); }}

los InputQuery función muestra un cuadro de diálogo que pide al usuario final para introducir un texto. Esta función devuelve Cierto cuando el usuario selecciona
DE ACUERDO, por lo que se puede agregar datos a la base de datos sólo cuando el usuario selecciona DE ACUERDO y el texto contiene algunos datos.

Embarcadero Technologies 280


iOS Androide

Crear el controlador de eventos para el botón Eliminar para eliminar una


entrada de la Lista
El siguiente paso es añadir una característica a esta solicitud para eliminar un elemento de la lista de la compra:

1. Caída de una TSQLQuery componente al formulario.

2. Establecer las siguientes propiedades en el Inspector de Objetos :

ß Selecciona el Nombre propiedad a SQLQueryDelete.

ß Selecciona el SQLConnection propiedad a ShoppinglistConnection.

ß Establecer la propiedad SQL de la siguiente manera:

eliminar del artículo donde ShopItem =: ShopItem

ß Selecciona el Expandir (...) botón de la Parámetros propiedad.

ß Selecciona el ShopItem de parámetros y conjunto Tipo de datos a ftString.

3. En la vista de estructura, seleccione el ButtonDelete componente. Agregue el código siguiente a este controlador de eventos.

Embarcadero Technologies 281


Delphi:

procedimiento TForm1.ButtonDeleteClick (Sender: TObject); var TaskName: String;

empezar

TaskName: = ListBox1.Selected.Text; tratar . SQLQueryDelete.ParamByName ( 'ShopItem') AsString: =

TaskName;
SQLQueryDelete.ExecSQL ();
ItemTable.Refresh;
LinkFillControlToField1.BindList.FillList; Si ListBox1.Selected <> nil
entonces
ButtonDelete.Visible: = true demás

ButtonDelete.Visible: = false; excepto

en el correo: Excepción do
begin
ShowMessage (e.Message); fin; fin; fin;

C ++ Builder:

vacío __fastcall TForm1 :: ButtonDeleteClick (TObject * Remitente) {


Cadena TaskName = ListBox1-> Seleccionado-> texto; tratar { SQLQueryDelete-> ParamByName ( "ShopItem") ->

AsString = TaskName;
SQLQueryDelete-> ExecSQL (); ItemTable->
Actualizar ();
LinkFillControlToField1-> BindList-> FillList (); si (ListBox1-> Seleccionado)

ButtonDelete-> Visible = True; más

ButtonDelete-> Visible = False;


} catch (Exception & e) {

ShowMessage (e.Message); }}

Configuración de la base de datos de despliegue para plataformas móviles

Hasta este punto, usted ha usado SQLite en el escritorio. Esto significa que la base de datos real se encuentra en la unidad de
disco duro local (por ejemplo,
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ shoplist.s3db). En el dispositivo móvil, las aplicaciones son de
arena en caja, y por lo general sólo se pueden leer y escribir datos que se encuentra en el Documentos carpeta (por dispositivo IOS) y interno de
almacenamiento (por dispositivo Android) debajo de la carpeta de la aplicación.

Embarcadero Technologies 282


Para conectarse a una base de datos local en el móvil, es necesario realizar las siguientes acciones:

o Implementar la base de datos al dispositivo móvil.

o Compruebe la configuración (para conectarse a la base de datos de archivo) en un archivo local en el marco del
Documentos carpeta (por dispositivo IOS) o interno almacenamiento (para el dispositivo Android).

Agregar y configurar su base de datos de archivos en el gestor de despliegue

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. Puede agregar la base de datos a su proyecto con uno de los dos métodos siguientes:

ß Haga clic en el nombre del proyecto en el Gerente de proyecto y seleccione Añadir… desde el
menú contextual (o Proyecto> Agregar al proyecto ) para mostrar la Añadir al proyecto caja de diálogo. Vaya a la
ubicación de base de datos
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data,
seleccione la base de datos shoplist.s3db y haga clic Abierto.

ß Vaya a la ubicación de base de datos


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data y arrastrar y soltar la base de datos shoplist.s3db
al proyecto en el Administrador de proyectos. Hacer clic Sí para confirmar que desea agregar el archivo
a su proyecto.

2. Después de añadir el archivo de base de datos, la archivos destacados escaparates, haga clic Cancelar a
cierralo.

3. Abre el Gestor de despliegue seleccionando Proyecto> Implementación .

4. Seleccionar configuración de depuración - iOS Device - plataforma de 32 bits, configuración de depuración -


iOS Device - plataforma de 64 bit o configuración de depuración - plataforma Android de la lista desplegable de las
plataformas de destino en la parte superior del gestor de despliegue y ver que la base de datos shoplist.s3db se ha
agregado a las plataformas.

5. Ver cómo el Ruta remota de shoplist.s3db se ha establecido para iOS y Android


plataformas:

ß Ruta remota en la plataforma de dispositivos iOS: Inicio \ documentos \

ß Ruta remota en la plataforma Android: activos \ \ internos

Como se acaba de configurar, al ejecutar la aplicación en el dispositivo móvil, el archivo de base de datos (shoplist.s3db) está listo para
ser desplegado en el Documentos carpeta (para la plataforma iOS) o interno
almacenamiento (para la plataforma Android) en la zona del recinto de seguridad de la aplicación de dispositivos múltiples.

Embarcadero Technologies 283


Modificar su código para conectarse a un archivo de base de datos local en
plataformas móviles

Las características básicas de esta aplicación están implementadas. A medida que trabajó en el Explorador de datos, que 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 copiarlo en el

dispositivo móvil o crear sobre la marcha. Puede crear una base de datos SQLite y tabla con los siguientes pasos:

Especificación de la ubicación de la base de datos SQLite en el dispositivo móvil

1. En el Diseñador de formularios, seleccione la ShoppinglistConnection componente.

2. En el Inspector de Objetos , Haga doble clic en el BeforeConnect evento.

3. Agregue el código siguiente a este controlador de eventos:

Delphi:

procedimiento TForm1.ShoppinglistConnectionBeforeConnect (Sender: TObject); empezar

{$ Si está definido (IOS) o definido (ANDROID)}


ShoppinglistConnection.Params.Values ​[ 'ColumnMetadataSupported']: = 'false'; ShoppinglistConnection.Params.Values ​[ 'Base
de datos']: =
TPath.Combine (TPath.GetDocumentsPath, 'shoplist.s3db'); {$ ENDIF} end;

los TPath expediente se declara en System.IOUtils unidad, por lo que es necesario añadir System.IOUtils en la cláusula usos de su unidad.

C ++ Builder:

vacío __fastcall TForm1 :: ShoppinglistConnectionBeforeConnect (TObject * Remitente) {


# si está definido (_PLAT_IOS) || definido (_PLAT_ANDROID)
ShoppinglistConnection-> params-> Valores [ "ColumnMetadataSupported"] = "false"; ShoppinglistConnection-> params-> Valores
[ "Base de datos"] = System :: Ioutils :: TPath :: Combine (System :: Ioutils :: TPath :: GetDocumentsPath () "shoplist.s3db");

# terminara si
}

los TPath expediente se declara en System.IOUtils biblioteca, por lo que es necesario agregar # incluir <System.IOUtils.hpp> en
su unidad de cabecera.

Creación de una tabla Si no existe ninguno

Con SQLite puede crear una tabla cuando no existe una tabla, mediante el uso de la CREAR TABLA SI NO EXISTE declaración. Puede
crear una tabla después de que el componente se conecta a TSQLConnection

Embarcadero Technologies 284


la base de datos y antes de que el componente TSQLDataSet se conecta a la mesa. Utilice los siguientes pasos:

1. En el Diseñador de formularios, seleccione la ShoppinglistConnection componente.

2. En el Inspector de Objetos , Haga doble clic en el AfterConnect evento.

3. Agregue el código siguiente a este controlador de eventos:

Delphi:

procedimiento TForm1.ShoppinglistConnectionAfterConnect (Sender: TObject); empezar

ShoppinglistConnection.ExecuteDirect ( 'CREATE TABLE SI NO EXISTE Artículo (ShopItem TEXT NOT NULL)'); fin;

C ++ Builder:

vacío __fastcall TForm1 :: ShoppinglistConnectionAfterConnect (TObject * Remitente) {


ShoppinglistConnection-> ExecuteDirect ( "CREATE TABLE SI NO EXISTE Artículo (ShopItem TEXT NOT NULL)"); }

Ejecución de la aplicación en un dispositivo móvil


Ahora su aplicación está lista para funcionar con un simulador o dispositivo móvil conectado.
Para ejecutar la aplicación

Embarcadero Technologies 285


1 en Gerente de proyecto , Selecciona la plataforma de destino.

2. Elegir cualquiera de los siguientes comandos:

ß Ejecutar> Ejecutar

ß Ejecutar> Ejecutar sin depurar

Embarcadero Technologies 286


iOS Androide

Nota: Si usted tiene un problema con el funcionamiento de la aplicación, siga los pasos que se indican en
Solución de problemas .

Ver también

o Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android)

o Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y
Androide)

o SQLite en RAD Studio

o Desarrollo de aplicaciones móviles Android

o Desarrollo de aplicaciones móviles iOS

Embarcadero Technologies 287


Tutorial móvil: El uso de InterBase Togo con dbexpress
(iOS y Android)

Precaución: dbExpress, que se describe en este tutorial, está siendo obsoleto. Esto significa que dbexpress será retirado de

RAD Studio en una próxima versión. En lugar de dbexpress, recomendamos que utilice nuestra solución de base de datos más

reciente, FireDAC,
que se describe en un tutorial similares, aquí:
Tutorial móvil: El uso de InterBase Togo con FireDAC (iOS y Android) . Antes de comenzar este tutorial,

usted debe leer y realizar la siguiente sesión de tutoría:

o Tutorial móvil: Usando LiveBindings para rellenar un ListView (iOS y Android)

Propina: Siguiendo este tutorial requiere una licencia para IBToGo o IBLite:

o Si ha adquirido una de las siguientes versiones de RAD Studio, usted tiene


recibida en el correo electrónico una clave para un desarrollo ilimitado y la licencia de despliegue para IBLite:

ß RAD Studio Tokio profesionales o higherAll ediciones

ß Delphi Tokio Profesional o superior con Mobile

o Si usted es un usuario de prueba, la instalación incluye una licencia de prueba para IBToGo.
Puede probar InterBase en iOS y Android mediante la selección de su licencia de prueba durante la fase de
despliegue, tal como se describe en este tutorial. Las licencias de prueba se instalan con el producto de
prueba, en
C: \ Users \ Public \ Documents \ Embarcadero \ InterBase \ Redist \ Inte rBaseXE7.

Nota: En los dispositivos Android, aplicaciones InterBase ToGo requieren específica permisos a ajustar y, específicamente:

o Leer almacenamiento externo ( la base de datos se coloca en la memoria externa)

o Escribir de almacenamiento externo ( la base de datos se coloca en la memoria externa)

o internet ( es necesario conectar con un servidor remoto) En este tutorial se describen los pasos básicos para navegar por los

datos gestionados por InterBase Togo en sus dispositivos iOS y Android a través del marco dbexpress.

Embarcadero Technologies 288


iOS Androide

Nota: Puede utilizar FireDAC, dbexpress y Interbase expresos componentes (IBX) para construir
interbase Togo aplicaciones. Para una discusión detallada sobre el uso de Interbase expreso componentes en una
aplicación Delphi, lea la Introducción a InterBase expreso artículo. Para este tutorial, vamos a conectar a interbase Togo usando
marco dbexpress.

Usando dbexpress para conectarse a la base de datos


dbexpress es un marco de acceso a base de datos muy rápido, escrito en Delphi. RAD Studio proporciona controladores para la mayoría de las
bases de datos importantes, 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í.

o Para las plataformas móviles, soporta dbexpress InterBase Togo tanto como SQLite. Estas
productos de base de datos pueden funcionar en dispositivos iOS y Android.

o Para otras bases de datos, como Oracle, es necesario tener al menos una biblioteca de cliente. En
plataformas Windows, la biblioteca cliente se proporciona como un archivo DLL conectarse. Por lo tanto, es necesario desarrollar
aplicaciones utilizando tecnologías de nivel medio como DataSnap para conectarse a estos productos de base de datos desde un
dispositivo móvil.

Embarcadero Technologies 289


Otro tutorial explica cómo conectarse a la base de datos de Enterprise sin necesidad de utilizar una biblioteca de cliente en un
dispositivo móvil; ver Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y Android) .

Diseño y configurar la interfaz de usuario


Este tutorial usa TListView y TPanel componentes como los elementos de interfaz de usuario.

Para configurar un ListView y un componente de panel, utilice los pasos siguientes:

1. Para crear una HD multi-dispositivo de aplicación , Seleccione una de las siguientes:

ß Archivo> Nuevo> Multi-dispositivo de aplicación - Delphi> Aplicación en blanco

ß Archivo> Aplicación Nueva> Multi-Device - C ++ Builder> Aplicación en blanco

2. Caída de una TListView componente en el formulario.

3. En el Inspector de Objetos , Establezca las siguientes propiedades de la Vista de la lista:

ß Selecciona el Alinear propiedad a Cliente, de modo que el componente ListView utiliza el entero
formar.

ß Selecciona el ItemAppearance a ListItemRightDetail.

ß Selecciona el SearchVisible a cierto.

4. Agrega un TPanel componente al formulario y establezca las siguientes propiedades en el Objeto


Inspector:

ß Selecciona el Alinear propiedad para el TPanel componente para Parte superior.

5. Agrega un TLabel componente al Grupo Especial, y establezca las siguientes propiedades en el Objeto
Inspector:

ß Selecciona el Alinear propiedad para el TLabel componente para Cliente.

ß Selecciona el StyleLookup propiedad a toollabel.

ß Selecciona el HorzAlign propiedad de TextSettings a Centrar.

ß Selecciona el Texto propiedad a DEMO DB.

Conexión a los Datos


Los siguientes son los pasos básicos para conectarse a los datos en una base de datos usando dbExpress:

1. Sobre el paleta de herramientas , Haga doble clic en el TSQLConnection componente.

Embarcadero Technologies 290


2. En la ventana de objeto, establezca las siguientes propiedades para TSQLConnection:

1. Esta aplicación utiliza InterBase Togo, por lo que establece la Conductor propiedad a IBLite / Togo.

2. Selecciona el LoginPrompt propiedad a Falso, de manera que el usuario no se le pida una


iniciar sesión.

3. Haga clic en los puntos suspensivos [...] para el Parámetros propiedad, y establecer el Base de datos valor a
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ db demos.gdb ( ubicación de la base
de datos).

4. Asegurar la vendorlib valor se establece en ibtogo.dll ( biblioteca de software de cliente); entonces


haga clic en OK para cerrar el cuadro de diálogo:

Embarcadero Technologies 291


5. Selecciona el Conectado propiedad a Cierto. Nota: Si se produce un error ( "base de datos no disponible") en el

entorno de desarrollo, esto significa que usted no tiene una licencia vigente para InterBase. La licencia de InterBase Developer

Edition se incluye como parte del producto de algunas ediciones del producto. Para más información, ver

Solución de problemas .

2. Agrega un TSQLDataSet componente al formulario y establezca las siguientes propiedades:

1. Selecciona el SQLConnection propiedad a SQLConnection1 ( el que agregó en el


un paso anterior).

2. Selecciona el CommandText propiedad a seleccione COMMON_NAME, SPECIES_NAME de


Para BIOLIFE por COMMON_NAME.

3. Selecciona el Activo propiedad a Cierto.

3. Abre el LiveBindings diseñador y conectar los datos y la interfaz de usuario como sigue:

1. Haga clic NOMBRE COMÚN en SQLDataSet1, y arrastrar el cursor del ratón para
Item.Text en ListView1.

Embarcadero Technologies 292


En este punto, TBindSourceDB y TBindingsList componentes se añadieron a la forma.

2. Haga clic SPECIES_NAME en BindSourceDB1, y arrastrar el cursor del ratón para


Item.Detail en ListView1.

Distribución de aplicaciones para móviles


Hasta este punto, usted ha usado InterBase en su escritorio. Esto significa que la base de datos real se encuentra en la unidad de
disco duro local (por ejemplo,
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data \ dbdemos.gdb). En el dispositivo móvil, la aplicación es de
arena en caja, y por lo general sólo se puede leer y escribir los datos que se encuentran en el Documentos carpeta (por dispositivo IOS) y interno
de almacenamiento (por dispositivo Android) debajo de la carpeta de la aplicación.

Embarcadero Technologies 293


Para conectarse a una base de datos local en el móvil, es necesario realizar las siguientes acciones:

o Implementar la base de datos al dispositivo móvil.

o Compruebe la configuración (para conectarse a la base de datos de archivo) en un archivo local en el marco del
Documentos carpeta (por dispositivo IOS) o interno almacenamiento (para el dispositivo Android).

Implementar InterBase Togo, dbExpress driver y el Archivo de Base de datos para móviles

Para ejecutar la aplicación en el móvil, que necesita para implementar los siguientes archivos:

o interbase Togo

o dbExpress Driver a InterBase (por simulador de iOS)

o El archivo de base de datos (dbdemos.gdb)

1. Puede agregar la base de datos a su proyecto con uno de los dos métodos siguientes:

ß Haga clic en el nombre del proyecto en el Gerente de proyecto y seleccione Añadir… desde el
menú contextual (o Proyecto> Agregar al proyecto ) para mostrar la Añadir al proyecto caja de diálogo. Vaya a la
ubicación de base de datos
C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data,
seleccione la base de datos dbdemos.gdb y haga clic Abierto.

ß Vaya a la ubicación de base de datos


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ Data y arrastrar y soltar la base de datos dbdemos.gdb
al proyecto en el Administrador de proyectos. Hacer clic Sí para confirmar que desea agregar el archivo
a su proyecto.

2. Después de añadir el archivo de base de datos, la archivos destacados escaparates. Seleccionar el siguiente
módulos de base de datos y, a continuación, haga clic DE ACUERDO para cerrar el cuadro de diálogo Archivos destacado:

ß InterBase Togo. Es necesario seleccionar la licencia que se utilizará al despliegue de la aplicación en el


dispositivo.

ß los Propina al principio de este tutorial describe cómo activar un


InterBase licencia.

ß Los nombres sugeridos para los archivos de licencia disponibles se enumeran en el


Destacado de diálogo Archivos , Bajo el siguiente patrón de nombre: reg _ *. txt.

Como se puede ver en la siguiente imagen, el reg_ibtogo.txt archivo de licencia se ha seleccionado para este tutorial.

ß Es posible que haya recibido de Embarcadero un archivo de licencia para IBToGo o


IBLite que tiene un patrón de reg_nnnnnnn.txt, dónde nnnnnnn es un número
generado:

ß Si ha guardado ese archivo de más de reg_ibtogo.txt o reg_iblite.txt en la ubicación de


abajo (por ejemplo,
C: \ Users \ Public \ Documents \ Embarcadero \ InterBase \ Redis t \ InterBaseXE7), sólo se
puede utilizar la licencia que se desea.

Embarcadero Technologies 294


ß Si ha guardado el archivo con su nombre original, a continuación, seleccione Agregar archivos ( se
muestra en el siguiente paso) e incluir el archivo de licencia en la lista de archivos que necesitan ser
desplegado con la aplicación.

ß Dbexpress InterBase Conductor Consejo: Si va a probar la aplicación en el simulador de iOS, entonces también

tiene que seleccionar el


Dbexpress InterBase Conductor para simulador de iOS.

3. Abre el Gestor de despliegue seleccionando Proyecto> Implementación .

4. Seleccionar configuración de depuración - plataforma de dispositivo iOS o configuración de depuración - Android


plataforma de la lista desplegable de las plataformas de destino en la parte superior del gestor de despliegue y ver
que la base de datos dbdemos.gdb se ha agregado a las plataformas.

Embarcadero Technologies 295


5. Ver cómo el Ruta remota de dbdemos.gdb se ha establecido para las plataformas iOS y Android:

ß Ruta remota en la plataforma de dispositivos iOS: Inicio \ documentos \

ß Ruta remota en la plataforma Android: activos \ \ internos

Como se acaba de configurar, al ejecutar la aplicación en el dispositivo móvil, el archivo de base de datos (dbdemos.gdb) se va
a desplegar a la Documentos carpeta (para la plataforma iOS) o interno
almacenamiento (para la plataforma Android) en la zona del recinto de seguridad de la aplicación de dispositivos múltiples.

Modificar el código para conectarse a un archivo de base de datos local en el móvil

Como se describe en el paso anterior, el componente TSQLConnection está conectado a una base de datos en el sistema de archivos local
con una ruta absoluta. Así que hay que sustituir la ubicación del archivo antes de conectarse a la base de datos, de la siguiente manera:

1. En el Diseñador de formularios, seleccione el componente SQLConnection1.

2. En el Inspector de Objetos, haga doble clic en el campo Valor de la BeforeConnect evento.

3. Agregue el código siguiente a este controlador de eventos:

Delphi:

procedimiento TForm1.SQLConnection1BeforeConnect (Sender: TObject); empezar

{$ Si está definido (IOS) o definido (Android)}


SQLConnection1.Params.Values ​[ 'Database']: =
TPath.Combine (TPath.GetDocumentsPath, 'dbdemos.gdb'); {$ ENDIF} end;

C ++:

anulará __fastcall TForm1 :: SQLConnection1BeforeConnect (TObject * Remitente) {#if defined (_PLAT_IOS) ||

definido (_PLAT_ANDROID)
SQLConnection1-> params-> Valores [ "Base de datos"] =
Sistema :: :: Ioutils TPath :: Combine (Sistema :: Ioutils :: :: TPath GetDocumentsPath (), "dbdemos.gdb");

# terminara si }

Embarcadero Technologies 296


los TPath expediente se declara en System.IOUtils unidad, por lo que es necesario añadir System.IOUtils en la cláusula usos.

Ejecutar la aplicación en un simulador o en un dispositivo móvil

Ahora su aplicación está lista para funcionar. Usted debe ser capaz de navegar por los datos del mismo modo que en el IDE.
Puede reducir la lista use la búsqueda.

iOS Androide

Solución de problemas

Problemas InterBase

Véase el siguiente sección con información detallada sobre problemas de licencia de Interbase.

Nota: Siga los pasos a IBLite e implementación de prueba IBToGo Licencias para obtener un archivo de licencia válido.

Embarcadero Technologies 297


Problemas de manejo de excepciones

Si la aplicación genera una excepción sin tener código correcto manejo excepción, su aplicación multi-dispositivo simplemente se
bloquea (desaparece) en tiempo de ejecución.

Si se encuentra con un accidente, es posible que desee conectarse manualmente a la base de datos, mientras que a solucionar el
problema siguiendo los siguientes pasos:

1. Selecciona el SQLConnection1 componente, y cambiar el Conectado propiedad a Falso.

2. Caída de un botón en el formulario, y crear el siguiente controlador de eventos para conectar manualmente
a la base de datos:

Delphi:

procedimiento TForm1.Button1Click (Sender: TObject); empezar

tratar SQLConnection1.Connected: = true;

SQLDataSet1.Active: = true; excepto

en el correo: Excepción do
begin
ShowMessage (e.Message); fin; fin; fin;

C ++:

vacío __fastcall TForm1 :: Button1Click (TObject * Remitente) {


tratar {
SQLConnection1-> Conectado = true; SQLDataSet1->

Activo = true; } catch (Exception * e) {ShowMessage (e->

Mensaje); }

3. Comprobar el mensaje de error.

Ver también

o InterBase Togo con dbexpress

o IBLite y IBToGo licencias en RAD Studio

o http://www.embarcadero.com/products/interbase/product-editions

o Introducción a InterBase expreso

o Móvil Tutorial: Uso de dbexpress y SQLite (iOS y Android)

Embarcadero Technologies 298


o Tutorial móvil: Conexión a una base de datos empresarial desde un cliente móvil (iOS y
Androide)

o Tutorial móvil: Usando FireDAC en aplicaciones móviles (iOS y Android)

Embarcadero Technologies 299


Tutorial móvil: Conexión a una base de datos
empresarial desde un cliente móvil (iOS y Android)

Antes de comenzar este tutorial:

o Leer y realizar la siguiente sesión de tutoría:

ß Tutorial móvil: Utilización de componentes ListBox para mostrar una vista de tabla (IOS y
Androide)

ß Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android)

o Escoger Inicio | programas | Embarcadero InterBase XE7 | <Xx> = bit ejemplo gd_db |
Administrador del servidor de InterBase y verificar que el servidor de InterBase se está ejecutando. El servidor de InterBase debe

ejecutar antes de crear o ejecutar el ejemplo. En este tutorial se describe cómo conectarse a una base de datos de la empresa desde una

aplicación de cliente móvil.

Para conectarse a una base de datos de Enterprise, es necesario tener una biblioteca cliente. En la mayoría de los casos, la biblioteca cliente es proporcionada
por el proveedor de base de datos en formato DLL. Esta estrategia no funciona bien para los dispositivos móviles porque ninguna biblioteca cliente está
disponible. Para resolver este problema, se puede desarrollar una
nivel medio para conectarse a una base de datos empresarial, y su aplicación se puede comunicar con el nivel medio.

RAD Studio proporciona la DataSnap marco con el que se puede desarrollar el nivel medio (y tener acceso al nivel medio), casi
sin necesidad de codificación. En este tutorial se describen los pasos para desarrollar el nivel medio y luego desarrollar el
cliente móvil.

Creación de la etapa intermedia, un servidor DataSnap

En primer lugar, crear un servidor DataSnap que expone una tabla de un servidor de base de datos. En este tutorial se utiliza una
DataSnap servidor VCL Forms Application como un servidor DataSnap.

Embarcadero Technologies 300


Nota: En este tutorial, el servidor DataSnap (una aplicación VCL) funciona como el nivel medio en una aplicación de base
de datos de múltiples niveles. Usted puede crear fácilmente y posteriormente eliminar una instancia de un servidor
DataSnap. Después de comprender los pasos básicos, puede convertir el nivel medio a una aplicación de servicio de
Windows.

Crear una aplicación de servidor DataSnap VCL

1. Con el fin de crear un proyecto nuevo Delphi o C ++, seleccione Archivo> Nuevo> Otros y desde el Nuevos objetos diálogo
Seleccionar:

ß Para Delphi: Delphi Proyectos> DataSnap del servidor> Servidor DataSnap

ß Para C ++: C ++ Builder Proyectos> DataSnap del servidor> Servidor DataSnap

2. los Nuevo servidor DataSnap asistente aparece:

Embarcadero Technologies 301


1. En un primer paso, seleccione Los formularios de solicitud como el tipo de proyecto.

2. En el segundo paso, comprobar Aplicación VCL como tipo de aplicación.

3. En el tercer paso, elegir el TCP / IP protocolo, Métodos servidor de clases y


Métodos de ejemplo Características de la lista de servidores.

4. En el cuarto paso, deje el puerto de comunicaciones TCP / IP predeterminada de 211. Esta voluntad
asegúrese de que la comunicación entre el cliente y el servidor pasará a través del puerto de
DataSnap defecto.

5. En el paso final (número cinco) seleccione TDSServerModule como el antepasado de la


Métodos de servidor.

2. Guarde la unidad de forma tan DataSnapServerUnit.

3. Cambiar a DataSnapServerUnit, y cambiar el Nombre propiedad del formulario de


DSServerForm.

4. Guarde la unidad de métodos de servidor (por defecto como creado por el Asistente:
ServerMethodsUnit1) como ServerModuleUnit.

5. Guarde la unidad de contenedor de servidor (por defecto como creado por el Asistente:
ServerContainerUnit1) como ServerContainerUnit.

6. Guarde el nuevo proyecto como DataSnapServerProject.

7. Seleccionar en el ProjectGroup1 Gerente de proyecto Y guardar el proyecto como


DataSnapTutorialProjectGroup.groupproj.

Embarcadero Technologies 302


Definir un conjunto de datos en el servidor DataSnap

1. Cambiar a la ServerContainerUnit.pas presentar y reemplazar los usos cláusula en el


aplicación con: utiliza Winapi.Windows, ServerModuleUnit, para Delphi, y reemplazar # incluir
"ServerMethodsUnit.h" con # incluir "ServerModuleUnit.h" en
ServerContainerUnit.cpp, para C ++;

2. Cambiar a la ServerModuleUnit.pas archivo.

3. En el Diseñador de formularios, cambiar la Nombre propiedad del módulo de servidor a


DSServerModule_EMPLOYEE.

4. Configurar los siguientes componentes en el módulo de servidor:

ß Caída de una TSQLConnection componente en el módulo de servidor, y establecer el


siguientes propiedades:

TSQLConnection encapsula una conexión dbexpress a un servidor de base de datos.

ß Selecciona el Nombre propiedad a SQLConnection_EMPLOYEE.

ß Selecciona el LoginPrompt propiedad a Falso.

ß Conjunto Conductor a InterBase Server.

Nota: Asegúrese de que el InterBase servidor Esta corriendo.

ß Ampliar la Conductor nodo, y establecer el Base de datos propiedad a


C: \ Users \ Public \ Documents \ Embarcadero \ Studio \ 19.0 \ Samples \ D ata \ employee.gdb.

ß Cambiar el Conectado propiedad a Cierto. Si se produce un error, doble


comprobar el Conductor propiedades:

Embarcadero Technologies 303


ß Caída de una TSQLDataSet componente en el módulo de servidor, y establecer el siguiente
propiedades:

TSQLDataSet representa los datos recuperados usando dbExpress.

ß Selecciona el Nombre propiedad a SQLDataSet_EMPLOYEE.

ß Selecciona el SQLConnection propiedad a SQLConnection_EMPLOYEE.

ß Selecciona el CommandType propiedad a ctTable.

ß Selecciona el CommandText propiedad a EMPLEADO.

ß Cambiar el Activo propiedad a Cierto. Si se produce un error, vuelva a comprobar


las propiedades que acaba de configurar.

ß Caída de una TDataSetProvider componente en el módulo de servidor, y establecer el


siguientes propiedades:

TDataSetProvider paquetes de datos de un conjunto de datos y pasa uno o más transportables paquetes de datos al cliente
DataSnap.

ß Selecciona el Nombre propiedad a DataSetProvider_EMPLOYEE.

ß Selecciona el Conjunto de datos propiedad a SQLDataSet_EMPLOYEE:

Embarcadero Technologies 304


ß

Nota: Este tutorial utiliza InterBase como un ejemplo. Sin embargo, puede conectarse a cualquier servidor de base de datos
utilizando los mismos pasos. Seleccione el controlador adecuado, y otras propiedades para apuntar a su base de datos.

Exponer el conjunto de datos desde el servidor DataSnap

Acaba de crear un nuevo módulo de servidor que contiene un conjunto de datos y una DataSetProvider que los paquetes de datos a la
capa siguiente. El siguiente paso es exponer el módulo de servidor al cliente DataSnap.

1. En el Diseñador de formularios, abierto ServerContainerUnit.

2. Seleccionar DSServerClass1, y actualizar el controlador de eventos existente para el OnGetClass


evento. Agregue el código siguiente a la DSServerClass1 controlador de eventos:

Delphi:

procedimiento TServerContainer1.DSServerClass1GetClass (DSServerClass: TDSServerClass;


PersistentClass var: TPersistentClass); empezar

PersistentClass: = TDSServerModule_EMPLOYEE; fin;

C ++ (sólo para iOS):

anulará __fastcall TServerContainer1 :: DSServerClass1GetClass (TDSServerClass


* DSServerClass,
TPersistentClass y PersistentClass)
{
PersistentClass = __classid (TDSServerModule_EMPLOYEE); }

Con este controlador de eventos, el servidor DataSnap expone a los proveedores, así como los métodos públicos en esta clase a
un cliente DataSnap. Sobre la base de los pasos en la sección anterior, ahora se va a exponer la DataSetProvider_EMPLOYEE
DataSetProvider componente a su cliente DataSnap.

Embarcadero Technologies 305


Ejecutar el servidor DataSnap

Implementación del servidor DataSnap es completa. Botón derecho del ratón DataSnapServerProject.exe
y seleccione Ejecutar sin depurar.

Ahora se puede ver el servidor DataSnap que se ejecuta en la máquina Windows. Debido a que este servidor DataSnap no tiene ningún elemento de
interfaz de usuario, que se parece a un formulario en blanco, y esto es como era de esperar en este punto.

Creación de una aplicación móvil que se conecta al servidor


DataSnap
El siguiente paso es crear la aplicación cliente móvil.

1. En el Gerente de proyecto , botón derecho del ratón DataSnapTutorialProjectGroup, y seleccione Agregar nuevo proyecto.

2. Seleccionar Aplicación Multi-Device sobre el Proyectos de Delphi página:

Embarcadero Technologies 306


3. Guarde la nueva unidad como DataSnapClientUnit.

4. Guarde el nuevo proyecto como DataSnapClientProject.

5. Abierto DataSnapClientUnit, y cambiar el Nombre propiedad del formulario de


DSClientForm.

6. Caída de los siguientes componentes en el Diseñador de formularios :

ß TSQLConnection componente (SQLConnection1)

TSQLConnection encapsula una conexión dbexpress a un servidor de base de datos. Además, es compatible con el servidor DataSnap.

ß Selecciona el Conductor propiedad a DataSnap.

ß Ampliar la Conductor propiedad, y establecer el NombreHost propiedad para el anfitrión


el nombre o la dirección IP del servidor DataSnap.

ß Selecciona el LoginPrompt propiedad a Falso.

ß Selecciona el Conectado propiedad a Cierto.

Si usted ve un error, por favor, compruebe las propiedades que acaba de configurar.

ß TDSProviderConnection componente (DSProviderConnection1) La TDSProviderConnection componente

proporciona conectividad con el servidor usando DataSnap dbexpress.

ß Selecciona el SQLConnection propiedad a SQLConnection1.

ß Conjunto ServerClassName a TDSServerModule_EMPLOYEE. Este nombre


debe coincidir con el nombre de la clase del módulo de servidor del servidor DataSnap.

ß Selecciona el Conectado propiedad a Cierto.

Embarcadero Technologies 307


ß TClientDataSet componente (ClientDataSet1)

TClientDataSet implementa un conjunto de datos de base de datos independiente, y esto puede ser usado como un amortiguador inmemory local de los
registros de otro conjunto de datos.

ß Selecciona el Servidor remoto propiedad a DSProviderConnection1.

ß Selecciona el Nombre del proveedor propiedad a DataSetProvider_EMPLOYEE. Esta


nombre debe coincidir con el nombre del proveedor para el servidor DataSnap.

ß Selecciona el Activo propiedad a Cierto.

ß TListBox componente

ß Selecciona el Alinear propiedad a Cliente:

7. Abre el LiveBindings diseñador y conectar los datos y la interfaz de usuario como sigue:

1. Haga clic NOMBRE COMPLETO en BindSourceDB1, y arrastrar el cursor del ratón para Item.Text
en ListBox1:

Embarcadero Technologies 308


2. Ahora que ha creado y configurado el cliente DataSnap en el móvil
plataforma. Usted debe ser capaz de ver los datos que llegan desde el servidor DataSnap en el IDE:

iOS Androide

Implementar la Biblioteca MIDAS al simulador de iOS

Para ejecutar la aplicación en el simulador de iOS, que necesita para implementar los siguientes archivos:

o Biblioteca MIDAS

1. Abre el Gestor de despliegue seleccionando Proyecto> Implementación .

2. Seleccionar Agregar archivos destacado ( ):

Embarcadero Technologies 309


3. Seleccionar el siguiente módulo y, a continuación, haga clic DE ACUERDO para cerrar el gestor de despliegue:

ß Biblioteca MIDAS

Ejecutar la aplicación en la plataforma móvil


Ahora su aplicación está lista para funcionar. En el Gerente de proyecto , Seleccionar la plataforma de destino móvil, y ejecutar la

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

Ver también

o Tutorial móvil: El uso de InterBase Togo con dbexpress (iOS y Android)

o Móvil Tutorial: Uso de dbexpress y SQLite (iOS y Android)

o Tutorial móvil: Usando FireDAC en aplicaciones móviles (iOS y Android)

o Desarrollo de aplicaciones DataSnap

o La comprensión de aplicaciones de bases escalonadas-Multi

o Datasnap.DSServer.TDSServer

o Iniciar el servidor InterBase

Embarcadero Technologies 310


Tutoriales móviles: Tabla de los componentes utilizados

En la siguiente tabla se enumeran los componentes FireMonkey que se utilizan en cada uno de los tutoriales móviles:

Embarcadero Technologies 311


Tutorial móvil FireMonkey componentes, propiedades y métodos usados

Creación de una aplicación


TEdit , TButton , TLabel KillFocusByReturn , Texto
multi-dispositivo (iOS y Android)
, Nombre

El uso de un componente de botón TButton , Posición TSpeedButton , Altura , Anchura , StyleLookup , tintColor , IconTintColor , Nombre del grupo ,
con diferentes estilos (iOS y Android)
Se presiona

El uso de un calendario
TDateEdit
Componente para elegir una fecha
ShowCheckBox
(iOS y Android)

Usando Combo componentes de la caja


para recoger cosas de una lista (iOS y TComboBox ItemIndex , Índice de , AlCambiar
Android)

Utilizar un componente
MultiView a la pantalla TMultiView , TDrawerAppearance visible , Modo , MasterButton , DoOpen , DoClose , GetDisplayName
alternativa Vistas de la ,
Información (iOS y Android) DoInstall , TargetControl , DrawerOptions , ShadowOptions

Uso del Explorador de


TWebBrowser , TButton , TVirtualKeyboard ReturnKeyType , Regresa , KeyboardType
componentes (iOS y Android)
, KillFocusByReturn

Utilización de componentes de la ficha para

mostrar las páginas (iOS y Android) TTabControl , TTabItem , Editor MultiResBitmap , Lista de Acción , TButton

Usando LiveBindings para


rellenar un ListView (iOS y TListView , TPrototypeBindSource , TEXTBUTTON
Android)

TListBox , TLabel , TToolBar , TSpeedButton , TSearchBox , TListBoxHeader ,


Utilización de componentes ListBox para
TListBoxGroupHeader , Alinear TListBoxGroupFooter , StyleLookup , HorzAlign , Texto , Accesorio , TListBoxItemData.Deta
mostrar una vista de tabla (iOS y Android)
,
mapa de bits , StyleLookup , TListBoxItemData.Detail

Usando LiveBindings rellenar un


cuadro de lista en aplicaciones TListBox , DefaultItemStyles.ItemStyle , TRectangle , TPrototypeBindSource ,
móviles (iOS y Android) LiveBindings diseñador ,

El uso de Layout para ajustar las


diversas Forma tamaños u TLayout y sus propiedades: Alinear , márgenes , Relleno y anclas TVertScrollBox
orientaciones (iOS y Android)

Embarcadero Technologies 312


Tomar y compartir una imagen, TToolBar , TImage , TActionList , FMX.MediaLibrary ,
texto y compartir (iOS y Android) TTakePhotoFromCameraAction , OnDidFinishTaking ,
OnBeforeExecute , TShowShareSheetAction , TToolBar , TButton , TMemo

TListBox con elementos añadidos y groupheaders, TWebBrowser ,


Ubicación utilizando sensores (iOS y
TLocationSensor , OnLocationChanged , TSwitch , TGeocoder y sus métodos
Android)

Uso de Notificaciones (iOS y TNotificationCenter , TNotification , TNotification.Number ,


Android) ScheduleNotification , Intervalo de repetición

El uso de InterBase Togo con


TListView , TPanel , TLabel , TSQLDataSet , LiveBindings diseñador ,
dbexpress (iOS y Android)
Gestor de despliegue

El uso de SQLite y
Data Explorer , TListBox , TButton , TLabel , TSQLQuery , InputQuery ,
dbexpress (iOS y Android)
Gestor de despliegue

Conexión a una
Asistente del servidor DataSnap , TDSServerModule , TSQLConnection ,
Empresa de base de datos desde un
TSQLDataSet , TDataSetProvider , TDSProviderConnection , TClientDataSet ,
cliente móvil (iOS y Android)
TListBox

TFDConnection , TBindSourceDB , TFDQuery , TListView , TPanel , TLabel ,


El uso de InterBase Togo con
LiveBindings diseñador , TFDGUIxWaitCursor , FTFDPhysSQLiteDriverLink ,
FireDac (iOS y Android)
Gestor de despliegue

TFDConnection , Asistente LiveBindings , TBindSourceDB , TFDQuery ,


Usando FireDAC y SQLite (iOS y
TListView , LiveBindings diseñador , TFDGUIxWaitCursor ,
Android)
FTFDPhysSQLiteDriverLink , Gestor de despliegue

TPushEvents , AutoActivate , TKinveyProvider , AppKey , App secreta ,


Uso de notificaciones remotas (iOS y
MasterSecret , TParseProvider , ID de aplicación , RestApiKey , Proveedor ,
Android)
LiveBindings diseñador

TListView , TLabel , TButton , TBackendStorage , TKinveyProvider y sus propiedades AppKey , App


Usando BaaS de backend de
secreta , MasterSecret , y el TParseProvider
almacenamiento (iOS y Android)
componente y sus propiedades ID de aplicación , Llave maestra y RestApiKey

Nota: Esta lista de componentes está destinado sólo para fines informativos y puede que no sea del todo exacta o
completa.

Embarcadero Technologies 313

Vous aimerez peut-être aussi