Redirecciones en WAT

Estándar

En este post definiremos en ‘Web App Template’ que urls permanecen dentro de la aplicación y las que se deberán inician en el navegador.

Screenshot (1164)

 

Continuaremos trabajando sobre el archivo config.json, en el cual encontraremos la siguiente porción de código:

"redirects": {
"enabled": true,
"enableCaptureWindowOpen": true,
"refreshOnModalClose": true,
"rules": [
	    {
		    "pattern": "http://getbootstrap.com?",
		    "action": "showMessage",
		    "message": "Sorry, but you can't access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net"
	    },
	    {
		    "pattern": "*.microsoft.com*",
		    "action": "showMessage",
		    "message": "Redirecting you to the Microsoft website..."
	    },
	    {
		    "pattern": "http://msdn.microsoft.com/*",
		    "action": "popout"
	    },
	    {
		    "pattern": "{baseURL}/Json#search",
		    "action": "redirect",
		    "url": "http://bing.com"
	    },
	    {
		    "pattern": "*/drive_api/calculator/login",
		    "action": "modal",
		    "hideCloseButton": true,
		    "closeOnMatch": "*/drive_api/calculator/complete_login"
	    }
    ]
},

La estructura de las redirecciones en WAT

Con lo definido anteriormente, podemos distinguir que el conjunto de redirecciones se compone de:

enabled
Habilita la funcionalidad de redirección. Por defecto viene habilitada.

enableCaptureWindowOpen
Permite capturar las nuevas ventanas emergentes, por ejemplo para iniciar sesión.

refreshOnModalClose
Es muy útil para cargar nuevamente el sitio luego de iniciar sesión

rules
Representa un conjunto de objetos, cada uno implica una redirección.

La estructura de las reglas para una redirección

Para cada una de las redirecciones debemos especificar lo siguiente:

pattern: es el patrón que la regla debe considerar.

action: Acción asociada con la redirección. Puede tener cuatro opciones: showMessage, popout, redirect ó modal

En caso de elegir la opción ShowMessage con ‘message’ se especifica el mensaje que se mostrará.

 {
		    "pattern": "http://getbootstrap.com?",
		    "action": "showMessage",
		    "message": "Sorry, but you can't access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net"
 },

screenshot_06112014_074642

En el caso de elegir redirect con ‘url’ es especifica la dirección a la que se irá.

	    {
		    "pattern": "{baseURL}/Json#search",
		    "action": "redirect",
		    "url": "http://bing.com"
	    },

screenshot_06112014_074720
En el caso de elegir popout se especifica la dirección que se abrirá en otra ventana.

	    {
		    "pattern": "*.microsoft.com*",
		    "action": "showMessage",
		    "message": "Redirecting you to the Microsoft website..."
	    },

	    {
		    "pattern": "http://msdn.microsoft.com/*",
		    "action": "popout"
	    },

screenshot_06112014_074657

Y por último con modal podremos utilizarlo en escenarios en donde se requiera de un inicio de sesión. Con esto podremos ocultar el botón de cerrar de una ventana emergente con ‘hideCloseButton’ y especificar la dirección a la que dirigirá en el caso de haber iniciado sesión con ‘closeOnMatch’

	    {
		    "pattern": "*/drive_api/calculator/login",
		    "action": "modal",
		    "hideCloseButton": true,
		    "closeOnMatch": "*/drive_api/calculator/complete_login"
	    }

screenshot_06112014_075118

Recomendaciones para probar las redirecciones

El código mostrado es el que viene por defecto, para poder probarlo por completo una buena opción es agregar el siguiente código en la sección de botones del navbar del config.json:


            {
                "label": "Prueba1",
                "icon": "edit",
                "action": "http://getbootstrap.com"
            },
            {
                "label": "Prueba2",
                "icon": "edit",
                "action": "http://microsoft.com/en-us/"
            },
            {
                "label": "Prueba3",
                "icon": "edit",
                "action": "http://msdn.microsoft.com/en-us/dn629512"
            },
            {
                "label": "Prueba5",
                "icon": "edit",
                "action": "https://www.desmos.com/drive_api/calculator/login"
            },

screenshot_06112014_090940

Otra recomendación es especificar las posibles redirecciones en la sección de Content Urls perteneciente al Package.AppManifest como se ve a continuación:

Screenshot (1165)Eso es todo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s