della mia vita e di altre amenità

Al Rifugio Alpino Dino e Giovanni Chiggiato (mt 1911) segnavia 261 da località “La Stua” di Calalzo di Cadore

Wed, 07 Jun 2017 23:45:04 +0200

Lo scorso anno verso fine estate qualcuno mi ha chiesto di pubblicare gli itinerari che avevo percorso nelle precedenti settimane attraverso le montagne del Cadore, della Val Zoldana e della Val Pusteria. Complici la ripresa delle attività invernali, e vari impegni, alla fine non ho più fatto nulla e questi piacevoli camminate sono cadute un po’ nell’oblio, rimanendo poco più di un bel ricordo nella mia testa. Quest’anno, mentre si avvicina la data ufficiale della riapertura estiva dei rifugi, ho deciso di provare ad impegnarmi a parlarvi più dettagliatamente di queste mie scorribande tra cengie e bivacchi, pubblicando assieme ai dettagli di ogni escursione anche qualche foto e le mie impressioni. Sabato 3 Giugno ho deciso di affrontare la salita ad un rifugio che tipicamente è già in attività quando gli altri ancora non hanno aperto la stagione, tanto è vero che anche nel periodo primaverile, in occasione di alcuni weekend il rifugio apre i battenti e offre l’occasione di raggiungerlo magari muniti di ciaspe e assaporare le piacevoli pietanze preparate dalla moglie del gestore.

Il Rifugio Alpino Dino e Giovanni Chiggiato, si trova nella parte iniziale del Cadore, poco lontano da Calazo di Cadore, per chi proviene dalla pianura e questo è un vantaggio indiscutibile rispetto ai più blasonati rifugi dolomitici perchè è possibile raggiungerlo in giornata, anche nei giorni di maggiore frequenza, senza rischiare di fare ore e ore di coda al rientro, dato che è molto meno distante da Longarone e dall’autostrada rispetto a molti altri. Tuttavia aspettatevi comunque un po’ di coda se lo raggiungete nelle giornate più critiche come la Domenica. Quest’anno l’ho scelto come “apripista”, un po per allenare il fiato, un po’ perchè dopo averlo visitato l’anno scorso mi è rimasto impresso per la bellezza del paesaggio nel quale è collocato oltre che per la cura con cui il gestore ne conserva la struttura (Premiato nel 2015 come miglior Rifugio del Cadore). Negli anni scorsi lo avevo sempre un po’ snobbato per un errore di valutazione, complice l’altitudine non troppo elevata (1911 m.s.l.m) e il fatto che sia pubblicizzato da cartelloni all’uscita dell’autostrada, avevo erroneamente pensato si trattasse di un luogo eccessivamente frequentato dal peggiore turismo, ma in realtà ho scoperto in esso un punto da raggiungere spesso per passare una giornata immersi nella tranquillità ricavata tra alcune delle più belle cime delle Dolomiti.

Quest’anno ho scelto la salita più classica, il sentiero che parte dalla località “La Stua” (segnavia 261) e risale la montagna con una pendenza pressoche invariata dall’inizio alla fine. In effetti trattandosi del sentiero più battutto, costituito in gran parte da una stretta stradina ben segnata e curata – diversamente dai sentieri dei rifugi più importanti che spesso sono irti e costellati da continui sassi e radici che ostacolano il passo – si può essere portati a pensare che sia facile. In realtà, le 2 ore nominali di questo percorso si rivelano un impegno atletico “importante” dato che il sentiero non vi darà tregua, richiedendovi minuto dopo minuto di attingere a tutta l’energia che avete nelle vostre gambe per arrivare alla agognata destinazione.

La partenza del sentiero è situata in località “La Stua”, raggiungibile in macchina, mantenendo la destra dopo il ponticello che si trova poco dopo la Chiesetta del Caravaggio in direzione “Praciadelan” a Calalzo di Cadore (BL). Occorre fare un po’ di attenzione perchè dopo il ponte vi si presenta una casa nel bel mezzo del bivio ma la strada che dovrete imboccare, ad un occhio poco esperto, può apparire come il viottolo che conduce al retro. Invece, superata la casa vi troverete su una stretta stradina asfaltata ma piuttosto dissestata che sale per circa 2 km in mezzo alla montagna, a ridosso del torrente. Molta attenzione dovranno porla quelli che sono dotati di una vettura bassa perchè le frequenti buche li porteranno spesso a “grattare” se non procederanno con cautela. Al termine, si arriva in un piccolo parcheggio che può ospitare almeno una decina di vetture e indossati degli adeguati scarponi e uno zainetto con un kit precauzionale da montagna si inizia la salita sulla restante parte della strada asfaltata inaccessibile alle vetture.

La strada assume quasi immediatamente una pendenza costante che la caratterizzerà per tutto il tortuoso percorso, aumentando gradualmente anche per effetto della stanchezza che mano a mano si accumula. Dopo aver abbandonato l’asfalto il sentiero si tramuta in una pastorale piuttosto larga e segnata dagli alti alberi che la tengono costantemente in ombra. Se la giornata non è delle più calde sarà opportuno indossare un golfino leggero per proteggersi dall’umidità del bosco. Mano a mano che si sale, si incontrano numerose deviazioni dal sentiero principale, alcune di queste sono poco più che scorciatoie che usualmente consiglio di evitare perchè, pur sembrando un’ottima idea a prima vista, alla fine logorano le nostre energie molto più velocemente del percorso più lungo ma più dolce. Il sentiero è sempre e costantemente segnato da numerosi segni rossi e bianchi, alcuni riportanti il numero 261 ben evidente. E’ davvero impossibile perdersi, anche grazie a una buona quantità - quasi eccessiva - di indicazioni per il rifugio, giustficate dal fatto che nel periodo invernale segnano il sentiero dedicato alle ciaspole. Vista l’altitudine non eccessiva, la vegetazione rimane sempre molto rigogliosa garantendo una frescura per tutto il percorso e aprendosi solo per un breve tratto quando si giunge a circa venti minuti dal rifugio. In questo tratto finale i più fortunati potranno ammirare un buon numero di camosci intenti a brucare in un pendio scosceso poco distante dal sentiero. Sarete facilmente attirati dal rumore legnoso che rompe il silenzio quando le corna dei maschi si incrociano in brevi scambi incruenti. Continuando a camminare sulla salita che oramai è alla sua più impegnativa pendenza finalmente si intravvederà la bandiera che segna il punto più alto in prossimità del fabbricato in pietra corrisponente al rifugio. Questo in effetti è il primo punto che si raggiunge quando la vegetazione lascia spazio allo sguardo e, prima ancora di notare il rifugio una cinquantina di metri più sotto, sarete sicuramente rapiti dal panorama fantastico che include sulla sinistra gli Spalti di toro, più al centro l’Antelao e infine le Marmarole, in una parata che trova validi rivali sono in alcuno dei più alti e impegnativi rifugio dell’alto Cadore e del Tirolo del Sud.

Questo punto, dotato di due tronchi di legno trasformati in panchine è di certo uno dei migliori per fermarsi prima di raggiungere il rifugio, e il prato molto ampio vi consentirà anche di godere il meritato riposo sentendo il sole di montagna scaldarvi la pelle mentre il profumo dell’erba vi rilassa le narici. Poi, dopo aver ammirato a lungo il panorama punteggiato nel basso dalla città di Calalzo e da un ampio scorcio del lago Centro Cadore, è d’obbligo recarsi al rifugio e godere delle ottime pietanze che le sapienti mani della cuoca sapranno confezionare. Potrete gustarle nella tettoia all’esterno oppure in una bellissima sala da pranzo dotata di tavoli e rivestimento in accogliente legno.

