Post on 14-Oct-2015
transcript
5/23/2018 6712.S3 Building WP8 Applications
1/68
M3: Creando Aplicacionespara Windows Phone
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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/23/2018 6712.S3 Building WP8 Applications
5/68
Navegacin de Pginas
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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));
}
5/23/2018 6712.S3 Building WP8 Applications
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();
}
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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......
}
5/23/2018 6712.S3 Building WP8 Applications
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;
}
5/23/2018 6712.S3 Building WP8 Applications
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));
5/23/2018 6712.S3 Building WP8 Applications
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 ()
5/23/2018 6712.S3 Building WP8 Applications
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);
}
5/23/2018 6712.S3 Building WP8 Applications
15/68
Demo 1: Navegacin de Pgina
5/23/2018 6712.S3 Building WP8 Applications
16/68
ApplicationBar
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
19/68
ApplicationBar en Xaml
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
22/68
ApplicationBar Diseo en Blend Y ahora en VS tamb
5/23/2018 6712.S3 Building WP8 Applications
23/68
Demo 2: Diseando en ApplicationBar
5/23/2018 6712.S3 Building WP8 Applications
24/68
Gestin de cambios deorientacin de la pantalla
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
26/68
New Device Tab en Visual Studio 2012
View Designer en vertical u horizontal
5/23/2018 6712.S3 Building WP8 Applications
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"
5/23/2018 6712.S3 Building WP8 Applications
28/68
Puedes necesitar Alterar el Layout
Layout inalte
Layout optimel landscape
5/23/2018 6712.S3 Building WP8 Applications
29/68
Usando una cuadrcula para facilitar el Landscape Layo
En la red, la segunda columna es utilizada en Retrato
...
Column 0
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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);
}
}
5/23/2018 6712.S3 Building WP8 Applications
32/68
Demo 4:Manipulacin de laOrientacin
5/23/2018 6712.S3 Building WP8 Applications
33/68
Soporte de mltiplesresoluciones de pantalla
5/23/2018 6712.S3 Building WP8 Applications
34/68
Tres resoluciones de pantalla
WVGA800 x 48015:9
WXGA1280 x 76815:9
720p1280 x 72016:9
5/23/2018 6712.S3 Building WP8 Applications
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)
5/23/2018 6712.S3 Building WP8 Applications
36/68
Resoluciones de la Escala
WVGA WXGA 720p
800
800
853
480480
480
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
42/68
Demo 4: Resolucionesde Pantalla
5/23/2018 6712.S3 Building WP8 Applications
43/68
Introduccina la localizacin
Soporte de idiomas en Windows Phone 8
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
50/68
Demo 5 : Localizacin
5/23/2018 6712.S3 Building WP8 Applications
51/68
El Windows Phone Toolkit
Windows Phone Toolkit
5/23/2018 6712.S3 Building WP8 Applications
52/68
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 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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
55/68
Controles en elWindows Phone Toolkit
ContextMenu
5/23/2018 6712.S3 Building WP8 Applications
56/68DatePicker y TimePicker
5/23/2018 6712.S3 Building WP8 Applications
57/68
y
ToggleSwitch
5/23/2018 6712.S3 Building WP8 Applications
58/68
gg
WrapPanel
5/23/2018 6712.S3 Building WP8 Applications
59/68
p
ListPicker
5/23/2018 6712.S3 Building WP8 Applications
60/68
WP7 ComboBox
Lista desplegable para unpequeo nmero de elementos
Selector de pantalla completapara las listas ms largas
... Y muchos ms
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
62/68
Transiciones de pgina yTiltEffect
Transiciones de pgina
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
64/68
Declarar espacio de nombres para Windows Phone Toolkit assembly
Under root element, aade la transicin que deseas
TiltEffect
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
66/68
Demostracin 6: Transiciones de pgina y TiltEffect
Revisin
5/23/2018 6712.S3 Building WP8 Applications
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
5/23/2018 6712.S3 Building WP8 Applications
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.