I nuovi controlli WinJS di WinRT per costruire app per Windows 8 (parte seconda)
Questo articolo è tratto dal libro Sviluppare applicazioni per Windows 8 con HTML e JavaScript di Daniele Bochicchio, Cristian Civera, Marco De Sanctis, Alessio Leoncini, Marco Leoncini, Stefano Mostarda.
Nella parte precedente abbiamo introdotto l'argomento. Continuiamo analizzando le altre caratteristiche dei controlli WinJS.
Raggruppare elementi in ListView con GridLayout
Il primo passo per poter gestire una vista con elementi raggruppati è quello di utilizzare una fonte dati consona a rappresentare questa particolare forma di dato. Se, per esempio, vogliamo mostrare una galleria fotografica di autovetture suddivise per marca, possiamo utilizzare una lista di oggetti come quelli presenti nell'esempio 5.9.
Visualizzare elenchi di elementi
Il modo più elementare per mostrare elenchi di elementi in HTML 5 consiste nello sfruttare i tag ul e li, generandoli magari a partire da un array di valori, come nell'esempio 5.1.
Esempio 5.9 - JavaScript
var dataSource = ["Marco", "Cristian", "Alessio", "Stefano"];
var cars = [
{ ModelName: "Audi", Title: "A4", Image: "/images/Cars/..."
},
{ ModelName: "Audi", Title: "Q7", Image: "/images/Cars/..."
},
// altri elementi ...
];Affinché possiamo sfruttare le funzionalità di grouping di una ListView, dobbiamo utilizzare come sorgente dati un particolare tipo di oggetto, ossia una Binding. List sulla quale abbiamo definito delle regole di raggruppamento, tramite la funzione createGrouped, come nell'esempio 5.10.
Esempio 5.10 - JavaScript
var groupedList = new WinJS.Binding.List(cars).createGrouped(getGroupKey, getGroupData);
function getGroupKey(item) {
return item.ModelName; }
function getGroupData(item) {
return {
title: item.ModelName,
count: groupedList.filter(function (x) {
return x.ModelName == item.ModelName
}).length
};
}
WinJS.Namespace.define("Data", {
simpleSource: plainList,
groupedSource: groupedList,
groups : groupedList.groups });
Essa accetta come parametri due funzioni. La prima, getGroupKey, viene invocata una volta per ogni elemento e deve restituire, come risultato, la chiave univoca del gruppo a cui questo elemento appartiene (nel nostro caso, il marchio dell'autovettura). La seconda, getGroupData, viene invocata una volta per ogni gruppo, passando il primo elemento di ognuno di essi, e ci consente di costruire un oggetto che rappresenta i dati del gruppo stesso; nel nostro esempio, esso ha le proprietà title, contenente il marchio dell'autovettura, e count, che abbiamo valorizzato con il numero dei componenti del gruppo.
Nell'ultima istruzione abbiamo esposto le liste groupedList e i suoi gruppi nel namespace Data, che abbiamo già sfruttato in precedenza in questo capitolo. In particolare, l'oggetto groupedList può essere utilizzato come sorgente dati per la ListViewin maniera assolutamente analoga a quanto visto in precedenza, come nell'esempio 5.11.
Esempio 5.11 - JavaScript
function bindData() {
var listView = theListView.winControl;
listView.itemTemplate = template;
listView.itemDataSource = Data.groupedSource.dataSource;
}Se a questo punto proviamo a eseguire il codice, il risultato che otteniamo è quello di figura 5.4: la ListView è stata effettivamente in grado di esplorare correttamente la nostra collection, dato che vengono mostrati tutti i modelli di auto, ma ancora non c'è traccia di alcun tipo di raggruppamento.
Figura 5.4 - ListView con groupedSource.
Affinché il raggruppamento diventi evidente, ciò che dobbiamo fare è definire un secondo template, oltre a quello dei singoli elementi, che specifichi come questi devono essere raggruppati.
Esempio 5.12 - HTML
<div id="headerTemplate" data-win-control="WinJS.Binding. Template"> <span data-win-bind="textContent: title"></span> </div>
Esempio 5.12 - HTML
function bindData() {
var listView = theListView.winControl;
listView.itemTemplate = template;
listView.itemDataSource = Data.groupedSource.dataSource;
listView.groupDataSource = Data.groupedSource.groups.
dataSource;
listView.groupHeaderTemplate = headerTemplate;
}
Il template dell'esempio 5.12 è molto più semplice di quelli visti in precedenza, in pratica contiene semplicemente uno span con il titolo del gruppo. A questo punto non dobbiamo far altro che referenziarlo dal codice JavaScript, assegnando come groupDataSource la proprietà groupedSource.groups. Il risultato finale ottenuto, come possiamo vedere in figura 5.5, è sicuramente migliore del precedente, perché evidenzia correttamente le varie sezioni.
Figura 5.5- ListView con GridLayout e supporto ai gruppi.
Con pochi passaggi siamo stati in grado di realizzare un'applicazione che inizia ad avere un layout davvero professionale. Manca solo la classica ciliegina sulla torta, ossia la possibilità di mostrare delle informazioni riassuntive sul numero di modelli per ogni marca. Per farlo abbiamo bisogno di un ultimo mattone, ossia il supporto allo zoom semantico: sarà l'argomento delle prossime pagine.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Eseguire le GitHub Actions offline
Gestione dei nomi con le regole @layer in CSS
Usare lo spread operator con i collection initializer in C#
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Generare la software bill of material (SBOM) in GitHub
Aggiungere interattività lato server in Blazor 8
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Generare velocemente pagine CRUD in Blazor con QuickGrid
Usare le navigation property in QuickGrid di Blazor
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database