6712.S3 Building WP8 Applications

5/23/2018 6712.S3 Building WP8 Applications

1/68

M3: Creando Aplicacionespara Windows Phone


2/68

1a - Introduccin a Windows Phone 8 Desarrollo de aplicaciones | Parte 11b - 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 - Notificaciones de Tiles y bloqueo de pantalla

8 - Notificaciones Push

9 - Uso de Recursos para telfonos con Windows Phone 8

10 - Comunicacin de Aplicacin a Aplicacin

Objetivos


3/68

11 - Comunicacin de red en Windows Phone 812 - 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


4/68

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 mduloCon el mdulo anterior, pasamos por los conocimientos esenciales que necesita para construir una aplicacin


5/68

Navegacin de Pginas


6/68

Pgina y Frame

Frame

Control contenedor de nivel superior PhoneApplicationFrame class

Contiene el control de la pgina y los elementosdel sistema, como la bandeja del sistema y labarra de aplicaciones

Pgina Rellena toda la regin el contenido del frame

PhoneApplicationPage-derived class

Contiene un ttulo

Opcionalmente, las superficies de su propiabarra de la aplicacin


7/68

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 identificada por un URI

Cada pgina es esencialmente sin estado

privatevoidHyperlinkButton_Click_1(objectsender, RoutedEventArgse)

{NavigationService.Navigate(newUri("/SecondPage.xaml", UriKind.Relative));

}


8/68

Navigating Back

La aplicacin puede proporcionar controles

para navegar de nuevo a la pgina anterior

El hardware Back key tambin navega devuelta a la pgina anterior

No se requiere cdigo - incorporadoen el comportamiento

privatevoidButton_Click_1(objectsender, RoutedEventArgse)

{NavigationService.GoBack();

}


9/68

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


10/68

Overriding la Back Key

In code:privatevoidPhoneApplicationPage_BackKeyPress(objectsender,

System.ComponentModel.CancelEventArgse)

{e.Cancel = true; // Tell system we've handled it

// Hide the popup......

}


11/68

Pasar datos entre pginas

Puede pasar datos de cadena entre las pginas utilizando cadenas de consulta

En la pgina de destino

