No es tan difícil como parece hacer una App para Windows 8. 3 lenguajes se pueden usar para esto. Aquí mostramos solamente HTML, CSS y Java Script. Porque son bastante amigables y pueden resultar útiles para promocionar la App de tu negocio. No obstante Microsoft trabaja con más lenguajes para sus aplicaciones.
Este tuto es un disparador. Para mostrar en realidad que cosas que parecen sumamente complejas son mas simples de lo que uno piensa. Y que recorrer el camino puede ser muy agradable y didáctico. Como siempre, es uno el que después con sus propios medios debe continuar la búsqueda. Por suerte Microsoft da material de sobra y muy bien documentado.
La intención es ayudar como con Chrome a que se le pierda el miedo al asunto.
Microsoft provee herramientas gratuitas para realizar esto: Visual Studio Express 2012 es la más importante. El resto se puede ver aquí. Posteriormente si uno quisiera dar de alta su aplicación en la tienda de Windows debería conseguir una licencia de desarrollador. Son gratuitas.
Así que lo que hacemos es abrirlo y desde el menú Archivo seleccionamos Nuevo Proyecto. El panel izquierdo muestra la sección Templates. Se debe desplegar esta y también la que dice Java Script. Aquí seleccionamos Windows Store y luego ponemos que queremos hacer una aplicación en blanco o Blank App.
Es como se menciona arriba una plantilla. Pero esta trae los archivos necesarios que debe tener nuestra primera aplicación. Igual que con la aplicación Chrome hay un archivo de manifiesto. En este va el nombre de la aplicación su descripción su versión etc. Hay también una carpeta de imágenes y una de CSS para la parte visual así como también un archivo llamado default html que tiene el esqueleto realizado en HTML.
Las imágenes requeridas son:
logo.png
smalllogo.png
splashScreen.png
storelogo.png
Qué en orden esto significa que son: una para el logo (su nombre es claro) otra para un thumb de la app otra para la pantalla de inicio y la última para la tienda de Microsoft.
También hay archivo default.js que acompaña al html que lleva el mismo nombre. Si nosotros corriéramos (ejecutáramos la aplicación) con F5 veríamos una pantalla muy elemental con un mensaje del tipo: “Content Goes Here”.
Entonces lo que se hace es reemplazar ese código html por este de aquí que es nada más y nada menos que un simple campo para ingresar texto. Nada del otro mundo:
<body>
<h1>Hello, world!</h1>
<p>What's your name?</p>
<input id="nameInput" type="text" />
<button id="helloButton">Say "Hello"</button>
<div id="greetingOutput"></div>
</body>
Tenemos por ultimo lo que contendrá el archivo llamado default.js. Este archivo lo que contiene es el código que controla el ciclo de vida de la aplicación. También aquí se escribe el código adicional que hace que interactuemos con el archivo llamado default.html.
Si lo abrimos veremos algo como esto:
(function () {
«use strict»;
// Omitted code
})();
Que es básicamente una función que envuelve a todo el resto del código. Es algo que se hace habitualmente en programación para evitar conflicto con determinadas cosas.
El paso siguiente es dentro de ese mismo archivo crear lo que se llama un controlador de eventos. Este se utiliza (en este caso) para mostrar un saludo. El mismo se colocó en un DIV llamado greetingOutput anteriormente.
Creamos una función con el nombre buttonClickHandler. Dentro de la misma, recuperamos el nombre introducido en el campo llamado nameInput.
function buttonClickHandler(eventInfo) {
var userName = document.getElementById("nameInput").value;
var greetingString = "Hello, " + userName + "!";
document.getElementById("greetingOutput").innerText = greetingString;
}
El último paso es registrar el controlador de eventos utilizando addEventlistener. Siendo el código para hacerlo este:
// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
El resto del código gestiona la activación de la aplicación. Con esto quiero decir lo que la misma hace cuando la misma es lanzada, inicializada, terminada, etc:
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
WinJS.UI.processAll es una de las cosas a las que más atención hay que prestarle. Incluido en una llamada al método setPromise, que se asegura de que la pantalla de presentación no desaparezca hasta que la página de la aplicación no esté lista.
Al ejecutar la aplicación poner nuestro nombre y hacer click en el botón obtendríamos el saludo habitual. El estilo de la aplicación, o sea lo referente a lo estético es gestionado en este caso con los archivos CSS correspondientes. Estos tienen las reglas para cada dispositivo y tamaño de pantalla.
Yo quería demostrar también que en esencia es una página Web. Un poco más rebuscada sí, pero la esencia es la misma. Archivos html, java script y css.
Esto no quiere decir que Windows 8 trabaje solamente con esto, ya que también lo hace con los otros lenguajes de Visual Studio.NET. Aunque es sin duda un excelente comienzo.
El código fuente completo del archivo default.js lo pueden ver aquí, junto con el del resto de los archivos. Yo recomiendo que lean como gestionar el ciclo de vida de una App, que sería la parte 2 del tutorial. Porque ya la ultima es muy interesante y muestra cómo pueden hacer la aplicación de su blog o empresa. En otras palabras su propio lector de blogs. Es algo que se esta usando mucho ahora. Cualquier empresa que lo tenga sabrá diferenciarse. 😉
Vía: Microsoft.
Deja una respuesta