{"id":8091,"date":"2015-07-02T18:28:54","date_gmt":"2015-07-02T16:28:54","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8091"},"modified":"2015-07-02T23:02:24","modified_gmt":"2015-07-02T21:02:24","slug":"monografico-sobre-la-creacion-de-apps-en-windows-phone-8-1-holamundo","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/monografico-sobre-la-creacion-de-apps-en-windows-phone-8-1-holamundo\/","title":{"rendered":"Monogr\u00e1fico sobre la creaci\u00f3n de Apps en Windows Phone 8.1. #holamundo"},"content":{"rendered":"

Microsoft<\/strong> ha creado una plataforma de desarrollo de aplicaciones unificada para tablets, pc y smartphones. Para crear aplicaciones emplearemos tecnolog\u00edas de desarrollo HTML5 y Javascript.<\/p>\n

Para comenzar a desarrollar aplicaciones con Windows Phone un punto vital es el portal de desarrolladores. Podremos encontrar todo tipo de tecnolog\u00edas de desarrollo as\u00ed como documentaci\u00f3n y ejemplos de c\u00f3digo.<\/p>\n

https:\/\/dev.windows.com\/<\/a><\/p>\n

Desde aqu\u00ed podremos recorrer todas las tecnolog\u00edas 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.<\/p>\n

Desde https:\/\/dev.windows.com\/en-US\/design<\/a><\/p>\n

Seremos capaces de aprender y profundizar sobre el desarrollo de interfaces de usuario. C\u00f3mo dise\u00f1ar apps UWP o Universal Windows Platform, para que se visualicen en dispositivos basados en Windows 10, desde tel\u00e9fonos o tablets, hasta PCs.<\/p>\n

Una de las \u00faltimas novedades creadas por Microsoft es Visual Studio Code.<\/p>\n

https:\/\/code.visualstudio.com<\/a><\/p>\n

Es un entorno de desarrollo online permite crear Apps con una interfaz sencilla.<\/p>\n

<\/p>\n

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\u00f3gicamente estar dado de alta.<\/p>\n

Veamos c\u00f3mo realizar un \u201cHola Mundo\u201d para Windows pone 8.1 sobre Visual Studio.<\/p>\n

La instalaci\u00f3n de paquetes NuGet es un soporte autom\u00e1tico de librer\u00edas. Similar al apt de Linux para descargar librer\u00edas en tiempo real. Cada vez que creemos un proyecto, las librerias se pueden actualizar para disponer de las ultimas versiones.<\/p>\n

\"Hola-Mundo-1\"<\/a><\/p>\n

El primer archivo de la aplicaci\u00f3n 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.<\/p>\n

La estructura de default.html es un archivo incluye librer\u00edas javascript y hojas de estilo CSS.<\/p>\n

Los proyectos Windows Phone cuentan con un archivo de manifiesto. El package.appxmanifest.<\/p>\n

El archivo se abrir\u00e1 haciendo doble clic. El asistente de configuraci\u00f3n nos ayudar\u00e1 a establecer la configuraci\u00f3n b\u00e1sica. El nombre, la descripci\u00f3n, el tipo de giro, idioma, etc. Posee muchas pesta\u00f1as y muchas opciones.<\/p>\n

\"AppManifest\"<\/a><\/p>\n

Aplicaci\u00f3n, Archivos visuales (iconos y pantalla splash), Requisitos (los permisos), Capacidades (permisos de acceso a diversas funcionalidades del Sistema operativo), Declaraciones, URI de contenido, Empaquetado.<\/p>\n

TIP<\/strong>: Desde el apartado Proyecto -> Tienda -> Reservar nombre de la aplicaci\u00f3n. Podremos establecer la configuraci\u00f3n 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.<\/p>\n

Para poder probar nuestra App disponemos de emuladores que nos permiten realizar pruebas de ejecuci\u00f3n en diversos escenarios sin disponer de los dispositivos reales.<\/p>\n

\"Simulador\"<\/a><\/p>\n

Pero ojo, para ello necesitaremos una versi\u00f3n de 64 bits, nos aparecer\u00e1 el siguiente mensaje.<\/p>\n

\"2-windows-phone\"<\/a><\/p>\n

En caso contrario, nos mostrar\u00e1 diversos emuladores y podremos ejecutar y lanzar el emulador. El emulador suele tardar al abrirse. Una vez abierto, se ejecuta la aplicaci\u00f3n autom\u00e1ticamente. En este caso nos mostrar\u00e1 el texto que hemos creado en la vista HTML.<\/p>\n

\"3-windows-phone\"<\/a><\/p>\n

El emulador posee much\u00edsimas herramientas para facilitar el desarrollo. Emular giros, ubicaciones f\u00edsicas, arrastres, toques multiplantalla, simular notificaciones remotas, sensores, dispositivos de red, etc. Es realmente potente. Mediante la tarjeta SD podremos usar nuestra aplicaci\u00f3n con uso de almacenamiento externo. Con el simulador podremos manejar el sistema como si fuera un dispositivo real.<\/p>\n

Ciclo de Vida de la Aplicaci\u00f3n.<\/strong><\/p>\n

Para poder captura el ciclo de vida, tendremos que trabajar en el archivo default.js.<\/p>\n

En este fichero veremos la l\u00f3gica del ciclo de vida.<\/p>\n

El m\u00e9todo onactivated, se encuentran los m\u00e9todos de argumento. Seg\u00fan el tipo de task sabremos el tipo de evento de d\u00f3nde venimos.<\/p>\n

Para ver el estado podemos usar la consola.<\/p>\n

El bot\u00f3n de eventos de ciclo de vida permitir\u00e1 suspender la app o reanudarla.<\/p>\n

\/\/ Para obtener una introducci\u00f3n a la plantilla En blanco, consulte la siguiente documentaci\u00f3n:\r\n\/\/ http:\/\/go.microsoft.com\/fwlink\/?LinkID=329104\r\n(function () {\r\n    \"use strict\";\r\n\r\n    var app = WinJS.Application;\r\n    var activation = Windows.ApplicationModel.Activation;\r\n\r\n    app.onactivated = function (args) {\r\n        if (args.detail.kind === activation.ActivationKind.launch) {\r\n            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {\r\n                \/\/ TODO: Esta aplicaci\u00f3n se ha iniciado recientemente. Inicializar\r\n                \/\/ la aplicaci\u00f3n aqu\u00ed.\r\n                console.log(\"Se ha iniciado por primera vez\");\r\n            } else {\r\n                \/\/ TODO: Esta aplicaci\u00f3n se ha reactivado tras estar suspendida.\r\n                \/\/ Restaurar el estado de la aplicaci\u00f3n aqu\u00ed.\r\n                console.log(\"Se ha vuelto de un estado de suspensi\u00f3n\");\r\n            }\r\n            args.setPromise(WinJS.UI.processAll());\r\n        }\r\n    };\r\n\r\n    app.oncheckpoint = function (args) {\r\n        \/\/ TODO: Esta aplicaci\u00f3n est\u00e1 a punto de suspenderse. Guardar cualquier estado\r\n        \/\/ que deba mantenerse a trav\u00e9s de las suspensiones aqu\u00ed. Puede usar el\r\n        \/\/ objeto WinJS.Application.sessionState, que se guarda y se restaura\r\n        \/\/ autom\u00e1ticamente en las suspensiones. Si debe completar una\r\n        \/\/ operaci\u00f3n asincr\u00f3nica antes de suspenderse la aplicaci\u00f3n, llame a\r\n        \/\/ args.setPromise().\r\n         console.log(\"Se esta suspendiendo la APP\")\r\n    };\r\n\r\n    app.start();\r\n})();\r\n<\/pre>\n
Recuerda que la p\u00e1gina html corresponde con la vista. Podremos usar cualquier c\u00f3digo HTML.<\/p>\n
<p><h1><div>\u00a0 \u2026<\/p>\n
Tambi\u00e9n podremos emplear estilos CSS mediante class o style.<\/p>\n
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.<\/p>\n
Adem\u00e1s de los HTML podremos incorporar los tags de formulario. El comportamiento es muy similar al de la web HTML.<\/p>\n
Ejemplo <input id=\u201delnombre\u201d type=\u201dtext\u201d \/><\/p>\n
Mediante la propiedad placeholder de HTML5 podremos escribir un texto cuando se encuentre vacio por defecto, a modo de ejemplo.<\/p>\n
Windows Phone a\u00f1ade ciertos componentes espec\u00edficos o nativos. Estos componentes no existen en HTML5 pero se convierten \u00a0al ejecutarse sobre un dispositivo Windows Phone.<\/p>\n
Ejemplo control nativo convertible en ejecuci\u00f3n:<\/p>\n
<div data-win-control=\u201dWinJS.UI.ToggleSwitch\u201d data-win-options=\u201d{title:\u2019Activame\u2019}\u201d \/><\/p>\n
Otro control nativo pueden ser las barras de navegaci\u00f3n:<\/p>\n
<div id=\u201dbarra-de-aplicaci\u00f3n\u201d data-win-control=\u201dWinJS.UI.AppBar\u201d><\/p>\n
<\/div><\/p>\n
Gesti\u00f3n de los eventos.<\/strong><\/p>\n
Mediante la l\u00f3gica de la app, tendremos que capturar los eventos.<\/p>\n
Cara pantalla html, tendr\u00e1 asociado generalmente un archivo js \u00a0de javascript con la l\u00f3gica. Tendr\u00e1 el mismo nombre que la pantalla html.<\/p>\n
Al iniciarse la aplicaci\u00f3n culmina con el m\u00e9todo setPromise.<\/p>\n
args.setPromise(WinJS.UI.processAll());<\/p>\n
Este m\u00e9todo inicializa la pantalla y la prepara para que el SO la muestre.<\/p>\n
\/\/ Para obtener una introducci\u00f3n a la plantilla En blanco, consulte la siguiente documentaci\u00f3n:\r\n\/\/ http:\/\/go.microsoft.com\/fwlink\/?LinkID=329104\r\n(function () {\r\n    \"use strict\";\r\n\r\n    var app = WinJS.Application;\r\n    var activation = Windows.ApplicationModel.Activation;\r\n\r\n    app.onactivated = function (args) {\r\n        if (args.detail.kind === activation.ActivationKind.launch) {\r\n            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {\r\n                console.log(\"Se ha iniciado por primera vez\");\r\n            } else {\r\n                \r\n                console.log(\"Se ha vuelto de un estado de suspensi\u00f3n\");\r\n            }\r\n            args.setPromise(WinJS.UI.processAll().then(function(){\r\n            \r\n                \/\/ Procesaremos los ids que se encuentra en el html\r\n                \/\/ Asociaremos una funci\u00f3n con un evento mediante un adlistener\r\n\r\n                document.querySelector(\"#nombredelid\").addEventListener(\"click\",mostrarlosdatos,false)\r\n            }));\r\n\r\n        }\r\n    };\r\n\r\n    app.oncheckpoint = function (args) {\r\n         console.log(\"Se esta suspendiendo la APP\")\r\n    };\r\n\r\n    function mostrarlosdatos(event)\r\n    {\r\n        var elvalorcapturado = document.querySelector(\"#nombredeid\").value;\r\n        console.log(elvalorcapturado);\r\n    }\r\n    \r\n    app.start();\r\n})();\r\n<\/pre>\n
Dise\u00f1os de interfaz de aplicaci\u00f3n.<\/strong><\/p>\n
Generalmente las aplicaciones de Windows Phone emplean varias pantallas. Para crear esta estructura es necesario crear controles de navegaci\u00f3n. Para estudiar mejor esto podremos emplear una plantilla de navegaci\u00f3n cuando creemos un nuevo proyecto.<\/p>\n
\"Estructura-de-navegacion\"<\/a><\/p>\n
La estructura de navegaci\u00f3n de la plantilla es mas compleja. Posee las paginas en subcarpetas.<\/p>\n
\"Productos\"<\/a><\/p>\n
En la p\u00e1gina 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.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"\/>\r\n    <meta charset=\"utf-8\" \/>\r\n    <title>NavSharedApp1.WindowsPhone<\/title>\r\n\r\n    <!-- Referencias de WinJS -->\r\n    <!-- En tiempo de ejecuci\u00f3n, ui-themed.css se resuelve como ui-themed.light.css o ui-themed.dark.css \r\n    en funci\u00f3n de la configuraci\u00f3n de temas del usuario. Esto forma parte de la funcionalidad de carga de recursos MRT. -->\r\n    <link href=\"\/css\/ui-themed.css\" rel=\"stylesheet\" \/>\r\n    <script src=\"\/\/Microsoft.Phone.WinJS.2.1\/js\/base.js\"><\/script>\r\n    <script src=\"\/\/Microsoft.Phone.WinJS.2.1\/js\/ui.js\"><\/script>\r\n\r\n    <!-- Referencias de NavSharedApp1 -->\r\n    <link href=\"\/css\/default.css\" rel=\"stylesheet\" \/>\r\n    <script src=\"\/js\/default.js\"><\/script>\r\n\r\n    <!-- Referencias compartidas -->\r\n    <script src=\"\/js\/navigator.js\"><\/script>\r\n<\/head>\r\n<body class=\"phone\">\r\n    <div id=\"contenthost\" data-win-control=\"Application.PageControlNavigator\" data-win-options=\"{home: '\/pages\/home\/home.html'}\"><\/div>\r\n    <!-- <div id=\"appbar\" data-win-control=\"WinJS.UI.AppBar\">\r\n        <button data-win-control=\"WinJS.UI.AppBarCommand\" data-win-options=\"{id:'cmd', label:'Command', icon:'placeholder'}\" type=\"button\"><\/button>\r\n    <\/div> -->\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Para crear una nueva p\u00e1gina, tendremos que agregar una nueva carpeta dentro de pages, la llamaremos productos, despu\u00e9s agregaremos un nuevo elemento, Aplicaciones Windows, control de p\u00e1gina, con nombre productos.<\/p>\n
C\u00f3digo de la p\u00e1gina productos<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"\/>\r\n    <meta charset=\"utf-8\" \/>\r\n    <title>page<\/title>\r\n\r\n    <link href=\"page.css\" rel=\"stylesheet\" \/>\r\n    <script src=\"page.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div class=\"page fragment\">\r\n        <header class=\"page-header\" aria-label=\"Header content\" role=\"banner\">\r\n            <button class=\"back-button\" data-win-control=\"WinJS.UI.BackButton\"><\/button>\r\n            <h1 class=\"titlearea win-type-ellipsis\">\r\n                <span class=\"pagetitle\">Esto es page<\/span>\r\n            <\/h1>\r\n        <\/header>\r\n        <section class=\"page-section\" aria-label=\"Main content\" role=\"main\">\r\n            <p>Aqu\u00ed se debe incluir el contenido.<\/p>\r\n        <\/section>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Es necesario agregar las librer\u00edas de Windows que no est\u00e1n presentes en la nueva pagina de productos.<\/p>\n
<link href=\"\/css\/default.css\" rel=\"stylesheet\" \/>\r\n    <link href=\"\/pages\/home\/home.css\" rel=\"stylesheet\" \/>\r\n    <script src=\"\/pages\/home\/home.js\"><\/script>\r\n<\/pre>\n
Recuerda que podremos crear hiperv\u00ednculos html entre diferentes p\u00e1ginas.<\/p>\n","protected":false},"excerpt":{"rendered":"
Microsoft ha creado una plataforma de desarrollo de aplicaciones unificada para tablets, pc y smartphones. Para crear aplicaciones emplearemos tecnolog\u00edas 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\u00edas de desarrollo as\u00ed como documentaci\u00f3n y ejemplos de c\u00f3digo. https:\/\/dev.windows.com\/ Desde aqu\u00ed podremos recorrer todas las tecnolog\u00edas 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\u00f3mo dise\u00f1ar apps UWP o Universal Windows Platform, para que se visualicen en dispositivos basados en Windows 10, desde tel\u00e9fonos o tablets, hasta PCs. Una de las \u00faltimas novedades creadas por Microsoft es Visual Studio Code. https:\/\/code.visualstudio.com Es un entorno de desarrollo online permite crear Apps con una interfaz sencilla.<\/p>\n","protected":false},"author":1,"featured_media":3797,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[212],"tags":[646],"class_list":["post-8091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-windows-8","tag-windows-phone"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=8091"}],"version-history":[{"count":7,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8091\/revisions"}],"predecessor-version":[{"id":8105,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8091\/revisions\/8105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/3797"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=8091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=8091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=8091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}