VisualStudioTips.net

Nel post precedente abbiamo mosso i primi passi con WPF & MVVM sviluppato con Ammy. Abbiamo creato una view ed abbiamo visto come legare staticamente questa view con il suo viewmodel.

Ricordo che tutto il codice sorgente si trova su GitHub:
https://github.com/Brain-Sys/FsxLogger.Client

Adesso, come facciamo binding?

L’unica view con cui abbiamo a che fare è contenuta nel file LoginWindow.ammy. La UI è questa:

Un controllo TextBox ed un PasswordBox, seguiti poi da due Button per eseguire due comandi (uno effettua il login e l’altro annulla l’operazione, per cui l’applicazione WPF viene chiusa).

La TextBox è collegata alla proprietà Username del ViewModel.

TextBox {
    #Cell(0, 1),
    VerticalAlignment: Center,
    HorizontalAlignment: Stretch,
    Text: bind Username,
    Padding:"4" }

Notare l’uso del mixin Cell. La penultima riga effettua il binding. La sintassi è molto compatta.

Text : bind Username

Abbiamo utilizzato la keyword bind di Ammy. La proprietà del viewmodel va indicata senza virgolette né apici, semplicemente indicando il nome della proprietà, come faremmo con lo XAML.

Se dovessimo impostare ulteriori proprietà per fare il binding (Mode, UpdateSourceTrigger, StringFormat, NotifyOn*), allora la sintassi cambia leggermente. Si ragiona sempre in JSON:

Text: bind Username set
[
    Mode: TwoWay,
    UpdateSourceTrigger: PropertyChanged,
    IsAsync: true
]

Dopo il Set si indica un array di proprietà, ciascuna con il suo valore. Nel caso specifico, impostare Mode ed IsAsync non era necessario, l’ho fatto a solo scopo didattico.

Per quanto riguarda i due Button, il binding verso i Command è semplicemente espresso come:

Button { Content: "Login", Command: bind LoginCommand }
Button { Content: "Cancel", Command: bind CancelLoginCommand }

Ovviamente LoginCommand e CancelLoginCommand sono due proprietà RelayCommand (stiamo utilizzando MvvmLightLibs) esposte dal viewmodel. Cliccando su ciascuno dei due bottoni, viene scatenato il Command corrispondente. Non ci interessa approfondire altro in questo contesto.

Risolvere il problema del binding sul controllo PasswordBox è un po’ più complicato, perchè la proprietà Password non è una DependencyProperty. E’ OT rispetto a questo post, ma lo risolveremo.

Altri tipi di binding

Vediamo adesso altre forme di binding. Parliamo di come poter impostare il focus sul primo controllo all’avvio della finestra, posizionandolo sul controllo PasswordBox.

Questa cosa si risolve con due passaggi:

1. diamo un nome al controllo a cui vogliamo assegnare il focus
2. utilizziamo la classe FocusManager

Risolviamo prima lo step (1).

PasswordBox {
    #Cell(1, 1),
    VerticalAlignment: Center,
    HorizontalAlignment: Stretch,
    Name: "focus" }

Il nome assegnato al controllo è focus. A questo punto andiamo ad utilizzare la seguente sintassi associata alla Window.

FocusManager.FocusedElement: bind from "focus"

Utilizziamo la keyword bind seguita da from, che ci permette di cambiare il Source dell’oggetto verso il quale stiamo effettuando il binding. La stringa successiva “focus” rappresenta il nome del controllo. Lo XAML generato dal codice Ammy qui sopra è il seguente:

<FocusManager.FocusedElement>
    <Binding ElementName="focus"/>
</FocusManager.FocusedElement>

Sostanzialmente, quando utilizziamo la sintassi bind from seguito da una stringa tra virgolette, questa stringa viene considerata come ElementName, quindi il Source diventerà un controllo WPF.

Da adesso in poi, quando la Window verrà renderizzata sullo schermo, WPF assegnerà il focus automaticamente al controllo PasswordBox: l’utente potrà premere Invio e fare login.

Beh, cosa posso indicare dopo il “from” ?

Ammy permette di scrivere binding di questo tipo:

• bind Username from $viewmodel (comportamento predefinito, al punto che è possibile omettere from $viewmodel)
• bind XYZ from $this, equivalente a RelativeSource={RelativeSource Self}
• bind from $resource XYZ, equivalente a Source={StaticResource XYZ}

Per maggiori dettagli fate riferimento al sito ufficiale di Ammy.

Happy coding!

Send to Kindle

