M3: Creando Aplicaciones

para Windows Phone

1a - Introduccin a Windows Phone 8 Desarrollo de aplicaciones | Parte 1
1b - Introduccin a Windows Phone 8 Desarrollo de aplicaciones | Parte 2
2 - Diseo de Aplicaciones de Windows Phone
3 - Creando Aplicaciones para Windows Phone
4 - Archivos y almacenamiento en Windows Phone 8
5 - Ciclo de vida de las aplicaciones en Windows Phone 8
6 - Agentes de fondo
7 - Notifcaciones de Tiles y bloqueo de pantalla
8 - Notifcaciones Push
9 - Uso de Recursos para telfonos con Windows Phone 8
10 - Comunicacin de Aplicacin a Aplicacin
Objetivos








11 - Comunicacin de red en Windows Phone 8
12 - Sensores de proximidad y Bluetooth
13 - Entrada de voz en Windows Phone 8
14 - Mapas y ubicacin en Windows Phone 8
15 - Soporte en Cartera
16 - En aplicacin de Compras
17 - La Tienda de Windows Phone
18 - Aplicaciones Enterprise en Windows Phone 8: Arquitectura y Publicacin
19 - Windows 8 y Windows Phone 8 Desarrollo Multiplataforma
20 Mobile Web
Objetivos
Navegacin de Pginas
Barra de aplicaciones
Cambios en el Manejo de orientacin de la pgina
Manejo de diferentes resoluciones de pantalla
Localizacin
Windows Phone Toolkit
Transicin de pgina
Agenda del mdulo
Con el mdulo anterior, pasamos por los conocimientos esenciales que necesita para construir una aplicacin
Navegacin de Pginas
Pgina y Frame
Frame
Control contenedor de nivel superior
PhoneApplicationFrame class
Contiene el control de la pgina y los elementos
del sistema, como la bandeja del sistema y la
barra de aplicaciones



Pgina
Rellena toda la regin el contenido del frame
PhoneApplicationPage-derived class
Contiene un ttulo
Opcionalmente, las superfcies de su propia
barra de la aplicacin


Navegacin de Pgina
Las aplicaciones en XAML en Windows Phone
utiliza un modelo de navegacin basado en pginas


Similar al modelo de la pgina web
Cada pgina identifcada por un URI
Cada pgina es esencialmente sin estado
private void HyperlinkButton_Click_1(
object sender, RoutedEventArgs e)
{
NavigationService.Navigate(
new Uri("/SecondPage.xaml", UriKind.Relative));
}
Navigating Back
La aplicacin puede proporcionar controles
para navegar de nuevo a la pgina anterior





El hardware Back key tambin navega de
vuelta a la pgina anterior


No se requiere cdigo - incorporado
en el comportamiento

private void Button_Click_1(
object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}
Overriding Back Key
Puede ser necesario reemplazar Back hardware key si 'volver a la pgina anterior
"no es un comportamiento lgico

Por ejemplo, cuando se muestra un panel de elemento emergente

El usuario esperara usar Back key para cerrar el panel, no la pgina


Overriding la Back Key
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"

shell:SystemTray.IsVisible="True"
BackKeyPress="PhoneApplicationPage_BackKeyPress">
In code:
private void PhoneApplicationPage_BackKeyPress(object sender,
System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true; // Tell system we've handled it

// Hide the popup...
...
}
Pasar datos entre pginas
Puede pasar datos de cadena entre las pginas utilizando cadenas de consulta


En la pgina de destino

private void passParam_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative));
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);

string querystringvalue = "";
if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue))
textBlock1.Text = querystringvalue;
}
Pasando objetos entre pginas
A menudo, se pasa a un objeto de datos de una pgina a otra
Por ejemplo, el usuario selecciona un elemento en una lista y
se desplaza a una pgina de detalles
Una solucin consiste en almacenar el ViewModel (es decir, datos)
en tu App class


Aplicacin entera global
Pase el ID del elemento seleccionado en la cadena de consulta

