Esercizio 1: Creare un app Windows Store

Nel primo esercizio creeremo una nuova soluzione in Visual Studio contenente un progetto di un'applicazione Javascript Grid Windows Store. Poi esamineremo i file generati da Visual Studio e faremo alcune semplici modifiche per personalizzare l'interfaccia utente dell'applicazione.

Task 1 - Creare il progetto

Il primo passo è quello di creare un nuovo progetto che ospiti il codice e le risorse che compongono l'applicazione Contoso Cookbook ed esaminare ciò che Visual Studio vi include.

1. Avviate Visual Studio e utilizzare il comando File - New Project per creare un nuovo progetto JavaScript denominato ContosoCookbook. Assicuratevi di selezionare Windows Store dall'elenco dei template JavaScript e di selezionare Grid App dall'elenco dei tipi di modello, come mostrato nella Figura 1.

2. Selezionate Start debugging dal menu Debug (o semplicemente premete F5) per avviare l'applicazione nel debugger. L'applicazione si avvierà e apparirà la schermata illustrata in Fgura 2. Questa è la home page o start page dell'applicazione.

3. Usate un po' con l'applicazione. Per cominciare, usate il mouse (o un dito se utilizzate un touch-screen) per scorrere la schermata in senso orizzontale.

Nota: Lo scorrimento orizzontale è gestito da un controllo ListView. Se siete curiosi di sapere come viene dichiarato, aprite il file groupedItems.html nella cartella pages\groupedItems e cercate il DIV con l'attributo data-win-control="WinJS.UI.ListView" verso la fine della pagina. Senza questo attributo, sarebbe un semplice DIV. Con quell'attributo, invece, diventa un controllo ListView che supporta l'associazione di dati e la formattazione da template. In background, quando si richiama WinJS.UI.processAll(), la Windows Library per JavaScript (rappresentata dal namespace WinJS) analizza il DOM, ravvisa l'attributo dati-win-control e converte il DIV in un ListView.

4. Provate a vedere cosa succede quando si tocca o si fa clic su uno degli elementi ListView. Ad esempio, toccate la voce chiamata Item Title: 1 per visualizzare la schermata mostrata in Figura 3. Questa è la item-detail page.

Nota: Windows 8 è descritto come un sistema operativo touch-first, ma supporta bene anche dispositivi di input tradizionali, come mouse e stilo. Da questo punto in avanti, quando si dirà "toccare" qualcosa sullo schermo, è necessario sottintendere che non si deve avere un touch screen per farlo. Basterà un semplice clic del mouse.

5. Tornate alla pagina iniziale dell'applicazione toccando il tasto indietro (la freccia nel cerchio a sinistra) nell'angolo superiore sinistro dello schermo.

6. Premete Group Title: 1 sotto ContosoCookbook nell'angolo superiore sinistro della pagina iniziale per visualizzare la group-detail page (Figura 4).

7. Tornate a Visual Studio (se state usando un touch screen, il modo più semplice per farlo è quello di eseguire uno swipe da sinistra a destra partendo dal bordo sinistro dello schermo; se si preferisce usare la tastiera, premete il tasto Windows + D o Alt+tab) e selezionate Stop Debugging dal menu Debug per arrestare l'applicazione.

Task 2 - acquisire familiarità con il progetto

Quando Visual Studio genera il progetto crea autonomamente diversi elementi. In particolare, genera diverse pagine HTML con allegati codice CSS e JavaScript, la logica e l'interfaccia utente per navigare tra le pagine e dati di esempio. Per implementare Contoso Cookbook, sfrutteremo ciò che ha creato Visual Studio. Ma prima di procedere oltre, familiarizziamo con la struttura del progetto e con gli asset creati da Visual Studio.

1. Nella finestra Solution Explorer, controllate la cartella delle pagine. Troverete tre sottocartelle, ognuna corrispondente a una delle pagine dell'applicazione:

• groupedItems, che contiene i file di codice sorgente per la start page dell'app;
• itemDetail, che contiene i file di codice sorgente per la pagina di dettaglio degli elementi (item-detail page);
• groupDetail, che contiene i file di codice sorgente per la pagina di dettaglio del gruppo (group-detail page).

2. In aggiunta alle tre pagine nella cartella pagine, il progetto contiene una pagina chiamata default.html, che ospita le altre pagine. Aprite il file default.html ed esaminate il DIV nell'elemento BODY. Esso definisce l'area del contenuto in cui sono visualizzate le altre pagine.