Come ho raccontato nel mio ultimo post dedicato a questa serie, preferisco continuare a raccontarvi il linguaggio Ammy usando un progetto il più possibile reale, motivo per cui ho creato questo repository sull’account GitHub di Brain-Sys, che potete tranquillamente clonarvi sul vostro PC:

https://github.com/Brain-Sys/FsxLogger.Client

Allo stato attuale, la solution che vi ritroverete sul PC è così composta:

Tralasciamo per ora lo scopo preciso della nostra applicazione WPF. I progetti sono quattro:

• FsxLogger.Client : l’applicazione WPF sviluppata con Ammy
• FsxLogger.ViewModels.Portable : una serie di viewmodel implementati in PCL
• FsxLogger.ViewModels.Wpf : una serie di viewmodel che ereditano da quelli PCL, ma si specializzano per il mondo WPF
• FsxLogger.ViewModels.Message : messaggi da utilizzare per far comunicare viewmodel con l’applicazione WPF, utilizzando la classe Messenger di MvvmLightLibs

Detto questo, parto dal presupposto che conosciate WPF, C#, MVVM, il motore di binding di WPF, e la solita serie di nozioni che è necessario avere. Andiamo per gradi.

Prima di partire in quarta…qualche nozione introduttiva
La nostra applicazione WPF ha una finestra di Login per l’autenticazione, che ovviamente è la prima che compare quando l’applicazione parte. Essa si chiama, con molta fantasia, LoginWindow.ammy. E’ questa la prima finestra che andremo a sviluppare. Il corrispondente viewmodel si chiama LoginViewModel, e si trova nell’assembly PCL.

Importare un namespace
La prima necessità che abbiamo è quella di importare un namespace in linguaggio Ammy, esattamente come faremmo con lo XAML, né più né meno. La sintassi è molto semplice, perchè basta utilizzare la keyword using, che è la stessa che useremmo con C#. Dopo aver aggiunto le reference (dal progetto FsxLogger.Client ho aggiunte le reference agli altri 3, per capirci), possiamo prendere un file .ammy ed all’inizio dichiarare il namespace in questo modo:

using FsxLogger.ViewModels.Portable

Resources: [
    LoginViewModel Key="vm" { }
]

Questa è la sintassi da utilizzare. La proprietà Resources delle Windows è di tipo ResourceCollection, quindi può contenere ovviamente più oggetti, motivo per il quale abbiamo dovuto usare le parentesi [ e ], come in JSON, per indicare un array di oggetti. All’interno ho inserito la classe LoginViewModel (notare: senza usare alcun prefisso come invece accadrebbe in XAML), assegnando una Key “vm”. Fatto.

Passo successivo è quello di assegnare la proprietà DataContext ad un controllo (la finestra? il controllo più esterno del visual tree?) per far propagare il viewmodel per tutta la view.

Nel mio caso, ho impostato DataContext sulla Grid a linea 14.

Grid
    {
        DataContext: resource "vm",
        #TwoColumns(120), #ThreeRows("Auto", "Auto"),
        Margin: "8"
    }

Il codice che vedete qui è semplificato rispetto a ciò che vedete su GitHub. Notare l’utilizzo della keyword Ammy resource, equivalente alla StaticResource di XAML, ma lievemente più compatta.

Come accade con lo XAML, il DataContext fa propagare la classe di viewmodel per tutto il visual tree della nostra UI. Grazie a questo meccanismo, da qui in avanti potremo fare binding sui controlli e rendere il tutto funzionante. Ma questo è argomento dei prossimi post.

Prima di chiudere, due note importanti

Ricordiamoci sempre che compito di Ammy è quello di generare l’equivalente codice XAML. Ciò significa che mentre noi lavoriamo sulla view LoginWindow.ammy, da qualche parte esiste un altro file LoginWindow con estensione XAML. Dove si trova? E’ semplice: nel solution explorer attivate l’opzione “Show All Files”, così cominciate a vedere anche quelli nascosti. Eccolo lì, l’avete trovato!!!

E’ molto comodo perchè questo file XAML è autogenerato dal codice Ammy, e quindi potete man mano verificare che tutto funzioni regolarmente.

E perchè, allora, usare Ammy? Lo ripeto: perchè è estremamente più compatto, perchè ci sono mixin ed alias (utilissimi), perchè fare binding con la sintassi XAML è più veloce e parlante (Intellisense permettendo), per i bellissimi inline binding converter, che sono meravigliosi.

La seconda ed ultima cosa che vi voglio far notare è che Ammy non si lamenta se per sbaglio specificate due volte la stessa proprietà sullo stesso controllo, cosa che invece XAML fa. Mi spiego meglio; guardate questo stralcio di codice:

