WAT
Web Application Template
Luis Guerrero
Techanical Evangelist Windows Azure
[email protected]
@guerrerotook
¿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.
¿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.
¿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
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.
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.
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.
Listado de módulos
• homeURL
• navigation
• errors
• logging
• share
• offline
• appBar
• navBar
• livetile
• notifications
• redirects
• settings
• styles
• header
• search
• secondaryPin
• styleTheme
homeURL
• Especifica cual es la url inicial de la app, es donde se navegará por
defecto.
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.
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
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
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
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
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
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
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
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
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 splash screen.
• hiddenElements: un array de elementos HTML que serán
ocultados
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.
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
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.
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
styleTheme
• Determina si se usará el tema claro o oscuro
Descargar

WAT