miércoles, octubre 17, 2012

[Windows8] Crear la pagina de Settings

Hola a tod@s!

Hoy vamos a ver como podemos crea la pagina de settings de nuestra App para windows 8 en donde mostramos la Política de Privacidad de nuestra app.

Este es uno de los motivos mas frecuentes por los cuales devuelven App al subirlas al Store de Windows 8.

Nos envían un mensaje como:

Cumplimiento del contenido: error

Con esta prueba se evalúa tu software para ver si su contenido cumple los requisitos de certificación de la Tienda Windows.

Tu aplicación no cumple el requisito 4.1.

Notas de los evaluadores:

C:: Our reviewer could not find a privacy statement in the Windows Charm settings of this app.

 

1. creamos nuestro proyecto para el App de Windows 8:

image

Adicionamos un nuevo item, que va a ser una nueva página en blanco:

image

Llamaremos a nuestra página SettingsFlyuot.xaml, seleccionaremos una página en Blanco de la lista que nos presenta Visual Studio al momento de seleccionar App para Windows Store.

image

Adicionamos la página a nuestro proyecto, y nos genera el código XAML siguiente:

 

<Page
    x:Class="Celeste.CharmsPrivacyPolicy.SettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Celeste.CharmsPrivacyPolicy"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
</Page>



Vamos a adicionar el siguiente codigo XAML dentro de los tags <Grid> y </Grid>:


 


<StackPanel>
    <TextBlock Margin="5,30,0,30" 
               Style="{StaticResource SubheaderTextStyle}" >
        App desarrollada por:</TextBlock>
    <TextBlock Margin="5,0,0,0" FontSize="24" 
               Style="{StaticResource SubheaderTextStyle}" >
      Roberto Alvarado Taborda
    </TextBlock>
    <TextBlock Margin="5,0,0,0"  FontSize="24" 
               Style="{StaticResource SubheaderTextStyle}" >
        Celeste Software SAS
    </TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="24" 
                Style="{StaticResource SubheaderTextStyle}" >
        Bogotá D.C., Colombia</TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="24" 
                Style="{StaticResource SubheaderTextStyle}" >
      ralvaradot@hotmail.com
    </TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="24" 
                Style="{StaticResource SubheaderTextStyle}" >
        http://bdotnet.wix.com/privacypolicy</TextBlock>
 
    <TextBlock Margin="5,30,0,30" 
               Style="{StaticResource SubheaderTextStyle}" >
        Política de privacidad</TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="18" 
                Style="{StaticResource SubheaderTextStyle}" >
        La aplicación hace uso de la conexión a internet, única y exclusivamente, 
        para descargar información relativa de la misma desde nuestros servidores.</TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="18" 
                Style="{StaticResource SubheaderTextStyle}" >
        Ninguna información de la máquina o del usuario es enviada de vuelta a ellos 
        ni a ningún otro servidor a través de internet ni de ningún otro medio por 
        parte de esta aplicación.</TextBlock>
    <TextBlock  Margin="5,0,0,0" FontSize="18" 
                Style="{StaticResource SubheaderTextStyle}" >
        Es responsabilidad del usuario el manejo que este haga de los datos que son 
        registrados a través de la aplicación.</TextBlock>
</StackPanel>



De estos datos son importantes: el link de la página en internet donde están publicadas las políticas de privacidad de la aplicación, el email de contacto.


La línea del nombre de la empresa la pueden obviar o eliminar.


El diseño de la pagina se verá mas o menos así:


image


Vamos a abrir la pagina principal o inicial de nuestra App, en nuestro caso es MainPage.xaml:


Vamos a abrir el “Code Behind” y colocar este código en la clase:


    public sealed partial class MainPage : Page
    {
        private Rect windowBounds;
 
        private double settingsWidth = 400;
 
        private Popup settingsPopup;
 
        public MainPage()
        {
            this.InitializeComponent();
        }



Estas variables nos servirán para adecuar el manejo de Charms de settings que es lo que deseamos.


Vamos ahora a abrir el archivo App.xaml.cs para incluir una variable de Aplicación:


namespace Celeste.CharmsPrivacyPolicy
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        public static bool isEventRegistered;
 
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }



