Microsoft ha creado una plataforma de desarrollo de aplicaciones unificada para tablets, pc y smartphones. Para crear aplicaciones emplearemos tecnologías de desarrollo HTML5 y Javascript.
Para comenzar a desarrollar aplicaciones con Windows Phone un punto vital es el portal de desarrolladores. Podremos encontrar todo tipo de tecnologías de desarrollo así como documentación y ejemplos de código.
Desde aquí podremos recorrer todas las tecnologías de desarrollo Windows. Podremos ver desde el desarrollo de aplicaciones, juegos, IoT(internet de las cosas), desarrollo web. Podremos descargar los kits de desarrollo en el apartado de descargas.
Desde https://dev.windows.com/en-US/design
Seremos capaces de aprender y profundizar sobre el desarrollo de interfaces de usuario. Cómo diseñar apps UWP o Universal Windows Platform, para que se visualicen en dispositivos basados en Windows 10, desde teléfonos o tablets, hasta PCs.
Una de las últimas novedades creadas por Microsoft es Visual Studio Code.
Es un entorno de desarrollo online permite crear Apps con una interfaz sencilla.
Para publicar las aplicaciones de Microsoft tendremos que realizarlo desde el portal de desarrolladores de Windows Phone. Podremos gestionar las aplicaciones, publicadas. Es preciso lógicamente estar dado de alta.
Veamos cómo realizar un “Hola Mundo” para Windows pone 8.1 sobre Visual Studio.
La instalación de paquetes NuGet es un soporte automático de librerías. Similar al apt de Linux para descargar librerías en tiempo real. Cada vez que creemos un proyecto, las librerias se pueden actualizar para disponer de las ultimas versiones.
El primer archivo de la aplicación es el default.js. Corresponde con el arranque de ciclo de vida de la App. Podemos visualizar una estructura inicial de trabajo. La capa visual se muestra en default.html.
La estructura de default.html es un archivo incluye librerías javascript y hojas de estilo CSS.
Los proyectos Windows Phone cuentan con un archivo de manifiesto. El package.appxmanifest.
El archivo se abrirá haciendo doble clic. El asistente de configuración nos ayudará a establecer la configuración básica. El nombre, la descripción, el tipo de giro, idioma, etc. Posee muchas pestañas y muchas opciones.
Aplicación, Archivos visuales (iconos y pantalla splash), Requisitos (los permisos), Capacidades (permisos de acceso a diversas funcionalidades del Sistema operativo), Declaraciones, URI de contenido, Empaquetado.
TIP: Desde el apartado Proyecto -> Tienda -> Reservar nombre de la aplicación. Podremos establecer la configuración de nuestra tienda de desarrollador, verificamos la existencia del nombre de nuestra APP mientras estamos desarrollado, para ganar tiempo en caso de que alguien use dicho nombre.
Para poder probar nuestra App disponemos de emuladores que nos permiten realizar pruebas de ejecución en diversos escenarios sin disponer de los dispositivos reales.
Pero ojo, para ello necesitaremos una versión de 64 bits, nos aparecerá el siguiente mensaje.
En caso contrario, nos mostrará diversos emuladores y podremos ejecutar y lanzar el emulador. El emulador suele tardar al abrirse. Una vez abierto, se ejecuta la aplicación automáticamente. En este caso nos mostrará el texto que hemos creado en la vista HTML.
El emulador posee muchísimas herramientas para facilitar el desarrollo. Emular giros, ubicaciones físicas, arrastres, toques multiplantalla, simular notificaciones remotas, sensores, dispositivos de red, etc. Es realmente potente. Mediante la tarjeta SD podremos usar nuestra aplicación con uso de almacenamiento externo. Con el simulador podremos manejar el sistema como si fuera un dispositivo real.
Ciclo de Vida de la Aplicación.
Para poder captura el ciclo de vida, tendremos que trabajar en el archivo default.js.
En este fichero veremos la lógica del ciclo de vida.
El método onactivated, se encuentran los métodos de argumento. Según el tipo de task sabremos el tipo de evento de dónde venimos.
Para ver el estado podemos usar la consola.
El botón de eventos de ciclo de vida permitirá suspender la app o reanudarla.
// Para obtener una introducción a la plantilla En blanco, consulte la siguiente documentación:
// http://go.microsoft.com/fwlink/?LinkID=329104
(function () {
"use strict";
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: Esta aplicación se ha iniciado recientemente. Inicializar
// la aplicación aquí.
console.log("Se ha iniciado por primera vez");
} else {
// TODO: Esta aplicación se ha reactivado tras estar suspendida.
// Restaurar el estado de la aplicación aquí.
console.log("Se ha vuelto de un estado de suspensión");
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: Esta aplicación está a punto de suspenderse. Guardar cualquier estado
// que deba mantenerse a través de las suspensiones aquí. Puede usar el
// objeto WinJS.Application.sessionState, que se guarda y se restaura
// automáticamente en las suspensiones. Si debe completar una
// operación asincrónica antes de suspenderse la aplicación, llame a
// args.setPromise().
console.log("Se esta suspendiendo la APP")
};
app.start();
})();
Recuerda que la página html corresponde con la vista. Podremos usar cualquier código HTML.
<p><h1><div> …
También podremos emplear estilos CSS mediante class o style.
Dentro del proyecto existe una carpeta CSS. Con un archivo CSS llamado default, con un solo elemento. En este fichero podremos insertar nuestros propios estilos CSS.
Además de los HTML podremos incorporar los tags de formulario. El comportamiento es muy similar al de la web HTML.
Ejemplo <input id=”elnombre” type=”text” />
Mediante la propiedad placeholder de HTML5 podremos escribir un texto cuando se encuentre vacio por defecto, a modo de ejemplo.
Windows Phone añade ciertos componentes específicos o nativos. Estos componentes no existen en HTML5 pero se convierten al ejecutarse sobre un dispositivo Windows Phone.
Ejemplo control nativo convertible en ejecución:
<div data-win-control=”WinJS.UI.ToggleSwitch” data-win-options=”{title:’Activame’}” />
Otro control nativo pueden ser las barras de navegación:
<div id=”barra-de-aplicación” data-win-control=”WinJS.UI.AppBar”>
</div>
Gestión de los eventos.
Mediante la lógica de la app, tendremos que capturar los eventos.
Cara pantalla html, tendrá asociado generalmente un archivo js de javascript con la lógica. Tendrá el mismo nombre que la pantalla html.
Al iniciarse la aplicación culmina con el método setPromise.
args.setPromise(WinJS.UI.processAll());
Este método inicializa la pantalla y la prepara para que el SO la muestre.
// Para obtener una introducción a la plantilla En blanco, consulte la siguiente documentación:
// http://go.microsoft.com/fwlink/?LinkID=329104
(function () {
"use strict";
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) {
console.log("Se ha iniciado por primera vez");
} else {
console.log("Se ha vuelto de un estado de suspensión");
}
args.setPromise(WinJS.UI.processAll().then(function(){
// Procesaremos los ids que se encuentra en el html
// Asociaremos una función con un evento mediante un adlistener
document.querySelector("#nombredelid").addEventListener("click",mostrarlosdatos,false)
}));
}
};
app.oncheckpoint = function (args) {
console.log("Se esta suspendiendo la APP")
};
function mostrarlosdatos(event)
{
var elvalorcapturado = document.querySelector("#nombredeid").value;
console.log(elvalorcapturado);
}
app.start();
})();
Diseños de interfaz de aplicación.
Generalmente las aplicaciones de Windows Phone emplean varias pantallas. Para crear esta estructura es necesario crear controles de navegación. Para estudiar mejor esto podremos emplear una plantilla de navegación cuando creemos un nuevo proyecto.
La estructura de navegación de la plantilla es mas compleja. Posee las paginas en subcarpetas.
En la página default.html encontraremos bastantes cambios. En este caso, solo contiene componentes de tipo control. Existe un nuevo control data-win-control que incorpora el PageControlNavigator.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>NavSharedApp1.WindowsPhone</title>
<!-- Referencias de WinJS -->
<!-- En tiempo de ejecución, ui-themed.css se resuelve como ui-themed.light.css o ui-themed.dark.css
en función de la configuración de temas del usuario. Esto forma parte de la funcionalidad de carga de recursos MRT. -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<!-- Referencias de NavSharedApp1 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<!-- Referencias compartidas -->
<script src="/js/navigator.js"></script>
</head>
<body class="phone">
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
<!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div> -->
</body>
</html>
Para crear una nueva página, tendremos que agregar una nueva carpeta dentro de pages, la llamaremos productos, después agregaremos un nuevo elemento, Aplicaciones Windows, control de página, con nombre productos.
Código de la página productos
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>page</title>
<link href="page.css" rel="stylesheet" />
<script src="page.js"></script>
</head>
<body>
<div class="page fragment">
<header class="page-header" aria-label="Header content" role="banner">
<button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Esto es page</span>
</h1>
</header>
<section class="page-section" aria-label="Main content" role="main">
<p>Aquí se debe incluir el contenido.</p>
</section>
</div>
</body>
</html>
Es necesario agregar las librerías de Windows que no están presentes en la nueva pagina de productos.
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
Recuerda que podremos crear hipervínculos html entre diferentes páginas.
