viernes, 22 de noviembre de 2013

Primera aplicación móvil en XE5 paso a paso.

Programador: Lizarraga "ninio" Marcos.

Nivel codificación: Principiante


Ejemplo: 00000001


Móvil: Motorola Milestone 3 (Droid 3), Android 2.3


Descripción: 

Este ejemplo muestra cómo utilizar las acciones estándar para abrir la aplicación de cámara de su dispositivo Android para tomar una foto y mostrarla. Luego, con otra acción estándar, se abrirá la SheetShare para compartir su imagen a través de correo electrónico, publicar en Facebook, Twitter  y más.
Este ejemplo se puede obtener dentro de los ejemplos de android de xe5 y es el que hizo Fernando Rizzato en "Mobile in action live Argentina".

Aplicación: Didáctica.



Vamos a crear una nueva aplicación móvil en blanco.


Al aceptar nos va a crear un proyecto donde la apariencia en modo de diseño se parece a un móvil. Nos va a ayudar mientras vayamos construyendo nuestra aplicación vamos a tener una noción de como se va a ver la aplicación final dentro de nuestro móvil, se puede elegir entre varios modelos o construir un template propio.


Agregamos: TToolBar, TSpeedButton (2), TActionList y un TImage

Con la combinación Ctrl+Alt+P nos da el foco "Tool Palette". Así que podemos hacer Ctrl+Alt+p escribimos "ToolBar" y dar Enter, así podemos agregar componentes rápidamente a nuestro formulario sin tener que buscarlos en la paleta.

Image 1 (ImgContainer):
La alinemos alClient y le ponemos como nombre "ImgContainer", es donde colocaremos nuestra fotografía luego de tomarla.

SpeedButton 1 (btnCamera):

Lo colocamos en el ToolBar, alineado a la izquierda, margen izquierdo en 10. En la propiedad StyleLookup seleccionamos cameratoolbutton, vemos como el button tiene el icono de camara.

En la solapa de eventos seleccionamos la siguiente acción.

Events > Action > New Standard Action > Media Library > TTakePhotoFromCameraAction



Una vez seleccionada, desplegamos el evento acción y le damos doble clic en el evento OnDidFinishTaking. Este evento se ejecuta luego de tomar la foto y nos entrega en un TBitmap la fotografía tomada, colocamos la foto en ImageContainer.



procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin 
  ImgContainer.Bitmap := Image;
end;

SpeedButton 2 (btnShare):
Lo colocamos en el toolbar y lo alineamos a la derecha, cambien colocamos 10 de margen. Le agregamos la acción standart ShowShareSheetAction y dentro de los eventos de esta acción le asignamos a OnBeforeExecute.



procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
  ShowShareSheetAction1.Bitmap.Assign(ImgContainer.Bitmap);
end;


Ya estamos en condiciones de probar la aplicación, en mi caso voy a usar directamente el dispositivo.

Resultado

En el droid 3 android 2.3 estoy teniendo problemas con el sharedsheet, mientras averiguo o intento hacer que fucione en este hardware les dejo el video de embarcadero sobre este ejemplo, esta en ingles pero creo que lo escencial ya esta escrito.



Conclusión 
  • XE5 nos da un rápido acceso a los sensores del celular sin tener conocimientos de los mismos. 
  • En modo diseño nos permite ver rápidamente como queda el producto final. 
  • Hay que tener en cuenta los margenes y alineaciones, nuestras pantallas ahora giran y difieren en tamaño.
  • Soporta las versiones de android (2.x y 4.x) y todos los iOS, son mas que suficientes.
  • Con solo conectar nuestro celular esta listo para instalar y probar la aplicación. 
  • Con la herramienta ToolAndroid nos podemos bajar los drivers que necesitemos.
  • También permite probar con el Emulador de Android y Simulador de iOS, pero esto se merece un nuevo post. Yo les recomendaría siempre probar en un dispositivo.









7 comentarios:

  1. Buenas noches, la verdad que excelente post, algo simple y sencillo, y la verdad que con xe5 nos ahorro mucho tiempo al programar en android e ios, lo unico que le veo a tu post es que no funciona el enlace a la descarga del codigo completo, no se si es que me tengo que registrar o algo?....
    Espero que me lo expliques...
    Saludos y felicidades por el blog.

    ResponderEliminar
    Respuestas
    1. Gracias por avisar! Ahí puse el link al enlace.

      Podes encontrar mas ejemplos en ingles http://www.embarcadero.com/products/delphi/android-code-samples-xe5#shareSheet

      Yo subí mi experiencia en español para compartir algo de la primera impresión de xe5 móvil.

      Espero que te sirvan los enlace y cualquier cosa no dudes en consultar.

      Eliminar
  2. UN APLAUSO PARA EL ASADOR!!!!!!!!

    Te recontra felicito Marcos, no sabés lo feliz me hace este blog

    Por cierto.... te robo todo....

    ResponderEliminar
    Respuestas
    1. Para eso están! Tengo que subir mas cosas, estoy a full con todo! pero ya estaré experimentando.

      Abrazo!

      Eliminar
  3. muy bueno el tutorial, una consulta, siemrpe tarda mucho al correr los proyectos tanto en el emulador como en el propio dispositivo???

    ResponderEliminar
    Respuestas
    1. Tarda, depende mucho del hardware donde lo estés corriendo, pero tarda por que esta Emulando y no Simulando, esto quiere decir que levanta todos los paquetes nativos del SO a emular y con esto tener una perspectiva real de lo que se esta programando. Si uno simula no podemos estar tan seguro que funcione bien en la vida real.

      Eliminar
  4. Excelente y funciona felicidades necesitamos mas tutoriales para poder avanzar esta herramienta es la mejor

    ResponderEliminar

About Me

Nerd, Geek, estudiante, amante de la fotografía y la música, gamer y... programador.

Popular Posts

Marcos "NP" Lizarraga E.