Window "FsxLogger.Client.LoginWindow"
    {
    Width: 320, Height: 240, Width: 320, Height: 240
    WindowStartupLocation: CenterScreen,
    WindowStyle: ToolWindow, Title: "Login"
    FocusManager.FocusedElement: bind from "focus"
    }

Ho ripetuto Width e Height della Window due volte, volutamente, per sbaglio. Ammy non si lamenta. XAML lo farebbe, invece. Andate a dare un’occhiata al codice XAML generato. Ammy fa una cosa molto semplice: evita di duplicare quelle proprietà, esattamente come dovrebbe fare.

Il codice compila, l’applicazione parte, noi siamo felici.

Alla prossima! Happy coding!

Send to Kindle

Quando in un progetto WPF installate tramite NuGet la libreria Ammy, nel progetto vi ritrovate anche un file lib.ammy. Cosa contiene? A cosa serve?

Il file lib.ammy contiene tantissime funzioni utilissime e pronte all’uso.
Tali funzioni in linguaggio Ammy sono divise in due tipologie:

• Mixin
• Alias

Il file lib.ammy è liberamente modificabile, e quindi possiamo aggiungere nostri mixin o alias, oltre che ovviamente modificare o migliorare quelli esistenti.

Utilizzare i mixin
Concettualmente parlando, un mixin assomiglia ad un tradizionale stile di WPF. Un mixin si applica ad un controllo WPF – come uno stile – e restituisce un set di proprietà ben definito. Ad esempio:

mixin Header() for TextBlock {
    FontWeight: Bold,
    FontSize: 36,
    Foreground: DarkGray
}

