tutoriales moviles delphi xe5-tut21

8/10/2019 Tutoriales Moviles Delphi XE5-Tut21

1/9


2/9

Desarrollo de Apps Mviles con Delphi (iOS y Android) www.R2datatechnology.com

Embarcadero Technologies 153

Para usar SQLite en su aplicacin, el archivo sqlite3.dlldebe estar presente en su sistema de

desarrollo. Si el archivo no est presente, descargue sqlite3.dll

desdehttp://www.sqlite.org/download.htmla su ruta de sistema (como

C:\Windows\SysWOW64para Windows 64-bit).

Disee y Configure la Interfase de Usuario

Cree un nuevo proyecto. Escoger unaFireMonkey Mobile Application.

1. Suelte un componenteTFDConnectionsobre el formulario.

2. Click derecho sobre el componenteTFDConnectiony escoga Connection Editor.

3. En el FireDAC Connection Editor, cambie los siguientes parmetros del

TFDConnection:1. Setear la propiedadDriver IDa SQLite.

2. Setear el parmetro Databasea:

C:\Users\Public\Documents\RAD

Studio\\Samples\Data\Employees.s3db(locaclizacin de la base de datos)

click en Opende la caja de dilogo File Open.

(Para mostrar Employees.s3dben el dilogo Open, setear la opcin All Files (*.*).)

3. Click en el botn Testpara probar la conexin.

4. Click en OKpara cerrar el Connection Editor.
http://www.sqlite.org/download.htmlhttp://www.sqlite.org/download.htmlhttp://www.sqlite.org/download.htmlhttp://docwiki.embarcadero.com/RADStudio/XE5/en/FireMonkey_Mobile_Applicationhttp://docwiki.embarcadero.com/RADStudio/XE5/en/FireMonkey_Mobile_Applicationhttp://docwiki.embarcadero.com/RADStudio/XE5/en/FireMonkey_Mobile_Applicationhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDCustomConnection.DriverNamehttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDCustomConnection.DriverNamehttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDCustomConnection.DriverNamehttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:TestConnectionSuccess.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:ConnectionEdtFD.pnghttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDCustomConnection.DriverNamehttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDConnectionhttp://docwiki.embarcadero.com/RADStudio/XE5/en/FireMonkey_Mobile_Applicationhttp://www.sqlite.org/download.html


3/9



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

1. Setear la propiedadLoginPrompta False, entonces al usuario no se le

requerir por una identificacin (login).

2. Setear la propiedadConnecteda True.

Usando el Asistente LiveBindings

Use el AsistenteLiveBindings para agregar los componentes LiveBindings

(TBindSourceDB,TBindingsList),TFDQuery,y el componenteTListView.

Aadiendo los componentes LiveBinding

1. Seleccione View > LiveBindings Designery se abrir elLiveBindings Designer.

2. SeleccioneLiveBindings Wizard.

3. Select Create a data sourcebinding task.

4. Click en el botn Next.

5. Seleccione FireDACclass name.


7. Cambie el Command Typea Query.

8. Configure la propiedad Command Texta select Name, Department,

Seniority from Employee order by Department.
http://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.LoginPrompthttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.LoginPrompthttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.LoginPrompthttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.Connectedhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.Connectedhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.Connectedhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.Components.TBindingsListhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.Components.TBindingsListhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.Components.TBindingsListhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:SelectLiveBindWizard.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.Components.TBindingsListhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.Connectedhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.LoginPrompthttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspector


4/9



9. Click en el botn Test Command.


11. Click en el botn Finish.

En ste punto, los componentesTBindSourceDByTFDQuery se aadieron a su formulario.

Aadir el componente ListView

1. Reabrir elLiveBindings Wizard.

2. Seleccione la tarea de enlace Link a control with a field.


4. SeleccioneTListView.


6. Seleccione BindSourceDB1.
http://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:ControlFieldWizard.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:LiveBindWizardFD.pnghttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Wizardhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.Client.TFDQueryhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDB


5/9




8. Seleccione el campo Name.


10. Click en el botn Finishpara cerrar el asistente.

Usando el Asistente LiveBindings

LiveBindings Designer

Use elLiveBindings Designerpara agregar nuevas conecciones entre los

componentesTBindSourceDByTListView.

1. Seleccione el miembro ItemHeader.TextdesdeTListView.

2. Enlace al miembro Departmentdel componente BindSourceDB1arrastrndolo (una

linea de conexin aparece).
http://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:LiveBindDesignerFinal.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:LiveBindDesignerFinal.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:FieldNameWizard.pnghttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.Bind.DBScope.TBindSourceDBhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designer


6/9



3. Seleccione el miembro Item.TextdesdeTListView.

4. Enlace al miembro Namedel componente BindSourceDB1arrastrndolo (una linea de

conexin aparece).

5. En el Object Inspector, setear las siguientes propiedades deTListView:

1. Setear elItemAppearancea ImageListItemRightButton.

En elLiveBindings Designer,elTListViewdebera tener un nuevo

miembro, Item.ButtonText.

2. Setear la propiedadAligna alClient.

6. En elLiveBindings Designer,seleccione el miembro Item.ButtonTextdesdeTListView.

7. Enlace al miembro Senioritydel componente BindSourceDB1arrastrndolo (una

linea de conexin aparece).

Preparando Su Aplicacin para el Tiempo de Ejecucin

FireDAC tiene una arquitectura multicapas de acoplamiento flexible, donde las capas provn

servicios. Un servicio API es definido como una interfase COM que otras capas pueden requerir

usando la interface factory.

Para que funcione correctamente FireDAC, debe vincular la implementacin de las