Regresamos a nuestra página principal, Mainpage.xaml.cs y allí adicionamos código al constructor de tal forma que se vea como se muestra a continuación:


 public MainPage()
 {
     this.InitializeComponent();
 
     windowBounds = Window.Current.Bounds;
     Window.Current.SizeChanged += OnWindowSizeChanged;
     if (!App.isEventRegistered)
     {
         SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;
         App.isEventRegistered = true;
     }
 }



Lo que estamos haciendo aquí es configurar el tamaño de la ventana, adicionar el método a ejecutar al evento SizeChanged y verificar si el evento está o no registrado en el App para hacerlo solo 1 vez.


Si el evento no esta registrado lo registramos en el App, en la línea:


SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;



Ahora vamos a adicionar el código del método onCommandsRequested que adiciona un handler para verificar al ventana del Setting a mostrar.


        private void onCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs eventArgs)
        {
            UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);
 
            SettingsCommand generalCommand = new SettingsCommand("DefaultsId", "Acerca de", handler);
            eventArgs.Request.ApplicationCommands.Add(generalCommand);
        }



 


Ahora el método onSettingsCommand en el cual definimos y configuramos la ventana de Settings:


        private void onSettingsCommand(IUICommand command)
        {
 
            // Create a Popup window which will contain our flyout.
            settingsPopup = new Popup();
            settingsPopup.Closed += OnPopupClosed;
            Window.Current.Activated += OnWindowActivated;
            settingsPopup.IsLightDismissEnabled = true;
            settingsPopup.Width = settingsWidth;
            settingsPopup.Height = windowBounds.Height;
 
            // Add the proper animation for the panel.
            settingsPopup.ChildTransitions = new TransitionCollection();
            settingsPopup.ChildTransitions.Add(new PaneThemeTransition()
            {
                Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ?
                       EdgeTransitionLocation.Right :
                       EdgeTransitionLocation.Left
            });
 
            // Create a SettingsFlyout the same dimenssions as the Popup.
            SettingsFlyout mypane = new SettingsFlyout();
            mypane.Width = settingsWidth;
            mypane.Height = windowBounds.Height;
 
            // Place the SettingsFlyout inside our Popup window.
            settingsPopup.Child = mypane;
 
            // Let's define the location of our Popup.
            settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0);
            settingsPopup.SetValue(Canvas.TopProperty, 0);
            settingsPopup.IsOpen = true;
        }










Y por último los métodos onWindowSizeChanged se dispara al cambiar de tamaño la ventana, onWindowActivated, que se dispara al activar la ventana actual, y por último onPopupClosed, que se dispara al cerrar el popup que carga nuestra ventana de Settings.


        void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            windowBounds = Window.Current.Bounds;
        }
        private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
        {
            if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
            {
                settingsPopup.IsOpen = false;
            }
        }
        void OnPopupClosed(object sender, object e)
        {
            Window.Current.Activated -= OnWindowActivated;
        }



 


Al ejecutar nuestra App agregando este corto código y esta página sencilla, podemos observar lo siguiente:


image


Podemos apreciar que aparece Acerca de, que es nuestra página de Settings.


Y al dar clic sobre “Acerca de” en el menú de settings:


image


Muestra nuestra pagina de settings con la política de privacidad.


Bueno amigos por hoy esto les quería contar para ayudarlos en que no rechacen sus Apps al subirlos al Windows Store.


Pueden utilizar la página de Políticas de Privacidad que ha publicado la Comunidad BDotNetLatam en la siguiente url para apuntar sus apps, es indispendable que coloquen tanto en el cuadro de texto de Política de Privacidad que se encuentra en el formulario de subir App al Store, como en esta pagina de settings que debe contener toda App a desarrollar para Windows 8.


Link a página pública de Política de Privacidad de Comunidad BDotNet


Espero que lo disfruten y logren certificar sus Apps en el Store de Windows 8.


 


Hasta una proxima oportunid@d, Dios los bendiga mucho!