Guida introduttiva: Aggiunta di controlli di stato (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
I controlli di stato rappresentano un modo per segnalare che l'app sta eseguendo operazioni, come il download di immagini, il caricamento di file o l'elaborazione di dati. Gli stili disponibili per i controlli di stato sono diversi, così come sono diversi i modi disponibili per aggiungerli in un'app di Windows Runtime in JavaScript.
Prerequisiti
Partiamo dal presupposto che tu sappia come creare un'app di Windows Runtime di base in JavaScript. Per istruzioni sulla creazione della tua prima app, vedi Creazione della prima app di Windows Runtime in JavaScript. Per istruzioni sulla creazione dei tuoi primi controlli e sull'aggiunta dei gestori di eventi, vedi Guida introduttiva: Aggiunta di controlli e gestori di eventi.
Stili dei controlli di stato
Esistono tre stili per i controlli progress che indicano all'utente quando la quantità di lavoro da completare è nota, quando non lo è e se l'attività è modale: la barra di stato determinato, la barra di stato indeterminato e l'anello di stato indeterminato.
| Barra di stato determinato: mostra lo stato di avanzamento dell'app. A mano a mano che il lavoro avanza, un colore riempie progressivamente la barra da sinistra verso destra. | .png "Una barra di stato determinato") |
| Barra di stato indeterminato: indica che l'utente può interagire con l'interfaccia utente mentre l'attività prosegue. Nell'animazione compaiono alcuni puntini che avanzano da sinistra verso destra lungo una traccia, finché non raggiungono la fine della traccia e scompaiono. | .png "Una barra di stato indeterminato") |
| Anello di stato indeterminato (solo per Windows): indica che l'attività dell'utente è bloccata finché l'app non completa la sua attività; in altre parole, l'attività è modale. Nell'animazione i puntini tracciano un cerchio spostandosi in senso orario. | .png "Un anello di stato indeterminato") |
Aggiungere una barra di stato determinato
Una barra di stato determinato mostra lo stato di avanzamento dell'app. Con l'avanzamento dell'operazione, la barra si riempie. Se puoi stimare la quantità di lavoro rimanente in tempo, byte, file o con altre unità di misura quantificabili, usa una barra di stato determinato. Per altre info su quando usare una barra di stato determinato, vedi Linee guida ed elenco di controllo per i controlli di stato.
La barra di stato include 3 proprietà per impostare e determinare lo stato:
| Proprietà | Descrizione |
|---|---|
Un numero che specifica il valore di completamento. Il valore predefinito è 1.0. |
|
Un numero che specifica lo stato corrente. Se devi mostrare lo stato di un download di file, questo valore potrebbe rappresentare il numero di byte scaricati (dopodiché devi impostare la proprietà max sul numero totale di byte da scaricare). |
|
(Sola lettura) L'indicatore di stato corrente, che è value diviso per max. |
Per creare una barra di stato determinato
Per creare una barra di stato determinato, devi creare un elemento di stato e impostare la relativa proprietà value. Se non vuoi usare il valore di completamento predefinito 1.0, puoi cambiarlo impostando la proprietà max. Questo esempio crea una barra di stato determinato e imposta le relative proprietà value su 30 e max su 100. La barra di stato risultante indica che l'operazione è completa al 30%.
<progress id="determinateProgressBar" value="30" max="100"></progress>
Per aggiornare il valore di una barra di stato determinato
Nell'esempio precedente è stato dimostrato come specificare il valore di una barra di stato nel markup. In un'app vera e propria, devi usare il codice JavaScript per aggiornare il valore della barra di stato in risposta a un qualche indicatore di stato. Se la barra di stato indica il numero di file scaricati, ad esempio, devi aggiornare il valore ogni volta che viene scaricato un altro file.
Questo esempio aggiorna il valore di una barra di stato.
var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;
Aggiungere una barra di stato indeterminato
Usa una barra di stato indeterminato se non hai la possibilità di stimare il lavoro rimanente per completare un'attività e l'attività in corso non blocca le interazioni con l'utente. Anziché visualizzare una barra che si riempie progressivamente fino al completamento dell'operazione, una barra di stato indeterminato visualizza una serie di punti animati che progrediscono da sinistra a destra. Per altre info su quando usare una barra di stato indeterminato, vedi Linee guida ed elenco di controllo per i controlli di stato.
Per creare una barra di stato indeterminato
Per creare una barra di stato indeterminato, devi creare un elemento di stato senza specificare un valore o un massimo.
<!-- Create an indeterminate progress bar -->
<progress></progress>
Aggiungere un anello di stato indeterminato (solo per Windows)
Usa un anello di stato indeterminato se non hai la possibilità di stimare il lavoro rimanente per completare un'attività e l'attività in corso impedisce le interazioni con l'utente. Un anello di stato indeterminato mostra una sequenza di punti animati che si muovono in cerchio. Per altre info su quando usare un anello di stato indeterminato, vedi Linee guida ed elenco di controllo per i controlli di stato.
Per creare un anello di stato indeterminato
Per creare un anello di stato indeterminato, devi creare un elemento di stato senza specificare un valore o un massimo e impostare la relativa classe su win-ring.
<progress class="win-ring"></progress>
La classe win-ring è uno degli stili inclusi nella libreria Windows per JavaScript.
L'esempio seguente mostra come creare un anello di stato indeterminato che visualizza anche testo.
<label class="progressRingText">
<progress class="win-ring withText"></progress>Processing</label>
Ecco gli stili CSS che accompagnano l'esempio precedente.
progress.withText
{
color: inherit; /* Uses the same text color as the page */
vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}
/* Text style for a label for the progress ring */
.progressRingText
{
font-family: "Segoe UI";
}
/* Text style for a label for a default size progress ring */
.progressRingText
{
font-size: 11pt;
line-height: 15pt;
}
/* The margin to separate the ring and its label */
.progressRingText progress
{
margin-right: 5px;
}
Riepilogo e passaggi successivi
Hai imparato a creare diversi tipi di controlli di stato.
Nel prossimo argomento, Come applicare stili ai controlli di stato, imparerai a usare le classi CSS e WinJS per applicare stili ai controlli progress.
Vedi poi Linee guida ed elenco di controllo per i controlli di stato per ottenere informazioni più dettagliate su quando e come usare il controllo progress.