// Navigate to the new page
NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" +
(MainLongListSelector.SelectedItem as ItemViewModel).ID,
UriKind.Relative));
Manejo de navegacin no lineal
Disee su estrategia de aplicacin de navegacin con cuidado!
Si se desplaza de "tercera pgina" a la "pgina principal" y
el usuario luego presiona la tecla de retroceso, lo que pasa?
El usuario de la aplicacin que espera para salir
La Aplicacin en realidad lleva de regreso a la
Tercera pgina

Solucin para Windows Phone 7.0 es el cdigo complejo de
manejar correctamente la navegacin de vuelta, o en la
biblioteca de recetas de navegacin no lineal de AppHub


Windows Phone APIs:
NavigationService.RemoveBackEntry ()
NavigationService.RemoveBackEntry()
Cuando 'Tercera Pgina' vuelve a navegar hacia MainPage, pone un marcador en
la cadena de consulta



En OnNavigatedTo () en MainPage, busca el marcador y si est presente, retira la 'Tercera Pgina',
'SecondPage' y la instancia original de 'MainPage' de la pila del historial de navegacin

NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative));
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New
&& NavigationContext.QueryString.ContainsKey("homeFromThird"))
{
NavigationService.RemoveBackEntry(); // Remove ThirdPage
NavigationService.RemoveBackEntry(); // Remove SecondPage
NavigationService.RemoveBackEntry(); // Remove original MainPage
}
base.OnNavigatedTo(e);
}
Demo 1: Navegacin de Pgina
ApplicationBar
Application Chrome System Tray y Barra de aplicaciones
System Tray
Barra de aplicaciones
System owned indicator area muestra informacin
de estado a nivel de sistema
Las aplicaciones pueden mostrar / ocultar
Microsoft.Phone.Shell.SystemTray.IsVisible = false;
El rea donde las aplicaciones pueden mostrar los botones para
las tareas ms comunes
Puede mostrar el men pop-up para las tareas menos comunes
Utilice la ApplicationBar en lugar de crear su propio
sistema de mens


Hasta 4 botones ms el men opcional
No llene los 4 slots si no es necesario

Deslice la barra para abrir el men
El sistema colorea el botn de acuerdo con el tema de los usuarios seleccionados
ApplicationBar
Deslice la barra para abrir el men
Utiliza el primer plano en blanco sobre fondo transparente para los iconos
ApplicationBar en Xaml
<phone:PhoneApplicationPage
x:Class="CRMapp.MainPage
>

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar x:Name="AppBar" Opacity="1.0" IsMenuEnabled="True">
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton x:Name="NewContactButton" IconUri="Images/appbar.new.rest.png"
Text="New" Click="NewContactButton_Click"/>
<shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png"
Text="Find" Click="SearchButton_Click"/>
</shell:ApplicationBar.Buttons>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data"
Click="GenerateMenuItem_Click" />
<shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data"
Click="ClearMenuItem_Click" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
ApplicationBar y Landscape
ApplicationBar pinta en el lado de la
pantalla en landscape
Se ha incorporado en la animacin cuando
la pgina cambia la orientacin
Opacidad de la ApplicationBar
Si la opacidad de la Application Bar menor que 1,
la pgina mostrada ser deel tamao de la Barra de
aplicaciones de superposiciones contenida en la pantalla
Si la opacidad es 1, la pgina que se muestra cambia el tamao
de la zona de la pantalla que no estn cubiertos por la barra
de aplicaciones

ApplicationBar Diseo en Blend Y ahora en VS tambin!
Demo 2: Diseando en ApplicationBar

Gestin de cambios de
orientacin de la pantalla
Esta aplicacin no funciona en modo
horizontal en el momento
No todas las aplicaciones hacen, necesitan de
Puede confgurar las aplicaciones para apoyar vertical
u horizontal

Diseo de interfaz de usuario en el telfono - Orientacin
New Device Tab en Visual Studio 2012
View Designer en vertical u horizontal
Seleccin de orientaciones
Una propiedad XAML para la pgina de la aplicacin de telfono te permite seleccionar
las opciones de orientacin disponibles