interfaces IFDGUIxWaitCursory IFDPhysDrivera su aplicacin.

Para esto, suelte los componentesTFDGUIxWaitCursoryTFDPhysSQLiteDriverLinken el

formulario.

Configurando el Despliegue de la Base de Datos al Mvil

En este punto, ha usado SQLite en su escritorio. Esto hace que la base de datos actual est

localizada en su disco duro local (por ejemplo, C:\Users\Public\Documents\RAD

Studio\12.0\Samples\Data\Employees.s3db). En el Dispositivo mvil, las aplicaciones son sand-

boxed, y generalmente solo puede leer y escribir datos que estn localizados en la

carpeta Documents(para dispositivos iOS) e internalstorage (para dispositivos Android) en

su carpeta de aplicacin.

Para conectarse a la base de datos local en el mvil, necesita realizar las siguientes acciones:

Desplegar la base de datos al Dispositivo mvil.

Cambie la configuracin (para conectarse al archivo de base de datos) a un archivo local

bajo la carpeta Documents(para dispositivos iOS) o internalstorage (para dispositivos

Android).
http://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.ItemAppearancehttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.ItemAppearancehttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.ItemAppearancehttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.Alignhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.Alignhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.Alignhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.UI.TFDGUIxWaitCursorhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.UI.TFDGUIxWaitCursorhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.UI.TFDGUIxWaitCursorhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Phys.SQLite.TFDPhysSQLiteDriverLinkhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Phys.SQLite.TFDPhysSQLiteDriverLinkhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Phys.SQLite.TFDPhysSQLiteDriverLinkhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Phys.SQLite.TFDPhysSQLiteDriverLinkhttp://docwiki.embarcadero.com/Libraries/XE5/en/FireDAC.Comp.UI.TFDGUIxWaitCursorhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.Alignhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/RADStudio/XE5/en/LiveBindings_Designerhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView.ItemAppearancehttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListViewhttp://docwiki.embarcadero.com/Libraries/XE5/en/FMX.ListView.TListView


7/9



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

Antes de que ejecute su aplicacin en el mvil, usted necesita configurar el deployment para

su archivo de base de datos (Employees.s3db).

1. Abrir elDeployment Managerseleccionando Project > Deployment.

2. Seleccione Add Filesy seleccione el archivo de base de datos (por ejemplo,

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

3. Seleccione Employees.s3db, y cambie Remote Patha StartUp\Documents\(para

iOS platform) o assets\(para Android platform).

RemotePath en iOS device platform

RemotePath en Android platform

4. Seleccione la columna Platforms (doble-click la ellipsis [...] en la lnea para

Employees.s3db):

1. Asegrese que iOS Simulatory iOS Deviceo Androidestn presentes para

Employees.s3db.

2. Remueva Win32 desde la lista si est presente (no tiene que copiar los

archivos de base de datos para la plataforma Win32).

5. Seleccione All-Configurations - iOS Deviceplatform o All-Configurations -

Androidplatform y asegurarse que Employees.s3dbest seteado para ser

desplegado a StartUp\Documents\o assets\.

Una vez configurado, cuando ejecute la aplicacin en el dispositivo mvil, el archivo de base de

datos (Employees.s3db) est seteada para desplegarse a la carpeta Documents (para iOS

platform) o internalstorage (para Android platform) en el sandbox area de su app mvil.
http://docwiki.embarcadero.com/RADStudio/XE5/en/Deployment_Managerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Deployment_Managerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Deployment_Managerhttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:AndroidRemotePathAssets.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:RemotePathEmployees.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:AddingDatabaseFile.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/Deployment_Manager


8/9



Modificando Su Cdigo para Conectarse al archivo de Base deDatos Local sobre el Mvil

Las caractersticas bsicas de la aplicacin ahora sern implementadas. El archivo de base de

datos usada en esta aplicacin fu creada en Windows y el archivo no est disponible en sudispositivo mvil a menos que usted lo copie al dispositivo o lo cree en tiempo de ejecucin.

Especificando la Localizacin de la Base de Datos SQLite en elDispositivo Mvil

1. En el Form Designer, seleccione el componente FDConnection1.

2. En elObject Inspector,haga doble click en el evento BeforeConnect.

3. Agregue el siguiente cdigo a ste manejador de evento:

procedureTForm1.FDConnection1BeforeConnect(Sender:TObject);

begin

FDConnection1.Params.Values['Database']:=

'$(DOC)/Employees.s3db';

end;

Note, $(DOC)es lapath variable.

Corriendo Su Aplicacin en el Simulador o en el Dispositivo Mvil

Ahora su aplicacin est lista para correr (seleccione Run >Run).

iOS Android
http://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspectorhttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.BeforeConnecthttp://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.BeforeConnecthttp://docwiki.embarcadero.com/RADStudio/XE5/en/Path_Variables_(FireDAC)http://docwiki.embarcadero.com/RADStudio/XE5/en/Path_Variables_(FireDAC)http://docwiki.embarcadero.com/RADStudio/XE5/en/Path_Variables_(FireDAC)http://docwiki.embarcadero.com/RADStudio/XE5/en/Runhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Runhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Runhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Runhttp://docwiki.embarcadero.com/RADStudio/XE5/en/Path_Variables_(FireDAC)http://docwiki.embarcadero.com/Libraries/XE5/en/Data.DB.TCustomConnection.BeforeConnecthttp://docwiki.embarcadero.com/RADStudio/XE5/en/Object_Inspector


9/9


http://docwiki.embarcadero.com/RADStudio/XE5/en/File:AndroidTRunTime.pnghttp://docwiki.embarcadero.com/RADStudio/XE5/en/File:IPodRunTime.png