You are on page 1of 43

APLICACIONES IOS

En la actualidad existe un fuerte interés por parte de los programadores en el desarrollo de aplicaciones para dispositivos móviles de Appel como: iPad, iPhone e iPod Touch, todos ellos basados en el sistema operativo iOS.

iOS revolucionó el mercado de los teléfonos móviles en 2008 con la salida del iphone 3G y redefinio el conceto de teléfono inteligente, en lo que hoy conocemos como Smartphone.

iOS fue el primer sistema que permitió que los desarrolladores programaran aplicaciones tan fu ncionales o incluso extensiones de las clásicas aplicaciones de un PC. Parte de la competencia vio el camino marcado y se subió al carro como Google y otros que hicieron caso omiso (Nokia y Symbian), han caído hasta casi la desaparición.

Dados los requisit os de desarrollo que impone Apple en este curso se ha optado por explicar con más detenimiento el desarrollo en Android e incluir simplemente un pequeño tema para el desarrollo en iOS de manera que siempre el alumno con las actividades de aprendizaje propu estas pueda ampliar su conocimiento por el lado del desarrollo en iOS.

Así simplemente, se proponen como objetivo de aprendizaje del tema conocer la arquitectura de iOS y poder compararla con la de Android y conocer los fundamentos del lenguaje de desarrol lo a utilizar Objective - C, el entorno principal para desarrollarlo: XCode y un ejemplo sencillo realizado en su día para iOS 4.

Principales características de la arquitectura

Antes de iOS 4, la multitarea estaba reservada para aplicaciones por defecto del sistema. A Apple le preocupaba los problemas de batería y rendimiento si se permitiese correr varias aplicaciones de terceros al mismo tiempo. A partir de iOS 4, dispositivos de tercera generación y posteriores soportan el uso de 7 APIs para multitarea, es pecíficamente:

Audio en segundo plano

Voz IP

Localización en segundo plano

Notificaciones push

Notificaciones locales

Completado de tareas

Cambio rápido de aplicaciones

Sin embargo, no consiste en

una verdadera multitarea, pues las aplicaciones ajenas al SO, quedan congeladas en segundo plano no recibiendo un solo

ciclo de reloj del procesador. La

arquitectura de esta

plataforma toma como base el núcleo del Sistema Mac O S X del que toma el kernel denominado Mach Kernel. Sobre este se desarrolla una arquitectura de capas conceptualmente muy similar a lo ya visto para Android (recordar que Android es posterior y ha sido en múltiples ocasiones acusado de ser una copia de iOS ). Sobre este kernel se encuentran por tanto las distintas capas de servicios que son usados para implementar aplicaciones sobre la plataforma.

La estructura en capas resulta clave cuando hablamos de implementar el cód igo. Por ejemplo

La estructura en capas resulta clave cuando hablamos de implementar el cód igo. Por ejemplo el Core OS y los Core Serices contienen los interfaces fundamentales para iOS incluyendo aquellos usados para acceder a ficheros, los tipos de datos de bajo nivel, acceso a sockets, etc. Estos interfaces están basados en C e incluyen tecno logías como Core Foundation, CFNetwork, SQLite, POSIX threads , etc.

Según consideramos capas superiores encontramos tecnologías más avanzadas que usan interfaces basados en una mezcla de C y Objective - C. Así por ejemplo la cada Media contiene las tencologías fundamentales para gráficos 2D y 3D, audio y video con una tecnología también basada en C sobre OpenGL. También destacan en esta capa tecnologías como Quartz, Core Audio o Core Animation (motor desarrollado en Objective C para animaciones multimedia).

L a capa Cocoa Touch basada principalmente en Objective - C es la infraestructura básica sobre la que se apoyan la gran mayoría de las aplicaciones con clases para ventanas, vistas, controles, etc por un lado en el denominado UIKit y soporte a la programación orientada a objetos con clases para colecciones, gestor de ficheros, operaciones de red, acceso a accesorios hardware como el giroscopio, acelerómetro, etc. Así decimos que La librería Cocoa está dividida en dos kits:

Application Kit Este kit contiene todas las clases

relacionadas con la interfaz gráfica (ventanas, botones, cajas de texto, etc.). Pero el Application Kit es mucho más que un conjunto de componentes de interfaz gráfica, también nos da acceso a OpenGL, o tiene clases para gestión de docume ntos (mediante el patrón vista - documento usado también en otros muchos frameworks de programación), o por ejemplo, también trae clases que encapsulan fuentes, colores, impresión, corrección ortográfica o drag and drop.

Foundation Kit Este kit contien e todas las demás clases no visuales como son las clases de acceso a ficheros, de programación multihilo, de trabajo en red, de utilidad, de gestión de cadenas, etc. Esta capa Cocoa y el framework UIKIt son la base por tanto para el desarrollo de aplicaciones y la utilizada en la mayoría de las ocasiones dejando sólo para casos muy específicos las capas de programación que tratan con las capas de más bajo nivel.

Objective - C