Cerco sempre di protrarre a lungo la mia permanenza in questo luogo meraviglioso, magari leggendo un libro o chiacchierando mentre sorseggio una birra. Tuttavia alla fine giunge il momento di tornare. al ritorno il sentiero è nuovamente impegnativo perchè la sua pendenza insiste sulle ginocchia senza troppa pietà, ma la discesa è molto più breve e agevole della salita, e se non fosse per la pioggerella che stavolta ha bagnato l’ultimo quarto d’ora, la giornata si sarebbe potuta dire ampiamente perfetta. Ora è il momento di pensare alla prossima escursione… mi attente il Rifugio Tita Barba fra un paio di settimane all’apertura ufficiale della stagione.

Informazioni

Destinazione: Rifugio Alpino Dino e Giovanni Chiggiato (CAI Venezia)
Data escursione: Sabato 3 Giugno 2017
Posizione: Marmarole Centrali (mappa)
Durata: poco più di 2 ore per gambe allenate, fino a 2:45 per i meno preparati.
Apertura: Continuata da metà Giugno a fine Settembre e nei weekend di bel tempo per il resto.
Difficoltà: Facile il percorso ben segnato ma richiede buona resistenza fisica e costanza nel passo.
Sentiero: 261 da Località La Stua (Calalzo di Cadore – BL)
Sito web: http://www.rifugiochiggiato.it/
Telefono: +39.329.0757808 - +39.346.1817182
Email: info@rifugiochiggiato.it

Nella foto il simpatico cane del gestore mentre custodisce la mia birra…

Non c'è pace senza giustizia...

Thu, 24 Mar 2016 00:45:00 +0200

Vi hanno mai detto che "violenza genera violenza"? Pensateci voi che esprimete violenza su Facebook, che condividete e fate vostro, il pensiero violento di un tiranno come Putin. Pensateci voi che magari siete stati cresciuti nell'insegnamento cristiano del "porgi l'altra guancia", senza comprenderne il significato.

Io negli atti di Bruxelles, nelle violenze terroriste, leggo l'invidia. L'invidia per un sistema tutto sommato civile che tutela - entro i limiti dell'umana fallibilità - l'essere umano ed i suoi diritti, contrapposto alla povertà, all'ingiustizia e alla sofferenza che vivono certi popoli.

Questo dovremmo avere sempre a mente e questo dovrebbe rivelarci chiara la strada per porre fine al terrorismo, alle violenza, alla guerra. "Non c'è pace senza giustizia, non c'è giustizia senza il perdono" ha detto Karol Wojtyla, il Papa di cui molti hanno richiesto la santificazione ma di cui tutti scordano gli insegnamenti...

E oggi è il momento di essere forti nel perdonare, forti nel ristabilire la giustizia e soprattutto forti nel riconoscere i propri peccati... i peccati di una società, la nostra, che assorbe la ricchezza del mondo anzichè distribuirla, una società che è, essa stessa, alla base dell'ingiustizia che assieme all'ignoranza è terreno fertile per atti di violenza.

Non sono bombe quelle che voglio vedere sganciate sui cittadini inermi, sugli sfortunati che sono esclusi dal benessere della civiltà occidentale... Per una volta, invece che riversare esplosivi, sganciamo ricchezza, istruzione, benessere e cultura. Accogliamo queste popolazioni, facciamo loro vedere la nostra cultura, le arti, le scienze e ascoltiamo le loro... diamogli le opportunità che abbiamo noi, rischiando così anche di perdere una parte delle nostre prerogative. Ne uscirà una eguaglianza sociale, una amalgama di usi e costumi che ci renderà finalmente un solo popolo sulla terra. Noi occidentali, noi europei, noi fortunati, non siamo per forza dalla parte giusta!

Facciamo giustizia... la pace verrà...

Pere al cioccolato

Fri, 18 Mar 2016 13:30:00 +0200

Pere al cioccolato è la prima cosa che m'è venuta in mente... Quegli squisiti frutti che divoravo cogliendoli direttamente dalla pianta nelle campagne del Cilento dove eri nato.

Ma non solo... Le passeggiate a piazzale Giovanacci... il te nero con i biscotti alle quattro... le domeniche in officina Jarach & Cecconi... quando mi hai insegnato a smontare e rimontare il carburatore... il tuo orgoglio di Carabiniere e come mi misuravi perché mi avresti voluto Corazziere... l'accompagnarti alla caccia e infilarmi in un pantano da cui mi hai dovuto estrarre... Le corse con il carro armato nel piazzale del battaglione... la tua FIAT 127 con cui mi hai insegnato a guidare... Il paese dove eri nato 96 anni fa, il ciucci...

E i tuoi interminabili racconti delle tue avvertire di guerra... Tutto questo ed altro mi hai regalato nella tua vita. Ma soprattutto il ricordo di un lavoratore indefesso e di una persona integerrima come ce ne sono poche. Se esiste il paradiso tu hai l'ingresso garantito di diritto, ma di certo esiste la vita eterna, perché ora che non ci sei più vivrai per sempre nei miei più bei ricordi.

Grazie nonno Carmine...

Un anno di silenzio…

Tue, 15 Mar 2016 08:30:00 +0200

Mi sono reso conto oggi che è passato poco più di un anno da quando ho postato l’ultima volta in queste pagine. Da allora tante, tantissime cose, sono cambiate e questo giustifica un po’ il silenzio in cui mi sono rifugiato. Non è ancora il caso che scriva pubblicamente gli eventi che mi hanno riguardato in questi 365 giorni. Forse verrà il giorno in cui potrò e vorrò parlarne ampiamente e liberamente, ma quel momento, se mai verrà, è ancora molto remoto nel futuro.

Per chi mi legge, se è ancora rimasto qualcuno che lo fa, ripensandoci oggi quello che è accaduto non è niente più di quello che in fondo sono gli imprevisti della vita che spesso ti capitano quando meno te lo aspetti, cambiandola radicalmente e cambiandoti radicalmente... oppure semplicemente facendo emergere quello che sei veramente.

Quello che conta è che ci sono ancora, un po’ (molti dicono tanto) diverso, un po’ “imprevisto” io stesso. In questo periodo di grande difficoltà mista a grande rivoluzione sono riemersi un po’ di vecchi interessi e ne sono maturati molti di nuovi ed è di questo che cercherò di parlare prossimamente.

Primo fra tutti quello che oggi mi spinge a tornare a redigere questo post che spero sarà seguito da molti altri. Mi riferisco alla mia passione per lo scrivere, passione che in realtà non ho mai riconosciuto come tale se non in questo ultimo periodo della mia vita, quando essa è diventata qualcosa che mi ha gratificato molto e molto mi ha aiutato a focalizzare quelli che sono i miei pensieri e le mie idee. Mi sono trovato spesso a scrivere per varie ragioni, tra le quali anche, banalmente, il fissare concetti che diversamente sarebbero svaniti nel flusso di miei pensieri o travolti dalle emozioni. Ho scritto molto, moltissimo, per comunicare e per comunicarmi, per organizzare e riorganizzare, per verificare se, alla prova dei fatti, quello che pensavo in un dato momento si rivelava ancora vero dopo tempo.

Ci sono tante altre cose che mi hanno accompagnato, mia figlia, il ballo e la musica, la fotografia, la lettura, il cinema e il teatro, l'arte in generale, il mio lavoro. La montagna e talvolta il mare, la città e la campagna. In definitiva, come qualcuno mi ha insegnato, la "esperienza", questo valore fondamentale che vale oltre ad ogni denaro e ad ogni oggetto che possiamo comprare con esso...

Riparto da qui, dalla voglia di comunicare qualcosa... ma non chiedetemi cosa...

Bentornato Andrea.

Angular and Typescript: together forever

Wed, 11 Mar 2015 16:01:40 +0200

E’ disponibile il mio guest post sul blog di MSDN Italia, una veloce analisi di come il fatto che la nuova versione di Angular 2.0 sia basata su Typescript cambierà le cose e un semplice esempio di cosa significa usare Angular e Typescript insieme oggi stesso.

Link: Angular and Typescript: together forever

