Página 4 de 4

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!

 

 

Hello world desde c# a iOS [MonoTouch I]

 

Hola a todos. Esta es la primera de una serie de entradas que tengo preparadas de MonoTouch, además de la serie MonoTouch, adelanto que habrá serie MonoDroid. Sí, todo muy «mono». En esta entrada vamos a aprender a hacer una aplicación HelloWorld con iOS en c#.

 

Para MonoTouch en particular, se necesitarán los siguientes requisitos:

-Sistema operativo mac.

-Tener instalado XCode 4

-Tener instalado MonoDevelop

-Framework MonoTouch. En este punto, comentar que hay varias licencias, desde 79$ (estudiantes, con tener cuenta .edu debería valer)  o profesional (equivalente a la anterior pero por 300$). Se puede trabajar desde una versión de evaluación, que tiene por limitación que sólo se puede depurar en emulador, además de que no se pueden distribuir las apps. Por lo demás, es plenamente funcional y se puede encontrar aquí.

-Comenzando:

Una vez se haya instalado todo el software necesario, procedemos a abrir MonoDevelop y vamos a

File->New Solution -> C# ->MonoTouch->SingleViewApplication y ponemos un nombre a la solución, por ejemplo: «HelloWorldMonoTouch»

Pulsamos Ok y veremos que MonoDevelop habrá creado una serie de archivos:

  1. AppDelegate.cs Contiene la clase responsable de crear nuestra ventana y los listeners de iOS.
  2. HelloWorldMonoTouchViewControllew Contiene el controlador para la vista (MVC) principal.
  3. HelloWorldMonoTouchViewControllew.designer Está vacío en un principio, pero mono lo rellenará automáticamente con nuestra vista.
  4. HelloWorldMonoTouchViewController.xib Contiene el XML de nuestra interfaz.
  5. Main.cs La ignoramos totalmente.

Una vez definidos los archivos, procedemos a diseñar la interfaz desde XCode.

Diseñando la interfaz

Para mí, una de las mayores ventajas de mono sobre otras soluciones multiplataforma, es que podemos usar las herramientas de Apple a la hora de diseñar nuestras interfaces, y sin saber prácticamente nada de Objective-C. Que no es que tenga nada en contra de este lenguaje, es que decido usar Mono, porque conozco c# y además, me permite desarrollar para otras plataformas con la lógica de negocio intacta.

Bien, una vez que tenemos una idea general de para qué es cada fichero, procedemos a realizar nuestra primera interfaz, para ello, hacemos doble click, sobre el fichero HelloWorldMonoTouchViewController.xib, y se abrirá XCode.

 

 

Como se puede observar en la imagen, el aspecto de nuestra pantalla ocupa el centro, añadiremos dos controles, un label y un botón, para ello clickamos en el penúltimo botón de la barra de título (hay tres unidos, el de la derecha). y se abrirá una columna a la derecha llamada «Utility Area»

 

 

Bien, desde esta ventana, nos fijamos en el último grupo de controles, y hacemos click en el icono que tiene forma de caja. Si está seleccionado «Objects» en la lista, veremos todos los controles de los que disponemos, arrastramos un Label y un botón a nuestro formulario y ya tendremos el formulario tal y como lo queremos.

Antes de continuar, me gustaría definir dos conceptos brevemente:

-Outlet: Resumiendo, es el equivalente a las Propiedades en .NET

-Action: Equivalente a los eventos en .NET

Siguiendo con el ejemplo, pulsamos sobre el botón que se encuentra, el 5º empezando por el final de la barra de título, el que está en el medio del primer grupo de tres.

Al pulsar sobre ese botón, se abrirá un bloque de código, bien pulsando control arrastramos el label hacia el editor y lo soltamos, nos sadra un pop-up, en el que definiremos el nombre que le queremos dar, lo nombramos  Label1 y así, se define un Outlet (Propiedad), si nos fijamos está seleccionada la Connection Outlet. Hacemos lo mismo para el botón, y lo llamamos Button1. Por último, lo volvemos a hacer, y seleccionamos en el combo Action en lugar de Outlet, y escribimos Button1Click.

Ya podemos guardar y volver a MonoDevelop.

Dándole vida a la interfaz y terminando el proyecto.

Una vez en mono, abrimos el fichero HelloWorldMonoTouchViewController.cs y escribimos un nuevo método, si escibimos partial y pulsamos espacio, automáticamente nos querrá autocompletar, lo dejamos y dentro de las llaves escribimos this.Label1=»Hello World»;

Debería quedar algo así el código:

partial void Button1Click (MonoTouch.Foundation.NSObject sender)
{
Label1.Text=»Hello world»;
}

Finalmente, ejecutamos y nos saldrá el emulador con nuestra aplicación.

En próximas entradas hablaré de cómo navegar entre pantallas, de hacer aplicaciones universales (ipad&iphone), y otras cosas!

Saludos

 

 

Hello World Geeks.ms!

En primer lugar, me gustaría agradecer a Rodrigo Corral la oportunidad que me ha brindado para poder formar parte de la comunidad geeks.

En cuanto al blog, la idea es publicar entradas del mundo .NET en general, y de las tecnologías móviles en particular. Desde Windows Phone hasta MonoTouch & MonoDroid. También me interesa bastante el campo de la IA, así que seguramente se me escape algún algoritmo escrito en C#, además de entradas de interés general.

En los siguientes días iré migrando algunas entradas de mi otro blog a éste, y posteriormente comenzaré a escribir con una periodicidad mínima de un post a la semana.

Sin más, me despido ilusionado por este nuevo proyecto.

Recientes entradas »