El lenguaje de programació n para el SDK de iOS es Objective - C - Se trata de un lenguaje orientado a objetos que fue desarrollado por la empresa NeXT creada por Steve Jobs tras acabar su primera etapa en Apple. La extensión de los ficheros en Objective - C es .m y aunque pueden compila rse desde el compilador estándar gcc aunque a día de hoy se utiliza habitualmente el software XCode . El ejemplo más sencillo de programación en Objective - C sería:

#import <stdio.h> #import <stdlib.h> Int main() { Printf(“Hola mundo\n”); Return EXIT_SUCCESS;

}

Que se puede compular desde la línea de comandos con

gcc holamundo.m –o holamundo

En la mayoría de los casos las clases desarrolladas heredan de la clase base NSObject que sobre todo incluye un modelo propio de gestión ed memoria , siempre el aspecto más crítico en los lenguajes orientados a objetos.

Si en XCode seleccionamos crear un nuevo fichero de tipo clase CocoaTouch y en Objective-C el cuerpo de la clase que se crea es el siguiente:

#import <Foundation/Foundation.h> @interface SayHello : NSObject {

}

@end

Donde se puede ver la sintaxis de Objective-C para importar ficheros de cabecera (Foundation.h) y cómo la clase queda declarada como heredada de NSObject. Si queremos añadir un método al fichero de cabecera (.h) la declaración sería la siguiente:

#import <UIKit/UIKit.h> #define GREETING @"Juanpi"

#define AGE 38 @interface SayHello : NSObject { NSString * test;

}

- (void) sayHello: (NSString *) name;

@end

Un inter face declara la clase, sus datos y sus métodos. La directiva @interface indica al compilador que comienza la declaración de una clase primero con las variables miembro como en este caso NSString * test donde cada instancia u objeto de la clase almacenará u na cadena de texto. Por otro lado los métodos se declaran iniciando por un – (se usar un + para los denominados

métodos de clase pero su definición queda fuera de los objetivos de este tema), posteriormente el tipo devuelto, el nombre del método ( sayHello ) y los parámetros de entrada que en este caso recibe el nombre name y es un puntero a la clase NSString .

Mientras que el fichero de implementación de la clase de extensión .m será el siguiente:

#import "SayHello.h" @implementation SayHello

- (void) sayHello: (NSString *) name { NSLog(@"Hello %@, %@. Tienen %i años", name, GREETING, AGE);

}

@end

Por su parte la directiva @implementation define donde comienza la implementació n de la clase y en este ejemplo no hay nada que destacar salvo el método NSLog que muestra en la ventana de

depuración del entorno de desarrollo los textos, variables y constante que se definan en el cuerpo de la función.

Por último se utilizaría este códi go en el fichero main.m de la siguiente manera (cree en XCode una aplicación View- Based, por ejemplo)

#import <UIKit/UIKit.h> #import "MyClass.h" int main(int argc, char *argv[]) { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; SayHello * objMyClass = [[SayHello alloc] init]; [objMyClass sayHello]; [objMyClass release]; int retVal = UIApplicationMain(argc, argv, nil, nil); [pool release];

return retVal;

}

Utility Applications

Para probar cosas básicas sobre la sintaxis de XCode podemos crear Utility Application desde XCode y añadir código básico en los ficheros MainViewController.m y FilpsideViewController.m . El siguiente código muestra sintaxis básicas y tipos básicos en Objective - C.

Por ejemplo en MainViewController.m podemos añadir:

(void)viewDidLoad { [super viewDidLoad]; for(int i = 0; i < 5; i++) { NSLog(@"i's value:%i",i);

}

}

Y en FilpsideViewController.m crearemos estos dos métodos:

(void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor]; int r = 9; do { NSLog(@"r's value:%i", r); r /= 3; } while(r != 3);

}

(void) viewDidAppear: (BOOL) animated { [super viewDidAppear:animated]; BOOL quit = NO;

for(int i = 0;!quit;i++) { NSLog(@"an endless loop without break %i",i); quit = YES;

}

}

El template Utility Application seleccionado crea una aplicación con dos vistas. La primera de ellas aparece como primera vista de la aplicación mientras que la segunda pantalla aparec e al presionar al botón de info. La vista principal es la denominada MainView (clase base UIView ) y su controlador es UIViewController (clase base UIViewController) mientras que la segunda es la denominada FlipsideView y lleva asociada un FlipsideViewController . El controlador de una vista permite a un programar ejecutar código cunado su vista va a ser cargada, aparece, desaparece o se descarga tal y como muestra la figura adjunta:

ejecutar código cunado su vista va a ser cargada, aparece, desaparece o se descarga tal y

Aplicación básica de ventana con XCode

Xcode, es un IDE en el sentido clásico que nos permite organizar nuestros ficheros por proyectos, compilarlos y depurarlos con todo tipo de ayudas y detalles. Esta herramienta trabaja con ficheros Java (.java), C/C++ (.h,.c,.cpp), Objective - C (.h,.m) y Objective - C++ (.h,.mm,.M) .

Los requisitos mínimos para esta plataforma son:

- Mac OS X 10.5 (Leopard) o posterior t_ iPhone SDK 2.0 o posterior