Gestire le dialog modali con Angular, Bootstrap e Typescript

Sun, 08 Mar 2015 15:36:00 +0200

Le modal dialog sono uno strumento molto usato nelle applicazioni per interagire con l’utente. Purtroppo, mentre in una applicazione Windows esse sono tutto sommato semplici da gestire dato che il framework ci mette a disposizione più o meno tutto ciò di cui abbiamo bisogno, così non è nelle applicazione web in cui abbiamo solo alert e confirm che sono quanto di meno user friendly si possa immaginare. Inoltre, inserire delle proprie dialog è più o meno complicato in quando richiede non solo l’inserimento del codice Javascript che le gestisce, ma anche sel markup HTML. Un doppio lavoro quindi che complica non poco la questione. Personalmente ho trovato molto proficuo usare un servizio di AngularJS, scritto in Typescript, per cercare di risolvere questo problema alla radice. Per farlo mi sono appoggiato alle Modal popop di bootstrap che sono semplici ed efficaci e gestiscono molto efficacemente la responsività. Vediamo il servizio come è realizzato:

   1: module sys.services   2: {   3:     export class Constants   4:     {   5:         static containerId: string = '#modalContainer';   6:         static defaultModalTitle: string = 'Message';   7:         static modalDialogId: string = '#modalDialog';   8:        9:         static Negative: string = '0';  10:         static Positive: string = '1';  11:         static Cancel: string = '2';  12:       13:         static modalYesNo: sys.services.IDialogCommand[] = [  14:             { id: Constants.Negative, text: 'No' },  15:             { id: Constants.Positive, text: 'Yes', style: 'btn-primary' }];  16:         static modalYesNoCancel: sys.services.IDialogCommand[] = [  17:             { id: Constants.Cancel, text: 'Cancel' },  18:             { id: Constants.Negative, text: 'No' },  19:             { id: Constants.Positive, text: 'Yes', style: 'btn-primary' }];  20:         static modalOkCancel: sys.services.IDialogCommand[] = [  21:             { id: Constants.Cancel, text: 'Cancel' },  22:             { id: Constants.Positive, text: 'Ok', style: 'btn-primary' }];  23:       24:         static containerMarkup: string =  25:         '<span></span>';  26:         static modalMarkup: string =  27:         '<div id="modalDialog" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</p></div><div class="modal-footer"></div></div></div></div>';  28:         static modalButtonMarkup: string =  29:         '<button type="button" class="btn" data-dismiss="modal">Close</button>';  30:     }  31:       32:     export interface IDialogCommand  33:     {  34:         id: string;  35:         text: string;  36:         style?: string;  37:     }  38:    39:     export class ModalManager  40:     {  41:         private container: JQuery;  42:         private modalDialog: JQuery;  43:    44:         constructor()  45:         {  46:             this.appendModals();  47:         }  48:    49:         private exists(name: string): boolean  50:         {  51:             if (this.container == undefined)  52:                 this.container = $(Constants.containerId);  53:    54:             return this.container.find(name).length != 0;  55:         }  56:    57:         private appendModals(): void  58:         {  59:             if (!this.exists(Constants.containerId))  60:             {  61:                 this.container = $(Constants.containerMarkup);  62:                 this.container.appendTo($(document.body));  63:             }  64:    65:             if (!this.exists(Constants.modalDialogId))  66:             {  67:                 this.modalDialog = $(Constants.modalMarkup);  68:                 this.modalDialog.appendTo(this.container);  69:             }  70:         }  71:    72:         public showDialog(message: string, title: string = Constants.defaultModalTitle, commands?: IDialogCommand[], callback?: (id: string) => void)  73:         {  74:             this.modalDialog.find('.modal-body').text(message);  75:             this.modalDialog.find('.modal-title').text(title);  76:    77:             var footer = this.modalDialog.find('.modal-footer');  78:             footer.empty();  79:    80:             for (var i in commands)  81:             {  82:                 var cmd = commands[i];  83:    84:                 var button = $(Constants.modalButtonMarkup);  85:    86:                 button.text(cmd.text);  87:                 button.addClass(cmd.style == undefined ? 'btn-default' : cmd.style);  88:                 button.data('command-id', cmd.id);  89:    90:                 button.click((ev) =>  91:                 {  92:                     var id = $(event.srcElement).data('command-id');  93:    94:                     this.modalDialog.modal('hide');  95:    96:                     if (callback != undefined)  97:                         callback.apply(this, [id]);  98:                 });  99:   100:                 button.appendTo(footer); 101:             } 102:   103:             this.modalDialog.modal('show'); 104:         } 105:     } 106: }

Il servizio così impostato è completo di tutto ciò che serve al funzionamento. Da solo per scontato che siano reparibili le librerie suddette (AngularJS e Bootstrap). Il metodo appendModals() in particolare si occupa di creare il markup necessario utilizzando alcune stringhe costanti. Esso verifica che il markup non sia già presente ed eventualmente lo inserisce aggiungendolo al body. Questo favorisce l’utilizzo della libreria che non richiede alcuna gestione del markup HTML. L’utilizzo è molto semplice. E’ sufficiente infatti registrare il servizio assieme al controller con la seguente riga:

   1: .service('$modalManager',   2:     () => new sys.services.ModalManager());

Avremo così a disposizione il servizio $modalManager che possiamo iniettare in un controller. A questo punto, potremo richiamare la gdialog molto semplicemente usando uno dei metodi del servizio:

   1: this.$modalManager.showDialog(   2:     'Are you sure you want to delete the resource',   3:     'Confirm operation',   4:     sys.Constants.modalYesNo,   5:     (id: string) =>   6:     {   7:         if (id == sys.Constants.Positive)   8:         {   9:             this.clocks.push(timezone);  10:         }  11:    12:         this.selectedTimezone = undefined;  13:         this.scope().$apply();  14:     });

La dialog è sufficientemente intelligente da gestire numerose combinazioni di pulsanti. Le costanti presenti nella dichiarazione sono di aiuto in questo ma se ne possono creare di proprie dato che si tratta a tutti gli effetti di un array di IDialogCommand.

   1: static modalOkCancel: sys.services.IDialogCommand[] = [   2:     { id: Constants.Cancel, text: 'Cancel' },   3:     { id: Constants.Positive, text: 'Ok', style: 'btn-primary' }];

Senza dimenticare l’uso appropriato degli stili di bootstrap.

Angular 2.0 built in Typescript...

Thu, 05 Mar 2015 17:50:00 +0200

E' di questi giorni l'annuncio che Angular 2.0 è ora completamente scritto in Typescript. Questo è forse uno dei più sorprendenti risultati della politica di Satya Nadella che sta aprendo giorno dopo giorno alle librerie open source di terze parti. E ancora più sorprendente se pensiamo che Angular è un prodotto dei team di Google che recentemente, supportato da Microsoft ha deciso di adottare questo linguaggio. La cosa che più mi entusiasma, come riportato in questo post, è che la collaborazione sarà fonte di nuovi miglioramenti per Typescript che già dalla versione 1.5 vedrà l'introduzione delle annotations, espressamente progettate per Angular. Le annotation apriranno la strada a una sorta di Reflection che tipicamente è fonte di numerose soluzioni che risparmiano lavoro. Attendiamo con ansia...

Gestire l'asicronia dei propri metodi con Angular e Typescript

Thu, 15 Jan 2015 19:06:00 +0200

L'asincronia sta ormai diventando una questione di tutti i giorni nelle applicazioni moderne così i linguaggi come C# si sono adeguati con costrutti come async/await. Javascript, pur essendo un linguaggio ormai antico secondo i tempi cui l'informatica ci ha abituato, gestisce da sempre molte attività in modo asincrono, utilizzando il meccanismo dei callback. Un esempio è il setInterval in cui uno degli argomenti passati è la funzione da chiamare ad intervalli regolari.

