Slide del webcast "Microsoft Band SDK - Web Tiles (Preview)" (https://channel9.msdn.com/Blogs/Microsoft-Band-SDK-ITA/Microsoft-Band-SDK-Web-Tiles-Preview)

2. MASSIMO BONANNI
Software architect e trainer @ eXagile (Roma)
Microsoft MVP dal 2011
Intel Software Innovator dal 2014
Fondatore di:
DomusDotNet (www.domusdotnet.org)
dotNet{podcast} (www.dotnetpodcast.com)

4. Un “Web Tile Package” è un file compresso con estensione
.webtile la cui strutura interna è la seguente:

5. Non sono richieste particolari conoscenze di programmazione
per realizzare Web Tiles.
Consentono di veicolare informazioni al Band prendendole
direttamente da qualsiasi sorgente dati accessibile via web che
restituisca dati in formato XML o JSON.
L’installazione e la gestione delle web tile è a carico dell’app
Microsoft Health installata nel nostro smartphone (Windows,
Android, iOS).

6. Microsoft Health registra il file activation
protocol sull’estensione .webtile e l’URI
activation protocol con il protocollo
mshealth-webtile:// .
Nel momento in cui apriamo un link ad
una Web Tile o un file che ci è stato
inviato, Microsoft Health viene attivata e
chiede l’autorizzazione ad installare la
nuova tile nel Band (sempre che ci sia
ancora spazio nella strip).

7. La tile comparirà tra le tile di terze parti
nell’app Health e sarà compito di Health
stessa provvedere ad aggiornare i dati
delle pagine in essa contenute.
In questa versione, non viene eseguito un
controllo sull’esistenza della Web Tile
all’interno della strip. Se installiamo due
volte la stessa Web Tile, ci ritroviamo due
tile uguali nella strip del Band

8. Il Microsoft Authoring Tool è uno strumento web-based per realizzare
rapidamente una Web Tile.
Si compone di 5 passi
1. Scelta del layout e del tipo di web tile (Simple o Feed);
2. Definizione della sorgente dati;
3. Definizione del binding dei dati sul layout selezionato;
4. Definizione dei metadati della tile;
5. Generazione della tile e possibilità di download della stessa.

10. Authoring
Tool

11. Una Web Tile è composta da:
• Un file di manifest (manifest.json);
• Una serie di icone (.png) in una cartella (ad esempio Icons)

12. Il manifest.json può essere diviso in 5 sezioni:
• metadati della tile (nome, versione, descrizione, autore e
icone della tile);
• definizione delle sorgenti dati;
• definizione delle pagine e del binding dei dati;
• eventuale definizione del tema grafico (non obbligatoria);
• eventuali icone aggiuntive (non obbligatorie).

13. Le proprietà obbligatorie del
manifest sono:
manifestVersion : è un numero
che indica la versione del
manifest. Per la preview deve
essere 1;
name : E’ il nome che compare
all’interno di Microsoft Health nel
momento in cui installiamo la tile;
tileIcon : contiene i dati dell’icona
da utilizzare nella strip del Band in
termini di posizione e grandezza
in pixel;
{
"manifestVersion" : 1,
"name" : "dotNET{podcast}",
"description" : "Il feed di dotNET{podcast}, il
primo podcast italiano su tecnologie Microsoft.",
"version" : 1,
"versionString" : "1.0",
"author" : "Massimo Bonanni",
"contactEmail" :
"massimo.bonanni@dotnetpodcast.com",
"organization" : "dotNET{podcast}",
"tileIcon" : {
"46" : "icons/largeicon.png"
},
"badgeIcon" : {
"24" : "icons/smallIcon.png"
},
"refreshIntervalMinutes" : 15,
.
.
.
}

14. Definisce i colori da utilizzare per la Tile.
Se non presente viene utilizzato il tema di default.
"tileTheme": {
"base": "ffaf00",
"highlight": "ffaf00",
"lowlight": "f99a03",
"secondary": "9e9678",
"highContrast": "ffa500",
"muted": "bc8b00"
},

15. Possono essere presenti più risorse.
Le risorse vengono elaborate nell’ordine in cui
sono inserite.
Ogni risorsa ha tre proprietà:
• url : indirizzo della risorsa da utilizzare per
prelevare i dati;
• style : specifica il tipo di risorsa web che si
sta utilizzando. Al momento sono ammessi
solo i valori “simple” e “feed”;
• content : questa sezione definisce come
estrarre i dati dalla risorsa. Ogni oggetto
presente nella sezione definisce una sorta di
variabile che potremo utilizzare nelle pagine
per eseguire il binding dei dati.
"resources": [
{
"url": "http://www.dotnetpodcast.com/feed/RSS",
"style": "Feed",
"content": {
"title": "title",
"pubdate": "pubDate",
"itunesduration": "itunes:duration"
}
}
]

16. La sezione Pages contiene le informazioni relative alle
pagine che compongono la tile.
Troviamo un elemento per ogni pagina che definisce il
layout e il binding dei dati definiti nella sezione delle
sorgenti dati.
In questa sezione troviamo le seguenti proprietà:
• layout : layout della pagina. Sono disponibili 6 possibili
layout per le pagine;
• condition : deve essere impostata a true;
• textBindings : definisce il binding tra i controlli testuali
della pagina e i valori contenuti nelle variabili definite
nelle sorgenti dati
"pages": [
{
"layout": "MSBand_NoScrollingText",
"condition": "true",
"textBindings": [
{
"elementId": "1",
"value": "{{title}}"
},
{
"elementId": "2",
"value": "{{pubdate}}"
},
{
"elementId": "3",
"value": "durata: {{itunesduration}}"
}
]
}
]

17. • iconBindings : permette di eseguire il
binding tra controlli della pagina che
possono contenere immagini e le
immagini definite nella sezione icons.
 Ogni elemento all’interno di questa sezione contiene
l’id dell’elemento grafico della pagina in cui
posizionare l’immagine;
 Gli oggetti conditions (in questa versione solo uno)
contengono il binding effettivo alla risorsa immagine
definita nelle icons
"icons": {
"dotnetpodcasticon": "icons/dotnetpodcast.png",
"domusdotneticon": "icons/domusdotnet.png"
},
.
.
"pages": [
{
.
.
"iconBindings": [
{
"elementId": "11",
"conditions": [
{
"condition": "true",
"icon": "dotnetpodcasticon"
}
]
},
{
"elementId": "21",
"conditions": [
{
"condition": "true",
"icon": "domusdotneticon"
}
]
}
],
.
.
]

19. Si usa questa tipologia quando si vuole visualizzare N informazioni
da sorgenti dati JSON o XML.
• Lo style è Feed. Stiamo recuperando un feed (cioè un insieme di
record) e avremo un numero di pagine (tutte uguali e fino ad un
massimo di 8) che conterranno i dati della risorsa;
• l’url del feed è nella proprietà url;
• l’estrazione dei dati che ci interessano è definita nell’oggetto
content in cui eseguiamo il mapping tra le «variabili» e i le
proprietà del JSON o i nodi XML del feed;
"resources": [
{
"url": "http://www.dotnetpodcast.com/feed/RSS",
"style": "Feed",
"content": {
"title": "title",
"pubdate": "pubDate",
"itunesduration": "itunes:duration"
}
}
]
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
.
.
<item xml:base="http://www.dotnetpodcast.com/show/card/53">
<title>Titolo puntata 53</title>
<description>....</description>
<pubDate>Mon, 27 Jul 2015 00:00:00 -0700</pubDate>
.
.
<itunes:duration>01:07:50</itunes:duration>
.
.
</item>
<item xml:base="http://www.dotnetpodcast.com/show/card/52">
<title>Titolo puntata 52</title>
<description>....</description>
<pubDate>Mon, 27 Jul 2015 00:00:00 -0700</pubDate>
.
.
<itunes:duration>01:07:50</itunes:duration>
.
.
</item>
.
.
</channel>
</rss>

20. Feed Web
Tile

21. {
"UrlPinged": "http://www.dotnetpodcast.com",
"Result": 0,
"ResultString": "Ok",
"PingDurationInMilliseconds": 183,
"PingDateTime": "2015-08-02T16:29:26.8944123Z"
}
"resources": [
{
"url": "http://webtileapi.azurewebsites.net/api/Ping?....",
"style": "Simple",
"content": {
"DNPpingdatetime": "PingDateTime",
"DNPresultstring": "ResultString"
}
},
.
.
],
Si usa questa tipologia quando si vuole visualizzare informazioni da sorgenti JSON o XML in single pagine.
• Lo style è Simple. Ogni sorgente dati restituisce un record che potremmo visualizzare in una o più pagine;
• l’url del feed è nella proprietà url;
• l’estrazione dei dati che ci interessano è definita nell’oggetto content in cui eseguiamo il mapping tra le «variabili» e i le
proprietà del JSON o i nodi XML del feed;

22. Simple Web
Tile

23. Microsoft Band SDK – Web Tile
http://developer.microsoftband.com/WebTile
Microsoft Band Official Site
https://www.microsoft.com/microsoft-band
Web Tile Authoring Tool
http://developer.microsoftband.com/WebTile/ChooseLayout