Tu aplicacin puede unirse a un evento que se dispara cuando los cambios de orientacin
SupportedOrientations="Portrait"
SupportedOrientations="PortraitOrLandscape"
Puedes necesitar Alterar el Layout
Layout inalterado
Layout optimizado para
el landscape
Usando una cuadrcula para facilitar el Landscape Layout
En la red, la segunda columna es utilizada en Retrato
<phone:PivotItem Header="recipe">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Row 0
Row 1
Row 2
Row 3
Column 0
Moviendo elementos en Landscape Layout
En Landscape, la descripcin de la receta se mueve en la segunda fla y la segunda columna y la tercera
fla de la parrilla es ahora no utilizado. Desde la altura de esa fla es "*", que se reduce a cero.
<phone:PivotItem Header="recipe">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Row 0
Row 1
Row 2
Row 3
Column 0 Column 1
Moviendo Elementos
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (this.Orientation == PageOrientation.LandscapeLeft || this.Orientation ==
PageOrientation.LandscapeRight)
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 1);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1);
}
else
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 2);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0);
}
}
)
Demo 4:
Manipulacin de la
Orientacin

Soporte de mltiples
resoluciones de pantalla
Tres resoluciones de pantalla
WVGA
800 x 480
15:9
WXGA
1280 x 768
15:9
720p
1280 x 720
16:9
As que tengo que hacer tres diferentes interfaces de usuario?
Bueno, no ...
Como desarrolladores, trabajamos con los pxeles independientes del dispositivo
OS aplica un factor de escala para la resolucin real

Resolucin Relacin de aspecto Factor de Escala Resolucin de la Escala
WVGA 800 x 480 15:9 1.0x scale 800 x 480
WXGA 1280 x 768 15:9 1.6x scale 800 x 480
720p 1280 x 720 16:9
1.5x scale, 80 pixels
taller (53 pixels, before
scaling)
853 x 480
Resoluciones de la Escala
WVGA WXGA 720p
8
0
0

8
0
0

8
5
3

480
480
480
Ajuste la rejilla Alto de fla en "Auto" a medida
segn los controles colocados en su interior
Ajuste la rejilla Alto de fla en "*" para ocupar
todo el resto del espacio
Si ajusta el tamao de varias flas utilizando "*",
el espacio disponible se divide en partes iguales
entre ellos

Utilice "Auto" y "*" en la flas de la cuadrcula para asegurar
un buen diseo
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Diseo adaptable Usando la rejilla
WVGA 720p
Altura de imagen de tamao
explcitamente 240px
Fila inferior es "Auto" para
dimensionado para contener
un TextBlock

Llegar fla "*", por lo consigue
todo lo que queda - termina
por alto en 720p


Imagenes
En la mayora de los casos, tu debes suministrar imgenes dirigidas a la pantalla WXGA (1280 x 768)
WXGA activos son de la mejor calidad
Escalar automticamente en mviles WVGA
Lucen grandiosos en 720p (1280 x 720)
Si lo deseas, puedes incluir imgenes en cada una de las tres resoluciones en el proyecto
Por ejemplo: MyImage.wvga.png, MyImage.wxga.png y MyImage.720p.png
En tiempo de ejecucin, obten Application.Current.Host.Content.ScaleFactor
para determinar la resolucin de la pantalla en el telfono actual, devuelve 100
para WVGA, 160 de WXGA y 150 para 720p



Escribe cdigo para cargar la imagen en tiempo de ejecucin adecuado para la resolucin
de pantalla actual

Pantallas de presentacin
Para agregar una pantalla de inicio a tu proyecto adecuado para todas las resoluciones, agrega un archivo como
contenido SplashScreenImage.jpg llama a una resolucin de 768 x 1280

El framework ajusta automticamente al tamao correcto en diferentes pantallas de resolucin
Si deseas proporcionar pxeles perfectos en pantallas de inicio para todas las resoluciones,
aade imgenes con los siguientes nombres:
SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg
Adems de estas imgenes, an debe incluir el archivo predeterminado SplashScreenImage.jpg

