Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > WinRT

I nuovi controlli WinJS di WinRT per costruire app per Windows 8 (parte seconda)

di Daniele BochicchioDaniele Bochicchio, Cristian CiveraCristian Civera, Marco De SanctisMarco De Sanctis, Alessio LeonciniAlessio Leoncini, Marco LeonciniMarco Leoncini, Stefano MostardaStefano Mostarda, in WinRT,


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.

Acquista subito la tua copia ad un prezzo vantaggioso!

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.

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

Le novità di Entity Framework (Core) 7

I più letti di oggi

In evidenza

Misc