Esercizio 3: Personalizzare l'interfaccia

Avete notato la parola "undefined" apparsa nella parte inferiore di ogni ricetta sulla pagina iniziale? Questo avviene perché il file groupedItems.html contiene un template di dati che associa le proprietà degli oggetti della nostra ricetta al controllo ListView che le visualizza. Un item template è una porzione di codice HTML che indica come eseguire il rendering di ciascun elemento di dati associato ad un controllo. Il modello di template predefinito fornito da Visual Studio collega il testo nella parte inferiore dell'elemento a una proprietà denominata subtitle, ma la proprietà subtitle non esiste nei dati delle ricette caricati dall'applicazione.

In questo esercizio, modificheremo la start page, la pagina dei dettagli degli elementi (item-detail) e la pagina dei dettagli di gruppo (group-detail) per perfezionare l'aspetto dell'app Contoso Cookbook.

Task 1 - modificare la start page

Iniziamo modificando la start page per migliorare l'aspetto degli elementi delle ricette.

1. Aprite il file groupedItems.html. Trovate il DIV la cui classe è "itemtemplate" e rimuovete l'elemento H6 che collega textContent alla proprietà subtitle.

2. Nell'elemento H4, poco sopra quello che avete appena cancellato, cambiate "textContent: title" in "textContent: shortTitle."

3. Ora modificate gli stili CSS generati da Visual Studio per diminuire l'altezza dell'overlay nella parte inferiore di ciascuna voce (la casella di colore nero parzialmente trasparente in cui appaiono i titoli della ricetta). Già che ci siamo, modifichiamo anche le dimensioni della ricetta per preservare le proporzioni delle immagini. Iniziate aprendo il file groupedItems.css e modificando le proprietà -ms-grid-rows, height e width come mostrato qui sotto:

.groupeditemspage .groupeditemslist .item {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 48px;
    display: -ms-grid;
    height: 240px;
    width: 320px;
}

4. Poco più giù, nel file groupedItems.css eseguite le seguenti modifiche alla proprietà ms-grid-rows:

.groupeditemspage .groupeditemslist .item .item-overlay {
    -ms-grid-row: 2;
    -ms-grid-rows: 1fr 1px;
    display: -ms-grid;
    padding: 6px 15px 2px 15px;
}

5. Premete F5 per avviare l'applicazione e verificate che gli elementi siano disposti come in figura sotto:

6. Tornate a Visual Studio e interrompete il debug.

Task 2 - modificare la pagina di dettaglio del gruppo

Abbiamo modificato la pagina iniziale per migliorare l'aspetto dell'app, ma è anche necessario modificare la pagina di dettaglio del gruppo. In questo task modificheremo quella pagina per rendere più presentabili i dettagli del gruppo.

1. Avviate nuovamente l'applicazione e toccate "Chinese" nell'angolo superiore sinistro dello schermo per passare alla pagina di dettaglio del gruppo che contiene le ricette cinesi. Noterete che la parola "undefined" appare sopra l'immagine del logo cinese e nelle tile della ricetta. Proprio come prima, il template predefinito è alla ricerca di proprietà che non sono presenti nel nostro modello di dati.

2. Tornate a Visual Studio e interrompete il debug.

3. Aprite il file groupDetail.html. Trovate il DIV la cui classe è "headertemplate" e rimuovete l'elemento H2 la cui classe è "group-subtitle".

4. Ora trovate il template dell'elemento - il DIV con classe "itemtemplate" - che definisce l'aspetto delle miniature delle ricetta sulla metà destra della pagina e rimuovete l'elemento H6 associato al sottotitolo; rimuovete anche l'elemento H4 (associato alla descrizione) che segue l'elemento sottotitolo che abbiamo appena rimosso. Cambiate "textContent: title" in "textContent: shortTitle" nell'elemento H4 restante affinché il template di elemento assomigli a questo:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-info">
        <h4 class="item-title" data-win-bind="textContent: shortTitle"></h4>
    </div>