- Dispositivo móvil para pruebas (opcional) El iPhone SDK contiene el código, la información y las herramientas necesarias pa ra desarrollar, probar, ejecutar, depurar y ajustar las apps para el iPhone OS. Dentro de este kit encontramos tres aplicaciones fundamentales:

Xcode: contiene un conjunto de herramientas para el desarrollo de las aplicaciones, permite editar, depura r y compilar el código fuente.

Interface Builder: permite la creación de interfaces gráficas y la vinculación con Xcode.

iPhone Simulator: ejecuta las aplicaciones desarrolladas en un emulador del dispositivo. La siguiente figura muestra la cr eación de un nuevo proyecto en el entorno XCode

La siguiente figura muestra la creación de un nuevo proyecto en el entorno XCode

1. Elegimos por ejemplo la creación de una aplicación basada en vistas:

1. Elegimos por ejemplo la creación de una aplicación basada en vistas:

2. Como siguiente paso declaramos una etiqueta (UILabel) y una función (IBAction) en la clase

2. Como siguiente paso declaramos una etiqueta (UILabel) y una función (IBAction) en la clase

“miAppViewController.h” #import <UIKit/UIKit.h>

@interface miAppViewController :

UIViewController { UILabel *miEtiqueta;

}

@property (nonatomic,retain) IBOutlet UILabel

*miEtiqueta;

-(IBAction)cambiarEtiqueta;

@end

3. Definir la función (IBAction ) en “miAppViewController.m”

@synthesize miEtiqueta;

-(IBAction)cambiarEtiqueta{

miEtiqueta.text = @”Bazzinga!”;

}

- (void)dealloc { [miEtiqueta release]; [super dealloc];

}

4. Abrir con doble clic el archivo “ miAppViewController.xib”, agregar una etiqueta (UILabel) y un botón (UIButton) en la vista del controlador

(UILabel) y un botón (UIButton) en la vista del controlador 5. En la ventana “Connections Inspector”

5. En la ventana “Connections Inspector” arrastrar miEtiqueta hasta la etiqueta creada y la función “cambiarEtiq ueta” hasta el botón creado.

6. Presionar en Xcode el botón “Build and Run”: La aplicación se ejecutará en el

6. Presionar en Xcode el botón “Build and Run”: La aplicación se ejecutará en el iPhone Simulator como lo muestra la imagen anterior.

Como extensión de es te sencillo ejemplo se va a añadir a continuación una UIWebView

Como extensión de es te sencillo ejemplo se va a añadir a continuación una UIWebView que nos permite mostrar contenido web embebido en el dispositivo móvil. UIWebView despliega información Web embebida en nuestra aplicación sin necesidad de salir de la misma, es decir, el usuario puede ver contenidos Web en la aplicación sin abrir Safari en el dispositivo. Aunque claramente la clase UIWebView está basada en Safari, no requiere cerrar la aplicación para mostrar los contenidos. La implementación es realmente sencilla, solo se deb e crear un objeto UIWebView y cargar el contenido web. También se puede agregar la opción de

avanzar o retroceder en el historial de navegación.

Para ello en “NombreAppViewController.h” declarar los elementos:

#import <UIKit/UIKit.h> @interface WebAppViewController :

UIViewController &lt;UIWebViewDelegate&gt; { IBOutlet UIWebView *webView; IBOutlet UIButton *goBackBtn; IBOutlet UIButton *goForwardBtn; IBOutlet UIButton *reloadBtn; } @end

Abrimos el archivo “NombreAppViewControlle r.xib” y agregar los elementos declarados previamente: una UIWebView y tres

botones. Seleccionar el objeto UIWebView y desde el Inspector Connections arrastrar: delegate, goBack, goForward, reload.

Finalmente en se debe definir la función en

“ NombreAppViewController.m”

