Quali sono i plus della soluzione di Microsoft per creare interfacce utente ed effetti grafici.
di Michele Costabile
Xaml è un linguaggio per la descrizione di interfacce utente ed effetti grafici, su cui Microsoft ha iniziato a lavorare nel 2003, dandogli il nome in codice Avalon. Faceva parte di Longhorn, ovvero il futuro Windows Vista, ancora in fase di sviluppo. Xaml venne ufficialmente rilasciato nel 2006 e l’anno dopo divenne una tecnologia alla base di Silverlight, l’edizione scalata di .net con cui Microsoft si propose di sottrarre quote di mercato a Flash. In tutti questi anni, Xaml è stato puntualmente aggiornato a ogni release del framework .net. La versione corrente è la 4.5. Chi fosse interessato all’intera timeline, può trovarne un riassunto all’indirizzo japf.github.io/xaml-history. Da più di dieci anni Microsoft investe su una macchina virtuale con il suo framework (.net) e su un linguaggio per la descrizione dichiarativa di interfacce utente e animazioni (xaml).
La macchina virtuale ha portato nel mondo Microsoft il nucleo di due punti di forza di Java: indipendenza dall’hardware e possibilità di controllare il codice in esecuzione, per identificare precocemente codice maligno. L’altro membro della coppia, Xaml, ha portato indipendenza da interfacce applicative, compatibilità binaria e linking dinamico per la creazione del componente più critico per il successo di una piattaforma software, la parte visibile. Entrambi i membri dell’equazione hanno dato a Microsoft la possibilità di unificare la versione del sistema per telefoni e tablet con la piattaforma principale. Microsoft è riuscita a passare con disinvoltura da un’architettura Intel a una basata su Arm e a realizzare una solida piattaforma per telefoni e tablet, grazie a .net e Xaml. Da Silverlight è arrivato Blend uno strumento nato per creare animazioni, che si integra perfettamente con Visual Studio condividendo i progetti. Quindi, sviluppando con Xaml abbiamo la possibilità di dare a designer e sviluppatori due strumenti differenti, progettati per le esigenze specifiche di utenti diversi, che condividono il medesimo progetto.
Un’applicazione universale aperta nella versione gratuita di Visual Studio 2013. I modelli di app universale sono progettati con la segmentazione del codice che consente di creare contemporaneamente app per tutte le piattaforme
Xaml è arrivato più lontano di Windows Forms, che viene conservato per compatibilità , soprattutto per la flessibilità di una descrizione dichiarativa, rispetto a un algoritmo espresso in codice, esattamente come siamo abituati a fare sul web. Codice come quello che segue, infatti, è rigido e non ha la possibilità di migrare facilmente da un framework a un altro, da un processore all’altro, da un set di regole di stile a un altro.
public Button button1;
public Form1()
{
button1 = new Button();
button1.Size = new Size(40, 40);
button1.Location = new Point(30, 30);
button1.Text = "Click me";
this.Controls.Add(button1);
button1.Click += new EventHandler(button1_Click);
}
L’equivalente Xaml di questo codice sarebbe qualcosa simile a questo:
<Button Width="258" Height="40" Margin="30,30,0,0" Content="Click me" Click="Button_Click" VerticalAlignment="Top" />
Il modello applicativo di Xaml è il seguente: il codice xml che descrive l’interfaccia viene caricato da una funzione del framework, che provvede a istanziare i controlli nel codice seguendo la descrizione dell’interfaccia. Naturalmente, dato che il formato xml è dichiarativo, il modo in cui sono creati i controlli dal codice e l’ordine delle istruzioni non sono espliciti, ma saranno calcolati dal codice di supporto. Qui sta la chiave della separazione fra la descrizione dell’interfaccia e la sua costruzione. Ulteriori punti a favore di Xaml, sono la possibilità di creare stili per gli oggetti di interfaccia, in modo simile a quello che ha reso vincente la coppia html e css. La stilizzazione permette, per esempio, di cambiare sfondi e dimensione dei bordi in un’intera applicazione consistentemente, agendo su un parametro globale invece che su ogni singolo elemento di interfaccia. Questo semplifica la personalizzazione per diversi tipi di schermo e di formati.
Vedremo in seguito che ci sono meccanismi potenti per specificare in modo dichiarativo le relazioni fra il contenuto degli elementi di interfaccia e la loro rappresentazione nel codice, in modo che si possano specificare relazioni, per esempio fra campi di testo o etichette di pulsanti e variabili di programma.
Un’altra funzione utile di Xaml consente di creare trigger, cioè situazioni che causano mutamenti. Per esempio, valori di un campo di testo che abilitano o disabilitano una checkbox. Anche questo codice viene prodotto dal framework e scatta nel momento giusto, senza programmazione esplicita. Insomma, Xaml è la tecnologia su cui investire per i nuovi progetti basati su Windows.
Struttura di Xaml
Abbiamo detto che Xaml è un dialetto xml, quindi la definizione di un’interfaccia utente avviene in un file di testo, con la familiare struttura e verbosità , di una struttura xml. odice ospite di una finestra vuota nello schema di un’applicazione Windows universale, cioè pronta per andare su pc, tablet e telefono.
<Page>
x:Class="App1.MainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResourceApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
Nulla di notevole in questo esempio. Le prime righe sono la consueta giaculatoria di namespace a cui fa riferimento la definizione formale del linguaggio. Il contenitore centrale, la cornice in cui inserire il resto dell’applicazione è una Grid, cioè una struttura in cui gli oggetti sono disposti per righe e colonne. La Grid specifica uno sfondo, che a sua volta fa riferimento a un tema. Abbiamo già trovato qualcosa di interessante. Premendo F12 andiamo a trovare la definizione di questo tema in un file di risorse.
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FF1D1D1D" />
Se facciamo la stessa cosa nella versione mobile del template, seguendo la catena di definizioni, arriviamo a un colore diverso
<Color x:Key="PhoneBackgroundColor">#FF000000</Color>
Ecco, fin dalla prima riga di codice, l’esemplificazione di aspetto da mettere in risalto di Xaml: la flessibilità e la portabilità del codice. Gli stili permettono facilmente di fare cambiamenti globali toccando poche righe di stile generale.
Parlando della struttura del documento, notiamo, di passaggio, che Xaml consente due stili di programmazione, uno basato su attributi e uno basato su elementi. Il secondo, è molto prolisso e viene evitato nel codice generato da Visual Studio, ma comunque è codice legale, e si può incontrare in qualche caso.
Ecco un esempio del primo stile di codice:
<Button Content="Button" HorizontalAlignment="Left" Height="122" Margin="73,154,0,0" VerticalAlignment="Top" Width="363"/>
Questo, invece è il secondo.
<Button>
<Button.Content>
Button
</Button.Content>
<Button.HorizontalAlignment>
Left
</Button.HorizontalAlignment>
…
</Button>