privatevoidpassParam_Click(objectsender, RoutedEventArgse){

NavigationService.Navigate(newUri("/SecondPage.xaml?msg="+ textBox1.Text, UriKind.Relat}

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgse)

{ base.OnNavigatedTo(e);

stringquerystringvalue = "";

if(NavigationContext.QueryString.TryGetValue("msg", outquerystringvalue))

textBlock1.Text = querystringvalue;

}


12/68

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 yse 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 pageNavigationService.Navigate(newUri("/DetailsPage.xaml?selectedItem="+

(MainLongListSelector.SelectedItem asItemViewModel).ID,UriKind.Relative));


13/68

Manejo de navegacin no lineal

Disee su estrategia de aplicacin de navegacin con cuidado!

Si se desplaza de "tercera pgina" a la "pgina principal" yel 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 laTercera pgina

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

Windows Phone APIs:

NavigationService.RemoveBackEntry ()


14/68

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 'SecondPage' y la instancia original de 'MainPage' de la pila del historial de naveg

NavigationService.Navigate(newUri("/MainPage.xaml?homeFromThird=true", UriKind

protectedoverridevoidOnNavigatedTo(NavigationEventArgse)

{ if(e.NavigationMode == System.Windows.Navigation.NavigationMode.New&& NavigationContext.QueryString.ContainsKey("homeFromThird"))

{NavigationService.RemoveBackEntry(); // Remove ThirdPageNavigationService.RemoveBackEntry(); // Remove SecondPageNavigationService.RemoveBackEntry(); // Remove original MainPage

}base.OnNavigatedTo(e);

}


15/68

Demo 1: Navegacin de Pgina


16/68

ApplicationBar


17/68

Application Chrome System Tray y Barra de aplicacione

System Tray

Barra de aplicaciones

System owned indicator area muestra informacinde estado a nivel de sistemaLas aplicaciones pueden mostrar / ocultarMicrosoft.Phone.Shell.SystemTray.IsVisible = false;

El rea donde las aplicaciones pueden mostrar los botones paralas tareas ms comunesPuede mostrar el men pop-up para las tareas menos comunes


18/68

Utilice la ApplicationBar en lugar de crear su propiosistema 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


19/68

ApplicationBar en Xaml


20/68

ApplicationBar y Landscape

ApplicationBar pinta en el lado de lapantalla en landscape

Se ha incorporado en la animacin cuandola pgina cambia la orientacin


21/68

Opacidad de la ApplicationBar

Si la opacidad de la Application Bar menor que 1,la pgina mostrada ser deel tamao de la Barra deaplicaciones de superposiciones contenida en la pantalla

Si la opacidad es 1, la pgina que se muestra cambia el tamaode la zona de la pantalla que no estn cubiertos por la barrade aplicaciones


22/68

ApplicationBar Diseo en Blend Y ahora en VS tamb


23/68

Demo 2: Diseando en ApplicationBar


24/68

Gestin de cambios deorientacin de la pantalla


25/68

Esta aplicacin no funciona en modohorizontal en el momento

No todas las aplicaciones hacen, necesitan de

Puede configurar las aplicaciones para apoyar vertical

u horizontal

Diseo de interfaz de usuario en el telfono - Orientac


26/68

New Device Tab en Visual Studio 2012

View Designer en vertical u horizontal


27/68

Seleccin de orientaciones

Una propiedad XAML para la pgina de la aplicacin de telfono te permite seleclas opciones de orientacin disponibles

Tu aplicacin puede unirse a un evento que se dispara cuando los cambios de orientacin

SupportedOrientations="Portrait"

SupportedOrientations="PortraitOrLandscape"


28/68

Puedes necesitar Alterar el Layout

Layout inalte

Layout optimel landscape


29/68

Usando una cuadrcula para facilitar el Landscape Layo

En la red, la segunda columna es utilizada en Retrato

...

Column 0


30/68

Moviendo elementos en Landscape Layout

En Landscape, la descripcin de la receta se mueve en la segunda fila y la segunda columnafila de la parrilla es ahora no utilizado. Desde la altura de esa fila es "*", que se reduce a cero

...

Column 0 Column 1


31/68

Moviendo Elementos

privatevoidPhoneApplicationPage_OrientationChanged(objectsender, OrientationCha

{

if(this.Orientation == PageOrientation.LandscapeLeft || this.Orientation ==

PageOrientation.L

{

DirectionsScrollViewer.SetValue(Grid.RowProperty, 1);

DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1);

}

else

{

DirectionsScrollViewer.SetValue(Grid.RowProperty, 2);

DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0);

}

}


32/68

Demo 4:Manipulacin de laOrientacin


33/68

Soporte de mltiplesresoluciones de pantalla


34/68

Tres resoluciones de pantalla

WVGA800 x 48015:9

WXGA1280 x 76815:9

720p1280 x 72016:9


35/68

As que tengo que hacer tres diferentes interfaces de

Bueno, no ...

Como desarrolladores, trabajamos con los pxeles independientes del dispositiv OS aplica un factor de escala para la resolucin real

Resolucin Relacin de aspecto Factor de Escala Re

WVGA 800 x 480 15:9 1.0x scale

WXGA 1280 x 768 15:9 1.6x scale

720p 1280 x 720 16:91.5x scale, 80 pixels

taller (53 pixels, beforescaling)


36/68

Resoluciones de la Escala

WVGA WXGA 720p

800

800

853

480480

480


37/68

Ajuste la rejilla Alto de fila en "Auto" a medidasegn los controles colocados en su interior

Ajuste la rejilla Alto de fila en "*" para ocupartodo el resto del espacio

Si ajusta el tamao de varias filas utilizando "*",el espacio disponible se divide en partes igualesentre ellos

Utilice "Auto" y "*" en la filas de la cuadrcula para asegun buen diseo


38/68

Diseo adaptable Usando la rejilla

WVGA 720p

Altura de imagen deexplcitamente 2

Fila inferior es "Audimensionado para

un TextBloc

Llegar fila "*", por lo todo lo que queda -

por alto en 72


39/68

Imagenes

En la mayora de los casos, tu debes suministrar imgenes dirigidas a la pantalla W

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 p

Por ejemplo: MyImage.wvga.png, MyImage.wxga.png y MyImage.720p.png

En tiempo de ejecucin, obten Application.Current.Host.Content.ScaleFactorpara determinar la resolucin de la pantalla en el telfono actual, devuelve 100para WVGA, 160 de WXGA y 150 para 720p

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

P ll d i


40/68

Pantallas de presentacin

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

El framework ajusta automticamente al tamao correcto en diferentes pantal

Si deseas proporcionar pxeles perfectos en pantallas de inicio para todas las resoaade 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 SplashSc

A li i d I Til


41/68

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


42/68

Demo 4: Resolucionesde Pantalla


43/68

Introduccina la localizacin

Soporte de idiomas en Windows Phone 8


44/68

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 reginde la pgina de Configuracin

Windows Phone 7.1 admite slo 24

Windows Phone 8 te permite crear aplicaciones que se leende derecha a izquierda

Nuevas plantillas de proyectos cuentan con el apoyo


45/68

Nuevas plantillas de proyectos cuentan con el apoyode 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 aplicacincon la calve LocalizedStrings

Cada nuevo proyecto tambin incluye un archivo de recursos:

Resources \AppResources.resx

Algunas cadenas ya definidos aqu Cree todos sus literales de cadena en aqu para apoyar la localizacin

Todos los nuevos proyectos tambin incluyen un cdigocomentado en MainPage.xaml.cs para configurar una aplicacinen la barra de localizacin

Acceso a recursos de cadena de XAML


46/68

Acceso a recursos de cadena de XAML

Enlazar datos de la propiedad Text delTextBlock y otros controles a la

StaticResource con una clave deLocalizedStrings

Esa es una instancia de la claseLocalizedStrings

Permite el acceso a recursos de cadena

Aadir soporte para idiomas adicionales


47/68

Aadir soporte para idiomas adicionales

Propiedades del proyecto Hagadoble clic para abrir el editor

de propiedades

En la pestaa Aplicacin

Compruebe cada uno delos idiomas de la aplicacinque va a apoyar

Guardar las propiedades del proyecto Visual Studio crea nuevos

archivos AppResourcespara cada lengua/culturaseleccionado

TraducirlosarchivosderecursosadicionalesIdiomas


48/68

Traducir los archivos de recursos adicionales Idiomas

Visual Studio agrega un archivo de recursos para cada idioma adicional que la apva a apoyar. Cada archivo de recursos se denomina con el nombre de cultura/idi

segn lo descrito en Culture and language support for Windows Phoneen la do

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

Define el idioma predeterminado


49/68

Haga doble clic en WMAppManifest.xml

para abrir el editor de manifiestos

En la ficha Packaging

Configurar el idioma predeterminado parael idioma de sus recursos predeterminados

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

Define el idioma predeterminado


50/68

Demo 5 : Localizacin


51/68

El Windows Phone Toolkit



52/68


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 elconjunto oficial de control del producto

Incluye el cdigo completo de cdigo abierto, muestras, documentacin y apoyoen 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


53/68

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


54/68

NuGet

Sistema de gestin de paquetes para. NET

Simplifica 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 comoel Windows Phone Toolkit para proyectos


55/68

Controles en elWindows Phone Toolkit

ContextMenu


56/68DatePicker y TimePicker


57/68

y

ToggleSwitch


58/68

gg

WrapPanel


59/68

p

ListPicker


60/68

WP7 ComboBox

Lista desplegable para unpequeo nmero de elementos

Selector de pantalla completapara las listas ms largas

... Y muchos ms


61/68

Custom MessageBox

Rating control

AutoCompleteBox

ExpanderView

HubTile

ms

Descarga la fuente de http://phone.codeplex.com, crea la aplicacin de ejemploe implementala en el emulador o dispositivo


62/68

Transiciones de pgina yTiltEffect

Transiciones de pgina


63/68

Una forma sencilla de aadir transiciones de pgina a similar a las de las aplicaciones incorporadas

Diferentes transiciones se incluyen

Roll, Swivel, Rotate, Slide and Turnstile

Comience con el control TransitionFrame del Windows Phen lugar del predeterminado PhoneApplicationFrame

Situado en el mtodo

InitializePhoneApplication() method in App.Xaml.cs

Habilitar transiciones en una pgina


64/68

Declarar espacio de nombres para Windows Phone Toolkit assembly

Under root element, aade la transicin que deseas

TiltEffect


65/68

Aadir informacin visual adicional para el control de la interaccin

En lugar de los estados simples, tales como prensado o sin prensar, controla con

TiltEffect permitido proporciona el movimiento durante la manipulacin

Por ejemplo, Button tiene un sutil efecto 3D y parece que se mueve en lapgina cuando se presiona y rebota de nuevo cuando se libera

Fcil de activar TiltEffect para todos los controles en una pgina

Tambin se puede aplicar a los controles individuales


66/68

Demostracin 6: Transiciones de pgina y TiltEffect

Revisin


67/68

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 simplifica, ya que se redujeron a una resolucin efectiva cas

Suministro de imgenes de escala de WXGA y se reducirn automticamente para resoluciones de pantalla

El Windows Phone Toolkit esta fuera de banda del mtodo de Microsoft para lanzar herramientas y libreras fuera de los ciclos de lanzamiento de Visual Studio

http://silverlight.codeplex.com

El toolkit incluye transiciones de pgina y TiltEffect con la que se pueden agregar animaciones comunes a la


68/68

La informacin aqu contenida es para fines informativos solamente representa la visin actual de Microsoft Corporation, a la fecha de esta preDebido a que Microsoft deber responder a las condiciones cambiantes del mercado, no se debe interpretar como un compromiso por parte dy 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 PRESENTA

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.

6712.S3 Building WP8 Applications

Documents

Transcript of 6712.S3 Building WP8 Applications