</div>

5. Adesso aggiungiamo le seguenti istruzioni al posto di quelle appena cancellate, dopo l'elemento H4 e prima del tag di chiusura del DIV:

<h4 class="item-subtitle">
	Preparation time: <span data-win-bind="textContent: preptime"></span> minutes
</h4>

Nota: "preptime" è il nome di una delle proprietà degli oggetti della ricetta caricati dalla app. La stiamo usando per includere informazioni sul tempo di preparazione in ciascuna delle miniature presenti nella pagina delle ricette. Si noti che l'attributo data-win-bind viene utilizzato per associare la proprietà textContent dell'elemento SPAN alla proprietà preptime dell'oggetto ricetta.

6. Aprite il file groupDetail.css e cambiate l'altezza nella classe CSS mostrata in basso a 320px per preservare la proporzione del gruppo di immagini visualizzate nella zona sinistra della pagina:

.groupdetailpage .itemslist .win-groupheader .group-image {
	-ms-grid-row: 2;
	background-color: rgba(147, 149, 152, 1);
	height: 320px;
	margin: 0;
	margin-bottom: 20px;
	width: 480px;
}

7. Sempre nel file groupDetail.css modificate le proprietà -ms-grid-columns e la proprietà width nella classe “.groupdetailpage .grouplist .win-item” mostrata in basso. Questo ridurrà lo spazio fra le ricette e permetterà alle immagini delle ricette di mantenere le proporzioni originali

.groupdetailpage .itemslist .win-item {
	-ms-grid-columns: 147px 1fr;
	-ms-grid-rows: 1fr;
	display: -ms-grid;
	height: 110px;
	width: 360px;
}

8. Avviate l'applicazione e toccate di nuovo "Chinese". Verificate che la pagina di dettaglio del gruppo assomigli a quella qui sotto:

9. Tornate a Visual Studio e interrompete il debug.

Task 3 - modifica la pagina dettagli elemento

Il task finale nella creazione dell'interfaccia utente di base per l'applicazione è quello di modificare la pagina di dettaglio articolo per presentare ulteriori informazioni su ricette, tra cui le istruzioni e gli ingredienti.

1. Eseguite l'applicazione e toccate uno degli elementi della ricetta. Come si vede, dobbiamo eseguire alcuni ritocchi alla pagina di dettaglio degli elementi (la pagina item-detail).

2. Tornate a Visual Studio e interrompete il debug.

3. Aprire itemDetail.html. Individuate l'elemento DIV che ha l'attributo role="main" e modificatelo in modo che assomigli a questo:

<div class="content" aria-label="Main content" role="main">
    <article>
        <div>
            <header>
                <h2 class="item-title"></h2>
            </header>
            <img class="item-image" src="#" />
            <h2>Preparation time: <span class="item-subtitle"></span> minutes
           </h2>
        </div>
        <div class="ingredients">
            <h2>Ingredients</h2>
            <div class="item-ingredients"></div>
        </div>
        <div class="directions">
            <h2>Directions</h2>
            <h2 class="item-directions"></h2>
        </div>
    </article>
</div>

4. La pagina di dettaglio degli elementi (item-detail) non utilizza l'associazione dati dichiarativa; assegna semplicemente le proprietà di una ricetta agli elementi HTML nel file code-behind. Per questo motivo, aprite il file itemDetail.js e sostituite la funzione ready con quella mostrato qui:

ready: function (element, options) {
    var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
    element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
    element.querySelector("article .item-title").textContent = item.title;
    element.querySelector("article .item-subtitle").textContent = item.preptime;
    element.querySelector("article .item-image").src = item.backgroundImage;
    element.querySelector("article .item-image").alt = item.shortTitle;
    // Display ingredients list
    var ingredients = element.querySelector("article .item-ingredients");
    for (var i = 0; i < item.ingredients.length; i++) {
        var ingredient = document.createElement("h2");
        ingredient.textContent = item.ingredients[i];
        ingredient.className = "ingredient";
        ingredients.appendChild(ingredient);
    }
    // Display cooking directions
    element.querySelector("article .item-directions").textContent = item.directions;
    element.querySelector(".content").focus();
}

