Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne

Creazione di app Windows Store con HTML5 e JavaScript

Rachel Appel

Scarica il codice di esempio

Non solo ha il sogno di Bill Gates' di un computer su ogni scrivania e in ogni casa è venuto a compimento, ma l'avvento di dispositivi quali tablet superficie ha preso ancora di più il suo sogno. Oltre la superficie, c'è stata un'esplosione di nuovi consumatori -­oriented dispositivi in ogni possibile fattore di forma. In altre parole, i computer sono ovunque.

Si consideri che su tali computer sono più di 1 miliardo installazioni Windows esistenti in tutto il mondo, con 300 milioni licenze di Windows 7 vendute ogni anno nei due anni precedenti. L'installazione di Windows corrente, aggiornabile base si combinano con la rapida crescita del mercato di Windows 8 dispositivi quali la superficie e hai la formula per il successo di monetizzazione. Questo è Windows ricostituita — l'ineguagliabile opportunità per fare soldi pubblicando apps nell'archivio di Windows.

La piattaforma, la lingua e il set di strumenti per la creazione di applicazioni Windows Store

Al fine di creare un app Store di Windows, è necessario Windows 8, Visual Studio 2012 e qualsiasi SDK specifici per le esigenze della vostra applicazione, ad esempio Windows Live SDK o Bing Maps SDK. Questo sistema minimale installazione e configurazione di semplice app per lo sviluppo su Windows 8, dall'installazione alla distribuzione.

Una volta installato il software necessario, è il momento di spostare sulla scelta di una lingua. Se il tuo background di sviluppo si trova nello stack Microsoft di sviluppatore Microsoft .NET Framework Windows Forms, Windows Presentation Foundation (WPF) o applicazioni Silverlight con C# o Visual Basic, quindi la creazione di applicazioni Windows Store con XAML e c# o Visual Basic è il percorso di minor resistenza. Sviluppatori C++ possono anche utilizzare C++ come linguaggio compilato con XAML come suo compagno GUI.

Se sei uno sviluppatore Web — compresi ASP.NET— è possibile applicare le tue conoscenze esistenti di open standard HTML5, JavaScript e CSS3 direttamente allo sviluppo di app Store di Windows. Gli sviluppatori Web possono continuare a utilizzare molti popolari librerie JavaScript terze parti come ad esempio jQuery o Knockout. Per questo articolo, userò il JavaScript come linguaggio di scelta.

Non importa dove si trova il vostro sfondo lo sviluppo, la barriera di ingresso è bassa quando lo sviluppo di applicazioni native per Windows 8. Questo è perché il Windows Runtime (WinRT) è una piattaforma che contiene le API che si siedono in cima i servizi di base di Windows, come illustrato nel Figura 1.

Figura 1 architettura di Windows Store Apps

L'APIs WinRT dà accesso a tutto ciò che Windows 8 ha da offrire, tra cui le API per hardware come webcam incorporata, Geolocalizzazione, sensori di luce e accelerometri. Naturalmente, fondamenti di piattaforma come ad esempio la gestione della memoria, l'autenticazione, la globalizzazione e l'elaborazione asincrona — così come la funzionalità di app Store di Windows quali ricerca, condivisione e comunicazione — sono inoltre disponibili facilmente. Ci sono anche le API per la manipolazione di audio e video; Tuttavia, se stai scrivendo applicazioni JavaScript, HTML5 <audio> e <video> elementi di grande lavoro. È possibile sfogliare le API completa sulla pagina "Riferimento API per le applicazioni Windows Store" a bit.ly/ZCwcJE.

Principi di un App Store di Windows

Windows Store apps eseguire come esperienze completamente immersive, full-screen che offrono contenuto semplificato per l'utente, senza l'app o suoi comandi sempre nel senso dell'utente. Windows Store apps offrono un ambiente pulito, semplice visualizzazione dei dati che attira l'attenzione dell'utente per il contenuto.

Windows Store apps fare cose tradizionale Windows o Web apps non poteva fare prima, come la condivisione, ricerca e comunicare con a vicenda in modo facile e unificato, utilizzando elementi di Runtime Windows chiamato contratti come liaison tra le applicazioni.

