Enlaces

▼

4/9/14

Como programar una aplicación para windows 8 (parte 2)

--> --> --> Después de la primera parte de este tutorial en donde obtuviste las herramientas necesarias para comenzar el desarrollo de tu aplicación, hoy vamos a "jugar" un poco con el código de la aplicación de ejemplo que proporciona blend, para ello debes iniciar esta app y crear un nuevo proyecto de esta manera:



Elige cualquiera de las opciones aunque para este ejemplo usare la plantilla grid app en html5.






Para empezar debes conocer un poco acerca de los archivos que están dentro de tu proyecto:






default.html, default.js, default.css: Estos archivos son los que contienen lo esencial (apariencia y funcionalidad básica) para ejecutar tu aplicación.



carpeta images, pages: contienen recursos usados por tu programa como el icono, imágenes de fondo, entre otros.



ui-dark.css, ui-ligth.css: contiene los estilos básicos para aplicaciones con fondo oscuro o un fondo claro.



Html

Ahora explicare un poco acerca del código comenzando por el archivo default.html el cual tiene esta forma:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <meta charset="utf-8" />
  6.     <title>App1</title>
  8.     <!-- Referencias de WinJS -->
  9.     <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
  10.     <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
  11.     <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
  13.     <!-- Referencias de App1 -->
  14.     <link href="/css/default.css" rel="stylesheet" />
  15.     <script src="/js/data.js"></script>
  16.     <script src="/js/navigator.js"></script>
  17.     <script src="/js/default.js"></script>
  18. </head>
  19. <body>
  20.      <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}"></div>
  21. </body>
  22. </html>

Como podrás ver se incluyen varios archivos javascript de la biblioteca WinJS lo cuales son la base de nuestra app, también se incluye un div con identificador contenthost en donde se generará automáticamente todo nuestro contenido.

Puedes agregar mas elementos a la interfaz como pueden ser botones o cajas de texto por medio de las etiquetas <input>, <button>,entre otros.

En la plantilla html puedes agregar un par de elementos, los cuales tienen un atributo llamado data-win-control que usará WinJS para su control, el ejemplo es muy sencillo ya que solamente habilitaré la barra de la aplicación, para ello agrega este código en el archivo default.html:
  1. <div id="appbar" data-win-control="WinJS.UI.AppBar">
  2.   <button id="boton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
  3.   <button id="boton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Comprar', icon:'shop'}" type="button"></button>
  4. </div>

Esta porción de código agregara también dos ítems a esa barra los cuales puedes personalizar con una lista de iconos predeterminada.




Recuerda que le puedes dar vida a estos botones en JavaScript.


Css
  1. #contenthost {
  2.     height: 100%;
  3.     width: 100%;
  4. }

Para modificar el color de fondo de la aplicación solo debes agregar el atributo
background-color: Yellow a contenthost en el archivo default.css para que tu aplicación se vea así:







A partir de ahí puedes cambiar parámetros como el fondo de la aplicación o de las baldosas, finalmente tu aplicación podrá tener esta apariencia: (recuerda que también puedes ayudarte de blend para cambiar estos parámetros).

 Javascript

Para ver un poco el funcionamiento de nuestra aplicación tendremos que ir al archivo data.js y default.js.

Este archivo contiene algunos objetos de javascript los cuales son los que te permitirán crear "baldosas" fácilmente





También podemos usar la librería WinJS para poder crear elementos o modificar su comportamiento, como ejemplo agregaré un elemento rating es decir unas estrellas que podrán servir para calificar tu programa.

Para agregar este elemento debes crear un div de la siguiente forma (recuerda ubicarlo antes del cierre de la etiqueta <body>):

  1. <div id="ratingControlHost" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating: 5}" style="position: absolute; right: 0%; top: 0%;"></div>

Luego debes ir al archivo default.js y agregar esta línea de código después de la llamada a winjsprocessall tal y como se muestra en este ejemplo:

  2. (function () {
  3.     "use strict";
  5.     WinJS.Binding.optimizeBindingReferences = true;
  7.     var app = WinJS.Application;
  8.     var activation = Windows.ApplicationModel.Activation;
  9.     var nav = WinJS.Navigation;
  11.     app.addEventListener("activated", function (args) {
  12.         if (args.detail.kind === activation.ActivationKind.launch) {
  13.             if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
  15.             } else {
  17.             }
  19.             if (app.sessionState.history) {
  20.                 nav.history = app.sessionState.history;
  21.             }
  23.      //llamada a winsj.ui.processall
  24.             args.setPromise(WinJS.UI.processAll().then(function () {
  25.      //agregando estrellas
  26.   var control = document.getElementById("ratingControlHost").winControl;
  27.   control.averageRating = 3;
  28.                 //por el momento el programa tendra 3 estrellas
  29.      
  30.                 if (nav.location) {
  31.                     nav.history.current.initialPlaceholder = true;
  32.                     return nav.navigate(nav.location, nav.state);
  33.                 } else {
  34.                     return nav.navigate(Application.navigator.home);
  35.                 }
  36.             }));
  37.         }
  38.     });
  40.     app.oncheckpoint = function (args) {
  42.         app.sessionState.history = nav.history;
  43.     };
  45.     app.start();
  46. })();

El resultado será este:







Resumen y conclusiones


*Para crear aplicaciones para windows 8 puedes usar blend, ya sea para crear una aplicación completa basada en tecnologías web o modificar su apariencia con archivos XAML.

*La biblioteca WinJS es la mas importante para el desarrollo de estas apps, esta librería incluye elementos de interfaz listos para incluirlos en tu programa.

*Puedes crear elementos de interfaz tanto en JavaScript como directamente en el código html aunque es recomendable que sea usando js.

*Puedes cambiar rápidamente la apariencia de tu app con archivos css.

*No olvides que si quieres que tu aplicación tenga un buen rendimiento es preferible usar lenguajes como c++ (rendimiento máximo) o también c# (balance entre facilidad de construcción y rendimiento).


Muy bien eso es todo por ahora, recuerda estar pendiente de la 3 parte de este tutorial en donde se mostraran todos los conceptos de las aplicaciones con estilo modern UI.
en

No hay comentarios:

Publicar un comentario

Comenta, no es necesario registrarse!