#MSBAND – Sobre el formato de las #Tiles, y algunas más complejas

Hola!

Hoy voy a repasar un poco más la forma en la que se definen y agregan Tiles a la Microsoft Band. El punto de partida debería ser el SDK, en el mismo se explica en detalle cómo funciona un Tile. El capítulo 8 “Customizing Tile Layouts” explica los controles con los que podemos trabajar, las dimensiones disponibles y mucha más información relativa al diseño de tiles.

Después de programar un poco sobre este modelo, y tal vez por deformación profesional, el instinto me ha llevadp a separar la programación en una vista y en un modelo de datos. Es por eso que he decidido podría separar en 3 partes la creación de un Tile:

  • Tile Definition
    • Define el Tile Id, el Nombre y las imágenes que lo definirán en la Band
  • Page Layout User Interface
    • Es la representación gráfica de los elementos que componen la página que se muestra cuando se presiona sobre el tile
  • Page Layout Data
    • Son los datos asociados a la representación gráfica anterior

En el ejemplo del post de ayer, el único control que se mostraba asociado una Page del tile era un botón. Es por eso que la separación queda muy simple.

El en siguiente ejemplo de código, los comentarios indican cada una de las 3 partes que comenté antes

Si queremos crear una vista un poco más compleja podríamos agregar un poco de texto y un control de código de barras. La siguiente imagen, puede servir de referencia y en la misma se incluyen

  • Un control ScrollFlowPanel con orientación vertical como contenedor principal
  • Un título en la cabecera con un TextBlock
  • Un control para mostrar información de un código de barras
  • Un control ScrollFlowPanel con orientación horizontal para mostrar 2 botones

El código para la definición de la UI de esta page sería el siguiente

Es importante remarcar, que los identificadores de cada control se pasan como parámetro ya que los mismos serán los que se usen para luego asociar los datos em otra operación. La sección de muestra de datos quedaría como muestra el siguiente ejemplo de código:

Y finalmente, la asociación de todos los elementos juntos, incluidos los ids de los controles quedaría así:

En ejecución, la vista queda deja bastante que desear, pero

Con un poco de scroll hacia abajo, podemos ver como se ajustan los controles automáticamente.

En el próximo post, mostraré como capturar las interacciones de los usuarios cuando utilizan una página asociada a un Tile en la Band.

 

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Advertisements

4 thoughts on “#MSBAND – Sobre el formato de las #Tiles, y algunas más complejas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s