Nota: L'elemento BODY contiene un secondo DIV commentato. Questo DIV, il cui ID è "appbar", rappresenta la barra contenente i pulsanti o "comandi", che corrispondono alle azioni comuni che gli utenti possono eseguire nell'applicazione. Negli articoli successivi, dovrete decommentare questo DIV e aggiungervi dei comandi.

3. Esaminate il contenuto della cartella js del progetto. Ecco una veloce analisi dei file che vi si trovano:

• data.js, che contiene i dati di esempio e il codice per associare questi dati ai controlli;
• default.js, che contiene il “code-behind” per il file default.html;
• navigator.js, che contiene le funzioni di supporto per la navigazione.

4. Date uno sguardo alla cartella images del progetto: troverete le risorse utilizzate per il branding dell'applicazione.

Task 3 - personalizzare la pagina iniziale

Attualmente, il nome del progetto - ContosoCookbook - appare nella parte superiore della pagina iniziale. Modifichiamo il testo affinché mostri le parole "Contoso Cookbook".

1. Aprite il file groupedItems.html in Visual Studio

2. Trovare l'elemento SPAN la cui classe è "pagetitle" e cambiate "ContosoCookbook" in "Contoso Cookbook," come mostrato di seguito:

<span class = "pagetitle">Contoso Cookbook</span>

3. Premete F5 per avviare l'applicazione nel debugger e accertatevi che il testo del titolo nella parte superiore della pagina iniziale sia stato modificato (figura 5).

4. Tornate a Visual Studio e utilizzare il comando Stop debugging per chiudere l'applicazione.

Task 4 - personalizzare il Branding

Se andate adesso sulla schermata Start di Windows 8, vedrete che c'è una tile chiamata ContosoCookbook. Questa è la tile principale (primary tile) dell'applicazione. Viene creata quando l'applicazione è stata installata, ossia la prima volta che l'applicazione è stata avviata da Visual Studio. L'immagine sulla tile deriva dal file logo.png nella cartella images. In questo task, sostituiremo il logo generato da Visual Studio con uno più adatto ad un'applicazione di questo tipo. Sostituiremo il file png nella cartella immagini per definire in modo univoco il brand dell'applicazione e modificheremo il manifesto dell'applicazione stessa.

1. Nella schermata Start di Windows, fate clic destro sulla tile ContosoCookbook (o utilizzare un dito per trascinarla un po' verso il basso prima di lasciarla andare) e selezionate "Uninstall" per disinstallare l'applicazione e rimuovere la tile.

2. Tornare a Visual Studio e fate clic destro sulla cartella immagini. Quindi utilizzate il comando Add - Exisisting Item per importare i file Logo.png, SmallLogo.png, SplashScreen.png, StoreLogo.png e WideLogo.png dalla cartella Images dei materiali utilizzati in questi articoli. Quando richiesto, concedete l'autorizzazione a sovrascrivere i file.

3. Nel Solution Explorer fate doppio clic su package.appxmanifest per aprire il manifesto dell'applicazione.

Nota: Il manifesto dell'applicazione contiene i metadati riguardanti un app Metro style ed è incorporato in ogni applicazione. All'avvio, il manifesto indica a Windows 8 tutto ciò che ha bisogno di sapere sull'app, tra cui il nome dell'applicazione, il publisher e quali funzionalità richiede l'applicazione, compreso l'accesso a webcam, microfoni, Internet e parti del file system - in particolare, le librerie documenti, musica e video dell'utente.

4. Modificate il nome dell'applicazione e la sua descrizione in "Contoso Cookbook" come mostrato in figura 6. Indicate anche "images\widelogo.png" nella casella Wide Logo per dotare l'applicazione di una tile ampia.

5. Premete F5 per avviare l'applicazione.

6. Analizzate l'avvio dell'applicazione. Lo splash screen (lo schermo che è mostrato brevemente mentre si carica la app) è diverso da quello prima?

7. Andate alla schermata iniziale di Windows 8 e assicuratevi che contenga una tile come quella qui sotto.

Nota: Se si preferisce una tile quadrata, fate clic destro sulla tile (o, su un touch screen, trascinatela leggermente e lasciatela andare) e quindi fate clic su "Smaller" nella barra dell'applicazione.

8. Tornate a Visual Studio e fermate il debug.