Tags

Hoy os quiero enseñar un tutorial paso a paso de cómo implementar un contrato de configuracion de una aplicacion Windows Store en JavaScript y HTML5.

Llevo  poco mirando el tema de HTML5, yo soy más de XAML pero he decidido probar,intentar aprender y ver que pasa. Es el lenguaje que voy a usar para  mi aplicación del Megathon de este mes

En este post voy a explicar como añadir una vista de configuración a nuestra aplicación.Hay que recordar que en las aplicaciones de Windows Store ,no existe el concepto de ventana,sólo se puede mostrar una pagina al mismo tiempo;por eso tampoco habrá ventanas emergentes para poder acceder a las configuraciones.

Para eso, está el panel de acceso a Configuracion, esto hace que mantenga un comportamiento común a cualquier aplicacion que podamos descargar.Como se puede ver la captura,dentro de cualquier aplicación (en este caso la de música que viene de serie con Windows8),si desplazamos el cursor al lateral de la pantalla,aparecerá una barra como la que se muestra en la imagen.

                                            imageimage

Si entramos dentro de “Setting” veremos las opciones de ajuste que nos permite dicha aplicación y es aquí donde yo quiero añadir una configuración personalizada,para una aplicación en JavaScript.

Lo primero que haremos será crear un proyecto nuevo(JavaScript/Blank App):

image

Tras esto,en el explorador de soluciones aparecerán una serie de archivos ,básicos para empezar a trabajar:

  • default.html : Este archivo es donde definiremos la vista de la aplicacion en HTML5.
  • default.css : En este archivo se especificará la hojas de estilo ,haciendo referencia a default.html
  • default.js : En este archivo implementaremos la lógica de la vista default.html en JavaScript
  • package.appxmanifest : aquí se define a que componentes va a tener acceso nuestra aplicacion(camara,localizacion,microfono..),la horientacion,Tile,nombre…etc ,en nuetsro caso no vamos a modificar nada de el.

 Implementar el contrato de Configuración mediante HTML y la clase SettingFlyout para la biblioteca de Windows para JavaScript.

Vamos a comenzar añadiendo el nombre de la propiedad al panel de acceso de Configuracion.Para eso abrimos el archivo default.js (dentro de la función asignada a app.onactivate,al final de la sentencia) ,añadimos:

 

app.onsettings = function (e) {
e.detail.applicationcommands = {
"configuration": {
href: "/pages/configuration/configuration.html",
title: "Configuration"
}
}
WinJS.UI.SettingsFlyout.populateSettings(e);
};

Si nos fijamos en el link de navegación he puesto una ruta que aun no existe en nuestra solución,si clicasemos en el enlace nos daría un fallo,pero en este paso sólo quiero que aparezca el nombre de “Configuración” en el panel.

Explicando por encima el código anterior estamos diciendo que al inicio de la aplicacion se añada al panel de configuración una referencia a un archivo indicado por la ruta  “/pages/configuration/configuration.html”, con el título “Configuración”.

Si pulsamos F5,veremos como efectivamente aparecen los cambios realizados.

image

Ahora vamos a enlazarlo a la ruta anteriormente comentada.Para eso añadimos las carpetas indicadas a la raiz de la solucion y dentro de ella añadimos un nuevo elemento “Control Page”,esto añadirá los tres tipos de archivos necesarios (html,css,js).

Si compilamos otra vez y pulsamos en la nueva opcion creada,no pasará nada ,ni se verá nada nuevo .Falta asociar la clase SettingFlyout al nuevo control.

  • Modificamos el primer <div> que se encuentra dentro de la etiqueta <body>
  • <div id="configuration" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">

Si volvemos a compilar y seguimos los mismos pasos anteriores,aparecerá el menu flotante en blanco no hay que preocuparse eso es porque la fuente está en blanco,si modificamos la hoja de estilo y cambiamos el color de fondo:

#configuration {
background-color: darkred;
}

Ahora si compilamos veremos el resultado:

image

Vamos por buen camino🙂, así que demosle un poco de cuerpo a esto y más complejidad.Añadiremos un botón de navegación al panel anterior ,un cuadro de texto para indicar el nombre de usuario y le daremos algo de forma, modificando la hoja de estilo.

  • Para añadir un botón que navegue al panel anterior ,devemos sustituir el contenido de la etiqueta <body> por el siguiente codigo:
    <div id="configuration" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
    <div class="win-label">
    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
    </button>
    <span class="SettingsTitle">Configuration</span>
    </div>

    </div>

         

        Si nos damos cuenta he añadido una clase que deberemos añadir en nuestro archivo .css, de no ponerla el botón y el titulo se solaparían,las clases win-label y win-backbutton son clases ya definidas.

        • Añadimos la clase al archivo configuration.css
        .SettingsTitle {
        margin-left: 36px;
        }

        Compilamos y este es el resultado:

        image

         

        • Añadiremos el cuadro de texto y centraremos un poco el resultado del paso anterior.Al  cierre de la etiqueta <div> con clase “win-label” añadimos el siguiente código
          <article class="SettingsContent">
          <h2>Name User</h2>
          <input id="Name" type="text" />
          </article>

         

        Si compilamos, vemos que el contenido está desajustado.Vamos a añadir una nueva clase a nuestra hoja de estilo para centrar toda la información de éste panel flotante.

        .SettingsPane {
        margin-top:36px;
        margin-left:48px;
        }

         

        Ahora, añadimos dicha clase a la etiqueta <div> del archivo configuration.html que no tenia definido ningun estilo. El resultado de dicho archivo sería el siguiente:

        <body>
        <div id="configuration" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
        <div class="SettingsPane">
        <div class="win-label">
        <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
        </button>
        <span class="SettingsTitle">Configuration</span>
        </div>
        <article class="SettingsContent">
        <h2>Name User</h2>
        <input id="Name" type="text" />
        </article>
        </div>
        </div>
        </body>

         

        Si compilamos otra vez,este sería el resultado:

        image

        Espero que os haya servido de ayuda.En el siguiente post tomaremos los datos de usuario del equipo para mostrarlos como nombre de usuario y la foto asociada al liveID para añadirlas a la misma vista o poder seleccionar otra foto de distinta ubicación

         

        Saludos!!!