Mes: marzo 2012

Aplicaciones Universales (iPhone & iPad) [MonoTouch III]

 

Buenas a todos,

hoy vamos a ver como crear una aplicación Universal, es decir, que tenga una vista específica para iPhone y otra para iPad. Es un proceso realmente sencillo y veremos como podemos compartir Outlets y Actions, propiedades y eventos respectivamente, entre ambos dispositivos.

En primer lugar, abrimos MonoDevelop y creamos un proyecto Universal: MonoDevelop->Universal->MonoTouch->Single View Application-Universal. Lo llamamos, por ejemplo, HelloUniversal.

Lo primero que podemos observar es que con esta plantilla, se genera un solo controlador y dos archivos de vista asociados, uno para iPhone y otro para iPad.

 


A continuación, salvamos los tres ficheros que hemos modificado y volvemos a MonoDevelop. Abrimos el fichero HelloUniverasalViewController.cs y en primer lugar, creamos el método que servirá de controlador de evento:

protected void ButtonPulsame_Click(object o, EventArgs e)

{

this.labelOutput.Text=«Click” «+DateTime.Now.ToShortTimeString();

}

Lo siguiente que haremos, será asignar el método al controlador de evento TouchUpInside en el método ViewDidLoad (que como he comentado en entradas anteriores, se ejecuta cuando se carga la vista completamente).

 

public override void ViewDidLoad ()

{

base.ViewDidLoad ();

this.buttonPulsame.TouchUpInside+=ButtonPulsame_Click;

}

 

Finalmente, ejecutamos y veremos que se lanza en el emulador de iPhone. Para cambiar entre emuladores, seleccionamos en el menú superior Project->Iphone Simulation target-> Ipad Simulator X. Si no aparece, tendremos que añadirlo manualmente. Vamos a botón derecho sobre el proyecto->Options->iPhone Application->iOS Application Target->Devices->iPad (ejecutamos y luego lo volvemos a cambiar a Universal). Y ya nos debería salir en el menú superior.

 


Una vez creado el proyecto, continuaremos diseñando la Vista. Para ello procederemos como hemos hecho hasta ahora, es decir, doble click sobre uno de los archivos .xib y se abrirá el diseñador de XCode. Abrimos primero el fichero del iPhone “HelloUniversalViewController_iPhone.xib” y añadimos dos Labels y un Button:


 

 

Hacemos lo mismo con el otro fichero (se puede abrir ya desde XCode navegando en el proyecto). Como se verá es ligeramente distinto a la pantalla del diseñador para iPhone. Se trata de una pantalla mucho mayor, y por tanto tenemos más espacio.


 

 

Compartiendo los Outlets y Actions:

Primero que nada, creamos dos Outlets (pulsando control y arrastrando el control hacia el editor de texto) uno para el botón y otro para el Label de salida, los denominamos: buttonClick y LabelOutput.

Una vez creado los Outlets, abrimos el fichero desde el que no los hemos creado. En nuestro caso, abrimos el fichero para la vista de iPhone y procedemos de manera análoga, es decir, arrastramos el control hasta el editor presionando control, pero esta vez, en lugar de crear uno nuevo, lo conectamos. 


 

 

Antes de despedirme, me gustaría hacer un último apunte: hay ocasiones en las que necesitaremos hacer distinción entre el iPad e iPhone a través de código, ya sea para cargar un módulo u otro o para simplemente, cambiar una vista. Para ello tenemos el método MonoTouch.UIKit.UIDevice.CurrentDevice.UserInterfaceIdiom que nos devuelve el dispositivo actual y la enumeración UIUserInterfaceIdiom.Phone o UIUserInterfaceIdiom.Pad que devuelve el valor del dispositivo que nos interese en cada caso (Phone también corresponde al iPod Touch).


Espero que os haya resultado útil la entrada, y próximamente volveré con una nueva entrada de la serie.

Saludos!

 

MonoTouch I 

MonoTouch II

 

Aplicación multipantalla [MonoTouch II]

 


Buenas a todos,

en esta segunda entrada de MonoTouch veremos como crear aplicaciones con varias pantallas y navegar entre ellas.

Los pasos que vamos a seguir para desarrollar la aplicación serán:

  1. Crear el proyecto con MonoDevelop.
  2. Crear las pantallas (en nuestro caso crearemos tres).
  3. Dar formato a las pantallas y definir los outlets.
  4. Instanciar el NavigatorController (nos permitirá navegar entre las pantallas).
  5. Implementar el método ViewDidLoad.
  6. Probar la aplicación.

En primer lugar, abrimos MonoDevelop y vamos a New Solution->MonoTouch->Empty Project. Como nombre podemos poner, por ejemplo, “Aplicación Multipantalla”.

