Upload
crystal-burks
View
325
Download
30
Embed Size (px)
DESCRIPTION
Manual radstudio firemonkey7
Citation preview
Tutorial: Uso LiveBindings para crear una aplicacin FireMonkey Sin Cdigo
LiveBindings es una tecnologa de enlace de datos que le ayuda a desarrollar las bases de datos de
aplicaciones. Este tutorial muestra cmo crear una aplicacin de base de datos pequea pero potente
usando LiveBinding. Usted puede hacer casi todo aqu con unos simples clics de ratn; No se requiere
codificacin.
Este tutorial utiliza la biolife.cds base de datos, por lo general se instala en el directorio de muestras
al inicio | Programas | Embarcadero RAD Studio XE7 | Las muestras y tambin est disponible
con las muestras en SourceForge en: RAD Studio Cdigo de demostracin. Un ejemplo de cdigo
que utiliza una base de datos similar (DBDEMOS) est situado en FishFact (Delphi)ejemplo.
Siga estos pasos para crear una aplicacin de base de datos utilizando LiveBinding:
1. Seleccione Archivo> Nuevo> Aplicacin Multi-Device - Delphi> Aplicacin en
blanco para crear un nuevo proyecto.
2. Arrastre y suelte un ClientDataSet componente en el Diseador de formularios.
3. Agregue los siguientes controles al formulario: una etiqueta, un cuadro de edicin, un memo,
y un control de la imagen de los componentes. Para poder desplazarse por los registros de
la base de datos que eligi para abrir, necesita un adicional TBindNavigator control. En este
punto, su aplicacin debe ser similar a la siguiente imagen.
4. Antes de utilizar LiveBinding, es necesario especificar un archivo de base de datos para
la ClientDataSet componente. Utilice el NombreArchivo propiedad para especificar un
archivo ClientDataSet (* .cds), y seleccione el biolife.cds archivo.
5. Ajuste el activo propiedad a Verdadero.
6. Ahora usted puede simplemente enlazar cada control grfico en el formulario a su campo
apropiado en la base de datos.
1. Seleccione el componente Etiqueta y haga clic en l. A continuacin, seleccione
el lazo Visualmente ... propiedad en el men contextual.
2. El Diseador LiveBindings aparece. Abra el Asistente LiveBindings haciendo clic en
el ltimo botn de los botones de comando en el lado izquierdo.
3. En el Asistente para LiveBindings, seleccione Link a propiedad de componente
con un campo.
4. Seleccione el Label1 componente y el texto de propiedad y haga clic
en Siguiente para continuar.
5. Seleccione el ClientDataSet1 componente como fuente. Haga clic en Siguiente.
6. Seleccione la Especie Nombre de campo y haga clic en Finalizar para completar la
LiveBinding. Haga clic en Siguiente para continuar.
7. Repita los pasos anteriores para conectar el resto de los controles en los formularios de la
siguiente manera:
1. Obligar a la propiedad Text del componente de cuadro de edicin para la Categora
de campo.
2. Obligar a la propiedad Text del componente del memorndum a la Notas de campo.
3. Enlazar la propiedad de mapa de bits del componente de imagen a la grfica.
8. Por ltimo, vincular el navegador se unen a la fuente vinculante asignando el origen de
datos propiedad del Inspector de Objetos para BindSourceDB1.
Nota: Puede vincular los componentes visualmente usando el Diseador LiveBindings.
9. Usted puede ver que los dos nuevos componentes, BindSourceDB1 y BindingsList1, se
han aadido a la forma. Estos componentes no son visuales y son parte del motor
LiveBindings.(Para modificar manualmente los enlaces de la BindingsList1 componente,
haga doble clic en l, pero ese no es el propsito de este tutorial.) Ahora que su aplicacin
debe ser similar a la siguiente imagen.
10. En este punto, puede ejecutar la aplicacin (ya sea elegir Ejecutar> Ejecutar o presione F9).
11. Despus de la aplicacin se est ejecutando, puede desplazarse a travs de los registros de
base de datos, agregue un registro, eliminar un registro, o actualizar la base de datos.
La aplicacin que se ejecuta completado:
Creacin de una aplicacin FireMonkey 3D
1. Seleccione Archivo> Nuevo> Aplicacin Multi-Device - Delphi. En la aplicacin de
mltiples dispositivos asistente, elija Aplicacin 3Dy pulse el Aceptar botn.
2. El Diseador de formularios aparece, mostrando una FMX.Forms.TForm3D.
Adicin y ajuste de componentes
1. Desde la paleta de herramientas, agregue los siguientes componentes FireMonkey 3D
(introduciendo el nombre del componente en la bsqueda de campo y pulsando Return):
Un TLight
Dos TCube
2. En el Diseador de formularios, ajustar la posicin y el tamao de los componentes
FireMonkey 3D para satisfacer sus necesidades:
Para mover un objeto, basta con arrastrar y soltar.
Para girar un componente 3D, utilice los tres azules asas que aparecen al hacer clic en
el componente. Cada mango gira el componente en el plano asociado en el espacio (es
decir, el x, y, z o vrtice). Al hacer clic en un mango, se convierte en rojo para indicar
que es el mango activo. Nota: Tambin puede utilizar las RotationAngle propiedades
en el Inspector de Objetos (x, y, z).
Para cambiar el tamao de un componente, utilice el control de cambiar el tamao, que
es un pequeo cubo azul situado en una esquina de la componente. El Resizer trabaja
en una dimensin a la vez; el Resizer es de color rojo en el lado del cubo que es la
dimensin (activo) seleccionado. Nota: Tambin puede utilizar las propiedades en
el inspector de objetos (porTCube, las propiedades de tamao relacionadas
son profundidad, anchura y altura).
3. Para cambiar el material de los dos cubos:
1. Aadir un TTextureMaterialSource al formulario.
En el Inspector de Objetos, utilizando TTextureMaterialSource, ajustar
la textura de propiedades haciendo clic puntos
suspensivos [...]> Editar. El mapa de bits Editor abre asistente. Haga clic en
la carga botn del Editor de mapa de bits para cargar la textura
deseada. Despus de cargar la textura, haga clic en el Aceptar botn en
el Editor de mapa de bits.
En el inspector de objetos, con el primer cubo en el enfoque, ajuste
el MaterialSource propiedades haciendo clic puntos suspensivos [...]> y elija
el aadidoTTextureMaterialSource de la lista.
TTextureMaterialSource slo aade textura al cubo.
2. Aadir un TLightMaterialSource al formulario.
Para especificar el color y la textura del material, utilizar
los TLightMaterialSource propiedades.
En el Inspector de Objetos, utilizando TLightMaterialSource:
Ajuste la textura de propiedades haciendo clic puntos
suspensivos [...]> Editar. El mapa de bits Editor abre
asistente. Haga clic en la carga de botn en el Editor de mapa de
bits para cargar la textura deseada. Despus de cargar la textura,
haga clic en el Aceptar botn en el Editor de mapa de bits.
Ambiente, difusa, emisivo y especular se establecen de forma
predeterminada, como en la siguiente imagen.
4. El resultado en tiempo de diseo se muestra en la siguiente imagen.
5. En este punto, puede hacer clic F9 para compilar, construir y ejecutar su primera aplicacin
FireMonkey 3D.
Paso 1: Crear una nueva aplicacin de FireMonkey para Android o iOS
1. Seleccione:
Archivo> Nuevo> Aplicacin de mltiples dispositivos - Delphi
Archivo> Nuevo> Aplicacin de mltiples dispositivos - C ++ Builder
La aplicacin multi-dispositivo aparece asistente:
2. Seleccione Aplicacin en blanco. El Diseador de formularios muestra una nueva forma:
3. Seleccione la plataforma de destino del Project Manager.
1. Android: Ver Configuracin del sistema para detectar su dispositivo
Android de utilizar un dispositivo Android. Si usted no tiene un dispositivo Android,
puedes alternativamentecrear un emulador de Android.
2. iOS: Si desea crear un iOS aplicacin, abra la plataforma de destino nodo en
el Project Manager y haga doble clic simulador de iOS (slo para Delphi) o un
dispositivo iOS conectado (ya sea para Delphi o C ++):
Nota: Al seleccionar una plataforma, los componentes no disponible para esta plataforma en
particular aparecen en gris.
Paso 2: Seleccionar un Estilo
1. Seleccione iOS o Android desde el estilo de men desplegable con el fin de definir la vista
principal para mostrar todas las propiedades relacionadas con este estilo.
Nota: Ver Selector de Estilo para ms informacin.
Paso 3: Coloque los componentes en el Formulario de mltiples dispositivos
Recomendamos leer este tutorial antes de empezar componentes colocacin: Tutorial mvil: El uso
de Layout para ajustar el tamao o Orientaciones (iOS y Android) forma diferente.
El primer paso en la creacin de una aplicacin multi-dispositivo est diseando la interfaz de
usuario. Hay muchos componentes reutilizables disponibles en el IDE para la creacin de interfaces
de usuario.
1. Mueva el puntero del ratn sobre la paleta de herramientas, y ampliar el Standard categora
haciendo clic en el signo ms (+) junto al nombre de la categora.
2. Seleccione el TEdit componente y, o bien haga doble clic en TEdit o colquelo en
el Diseador de formularios.
3. Repita estos pasos, pero ahora agregar un TLabel y TButton componente al formulario.
4. Seleccione el cuadro de edicin y ajuste el KillFocusByReturn propiedad en el inspector de
objetos a Verdadero.
5. Seleccione el botn y cambiar el texto de propiedad en el inspector de objetos para "Say
Hello".
6. Ahora debera ver tres componentes en el Diseador de formularios. Aqu es una aplicacin
para iOS:
7. Despus de colocar estos componentes en el Diseador de formularios, el IDE establece
automticamente los nombres de los componentes.
Para ver o cambiar el nombre de un componente, haga clic en el componente en el Diseador
de formularios, y luego encontrar su Nombre propiedad en el inspector de objetos y
laEstructura Ver:
Para una TButton componente, el nombre del componente est configurado por defecto
para Button1 (o Button2 Button3, dependiendo del nmero de TButtons que ha creado en
esta solicitud).
8. La forma en la que se encuentran estos componentes tambin tiene un nombre. Seleccione
el fondo del Diseador de formularios y seleccione el nombre de la propiedad en el Inspector
de Objetos. El nombre del formulario Form1 se muestra (o Form2, Form3, ...). Tambin
puede buscar el nombre de la forma en la Estructura Ver:
Nota: los nombres de formulario establecido por defecto como Form1, Form2, Form3, ... son
de las opiniones Maestro. Vistas de dispositivos se
nombran FormName_ViewName comoForm1_iPhone (iPhone 3.5 "forma)
y Form1_NmXhdpiPh (Android 4" forma de telfono).
9. Usted puede cambiar fcilmente al cdigo fuente seleccionando el Cdigo (para Delphi)
o .cpp / .h (para C ++) pestaa en la parte
inferior del Diseador de formularios.
Tambin puede pulsar el F12 clave para cambiar entre el Diseador de formularios y el Editor
de cdigo:
Delphi C ++
El Editor de cdigo muestra el cdigo fuente que el IDE ha generado. Usted debe encontrar tres
componentes definidos (Edit1, Label1 y Button1):
Delphi C ++
Nota: Al guardar o ejecutar su proyecto, los usos y de incluir clusulas se actualizan (aadir
FMX.StdCtrls para TLabel y FMX.Edit para TEdit).
Paso 4: Agregar Vistas a su proyecto
Si desea personalizar que la solicitud de un determinado tipo de dispositivo, puede hacerlo
utilizando Vistas.
1. Ir al Vistas selector.
2. Seleccione las vistas disponibles que desea agregar simplemente haciendo clic
sobre ellos.
3. Vaya a la vista de hacer los cambios que desee incluir.
Para aadir una vista personalizada, consulte Adicin de una vista personalizada al selector
de Vista.
Paso 5: Escribir un controlador de eventos para un botn Haga clic por el usuario
El siguiente paso es definir un controlador de eventos para el TButton componente. Puede
definir controladores de eventos para su aplicacin de la misma manera a definir
controladores de eventos para plataformas de escritorio. Para el TButton componente, el
caso ms tpico es un clic de botn.
Haga doble clic en el botn en el Diseador de formularios, y RAD Studio crea cdigo
esqueleto que puede utilizar para implementar un controlador de eventos para el evento click
del botn:
Delphi C ++
Ahora puede implementar respuestas dentro de la Button1Click mtodo.
Los siguientes fragmentos de cdigo (Delphi y C ++) implementar una respuesta que muestra
un pequeo cuadro de dilogo que dice "Hola + ": cdigo de Delphi:
Label1. Texto: = 'Hola' + Edit1. Texto + '!';
Cdigo C ++:
Label1 -> Texto = "Hola" + Edit1 -> Texto + "!";
En Delphi, las comillas que rodean literales de cadena deben ser comillas simples rectas (es
decir, 'cadena'). Usted puede usar el signo ms (+ signo) para concatenar cadenas. Si
necesita una comilla dentro de una cadena, puede utilizar dos comillas simples consecutivas
dentro de una cadena, que produce una sola cotizacin.
Mientras que usted est escribiendo cdigo, algunos consejos tooltip aparecen, indicando
el tipo de parmetro que debe especificar. Los consejos tooltip tambin muestran los tipos
de miembros que se admiten en una clase determinada:
Delphi C ++
Paso 6: probar la aplicacin mvil
La implementacin de esta aplicacin ha terminado, por lo que ahora se puede ejecutar la
aplicacin.
Puede hacer clic en Ejecutar botn () en el IDE, pulse F9 o seleccione Ejecutar>
Ejecutar en el men principal RAD Studio:
Delphi C ++
Evale su Aplicacin para Android
Prueba en el emulador de Android
Antes de ejecutar la aplicacin para Android, confirme la plataforma de destino en
el Project Manager:
Prueba en el dispositivo Android
Si completa los pasos descritos en Mobile Tutorial: Configurar el entorno de desarrollo
en Windows PC (Android) antes de la creacin de su nuevo proyecto, ahora se puede
ejecutar su aplicacin para Android en un dispositivo Android conectado a su PC mediante
un cable USB.
Probar la aplicacin iOS
Prueba en el Mac (simulador de iOS)
Por defecto, las aplicaciones FireMonkey Delphi iOS se ejecutan en el simulador de
iOS plataforma de destino. Puede confirmar la plataforma de destino en el Project Manager:
Cuando se ejecuta la aplicacin, que se implementa en el Mac y luego al simulador de iOS
en el Mac. Para nuestra aplicacin, se muestra un formulario con un cuadro de edicin y un
botn.Introduzca el texto en el cuadro de edicin y haga clic en el Say Hello botn:
Nota: En los simuladores de iOS, puede probar solamente sus aplicaciones Delphi.
Las pruebas en un dispositivo iOS Connected
Si completa los pasos descritos en Mobile Tutorial: Configurar el entorno de desarrollo
en el Mac (iOS) y Mobile Tutorial: Configurar el entorno de desarrollo en Windows PC
(iOS) antes de la creacin de su nuevo proyecto, ahora se puede ejecutar su aplicacin para
iOS en un dispositivo iOS conectado a su Mac mediante un cable USB.
Para ejecutar la aplicacin de iOS en un dispositivo iOS conectado, primero seleccione
el dispositivo iOS plataforma de destino para que el Asistente Plataforma despliega la
aplicacin en el dispositivo iOS conectado:
Despus de seleccionar el dispositivo iOS plataforma de destino, ejecute su aplicacin para
iOS haciendo clic en el Run botn en el IDE, presionando F9 o
seleccionando Ejecutar> Ejecutar.
En el Mac, es posible que vea un cuadro de dilogo pidiendo su permiso para firmar el cdigo
de aplicaciones iOS. Seleccione "Permitir siempre" o "Permitir" para firmar su aplicacin.
A continuacin, vaya a su dispositivo iOS y espere a que aparezca su aplicacin FireMonkey
iOS. Est atento a la imagen FireMonkey lanzamiento (el icono est disponible en $ (BDS) \
bin \ ilustraciones \ iOS, y se puede establecer la imagen lanzamiento en Opciones de
la aplicacin):
Cada FireMonkey componente puede tener un propietario, un padre y hijos
En primer lugar, todos los componentes FireMonkey tiene la idea de Propietario, Padres y Hijos. Si
coloca un componente en un formulario, el formulario se convierte en el dueo y padre del
componente.
Si aade componentes (por ejemplo, un botn, una etiqueta, y otros) a otro componente (por
ejemplo, una barra de herramientas), la barra de herramientas es el padre y el dueo de los
botones, de etiquetas, y otros. Usted puede ver esta relacin padre-hijo grficamente representado
en la vista de rbol en la vista de estructura.
El diseo para un nio se define como un valor relativo a su padre. En la siguiente imagen, Label1
es hijo de Toolbar1, y el diseo de Label1 es relativa a Toolbar1.
Uso de propiedades relacionadas con el diseo comn de un Componente FireMonkey
Usando la propiedad Align
De un control de Align propiedad determina si se vuelve a colocar de forma automtica y / o
cambiar de tamao a lo largo de cuatro lados o centro de su matriz, tanto inicialmente como que el
padre se cambia el tamao.
El valor por defecto para el Align propiedad es Ninguno, lo que significa que no hay clculos
automticos se realizan: las estancias de control donde se coloca:
Align = Ninguno
Los valores tpicos para el Align propiedad son los siguientes (Dodgerblue indica el rea para el
nio):
Cima Fondo
Izquierda Correcto
Centro Cliente
Si utiliza un Alinear valor de Arriba, Abajo, Izquierda o Derecha para un componente,
las Alinear propiedades en otros componentes utilizan el rea restante.
El tamao y la forma del rea restante (Client) tambin cambios en funcin de la orientacin del
dispositivo, y con base en el factor de forma (iPhone o iPad).
Las siguientes imgenes muestran el diseo de paisaje (horizontal) y para el retrato (vertical)
cuando se tienen dos (2) componentes que utilizan Top, y un (1) componente que utiliza Client.
El uso de los mrgenes de la propiedad
Mrgenes asegurar la separacin entre los controles colocados automticamente por un padre.
En la siguiente imagen, el lado derecho del componente (Align = Client) utiliza
el Mrgenes propiedad para garantizar el espacio alrededor del componente.
Utilizando la propiedad Padding
Relleno conjuntos de lado el espacio en el interior de la caja de contenidos de los padres. En el
Inspector de Objetos, puede establecer los valores (en pxeles) para el relleno:
Izquierda
Correcto
Fondo
Cima
En la siguiente imagen, el componente principal (que contiene dos regiones) utiliza
el Relleno propiedad para garantizar el espacio dentro del componente de los padres:
Utilizando el Anclas Propiedad
Se necesitan Anchors cuando un control debe mantener su posicin a una cierta distancia de los
bordes de su padre, o debe estirar mientras se mantiene la distancia original entre sus bordes y los
bordes de su matriz. Controles anclados 'palo' a los lados de los contenedores y de estiramiento, de
ser as se especifica.
Anclas Propiedad en el control de edicin
Si usted tiene una edicin 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 edicin de control y el borde de
la forma (barra de herramientas). Anclas le permiten especificar que un control es para permanecer
fija en relacin a los lados de su padre.
Si desea que la edicin de control para mantener la misma posicin relativa en relacin con la barra
de herramientas (su padre), se puede establecer el Anclas propiedad a akLeft,
akTop, akRight.Cuando se cambia el tamao de la barra de herramientas, el control de edicin se
cambia el tamao de acuerdo a la configuracin Anclajes:
iOS
Android
Anclas propiedad para el Control Button
Si usted tiene un control Button en el extremo derecho de la barra de herramientas, es posible que
desee mantener la misma distancia entre el derecho borde del control Button y el borde de la
Forma. Sin embargo, no puede ser que desee para mantener la misma distancia entre
la izquierda borde del control Button y la izquierda borde de la Forma. En este caso, se puede
establecer elAnclas propiedad a akTop, akRight (de-seleccione akLeft), por lo que el control
Button mantiene las mismas distancias con la Barra de herramientas (matriz)
para Top y derecho.
iOS:
Android:
Uso del componente TLayout
TLayout, un componente que no es visible en tiempo de ejecucin, se puede utilizar para su
grupo de controles secundarios para ser manipulado como un todo. Por ejemplo, puede
establecer la visibilidad de un grupo de controles a la vez estableciendo el Visible propiedad del
diseo. TLayout no configura automticamente cualquiera de las propiedades de sus hijos.
Para hacer controles hijos seleccionados de TLayout, utilice la vista de estructura.
Destacar los controles que desea mover. A continuacin, arrastre el grupo de los controles sobre el
control que debe ser el padre de familia, y soltar los controles all. En la vista de estructura, el grupo
de controles ahora son hijos de la nueva matriz:
1. Estado inicial 2. Resalte los controles para mover 3. Arrastre a Padres
Puede utilizar Align, relleno, mrgenes, anclas, y otras propiedades de TLayout para definir el
diseo de un rea especfica. Usted puede utilizar el componente TLayout al igual que el DIVtag
en HTML.
Paso 1: Crear el proyecto
1. Crear un nuevo proyecto. Elija una aplicacin multi-dispositivo para este ejemplo. En el
asistente, seleccione Aplicacin enblanco.
2. En la paleta de herramientas, busque un TListView componente y sultelo en el formulario.
3. Aadir un TPrototypeBindSource componente al formulario.
4. En el formulario, seleccione el ListView1 componente, y despus en el Inspector
de Objetos, establezca la Align propiedad a cliente y la SearchVisible propiedad
a Verdadero.
La forma debe parecerse a la siguiente pantalla, antes de establecer el estilo o Ver en
el Diseador de formularios:
Nota: Para obtener ms informacin acerca de la seleccin del estilo y Vistas,
vase Selector de Estilo y Uso FireMonkey Vistas.
Paso 2: Agregar campos
1. Haga clic con el TPrototypeBindSource componente y seleccione Agregar campo ....
2. Desde el Agregar campo cuadro de dilogo, seleccione ColorsNames y haga clic
en Aceptar.
Paso 3: Crear LiveBindings
1. Abra el Diseador LiveBindings (elija Ver> LiveBindings Diseador) y arrastre
el ColorsName1 propiedad del TPrototypeBindSource al Item.Text propiedad del
ListView para unir estas propiedades.
El componente ListView rellena automticamente sus artculos con nombres de colores del
componente de datos de prototipos:
2. Conjunto TListView.ItemAppearance a ImageListItemRightButton, como sigue:
Ponga nfasis en el componente ListView seleccionndolo
(en Vista Estructura, el Diseador de formularios, o el Inspector de Objetos).
Luego, en el Inspector de Objetos, localice el ItemAppearance propiedad y cambie su
valor a ImageListItemRightButton:
3.
4. Opcionalmente, se puede aplicar un tinte a los TListView botones de texto. Haz lo
siguiente:
Ponga nfasis en el componente ListView seleccionndolo
(en Vista Estructura, el Diseador de formularios, o el Inspector de Objetos).
En la vista de estructura, bajo ItemAppearance, ampliar artculo y luego
seleccione TEXTBUTTON.
En el Inspector de Objetos, localice el tintColor propiedad y establezca su valor en un
valor adecuado, como verdemar.
La siguiente imagen muestra tanto la vista de estructura y al Inspector de Objetos. En
la vista de estructura, de artculos se expande y TEXTBUTTON se selecciona, y en
el Inspector de Objetos, tintColor se establece en verdemar:
5.
6.
7.
Nota: En tiempo de diseo, el color de tinte que aplic al texto botones no podra ser
visible. Para establecer los cambios visibles, elija el Maestro vista en el selector de estilopara
cambiar el estilo actual de su Diseador de formularios ya sea Android o iOS. Para ms detalles,
vea Diseador de formularios.
En este punto en el tutorial, ha configurado el componente ListView para mostrar una imagen en el
lado izquierdo del elemento de texto y para mostrar un botn en la parte derecha del texto del
elemento.
En el siguiente paso, poblar la imagen y el botn con datos de la muestra.
Paso 4: Aadir ms campos (mapas de bits, moneda)
Usted necesita agregar dos campos ms a fin de que el componente de vista de lista muestra una
imagen y un texto en el botn asociado a cada elemento de la lista.
1. Haga clic con el TPrototypeBindSource componente y seleccione Agregar campo ....
2. En el Agregar campo cuadro de dilogo, Ctrl + Clic para seleccionar mapas de
bits y moneda datos de campo. Cuando haya terminado, haga clic en Aceptar.
3. Vaya al Diseador LiveBindings y haga lo siguiente:
1. Conecte el Bitmap1 propiedad de los datos de origen a la creacin de un
prototipo Item.Bitmap propiedad del componente de vista de lista.
Este paso agrega un botn que representa el color y el nmero de cada elemento de la
vista de lista, como el azul 19.
2. Conecte el CurrencyField1 propiedad de los datos de origen a la creacin
de un prototipo Item.ButtonText propiedad del componente de vista de
lista.
Este paso muestra el valor del campo de moneda en el botn situado en la parte derecha
de cada elemento de lista.
Ahora la vista de lista muestra algunos datos de color asociados a cada elemento y tambin muestra
datos de moneda muestra en el botn asociado a cada elemento de la lista.
Paso 5: Agregar el controlador de eventos onButtonClick
Para crear una aplicacin practica, se puede aadir 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 aplicacin multi-dispositivo, seleccione el ListView1 componente.
2. En el Inspector de Objetos, abra el Eventos ficha y, a continuacin, haga doble clic
en OnButtonClick.
3. En el Editor de cdigo, aplicar una adecuada OnButtonClick controlador de eventos.
El siguiente cdigo de ejemplo agrega el controlador de eventos que muestra un cuadro de mensaje
al hacer clic en un elemento ListView:
Delphi:
procedure TForm1 . ListView1ButtonClick ( const Sender :
TObject ;
const AItem : TListViewItem ; const AObject :
TListItemSimpleControl ) ;
begin
ShowMessage ( AItem . Text + ' '+ AItem. ButtonText +'
se hace clic en '.); Finales;
C ++ Builder:
anular __fastcall TForm1 :: ListView1ButtonClick (TObject *
const remitente,
TListViewItem * const AItem, TListItemSimpleControl *
const AObject)
{ShowMessage (AItem -> Texto + "" + AItem ->
ButtonText + "se hace clic".);}
Los resultados
Para ver su aplicacin mvil como aparecera en un dispositivo mvil, es necesario configurar el
sistema como se describe en la adecuada instalacin de tutorial, disponible aqu, y establecer la
vista en un dispositivo mvil de destino (como el iPhone 4 ") en el Formulario Diseador. Luego hay
que completar los pasos necesarios para la implementacin de su aplicacin para la plataforma
mvil de destino.
A continuacin, puede ejecutar la aplicacin en su dispositivo mvil, ya sea presionando F9 o
seleccionando Ejecutar> Ejecutar.
iOS Android
iPad
Galaxy s4
Si hace clic en el azul del tema, la aplicacin muestra el siguiente cuadro de mensaje:
Utilizacin de componentes ListBox para mostrar una vista de tabla en plataformas mviles
En la plataforma mvil, FireMonkey utiliza el FMX.ListBox.TListBox componente para presentar
una vista de tabla en un estilo mvil, como los siguientes ListBoxes.
Nota:
FMX.ListBox.TListBox rendimiento puede ser lento en el mvil. Utilice TListView si quieres
desarrollar aplicaciones ms complejas, especialmente las aplicaciones con grandes bases de
datos.
Lista Llanura
iOS Android (LG E-612)
Lista Agrupados
Nota: Slo los dispositivos iOS compatibles con las listas agrupadas.
Caja de bsqeda
Usted puede agregar un cuadro de bsqueda para un ListBox. Con un cuadro de bsqueda, los
usuarios pueden reducir fcilmente por una seleccin a partir de una larga lista como en los
siguientes cuadros.
Este tutorial describe los pasos bsicos para la construccin de elementos para una vista de tabla
en las aplicaciones multi-dispositivo para plataformas mviles.
Crear artculos por el componente ListBox
1. Seleccionar:
Para Delphi: Archivo> Nuevo> Aplicacin Multi-Device - Delphi> Aplicacin en
blanco
Para C ++ Builder: Archivo> Aplicacin Nuevo> Multi-Device - C ++
Builder> Aplicacin en blanco
2. Seleccione el TListBox componente en la paleta de herramientas y colquelo en
el Diseador de formularios. Para encontrar TListBox, introduzca unos pocos caracteres
(como "TList") en elBuscar cuadro de la paleta de herramientas:
3. Seleccione el TListBox componente en el Diseador de formularios, vaya al inspector de
objetos y seleccione Cliente para la Align propiedad.
4. En el Diseador de formularios, haga clic en el componente TListBox y
seleccione artculos Editor:
5. En el Diseador artculos, haga clic en el Add Item botn varias veces para agregar varios
elementos a la ListBox:
6. Cierre el Diseador de artculos. Ahora usted puede encontrar sus ListBox artculos por el
componente TListBox. Por ejemplo:
Aadir un encabezado
Puede definir un encabezado en el componente TListBox mediante el uso de los siguientes pasos:
Un encabezado por un TListBox
1. En el Diseador de formularios, haga clic en el componente TListBox y seleccione Agregar
elemento> TListBoxHeader:
2. En la paleta de herramientas, seleccione la TLabel componente y colquelo en la parte
superior de la TListBoxHeader componente que acaba de aadir:
3. En el Inspector de Objetos, cambiar las propiedades de la TLabel componente de la
siguiente manera:
Propiedad Valor
Alinear Cliente
StyleLookup toollabel
TextSettings.HorzAlign Centro
Texto (Valor de texto como desee)
Agregar un grupo encabezado / pie de pgina a la Lista
Se puede definir un encabezado de grupo y un pie de pgina de grupo para los artculos en TListBox
de la siguiente manera:
1. En el Diseador de formularios, haga clic en el TListBox componente y
seleccione artculos Editor.
2. En el artculo Designer, seleccione TListBoxGroupHeader de la lista desplegable y, a
continuacin, seleccione Agregar elemento:
3. Seleccione TListBoxGroupFooter de la lista desplegable y seleccione Agregar elemento.
4. Seleccione ListBoxGroupHeader1 en la lista de elementos y haga clic en el arriba botn
varias veces hasta que este elemento se convierte en el primer elemento de la lista:
5. Cierre el cuadro de dilogo. Ahora usted tiene un encabezado de grupo y un pie de pgina
de grupo en el componente TListBox.
Mostrar elementos de lista como elementos agrupados separados
Artculos por un ListBox se pueden mostrar ya sea como una llanura de lista o un Agrupados lista
(slo para plataforma de destino iOS). Esta eleccin es controlado por el GroupingKind propiedad y
el StyleLookup propiedad, como se muestra en el siguiente grfico:
Mostrar elementos como Lista Llanura Mostrar elementos como Lista Agrupados
Llanura = GroupingKind Propiedad Valor Agrupados = GroupingKind Propiedad Valor
listboxstyle = StyleLookup Propiedad Valor transparentlistboxstyle = StyleLookup Propiedad
Valor
Importante: Para los dispositivos iOS, puede especificar cualquiera de los estilos para su
componente TListBox en el Inspector de Objetos. Para los dispositivos Android, puede especificar
slo la lista sin formato.
Puede seleccionar el GroupingKind propiedad y el StyleLookup propiedad en el inspector de objetos
cuando se selecciona el ListBox en el Diseador de formularios.
Aadir una casilla de verificacin u otro accesorio a un artculo ListBox
Cada artculo en un TListBox puede utilizar un accesorio, como marca de verificacin a travs de
la ItemData.Accessory propiedad. La siguiente imagen muestra el valor que se puede asignar a
ItemData.Accessory y el Accesorio asignado:
Puede seleccionar la propiedad de accesorios en el inspector de objetos cuando se selecciona
ListBox artculo en el Diseador de formularios.
Aadir un icono a un elemento ListBox
Cada artculo en un componente ListBox puede contener datos de mapa de bits, como un icono, a
travs de la ItemData.Bitmap propiedad:
Puede seleccionar el mapa de bits propiedad en el inspector de objetos cuando se selecciona la
ListBoxItem en el Diseador de formularios.
Para ver el icono, debe seleccionar un StyleLookup que apoya la Bitmap propiedad. Cambie la
propiedad StyleLookup a listboxitemleftdetail.
Aadir informacin detallada a un elemento
Puede agregar informacin de texto adicional para cada elemento en el componente ListBox.
Especifique texto adicional en el ItemData.Detail propiedad, y seleccione la ubicacin del Texto
Detalle travs del StyleLookup propiedad, como se muestra en la siguiente tabla:
Propiedad StyleLookup Look & Feel
listboxitemnodetail
listboxitembottomdetail
listboxitemrightdetail
listboxitemleftdetail
Ejecucin de su Aplicacin
Ejecutar la aplicacin, ya sea seleccionando Ejecutar> Ejecutar o presionando F9.
Crear su Aplicacin ListBox
1. Seleccionar:
Para Delphi: Archivo> Nuevo> Aplicacin Multi-Device - Delphi> Aplicacin en
blanco
Para C ++ Builder: Archivo> Aplicacin Nuevo> Multi-Device - C ++
Builder> Aplicacin en blanco
2. Seleccione el TListBox componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
3. Seleccione el TListBox componente en el Diseador de formularios, vaya al inspector de
objetos y seleccione Cliente para la Align propiedad.
Aadir elementos a un ListBox de Su Cdigo
Para aadir elementos regulares a un ListBox, puede simplemente llamar a
los elementos. Aadir mtodo como se muestra en el siguiente fragmento de cdigo:
Delphi:
ListBox1. Artculos. Aadir ('Texto para aadir');
C ++:
ListBox1 -> Artculos -> Aadir ("Texto para agregar");
Si desea crear artculos que no sean un elemento simple, o controlar otras propiedades, se puede
crear una instancia del elemento primero y, a continuacin, agregarlo a la lista.
Los siguientes cdigos de muestra aadir elementos a un ListBox, como se muestra en la imagen:
iOS Android (LG E-612)
Delphi:
procedure TForm1 . FormCreate ( Sender : TObject ) ;
var
c : Char ;
i : Integer ;
Buffer : String ;
ListBoxItem : TListBoxItem ;
ListBoxGroupHeader : TListBoxGroupHeader ;
begin
ListBox1 . BeginUpdate ;
for c : = 'a' to 'z' do
begin
// Aadir cabecera ('A' a 'Z') a la List
ListBoxGroupHeader : = TListBoxGroupHeader . Create (
ListBox1 ) ;
ListBoxGroupHeader . Text : = UpperCase ( c ) ;
ListBox1 . AddObject ( ListBoxGroupHeader ) ;
// Aadir elementos ('a', 'aa', 'aaa', 'b', 'bb', 'BBB',
'c', ...) a la lista
para i: = 1 a tres do
comienzan
/ / StringOfChar devuelve una cadena con un nmero
determinado de caracteres que se repiten.
Buffer: = StringOfChar (c, i); // Simplemente aadir
el artculo // ListBox1.Items.Add (Buffer);
// O, puede agregar elementos al crear una instancia de
TListBoxItem solo
ListBoxItem: = TListBoxItem. Crear (ListBox1);
ListBoxItem. Texto: = Buffer; // (anone = 0, amore = 1,
aDetail = 2, aCheckmark=3)
ListBoxItem . ItemData . Accessory : = TListBoxItemData
. TAccessory ( i ) ;
ListBox1 . AddObject ( ListBoxItem ) ; end ; end ;
ListBox1 . EndUpdate ; end ;
C ++:
void __fastcall TForm1 :: FormCreate (TObject * Remitente)
{
Char c;
int i;
bfer de cadena;
TListBoxItem * ListBoxItem;
TListBoxGroupHeader * ListBoxGroupHeader;
ListBox1 -> BeginUpdate (); para (c = 'a'; c Text = UpperCase ( c ) ;
ListBox1 - > AddObject ( ListBoxGroupHeader ) ;
// Aadir elementos ('a', 'aa', 'aaa', 'b', 'bb',
'BBB', 'c', -> -> ->) a la lista
de (i = 1; i
Buffer = StringOfChar (c, i); // Simplemente aadir
el artculo // ListBox1-> Productos-> Aadir (Buffer);
// O, puede agregar elementos al crear una
instancia de TListBoxItem solo
ListBoxItem = nueva TListBoxItem (ListBox1);
ListBoxItem -> Texto = Buffer; // (anone = 0, amore
= 1, aDetail = 2, aCheckmark=3)
ListBoxItem - > ItemData - > Accessory =
static_cast < TListBoxItemData :: TAccessory > ( i ) ;
ListBox1 - > AddObject ( ListBoxItem ) ; } ; } ;
ListBox1 - > EndUpdate ( ) ; }
Crear un men de desbordamiento
Se accede a un men emergente desbordamiento a travs de la barra de accin y se utiliza para
proporcionar acceso a los elementos adicionales o elementos que se utilizan con menos frecuencia.
En FireMonkey, puede implementar fcilmente un men de desbordamiento usando TListBox:
1. Aadir un TToolBar componente en el formulario y establezca la alineacin de Arriba.
2. Coloque tres TSpeedButton componentes en el TToolBar componente:
Por primera TSpeedButton:
Ajuste el Align propiedad a izquierda.
Cambiar el nombre de propiedad para OrganizeButton.
Ajuste el StyleLookup a organizetoolbutton.
Para el segundo TSpeedButton:
Ajuste el Align propiedad a Derecho.
En el inspector de objetos ampliar el Mrgenes nodo y establecer
el derecho de margen a 5.
Cambiar el nombre de propiedad para SearchButton.
Ajuste el StyleLookup a searchtoolbutton.
Para el ltimo TSpeedButton:
Ajuste el Align propiedad a Derecho.
Cambiar el nombre de propiedad para OverflowButton.
Seleccione detailstoolbutton para el StyleLookup propiedad.
3. Cada de una TListBox al formulario.
Agregue cinco TListBoxItem de Artculos Editor.
Compruebe akTop y akRight del Anclas propiedad del TListBox componente.
Ajuste de altura a 220.
Cambiar Nombre de OverflowMenu.
Ajuste el Visible propiedad a False.
4. Durante los primeros cuatro TListBoxItem componentes en TListBox ir
a Object Inspector, ampliar ItemData y definir Bitmap propiedad y cambiar texto alojamiento
hasta el valor de texto que desea.
5. Para el ltimo TListBoxItem establece accesorio para Amore y texto a ms.
6. Aadir un TShadowEffect componente al men de desbordamiento.
Estructura Ver Android LG-E612
Crear el controlador de eventos para el botn de desbordamiento
En el Diseador de formularios, haga doble clic en el OverflowButton componente. Agregue el
cdigo siguiente a este controlador de eventos:
Delphi:
procedure TForm1 . OverflowButtonClick ( Sender : TObject )
;
begin
OverflowMenu . Visible : = not OverflowMenu . Visible ;
//change el estado de visibilidad
if OverflowMenu. Visible then // Se muestra el men de
desbordamiento
begin
ListBox1. SendToBack;
OverflowMenu. BringToFront;
OverflowMenu. ItemIndex: = - 1; // la propiedad
ItemIndex especifica el elemento seleccionado actualmente
(valor predeterminado es -1 que los medios que ningn
elemento est seleccionado)
OverflowMenu. ApplyStyleLookup;
OverflowMenu. RealignContent; // vuelve a alinear
controles del OverflowMenu TListBox los nios TListBoxItem
end;
end;
Aadir un cuadro de bsqueda
Para agregar un cuadro de bsqueda al componente ListBox, haga clic en
el TListBox componente y simplemente seleccione Agregar elemento> TSearchBox en el
men contextual:
Para aadirlo a la barra de accin:
Ajuste el Visible propiedad a False.
Para crear el controlador de eventos para el SearchButton, haga doble clic en l y
aadir el siguiente cdigo:
Delphi:
procedure TForm1 . SearchButtonClick ( Sender : TObject ) ;
begin
SearchBox1 . Visible : = not SearchBox1 . Visible ;
//change el estado de visibilidad
final;
C ++:
anular __fastcall TForm1 :: SearchButtonClick (TObject *
Remitente)
{SearchBox1 -> Visible =! (SearchBox1 -> Visible); //
cambiar el estado de visibilidad}
Ejecucin de su Aplicacin
1. Seleccione:
Ejecutar> Ejecutar
Ejecutar> Ejecutar sin depurar
2. Para invocar el men de desbordamiento, haga clic en los puntos suspensivos vertical en la
barra de accin.
3. Para ver el cuadro de bsqueda, haga clic en el SearchButton.
Android (Samsung Tab 2.0) Android (Samsung Tab 2.0)
Visualizacin del men de desbordamiento Viendo el cuadro de bsqueda
Tutorial mvil: Uso del explorador Web Component (iOS y Android)
Ir hasta Tutoriales mviles: Desarrollo de aplicaciones mviles (iOS y Android)
Para las plataformas mviles, FireMonkey envuelve el componente navegador web como
el TWebBrowser componente. En este tema se describe cmo crear una aplicacin Web Browser
FireMonkey simple para iOS y Android plataformas.
Contenidos
[Ocultar]
1 Diseo de la interfaz de usuario
2 Escribir un controlador de eventos para abrir una pgina Web cuando el usuario cambia la direccin URL en
el control de edicin
o 2.1 Implementar un mtodo comn para abrir una pgina Web
o 2.2 Implementar un controlador de eventos para el evento OnChange
o 2.3 Implementar un controlador de eventos para el botn Atrs
3 Seleccin del teclado virtual adecuada para el navegador Web Application
4 WebBrowser Cdigo mvil de fragmentos
5 Vase tambin
Diseo de la interfaz de usuario
1. Seleccione:
Archivo> Nuevo> Aplicacin Multi-Device - Delphi> Aplicacin en blanco
Archivo> Aplicacin Nuevo> Multi-Device - C ++ Builder> Aplicacin en blanco
2. Seleccione el TToolBar componente en la paleta de herramientas y colquelo en
el Diseador deformularios.
Para encontrar TToolBar, introduzca unos pocos caracteres (como "herramienta") en
el Buscarcuadro de la paleta de herramientas:
3. Despus se le cae el componente, se puede ver el TToolBar componente en la parte
superior del Diseador de formularios. Aqu hay una captura de pantalla despus de
establecer el estilo de iOS en el Diseador de formularios:
4. Seleccione el TButton componente en la paleta de herramientas y colquelo en
el TToolBar.
5. Seleccione el TButton componente en el Diseador de formularios, y despus en
el Inspector de Objetos, establezca la StyleLookup propiedad a priortoolbutton.
El priortoolbutton valor StyleLookup para TButton aade una etiqueta Volver
botn. En los dispositivos IOS, la etiqueta es similar a la siguiente imagen:
Para ms detalles acerca de cmo seleccionar un estilo en aplicaciones multi-
dispositivo, consulte mvil Tutorial: Utilizar un componente Button con diferentes
estilos (iOS y Android).
6. Seleccione el TEdit componente en la paleta de herramientas y colquelo en
el TToolBar. Asegrese de que el tamao del control de edicin es lo suficientemente
amplia como para cubrir la zona de la TToolBar:
7. Seleccione la casilla de edicin en el Diseador de formularios, y despus en el Inspector
de Objetos, establezca la ReturnKeyType propiedad a Hecho, el
KeyboardType propiedad a la URL y el KillFocusByReturn propiedad a Verdadero.
Para obtener ms informacin sobre cmo seleccionar el tipo de teclado virtual ms
apropiado en las plataformas mviles, consulte Seleccin del teclado virtual adecuada para
la aplicacin Web Browser.
8. Seleccione el TWebBrowser componente en la paleta de herramientas y colquelo en el
formulario. Nota: Si el TWebBrowser componente est desactivado, seleccione la
plataforma de destino para Android o iOS.
9. Seleccione el componente navegador web en el Diseador de formularios, vaya al inspector
de objetos y seleccione Cliente para la Align propiedad.
Despus de completar estos pasos, el formulario debe ser similar a la siguiente imagen:
Escribir un controlador de eventos para abrir una pgina Web cuando el usuario cambia la direccin URL en el control de edicin
A diferencia de las plataformas de escritorio, plataformas mviles utilizan el teclado virtual para
introducir texto como en las siguientes imgenes. El usuario puede completar la accin haciendo clic
en "Hecho".
iOS Android
iPad
Android (LG - E612
FireMonkey ofrece muchos tipos de controladores de eventos para cubrir la mayora de las acciones
tomadas por los usuarios. Despus se selecciona el botn "Done", el marco FireMonkey enva
unOnChange evento para el control TEdit. Por otra parte, no hay ningn evento especfico para el
botn "Back". En esta seccin, implementar controladores de eventos para apoyar a ambos
escenarios.
Implementar un mtodo comn para abrir una pgina Web
Antes de implementar controladores de eventos, primero aplicar un mtodo comn para abrir una
pgina Web basada en el texto de propiedades del control de edicin.
1. En el Editor de cdigo, cree la siguiente OpenURL nuevo mtodo privado:
Delphi:
type
TForm1 = Class ( TForm )
ToolBar1 : TToolBar ;
Button1 : TButton ;
Edit1 : TEdit ;
WebBrowser1 : TWebBrowser ;
private
{ Declaraciones privadas}
procedimiento OpenURL;
pblico
declaraciones pblicas}
{final;
C ++ Builder:
privada: declaraciones // usuario
vaco OpenUrl __fastcall ();
2. Implementar el openURL mtodo de la siguiente manera:
Delphi:
procedimiento TForm1. OpenURL;
comenzar
WebBrowser1. Navigate (Edit1. texto);
finales;
C ++ Builder:
anular __fastcall TForm1 :: openURL ()
{WebBrowser1 -> Navigate (Edit1 -> texto);}
Implementar un controlador de eventos para el evento OnChange
1. Crear el controlador de eventos seleccionando el Editar componente (en el Diseador de
formularios), y haga doble clic en el espacio en blanco al lado de la OnChange evento (en
el Inspector de Objetos Eventos pestaa).
El Inspector de Objetos crea un nuevo controlador de eventos denominado Edit1Change:
2. Complete el controlador de eventos agregando el siguiente cdigo:
Delphi:
procedimiento TForm1. Edit1Change (Remitente: TObject):
comienzan
OpenURL;
final;
C ++ Builder:
anular __fastcall TForm1 :: Edit1Change (TObject *
Remitente)
{openURL ();}
Implementar un controlador de eventos para el botn Atrs
Para implementar el nuevo botn de su navegador web, slo tiene que llamar al GoBack mtodo en
el componente navegador web:
Delphi:
procedimiento TForm1. Button1Click (Remitente: TObject);
comenzar
WebBrowser1. GoBack,
finales;
C ++ Builder:
anular __fastcall TForm1 :: Button1Click (TObject *
Remitente)
{WebBrowser1 -> GoBack ();}
El comportamiento bsico ahora se implementa para esta aplicacin Web Browser. Intente ejecutar
la aplicacin en su dispositivo Android, el simulador de iOS, o su dispositivo iOS.
Seleccin del teclado virtual adecuada para el navegador Web Application
Despus de ejecutar su aplicacin de navegador Web primero, es posible darse cuenta de que el
teclado virtual no est optimizado.
iOS proporciona varios teclados virtuales como sigue:
Alfabeto: Por defecto: Direccin de correo
electrnico: NamePhonePad:
Numrico: NumbersAndPunctuati
on: PhonePad: URL:
Android proporciona varios teclados virtuales como sigue:
Alfabeto: Por defecto: Direccin de correo
electrnico: NamePhonePad:
Numrico: NumbersAndPunctuati
on: PhonePad: URL:
El tipo de teclado virtual ms adecuado para los componentes de navegador Web es el URL. Como
ya hemos discutido en Diseo de la interfaz de usuario, los pasos siguientes establecen
la URLcomo el tipo de teclado virtual para el componente navegador web en este
ejemplo. Seleccione la casilla de edicin en el Diseador de formularios, y despus en el Inspector
de Objetos, establezca la KeyboardType propiedad a la URL.
Tutorial mvil: Usando LiveBindings rellenar un ListBox en aplicaciones mviles (iOS y Android)
Ir hasta Tutoriales mviles
Ir hasta LiveBindings en RAD Studio
Este tutorial le gua a travs de los pasos de la conexin de datos a un control ListBox FireMonkey
en sus dispositivos mviles, utilizando LiveBindings.
Contenidos
[Ocultar]
1 Paso 1: Crear el proyecto
2 Paso 2: Creacin de los LiveBindings
3 Los Resultados
4 Vase tambin
Paso 1: Crear el proyecto
En este proyecto, se necesita un cuadro de lista, un rectngulo, y tambin una fuente de unin de
prototipos. Para agregar estos componentes, siga los siguientes pasos:
1. Seleccionar:
Para Delphi: Archivo> Nuevo> Aplicacin de mltiples dispositivos - Delphi
Para C ++: Archivo> Nuevo> Aplicacin de mltiples dispositivos - C ++ Builder
2. Seleccione el TListBox componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
3. Seleccione el componente de cuadro de lista en el Diseador de formularios, y en
el Inspector de Objetos, localice
el DefaultItemStyles.ItemStyle propiedad. Ajstelo a
lalistboxitemrightdetail estilo.
4. Deseleccione el componente de cuadro de lista, haga clic en un rea en blanco del
Diseador de formularios.
5. Seleccione el TRectangle componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
6. Seleccione el componente de rectngulo en el Diseador de formularios, y en el Inspector
de Objetos, establezca la Align propiedad a la parte inferior.
7. Seleccione el componente de cuadro de lista y establezca su Align propiedad a cliente.
8. Ahora soltar un TPrototypeBindSource de la paleta de herramientas hasta el formulario.
En este punto, el formulario debe ser similar a la pantalla de iOS siguiente:
Es necesario agregar datos de muestra de colores y nombres de colores a
la TPrototypeBindSource componente con el fin de apoyar el objetivo de este tutorial y de ligar el
cuadro de lista y el rectngulo.
1. Haga clic con el TPrototypeBindSource componente y, a continuacin, haga clic en Agregar
campo en el men contextual.
2. Seleccione AlphaColors y ColorsNames del Campo de datos de lista y borrar los valores
Aleatorio casilla de verificacin.
Esta operacin se suma la muestra de datos ordenados alfabticamente (valores de color
alfa y nombres).
3. Validar la seleccin haciendo clic en el Aceptar botn. Ahora los datos de la muestra est
listo para ser utilizado a travs LiveBindings.
Paso 2: Creacin de los LiveBindings
Abra el Diseador LiveBindings. El diagrama sin conexiones es similar a la siguiente imagen:
1. Enlazar ColorsName1 de PrototypeBindSource1 a Item.Text de ListBox1. (Instrucciones
ColorsName1 y arrastre el ratn para Item.Text.) Ahora el cuadro de lista muestra
todos los nombres de los colores en la fuente de unin de prototipos.
2. Enlazar ColorsName1 de PrototypeBindSource1 a ItemHeader.Text de ListBox1. Ahora
el cuadro de lista tambin muestra encabezados con todos los nombres de los colores en
la fuente de unin de prototipos.
3. En el Diseador LiveBindings, haga clic en el enlace que
conecta ColorsName1 a ItemHeader.Text.
4. En el Inspector de Objetos, localice el FillHeaderCustomFormat propiedad y
seleccione la subcadena (% s, 0, 1) expresin de enlace de la lista desplegable.
En este punto, la lista de los grupos de la caja de todos los nombres de los colores en
categoras alfabticas:
5. Enlazar AlphaColor1 de PrototypeBindSource1 a Item.LookupData de ListBox1. Esto
asegura que la seleccin del nombre del color tambin seala el valor de color alfa
correcta.
6. Enlazar AlphaColor1 de PrototypeBindSource1 a Item.Detail de ListBox1. Esto asegura
que el valor de color alfa aparece en la parte derecha del elemento del cuadro de lista.
7. Haga clic en el botn de puntos suspensivos [...] en el Rectngulo1 bloque diagrama en
el Diseador LiveBindings, y en la ventana que se abre, escriba Fill.Color. Seleccione
el Fill.colorcasilla de verificacin y haga clic en OK:
8. Enlazar Fill.Color de Rectngulo1 a SelectedValue de ListBox1. Esto asegura cambios de
color de relleno del rectngulo de acuerdo a la seleccin de lista de elementos caja.
Nota: Cuando se trata de obligar Fill.Color a SelectedValue, se abre un cuadro de mensaje de
confirmacin. En este cuadro de mensaje, elija S.
Despus de completar los pasos anteriores, el diagrama LiveBindings ser similar a la siguiente
imagen:
La aplicacin ya est listo para funcionar en el dispositivo mvil.
Los resultados
Para ejecutar la aplicacin, pulse F9 o seleccione Ejecutar> Ejecutar.
Al seleccionar un elemento del cuadro de lista, los cambios de color del rectngulo en consecuencia:
iOS (iPad) Android (LG-E612)
Tutorial mvil: El uso de un componente de calendario para seleccionar una fecha (iOS y Android)
Ir hasta Tutoriales mviles: Desarrollo de aplicaciones mviles (iOS y Android)
Contenidos
[Ocultar]
1 Calendario de plataformas mviles
2 La implementacin de un controlador de eventos para los cambios de los usuarios a la Fecha
3 Vase tambin
Calendario en plataformas mviles
FireMonkey utiliza el TDateEdit componente para envolver un componente de calendario o selector
de fechas para la plataforma de destino mvil:
iOS7 Android
iPad2
LG-E612
Nota: El TCalendarEdit componente utilizado en RAD Studio XE5 o anterior es obsoleto. Utilice
la TDateEdit componente en su lugar.
Para utilizar el TDateEdit componente, siga estos pasos sencillos:
1. Seleccione el TDateEdit componente en la paleta de herramientas, y colocar el componente
en el Diseador de formularios. Para encontrar el componente en la paleta de
herramientas, introduzca los primeros caracteres (como "que") en el cuadro de
bsqueda ():
Despus se le cae el componente, se puede ver el TDateEdit componente en el Diseador
de formularios:
Opcionalmente, en el inspector de objetos, puede configurar las siguientes propiedades
de TDateEdit:
ShowCheckBox: cuando verdadera, muestra una
casilla de verificacin en la
TDateEdit control. Esta casilla de verificacin permite activar /
desactivar elTDateEdit el control en tiempo de ejecucin.
ShowClearButton: cuando verdadera, muestra un
botn en el TDateEdit control. Haga clic en este botn para
borrar los valores en este control en tiempo de ejecucin.
2. Bsicamente, eso es todo. Ejecute la aplicacin ya sea en un simulador / emulador o
dispositivo mvil conectado. Despus de tocar TDateEdit, aparece el control de
calendario, y usted puede seleccionar una fecha.
iOS6 (iPhone5) Android (LG-E612)
La implementacin de un controlador de eventos para los cambios de los usuarios a la Fecha
Despus de que el usuario cambia la fecha, el OnChange evento se activa. Se puede implementar
un controlador de eventos para el OnChange evento para reaccionar a la accin del usuario.
Para implementar el controlador de eventos OnChange '
1. Seleccione el TDateEdit componente.
2. En el Inspector de Objetos, abra el Events pgina y haga doble clic en el espacio vaco al
lado de OnChange.
3. Escribe cdigo como sigue:
Delphi:
procedure TForm25 . DateEdit1Change ( Sender : TObject ) ;
begin
ShowMessage ( FormatDateTime ( 'dddddd' , DateEdit1 .
Date ) ) ;
end ;
C ++ Builder:
anular __fastcall TForm25 :: DateEdit1Change (TObject *
Remitente)
{ShowMessage (FormatDateTime ("dddddd", DateEdit1 ->
Fecha));}
Este cdigo muestra un cuadro de dilogo de mensaje con una fecha
seleccionada. El FormatDateTime funcin 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)
Tutorial mvil: Usando Combo Box Componentes escoger elementos de una lista (iOS y Android)
Ir hasta Tutoriales mviles: Desarrollo de aplicaciones mviles (iOS y Android)
Contenidos
[Ocultar]
1 La implementacin de un selector de aplicaciones multi-dispositivo
2 La construccin de una lista de artculos mediante cdigo
3 Visualizacin de un artculo especfico
4 La implementacin de un controlador de eventos para la seleccin del usuario
5 Vase tambin
La implementacin de un selector de aplicaciones multi-dispositivo
Para las plataformas mviles, FireMonkey envuelve el componente Selector con
el TComboBox componente:
iOS 7 (iPad2) Android (LG-E612)
Para definir un selector y los elementos de la lista asociados:
1. Seleccione una de las siguientes:
Archivo> Nuevo> Aplicacin Multi-Device - Delphi> Aplicacin en blanco
Archivo> Aplicacin Nuevo> Multi-Device - C ++ Builder> Aplicacin en blanco
2. Seleccione el TComboBox componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
Para encontrar TComboBox, introduzca los primeros caracteres ("Com") en el cuadro de
bsqueda de la paleta de herramientas:
3. Despus se le cae el componente, se puede ver el componente TComboBox en el
Diseador de formularios.
Haga clic con el TComboBox componente y seleccione artculos Editor ...:
4. Para definir los elementos, haga clic en Agregar elemento varias veces.
5. En la vista de estructura, seleccione ListBoxItem1 (el primer elemento de la lista).
6. En el Inspector de Objetos, editar el texto inmuebles en ListBoxItem1.
En este ejemplo (los cincuenta estados de los EE.UU.), introduzca "Alabama" como el
primer elemento de la lista:
7. Edite otros artculos, as, como Alaska, Arizona, Arkansas, California, Colorado, y as
sucesivamente.
8. Ejecutar la aplicacin en su plataforma de destino mvil elegido (simulador de iOS (para
Delphi solamente), iOS dispositivo, Android emulador o dispositivo Android).
Despus de tocar TComboBox, aparece el control de selector, y se puede seleccionar un
elemento.
La construccin de una lista de artculos mediante cdigo
Para crear una lista de elementos mediante cdigo, debe implementar el onFormCreate controlador
de eventos de la siguiente manera:
Delphi:
procedure TForm27 . FormCreate ( Sender : TObject ) ;
begin
ComboBox1 . Items . Add ( 'Alabama' ) ;
ComboBox1 . Items . Add ( 'Alaska' ) ;
ComboBox1 . Items . Add ( 'Arizona' ) ;
ComboBox1 . Items . Add ( 'Arkansas' ) ;
ComboBox1 . Items . Add ( 'California' ) ;
// Otros estados pueden enumerar aqu
ComboBox1. Artculos. Aadir ('Virginia');
ComboBox1. Artculos. Aadir ('Washington');
ComboBox1. Artculos. Aadir ('West Virginia');
ComboBox1. Artculos. Aadir ('Wisconsin) ;
ComboBox1. Artculos. Aadir ('Wyoming');
finales;
C ++ Builder:
void __fastcall Otros estados pueden enumerar Virginia ");
ComboBox1 -> Artculos -> Aadir (" Wisconsin ");
ComboBox1 -> Artculos -> Aadir (" Wyoming ");}
Viendo un artculo especfico
El elemento seleccionado es especificado 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" en el cdigo de ejemplo
siguiente), especifique ItemIndex de la siguiente manera:
Delphi:
procedure TForm27 . FormCreate ( Sender : TObject ) ;
begin
ComboBox1 . Items . Add ( 'Alabama' ) ;
ComboBox1 . Items . Add ( 'Alaska' ) ;
ComboBox1 . Items . Add ( 'Arizona' ) ;
ComboBox1 . Items . Add ( 'Arkansas' ) ;
ComboBox1 . Items . Add ( 'California' ) ;
// Otros estados pueden enumerar aqu
// ndice de quinto elemento es "4"
ComboBox1. ItemIndex: = 4;
final;
C ++ Builder:
void __fastcall Otros estados pueden enumerar aqu
// ndice de quinto elemento es "4"
ComboBox1 -> ItemIndex = 4;}
Si usted no sabe el valor del ndice, se puede encontrar el valor utilizando el IndexOf mtodo de la
siguiente manera:
Delphi:
procedure TForm27 . FormCreate ( Sender : TObject ) ;
begin
ComboBox1 . Items . Add ( 'Alabama' ) ;
ComboBox1 . Items . Add ( 'Alaska' ) ;
ComboBox1 . Items . Add ( 'Arizona' ) ;
ComboBox1 . Items . Add ( 'Arkansas' ) ;
ComboBox1 . Items . Add ( 'California' ) ;
// Otros estados pueden enumerar aqu
ComboBox1. ItemIndex: = ComboBox1. Artculos. IndexOf
('California');
finales;
C ++ Builder:
void __fastcall Otros estados pueden enumerar aqu
ComboBox1 -> ItemIndex = ComboBox1 -> Artculos -> IndexOf
("California");}
La implementacin de un controlador de eventos para la seleccin del usuario
Despus de que el usuario selecciona un elemento, el OnChange evento se activa. Para responder
a la accin 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. Seleccione el TMemo componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
2. En el Inspector de Objetos, establezca la TMemo.Align propiedad a Monte.
Para implementar un controlador de eventos OnChange:
1. Seleccione el TComboBox componente.
2. En el Inspector de Objetos, abra el Events pgina y haga doble clic en el espacio vaco al
lado de OnChange.
3. El Editor de cdigo se abre. Escribe cdigo como sigue:
Delphi:
procedimiento TForm27. ComboBox1Change (Remitente: TObject);
comenzar
Memo1. Lneas. Inserte (0, (Formato ('fue seleccionado% s
en el ndice% d del artculo.', [ComboBox1. seleccionada.
Texto,
ComboBox1. ItemIndex])));
terminar;
C ++ Builder:
anular __fastcall TForm27 :: ComboBox1Change (TObject *
Remitente)
{Memo1 -> Lneas -> Insert (0, "elemento" + ComboBox1 ->
Seleccionado -> Texto + "en el ndice" + IntToStr (ComboBox1
-> ItemIndex) + "fue seleccionado . ");}
Este controlador de eventos muestra un dilogo de mensaje que indica el elemento seleccionado.
En el cdigo de Delphi, el Formato funcin devuelve una cadena con formato montado a partir de
una cadena de formato y una serie de argumentos:
Android (LG - E612) iOS6 (iPad)
Tutorial mvil: El uso de un componente MultiView para Mostrar Alternar vistas de la Informacin (iOS y Android)
Ir hasta Tutoriales mviles: Desarrollo de aplicaciones mviles (iOS y Android)
Contenidos
[Ocultar]
1 Sobre el Componente TMultiView
o 1.1 Maestro Panel de Presentacin Modos
1.1.1 Modo de cajn
1.1.2 Modo Popover
1.1.3 Plataforma Modo Comportamiento dependiente
1.1.4 Modo personalizado
2 El diseo de la interfaz de usuario
o 2.1 Disear el Maestro Pane
o 2.2 El diseo del panel Detalle
o 2.3 Configuracin de las Propiedades TMultiView componentes
o 2.4 Pasos finales
3 Ejecutar la aplicacin Ejemplo
4 Mobile muestras de productos que uso TMultiView
5 Vase tambin
Acerca del Componente TMultiView
El FMX.MultiView.TMultiView componente representa un recipiente (el panel principal) para otros
controles, y proporciona una forma para que usted pueda fcilmente presentes vistas alternativas de
informacin. El TMultiView componente le permite implementar una interfaz maestro-detalle, que
puede ser utilizado para cualquier plataforma de destino apoyado.
El panel principal puede mostrar una coleccin de controles visuales, tales como cuadros de
edicin, etiquetas, listas, y as sucesivamente.
El panel de detalles tpicamente muestra la informacin basada en las propiedades de los
controles en el panel principal.
La siguiente pantalla muestra un ejemplo de interfaz maestro-detalle. En el panel principal (el panel
atracado izquierda), se introduce una posicin geogrfica y, a continuacin, haga clic
en Buscar para hacer que el panel de detalles (panel derecho) para ver el mapa Google
correspondiente.
Maestro Panel de Presentacin Modos
El 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 presentacin panel
principal como se describe en la siguiente tabla:
TMultiView.Mode Maestro Panel de Presentacin
Cajn Cajn (Push / Overlap)
Panel Panel acoplado
PlatformBehaviour (vase el cuadro siguiente)
Popover Men emergente
Personalizado Para obtener ms informacin, consulte el Modo
personalizado subseccin.
Nota: En tiempo de diseo, despus de cambiar el TMultiView.Mode valor de la propiedad en
el inspector de objetos, el panel principal podra llegar a ser invisible. Para solucionar este problema,
en el Diseador de formularios, seleccione la TMultiView componente, y despus en el Inspector
de Objetos, establezca el Visible propiedad a Verdadero.
Modo de cajn
Si establece el TMultiView.Mode propiedad
a cajn (usando TDrawerAppearance.Mode = OverlapDetailView), el panel
principal se oculta 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:
Modo Popover
Tambin puede establecer la TMultiView.Mode propiedad a Popover para hacer el panel principal
de un men emergente que aparece al lado del botn principal especificado en
elTMultiView.MasterButton propiedad.
Importante: En el modo Popover, debe establecer el TMultiView.MasterButton propiedad. Esta
propiedad se refiere a un elemento de la interfaz de usuario que muestra u oculta el panel
principal. En la pantalla de arriba, el botn principal es el Mostrar / Ocultar botn.
Plataforma Modo Comportamiento dependiente
Usted puede dejar que la aplicacin selecciona automticamente el modo de presentacin panel
principal, si el TMultiView.Mode propiedad se establece en PlatformBehaviour. Para esta
configuracin, el comportamiento de la aplicacin depende del tipo y orientacin del dispositivo,
como se describe en la siguiente tabla:
Tipo de dispositivo Orientacin dispositivo Maestro Panel de Presentacin
Telfono Paisaje, Retrato Cajn (push / superposicin)
Tablet Paisaje Panel acoplado
Tablet Retrato Cajn (push / superposicin)
Modo personalizable
En el modo personalizado, puede personalizar la presentacin panel principal para cumplir con sus
tareas. Para personalizar la presentacin panel principal, realice los siguientes pasos bsicos:
1. Declare su propia clase, como MyPresentationClass que desciende
desde TMultiViewPresentation o de otras clases que fueron declaradas en la unidad
FMX.MultiView.Presentations.
2. En el MyPresentationClass, opcionalmente, anular los
siguientes mtodos virtuales definidos en la clase base:
DoOpen
DoClose
GetDisplayName
DoInstall
DoUninstall
Estos mtodos definen el comportamiento panel principal.
3. En el Diseador de formularios, seleccione la TMultiView componente, y despus en
el Inspector de Objetos, establezca su propiedad Modo de encargo.
4. Implementar el onFormCreate controlador de eventos de la siguiente manera:
Delphi:
procedure TForm1 . FormCreate ( Sender : TObject ) ;
begin
MultiView1 . CustomPresentationClass : =
MyPresentationClass ;
end ;
C ++ Builder:
void __fastcall TForm1 :: FormCreate ( TObject * Sender
)
{
MultiView1 - > CustomPresentationClass = __classid (
MyPresentationClass ) ;
}
Este tema le ayuda a desarrollar una sencilla aplicacin que muestra el uso de
la TMultiView componente.
El diseo de la interfaz de usuario
1. Seleccione Archivo> Nuevo> FireMonkey Aplicacin Multi-Device - Delphi> Aplicacin
en blanco o Archivo> Nuevo> Aplicacin FireMonkey Multi-Device - C ++
Builder>Aplicacin en blanco.
2. Seleccione el TMultiView componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
3. Cada de otros controles, como botones, cuadros de edicin o cualquier otro control que
necesita sobre el recipiente MultiView.
4. En la paleta de herramientas, seleccione un componente que desea utilizar como un panel
de detalles (como TPanel), y colocar los controles en este panel.
5. En el Inspector de Objetos, especifique las propiedades apropiadas
del TMultiView componente.
Para aclarar este procedimiento, las siguientes secciones consideran un ejemplo particular: una
aplicacin que controla la cmara del dispositivo mvil.
Disear el Maestro Pane
1. Seleccione el TMultiView componente en la paleta de herramientas y colquelo en
el Diseador de formularios.
2. Cada de dos TButton componentes en el TMultiview contenedor, y despus en
el Inspector de Objetos especificar las siguientes propiedades de los botones:
Establezca el Nombre propiedad a bStartCamera y bStopCamera,
respectivamente.
Ajuste el texto propiedad a Comience Cmara y Detener
la cmara, respectivamente.
3. Cada de una TLabel componente en el TMultiview contenedor, y despus en el Inspector
de Objetos, establezca su texto propiedad a Tipo de cmara:.
4. Cada de dos TButton componentes en el TMultiview contenedor, y despus en
el Inspector de Objetos especificar las siguientes propiedades de los botones:
Establezca el Nombre propiedad a bFrontCamera y bBackCamera,
respectivamente.
Ajuste el texto propiedad a Frente y Atrs, respectivamente.
El diseo del panel Detalle
1. Seleccione el TPanel componente en la paleta de herramientas y colquelo en el Diseador
de formularios.
2. En el Inspector de Objetos, establezca la TPanel.Align propiedad a cliente.
3. La cada de la TCameraComponent en el TPanel contenedor.
4. La cada de la TImage en el TPanel contenedor, y establezca las siguientes propiedades:
Nombre = imgCameraView
Align = Cliente
Consejo: Ponga todos los elementos del panel de detalles en un recipiente nico
(un TPanel componente en nuestro ejemplo). Este recipiente se debe especificar en
elTMultiView.TargetControl propiedad.
Nota: No se recomienda poner controles nativos en el panel de detalles, ya que no son compatibles
con el orden Z de la forma: un control natal es siempre en la parte superior de otros controles
disponibles en el formulario.
Establecer las propiedades de TMultiView componentes
En el Diseador de formularios, seleccione la TMultiView componente, y despus en el Inspector
de Objetos, establezca las siguientes propiedades:
TargetControl = Panel1
Modo = Cajn
Ampliar el DrawerOptions nodo, y establecer el modo de propiedad a OverlapDetailView.
Ampliar el ShadowOptions nodo, y establecer el color de propiedad a beige. (Esta propiedad
define el color de la sombra del panel principal. Se puede utilizar cualquier color disponibles.)
Pasos finales
Para completar el desarrollo de la aplicacin, se debe implementar controladores de eventos para
los botones de aplicacin y la GetImage mtodo privado que obtiene una imagen de la cmara
del dispositivo.
Para implementar los controladores de eventos OnClick
1. En el Diseador de formularios, haga doble clic en la Cmara de inicio botn e inserte el
siguiente cdigo:
Delphi:
procedimiento TForm7. bStartCameraClick (Remitente:
TObject);
comenzar
CameraComponent1. Activo: = cierto;
final;
C ++ Builder:
anular __fastcall TForm7 :: bStartCameraClick (TObject *
Remitente)
{CameraComponent1 -> Activo = verdadero;}
2. Haga doble clic en la cmara Deje botn e inserte el siguiente cdigo:
Delphi:
procedimiento TForm7. bStopCameraClick (Remitente:
TObject);
comenzar
CameraComponent1. Activo: = false;
final;
C ++ Builder:
anular __fastcall TForm7 :: bStopCameraClick (TObject *
Remitente)
{CameraComponent1 -> Activo = false;}
3. Haga doble clic en el Frente botn e inserte el siguiente cdigo:
Delphi:
procedure TForm7 . bFrontCameraClick ( Sender : TObject
) ;
begin
CameraComponent1 . Active : = False ;
CameraComponent1 . Kind : = FMX . Media . TCameraKind
. FrontCamera ;
CameraComponent1 . Active : = True ;
end ;
C ++ Builder:
anular __fastcall TForm7 :: bFrontCameraClick (TObject *
Remitente) {//
seleccione Frente Camera
CameraComponent1 - > Active = false ;
CameraComponent1 - > Kind = TCameraKind ::
ckFrontCamera ;
CameraComponent1 - > Active = true ;
}
4. Haga doble clic en el nuevo botn, e inserte el siguiente cdigo:
Delphi:
procedure TForm7 . bBackCameraClick ( Sender : TObject
) ;
begin
CameraComponent1 . Active : = False ;
CameraComponent1 . Kind : = FMX . Media . TCameraKind
. BackCamera ;
CameraComponent1 . Active : = True ;
end ;
C ++ Builder:
anular __fastcall TForm7 :: bBackCameraClick (TObject *
Remitente) {//
seleccione Atrs Camera
CameraComponent1 - > Active = false ;
CameraComponent1 - > Kind = TCameraKind ::
ckBackCamera ;
CameraComponent1 - > Active = true ;
}
Para implementar el controlador de eventos onSampleBufferReady
En el Diseador de formularios, haga doble clic en el CameraComponent1 y aplicar el
siguiente cdigo:
Delphi:
procedure TForm7 . CameraComponent1SampleBufferReady (
Sender : TObject ;
const ATime : Int64 ) ;
begin
TThread . Synchronize ( TThread . CurrentThread ,
GetImage ) ;
end ;
C ++ Builder:
anular __fastcall TForm7 ::
CameraComponent1SampleBufferReady (TObject * Sender,
const __int64 ATIME)
{GetImage ();}
Para el TForm7 clase, debe implementar el mtodo privado GetImage. El controlador de eventos
onSampleBufferReady llama a este mtodo para obtener la imagen de la cmara del dispositivo.
Haz lo siguiente:
1. En la seccin privada de la TForm7 clase, declarar la GetImage mtodo:
Delphi:
privados
{declaraciones privadas}
procedimiento GetImage;
C ++ Builder:
privada: declaraciones // usuario
vaco getImage __fastcall ();
2. Implementar el GetImage mtodo de la siguiente manera:
Delphi:
procedimiento TForm7. GetImage;
comenzar
CameraComponent1. SampleBufferToBitmap (imgCameraView.
Bitmap, Verdadero);
finales;
C ++ Builder:
anular __fastcall TForm7 :: GetImage ()
{CameraComponent1 -> SampleBufferToBitmap
(imgCameraView -> Mapa de bits, verdadera);}
Ejecutar la aplicacin Ejemplo
Para ejecutar esta aplicacin, haga lo siguiente:
1. En el Project Manager, seleccione la plataforma de destino (con el apoyo de plataformas:
Android o iOS).
2. Presione Mays + Ctrl + F9 para ejecutar la aplicacin sin depurar.
3. Para abrir el panel principal, deslizar derecha desde el borde izquierdo de la pantalla del
dispositivo.
4. Para activar la cmara del dispositivo, en el panel principal, haga clic en Inicio de
la cmara.
5. Opcionalmente, se puede seleccionar la cmara frontal o trasera (si est disponible)
utilizando el Frente o Volver botn, respectivamente.
Para cerrar el panel principal, deslcelo hacia la izquierda.
Tutorial mvil: Utilizacin de componentes ficha para mostrar pginas (iOS y Android)
Ir hasta Tutoriales mviles: Desarrollo de aplicaciones mviles (iOS y Android)
Aqu se definen por FMX.TabControl.TTabControl, que es un contenedor que puede contener
varias pginas de ficha. Cada pestaa puede contener ningn tipo de control como un elemento de
interfaz de usuario. Puede ocultar la pestaa de estas pginas, y cambiar pginas sin mostrar
pestaas.
Para cada pestaa, puede especificar:
Una etiqueta de texto - tanto para iOS y Android
Iconos predefinidos - para iOS solamente
Los iconos personalizados - tanto para iOS y Android
Contenidos
[Ocultar]
1 Utilizando el estilo nativo de aqu en iOS y Android
2 Proyectos Tab Pginas Usando el Diseador de formularios
o 2.1 Comparacin de los Parmetros de la ficha en iOS y Android
3 Utilizando personalizados iconos multi-resolucin para sus ms aqu
o 3.1 Viendo Multi-Resolucin iconos personalizados en la ms aqu
o 3.2 El uso de un solo Resolucin de mapa de bits para un icono personalizado
4 Definicin de controles dentro de un TabControl
5 Cambio de la pgina en tiempo de ejecucin
o 5.1 Por el Usuario Aprovechar el Tab
o 5.2 Por acciones y un ActionList
o 5.3 Por Cdigo Fuente
5.3.1 Asignar una instancia de TTabItem a la propiedad activeTab
5.3.2 Cambiar la propiedad TabIndex a un valor diferente
5.3.3 Si se define ChangeTabAction, puede ejecutar una accin en su cdigo
6 Vase tambin
Usando el estilo nativo de aqu en iOS y Android
. Este tutorial muestra fichas con el mismo estilo tanto en iOS y Android, pero no se recomienda esta
prctica
Le recomendamos que usted observa el estilo nativo de cada plataforma, de la siguiente manera:
En Android:
Aqu se colocan habitualmente en la parte superior de la pantalla (por lo que debe
establecer TTabPositionya sea para arriba o para PlatformDefault).
Aqu tradicionalmente slo muestran texto. Sin embargo, FireMonkey permite especificar
iconos personalizados que se muestran en las fichas (vase Uso de encargo iconos multi-
resolucin para sus msaqu).
En iOS:
Aqu se muestran normalmente en la parte inferior de la pantalla (por lo que debe
establecer TTabPositionya sea para la parte inferior o para PlatformDefault).
Artculos Tab siempre muestran el texto y un icono, que se puede ajustar a travs de
la StyleLookuppropiedad para cada ficha.
Nota: Puede utilizar el PlatformDefault valor del TTabPosition enumeracin para ajustar la posicin
del tabulador de acuerdo con el comportamiento predeterminado de la plataforma de
destino. CuandoPlatformDefault se establece para TTabPosition:
En aplicaciones de iOS, pestaas estn alineados en el borde inferior de la TTabControl.
En aplicaciones de Android, pestaas estn alineados en el borde superior de la TTabControl.
Proyectos Tab Pginas Usando el Diseador de formularios
Para crear pginas con pestaas en su aplicacin, utilice el TTabControl componente con los
siguientes pasos:
1. Seleccionar:
Para Delphi: Archivo> Nuevo> Aplicacin de mltiples dispositivos -
Delphi> Aplicacin en blanco
Para C ++: Archivo> Nuevo> Aplicacin de mltiples dispositivos - C ++
Builder> Aplicacin en blanco
2. En Vistas de campo en el Diseador de formularios, crear una vista para cada plataforma
desea apoyarnos. Este tutorial utiliza un iOS y una vista Android.
3. Seleccione TTabControl de la paleta de herramientas:
4. Despus se le cae el TTabControl, un vaco TabControl se muestra en el Diseador de
formularios (puede que tenga que ajustar manualmente la posicin del TabControl):
iOS
Android
5. Normalmente, las aplicaciones que utilizan TabControl utilizan la pantalla
completa para mostrar las pginas.
Para ello, es necesario cambiar la alineacin predeterminada del TabControl. En
el Inspector de Objetos, cambie el Align propiedad del TabControl al Cliente:
6. Haga clic con el TabControl y seleccione artculos Editor ... en el men
contextual:
7. Haga clic en Agregar elemento tres veces, por lo que ahora usted tiene tres
instancias de TabItem aqu. Cierre el cuadro de dilogo.
8. En el Diseador de formularios, seleccione la primera TabItem y cambiar
su StyleLookup propiedad:
iOS7
Android
10.
11. Usted puede colocar cualquier componente en cada pgina.
Para ir a una pgina diferente, basta con hacer clic en la pestaa que desee en el
Diseador de formularios, o cambiar el activeTab propiedad en el Inspector de
Objetos::
12. Para cambiar la ubicacin de las pestaas, seleccione la TabPosition propiedad
para el componente TabControls.
Para cada ficha, puede seleccionar cualquiera de los siguientes valores de la
propiedad TabPosition en el Inspector de Objetos:
Comparando la ficha Configuracin en iOS y Android
Las siguientes figuras muestran dos aplicaciones con los
mismos TabPosition ajustes (Arriba, Abajo, puntos, y ninguno) en iOS y Android. Sin
embargo, debe establecer los diferentes ajustes de la ficha apropiados para cada
plataforma mvil, como se indica en #using el estilo nativo de aqu en iOS y Android.
Cima
iOS Android
Aqu se muestran en la parte superior.
Fondo
iOS Android
Aqu se muestran en la parte inferior.
Puntos
iOS Android
No se muestran aqu.
En su lugar, tres puntos ([...]) se muestran para indicar pginas adicionales.
Ninguno
iOS Android
No hay aqu o puntos se muestran en tiempo de ejecucin, aunque se pueden ver en tiempo de
diseo.
Pgina slo puede cambiarse a travs de cdigo o accin.
Plataforma por defecto
iOS Android
Aqu se muestran con sus ajustes por defecto de la plataforma.
Usando personalizada multi-resolucin de los iconos para tus pestaas
. Puede utilizar iconos personalizados multi-resolucin, as como el texto de encargo en
pestaas en su aplicacin de
este tutorial se muestra cmo construir las siguientes tres fichas que tienen iconos y el
texto de encargo:
Notas:
En Android aplicaciones, iconos predefinidos no son compatibles, por lo que debe
utilizar iconos personalizados.
En iOS aplicaciones, puede utilizar cualquiera de los iconos predefinidos o iconos
personalizados.
Para utilizar iconos personalizados a cada iOS o Android, seleccione los dispositivo
iOS o Android de diseo apropiados en el Diseador de formularios, establezca
la StyleLookup propiedad de TTabItem a tabitemcustom, especificar su icono
personalizado como se describe en esta seccin, y luego construir su aplicacin.
Para iOS, puede utilizar nuestros iconos predefinidos ajustando
el StyleLookup propiedad de TTabItem al icono de su eleccin, tales
como (tabitemsearch).
Los glifos personalizados utilizados en esta seccin estn disponibles en un archivo zip
que se entrega en tu $ (BDS) \ Images \ GlyFX directorio.
Los tres archivos PNG utilizados aqu se encuentran en el directorio de Aero:
users_32 (Gente)
unlock_32 (Seguridad)
![[A5] RADRAD Studio XE2 クロスプラットフォーム開発edn.embarcadero.com/jp/article/images/41633/a5.pdf · C++Builder Delphi FireMonkey Windows Mac OS iOS. Managed RIA FireMonkey](https://img.pdfslide.tips/doc/110x75/5fbec0a7c996e9791b1fe435/a5-radrad-studio-xe2-fffffffffecedn-cbuilder-delphi.jpg)