Grande UX è un aspetto chiave dello sviluppo di app Store di Windows, dalla presentazione e layout per le prestazioni di navigazione e app. Gli utenti si aspettano coerenza tra applicazioni e applicazioni e il sistema operativo. Windows Store apps sono tutti di UX e impiegando i principi di progettazione — ad esempio, utilizzando un carattere coerenza, la silhouette di interfaccia utente di Windows e un sistema scalabile griglia — migliorare il livello di comfort dell'utente quando si utilizza il tuo app. Questa coerenza è trasportata in tutto sia applicazioni e Windows 8 stessa.

Garantendo mouse e touch input di lavoro affidabile e costantemente è importante perché gli utenti hanno ora più modi per interagire con i dispositivi informatici in forma di topi, penne, touch, telecamere e sensori.

Perché dispositivi alimentati a batteria con processori come ARM stanno diventando una parte importante del panorama informatico, Windows 8 deve gestire la memoria totale e per-app in maniera rigorosa per consentire un'esperienza veloce e fluida anche quando le risorse sono basse. Windows 8 apps godere un processo semplice e semplice del ciclo di vita per garantire la migliore esperienza.

Mentre molte applicazioni funzioneranno bene come un app Store di Windows, non ogni app è un buon candidato. Per esempio, mentre Visual Studio si abbraccia molti principi di progettazione dell'interfaccia utente moderni, il suo scopo è di permettere all'utente di eseguire comandi (in altre parole, programmazione). Che non è una buona misura per un app Store di Windows.

Visual Studio 2012 Windows Store App Project Templates

Visual Studio 2012 ha introdotto una serie di nuovi modelli per lo sviluppo di app Store Windows in C#, Visual Basic, C++ e JavaScript. Indipendentemente dalla lingua, sono disponibili i seguenti stili di template:

• Vuoto: Un modello scarno con i minimi file necessari per costruire un app Store di Windows.
• Griglia: Un modello che consente di visualizzare una griglia che utilizza la silhouette di Windows 8 UI insieme al codice del template per diverse funzioni, tra cui supporto vista spezzato (più su questo più tardi) e navigazione.
• Split: Un modello che visualizza un elenco di elementi e dettagli in vista di due colonne, che lo rende facile per l'utente di passare rapidamente tra gli elementi.
• Fisso: Un modello vuoto che utilizza un oggetto ViewBox nella pagina di default. Un ViewBox è un oggetto WinRT utilizzato nei giochi.
• Navigazione: Un modello con una struttura di progetto vuoto plus navigazione e un insieme di attività di base app (che è, Home. html, home.js e home.css) sotto /home directory.

Poiché il modello di griglia contiene codice che bagarini molte caratteristiche di Windows 8 grande come il supporto per vista bloccato, il ridimensionamento dello schermo e la navigazione, è il modo perfetto per iniziare la scrittura di applicazioni Windows Store.

Dopo aver creato un nuovo modello di progetto JavaScript Grid, esaminando la struttura rivela un progetto completo di tipi di file standard Web — ad esempio i file. html, CSS e js — organizzati in cartelle nella radice del progetto. È possibile quindi eseguire il debug ed eseguire un app Store di Windows premendo F5 o scegliere Avvia debug dal menu Debug.

Nei modelli di app Store Windows, default. html è la pagina di partenza per un app Store di Windows e dispone di un file di script di compagno, /js/default.js, che contiene il codice di gestione di processo di base del ciclo di vita. Come con qualsiasi altro file HTML, default. html è il codice si potrebbe aspettare, inclusi i riferimenti agli script e nuovi HTML5 markup semantico che definisce la struttura della pagina. Il seguente frammento di codice vive all'interno di default <body> etichetta e usi WinJS controlli per la navigazione e per caricare la pagina di groupedItems.html:

<div id="contenthost"
  data-win-control="Application.PageControlNavigator"
  data-win-options=
  "{home: '/pages/groupedItems/groupedItems.html'}"></div>