A continuación, creamos una carpeta donde se guardarán las pantallas de nuestra aplicación.


 

En la carpeta añadimos un nuevo elemento que contendrá los archivos necesarios para la creación de la pantalla. Para ello, botón derecho sobre la carpeta pantallas->New Files->MonoTouch->iPhone View Controller. En nuestro caso, ésta será nuestra pantalla principal. La llamaremos “PantallaPrincipal”.

Como se puede observar, se han creado tres ficheros. 

  • Controller Class. Clase que deriva de UIViewController.
  • XIB File. La vista (se puede editar desde XCode).
  • Designer File. El archivo que MonoDevelop usa para definir los Outlets y Actions de nuestro controlador.

Como comenté, vamos a crear tres pantallas. Hemos creado una, para crear el resto debemos seguir el paso anterior. Esta vez las llamaremos PantallaSecundaria y PantallaSecundaria2.

Para darle formato a las pantallas, debemos hacer doble click sobre el archivo .XIB que nos ha creado MonoDevelop y se abrirá XCode en modo diseño. En primer lugar, realizaremos la acción sobre PantallaPrincipal.XIB

En esta pantalla instanciaremos el UINavigatorController. Para ello seleccionamos el botón que muestra la imagen inferior y en el combo Top Bar seleccionamos Navigation Bar.


 

A continuación creamos dos botones, que nos permitirán navegar hacia las otras pantallas, y definimos sus outlets (btnSecundaria y btnSecundaria2). Si no sabes cómo hacerlo echa un vistazo al post anterior: HelloWorld MonoTouch!.


 

A continuación salvamos y abrimos las otras dos pantallas con XCode (no hay que volver a MonoDevelop, se pueden abrir desde XCode a través del navegador del proyecto). En cada pantalla ponemos un label con el texto: “Pantalla secundaria” y “Pantalla secundaria2”.

Una vez que las pantallas tienen el formato que deseamos, es hora de guardar todo y volver a MonoDevelop.

Abrimos el fichero AppDelegate.cs y creamos la variable navigatorController:

UINavigatorController = navigatorController; 

Dentro del mismo fichero (AppDelegate.cs) buscamos el método FinishedLaunching

y escribimos:



public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{

window = new UIWindow (UIScreen.MainScreen.Bounds);

this.navigatorController = new UINavigationController();

PantallaPrincipal pantallaPrincipal = new PantallaPrincipal();

this.navigatorController.PushViewController(pantallaPrincipal,false);

this.window.RootViewController=navigatorController;

window.MakeKeyAndVisible ();

return true;
}
}

 

Las líneas prácticamente se explican por sí solas. Quizá destacar el método PushViewController(pantallaPrincipal, false) que recibe dos parámetros, el control que queremos meter y, un booleano que indica si la pantalla aparece con o sin animación. Como se trata de la pantalla principal no estableceremos animaciones aquí.

A continuación vamos definir los el evento “click” de nuestros botones, para ellos vamos a crear una referencia en la pantalla principal del resto de pantallas. 

 


public partial class PantallaPrincipal : UIViewController
{

PantallaSecundaria pantallaSecundaria;
PantallaSecundaria2 pantallaSecundaria2;

...

}

 

También deberemos implementar los eventos que tendrán nuestros botones.


 


protected void ButtonPantallaSecundariaEventClick(object sender, EventArgs e)
{

if(this.pantallaSecundaria==null)
this.pantallaSecundaria = new PantallaSecundaria();
this.NavigationController.PushViewController(this.pantallaSecundaria,true);
}

protected void ButtonPantallaSecundaria2EventClick(object sender, EventArgs e)
{
if(this.pantallaSecundaria2==null)
this.pantallaSecundaria2 = new PantallaSecundaria2();
this.NavigationController.PushViewController(this.pantallaSecundaria2,false);
}

PantallaPrincipal pantallaPrincipal = new PantallaPrincipal();

this.navigatorController.PushViewController(pantallaPrincipal,false);

this.window.RootViewController=navigatorController;

window.MakeKeyAndVisible ();

return true;
}
}

 

 

Por último, vamos a implementar el método ViewLoad(). El método ViewLoad es llamado cuando la Vista se ha terminado de cargar. Si en nuestra clase PantallaPrincipal.cs no tenemos el template del método, lo creamos:


 


public override void ViewDidLoad ()
{
base.ViewDidLoad ();
this.btnSecundaria.TouchUpInside+=ButtonPantallaSecundariaEventClick;
this.btnSecundaria2.TouchUpInside+=ButtonPantallaSecundaria2EventClick;

}

 

Ya podemos ejecutar nuestra aplicación y navegar a través de las ventanas.


En el siguiente post de la serie veremos como crear Apps Universales (IPad + Iphone) y en el próximo quién sabe… Puede que acceso a datos.

Saludos!