Construir una App iOS paso a paso

Hola amigos, en ésta ocasión vamos a desarrollar una aplicación para iOS paso a paso, para éste artículo usaremos la interfaz de un iPhone5, pero bien pueden hacerlo para iPhone estándar y/o para iPad.

Antes de comenzar éste tutorial, quiero comentar, que es requisito contar con una MAC o al menos un servicio como el macincloud para poder compilar y ejecutar nuestra aplicación móvil.

Como ya es mi costumbre, vamos a desarrollar un cliente que consuma un Servicio Web pero desde un dispositivo móvil, vamos a tomar el ejemplo que publiqué hace unos meses (Probando Delphi for iOS) del cual no pude hablar más a fondo debido a que aún era un producto beta pero que me sirvió mucho para aprender un poco de ésta nueva característica que cuenta la más reciente versión de Delphi.

Lo primero que vamos a hacer es crear una aplicación Delphi para Móvil con Firemonkey como se muestra en la siguiente imagen:

Acto seguido, Delphi nos muestra una ventana con diferentes  plantillas de aplicaciones móviles con FireMonkey, donde elegiremos para efectos de éste ejercicio, la plantilla que contiene encabezado y pié de página.

Posteriormente y antes de comenzar a desarrollar nuestra aplicación,  Delphi nos muestra un experto que  nos ayudará a configurar el ambiente de desarrollo para la construcción de aplicaciones móviles para iOS, es decir, como configurar la MAC y RAD Studio para trabajar en conjunto.

Pueden seguir éste excelente artículo de mi buen amigo Germán Estévez (Neftalí) para configurar el entorno de trabajo iOS.

Minimizamos o cerramos el experto y tendremos ya nuestra forma lista para comenzar a escribir nuestra primera aplicación móvil para iOS.

Comenzamos por elegir el dispositivo para el cual vamos a desarrollar nuestra aplicación móvil. En mi caso elegí el iPhone5.

También colocamos un texto en el encabezado de nuestra forma, éste ejemplo será un conversor de monedas a través del consumo de un Servicio Web creado por el Banco de México, el cual nos proporciona el tipo de cambio de algunas monedas.

Ahora necesitamos decidir que objetos vamos a colocar en nuestra forma, en mi caso decidí colocar los siguientes:

• 1 TListBox
• 7 TListBoxItem’s
• 2 TListBoxGroupHeader’s
• 5 TLabel’s
• 2 TEdit’s

También conseguí 6 banderas de los países que vamos (en éste ejemplo) a disponer de paridad cambiaria contra el peso mexicano.

Después de agregar los objetos y acomodarlos según me pareció adecuado, nos ha quedado como se muestra en la imagen.

  El primer paso es agregar el TListBox a nuestra forma y configuramos las siguientes propiedades:

• GroupingKind = gsGrouped
• StyleLookup = transparentlistboxstyle

Damos clic derecho del mouse en el ListBox donde nos mostrará un menú emergente donde seleccionaremos la opción AddItem y agregamos:

• 7 TListBoxItem’s
• 2 TListBoxGroupHeader’s

Continuamos agregando imágenes a los TListBoxItem; en éste ejemplo utilizaremos banderas de cada país del cual se tiene paridad cambiaria con el Peso mexicano, damos clic en la propiedad ItemData del TListBoxItem, damos clic en la propiedad BitMap y nos mostrará una ventana donde podrémos seleccionar la imagen que deseamos. También editamos el texto que se va a mostrar en la propiedad Text.

Adicionalmente colocamos los 2 TEdit y las 5 TLabel como se muestra en la imagen siguiente:

El siguiente paso es  generar nuestra clase que consumirá el Servicio Web del Banco de México y que nos proporcionará las paridades o tipos de cambio de las monedas que vamos a utilizar en nuestra aplicación, el WSDL de éste servicio web es el siguiente:

http://www.banxico.org.mx/DgieWSWeb/DgieWS?WSDL

Vamos a utilizar la forma tradicional de importar el WSDL a nuestra aplicación con el importador de WSDL como se muestra a continuación:

Éste importador genera el código necesario para poder consumir el servicioWeb y ya sólo nos resta escribir el código para que nuestra aplicación se conecte y nos muestre las paridades para cada una de las monedas seleccionadas y usarlas para convertir la cantidad de la moneda extranjera al peso mexicano. Por supuesto, ustedes pueden utilizar otro proveedor de paridades para ajustarlo a su moneda.   Ya tenemos todo para comenzar a escribir nuestro código.

Y como todo lo nuevo, hay algunos detalles que hay que tomar en cuenta a la hora de escribir nuestro código,

por ejemplo:

¿Cómo hacer que nuestra aplicación se ajuste en la pantalla para que no se encime en los contoles donde vamos a capturar el monto a convertir?.

La solución la encontré en uno de los ejemplos que vienen con delphi y se llama «ScrollableForm» el cual se encuentra en el directorio «RAD Studio\11.0\Samples\FireMonkeyMobile».

Se requirió de agregar dos componentes más, un TVertScrollBox y un TLayout para poder ajustar la pantalla cuando se intenta escribir en los controles sin que interfiriera el teclado numérico.

 

{******************************************************************************}
{  código para ajustar los objetos cuando se muestra el teclado en la pantalla }
{******************************************************************************}

procedure THeaderFooterForm.RestorePosition;
begin
  VertScrollBox1.ViewportPosition := PointF(VertScrollBox1.ViewportPosition.X, 0);
  Layout1.Align := TAlignLayout.alClient;
  VertScrollBox1.RealignContent;
end;

procedure THeaderFooterForm.UpdateKBBounds;
var
  LFocused : TControl;
  LFocusRect: TRectF;
begin
  FNeedOffset := False;
  if Assigned(Focused) then
  begin
    LFocused := TControl(Focused.GetObject);
    LFocusRect := LFocused.AbsoluteRect;
    LFocusRect.Offset(VertScrollBox1.ViewportPosition);
    if (LFocusRect.IntersectsWith(TRectF.Create(FKBBounds))) and
       (LFocusRect.Bottom > FKBBounds.Top) then
    begin
      FNeedOffset := True;
      Layout1.Align := TAlignLayout.alHorizontal;
      VertScrollBox1.RealignContent;
      Application.ProcessMessages;
      VertScrollBox1.ViewportPosition :=
        PointF(VertScrollBox1.ViewportPosition.X,
               LFocusRect.Bottom - FKBBounds.Top);
    end;
  end;
  if not FNeedOffset then
    RestorePosition;
end;

procedure THeaderFooterForm.FormCreate(Sender: TObject);
begin
  VertScrollBox1.OnCalcContentBounds := CalcContentBoundsProc;
end;

procedure THeaderFooterForm.FormVirtualKeyboardHidden(Sender: TObject;
  KeyboardVisible: Boolean; const Bounds: TRect);
begin
  FKBBounds.Create(0, 0, 0, 0);
  FNeedOffset := False;
  RestorePosition;
end;

procedure THeaderFooterForm.FormVirtualKeyboardShown(Sender: TObject;
  KeyboardVisible: Boolean; const Bounds: TRect);
begin
  FKBBounds := TRectF.Create(Bounds);
  FKBBounds.TopLeft := ScreenToClient(FKBBounds.TopLeft);
  FKBBounds.BottomRight := ScreenToClient(FKBBounds.BottomRight);
  UpdateKBBounds;
end;

procedure THeaderFooterForm.CalcContentBoundsProc(Sender: TObject;
  var ContentBounds: TRectF);
begin
  if FNeedOffset and (FKBBounds.Top > 0) then
  begin
    ContentBounds.Bottom := Max(ContentBounds.Bottom,
                                2 * ClientHeight - FKBBounds.Top);
  end;
end;
{******************************************************************************}

Scroll Vertical para reajustar la pantalla

Otro detalle era pasar el monto, la bandera y el texto de cada moneda, lo cual fué algo simple de resolver pasando las propiedades al seleccionar la moneda deseada hacia el objeto destino.

 
procedure THeaderFooterForm.lbDolarUSAClick(Sender: TObject); 
begin 
  TC := StringReplace(label1.Text,'

Escribimos el código necesario en el evento OnExit del Edit donde capturamos la cantidad a convertir para que nos muestre el valor en peso de acuerdo a la moneda seleccionada.

 
procedure THeaderFooterForm.Edit2Exit(Sender: TObject);
begin
  valorME := StringReplace(edit2.Text,'

Compilamos y Delphi XE4 hace su trabajo generando todo lo necesario para que nuestra aplicación sea ejecutada en el simulador.

Convertimos dólares a pesos

Convertimos Euros a pesos

Con ésto hemos terminado el primer artículo de una serie que intentará demostrar que se puede desarrollar 4 aplicaciones diferentes utilizando los mismo componentes y el mismo código, espero no defraudarlos 🙂

Los otros tres artículos son:

• Construir una App de escritorio Metrópolis paso a paso
• Construir una App de escritorio OSX paso a paso
• Construir una App de escritorio Windows paso a paso

Happy coding!!!!

Descargas

---

Si lo deseas puedes descargar el código fuente de ésta entrada, espero sea de utilidad.

Ésta entrada y el código fuente son libres para su uso y publicación, lo único que te pido, si te parece justo, es mencionar la fuente de donde se obtuvo.