I dati-* gli attributi sono il modo di HTML5 per applicare il codice personalizzato o un comportamento a un elemento HTML e nello sviluppo di app Store Windows, dati - vittoria-* gli attributi si riferiscono solitamente ai controlli di Windows JavaScript. Windows JavaScript controlli sono componenti WinRT incorporati che si applicano a HTML gli elementi per migliorare o modificare il loro comportamento o stile. Dati - vittoria-* gli attributi sono prevalenti in applicazioni Windows Store JavaScript, soprattutto quando associazione dati.

Accesso ai dati nelle applicazioni Windows Store

Come parte del modello di griglia, un file denominato data.js nella cartella /js contiene codice che costruisce un data set di matrici, nonché le funzioni di raggruppamento e manipolazione dei dati. Il file data.js contiene anche i dati di esempio che è necessario sostituire con il proprio. In questo articolo, io uso dei dati per un app di conto alla rovescia che indica il numero di giorni rimanenti fino a un evento come una vacanza o una vacanza.

Nel file data.js è possibile trovare l'unico / / TODO Commento vicino all'inizio del file. Sostituire il codice sotto il commento con il vostro, così il codice sembra qualcosa come il frammento di codice seguente, che effettua una chiamata XMLHttpRequest per recuperare dati JSON, poi crea anche il set di dati, incluse le proprietà dinamiche come ad esempio i campi daysToGo e messaggio:

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

All'inizio del data.js è una linea di codice che crea un'istanza di un oggetto WinJS.Binding.List giustamente chiamato elenco e il codice precedente spinge singoli elementi su questa lista.

L'oggetto elenco consente l'associazione tra dati JSON o matrici di JavaScript e gli elementi HTML. Una volta che la variabile elenco viene popolata con i dati, utilizzare le espressioni di associazione nel markup HTML per associare i membri dell'elenco di elementi HTML.

Quando si leggono i dati JSON con una chiamata a JSON. Parse, i nomi di coppie nome/valore corrispondono proprietà di oggetti JavaScript in fase di esecuzione. I seguenti dati JSON dimostra come la struttura JSON mappe ai membri della variabile di elementi nel frammento di codice precedente. Tutti i campi chiave, titolo, Count, immagine, colore e gruppo mappa alla proprietà item dell'oggetto:

[{"key":"1","group":{"key":"group1","title":"Important Dates"},
"title":"Rachel's Birthday","eventDate":"01/13/2013",
"image":"/images/birthday.png","color":"#6666FF"},
{"key":"2","group":{"key":"group1","title":"Important Dates"},
"title":"Ada Lovelace Day","eventDate":"10/16/2013",
"image":"/images/ada.jpg","color":"#fff"},
{"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
"eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"},
{"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
{"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
"eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"},
{"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

Ora che hai caricato i dati, è necessario assicurare che l'oggetto elenco è associato agli elementi HTML corretti. Modifiche per il /pages/groupedItems/groupedItems.html paginano Figura 2 Mostra associazione dati in azione.

Figura 2 dati vincolante l'oggetto elenco di elementi HTML con i controlli WinJS

<!-- These templates are used to display each
  item in the ListView declared below.
-->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
  <button class="group-header win-type-x-large win-type-interactive"
    data-win-bind="groupKey: key"
    onclick="Application.
navigator.pageControl.
navigateToGroup(
      event.srcElement.groupKey)"
      role="link" tabindex="-1" type="button">
    <span class="group-title win-type-ellipsis"
      data-win-bind="textContent: title"></span>
    <span class="group-chevron"></span>
  </button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
  <div id="myitem" class="item"
    data-win-bind="style.background: color">
    <img class="item-image" src="#"
      data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
    <h2 class="item-title" data-win-bind="innerText: message"></h2>
      <h6 class="item-subtitle"
        data-win-bind="textContent: eventDate"></h6>
    </div>
  </div>
</div>
<!-- The content that will be loaded and displayed.
-->
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">How long until...</span>
    </h1>
  </header>
    <section aria-label="Main content" role="main">
      <div id="listView" class="groupeditemslist"
        aria-label="List of groups"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{  selectionMode: 'multi',
        tapBehavior:'toggleSelect' }"></div>
    </section>
</div>

Ogni elemento HTML in Figura 2 che contiene una vittoria-associare attributi ha un'espressione di associazione che corrisponde a un nome di proprietà della variabile elemento dal frammento di codice precedente, così tutto quello che dovete fare è assicurarsi che le espressioni di associazione corrispondano ai nomi dei campi. Don' t dimenticare di assicurare che si modifica anche le espressioni di associazione alla groupedDetail.html e itemDetails.html pagine così correggere dati verrà visualizzato quando un utente si sposta a loro.

Esecuzione del progetto nel simulatore Windows produce risultati simili a quella in Figura 3. (Per ulteriori informazioni sull'utilizzo del simulatore a bit.ly/M1nWOY.)

Figura 3 sostituire i dati di esempio per fare un App base

Come si può vedere, si può semplicemente sostituire il codice dal modello Visual Studio per l'accesso veloce dei dati. Tuttavia, i progetti sono spesso molto grandi o complessi, rendendo difficile la manutenzione. Se questo è il caso, quindi utilizzare il pattern Model-View-ViewModel (MVVM) per rendere più facile la manutenzione. Questo modello è estremamente ben documentato sul Web.

Mentre il vostro app ora funziona, è approfittare del tempo di molti grandi caratteristiche Windows 8 che può rendere il vostro app spiccano in mezzo alla folla.

L'App Store di Windows di branding

Considerando che il punto focale di Windows 8 è la pagina iniziale, ha un senso per iniziare ci di branding. La pagina iniziale è riempita con piastrelle dal vivo, e non sono solo un mucchio di icone quadrate, neanche. Invece, sono il modo migliore per mettersi in mostra e attirare gli utenti alla tua app. Live tiles sono chiamati "dal vivo" per un motivo, e questo perché si possono visualizzare dinamicamente immagini e informazioni in loro, rendendo ancora più attraente il vostro app.

Windows Store apps richiedono tre immagini separato delle mattonelle con le seguenti dimensioni in pixel:

• Logo: 150 x 150 (tegola standard)
• Ampia Logo: 150 x 310 (ampia tegola)
• Piccolo Logo: 30 x 30 (questo dimostra solo in elenchi di app nell'archivio)

Le immagini possono essere di qualsiasi formato immagine popolare, e quelli con sfondi trasparenti funzionano meglio. Aprire il file package.appxmanifest dalla radice del progetto rivela la tavolozza di configurazione, dove è possibile selezionare le immagini delle mattonelle e impostare i colori di sfondo. Figura 4 illustra entrambi una tegola standard e ampia.

Figura 4 Countdown App Standard e piastrelle ampie

Quando stai configurando le piastrelle è un buon momento per configurare la schermata selezionando solo un'immagine e colore di sfondo — nessun codice è usato. Anche piastrelle e schermate iniziali sono fattori importanti nella tua app di branding, si possono fare molte più cose di marca e lucidare il vostro app, che potete leggere a bit.ly/M4HYmL.

Funzionalità di Windows 8 'Must-Have' per la vostra applicazione

Mentre il vostro app potrebbe funzionare a questo punto, ci sono molte nuove funzionalità e API nell'ecosistema Windows 8 app che si può attingere per rendere davvero vostro app levarsi in piedi fuori. Tratterò brevemente ciascuno.

AppBar una caratteristica essenziale per ogni app è AppBar, che è un WinJS controllo trovato in default. Normalmente, il AppBar rimane fuori dalla vista, ma quando gli utenti fare clic destro o sfiorare dalla parte superiore o inferiore dello schermo, il AppBar Visualizza come una barra nella parte inferiore dello schermo. Figura 5 illustrato il markup per un AppBar contenente tre pulsanti, come pure i loro corrispondenti listener di eventi.

Figura 5 un AppBar con pulsanti per aggiungere, eliminare ed esportazione dei dati

// AppBar markup in default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'addItem', label:'Add',
    icon:'add', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'exportData', label:'Save',
    icon:'save', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'deleteItem', label:'Delete',
    icon:'delete', section:'selection'}" type="button"></button>
</div>
// Script in groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

Comandi globali AppBar dovrebbero trovarsi sul lato destro del AppBar, mentre i comandi contestuali dovrebbero andare a sinistra. Stile AppBar con CSS, in quanto è solo un <div>.

Schioccato vista Windows Store apps può essere eseguito in una modalità chiamato vista bloccato che si verifica quando l'utente "attacca" l'app per il lato sinistro o destro dello schermo o schermo intero. Perché la app ha ora meno bene immobile dello schermo, il tuo app dovrebbe visualizzare solo i dati necessari.

Perché vista spezzò il supporto è costruito nel modello di griglia, è necessario verificare che i dati vengono visualizzati bene mentre spezzato, visualizzando informazioni pertinenti e leggibile. Il AppBar funziona anche mentre l'app è scattato, così che anche potrebbe bisogno stile regolazioni.

Zoom semantico questa nuova funzione touch-friendly di Windows 8 è un modo per aggregare grandi quantità di dati in una vista unica, facile da digerire. Gli utenti richiamare Zoom semantico nei seguenti modi:

• Tocco: Pizzico gesto
• Mouse: Ctrl + rotellina
• Tastiera: CTRL - e Ctrl +

Zoom semantico è più circa la visualizzazione dei dati in modo significativo che assiste con navigazione più semplicemente esponendo una visualizzazione ingrandita di esso. Se c'è un sacco di dati, è meglio per l'utente di avere una veduta, piuttosto che dover scorrere un sovraccarico di informazioni. Considerare come meglio presentare i dati in modo da è più espressivo.

Ricerca e condivisione di ricerca e condivisione dei dati tra le applicazioni sono gli aspetti fondamentali delle moderne applicazioni. Gli utenti possono ora cercare attraverso applicazioni multiple in una sola volta e poi condividere i dati che trovano. O il vostro app può registrarsi come destinazione di quota e accettare i dati che gli utenti condividono da altre applicazioni Windows Store. Mai prima comunicazione app-app è stato così semplice e coerente.

Controlli selezione questi sono i tradizionali controlli di Windows che sono stati aggiornati per una moderna interfaccia utente — come il selettore Apri File o File Salva selezione — o finestre di dialogo di impostazioni che sono state le graffette delle applicazioni di Windows per molte versioni di stampa.

Media perché Windows apps Store è costruito interamente con JavaScript supporto HTML5, <audio> e <video> elementi funzionano allo stesso modo come fanno in normali pagine Web.

Tostare le notifiche notifiche Toast sono un modo per fornire un messaggio momentaneo per l'utente, indipendentemente dal fatto se l'app è in uso o non. Le forme più popolari di notifiche toast sono i popup di avviso e-mail e messaggi di testo su telefoni cellulari. Toast messaggi possono contenere testo e immagini e possono servire come un altro modo per attirare gli utenti alla tua app. È possibile inviare le notifiche stesse allo schermo della serratura di Windows 8 per un rapido scorcio di eventuali messaggi in attesa.

Generazione App

Per ricapitolare, Windows 8 è Windows ricostituita, alcuni dei più grandi cambiamenti nel sistema operativo sporting dal Windows 95, in un mercato senza precedenti. I modelli di progetto Visual Studio integrati consentono di ottenere ha iniziato a pubblicare moneymaking apps più facile e più veloce che mai il più grande mercato per i creatori di app.

Non c'è abbastanza spazio qui per discutere di tutte le caratteristiche impressionanti si potrebbe e dovrebbe utilizzare nel vostro app Store di Windows, quindi mi raccomando di controllare il programma App di generazione (bit.ly/W8GenAppDev). Esso vi guida attraverso il processo di costruzione di un app Store di Windows (o Windows Phone) in 30 giorni, offrendo tecnico gratuito e progettazione consulenze e assistenza insieme ad esclusivi suggerimenti e risorse.

Rachel Appel è un developer evangelist presso Microsoft New York City. Contattarla tramite il suo sito Web a rachelappel.com o via email a rachel.appel@microsoft.com. È anche possibile seguire i suoi ultimi aggiornamenti su Twitter a twitter.com/rachelappel.

Grazie all'esperto tecnica seguente per la revisione di questo articolo: Ian LeGrow