5. Per completare le modifiche, è necessario anche modificare il CSS della pagina. Aprite il file itemDetail.css e aggiungete le seguenti istruzioni dopo la classe ".itemdetailpage .content article header .item-subtitle":

.itemdetailpage .content article .ingredients {
    -ms-grid-column: 3;
    margin-left: 40px;
}
.itemdetailpage .content article .ingredients .item-ingredients {
    margin-top: 20px;
}
.itemdetailpage .content article .ingredients .item-ingredients .ingredient {
    padding-bottom: 12px;
    font-size: 20px;
}
.itemdetailpage .content article .directions {
    -ms-grid-column: 5;
    margin-left: 40px;
}
.itemdetailpage .content article .directions .item-directions {
    margin-top: 20px;
    font-size: 20px;
}

6. Prima di chiudere il file itemDetail.css, trovate la prima classe ".itemdetailpage .content article" - quella vicino alla parte superiore del file - e sostituitela con quella qui sotto:

.itemdetailpage .content article {
    /* Define a multi-column, horizontally scrolling article by default. */
    column-fill: auto;
    column-gap: 80px;
    column-width: 480px;
    height: calc(100% - 50px);
    margin-left: 120px;
    margin-top: 5px;
    margin-right: 20px;
    display: -ms-grid;
    -ms-grid-columns: 400px 40px 360px 40px 1fr;
}

Nota: Questa modifica rimuove la larghezza fissa, permettendo ai dati delle ricette di espandersi orizzontalmente per riempire la pagina. Imposta anche una griglia di 5 colonne per l'inclusione di elementi del DOM. Il grid layout è descritto nella specifica CSS3 Grid Layout. Se si esamina il CSS aggiunto nel passaggio numero 5, vedrete che abbiamo usato -ms-grid-column per posizionare il DIV che contiene gli ingredienti della ricetta nella colonna 3 della griglia e le istruzioni nella colonna 5. In altre parole, stiamo utilizzando il grid layout per dividere lo schermo in colonne e posizionare il contenuto HTML al loro interno.

7. Infine, trovate la classe ".itemdetailpage .content article .item-image" e rimuovete la proprietà height, in modo che il codice assomiglia a quello qui in basso:

.itemdetailpage .content article .item-image {
    margin-bottom: 3px;
    width: 400px;
}

8. Ora eseguite nuovamente l'applicazione. Toccate "Fried Dumpling" e verificate che la pagina di dettaglio degli elementi assomiglia a quella in figura 11.

9. Tornate a Visual Studio e interrompete il debug.

Riassunto

In questo lab abbiamo creato un nuovo progetto di un'app Windows Store basata su un grid layout in Visual Studio, abbiamo sostituito i dati di esempio con dati reali, abbiamo sostituito gli elementi di branding predefiniti con quelli specifici per l'applicazione e abbiamo personalizzato l'interfaccia utente modificando alcuni file HTML, CSS e JavaScript forniti da Visual Studio. Inoltre, abbiamo toccato con mano come è strutturato un progetto e come i vari componenti si integrano fra loro.

Abbiamo anche imparato come la funzione WinJS.xhr può essere utilizzata per caricare i dati da un'origine locale o remota, come i dati possono essere associati a un controllo ListView per eseguire il rendering di elementi di dati sullo schermo, e come i modelli di dati vengono utilizzati per specificare come gli elementi di dati sono sottoposti a rendering in HTML. Modificando i template di dati e il CSS corrispondente, abbiamo personalizzato il modo con cui le ricette e i gruppi di ricette vengono presentati all'utente.

È un ottimo inizio, ma c'è da fare di più per rendere Contoso Cookbook un'app Windows Store di prima classe. Il viaggio continua nel lab 2.