Window "StudyAmmy.StartWindow" {
    StackPanel { Orientation: Horizontal,
    Children: [
        TextBlock { Text: "some text", #Header() }
    ] }
}

Nel momento in cui si inserisce un controllo per cui esiste un mixin, esso diventa disponibile nell’Intellisense. Quindi, inseriamo una TextBlock, valorizziamo la proprietà Text e poi richiamiamo il mixin che ci interessa con la sintassi #Header(). Il mixin inietta le sue proprietà all’interno del JSON. Notare la sintassi con le parentesi () che ricorda il fatto che stiamo chiamando una funzione.

Sembra uno stile, vero? Peccato che i mixin siano decisamente più potenti rispetto ad uno Style di WPF, banalmente perchè si possono applicare anche su quelle proprietà che uno Style non raggiunge.

Ad esempio:

mixin TwoColumns (one = "*", two = "*") for Grid {
  combine ColumnDefinitions: [
    ColumnDefinition { Width: $one }
    ColumnDefinition { Width: $two }
  ]
}

Questo mixin chiamato TwoColumns, che fa parte di quelli definiti nel file lib.ammy, permette di definire velocemente una Grid con due sole colonne:

Ad esempio, si potrebbe scrivere questo codice:

Grid
    {
        #TwoColumns("*", "2*"),
        
        Background: LightGray,
        Margin: 4,
        ShowGridLines: true,
        TextBlock { Grid.Column: 0, Text: "1° colonna",
            FontSize: 24, Margin: 4 },
        TextBlock { Grid.Column: 1, Text: "2° colonna",
            FontSize: 24, Margin: 4 }
    }

Per ottenere una UI di questo tipo:

Notare che i mixin possono avere parametri in input. Il mixin Header non ne aveva, mentre TwoColumns ne aveva due, grazie ai quali è possibile specificare la larghezza delle due colonne. I parametri possono avere valori predefiniti, come è possibile fare con C#.

Ricordiamoci che per richiamare un mixin è necessario utilizzare il carattere #.

Se stiamo scrivendo un mixin e vogliamo utilizzare uno dei parametri in input dobbiamo usare $.

Utilizzare gli alias

Scopo degli alias è quello di generare un oggetto, come un controllo, ma in generale un qualsiasi oggetto inseribile con lo XAML. Mentre un mixin ha un nome, si collega ad un controllo e produce in output un set di proprietà, compito dell’alias è quello di produrre in output un oggetto vero e proprio. Per esempio:

alias ButtonWithPadding(text, padding) {
  Button { Content: $text, Padding: $padding }
}

Questo blocco Ammy definisce un alias che, quando chiamato, produrrà in output un controllo Button. L’alias ha due parametri di input – text e padding – che vi permetterà di inserire nella UI un button con quelle caratteristiche, in modo molto più compatto rispetto a quello che avremmo dovuto fare con XAML o senza usare l’alias.

Se leggete il file lib.ammy, troverete un gran numero di alias pronti all’uso, molto compatti, relativi per esempio a Trigger ed animazioni. Ad esempio, questo è molto interessante:

alias DoubleAnimation(
    property,
    frm = "0",
    to = "1",
    duration = "0:0:1",
    targetName=none,
    beginTime=none) {
  DoubleAnimation {
    Storyboard.TargetProperty: $property
    Storyboard.TargetName: $targetName
    From: $frm
    To: $to
    Duration: $duration
    BeginTime: $beginTime
  }
}

Ho calcato la mano con qualche “a capo” per rendere il codice più leggibile. Con una sola chiamata a questo alias, possiamo inserire una DoubleAnimation, passando in input il nome della proprietà, il valore iniziale e finale, la durata, etc. In modo estremamente compatto.

Sviluppiamo un progetto vero con MVVM?

Smettiamola di parlare di Ammy solo dal punto di vista puramente teorico. Dalla prossima volta implementeremo qualcosa con WPF e Mvvm, il pattern architetturale più adatto quando ci troviamo in un mondo basato su XAML. Vedremo come fare binding e come sfruttare le feature più interessanti di Ammy per essere più produttivi.

Happy coding!

Send to Kindle

Come ho già venuto modo di dire in passato, CharMapMe è un’applicazione desktop finita sul Windows Store sotto forma di Universal Windows Platform. Come è avvenuto questo passaggio?

Tralasciamo i passaggi tecnologici, perchè sono ampiamente descritti in questo post sul blog di MSDN Italia. Ci tengo a raccontare alcune cose dietro le quinte, magari qualcosa che nessuno vi racconta. Innanzitutto, un normale account developer non ha i permessi per poter completare la submission di un package UWP: questo significa che quando entrate nella vostra dashboard ed inviate il package (file .appx), al termine dell’upload vi ritroverete con questo messaggio di errore.

Ho nascosto alcune informazioni sensibili. Il messaggio di errore più importante è il primo in elenco, ovvero: Package acceptance validation error: You need to accept the Centennial Early Adopter Program Addendum before you can submit this app. Se il vostro account developer non è stato ancora sbloccato, cliccare sul link non serve a nulla, perchè vi viene proposta una pagina completamente bianca, con un misero tasto Back per tornare indietro.

Come si procede, quindi? Dovete essere in contatto con un ingegnere Microsoft, al quale inviate il vostro .appx e prova l’installazione della vostra applicazione trasformata in UWP. Come glielo inviate? Nel mio caso, è stato attivata una piattaforma web di condivisione cifrata e protetta, dove ho potuto uploadare il file .appx. Se tutto va bene al primo colpo, come è successo a me, il flusso di lavoro si chiude piuttosto velocemente: l’ingegnere Microsoft approva l’app e sblocca il vostro account developer. A questo punto potete leggere, accettare il Centennial Early Adopter Program Addendum e procedere al completamento della submission come fareste di solito.

Aggiungo qualche nota per essere più esaustivo.

1. Una volta che l’app è stata approvata secondo la procedura descritta qui sopra, diventa una normale app UWP. Questo significa che potete aggiornarla sullo Store in completa libertà, senza più necessità di intervento da parte dell’ingegnere Microsoft con cui avete lavorato all’inizio
2. Nel mio caso, quindi, CharMapMe è stata certificata ed approvata, e si trova sul Windows Store. Posso aggiornarla autonomamente. Se un domani volessi convertire un’altra applicazione in UWP tramite il Desktop App Converter, dovrò richiedere nuovamente l’intervento di Microsoft per far approvare questa seconda applicazione
3. Lo sblocco avviene a livello di account developer. Questo significa che quando tenterete l’invio di un package relativamente ad un’app successiva alla prima, non verrete più bloccati come mostrato nella prima immagine di questo post. Il package verrà accettato e potrete completare la submission, perchè il vostro account è stato sbloccato. Ma poi l’app verrà inesorabilmente bocciata, perchè – come dicevo al punto 2 – dovete chiedere l’intervento di Microsoft per ogni applicazione
4. Da tutto ciò, si deduce che tutte le app convertire in UWP tramite il Desktop App Converter passano attraverso un processo di certificazione manuale

Direi che è tutto!

Send to Kindle

Per chi mi legge, se benissimo che lavoro tantissimo nel mondo delle applicazioni desktop, quindi ho a che fare principalmente con lo XAML, sia per quanto riguarda WPF che UWP. Quando ho sentito parlare di Ammy, quindi, mi sono interessato, ma la domanda successiva è stata:

La risposta è tranquillizzante, perchè in un progetto WPF è possibile utilizzare XAML ed Ammy, senza alcun problema. In un progetto WPF, quindi, possiamo avere delle Window/Page create con XAML, ed altre con Ammy XAML ovviamente non lo butti via, semplicemente è possibile dare un’occhiata ad Ammy e vedere se fa al caso nostro. Questo mi ha tranquillizzato, perchè questo significa in parole povere che posso integrare Ammy nei miei progetti esistenti, e sfruttarne le caratteristiche peculiari che per certi versi lo rendono più potenti rispetto allo XAML.

Quali sono queste caratteristiche?

Scriverò un po’ di posto su Ammy, perciò se siete interessati seguitemi e non ve ne pentirete.

Primi passi con Visual Studio
La prima cosa da fare è scaricare dal Marketplace di Visual Studio l’extension per il supporto ad Ammy. Da questo link scaricate il file Ammy.VisualStudio.vsix, di circa 59Kb, che aggiungerà alcuni Item Template molto molto comodi per lavorare con Ammy. Ne parleremo fra poco.

La seconda cosa da fare è creare un progetto WPF. Ammy, ad oggi, si applica solo ed esclusivamente su questo tipo di progetti. Quindi apriamo Visual Studio 2015, creiamo un progetto WPF e poi utilizziamo NuGet per recuperare il pacchetto Ammy.Lo possiamo fare attraverso la Package Manager Console oppure tramite la voce Manage NuGet Packages del nodo References. Decidete voi qual è la strada che preferite.

Qui sopra vedete la Package Manager Console, mentre qui sotto NuGet.

Fatto questo, possiamo provare a scrivere la nostra prima Window con Ammy.

Aggiunta di una Window nel progetto
Andiamo nella solita dialog “Add new Item” di Visual Studio. L’extension per Visual Studio ci ha installato 4 Item Template, che si trovano nel nodo “Visual C#”; per trovarli più facilmente, vi suggerisco di impostare l’ordinamento “Name Ascending”, oppure di fare una ricerca con “Ammy” nella casella in alto a destra. Fatto questo…

…troverete quattro Item Template: Ammy Application, Ammy Mixins, Ammy User Control ed infine Ammy Window. Selezioniamo quest’ultimo, poi diamo un nome, per esempio “StartWindow.ammy”.

Fatto. Notare che, come dicevo prima, il nostro progetto ha la solita MainWindow.xaml (scritta in XAML) ed un altro file, StartWindow.ammy, che è un’altra Window, questa volta scritta in Ammy.

Se facciamo doppio-click su questo file apparirà un codice sorgente simile al JSON:

Window "StudyAmmy.StartWindow" {
}

Il codice qui sopra di fatto crea una Window di WPF. Il primo elemento root di Ammy deve avere un nome, che di fatto indica il nome della classe di code-behind. Un concetto importante di Ammy è che dietro le quinte viene sempre auto-generato del codice XAML; questa cosa è importante ed utile allo stesso tempo, perchè possiamo costantemenet verificare che il codice Ammy che abbiamo scritto produca il codice XAML che desideriamo. Mi spiego meglio: clicchiamo il pulsante Show All Files nel Solution Explorer di Visual Studio. Comparirà il file StartWindow.g.xaml, che possiamo tranquillamente aprire tramite doppio-click.

Facciamo un passettino ulteriore. Editiamo il file StartWindow.ammy in questo modo:

Window "StudyAmmy.StartWindow" {
    StackPanel { Orientation: Horizontal,
    Children: [
        TextBlock { Text: "I Love Ammy!!!" }
    ] }
}

Abbiamo creato uno StackPanel orizzontale, ed abbiamo aggiunto un unico controllo TextBlock. Notare la sintassi json-like. Notare che l’Intellisense è perfettamente funzionante. Se salviamo il file e diamo un’occhiata al file “StartWindow.g.xaml”, il codice è il seguente:

<Window x:Class="StudyAmmy.StartWindow"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:ns0="clr-namespace:AmmySidekick;assembly=AmmySidekick"
  ns0:Ammy.Register="/StudyAmmy;component/StartWindow.g.xaml">
  <StackPanel Orientation="Horizontal">
    <StackPanel.Children>
      <TextBlock Text="I Love Ammy!!!"/>
    </StackPanel.Children>
  </StackPanel>
</Window>

Nota importante. NON modificate mai lo XAML direttamente. Questo XAML viene auto-generato dal file .ammy che abbiamo visto prima. Qui la lesson-learned è che Ammy non fa nient’altro che produrre XAML al posto nostro, quindi tutto ciò che era possibile con XAML lo è anche con Ammy.

Solo che Ammy ha delle feature in più, come alias e mixin che citavo prima, che semplificano e velocizzano tantissimo il nostro lavoro.

Per concludere…

Ok, diciamo che per questa prima puntata abbiamo fatto abbastanza.

Non perdete i miei prossimi post perchè ne vedremo delle belle.

Send to Kindle

Nel post precedente ci eravamo interrotti sul più bello, ovvero sul contenuto del file batch DevOps.bat. Questo file ha un compito tanto importante quanto banale.

Ad ogni esecuzione deve produrre le cartelle per distribuire l’applicazione WPF secondo i tre modelli: WPF, Portable Zip e per il Windows Store.

Come nel post precedente, andiamo un passo alla volta ed arriveremo al risultato finale.

Primo passo: avere un folder per ciascun deploy
Le prime righe del file DevOps.bat fanno quanto segue:

@echo TASK - Remove and rebuild directories
rmdir "ClickOnce" /S /Q
rmdir "Portable" /S /Q
rmdir "Windows Store" /S /Q
mkdir "ClickOnce"
mkdir "Portable"
mkdir "Windows Store"

Abbiamo sostanzialmente a che fare con tre folder:

• ClickOnce
• Portable
• Windows Store

Direi che il nome è abbastanza esplicativo: ognuna di queste conterrà i file per ciascun deploy. I parametri del comando rmdir (ovvero /S e /Q) dicono di piallare ad ogni esecuzione tutto il contenuto delle cartelle e sottocartelle (/S), senza chiedere alcuna conferma (/Q).

Secondo passo: ClickOnce

Per generare automaticamente la cartella ClickOnce è necessario ricorrere a msbuild.

@echo TASK - ClickOnce
"C:Program Files (x86)MSBuild14.0inmsbuild.exe"
    "..CharMapMe.sln" /target:publish /p:Configuration=Release
xcopy   "..CharMapMeinReleaseapp.publish*.*"
        "ClickOnce*.*" /E /Q /Y

Il primo comando esegue msbuild.exe dicendo di compilare il file CharMapMe.sln, nella configurazione Release, generando nel contempo la pubblicazione per ClickOnce.

Il risultato di questo comando è un folder “binReleaseapp.publish” che contiene solo ed esclusivamente i file specifici di ClickOnce. Ma non mi piace che sia dentro “app.publish”. Motivo per cui il secondo comando utilizza xcopy per copiare i file all’interno del folder “ClickOnce”.

E difatti, eccoli qua. E’ sufficiente prendere questa cartella ed inviarla via FTP per distribuire a tutti gli effetti l’ultima versione dell’applicazione.

Missione compiuta.

Terzo passo: Portable zip

Possiamo passare alla generazione del file zip per il download Portable.

I comandi contenuti nel file DevOps.bat sono i seguenti:

@echo TASK - Portable
xcopy "....CharMapMeinRelease*.*" "..Portable"
cd "..Portable"
del "*.pdb"
del "*.application"
del "*.config"
del "*vshost*"
del "*.manifest"
"..7z" a -tzip "CharMapMe.zip" -sdel -r *.*

Poi utilizzo 7z.exe (ricordate il post precedente? si trovava nella cartella Deploy) per creare al volo uno zip con tutti i file. Il parametro “-sdel” dice di rimuovere i file dopo la creazione del file zip. Il parametro “-r” dice di includere anche i file in eventuali sottocartelle, ma non è il nostro caso.

Fatto questo, nella cartella “Portable” ottengo il file “CharMapMe.zip”, pronto da mettere online.

Quarto passo: Windows Store

Il terzo modello di deploy prevede la distribuzione sul Windows Store.

La prima parte di comandi necessari sono i seguenti:

@echo TASK - Windows Store
xcopy "..CharMapMeinRelease*.*" "Windows Store"
xcopy "Support*.*" "Windows Store*.*" /Q /Y
cd "Windows Store"
del "*.pdb"
del "*.application"
del "*.config"
del "*vshost*"
del "*.manifest"

A cosa serve la cartella “Support”? Essa contiene 4 file.

• AppxManifest.xml : è il file di manifest per l’applicazione UWP
• *.png : sono 3 tile in diverse dimensioni per creare il package UWP

E’ un po’ OT, in questo post, raccontare esattamente nel dettaglio questo passaggio. Facciamola breve: per distribuire un’app UWP ci vuole necessariamente un file di manifest. Sempre, in ogni caso. Ma CharMapMe NON è nata come app UWP, quindi il file di manifest l’ho dovuto creare da zero, con il blocco note. Idem le immagini per avere le tile. Per maggiori informazioni su questo particolare aspetto vi consiglio di leggere questo post sul blog di MSDN Italia.

Ok, fino a questo punto ci siamo. Nella cartella “Windows Store” ci sono i file necessari per creare il package: tutti quelli contenuti in “binRelease” + file di manifest + 3 immagini per le tile. Possiamo generare il file di package vero e proprio.

"C:Program Files (x86)Windows Kits10inx64makeappx.exe"
    pack -d . -p "CharMapMe_nosigned.appx"

Eseguo il tool makeappx.exe, dicendo di prendere la cartella corrente, e di generare il file “CharMapMe_nosigned.appx”.

Poi mi duplico il file con il nome “CharMapMe_signed.appx”

copy "CharMapMe_nosigned.appx" "CharMapMe_signed.appx" /Y

SignTool sign /fd SHA256 /a /f
    ..VivendoByte.pfx /p 123456
    CharMapMe_signed.appx

Infine, giusto per fare un lavoro pulito, cancello tutti i file nel folder “Windows Store” che non hanno l’estensione .appx. Così facendo, ottengo una bella cartella pulita con solo i due file package.

for /f %%F in ('dir /b /a-d ^| findstr /vile ".appx"') do del "%%F"

Per ottenere quindi una cosa simile:

Conclusioni

Beh, missione compiuta! Ci sarebbe molto altro da dire o da raccontare, per esempio:

• Posso mettere DevOps.bat nelle “post build events” di Visual Studio?
• Perchè non effettuare davvero il deploy in produzione, facendo l’upload dei file nel posto giusto? Ad eccezione del deploy del Windows Store, perchè quest’ultimo ad oggi passa ancora attraverso una procedura manuale di submission
• Eseguire “DevOps.bat > DevOps.log” permette di ottenere il log dell’ultima esecuzione, il che può sempre fare comodo

Lascio le porte aperte ad ulteriori sviluppi.

Send to Kindle

Mi piacerebbe dedicare qualche post a descrivervi come ho deciso di organizzare il deploy di una piccola e normalissima applicazione desktop implementata in WPF. Penso che la conoscerete, perchè si tratta di CharMapMe, l’applicazione di cui ho già parlato qualche giorno fa. Il caso secondo me è interessante, perchè l’app non è complessa, e mira al cuore di un problema ben preciso, che si può riassumere velocemente con la seguente domanda.

Quanto è complesso ottenere in modo automatizzato i file corretti da distribuire nel caso di deploy tramite ClickOnce, Portable e magari Windows Store?

Ok, andiamo con calma.

Introduzione
CharMapMe sorge dalle ceneri di Show Cars, come vi ho raccontato qui. Vale a dire, quindi, che è un piccolo tool per sviluppatori (ma non solo) nato diversi anni fa, ritagliando tempo libero qua e là e risolvendo un problema che mi affliggeva, ovvero sfogliare tutti i font possibili ed immaginabili alla ricerca di simboli da inserire nelle mie view XAML. Utilizzare charmap, quello predefinito di Windows, è davvero impossibile, non sto qui a raccontare il perchè.

CharMapMe, quindi, è una normale applicazione WPF, puramente desktop, composta dai seguenti file:

Un eseguibile ed un po’ di dipendenze esterne. Nulla di che, estremamente banale.

Ho deciso sin da subito di distribuire CharMapMe sicuramente attraverso ClickOnce dal sito ufficiale https://charmapme.azurewebsites.net. E poi di distribuirla attraverso un file zip, in modalità portable, così eventualmente uno si mette l’applicazione dove più gli pare e piace, su una chiavetta USB o da altre parti. ClickOnce dà il vantaggio degli auto-aggiornamenti, ma anche la modalità portable è comoda e perfettamente legittima.

Ho voluto anche distribuirla attraverso il Windows Store, quindi trasformarla in Universal Windows Platform. Avevo due scelte: o la riscrivevo daccapo oppure utilizzavo Centennial, alias Desktop Bridge, per convertirla più velocemente. Ho optato per questa seconda scelta, più veloce e meno invasiva per il mio cervello (LOL). Sì, nei prossimi giorni vi racconterò anche qualcosa su questa esperienza, non tanto dal punto di vista tecnico, quanto piuttosto per descrivervi esattamente cosa accade, perchè non è un processo totalmente automatico.

Quindi, per riassumere…
Voglio distribuire CharMapMe attraverso ClickOnce, uno zip ed il Windows Store.

Di per sè, non è affatto complicato ottenere i package per ciascuna distribuzione.
ClickOnce è in pratica un wizard integrato dentro Visual Studio; dopo averlo configurato la prima volta, sono sufficienti 2-3 click per ottenere i file da uploadare sul sito via FTP.
Ottenere uno zip è pressoché banale: si copiano i file in Bin/Release in un folder dedicato, si cancellano i file non necessari (stando bene attenti), si zippano ed il gioco è fatto.
Ottenere il file .appx è più complesso, ma per ora sorvoliamo.

Ma la questione è: posso automatizzare tutto?
Certo che sì. Andiamo gradualmente. Questa è la struttura di cartelle che compongono CharMapMe, così come vengono scaricate dal TFS su cui sono memorizzati i sorgenti. CharMapMe, perdonatemi, non è (ancora?) open-source.

C’è il file di solution CharMapMe.sln, c’è il folder “packages” di NuGet, e poi c’è un folder per ciascuno dei progetti (CharMapMe è l’applicazione client WPF vera e propria, tutti gli altri sono assembly di supporto e di dipendenza).

Ho creato una cartella “Deploy” prima per avere un punto preciso dove finiranno i tre differenti deploy che mi interessa gestire. Vediamo cosa contiene.

Elenco e descrivo i file uno ad uno.

• 7z.exe : è il comando appartenente a 7-Zip per zippare i file (mi serve per creare la distribuzione in modalità Portable)
• DevOps.bat : è il cuore del sistema, ne parleremo nei prossimi post
• DevOps.log : log generato automaticamente dall’ultima esecuzione di DevOps.bat
• VivendoByte.* : certificati digitali per gestire e testare il package Windows Store

Ok, il sistema è pronto.

DevOps.bat è il file batch che si occuperà di generare i tre deploy, invocato on-demand oppure come post build events da Visual Studio.

Ne parleremo con calma nei prossimi post.

Send to Kindle

L’altra notte, complice un po’ di insonnia e tensione, non riuscivo a dormire. Mi sono svegliato ed ho cominciato a sfogliare dal telefono la mia timeline di Twitter.

Fino a quando trovo questo:

Un certo Miguel da Icaza mi porta a conoscenza dell’esistenza di Ammy. Di cosa si tratta? Lo riassumo in qualche punto per chiarire le idee:

• il sito di riferimento è il seguente: https://www.ammyui.com/
• è un linguaggio json-like da utilizzare al posto dello XAML per descrivere la UI
• è un package da scaricare via NuGet: solo 59Kb
• rispetto a XAML presenta dei vantaggi: è più compatto (ma va?), supporta nativamente la capacità di modificare a run-time la Window o la Page, implementa il concetto di mixin, l’Intellisense nei file .ammy in Visual Studio funziona a meraviglia
• ci sono anche svantaggi: essendo json, non è possibile in questo momento collassare/espandere porzioni di view, tecnica che io utilizzo molto per nascondere parti di Window o di Page che non mi interessano in quel momento. Al momento supporta solamente WPF e non UWP. Non ho ancora utilizzato Ammy in produzione (è uscito il 22/12/2016), quindi non ho esperienze dirette

Ad esempio, una porzione di XAML come questa:

   1: <StackPanel>

   2:     <TextBlock Text="A story to tell" />

   3:     <TextBlock Text="{Binding Story}" Style="{StaticResource StoryStyle}" />

   4: </StackPanel>

Diventa il seguente blocco Ammy:

   1: StackPanel {

   2:     TextBlock { "A story to tell" }

   3:     TextBlock {

   4:         Text: bind Story

   5:         Style: resource "StoryStyle"

   6:     }

   7: }

Più compatto, è vero, ma Ammy supporta delle feature davvero molto interessanti, come il poter definire una sorta di “funzione” (mixin) da richiamare dove serve per generare controlli più o meno complessi. Ammy è da provare senz’altro, tanto più che è possibile mischiare tranquillamente view implementate in XAML con altre in Ammy. Le view implementate in Ammy sono salvate in file con estensione .ammy, che all’atto della compilazione vengono tradotte e convertite in XAML. Il team di sviluppo afferma che qualsiasi cosa fattibile con XAML è fattibile anche con Ammy.

CharMapMe 1.2 supporta già adesso Ammy!

Ho subito adattato il mio CharMapMe affinchè possa generare Label, TextBlock e TextBox in linguaggio Ammy. La versione 1.2 è già online, pronta per essere installata via ClickOnce.

Ho scritto al team di sviluppo di Ammy, giusto per metterli al corrente del mio tool, mi hanno risposto entusiasti ed hanno capito il valore di CharMapMe.

Send to Kindle