WAT

1. WAT Web Application Template Luis Guerrero TechanicalEvangelist Windows Azure luis.guerrero@microsoft.com @guerrerotook

2. ¿Qué es WAT? Es un framework que permite convertir un sitio web en una app de Windows 8.1 o Windows Phone 8 Cierra la brecha que hay entre la web y los requisitos de publicación de una app. De esta manera se puede conseguir una mezcla entre la experiencia de una app y navegar a través de una web.

3. ¿Qué aporta WAT? Las aplicaciones de HTML en Windows 8.1 exigen que todo el código de la app (HTML/CSS/JavaScript) este instalado en local y pueda funcionar sin conexión a internet. Dado que se quiere convertir una web en una app, este proceso está en contra de las normal de certificación, aquí es donde WAT aporta valor añadido para poder tener un framework para publicar apps.

4. ¿En qué consiste WAT? WAT es un paquete de instalación de Visual Studio que permite generar nuevos proyectos para Windows 8.1 y Windows Phone 8

5. Nuevo projecto de WAT para Windows8.1 Una vez creado el proyecto para Windows 8.1 se dispone de todo lo necesario para empezar a trabajar con WAT. La plantilla es una app basada en HTML que utiliza un fichero configuración para hacer todo el trabajo.

6. Contenido del proyecto • La plantilla de Visual Studio contiene todo lo necesario para que esta app pase la certificación. • Una página de error. • Una página de configuración. • Una página para cuando el sistema no tenga conectividad a Internet. • Una página que se muestra cuando se está cargando contenido (navegando) • Una serie de ficheros de JavaScript que inicializan los diferentes módulos del fichero de configuración. • La carpeta css contiene los propios css de la app, además de un css que se le puede inyectar a la propia web.

7. Configuración WAT utiliza un extenso fichero de configuración para definir todas las funcionalidades que la aplicación que se publique tenga para interactuar con la web. El fichero de configuración está en formato json, lo que permite que pueda ser modificado muy fácilmente, además de que se pueda leer también de manera muy fácil. Es un objeto que contiene diferentes propiedades que a su vez contienen otros objetos con la configuración del módulo.

8. Listado de módulos • homeURL • navigation • errors • logging • share • offline • appBar • navBar • livetile • notifications • redirects • settings • styles • header • search • secondaryPin • styleTheme

9. homeURL Especifica cual es la url inicial de la app, es donde se navegará por defecto.

10. navigation Controla como los usuarios navegan por la app hideOnPageBackButton: Habilita o deshabilita la visibilidad del botón de atrás en el canvas principal de la app (true/false) hideBackButtonOnMatch: Oculta el botón de atrás en una lista de páginas especificadas. Se establece a través de un array. pageLoadingPartial: Especifica la página que se utilizará con indicador de progreso de carga de la aplicación.

11. errors Controla como los errores son manejados en la app showAlertOnError: especifica si se muestra una ventana de error. alertMessage: especifica el mensaje de error a mostrar. redirectToErrorPage: define si se navega la pagina de error errorPageURL: página de error

12. logging Controla como la app gestiona el registro de eventos. enabled: habilita o deshabilita el registro de eventos level: especifica el nivel de los mensajes a registrar disbleWithoutDebugger: permite activar el registro de evento en caso de que la aplicación no se esté ejecutando en modo depuración hideTagDisplay: verdadero para ocultar las etiquetas de registro de eventos de WinJS ignoreTags: una colección de etiquetas que tienen que ser ignoradas

13. logging logErrorForIgnoredTag: cuando está establecido a verdadero los mensajes que no estén etiquetados se mostrarán también disableConsoleLog: deshabilita la consola de depuración de JavaScript fileLog: permite guardar la salida de depuración en un fichero en el IsolatedStorage

14. share Controla como la aplicación comparte datos con Windows enable: habilita o deshabilita la funcionalidad de compartir de Windows. title: Título que aparecerá en la ventana de compartir url: define que url será que se comparta screenshot: habilita o deshabilita la capacidad de compartir una captura de pantalla message: define el mensaje que se mostrará en la ventana de contenido

15. offline Controla como la aplicación se comporta cuando el dispositivo está sin conexión a internet. rootUrl: Ruta a un fichero HTML que contiene una página que muestra al usuario que el dispositivo está offline. message: mensaje mostrado cuando no se ha definido la rootURL

16. appBar • Controla la barra de comandos • enabled: habilita o deshabilita la barra de comandos. • makeSticky: habilita o deshabilita si la barra de comandos está siempre visible o no. • buttons: es un array de botones que definen los comandos • label: texto del botón • icon: icono del botón • action: define la acción, que puede ser una url con una función eval • data: texto del javascript que será ejecutado con el eval

17. navBar Controla la barra de navegación en la parte de arriba de la pantalla. enabled: habilita o deshabilita la barra de navegación maxRows: establece el numero máximo de filas usadas para mostrar los botones antes de la barra de navegación pagine makeSticky: habilita o deshabilita si la barra de navegación está siempre visible o no.s

18. redirects Permite controlas que urls se quedan dentro de la app y cuales se abren en un navegador nuevo. enabled: habilita o deshabilita la redirección enableCaptureWindowOpen: captura las nueva ventanas emergentes (como por ejemplos los inicios de sesión de Facebook) y permite control como se muestran rules: un array de objetos que representan información de redirección

19. styles setViewport: controla el valor de –ms-viewport targetWidth: especifica el valor de ancho en píxeles. Puede ser estar vacío. No usar si la web es responsible. targetHeight: especifica el valor de alto en píxeles. suppressTouchAction: habilita o deshabilita el soporte de táctil extendedSplashScreenBackground: un color en hexadecimal que aparecerá en la splashscreen. hiddenElements: un array de elementos HTML que serán ocultados

20. styles backButton: un array de reglas que serán aplicadas al botón de atrás. wraperCssFile: una ruta al fichero de /css/wrapper-style.css que definen estilos de la app customCssFile: unra ruta al fichero de /css/injected-styles.css. Esto permite inyectar elementos de css al webview. customCssString: permite inyectar elementos de css a través de un string previo.

21. header Controla el aspecto que tiene la cabecera de la aplicación enabled: habilita o deshabilita la cabecera backgroundColor: Un color hexadecimal que define el fondo de la cabecera logo: una ruta con el la imagen del logotipo title: permite controlar el texto del titulo usado en la cabecera

22. search Integra la búsqueda de Windows 8 con la de la web enabled: habilita o deshabilita la búsqueda searchURL: define la url de búsqueda useOnScreenSearchBox: habilita o deshabilita el uso de la barra de búsqueda integrada en la app, frente al charm del S.O.

23. secondayPin enabled: habilita o deshabilita el poder anclar un elemento buttonText: texto usado para definir el botón de anclaje squareImage: una ruta a la imagen cuadrada wideImage: una ruta a la imagen ancha

24. styleTheme Determina si se usará el tema claro o oscuro