Aplicaciones de Iconos y Tiles
Debe proporcionar icono de la aplicacin y las imgenes de tiles de tamao de WXGA
El framework ajusta automticamente al tamao correcto para WVGA y 720p
Tamao del Tile WXGA
Aplicacin de icono 100 100
Pequeo 159 159
Mediano 336 336
Grande 691 336
Demo 4: Resoluciones
de Pantalla

Introduccin
a la localizacin
Soporte de idiomas en Windows Phone 8
Windows Phone 8 es compatible con 50 idiomas en pantalla
(incluye con el telfono en funcin del mercado y pas/regin)
y es seleccionable por el usuario en el idioma+seccin de la regin
de la pgina de Confguracin


Windows Phone 7.1 admite slo 24
Windows Phone 8 te permite crear aplicaciones que se leen
de derecha a izquierda


Nuevas plantillas de proyectos cuentan con el apoyo
de la construccin de la localizacin

Cada nuevo proyecto se crea en Visual Studio 2012 tiene una clase
incluida llamada LocalizedStrings

Simplemente proporciona acceso mediante programacin a los recursos
Un ejemplo de esto es crear en App.xaml en los recursos de la aplicacin
con la calve LocalizedStrings


Cada nuevo proyecto tambin incluye un archivo de recursos:
Resources \AppResources.resx
Algunas cadenas ya defnidos aqu
Cree todos sus literales de cadena en aqu para apoyar la localizacin
Todos los nuevos proyectos tambin incluyen un cdigo
comentado en MainPage.xaml.cs para confgurar una aplicacin
en la barra de localizacin


Acceso a recursos de cadena de XAML
Enlazar datos de la propiedad Text del
TextBlock y otros controles a la
StaticResource con una clave de
LocalizedStrings




Esa es una instancia de la clase
LocalizedStrings

Permite el acceso a recursos de cadena
Aadir soporte para idiomas adicionales
Propiedades del proyecto Haga
doble clic para abrir el editor
de propiedades


En la pestaa Aplicacin
Compruebe cada uno de
los idiomas de la aplicacin
que va a apoyar



Guardar las propiedades del proyecto
Visual Studio crea nuevos
archivos AppResources
para cada lengua/cultura
seleccionado



Traducir los archivos de recursos adicionales Idiomas
Visual Studio agrega un archivo de recursos para cada idioma adicional que la aplicacin
va a apoyar. Cada archivo de recursos se denomina con el nombre de cultura/idioma correcto,
segn lo descrito en Culture and language support for Windows Phone en la documentacin

Por ejemplo:
Para la cultura Espaola (Spaa), el archivo es AppResources.es-ES.resx.
Para la cultura Alemana (Alemn), el archivo es AppResources.de-DE.resx.
Suministra traducciones adecuadas en cada archivo de recursos
Haga doble clic en WMAppManifest.xml
para abrir el editor de manifestos


En la fcha Packaging
Confgurar el idioma predeterminado para
el idioma de sus recursos predeterminados


Esto identifca el lenguaje de las cadenas
en el archivo de recursos predeterminado.
Por ejemplo, si las cadenas en el archivo de
recursos predeterminado es Ingls (UK)
cadenas de idioma, se selecciona Ingls
(Reino Unido) como el Lenguaje neutral
para el proyecto






Defne el idioma predeterminado
Demo 5 : Localizacin
El Windows Phone Toolkit
Windows Phone Toolkit
Un producto de el equipo de Microsoft Windows Phone
Anteriormente conocido como el "Silverlight Toolkit '
El Windows Phone Toolkit aade nueva funcionalidad "fuera de banda" en el
conjunto ofcial de control del producto
Incluye el cdigo completo de cdigo abierto, muestras, documentacin y apoyo
en tiempo de diseo para los controles de Windows Phone
Actualizar cada tres meses aproximadamente
Correccin de errores
Nuevos controles
Cmo obtener el Windows Phone Toolkit
http://phone.codeplex.com
Obtener el cdigo fuente,
incluyendo la aplicacin de ejemplo
No MSI! - Instalar binarios de slo NuGet

