Introduzione a interfaccia utente e dati
Immaginarsi di lavorare per una sartoria e di voler creare un'app che consenta ai clienti di scegliere i loro materiali o colori preferiti. Il nome dell'utente, l'elenco dei colori tra cui può scegliere e i colori preferiti selezionati sono tutti dati, Questi sono dati che vengono immessi, selezionati e controllati dall'utente tramite una moltitudine di controlli visualizzati nell'interfaccia utente: caselle di testo, elenchi a discesa, elenchi, pulsanti e così via. Tutto questo è controllato dalla logica dell'app.
La maggior parte delle app è costituita da tre componenti principali:
- Interfaccia utente : etichette, pulsanti, caselle di testo, dispositivi di scorrimento, grafici e tutti gli altri controlli che presentano informazioni all'utente. Sono inclusi anche i controlli che consentono all'utente di interagire con l'app immettendo dati, selezionando opzioni o eseguendo comandi.
- Dati: le informazioni su cui l'applicazione sta lavorando. Per un'app calcolatrice di base può trattarsi del numero attualmente visualizzato, del risultato dell'operazione precedente o del valore archiviato in memoria. Per un gioco, i dati possono includere lo stato e la posizione del giocatore e dei nemici, il layout e il comportamento dell'ambiente o le proprietà delle armi e di altri oggetti. Per un'app aziendale, i dati possono essere il database dei dipendenti, la cronologia ordini e così via. I dati dell'app della sartoria del nostro esempio sono archiviati negli oggetti effettivi che rappresentano l'ora corrente o i colori visualizzati nell'interfaccia utente.
- Logica: il costrutto che comunica con risorse esterne (ad esempio archiviazione, database, Servizi online o altre app), esegue operazioni sui dati e aggiorna l'interfaccia utente in modo da riflettere le modifiche nei dati. La logica riceve anche l'input dell'utente dall'interfaccia utente ed esegue le azioni appropriate alle informazioni immesse o ai comandi eseguiti. Nel nostro esempio, la logica aggiorna l'orologio, crea l'elenco dei colori disponibili, quindi archivia e recupera le preferenze di colori dell'utente.
La connessione tra la logica e l'interfaccia utente dell'app è essenziale. I framework come l’SDK delle app di Windows, piattaforma UWP (Universal Windows Platform) e Windows Presentation Foundation (WPF) dispongono di un metodo estremamente efficiente e versatile di trasferimento dei dati da e verso l'interfaccia utente incorporato, detto data binding.
In questo modulo si imparerà a usare il data binding per:
- Visualizzare e aggiornare automaticamente dati di testo semplice (visualizzazione dell'orologio nell'app).
- Aggiornare automaticamente le proprietà C# quando l'interfaccia utente riceve input (immissione del nome dell'utente).
- Applicare automaticamente le modifiche dei dati all'interfaccia utente (messaggio di saluto all'utente, visualizzazione dell'orologio).
- Visualizzare e modificare un elenco di strutture di dati più complesse (elenchi dei colori disponibili e preferiti).
Verranno anche illustrate alcune procedure consigliate per separare correttamente l'interfaccia utente dalla logica. La separazione di interfaccia utente e logica consente di testare ogni componente separatamente e di identificare gli errori più facilmente. Riduce anche notevolmente la quantità di codice boilerplate da scrivere. Meno codice boilerplate significa meno errori, meno bug e più tempo da dedicare alle attività importanti che si vuole eseguire con l'app.
Prerequisiti
Per sfruttare tutte le potenzialità di questo modulo, è necessario avere familiarità con:
- Creazione di nuovi progetti della piattaforma UWP (Universal Windows Platform) o WPF in Visual Studio.
- Il linguaggio C#.
- Concetti di base del markup XAML.
- Controlli di layout XAML di base, inclusi
StackPaneleGrid.