(void)viewDidLoad {

[super viewDidLoad]; NSURL *url = [NSURL URLWithString:@”http://www.maestrosdelweb.com”]; NSURLRequest *loadURL = [[NSURLRequest alloc] initWithURL:url]; [webView loadRequest:loadURL]; [loadURL release];

}

Al acabar este tema el alumno debería conocerá la estructura en capas que propuso iOS y que habiendo entendido la equivalente en Android debe simplemente saber comparar dada su analogía. Por otro lado se ha querido dar unas pinceladas del entorno de desarrollo y de la sintaxis básica de Objective - C cómo lenguaje de programación para aplicaciones en iOS pero dada su complejidad

no se pretende más que el alumno interesado disponga de una mínima base para introducirse en el desa rrollo de iOS y ya en función de su interés desarrollar como actividad aplicativa una aplicación más ambiciosa.

Como material complementario del tema se ha incluido el documento de Apple “In House App Development Accelerator Guide” disponible en estos momentos en:

http://www.apple.com/fr/iphone/business/docs/20110801_In - house_App_Accelerator_Guide.pdf

que se trata de un excelente documento tanto al describir la metodología y consideraciones a tener en cuenta a la hora de desarrollar una aplicación para iOS como para describir el complejo proceso de licencias que ha creado Apple para distribuir las aplicaciones creadas en distintos casos: desde la distribución a través del Apple Store hasta aplicaciones internas para una empresa.

DESARROLLO MULTIPLATAFORMA: ADOBE AIR Y ANSCA CORONA

En el presente tema nos centraremos en dos entornos de desarrollo multiplataformas basados en lenguajes de script que aportan un enfoque multiplataforma en el sentido de que con un único desarrollo cubrimos tanto la plataforma Android como iOS o incluso BlackBerry.

Esta es la opción que en la opinión del autor es la más recomendable a día de hoy y como tal el tema se ha decidido centrar en dos opciones que aun siendo las dos lengiuajes de script y las dos mul tiplataforma tienen importantes diferencias de coste. Sin duda Adobe ha sido durante la última década con sus soluciones basadas en Flash Player el auténtico dominador de cualquier desarrollo web bien en aplicaciones desarrolladas en Flash o en el menos co nocido Flex.

Este sería el entono de hecho recomendado por al autor de este material pero sin duda la batalla entre Apple y Adobe lleva a tener que considerar otras opciones. Por ello además de la opción de Adobe basada en su nuevo motor de aplicaciones Ad obe Air se presenta una segunda plataforma menos conocida como es Ansca Corona basada en el lenguaje Lua mucho más establecida en el entorno Apple y de excelentes prestaciones.

El alumno desarrollará aplicaciones básicas en ambas plataformas a lo largo de este tutorial y conocerá sus principales características, sin entrar en mayor profundidad dejando para ello la posibilidad de realizar una actividad en cualquier de las plataformas que se presentan a lo largo de esta unidad.

Introducción Adobe Air

Adobe AIR es un motor de ejecuc ión multipantalla válido para todos los sistemas operativos que le permite aprovechar sus habilidades de desarrollo web para crear e implementar aplicaciones enriquecidas de Internet (RIA) en el escritorio y dispositivos móviles. Las aplicaciones de AIR mó viles, de televisión y escritorio se pueden crear con ActionScript 3.0 utilizando Adobe Flex y Adobe Flash. Las aplicaciones de AIR de escritorio también se pueden crear con HTML, JavaScript y Ajax (basado en HTML).

Para dispositivos móviles las aplicacion es AIR se implementan como aplicaciones nativas. Utilizan el formato de la aplicación del dispositivo y no el formato de archivo de AIR. Actualmente AIR admite paquetes APK de Android y paquetes IPA de iOS. Una vez creada la versión oficial del paquete de la aplicación, ésta puede distribuirse mediante el mecanismo de plataforma estándar. Para Android, esto suele significar Android Market; para iOS, App Store de Apple. Se puede emplear el SDK de AIR y Flash Professional, Flash Builder y otras herramientas d e desarrollo de ActionScript para crear aplicaciones de AIR para dispositivos móviles. Las aplicaciones de AIR móviles basadas en HTML no se admiten en el momento de crear esta documentación.

Es posible desarrollar aplicaciones de AIR con las siguientes he rramientas de desarrollo de la plataforma de Adobe Flash:

Para los desarrolladores de ActionScript 3.0 (Flash y Flex):

Adobe Flash Professional (consulte Publicación para AIR)

SDK de Adobe Flex 3.x y 4.x

Adobe Flash Builder El SDK de Adobe AIR contiene las siguientes herramientas de la línea de comandos que se

utilizan para iniciar y empaquetar aplicaciones:

AIR Debug Launcher (ADL) Permite ejecutar aplicaciones de AIR sin tener que instalarlas primero

AIR Development To ol (ADT) Empaqueta aplicaciones de AIR en paquetes de instalación distribuibles

En lo que sigue utilizaremos Flex como lenguaje de desarrollo para ejemplificar el desarrollo de aplicaciones. Como ya ocurrió con iOS y Objective C y posteriormente con Ansca Corona y Lua se ha optado por incluir información básica de todas estas opciones de desarrollo en móviles para ofrecer al alumno una visión completa del sector en la actualidad pero sólo en el caso de HTML5 y Android se ha decidido profundizar. Para conocer Flex la mejor referencia es la aplicación de Adobe de nombre Tour de Flex que se puede descargar de forma gratuita desde su web. El autor recomienda esta opción como forma de desarrollar aplicaciones para dispositivos móviles e incluso para PC como se co mentará a lo largo del tema pero las diferencias entre Adobe y Apple han llevado a la decisión de centrar el aprendizaje en la plataforma de Android y

HTML5.

Desarrollo de una aplicación móvil en Adobe Air

Veremos un ejemplo de creación de una aplicación para Android pero como se verá en los distintos p asos del ejemplo la situación es idéntica para aplicaciones para iOS o BlackBerry.

El primer paso es descargar una versión de evaluación de Flash Builder 4.5.1 o posterior y una vez instalado crear un nuevo proyecto para dispositivos móviles tal y como mue stra la figura adjunta.

En el siguiente paso seleccionamos las opciones que muestra la pantalla adjunta y en las

En el siguiente paso seleccionamos las opciones que muestra la pantalla adjunta y en las opciones para la aplicaciones permitiremos que se conecte a Internet que es la opción por defecto aunque en el ejemplo a desarrollar no será necesario. Igualmente dejamos las opciones por defecto de la pestaña “Server Settings” pues no integraremos la aplicación con ninguna solución de servidor.

Igualmente en este ejemplo dejamos las opciones por defecto de la pestaña Build Paths .

Igualmente en este ejemplo dejamos las opciones por defecto de la pestaña Build Paths . Una vez seleccionadas estas opciones Flash Builder crea la base del proyecto Flex cuyos elementos podemos consultar en la vista del proyecto en la parte izquierda del interfaz

de la herramienta

de la herramienta Los elementos principales del proyecto son: • € HelloWorld.mxml. Es el fichero principal

Los elementos principales del proyecto son:

HelloWorld.mxml. Es el fichero principal de la aplicación que normalmente no editaremos nunca

HelloWorldHomeView.mxml. Es la vista por defecto de la

aplicación, la primera que se carga.

crea automáticamente en la carpeta views y que modificaremos de la manera que se indica a continuación:

<?xml version="1.0" encoding="utf-8"?>

Cómo puede apreciarse se

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<s:Label text="Hello World"/>

<s:Button label="Continuar"

click="navigator.pushView(MyNewView)"

styleName="next"/>

</s:VGroup>

</s:View>

En este momento la compilación del proyecto dará un error pues no esta definida la vista “MyNewView” que estamos declarando que será la vista que mostrará la aplicación cuando se hace click en el elemento Button definido. El siguiente paso será crear esa v ista. Para ello utilizando el menú contextual (botón derecho del ratón en la carpeta views) definimos una nueva vista con nombre MyNewView seleccionado New > MXML Componente tal y como muestra la figura adjunta.

una nueva vista con nombre MyNewView seleccionado New > MXML Componente tal y como muestra la

El códig o completo de esta nueva vista será:

<?xml version="1.0" encoding="utf-8"?> <s:View

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="MyNewView"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center"> <s:Label text="Siguiente Pantalla"/> <s:Button label="Volver" click="navigator.popView()" styleName="back"/> </s:VGroup> </s:View>

En este caso como se observa se crea también un grupo de elementos visuales que se posicionarán verticalmente. También como antes el primero de los elementos es una caja de texto y el botón que realizará la función de volver a la vista anterior como puede verse se declara con el estilo “back” y al igual que anteriormente para pasar de vista utilizábamos el método pushView para volver lo que haremos será descargar la vista a ctual con el método complementario popView.

Ya tenemos suficiente para probar la aplicación. Para ello seleccionamos el nombre del proyecto en la ventana “Package Explorer ” y con el botón derecho seleccionamos “ Run as > Mobile Application ” dando paso a la siguiente ventana:

Vemos que la opciones de dispositivos para probar la aplicación en el ordenador es especialmente

Vemos que la opciones de dispositivos para probar la aplicación en el ordenador es especialmente amplia con todo tipo de marcas y modelos. Seleccionamos cualquiera de ellas y la herramienta ADL es lan zada para simular el comportamiento de la aplicación desarrollada.

Para probar la aplicación en un dispositivo Android fí sico y tal como se vio
Para probar la aplicación en un dispositivo Android fí sico y tal como se vio

Para probar la aplicación en un dispositivo Android fí sico y tal como se vio en el tema dedicado a Android debemos asegurarnos que la opción de USB debugging mode esta activa en nuestro dispositivo (en la pantalla de configuración > aplicaciones > desarrollo). Al conectar el dispositivo al equipo seleccionaremos “montarlo” como un unidad de disco. Una vez disponible el dispositivo Android como unidad de disco seleccionaremos la opción “Run Configurations” en el menú contextual del proyecto y seleccionaremos como “Launch Method” la opción “On device” en lugar d e la opción “On desktop”. Es probable que el dispositivo al lanzar la aplicación solicite una actualización de Adobe AIR en cuyo caso simplemente debemos permitir tal actualización.

Destacar por último la opción “Project > Export Release Build” que

permite crear la aplicación empaquetada de forma que por ejemplo pueda entregarse en el Android Market. Al igual que en el caso de aplicaciones nativas de Android para realizar el proceso es necesario solicitar un certificado o firma digital de una te rcera empresa pero a efecto de test podemos crear nuestro propio certificado que se almacenará en el directorio deseado con extensión .p12.

Si finalizamos el proceso en este momento en el mismo directorio que el proyecto si no se ha seleccionado nada en co ncreto el paquete de instalación HelloWorld.apk .

en co ncreto el paquete de instalación HelloWorld.apk . Por último modificaremos el proyecto para probarlo

Por último modificaremos el proyecto para probarlo en iOS. Para ello seleccionamos la opción Properites en el menú contextual del proyecto y habilitamos iOS como platafor ma de publicación tal y

como muestra la figura adjunta y seleccionamos OK

Las opciones de simular la aplicación en Ipad y distintas versiones de Iphone ya aparecen disponibles y el comportamiento si seleccionamos la opción de simular en el entorno Desktop son idénticas. El problema para simular en un dispositivo iOS real es la necesidad de disponer de un certificado de desarrollo de Apple. Para ello es necesario un firma digital .p12 válida y el denominado Provisioning File o fichero de aprovisionamiento qu e se genera desde el portal del desarrollador de Apple a partir de los certificados asociados a la cuenta de desarrollador Apple, en

un proceso más complejo del habitual para los no iniciados (especialmente si se tiene en cuenta que son distintos proceso e n función de si la aplicación tiene como público objetivo cualquier usuario o una empresa que además contempla tanto distribución adHoc como distribución inHouse siguiendo la nomenclatura de Apple).

Uso de Skins en Adobe Air

Una de las mejoras más signific ativas desde la aparición de Flex 2 hasta las versiones de la fecha de crear este documento ha sido el incremento de flexibilidad y potencia de desarrollo que permiten los denominados skins en la línea de separación de contenido y presentación de la que ta nta insistencia se hizo en la unidad de aprendizaje dedicada a HTML5.

Para ver un ejemplo es necesario descargar del material complementario el fichero de skins HelloWorldSkins.zip que extraeremos en una carpeta cualquiera e importaremos en Flash Builder c on la opción “File > Import Flash Builder Project” disponible en el menú principal de la aplicación, que importaremos como nueva copia en el proyecto.

Seleccionaremos el fichero main.css de este nuevo proyecto y lo arrastramos al antiguo tal y como muestra la figura adjunta:

el fichero main.css de este nuevo proyecto y lo arrastramos al antiguo tal y como muestra
A continuación creamos un nuevo paquete con el menú contextual tal y como muestra la

A continuación creamos un nuevo paquete con el menú contextual tal y como muestra la figura adjunta.

el menú contextual tal y como muestra la figura adjunta. En la que arrastraremos los ficheros

En la que arrastraremos los ficheros de skins del segundo proyecto importado relativos a los botones ( BackButtonSkin1, BackButtonSkin2, NextButttonSkin1 y NextButttonSkin2 ).

Cómo último paso modificamos el código del componente principal de la aplicación “HelloW orld.mxml” tal y como se muestra en el código adjunto:

<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HelloWorldHomeView"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Style source="main.css"/> </s:ViewNavigatorApplication>

Si en este momento editam os el fichero main.css deberíamos tener el siguiente contenido.

/* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; s|Button.next { skinClass:

ClassReference("skins.NextButtonSkin1");

}

s|Button.back {

skinClass:

ClassReference("skins.BackButtonSkin1");

}

Y el resultado es el siguiente:

Dejando al lector probar con los otros dos skins proporcionados además de los presentados. P
Dejando al lector probar con los otros dos skins proporcionados además de los presentados. P

Dejando al lector probar con los otros dos skins proporcionados además de los presentados. P ara ello basta con cambiar en el fichero main.css mostrado de NextButtonSkin1 y BackButtonSkin1 a las versiones numeradas con el 2.

Introducción a Ansca Corona y Lua

Ansca Corona mediante su Corona SDK permite crear aplicaciones nativas para iPHone y Andro id. Las aplicaciones son a nivel de interfaz y comportamiento idénticas a las aplicaciones construidas sobre el dispositivo permitiendo acceso completo a características del mismo como pueden ser la cámara o el acelerómetro o a interfaces como OpenGL. La p rogramación de estas aplicaciones se realizar en Lua, un lenguaje de script intuitivo y sencillo y de altísimas prestaciones.

Respecto de Lua simplemente comentar que se desarrollo en el año

1983 como lenguaje de script que puede ser integrado fácilmente c on lenguaje C apoyándose en él para funciones de bajo nivel y ofreciendo un marco de alto nivel para el desarrollador en el que funciones como la seguridad, la gestión de memoria y de variables de tamaño variable son gestionadas automáticamente.

La potenci a de Lua viene de sus múltiples librerías, desarrolladas durante años con gran facilidad al ser la extensibilidad uno de sus puntos fuertes al estar diseñado desde el inicio para su crecimiento bien a través de nuevas librerías escritas en Lua o a partir d e código en C. Pero no sólo con C. Lua puede ser integrado con otros lenguajes de programación como Fortran, Java, Smalltalk, Ada, C#, o incluso con otros lenguajes de script como Perl o Ruby.

Sus otras principales características son: Simplicidad. Aun siendo un lenguaje completo que lo convierte en un entorno de

programación ideal para dispositivos embebidos como son los terminales móviles, al ocupar su distribución completa menos que un disco de 1.4 Mb, habituales cuando fue desarrollado.

Eficiencia. En los distintos test realizados sobre lenguajes de script siempre ocupa una de las primeras posiciones lo que unido a su escasa difusión en comparación con la solución de Adobe lleva a una mayor tranquilidad respecto de la aceptación por parte de Apple de las aplicaciones desarrolladas con Lua.

Portabilidad. Desde entornos Windows, Linux, Mac pasando por Symbian, Palm, iOS, Android, procesadores ARM, etc sin necesidad de compilación condicional.

Ejemplo de aplicación Ansca Corona Una vez des cargado el SDK de Corona sólo es necesario un editor de texto plano para realizar la primera aplicación. Se recomienda usar por ejemplo el software Notepad++. Para hacer la clásica aplicación “Hola mundo”, sólo es necesario escribir en nuestro editor de te xto:

print( "Hello World" )

Y guardarlo con el nombre main.lua . Para ejecutarlo es necesario ejecutar el programa denominado Corona Simulator y arrastrar sobre el emulador el fichero .lua creado de manera que se obtiene el siguiente resultado en el terminal de emulación:

obtiene el siguiente resultado en el terminal de emulación: A la vez el terminal de emulación

A la vez el terminal de emulación no mostrará nada por el momento. Para que la salida aparezca en el terminal eRl código es igualmente sencillo pero ya necesitamos construir objetos del SDK. Así haremos:

local textObject = display.newText( "Hello World!", 50, 50, nil, 24

)

Por ejemplo en este caso se ha de llamar a la función newText de la librería display y con objeto textObject devuelto, utilizamos uno de sus mé todos denominado setTextColor para establecer en blanco el color del texto. Podemos bien cerrar el emulador y volver a abrir main.lua mediante doble click, volver a arrastrarlo o mejor aún utilizar el menú File > Relaunch (CTRL + R en Windows) para ver de nuevo el resultado que se muestra a continuación.

Siguiendo con el tutorial básico de Corona vamos a añadir a continuación un botón para mostrar como funciona la capa de interfactividad:

local button = display.newImage( "button.png" ) button.x = display.stageWidth /2

button.y = display.stageHeight – 50

Para lo cual necesitamos una imagen que nos sirva como botón y que en el ejemplo se denomina button.png - . Y para asociar el manejador del evento “tap” (cuando el usuario acaba de presionar el botón) se añade el siguiente código:

function button:tap( event )

local r = math.random( 0, 255

)

local g = math.random( 0, 255

)

local b = math.random( 0, 255

)

textObject:setTextColor( r, g, b )

end

button:addEventListener( "tap", button ) Y en este ejemplo de esta manera cambia el color del

button:addEventListener( "tap", button )

Y en este ejemplo de esta manera cambia el color del texto de manera aleatoria cuando el usuario hace tap sobre el botón. Este ejemplo junto con muchos otros vienen directamente con la instalac ión del SDK y se pueden localizar, por ejemplo en la instalación del autor en: C: \ Archivos de programa \ Ansca \ Corona SDK \ Sample Code \ Tutorial \ AppProgrammingGuide \ HelloWorld2:

Ansca Corona está aunque permite realizar todo tipo de aplicaciones está especial mente diseñador para proyectos multimedia y juegos donde su API es especialmente completa.

Así por ejemplo, para desplazar el texto en pantalla es suficiente con añadir la siguiente línea de código:

transition.to( textObject, { time=1000, y=textObject.y+100 } )

Utilizando la librería transition que contiene gran variedad de transiciones muy similares en comportamiento a las habituales transisciones que estamos habituados a manejar en aplicaciones nativas de Apple.

Igualmente par a añadir la reproducción de un sonido a hacer tap basta con añadir en nuestra función function button:tap( event ) la siguiente línea de código:

media.playEventSound( "beep.wav" )

Este ejemplo se encuentra en: C: \ Archivos de programa \ Ansca \ Corona SDK \ S ample Code \ Tutorial \ AppProgrammingGuide \ HelloWorld3 en la instalación del autor.

En todos estos ejemplos proporcionados con el SDK pueden verse múltiples ficheros además del fichero .lua mencionado. Básicamente son los iconos necesarios para desplegar la a plicación tanto en Android como en iOS. Por ejemplo el icono de la aplicación debe tener el nombre Icon.png de resolución 57x57 pixeles (el App Store necesita también un icono de 512x512 pixeles). Otro

recursos importante es el fichero Default.png que se m ostrará durante la inicialización de la aplicación.

Además de recursos, Para permitir un desarrollo más modular Lua permite incluir distintos ficheros .lua que se relacionan unos con

otros a través de la palabra reservada require . Por ejemplo podemos crear una subcarpeta class donde añadir la funcionalidad relacionada con distintas tareas de nuestra aplicación como puede ser la carga de un fichero XML externo. Pongamos que esta funcionalidad se implementa en un fichero con nombre xml.lua . La llamada que ha de hacerse desde main.lua sería:

local xml = require( "class.xml" ).newParser();

Y en el fichero class.xml se tiene el siguiente código para crear la clase destinada a parsear XML module(

, package.seeall) function newParser()

XmlParser = {}; function XmlParser:ToXmlString(value)

end function XmlParser:loadFile(xmlFilename, base)

end Return XmlParser end

Consideraciones globales sobre una aplicación Corona

Cuando la aplicación es lanzada entra en un ciclo de eventos / pintado en los que los eventos lanzas triggers a los que podemos tener asociadas funciones o no. Entre esos eventos existen eventos globales como el pintado de un nuevo cuadro ( frame ), llamadas o SMS, entrada en reposo del dispositivo o inclu so el evento applicationExit (cuando el usuario pulsa el botón Home y sale de la aplicación) que es especialmente importante para en ese momento guardar datos de usuario, limpiar ficheros temporales o manejar casos simulares.

Por ejemplo el siguiente códig o gestiona un cambio de orientación de la pantalla ( -- sirve para incluir comentarios en Lua)

local label = display.newText( "portrait", 0, 0, nil, 30 ) label:setTextColor( 255,255,255 ) label.x = display.stageWidth/2; label.y =

display.stageHeight/2

local function onOrientationChange( event ) label.text = event.type -- rotar el texto local newAngle = label.rotation - event.delta transition.to( label, { time=150, rotation=newAngle } ) end Runtime:addEventListener( "orientation", onOrientationChange )

Por razones de seguridad las aplicaciones se ejecutan en su propio sandbox . Esto implica que las aplicaciones tienen acceso limitado a la red y a los propios ficheros. Así puede acceder a los ficheros de un sistema de directorios asociados a la propia aplicación pero no a los de otra instancia o aplicación.

Respecto del interfaz gráfico y de animaciones de Corona, que como se ha comentado es uno de sus principales virtudes, comentar que perm ite como en el caso de los más populares entornos de animación realizar animaciones basadas en duraciones especificadas en segundos o basándose en el número de frame. La diferencia entre un caso y otro es que las animaciones basadas en el tiempo tratan de ejecutarse en ese periodo independientemente de la velocidad de frame, mientras que en el caso de basarse en el número de frame se ejecutará en ese frame concreto que puede llevarle al dispositivo más o menos tiempo alcanzar dado que las aplicaciones no si empre se ejecutarán a la velocidad deseada pues siempre dependerá de cuanto de ocupado este el sistema

operativo.

Respecto del proceso de crear un exportar un proyecto Corona a un dispositivo físico comentar dos aspectos importantes. Por un lado acompañand o al fichero main.lua nos encontramos con el fichero config.lua. En este fichero encontramos código cómo:

application =

{

content = {

width = 320, height = 480,

scale = "zoomEven" -- zoom hasta llenar pantalla

},

}

En este ejemplo se define la relación de aspecto inicial de la aplicación como 320x480 píexles y se indica que se puede escalar mediante el evento de zoom hasta llenar la pantalla.

Si consideramos un ejemplo más complejo desarrollado por el autor:

application = { content = { width = 768, height = 1024, scale = "Letterbox",

fps = 30,

antialias = true,

},

Se define que la aplicación parte de una resolució n de 768x1024 pixeles pero que en este caso ante un evento de escalado la aplicación va a estar limitada a la pantalla dejando franjas negras en

donde no llegue a ocuparse la pantalla (letterbox). Igualmente en este ejemplo se ve como se han utilizado las opciones de fps para especificar la velocidad en frames por segundo deseada para la aplicación y que el modo de renderizado de texto será usando filtros antialiasing.

El fichero que complementa la configuración y que sólo entra en juego para la exportación a un dispositivo físico es el fichero build.settings que puede editarse con cualquier editor de texto plano. Por ejemplo, en las aplicaciones HellowWorld incluidas en el SDK nos encontramos con:

settings = {

iphone = {

plist = {

CFBundleIconFile = "Icon.png", CFBundleIconFiles = { "Icon.png",

}, },

}

}

"Icon@2x.png",

"Icon-72.png",

En el que se definen para iPhone una serie de recursos. En cambio en el ejemplo asociado al proyecto de sarrollado por el autor se tienen opciones más avanzadas que se incluyen como ejemplo de lo que el SDK de Corona permite:

settings = { orientation = { default = "landscapeLeft", supported = {"landscapeLeft"},

},

iphone = { plist = { UIApplicationExitsOnSuspend = true, UIPrerenderedIcon = false, CFBundleIconFile = "Icon.png", CFBundleIconFiles = {"Icon.png"}, UIAppFonts = {"corporate.otf"}

En este ejemplo se define para cualquier tipo de dispositivo que la única orientación soportada para la aplicación es en modo horizontal desde el lado izquierdo de la pantalla. Y mientras que sólo se proporciona un icono para la aplicación se añade la fuente por defecto a usar (recordar que anteriormente se había indicado que esta fuente es usada en modo antialias ) que es la fuente corporativa del cliente final de la aplicación.

En este caso no se necesitan de tantos iconos pues la aplicación realizada se distribuye en modo inHouse que es la denominació n de Apple para aplicaciones que se distribuyen fuera del Apple Store siguiendo el modelo de licencias corporativas.

A lo largo de este tema se han presentado pe queñas introducciones

a las plataformas de Adobe y Ansca Corona para el desarrollo de

aplicaciones móviles multiplataforma.

Como se comentó en la presentación del tema estos lenguajes de script son ideales en la opinión del autor para desarrollar aplicacio nes sencillas y en concreto Adobe ha pasado años demostrándolo con una posición de absoluto predominio en el sector de las aplicaciones web. En cambio el enfrentamiento entre Adobe y Apple ha cambiado la situación y es necesario considerar otras opciones c omo Ansca Corona que sirve para los mismos propósitos y sobre todo HTML5.

Se anima en cualquier caso al alumno a profundizar en el estudio de Flex, sin duda y siempre en opinión del autor la mejor

plataforma para el desarrollo de aplicaciones sencillas y q ue no requieran de prestaciones elevadísimas que se ha desarrollado en los últimos diez años.