NuGet
Sistema de gestin de paquetes para. NET
Simplifca la incorporacin de bibliotecas de terceros
Foco del desarrollador
Gratuito, de cdigo abierto

Cliente NuGet se incluye en Visual
Studio 2012 - incluyendo ediciones Express!


Utilice NuGet para aadir bibliotecas como
el Windows Phone Toolkit para proyectos


Controles en el
Windows Phone Toolkit

ContextMenu
DatePicker y TimePicker
ToggleSwitch
WrapPanel
ListPicker
WP7 ComboBox
Lista desplegable para un
pequeo nmero de elementos


Selector de pantalla completa
para las listas ms largas


... Y muchos ms
Custom MessageBox
Rating control
AutoCompleteBox
ExpanderView
HubTile
ms

Descarga la fuente de http://phone.codeplex.com, crea la aplicacin de ejemplo
e implementala en el emulador o dispositivo
Transiciones de pgina y
TiltEfect


Transiciones de pgina
Una forma sencilla de aadir transiciones de pgina a su aplicacin
similar a las de las aplicaciones incorporadas
Diferentes transiciones se incluyen
Roll, Swivel, Rotate, Slide and Turnstile
Comience con el control TransitionFrame del Windows Phone Toolkit
en lugar del predeterminado PhoneApplicationFrame


Situado en el mtodo
InitializePhoneApplication() method in App.Xaml.cs:


Habilitar transiciones en una pgina
Declarar espacio de nombres para Windows Phone Toolkit assembly


Under <phone:PhoneApplicationPage> root element, aade la transicin que deseas
TiltEfect
Aadir informacin visual adicional para el control de la interaccin
En lugar de los estados simples, tales como prensado o sin prensar, controla con
TiltEfect permitido proporciona el movimiento durante la manipulacin


Por ejemplo, Button tiene un sutil efecto 3D y parece que se mueve en la
pgina cuando se presiona y rebota de nuevo cuando se libera
Fcil de activar TiltEfect para todos los controles en una pgina


Tambin se puede aplicar a los controles individuales
Demostracin 6: Transiciones de pgina y TiltEfect

Revisin
Navegacin a las pginas se realiza sobre la base de valores URI (Uniform Resource Indicator)
El botn con normalidad vuelve a navegar hacia la pgina anterior, pero esto se puede anular
El URI puede contener una cadena de consulta para pasar datos de cadena contextuales
Apoyo para la localizacin se incorpora a las plantillas de proyecto
Apoyo a diferentes resoluciones de pantalla se simplifca, ya que se redujeron a una resolucin efectiva casi idntica.
Suministro de imgenes de escala de WXGA y se reducirn automticamente para resoluciones de pantalla inferiores.
El Windows Phone Toolkit esta fuera de banda del mtodo de Microsoft para lanzar herramientas y libreras adicionales
fuera de los ciclos de lanzamiento de Visual Studio
http://silverlight.codeplex.com
El toolkit incluye transiciones de pgina y TiltEfect con la que se pueden agregar animaciones comunes a las aplicaciones




La informacin aqu contenida es para fnes informativos solamente representa la visin actual de Microsoft Corporation, a la fecha de esta presentacin.
Debido a que Microsoft deber responder a las condiciones cambiantes del mercado, no se debe interpretar como un compromiso por parte de Microsoft
y Microsoft no garantiza la exactitud de la informacin proporcionada despus de la fecha de esta presentacin.
MICROSOFT NO OFRECE NINGUNA GARANTA, EXPRESA, IMPLCITA O LEGAL, EN CUANTO A LA INFORMACIN EN ESTA PRESENTACIN.
2012 Microsoft Corporation.
Todos los derechos reservados. Microsoft, Windows, Windows Vista y otros nombres de productos son o pueden ser marcas registradas y/o marcas registradas en los EE.UU. y / o en otros pases.