Librerie come jQuery e Angular stesso espongono numerosi casi di utilizzo di metodi asincroni. L'http service di Angular ad esempio è uno di questi casi. Esso però non utilizza normali callback ma un sistema molto simile al Task<T> di C#. Le promise. In effetti da ciascuna chiamata asincrona è ritornato un oggetto Promise che dispone dei metodi then, catch e finally. Questi servono per associare un callback a ciascuno delle condizioni che i nomi dei metodi evocano.

Ma la domanda cui vogli rispondere in questo post è la seguente: come faccio ad esporre una promise da un mio metodo asicrono se esso stesso no usa un servizio che la utilizzi? E' il caso ad esempio di un metodo che visualizzi una dialog modale. Essono mo potrà mai essere sincrono perchè oltre a risultare bloccante per il browser, non sarà comunque possibile gestire una eventuale "attesa" e ritornare dal metodo alla chiusure della dialog. Quello che ci viene in soccorso è il Q service. Esso è usato dallo stesso http service è ha come unico scopo la gestione asincrona. Vediamo un esempio:

   1: public showDialog(message: string, title: string = Constants.defaultModalTitle, commands?: IDialogCommand[]): ng.IPromise<string>   2: {   3:     var defer: ng.IDeferred<any> = this.$q.defer<string>();   4:     5:     try   6:     {   7:         this.modalDialog.find('.modal-body').text(message);   8:         this.modalDialog.find('.modal-title').text(title);   9:    10:         var footer = this.modalDialog.find('.modal-footer');  11:         footer.empty();  12:    13:         for (var i in commands)  14:         {  15:             var cmd = commands[i];  16:    17:             var button = $(Constants.modalButtonMarkup);  18:    19:             button.text(cmd.text);  20:             button.addClass(cmd.style == undefined ? 'btn-default' : cmd.style);  21:             button.data('command-id', cmd.id);  22:    23:    24:             button.click((ev) =>  25:             {  26:                 var id = $(event.srcElement).data('command-id');  27:                 this.modalDialog.modal('hide');  28:                 defer.resolve(id);  29:             });  30:    31:             button.appendTo(footer);  32:         }  33:    34:         this.modalDialog.modal('show');  35:     }  36:     catch (error)  37:     {  38:         defer.reject(error);  39:     }  40:    41:     return defer.promise;  42: }

Diamo per assodato che questo metodo faccia capo ad una classe che ha ricevuto una istanza del Q service come argomento del costruttore. Come segue:

   1: constructor(private $q: ng.IQService)   2: {   3: }

Il metodo showDialog al proprio inizio crea una istanza di una classe di tipo IDeferred<any>, dove any è il tipo del valore ritornato dal metodo in questione. L'oggetto deferred è quello che ci serve per gestire l'asincronia. Al termine del metodo infatti viene ritornata la promise che esso contiene con "defer.promise".

A questo punto è necessario invocare i callback di successo (then) e quello di fallimento (catch). Per farlo sono utilizzati i metodi "resolve" e "reject" dell'oggetto deferred.

