Introduzione a Band Studio per Visual Studio

Article
04/24/2015

Questo post è stato scritto daLorenzo Rossoni e Fela Ameghino , Windows Phone Developers.

Dopo aver inizialmente presentato i Microsoft Band ad ottobre, qualche settimana fa la casa di Redmond ha provveduto a rilasciare l’SDK ufficiale (anche se in versione preview), aprendo di fatto le porte del nuovo smartband agli sviluppatori Windows Phone, Android e iOS.

Per un’introduzione all’SDK vi consigliamo la lettura di questo post, scritto da Matteo Tumiati e Giancarlo Lelli.

È a questo punto che nasce la nostra idea: sebbene l’SDK fornito da Microsoft permetta di aggiungere tile al Band alle quali è possibile inviare notifiche, non permette la creazione di tile con interfacce personalizzate per il nostro wearable. La sfida era quindi quella di trovare il modo per poterlo fare e di dare anche agli altri sviluppatori la possibilità di farlo.

Dopo aver analizzato i controlli e la struttura con i relativi attributi, il passo successivo è stato quello di sviluppare un linguaggio capace di rappresentare in maniera semplice ed efficace il layout delle app e dare la possibilità ai developer di utilizzarlo in maniera agevole: la scelta è ricaduta immediatamente su un’estensione per Visual Studio: ecco quindi Band Studio for Visual Studio.

Vediamo ora come creare la nostra prima app per il Microsoft Band.

Installazione dell’estensione per Visual Studio 2013

Il primo step è quello di installare l’estensione per Visual Studio: questa ci permetterà di creare i layout tramite editor xml sfruttando gli strumenti forniti dall’IDE, in primis l’IntelliSense, e fornendoci un feedback visuale mostrando come apparirà la nostra app una volta eseguita sul Band.

Apriamo quindi Visual Studio 2013 e andiamo in STRUMENTI → Estensioni e aggiornamenti… e cerchiamo online su Visual Studio Gallery Band Studio for Visual Studio.

Una volta installato riavviamo l’IDE e siamo pronti per creare la nostra prima app.

La nostra prima app

A questo punto creiamo un nuovo progetto “Applicazione vuota (Windows Phone)”, quest’applicazione servirà ad installare la tile sul Band e aggiornare le pagine della nostra app, dal momento che quest'ultimo non può eseguire codice arbitrario ma solamente di visualizzare dati.
Una volta creato il progetto, dobbiamo aggiungere la definizione del layout per la pagina dell’applicazione che volgiamo eseguire sul Band, per fare questo da Esplora soluzioni selezioniamo il progetto, quindi aggiungiamo un nuovo elemento “Microsoft Band Layout”. Si aprirà l’editor che vedete qui sopra.
Oltre ad aggiungere il file di layout, in questo modo verranno aggiunti automaticamente i riferimenti al pacchetto NuGet Microsoft.Band.Extended.

N.B: se avete già referenziato il pacchetto dell'SDK ufficiale di Microsoft vi consigliamo di rimuoverlo PRIMA di fare questa operazione, perché alcune librerie vanno in conflitto con il nostro SDK.

L'editor dei layout

Per ottenere il meglio vi consigliamo di semplificare al massimo i vostri layout, tenendo a mente che:

· BandLayout (l'elemento padre) non può avere più di 3 figli, ed è un FlowList con Orientation verticale

· FlowList (StackPanel di XAML) non può avere più di 3 figli

· Tutti gli elementi che non sono contenitori (quindi TextBlock e Glyph) devono avere un Id, che sarà poi usato per aggiornare i campi della pagina con i valori da visualizzare

Elementi del layout

Al momento, sono supportati solo tre tipi di elementi: FlowList, TextBlock, Glyph (Immagine monocromatica) e Barcode ma presto verranno aggiunti anche tutti gli altri supportati dal Band.

· FlowList: organizza gli elementi figlio in una singola linea che può essere orientata orizzontalmente o verticalmente; è l’analogo di uno StackPanel di XAML

· TextBlock: un controllo per la visualizzazione di piccoli contenuti testuali; come un TextBlock di XAML

· Glyph: un controllo che visualizza un'immagine monocromatica; analogamente ad un BitmapIcon di XAML

· Barcode: un controllo che visualizza un codice a barre in formato Code39 o PDF417

Layout
Torniamo alla nostra app, il nostro obiettivo è quello di visualizzare sul nostro Band alcune semplici informazioni personali, come il nostro nome, indirizzo e-mail e numero di telefono. Per fare ciò creiamo un semplice layout a tre righe con un Glyph e un TextBlock ciascuna. Per fare ciò utilizzeremo il seguente layout:

</FlowList>

</FlowList>

</FlowList>

</BandLayout>

Code behind

Una volta creato il vostro layout potete passare al code behind. Per connettervi al dispositivo dovete usare gli stessi metodi dell’SDK ufficiale, ad eccezione di BandClientManager.ConnectAsync che va sostituito con BandClientManager.ConnectCoreAsync.

Una volta istanziato il vostro IBandClient potrete notare dei nuovi metodi sotto la proprietà TileManager, quelli che ci interessano sono AddTileAsync e SendPageUpdateAsync.

private async void AddMyTile()

{

var devices = await BandClientManager.Instance.GetBandsAsync();

if (devices.Length > 0)

{

// Connettiamoci al IBandClient extended

using (var band = await BandClientManager.Instance.ConnectCoreAsync(devices[0]))

{

// Carichiamo il nostro layout.

// N.B.: l'estensione del layout compilato è .lblob, e non .blml,

// quindi se il vostro file si chiama "BandLayout.blml" dovrete caricare "BandLayout.lblob"

var layout = await BandLayout.FromStorageFileAsync(new Uri("ms-appx:///Assets/BandTile/BandLayout.lblob"));

// Creiamo una nuova collezione di layout

var layouts = new BandLayoutCollection();

// E aggiungiamo il layout a essa, settando l'index a zero

// Attualmente le tile non possono avere più di cinque layout differenti.

layouts.SetLayout(0, layout);

// Carichiamo le icone della nostra tile

var tile = await LoadIcon("ms-appx:///Assets/BandTile/TileIcon.png"); // 46x46

var small = await LoadIcon("ms-appx:///Assets/BandTile/SmallIcon.png"); // 24x24

// Carichiamo le icone aggiuntive che verranno usate nel layout

// Attualmente il limite per tile è di dieci icone, tile e small icon comprese.

// Potete verificare che l'icona non sfori le dimensioni massime supportate con un semplice calcolo:

// (Larghezza * Altezza * 4) <= 15270

var extraIcon1 = await LoadIcon("ms-appx:///Assets/icon1.png");

var extraIcon2 = await LoadIcon("ms-appx:///Assets/icon2.png");

var extraIcon3 = await LoadIcon("ms-appx:///Assets/icon3.png");

// Creiamo la tile ed aggiungiamo le icone aggiuntive

var strapp = new BandTile(baseGuid)

{

Name = "FrayxRulez",

TileIcon = tile,

SmallIcon = small

};

strapp.AddIcon(extraIcon1); // iconIndex = 0

strapp.AddIcon(extraIcon2); // iconIndex = 1
strapp.AddIcon(extraIcon3); // iconIndex = 2

// Aggiungiamo la tile, chiedendo all'utente il consenso

await band.TileManager.AddTileAsync(strapp, layouts);

// Creiamo una collezione contenente i valori che dovranno avere i nostri elementi

var fields = new BandTileElementCollection();

// L'Id deve essere lo stesso che avete settato nel layout

fields.AddTextBlock(12, "Leonardo Fibonacci");

fields.AddTextBlock(22, "leo.fibo@outlook.it");
fields.AddTextBlock(32, "+1123581321");

// L'iconIndex viene ricavato dall'ordine in cui avete aggiunto le icone al layout

fields.AddGlyph(11, 0);
fields.AddGlyph(21, 1);
fields.AddGlyph(31, 2);

// Aggiorniamo (o creiamo) la pagina nella nostra tile:

// pageId è l'id della pagina che volete aggiornare o create

// pageLayoutIndex è lo stesso valore che avete usato in layouts.SetLayout

await band.TileManager.SendPageUpdateAsync(baseGuid, page1Guid, 0, fields);

}

Ora non avete più scuse per sviluppare una fantastica app per il vostro Band!
Buon coding e vi raccomandiamo di condividere le vostre creazioni ;)

Introduzione a Band Studio per Visual Studio

Installazione dell’estensione per Visual Studio 2013

La nostra prima app

L'editor dei layout

Elementi del layout

Code behind

Additional resources