Beruflich Dokumente
Kultur Dokumente
5
Desarrollo de aplicaciones en
Silverlight.
Jous Yeray Julin
Ibon Landa
Agradecimientos
Escribir un libro consume una cantidad ingente de tiempo, normalmente del tiempo
que debera estar dedicado a tu familia, por lo que tengo que agradecer a mi mujer
Hilda y a mis hijos, Roberto, Laura y Sofia la eterna paciencia que han demostrado
tener conmigo, con mis fines de semana delante del ordenador escribiendo y
desarrollando.
Siempre he pensado que una de las razones por las que hoy estoy escribiendo un
libro, un blog e intentando aprender cada da algo ms, es el espritu de superacin y
trabajo que me inculcaron desde muy pequeo quienes me rodeaban, por todo ello
gracias pap y mam. No estara aqu sin vosotros.
Tambin tengo que agradecer a todos mis compaeros de Plain Concepts, sobre
todo a los de Bilbao, que aguantan incansablemente mis chapas sobre Windows Phone
y Silverlight. Gracias chicos, es un placer trabajar con vosotros cada da!.
Para terminar, gracias a mi abuela, Josefa, siempre ests en mi corazn.
Josu Yeray Julin
Contenido
AGRADECIMIENTOS ............................................................................................ iii
CONTENIDO.......................................................................................................... iv
PRLOGO .............................................................................................................. xi
1.- CONOCIENDO WINDOWS PHONE ........................................................... 15
1.- Introduccin................................................................................................................................ 15
2.- Arquitectura de Windows Phone ......................................................................................... 16
2.1.- Modelo de hardware .................................................................................................... 16
2.2.- Modelo de software ...................................................................................................... 18
2.2.1.- Modelo de aplicacin ............................................................................................ 19
2.2.2.- Modelo de UI .......................................................................................................... 19
2.2.3.- Integracin con la nube ........................................................................................ 19
2.2.4.- Runtime de aplicaciones ....................................................................................... 19
3.- Preparando nuestro entorno ................................................................................................. 21
3.1.- Descargando el SDK ..................................................................................................... 21
3.2.- Microsoft Visual Studio 2010 para Windows Phone ............................................ 22
3.2.1.- Windows Phone Application .............................................................................. 24
3.2.2.- Windows Phone Databound Application ........................................................ 24
3.2.3.- Windows Phone Class Library ........................................................................... 25
3.2.4.- Windows Phone Panorama Application .......................................................... 25
3.2.5.- Windows Phone Pivot Application ................................................................... 26
3.2.6.- Windows Phone 3D Graphics Application ..................................................... 26
3.2.7.- Windows Phone Audio Playback Agent .......................................................... 26
3.2.8.- Windows Phone Audio Streaming Agent ........................................................ 27
3.2.9.- Windows Phone Task Scheduler Agent .......................................................... 27
3.3.- Microsoft Expression Blend 4 para Windows Phone ........................................... 27
3.4.- Emulador de Windows Phone ................................................................................... 29
3.5.- Application Deployment Tool .................................................................................... 32
3.6.- Developer Registration Tool ...................................................................................... 33
3.7.- Marketplace Test Tool ................................................................................................. 34
4.- Silverlight para Windows Phone............................................................................................ 35
5.- Conclusin .................................................................................................................................. 36
2.- INTRODUCCIN A SILVERLIGHT PARA WINDOWS PHONE .............. 37
1.- Introduccin................................................................................................................................ 37
2.- Todo es XAML .......................................................................................................................... 38
3.- Marcos, pginas y elementos. ................................................................................................. 39
3.1.- Marcos .............................................................................................................................. 39
iv
Contenido v
3.2.- Pginas............................................................................................................................... 40
3.3.- Elementos ........................................................................................................................ 41
3.3.1.- UIElement ................................................................................................................ 42
3.3.2.- FrameworkElement ............................................................................................... 42
3.3.3.- Control ..................................................................................................................... 42
4.- Poniendo orden en nuestra pantalla ..................................................................................... 42
4.1.- Propiedades adjuntas .................................................................................................... 43
4.2.- Canvas ............................................................................................................................... 43
4.3.- StackPanel ........................................................................................................................ 45
4.4.- Grid ................................................................................................................................... 47
4.4.1.- Tamao de columnas y filas ................................................................................. 53
5.- Recursos, estilos y plantillas .................................................................................................... 57
5.1.- Recursos ........................................................................................................................... 57
5.2.- Estilos ................................................................................................................................ 61
5.2.1.- Estilos en Expression Blend ................................................................................. 64
5.3.- Plantillas ............................................................................................................................ 67
5.3.1.- Estados visuales ...................................................................................................... 71
5.3.2.- Plantillas en Expression Blend ............................................................................. 73
5.4.- Jerarqua de cercana en estilos y plantillas. ............................................................ 79
6.- Conclusin ................................................................................................................................... 80
3.- SILVERLIGHT PARA WINDOWS PHONE A FONDO ............................... 81
1.- Introduccin ................................................................................................................................ 81
2.- Bosques y rboles ...................................................................................................................... 81
2.1.- VisualTreeHelper ........................................................................................................... 84
3.- Sistema de propiedades de Silverlight .................................................................................. 89
3.1.- DependencyObject........................................................................................................ 89
3.2.- DependencyProperty .................................................................................................... 89
3.3.- AttachedProperty .......................................................................................................... 93
4.- Sistema de enlace a datos de Silverlight ............................................................................... 95
4.1.- Definiendo Datos ....................................................................................................... 95
4.2.- Expresiones de enlace a datos .................................................................................... 97
4.3.- Contexto de datos ........................................................................................................ 99
4.4.- Comportamiento de enlace a datos ....................................................................... 100
4.4.1.- Mode ....................................................................................................................... 100
4.4.2.- UpdateSourceTrigger .......................................................................................... 103
4.4.3.- Converters ............................................................................................................ 105
4.5.- Enlazando Listas............................................................................................................ 109
4.5.1.- Plantillas de datos ................................................................................................. 111
5.- MVVM ......................................................................................................................................... 118
5.1.- Qu es MVVM? ........................................................................................................... 118
5.2.- MVVM en Windows Phone ....................................................................................... 120
5.3.- Comandos ...................................................................................................................... 121
5.3.1.- Implementando comandos................................................................................. 121
5.3.2.- DelegateCommand .............................................................................................. 124
6.- Conclusin ................................................................................................................................. 126
Contenido vii
Contenido ix
Prlogo
Antes de presentarle el libro que tiene entre manos, permtame estimado lector darle a
conocer quin es su autor. As, seguramente entender por qu esta obra es
indispensable si piensa aprender a desarrollar en la plataforma Windows Phone. Por
suerte, a lo largo de mi vida he conocido a muchos profesionales del desarrollo, bien
por cuestiones laborales o bien en los distintos eventos en los que he tenido el placer de
participar. Para serle sinceros, uno empieza a conocer muy bien cuales de estos son los
que entienden la tecnologa como un arte y cules son los que entienden el mundo del
desarrollo de software como un trabajo ms en el que ganarse la vida. Josu Yeray ve y
fomenta el arte en su trabajo, es de esas personas que uno quiere tener siempre a su
lado, con una gran pasin por el mundo del desarrollo y, sobre todo, con unas
incansables ganas de trabajar y ayudar a la comunidad. Desde que he tenido el placer
de trabajar con l no ha dejado de sorprenderme gratamente por sus increbles
capacidades tcnicas, resaltadas an ms por ese sobresfuerzo que muchos hacemos
robndole tiempo a nuestras familias. Adems de ser una de las personas ms activas y
destacadas en los foros de soporte de Microsoft tambin mantiene un excelente blog
sobre Windows Phone. Ahora, adems, suma a todas sus aportaciones al mundo
tecnolgico este gran compendio de saber hacer sobre la plataforma Windows Phone.
Querido amigo, si usted desea adentrarse en el mundo del desarrollo en la ltima
versin de la plataforma mvil de Microsoft, le recomiendo encarecidamente que lea y
disfrute de este libro. Seguro que ser muy provechoso para su vida profesional. Por el
contrario, si usted ya conoce la plataforma pero desea ver resueltas todas esas
preguntas que siempre se ha hecho y no ha tenido tiempo a investigar, este tambin es
su libro, puesto que, Josu se ha metido hasta el ltimo de los recovecos de los que
extraer informacin til a los desarrolladores.
Escribir un libro es una tarea ardua, el primero como en este caso, si cabe an ms
compleja todava. Pero Josu, sin duda, ha conseguido superar todos los problemas con
sobresalientes resultado. Gracias Josu por tenerte como compaero profesional y
gracias Josu por esta gran obra que ha visto la luz.
xiii
CAPTULO
Conociendo Windows
Phone
1.- INTRODUCCIN
El 15 de Febrero de 2010, durante el Mobile World Congress celebrado en
Barcelona, Microsoft present al mundo su nuevo sistema operativo para smartphones:
Windows Phone 7.
Su desarrollo comenz en 2008 tras la reorganizacin del equipo de Windows
Mobile y la cancelacin del proyecto Photon, la versin del sistema en la que
Microsoft trabajaba desde 2004 con pocos resultados. Originalmente se plante su
salida al mercado en 2009, pero una serie de retrasos obligaron a preparar una versin
de transicin de Windows Mobile (WM 6.5) y retrasar el lanzamiento de Windows
Phone 7 hasta Octubre de 2010 en Europa, Noviembre de 2010 en USA y 2011 para
Asia.
Una de sus ms aclamadas novedades es la interface de usuario, denominada
Metro, basada en unos simples pero efectivos mosaicos dinmicos que muestran
informacin til al usuario. Tambin se estrena un nuevo concepto llamado HUB, un
lugar donde centralizar acciones y agrupar aplicaciones por la actividad a la que se
destinan As, podemos encontrar el HUB de Imgenes, Zune, Office o Xbox Live, cada
uno de los cuales nos dar acceso a tareas especficas como msica, documentos o
juegos.
Un ao despus de su presentacin, de nuevo en el marco del Mobile World
Congress, Windows Phone 7, con apenas unos meses de vida, presenta importantes
novedades. A su primera actualizacin en Marzo de 2011, que incluye mejoras en el
rendimiento general as como la inclusin de copiar y pegar, se une una nueva
actualizacin, llamada Mango que incluye el motor de Internet Explorer 9, con su
soporte para HTML5, Multitarea en aplicaciones de terceros e integracin con Xbox
360 y Kinect. En Mayo de 2011 Microsoft puso a disposicin de los desarrolladores la
15
Con este modelo en mente, Microsoft creo unas especificaciones mnimas iniciales,
llamadas Chassis 1, por las que todo fabricante que desease crear terminales para el
nuevo sistema debe guiarse (Figura 1.1).
2.2.2.- Modelo de UI
El modelo de interfaz de usuario de Windows Phone se compone de elementos,
pginas y sesiones. Un elemento es todo control que se muestra al usuario, una pgina
es una agrupacin lgica de elementos y una sesin es el conjunto de interacciones que
realiza un usuario sobre nuestra aplicacin e incluso puede involucrar a otras
aplicaciones.
Por ejemplo, podemos realizar una aplicacin que necesite del usuario una foto,
tenemos un botn (elemento) en nuestra pgina que muestra el HUB de imgenes y una
vez que el usuario ha seleccionado una, vuelve a nuestra aplicacin y se muestra la
imagen escogida. Este conjunto de acciones se engloba dentro de una sesin.
Estos frameworks se ejecutan sobre un sandbox de .NET que les facilita el acceso al
hardware, sensores, almacenamiento, localizacin, etc Esto quiere decir que nuestras
aplicaciones nunca tendrn acceso nativo al sistema y siempre se ejecutarn aisladas
del sistema y entre ellas mismas, no pudiendo compartir espacio de almacenamiento ni
ningn otro tipo de informacin a no ser que usemos servicios externos en la nube para
ello.
Con la nueva versin de las herramientas de desarrollo para Mango (Windows
Phone 7.5) se abre la posibilidad de tener aplicaciones mixtas, que usen Silverlight para
la interface de usuario y XNA para grficos 3D, creando una experiencia de usuario
ms rica y completa.
Application Deployment
Tenemos que descargar la versin final de las herramientas para Windows Phone
Mango. Pero Windows Phone Mango no es la versin 7.5? Exactamente, el nombre
de producto es Windows Phone 7.5, pero la versin del Sistema Operativo y, por ende,
la versin del kit de desarrollo es la versin 7.1. En este libro nos referiremos siempre a
Windows Phone 7.5, por ser el nombre oficial que Microsoft le ha dado al producto.
Una vez que hayamos descargado las herramientas, el proceso de instalacin es
muy sencillo, aunque puede llevar un tiempo considerable en funcin de la calidad de
nuestra conexin a Internet, el instalador se compone solo de un lanzador que ocupa
algo menos de 1Mb y descarga todos los componentes que necesite durante la
instalacin, necesitando en total alrededor de 230Mb (Figura 1.5):
Desde esta ventana principal podremos crear un nuevo proyecto de Silverlight para
Windows Phone 7.5 o XNA 4.0 para Windows Phone 7.5, ambos usando como
lenguaje C# (figura 1.7), pulsando sobre el link New Project o en el men File >
New > Project.
Ya que este libro est dedicado a Silverlight, nos centraremos en los diferentes
proyectos que podemos crear con esta tecnologa, dejando al lector que investigue los
proyectos de XNA si as lo desea.
Disponemos de 9 tipos de proyectos diferentes en Silverlight para Windows Phone:
Nota: Los proyectos marcados con * solo son compatibles con dispositivos que
ejecuten Windows Phone 7.5
enlace a datos en Windows Phone 7.5 y como usar el patrn de diseo MVVM para
crear aplicaciones.
concreto que nos permite reproducir msica que se encuentre en el telfono en segundo
plano sin necesidad de tener una interface de usuario abierta y visible.
Los proyectos a los que tenemos acceso son los mismos que en Visual Studio 2010,
no solo se llaman de la misma forma, Visual Studio 2010 y Expression Blend 4
comparten el mismo formato de proyecto, por lo que podremos crear un proyecto en
Visual Studio 2010 y abrirlo con Expression Blend 4 y viceversa, trabajando en ambos
entornos sobre el mismo proyecto sin ningn problema.
De hecho, al tener los dos instalados en el mismo sistema, se detectarn
mutuamente, desde Expression Blend al hacer clic derecho sobre un archivo XAML,
CS o VB tendremos una opcin en el men contextual Edit in Visual Studio (Editar
en Visual Studio) que automticamente nos abrir el proyecto en Visual Studio listo
para editar el archivo seleccionado, una vez hechos cambios, solo con guardar y volver
a Expression Blend los cambios se cargarn automticamente. De la misma forma, si
seleccionamos un archivo XAML en Visual Studio tendremos la opcin en el men
contextual Open in Expression Blend (Abrir en Expression Blend) que se comportar
igual, podremos realizar cambios y al volver a Visual Studio este los detectar y los
tendremos disponibles.
Nota: Para poder invocar a Visual Studio desde Blend y viceversa, debemos
ejecutar las aplicaciones con permisos elevados (Run as Administrator / Ejecutar
como Administrador), de lo contrario recibiremos un error indicndonos que
necesitamos elevar los permisos.
Podremos lanzar el emulador desde Inicio > Programas > Windows Phone
Developer Tools > Emulador de Windows Phone.
Tambin podemos indicarle a Visual Studio que deseamos usar el emulador para
ejecutar nuestra aplicacin, desde el combo de target de Silverlight que encontraremos
en la barra standard de herramientas (Figura 1.12):
Tambin tenemos una herramienta que nos permitir emular el comportamiento del
acelermetro en nuestra aplicacin, con un modelo 3D del telfono que podremos girar
como deseemos (Figura 1.15):
Tecla
Retroceder Pgina (Page Up)
Avanzar Pgina (Page Down)
F1
F2
F3
F6
F7
F9
F10
Accin
Habilita el teclado en el emulador
Deshabilita el teclado en el emulador
Botn fsico Atrs
Botn fsico Inicio
Botn fsico Bsqueda
Botn cmara Media pulsacin
Botn cmara pulsacin completa
Botn Subir volumen
Botn Bajar volumen
Esta herramienta de pruebas est totalmente integrada en Visual Studio 2010, solo
tendremos que presionar con el botn derecho sobre el nombre del proyecto y escoger
la opcin Open Marketplace Test Kit.
Con todas estas pruebas podremos enviar al Marketplace una aplicacin con mucha
ms seguridad de que todo est en orden y que nuestra aplicacin superar las pruebas
del mismo de forma satisfactoria.
Nuevos controles
5.- CONCLUSIN
De esta forma hemos terminado el primer captulo de Programar en Silverlight
para Windows phone.
Despus de haber ledo este captulo deberamos tener el conocimiento terico
necesario para comenzar a desarrollar aplicaciones para Windows Phone 7.5, sabiendo
los pormenores de la plataforma, su modelo de desarrollo de aplicaciones, las ventajas
de desarrollo y sus limitaciones. En el siguiente captulo profundizaremos en la
creacin de interfaces de usuario efectivas con Silverlight, posicionamiento de
controles, interfaces de usuario que fluyan, estilos, plantillas y reutilizacin de
recursos.