Così facendo è possibile usare il metodo come segue:

   1: this.showDialog(   2:     'Are you sure you want to delete the item',   3:     'Confirm operation',   4:     sys.Constants.modalYesNo).then(   5:         (id: string) =>   6:         {   7:             if (id == sys.Constants.Positive)   8:             {   9:                 // delete the item here  10:             }  11:         });

Il sistema è l'unico consigliato. Infatti l'utilizzo dei callback normali crea problemi al sistema di databinding di AngularJS. Invece il q service è perfettamente in grado di supportarlo.

Angular e Partial View: la direttiva ng-include

Thu, 20 Nov 2014 16:12:00 +0200

Spesso può risultare molto comodo caricare una porzione di html dal server, magari generata da una partial view di ASP.NET MVC (o magari proprio da una View, perchè no?). con angular questo è del tutto possibile grazie alla direttiva ng-include che consente di specificare l'url da cui caricare una risorsa all'interno della pagina. Vediamo un esempio con typescript:

Per prima cosa si crea una partialview che dimostri un po' di dinamismo. Ecco un semplice esempio:

   1: <h2>@DateTime.Now.ToLongDateString()</h2>   2: <h3>@DateTime.Now.ToLongTimeString()</h3>

In seguito aggiungiamo al controller il codice per poterla chiamare dal browser:

   1: public ActionResult _PartialContent()   2: {   3:     return PartialView();   4: }

A questo punto diciamo che l'url per raggiungere la partial view sia il seguente:

/Include/_PartialContent

Creaiamo quindi un controller come segue:

   1: class IncludeController   2: {   3:     count: number = 0;   4:     includeUri: string = undefined;   5:     6:     click(): void   7:     {   8:         this.includeUri = '../Include/_PartialContent?ts=' + (++this.count).toString();   9:     }  10: }  11:    12: angular.module('include', ['ngRoute'])  13:     .controller('includeIndex', IncludeController);

Nel controller usiamo una variabile "count" per tenere conto delle volte in cui l'utente clicca il pulsante di test. Questo valore viene accodato all'uri della partial-view per forzarne il caricamento a ciascun click. L'uri così calcolato viene riposto nella proprietà includeUri. Vediamo ora la view:

   1: @{   2:     ViewBag.Title = "Test Include";   3: }   4: <div>   5:     &nbsp;   6: </div>   7: <div ng-app="include" ng-controller="includeIndex as ct" class="row">   8:     <form>   9:         <button type="button" class="btn btn-primary" ng-click="ct.click();">Click Me!</button>  10:         <p ng-show="ct.count>0">clicked {{ct.count}} times</p>  11:         <div ng-include="ct.includeUri"></div>  12:     </form>  13: </div>  14: @section Scripts {  15:     <script src="~/Scripts/Views/Include/index.js"></script>  16: }

Niente più di un normale binding, con un pulsante per invocare la funzione click(), la visualizzazione del count e l'assegnazione della direttiva ng-include sulla variabile includeUri. Il risultato è che la partial view viene inclusa all'interno delle pagina ogni volta che clicchiamo il pulsante.

Interessante notare che mediante questa tecnica possiamo agevolmente caricare nella pagina qualunque tipo di file il server sia in grado di servire. Se ad esempio all'url della partial sostituiamo quello del file TS vedremo apparire il codice.

Generare i proxy javascript per le WebApi

Wed, 20 Aug 2014 03:25:00 +0200

Sempre più spesso, nelle moderne applicazioni web, il codice Javascript di una pagina ha la necessità di accedere ad una webapi. Questo è certamente il più semplice metodo per attivare la pagina caricando informazioni dal server senza necessariamente effettuare il refresh dell'intera pagina. La chiamata può essere necessaria per riempire una semplice dropdowlist il cui contenuto dipende da qualche altro valore impostato in una form, piuttosto che una lista di risultati di una ricerca. Qualunque sia il contenuto, l'operazione è sempre quella di richiemare un metodo di una webapi e in seguito alla risposta deserializzare il json per popolare l'interfaccia utente.

In casi come questi ho trovato molto utile usare una classe proxy, mimando quello che avviene in C# quando si interroga un servizio WCF. La cosa interessante è che le WebApi mettono a disposizione di un ApiExplorer che è in grado di fare l'inspect della api stessa e restituire tutti i dettagli quali i metodi, i loro parametri, tipi di ritorno etc.. Grazie ad esso è possibile scrivere il seguente metodo:

   1: public abstract class ApScriptableController : ApiController   2: {   3:     /// <summary>   4:     /// Il metodo restituisce lo script Javascript che consente di interrogare il controller   5:     /// </summary>   6:     /// <returns>Ritorna il </returns>   7:     [HttpGet]   8:     public HttpResponseMessage GetScript()   9:     {  10:         ApiExplorer explorer = new ApiExplorer(this.Configuration);  11:    12:         StringBuilder builder = new StringBuilder();  13:    14:         builder.Append("var __extends = this.__extends || function (d, b) {");  15:         builder.Append("    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];");  16:         builder.Append("    function __() { this.constructor = d; }");  17:         builder.Append("    __.prototype = b.prototype;");  18:         builder.Append("    d.prototype = new __();");  19:         builder.Append("};");  20:    21:         var actions = (from api in explorer.ApiDescriptions  22:                        where  api.ActionDescriptor.ControllerDescriptor.ControllerType.IsAssignableFrom(this.GetType())  23:                        orderby api.ActionDescriptor.ActionName ascending  24:                        select api).ToArray();  25:    26:         if (actions.Count() > 0)  27:         {  28:             string controllerName = actions.First().ActionDescriptor.ControllerDescriptor.ControllerName;  29:             controllerName = controllerName.Substring(0, 1).ToUpper() + controllerName.Remove(0, 1);  30:    31:             builder.AppendFormat("var {0}Proxy = (function (_super) {{", controllerName);  32:             builder.AppendFormat("    __extends({0}Proxy, _super);", controllerName);  33:             builder.AppendFormat("    function {0}Proxy(baseUri, accessToken, context) {{", controllerName);  34:             builder.Append("        _super.call(this, baseUri, accessToken);");  35:             builder.Append("        this.context = context;");  36:             builder.Append("    }");  37:    38:             foreach (var item in actions)  39:             {  40:                 builder.AppendFormat("    {1}Proxy.prototype.{0} = function (value) {{", item.ActionDescriptor.ActionName, controllerName);  41:                 builder.AppendFormat("        return _super.prototype.callApi.call(this, '{0}', value, this.context);", item.RelativePath);  42:                 builder.Append("    };");  43:             }  44:    45:             builder.AppendFormat("    return {0}Proxy;", controllerName);  46:             builder.Append("})(sys.net.Proxy);");  47:         }  48:    49:         var response = new HttpResponseMessage(HttpStatusCode.OK);  50:         response.Content = new StringContent(builder.ToString(), Encoding.UTF8, "text/javascript");  51:         return response;  52:     }  53: }

Il codice rappresenta una classe base da utilizzare per i controller delle WebApi. Essa implementa un metodo GetScript che non fa altro che ispezionare i metodi della api stessa e genera di conseguenza un codice Javascript che rappresenterà il proxy della WebApi. In coda al metodo, le ultime righe cambiano il content-type della risposta impostandolo e text/javascript. In questo modo sarà possibile fornire l'url della api ad un tag script e di conseguenza far leggere il codice e caricarlo nel browser.

   1: <script src="~/api/Home/getscript"></script>

L'ultimo tassello di questo piccolo puzzle è una classe Typescript che rappresenta la base per il proxy Javascript. Il codice generato infatti fa uso delle funzioni e dei tipi presenti in questo breve snippet.

   1: module sys.net   2: {   3:     // represents a base for api responses   4:     export interface IApiResponseBase    5:     {   6:         HasErrors: boolean   7:         Message: string;   8:     }   9:    10:     // represents a successful response from an api  11:     export interface IApiResponse<T> extends IApiResponseBase  12:     {  13:         Result: T;  14:     }  15:    16:     export class Proxy   17:     {  18:         // creates and initializes the proxy with the given base uri  19:         constructor(private baseUri: string, private accessToken: string)  20:         { }  21:    22:         // calls a generic API with the specified route and argument  23:         public callApi<T>(route: string, argument: any, context?: string): JQueryPromise<T>  24:         {  25:             var uri = this.baseUri + route;  26:    27:             return $.Deferred(  28:                 (deferred: JQueryDeferred<T>) =>  29:                 {  30:                     $.ajax({  31:                         url: uri,  32:                         type: 'POST',  33:                         data: JSON.stringify(argument),  34:                         contentType: 'application/json; charset=utf-8',  35:                         beforeSend: (xhr) =>  36:                         {  37:                             xhr.setRequestHeader('Authorization', 'Bearer ' + this.accessToken);  38:    39:                             if (context != undefined)  40:                                 xhr.setRequestHeader('X-Tsf-Context', context);  41:                         }  42:                     })  43:                         .done(  44:                         (retVal: IApiResponse<T>) =>  45:                         {  46:                             if (retVal.HasErrors)  47:                                 deferred.reject(retVal);  48:                             else  49:                                 deferred.resolve(retVal.Result);  50:                         })  51:                         .fail((err: any) => deferred.reject(this.mapToError(uri, err)));  52:                 }).promise();  53:         }  54:    55:         // maps any error information to a common object  56:         private mapToError(uri: string, err: any): IApiResponseBase  57:         {  58:             return <IApiResponseBase>  59:                 {  60:                     Message: 'Api "' + uri + '" reported an error: ' + err.statusText,  61:                     HasErrors: true  62:                 };  63:         }  64:     }  65: }

Una volta che il codice sia caricato nell'ordine corretto, avremo a disposizione una classe che riporta il nome del controller seguito dalla parola Proxy. Perciò se il controller ha il nome "Home" il proxy sarà "HomeProxy".

   1: var proxy = new HomeProxy(sys.Application.ServiceUri, sys.Application.AccessToken, sys.Application.Context);   2: proxy.GetValuesForList()   3:     .done((result) =>   4:      {   5:         // TODO: process here   6:      });

Il proxy fa uso delle promise di jQuery perciò il suo utilizzo è molto semplice e gestisce perfettamente la asincronicità.

ng-Cloak e il binding visibile in angularjs

Fri, 08 Aug 2014 18:40:00 +0200

Capita talvolta (spesso in effetti), che quando entrate in una pagina in cui sia utilizzato AngularJS per una frazione di secondo appaiano le notazioni del binding che spariscono poco dopo quando il databinding viene applicato. Questo accade perchè in quella frazione di secondo in cui il browser scarica il codice e avvia angular, tutte quelle parentesi graffe sono niente più che semplice testo e in gran parte esse sono visualizzate dal browser perchè occupano posizioni "visibili".

Per evitare questo comportamento viene in aiuto la direttiva ng-Cloak. Essa, come testimonia la documentazione ha proprio lo scopo di applicare un "display:none" agli elementi, e questo funzione nella maggioranza dei casi. Tuttavia anche se applichiamo la direttiva ng-Cloak (ad esempio al body per generalizzare, ma anche ad un singolo elemento come invece è consigliabile) talvolta le graffe appaiono comunque. Questo è imputqabile al medesimo ritardo. Per evitarlo è opportuno aggiungere al proprio css il seguente:

   1: [ng\:cloak], [ng-cloak], .ng-cloak {   2:   display: none !important;   3: }

In questo modo il CSS cercherà tutti gli elementi con l'attributo ng-Cloak e li nasconderà automaticamente.

Il trick è spiegato più estensivamente qui: http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink

Il probabile e il possibile

Sun, 27 Jul 2014 23:28:33 +0200

Ho sempre avuto l’insana convinzione che fosse meglio vivere, sempre e invariabilmente, scommettendo il possibile contro il probabile. Questo perchè in definitiva il probabile esiste e basta… è probabile, e quindi serve il minimo sforzo perchè di verifichi, ma da esso non ti puoi aspettare sorprese, niente di positivo, niente che faccia evolvere la tua situazione in meglio, niente che sia in più rispetto a quello che tutti si aspettano. Il probabile è il minimo sindacale, è l’oppressore che vince sull’oppresso, è lo stesso quotidiano tutti i giorni, è il latte consegnato all’uscio, quello che non ti fa “mandare dalla mamma”.

Il possibile invece è creativo. Lui non esiste e te lo devi costruire, pezzo per pezzo, con fantasia e immaginazione. Il possibile in realtà sono i tuoi sogni, quelli che fai mentre guidi sulla via del ritorno dall’ufficio, e che tutti il più delle volte archiviano dicendo… “ah, impossibile!”.

Alla fine il probabile è una vacanza in una comune località di mare dove il massimo che ti puoi aspettare è che un ombrellone sia un po’ fuori posto. Arriva il bagnino, lo sistema e tutto torna nell’ambito della semplice probabilità. Il possibile invece è una settimana in barca, alla scoperta di angoli del mondo che nemmeno ti aspettavi potessero esistere, pieno del colore, del profumo e delle sensazioni che mai avresti immaginato.

Il problema è che mentre il probabile non ti delude mai, dato che non ti da nulla, il possibile è armato di scimitarra ed è pronto, in ogni istante, a menarti un fendente che ti lascia tramortito. Succede, spesso, che inseguendo il possibile si rimanga trafitti, bastonati, delusi e tramortiti, ma alla fine ne vale sempre la pena. Vale la pena il sapere di aver fatto qualcosa che ti ha cambiato o che ha cambiato, sentire la soddifazione di essere riusciti a lasciare un segno, a migliorare le cose, a… a… a… … anche se il prezzo il da pagare il più delle volte è lo stare male perchè il probabile ha vinto ancora una volta.

Già, impossibile… tutti invariabilmente lo hanno detto almeno una volta, i più se lo dicono sempre con insistenza. Il risultato è l’aver dovuto archiviare con una sola parola un sogno, e aver chiuso un libro di speranze senza nemmeno provare a renderlo concreto. Anche io spesso, ma mai volentieri, cedo al probabilismo, alla tentazione della uniformità e prevedibilità. Ma spesso, soprattutto se mi fermo a pensarci, allora il possibile mi illumina e braccio a braccio al mio ottimismo mi guida alla scoperta di aspetti e possibilità che nemmeno osavo esprimere.

Lasciamo la noia a quei dannati probabilisti. La vita sta nel possibile.

MVP da 8 anni... un saluto particolare a... Silverlight

Tue, 01 Jul 2014 15:21:46 +0200

Primo luglio, la calura, l'estate che arriva e anche quest'anno come da otto a questa parte è arrivata l'attesissima mail, regalandomi un'emozione cui non sono ancora riuscito ad abituarmi. MVP Windows Platform Development.

MVP ancora una volta, parte di questa straordinaria community di persone che condivisono la passione per la tecnologia, la condivisione della conoscenza e il lavoro, quello pratico, "sul pezzo", a risolvere problemi e a escogitare soluzioni.

Ma un ricordo particolare va a Silverlight. Ho avuto l'onore di essere il primo italiano ad entrare nella categoria MVP su questa tecnologia e sono anche l'ultimo che la lascia. Abbiamo ormai tutti digerito i motivi che hanno portato alla trasformazione di questo splendido strumento in quello che oggi vediamo in Windows 8 e in Windows Phone... è tutta farina che viene da quella splendida esperienza. E ora Windows Platform Development ne è la logica conclusione.

Grazie. Grazie a tutti, in particolare a Cristina Gonzalez Herrero e Marjorie di Clemente che si occupano del programma per l'Italia. Grazie a Microsoft Italia, Grazie al nostro "sommo" lead Alessandro Teglia :) e in definitiva grazie a Microsoft.

E naturalmente Grazie e tutti quelli che ci seguono, nei nostri eventi, e che ci scrivono e leggono ogni giorno.

dotNetCampus 2014 - Materiale e slide

Sat, 10 May 2014 19:11:40 +0200

Qui trovate le slide e il link al download del codice che ho mostrato nel corso della presentazione di stamattina. Si tratta di un talk sulle Universal Apps, il nuovo template di Visual Studio 2013 che consente di scrivere applicazioni che girano sia su Windows Phone 8.1 che su Windows 8.1

Download: http://1drv.ms/1mMHKEa

Presentazione alla Fiera del Radioamatore (Pordenone)

Mon, 28 Apr 2014 16:27:48 +0200

Sabato ho avuto il piacere di partecipare alla Fiera del Radioamatore, nello spazio dedicato a Windows, e presentare una sessione sulle novità in ambito Windows Phone 8.1. Oggetto della presentazione sono state in particolare le novità anticipate durante la recente BUILD in cui è stato evidenziato come la piattaforma sta convergendo verso una quasi totale sovrapposizione con il Windows Runtime di Windows 8.1.

Ne approfitto per ringraziare 1nn0va nella persona di Marco Parenzan per l’ottima organizzazione dell’evento che ha visto tre giorni di sessioni articolate e gli amici di dotnettoscana che con noi hanno lavorato per preparare il materiale e le sessioni.

Speriamo che il prossimo anno si possa migliorare ancora questo appuntamento che merita una giusta attenzione dal pubblico, che sono certo arriverà sempre più numeroso se messo a conoscenza di questi argomenti innovativi.

One Day Mobile 2014 - Aperte le iscrizioni!

Tue, 01 Apr 2014 12:48:23 +0200

Ci siamo, dopo lunghi preparativi è finalmente pubblico il prossimo One Day Mobile 2014, un evento di una intera giornata, con ben 7 talk a proposito dello sviluppo mobile in ambito Microsoft. Sarà una ghiotta occasione di condividere esperienze pratiche e novità, in un ambito in cui la velocità di sviluppo è la chiave del successo. Avremo quindi sessioni ad ampio spettro, sia su Windows Phone e Windows 8, ma anche su argomenti cross-platform come Xamarin e PhoneGap.

L'evento si terrà il prossimo 15 Maggio 2014 presso il Novotel Castellana di Venezia Mestre e vedrà la seguente agenda:

Andrea Dottor: App connesse con ASP.NET Web API

Realizzare applicazioni connesse può fare la differenza in un mercato in pieno sviluppo.
Aggiornare i dati di un catalogo, caricare/leggere gli score di un gioco, interfacciarsi con applicazioni/database esistenti...tutti validi motivi per non perdervi questa sessione, dove vedremo come sviluppare servizi ASP.NET Web API che implementino l'OAuth2 authentication ed OData, e vedremo come poterli consumare da applicazioni Windows Phone, Windows Store App e Xamarin App.

Andrea Boschin: Condivisione del codice tra W8 e WP8

Lo sviluppo mobile richiede sempre più spesso di fornire applicazioni che siano disponibili su diversi device, siano essi Windows Phone o Windows 8, sfruttando le peculiarità di ciascuno. Questo pone il problema di scrivere codice che possa in qualche modo essere riutilizzato su piattaforme che pur essendo simili hanno diversità marcate. In questa sessione vedremo alcune tecniche che possono aiutare nel migliorare la condivisione del codice quando si sviluppano applicazioni per questi sistemi.

Mirco Vanini: C++ in Windows Phone Apps

In questa sessione vedremmo una panoramica degli strumenti messi a disposizione per lo sviluppo nativo su Windows Phone 8. Verrà posta particolare attenzione al suo utilizzo per lo sviluppo di applicazioni ibride (C#/C++) che hanno la necessità di riutilizzare algoritmi sviluppati su piattaforme desktop.

Davide Vernole: Xamarin do it better!

Xamarin offre un’alternativa al “Write Once, Run Anywhere Approach” permettendo agli sviluppatori di realizzare applicazioni per le principali piattaforme mobile garantendo interfacce utente native, performance native e condivisione del codice tra le diverse piattaforme utilizzando C#, il .NET Framework e Visual Studio. Lo "Xamarin Unique Approach" è il filo conduttore di questa sessione in cui impareremo a conoscerlo meglio. Sfruttate conoscenze, potenzialità e sintassi di C# per ottenere il meglio dalle vostre applicazioni cross-platform; ovviamente con Xamarin!

Lorenzo Barbieri: Architettura WP8

Davide Senatore: PhoneGap & Cordova: building cross platform mobile applications

In questa sessione parleremo di sviluppo mobile cross platform con PhoneGap (AKA Cordova).
Prenderemo in esame tool, skill richieste per iniziare e best practice per non incorrere in spiacevoli scoperte.
Scopriremo come l'investimento in "poche" tecnologie standard possa abilitarci allo sviluppo su tutte le piattaforme mobile al momento disponibili.
Non ultimo, confronteremo anche pro, contro e costi di sviluppo di una soluzione di questo tipo con una soluzione nativa ed una soluzione web-based, prendendo in esame applicazioni realmente sviluppate.

Marco Dal Pino: Sviluppare e pubblicare applicazioni Gestionali (LOB) con Windows Phone

La piattaforma Windows Phone ha raggiunto una buona diffusione di mercato e sempre più si sente la necessità di implementare funzionalità gestionali utilizzando i device WP8. Inoltre la prossima versione di Windows Embedded 8 Handheld sarà basata proprio su Windows Phone, introducendo nuovi device industriali rugged con caratteristiche di lettura barcode o Carte magnetiche; il tutto già compreso nativamente nelle API di Windows Phone. Vediamo come affrontare lo sviluppo di queste applicazioni, quali tipici problemi vanno affrontati e come distribuire il prodotto ai nostri clienti.

Inutile dire che vi aspettiamo numerosi. Non aspettate a riservare la vostra poltrona perchè i posti sono davvero limitati.

https://communitydevtool.microsoft.it/public/frmRegister.aspx?eventid=1203PSOSREGTFTMLKGCQHT

Usare il Behaviors SDK per Windows 8.1

Wed, 19 Mar 2014 15:00:49 +0200

Rilasciati all'interno di Blend 3.0, nel 2009, come un mero strumento a supporto dei designer che li poteva usare per inserire sulla superficie di Blend non solo componenti di interfaccia, ma anche dei "frammenti di logica", i behavior hanno immediatamente assunto un ruolo primario nello sviluppo di applicazioni, grazie alla loro capacità di favorire la netta separazione tra logica di business e interfaccia utente. Questa capacità è rappresentata dal fatto che essi sono in grado di racchiudere e isolare porzioni di codice - con accesso diretto ai componenti di interfaccia ma pilotati dalla logica di business - inseribili facilmente direttamente nello XAML senza che sia necessaria alcuna logica accessoria.

Nati in particolare all'interno di Silverlight, essi sono immediatamente diventati parte del kit di sopravvivenza dello sviluppatore, specialmente di quello che intendeva implementare il pattern MVVM con facilità ed in seguito hanno visto il porting verso Windows Phone e finalmente anche in WinRT, con il rilascio dell'ultima versione 8.1. Conoscerli e usarli opportunamente può davvero far risparmiare un sacco di tempo. Vediamo come.

Usare i behavior esistenti

Il primo passo nell'utilizzo dei behavior è quello di inserirli nel progetto di Visual Studio e cominciare ad usare quelli esistenti. In effetti la libreria - denominata "Behaviors SDK (XAML)" porta con se una serie di classi base da cui è possibile fare ereditare i propri behavior ma anche un set abbastanza nutrito di componenti già realizzati e pronti all'uso. Essi hanno la caratteristica di essere parametrizzabili e generici così da essere fortemente riutilizzabili e quindi sono anche una buona scuola per quando dovremo realizzarne di nostri

Per inserirli nel progetto con Visual Studio 2013 è sufficiente selezionarli dalla libreria delle estensioni (vedi a lato) operando come se si dovesse aggiungere una referenza al progetto.

I Behavior sono una libreria di componenti nativi e managed, e come tali possono essere usati sia in progetti C#/VB.NET sia in C++. Non richiedono particolari cautele come avviene per altri tipi di componenti perciò, una volta inserita la referenza all'SDK sarà immediatamente possibile iniziare ad usarli. Non c'è dubbio che il modo migliore è quello di usare Blend, al cui interno vengono visualizzati nella scheda degli Assets, come dei piccoli componenti che possono essere trascinati sulla superficie del designer e agganciati ai vari elementi. Una volta collegati è possibile modificarne le proprietà usando la consueta finestra di blend.

Dal punto di vista dello sviluppatore un bahavior appare ne più ne meno che come una attached property che può essere valorizzata su qualunque elemento del DOM. La proprietà è dichiarata nel namespace "Microsoft.Xaml.Interactivity" e una volta inserito nel codice xaml essa appare come una collection:

   1: <Page   2:     x:Class="App1.MainPage" mc:Ignorable="d"   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       5:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   6:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   7:     xmlns:i="using:Microsoft.Xaml.Interactivity">   8:     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">   9:         <Rectangle x:Name="rect" Fill="Yellow" Width="100" Height="100">  10:             <i:Interaction.Behaviors>  11:                 <!-- aggiungere qui in behaviors -->  12:             </i:Interaction.Behaviors>  13:         </Rectangle>  14:     </Grid>  15: </Page>

A questo punto va referenziato un ulteriore namespace, chiamiamolo per brevità "core", il quale contiene i behavior predefiniti di cui parlavo poco fa. In particolare essi sono "EventTriggerBehavior" e "DataTriggerBehavior". I loro nomi dovrebbero essere autoesplicativi ma per completezza diciamo che il primo lo si può agganciare ad un singolo evento di un elemento mentre il secondo fa riferimento al un valore di una proprietà.

Poniamo ad esempio di voler fare in modo che il rettangolo giallo dell'esempio precedente debba diventare rosso quando cliccato. Potremmo semplicemente aggiungere il seguente snippet all'interno della collezione dei behaviors:

   1: <core:EventTriggerBehavior EventName="PointerPressed">   2:     <core:ChangePropertyAction PropertyName="Fill" Value="Red" />   3: </core:EventTriggerBehavior>

In buona sostanza, stiamo dicendo che al verificarsi di un evento PointerPressed venga eseguita una "action" che cambia il valore di una proprietà. Le action sono un secondo livello di componenti predefiniti di cui dirò tra poco. Questa action in particolare si occupa di variare la proprietà "Fill" impostandola a "Red". Mandando in esecuzione l'esempio si vedrà che l'effetto ottenuto è proprio quello desiderato, ma anche che, a differenza di quanto avviene per il VisualStateManager, il sistema non tiene traccia dello stato originario e quindi per riportarlo allo stato precedente dovremmo aggiungere l'operazione inversa:

   1: <Rectangle x:Name="rect" Fill="Yellow" Width="100" Height="100">   2:     <i:Interaction.Behaviors>   3:         <core:EventTriggerBehavior EventName="PointerPressed">   4:             <core:ChangePropertyAction PropertyName="Fill" Value="Red" />   5:         </core:EventTriggerBehavior>   6:         <core:EventTriggerBehavior EventName="PointerReleased">   7:             <core:ChangePropertyAction PropertyName="Fill" Value="Yellow" />   8:         </core:EventTriggerBehavior>   9:     </i:Interaction.Behaviors>  10: </Rectangle>

Le action che si possono applicare sono molteplici e coprono un vasto numero di necessità:

CallMethodAction: L'action richiama un metodo dell'oggetto cui si riferisce. Assomiglia molto al collegamento di un EventHandler nel codebehind.
ControlStoryBoardAction: Consente di collegare una o più storyboard e avviarle, così come si fa con i trigger di WPF.

GoToStateAction: Consente di attivare uno stato del VisualStateManager.
InvokeCommandAction: Uno delle action più utilizzate, in ambito MVVM consente di attivare comandi in risposta a qualunque evento se usato in concomitanza con EventTriggerBehavior.
NavigateToPage: Attiva la navigazione verso una pagina dell'applicazione
PlaySoundAction: Esegue un suono,

Una nota a parte la merita sicuramente l'InvokeCommandAction, la cui esistenza è indispensabile in scenari MVVM. Esso infatti sopperisce alla mancanza dei consueti "Command" e "CommandParameter" relativi la maggioranza degli eventi dei controlli XAML. Come in Silverlight, anche nelle Windows Store apps solamente ButtonBase implementa queste proprietà. E qui viene in aiuto questa action che associata ad un opportuno EventTriggerBehavior è in grado di riportare ad un Command del ViewModel qualunque iterazione dell'utente, aprendo numerose strade.

L'uso del EventTriggerBehavior è sicuramente il più consueto ma non va dimenticata la presenza del meno intuitivo DataTriggerBehavior. Esso ha lo scopo di legare l'esecuzione di una o più action al cambiare del valore di una proprietà. Pensiamo ad esempio ad avere una proprietà che indica una soglia di pericolosità, aggiornata in tempo reale (magari via SignalR). L'utilizzo di un DataTriggerBehavior è specifico per questi casi e ci consente di attivare una action quando il valore va oltre una determinata soglia:

   1: <Rectangle Background="Green">   2:     <Interactivity:Interaction.Behaviors>   3:         <Core:DataTriggerBehavior Binding="{Binding Severity}" ComparisonCondition="GreaterThanOrEqual" Value="3">   4:             <Core:ChangePropertyAction PropertyName="Background">   5:                <Core:ChangePropertyAction.Value>   6:                    <SolidColorBrush>Red</SolidColorBrush>   7:                </Core:ChangePropertyAction.Value>   8:             </Core:ChangePropertyAction>   9:         </Core:DataTriggerBehavior>  10:     </Interactivity:Interaction.Behaviors>  11: </Rectangle>

Il codice qui sopra usa una condizione, indicata dalla proprietà “Comparison Condition” per definire quale sia il valore soglia che converte. il colore da Verde a Rosso.

I behavior come abbiamo visto sono uno strumento davvero insostituibile in molti casi. Ancor di più se, come vedremo nel prossimo articolo ne creiamo di nostri, con proprietà che ne parametrizzano l’azione.

Community Lab: Typescript in the real world

Mon, 10 Mar 2014 14:36:50 +0200

Ormai più di una settimana ho tenuto il lab su Typescript su cui da tempo stavo lavorando. Vorrei ringraziare ancora una volta tutti quelli che hanno partecipato, per la solerzia con cui hanno seguito gli esempi e hanno provato ad implementare il codice che ho preparato. Ogni giorno che passa sono sempre più convinto che Typescript sia uno strumento insostituibile e ho trovato molte conferme in questo lab vedendo le persone progredire in fretta, mano a mano che prendevano confidenza con il linguaggio e si rendevano conto delle enormi potenzialità e tutela nei confronti del pure e semplice Javascript.

Ho pubblicato tutto il materiale nel repository di XeDotNet perciò potete scaricare tutto il necessario per provare voi stessi l'esempio. In particolare seguire il documento PDF - che ho cercato di rendere il più accurato ed autonomo possibile - nel quale troverete lo step-by-step e scaricate il progetto di base da cui partire. Se poi siete pigri troverete anche l'implementazione di tutti i vari passaggi.

Ecco il link al download: http://1drv.ms/1flJCDT

Al solito se avete problemi non esitate a contattarmi con la form del weblog.

Typescript: il bootstrap dell’applicazione

Tue, 11 Feb 2014 08:00:00 +0200

Di fronte alla vostra prima applicazione con Typescript, vi sarete certamente chiesti quale sia il modo migliore per dare ad essa il primo avvio. Può sembrare una domanda banale ma, essa cela delle considerazioni che dovrebbero essere tenute nella dovuta attenzione. Prima di tutto, è certamente vero che del codice Javascript è anche del codice Typescript perfettamente valido ma, se ci lasciamo prendere la mano e iniziamo a scrivere così come eravamo abituati in precedenza rischiamo di perdere i benefici che Typescript può regalarci.

Primo fra tutti, sicuramente il fatto che Typescript accentua fortemente le caratteristiche object oriented e di conseguenza ci dovremmo attendere di rappresentare l’applicazione – intendendo con essa una singola pagina al cui interno gira il codice che le da vita – con una sola classe, che detenga i riferimenti ai vari elementi e naturalmente lo stato. Un po’ come avviene in una applicazione asp.net, in cui una sigola pagina è rappresentata dal suo “codebehind”.

Per avviare una applicazione del genere dovremmo di conseguenza creare al più presto l’istanza della classe e dare ad essa il controllo, lasciando che gestisca il ciclo di vita della pagina fino alla sua naturale conclusione. Per questo tipo di avvio sono abituato ad utilizzare un pattern ormai abbstanza consolidato. Creaimo una classe base per la pagina, in un namespace comune che i usialmente chiamo “sys”:

   1: module sys   2: {   3:     export class Page   4:     {   5:         public static run(page: Page): void   6:         {   7:             $(() => page.onLoad());   8:         }   9:    10:         public onLoad(): void { }  11:     }  12: }

Come di può vedere , la classe consta di un metodo statico “run” e di un metodo virtual “onLoad”. Attenzione che in Typescript il concetto di virtuale non esiste ma in realtà qualunque metodo pubblico è anche virtual. Diamo per assodato che sia presente jQuery e all’interno del metodo run usiamo l’evento “readystatechanged” con la classica sintatti $(…) dove all’interno delle parentesi va indicata una funzione eseguita all’occorrenza di questo evento. A questo punto possiamo ereditare il codebehind concreto della pagina da sys.Page:

   1: class DefaultPage extends sys.Page   2: {   3:     constructor()   4:     {   5:         super();   6:     7:         // inizializazione della pagina   8:     }   9:    10:     public onLoad(): void  11:     {  12:         // iniziamo qui il ciclo di vita  13:     }  14: }

In particolare nella classe viene riferinito il metodo onLoad che sarà chiamato automaticamente quando viene eseguito il “readystatechanged”. Potremmo così nel costruttore inizializzare i campi della classe, i valori di default, e così via mentre nell’onLoad potremmo cercare gli elementi della pagina, ed avviare eventuali operazioni di download da un servizio rest. L’avvio della pagina avviene per mezzo di una singola riga, posta usualmente in coda alla pagina o in un file ts:

   1: sys.Page.run(new DefaultPage());

La singola riga crea l’istanza della classe DefaultPage e poi vi da avvio con il metodo statico “run”. Niente di più semplice e pulito. Per estensione, se identificate all’interno della pagina diverse aree, a ciascuna delle quali risponda una classe Typescript che ne incapsuli il funzionamento, potete tranquillamente usare la stessa tecnica e ciascuna classe sarà avviata separatamente con il medesimo ciclo.

Di questo e di altro parleremo in occasione del Community LAB che si terrà il prossimo 28/2/2014 a Mestre. Se vi unite a me con il vostro PC sarà mia cura guidarvi nello sviluppo con questo semplice ma “liberatorio” linguaggio.

Iscrizioni e dettagli: http://www.xedotnet.org/Home/Meeting/20140228

Typescript: Aperte le iscrizioni al LAB

Wed, 29 Jan 2014 00:00:00 +0200

Giusto quest’oggi si sono aperte le iscrizioni al LAB su Typescript che si terrà il prossimo 28 Febbraio a Mestre – Venezia. Nell’occasione avremo modo di affrontare questo interessante linguaggio che ha il non trascurabile scopo di semlificare lo sviluppo client side all’interno dei browser. Typescript infatti gode infatti di un compilatore (che curiosamente è scritto esso stesso in Typescript) che è in grado di convertire il codice in Javascript puro, capace di essere eseguito in qualunque browser, senza necessità di un plugin addizionale. Si tratta in effetti della nemesi, regalandoci un linguaggio di alto livello – anche se mantenendo degli interessanti risvolti semantici che lo rendono flessibile come Javascript – dotato di un set di tipi verificato a compile-time.

Chi desiderasse approfondire lo può fare nei seguenti post:

Chi di voi invece preferisse provare direttamente un esempio, può raggiungermi il 28/2 a Mestre, iscrivendosi al seguente link.

http://www.xedotnet.org/Home/Meeting/20140228

Durante il lab darò una infarinatura iniziale del linguaggio e in seguito potrete seguire un esercizio step-by-step, e porre le domande del caso per risolvere i vostri problemi reali.

A presto