Guida introduttiva: Definizione dei layout delle app (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 ]
Puoi definire layout dell'app per qualsiasi dimensione o orientamento delle finestre.
Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità delle app dall'inizio alla fine: Interfaccia utente delle app di Windows Store, dall'inizio alla fine
Obiettivo: Dopo aver consultato questo articolo avrai una buona conoscenza di come usare HTML, CSS (Cascading Style Sheet) e JavaScript per creare un'interfaccia utente fluida che abbia un bell'aspetto e funzioni bene in tutti gli stati di visualizzazione.
Prerequisiti
Pensa a un progetto per la tua app.
Per informazioni sulla pianificazione e progettazione di un'app di Windows Runtime, vedi Definizione della visione.
Impara tutto sulle finestre ridimensionabili in Windows 8.1.
Per informazioni sugli stati di visualizzazione, vedi Linee guida per l'esperienza utente per il layout e la scalabilità.
Devi conoscere le media query CSS.
Le media query sono definite in Specifiche media query del World Wide Web Consortium (W3C). Puoi vedere le media query in azione nell'esempio di media query CSS.
Impara a usare i fogli di stile CSS, le funzionalità avanzate di layout di Level 3 (CSS3), in particolare Allineamento delle griglie CSS3.
Altre informazioni sulle funzionalità avanzate CSS3 e Allineamento griglie sono disponibili in CSS.
Il layout adattivo con l'esempio CSS
Questo articolo illustra i concetti fondamentali nella definizione del layout dell'app descrivendo come i layout vengono implementati nel layout adattivo con l'esempio CSS. Questo esempio è la simulazione di un'app meteo che visualizza le condizioni meteo del giorno corrente e le previsioni per dieci giorni. Dimostra come usare CSS e HTML, la griglia CSS, il controllo ListView e le query media CSS per creare un layout fluido dell'app.
Prima di entrare nei dettagli, vediamo la struttura del layout adattivo con l'esempio CSS. L'app è composta da tre pagine HTML. La prima è una pagina di livello principale denominata App.html che definisce la superficie principale degli elementi di interfaccia utente dell'app. Include un pulsante Indietro, un titolo e un sottotitolo, un menu app, i pulsanti della barra dell'app e un'area per la visualizzazione del contenuto (l'area bianca nell'immagine seguente).
.png "La pagina principale dell'app di esempio")
La altre due pagine HTML Current.html e TenDay.html, definiscono la struttura del contenuto visualizzato nell'area di contenuto della pagina principale. La pagina Current.html visualizza i dettagli delle condizioni meteo del giorno corrente:
.png "La pagina delle condizioni meteo correnti")
La pagina TenDay.html visualizza i dettagli delle previsioni meteo dei dieci giorni successivi:
.png "La pagina delle previsioni dei dieci giorni successivi")
Ci concentreremo sulle parti del layout adattivo con l'esempio CSS che definiscono il layout della pagina principale dell'app e il layout delle previsioni per i dieci giorni.
Ecco l'aspetto della pagina principale dell'app quando si visualizza la previsione per i dieci giorni su un display da 10,6" con una risoluzione di 1366 x 768 con orientamento verticale e orizzontale a schermo intero e affiancata a un'altra app con layout a larghezza ridotta e a larghezza maggiore.
.png "Layout verticale, orizzontale a larghezza ridotta e a larghezza maggiore")
Verifica che l'app si adatti all'area disponibile della schermata
Un'app ben progettata ha una superficie dell'interfaccia utente che usa tutta l'area della schermata disponibile. All'inizio potrebbe sembrare difficile data la vasta gamma di fattori forma, risoluzioni e orientamenti dei dispositivi a cui un'app deve adattarsi. Fortunatamente CSS semplifica questo aspetto.
Per verificare che l'app si adatti a tutta l'area disponibile della schermata:
Usa un elemento div come contenitore di primo livello per tutti gli altri elementi dell'interfaccia utente nella pagina.
<body> <div class="win-ui-dark appGrid"> <!-- TODO: Define page structure here. --> </div> </body>Usa le proprietà CSS, vw e vh, per impostare le proprietà width e height dell'elemento div relativamente al riquadro. Usa ad esempio
100vw(larghezza del riquadro) e100vh(altezza del riquadro) per riempire il riquadro come illustrato qui..appGrid { width: 100vw; height: 100vh; /* TODO: Add other styles here. */ }vw e vh possono essere specificati per ogni elemento indipendentemente dalla profondità della gerarchia. Poiché il contesto di dimensionamento del riquadro non cambia, non è necessario tenere conto delle dimensioni ereditate.
Nota Nell'esempio le proprietà width e height sono impostate su 100%.
Definire il layout fondamentale della pagina principale
Quando definisci il layout dell'interfaccia utente della tua app, è meglio iniziare con l'orientamento orizzontale. Dopo aver definito il layout orizzontale, è facile adattarlo per quello verticale e per i layout a larghezza ridotta.
Usare HTML per definire gli elementi dell'interfaccia utente per la pagina
L'interfaccia utente di un'app in genere contiene elementi come pulsanti di spostamento, intestazioni, menu, controlli e così via. Aggiungi questi elementi dell'interfaccia utente come elementi HTML figli dell'elemento div di primo livello della pagina.
L'HTML seguente definisce gli elementi dell'interfaccia utente per il layout adattivo con l'esempio CSS della pagina di primo livello dell'app. Gli elementi includono il pulsante Indietro, titolo e sottotitolo, menu app, area principale del contenuto e i pulsanti della barra dell'app.
<body>
<div class="win-ui-dark appGrid">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron"></span></span>
<span class="win-type-x-large pagesubtitle">Rainer</span>
</h1>
</header>
<div id="headerFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
</div>
<div class="appViewContentMask">
<div class="appViewContent">
<div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
<div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
</div>
</div>
</div>
<div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
</div>
</body>
Usare le griglie CSS per posizione gli elementi dell'interfaccia utente nella pagina HTML
Uno dei modi migliori per ottenere un layout fluido ed adattabile dell'interfaccia utente è usare le griglie CSS. Questo perché la griglia può espandersi automaticamente per riempire lo spazio a disposizione ed espone una vasta gamma di proprietà che facilitano la personalizzazione del layout dell'interfaccia utente per le diverse dimensioni delle finestre. Dato che la posizione degli elementi nella griglia non dipende dall'ordine in cui sono stati specificati — in altre parole, dato che la loro posizione è dettata puramente da CSS piuttosto che dall'ordine nel markup HTML — è facile disporre diversamente gli elementi su diverse dimensioni della schermata o differenti orientamenti o evitare di visualizzare interamente degli elementi in alcuni layout.
Definizione del layout della pagina principale
L'app layout adattivo con l'esempio CSS applica una griglia CSS all'elemento divdi primo livello sulla pagina App.html impostando la proprietà display di div
-ms-grid. La griglia di primo livello definisce la struttura generale per posizionare gli elementi dell'interfaccia utente nella pagina principale dell'app.Nella fase successiva l'app di esempio definisce le colonne e le righe della griglia impostando il valore delle proprietà -ms-grid-columns e -ms-grid-rows.
Il codice CSS seguente applica una griglia all'elemento div di primo livello nella pagina principale dell'esempio. La griglia è usata per posizionare gli elementi che definiscono l'intestazione dell'app (pulsante Indietro, titolo e sottotitolo e menu app) e per impostare la posizione nell'area di contenuto principale.
.appGrid { display: -ms-grid; -ms-grid-columns: 120px 1fr; -ms-grid-rows: 120px 1fr; /* Other properties omitted for clarity. */ }Il codice CSS precedente crea una griglia con due colonne e due righe. La larghezza della prima colonna è di 120 pixel e la seconda colonna è un'"unità frazionaria". Questo significa che la larghezza della colonna si espande automaticamente per riempire lo spazio disponibile che non è occupato dalla prima colonna. Le righe sono definite in modo simile.
L'illustrazione mostra come la griglia divide la pagina principale dell'app:
.png "La griglia della pagina principale")
Successivamente il layout adattivo con l'esempio CSS imposta la posizione degli elementi dell'interfaccia utente assegnando ogni elemento a una cella specifica della griglia. A questo scopo, nell'esempio vengono applicate le proprietà -ms-grid-column e -ms-grid-row agli elementi nella pagina. La griglia CSS supporta diverse altre proprietà per posizionare gli elementi relativamente ai limiti della cella e consentire agli elementi di estendersi su più colonne o righe. Per altre informazioni, vedi Layout a griglia.
Il seguente codice CSS posiziona l'elemento header della pagina principale dell'app di esempio in colonna 1, riga 1 della griglia di primo livello e consente all'elemento di espandersi su entrambe le colonne della griglia. Il codice crea anche una griglia "figlio" in colonna 1, riga 1 della griglia di primo livello. La griglia figlio viene usata per posizionare gli elementi individuali che definiscono l'intestazione (pulsante Indietro, titolo e sottotitolo e menu dell'app).
header[role=banner] { -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 2; /* Child grid for positioning header items.*/ display: -ms-grid; -ms-grid-columns: 120px 1fr; -ms-grid-rows: 1fr; }Il codice precedente crea una griglia nell'area evidenziata in blu nell'immagine seguente.
.png "La griglia figlio per l'intestazione dell'app esempio")
Il layout adattivo con l'esempio CSS usa elementi div nidificati per definire l'area del contenuto principale in cui viene visualizzata la previsione corrente e la previsione per dieci giorni:
<div class="appViewContentMask"> <div class="appViewContent"> <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div> <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div> </div> </div>Nota che nell'esempio precedente il controllo HtmlControl della libreria Windows per JavaScript viene usato per includere in modo dinamico le pagine HTML per le previsioni correnti e per dieci giorni. Per informazioni sui controlli WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Il codice CSS seguente posiziona
appViewContentMaskdiv nella colonna 2, riga 2 della griglia di primo livello. Inoltre, imposta proprietà per verificare che il contenuto riempia l'intera cella della griglia e che il contenuto che non si adatta alla cella sia nascosto..appViewContentMask { -ms-grid-column: 2; -ms-grid-row: 2; width: 100%; height: 100%; overflow: hidden; /* Other properties omitted for clarity. */ }Il codice CSS seguente trasforma
appViewContentdiv in una griglia figlio contenente un'unica cella che riempie l'area definita daappViewContentMaskdiv. L'uso di una griglia figlio semplifica il flusso di contenuto quando lo stato di visualizzazione cambia la dimensione o l'orientamento dell'app..appViewContent { width: 100%; height: 100%; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; }Il codice CSS assegna la griglia per l'area di contenuto all'area evidenziata in blu:
.png "La griglia nell'area di contenuto dell'app di esempio")
Definire il layout fondamentale della previsione per dieci giorni
La previsione per dieci giorni è una raccolta di elementi che sono gestiti e visualizzati usando un controllo ListView WinJS. Ogni elemento è composto da un'immagine e un set di stringhe, tra cui data, temperature alta e bassa, temperatura "percepita" e probabilità di neve:
.png "Layout degli elementi nella previsione per dieci giorni")
La pagina HTML seguente definisce l'interfaccia utente per gli elementi nella previsione per dieci giorni. L'esempio di layout adattivo con CSS usa i modelli e l'associazione dati WinJS per fornire i dati al controllo ListView. Questo argomento è incentrato sulla definizione del layout dell'interfaccia utente, quindi non parleremo di modelli e associazione dati. Per altre informazioni sui modelli e l'associazione di dati, vedi Come usare modelli per associare dati.
<body>
<div class="tenDayPage">
<div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
<div class="tenDayGrid">
<div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
</div>
<div class="tenDayImg">
<img data-win-bind="src: imgSrc" />
</div>
<div class="win-type-x-large tenDayHighLow">
<span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
<span>/</span>
<span class="tenDayLow" data-win-bind="innerHTML: low"></span>
</div>
<div class="tenDayFeelsLike">
<span>Feels like </span>
<span data-win-bind="innerHTML: feelsLike"></span>
</div>
<div class="tenDayChanceOfSnow">
<span>Chance of snow is </span>
<span data-win-bind="innerHTML: chanceOfSnow"></span>
</div>
</div>
</div>
<div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
</div>
</body>
Nota che nell'esempio precedente vengono usate speciali WinJS CSS classes for typography per impostare una dimensione carattere molto grande per la data e le stringhe di temperatura alta/bassa. Questo è il significato di class="win-type-x-large" negli elementi tenDayDate e tenDayHighLow div.
L'app di esempio usa il seguente codice CSS per verificare che la pagina TenDay.html e il relativo controllo ListView riempia il contenitore padre (l'area di contenuto della pagina principale dell'app).
/* Size Page to full size of parent container */
.tenDayPage
{
height: 100%;
}
/* List View Control */
.tenDayListView
{
width: 100%;
height: 100%;
}
Usare le query media CSS per applicare i layout e gli stili specifici della visualizzazione
Usando le query media CSS, puoi definire facilmente diversi stili da applicare agli elementi HTML nell'app in base alle dimensioni delle finestre. Puoi usare una query media distinta per ogni layout oppure puoi unire query media per applicare lo stesso set di stili a più layout. Ecco la descrizione delle media query usate dall'esempio di layout adattivo con CSS per definire il layout della pagina principale e gli elementi nella previsione per dieci giorni.
Definizione del layout della pagina principale per un layout a larghezza ridotta
Se usi l'app di esempio, noterai che le dimensioni e il layout degli elementi dell'interfaccia utente non cambiano molto tra layout verticale, orizzontale e ridimensionati larghi. Quando la larghezza dell'app viene impostata su un valore inferiore a 500 pixel, noterai, tuttavia, le modifiche seguenti:
- Gli elementi dell'interfaccia utente nell'intestazione dell'app diventano più piccoli.
- Il layout cambia da due colonne e due righe a una singola colonna in cui l'intestazione occupa la prima riga e l'area del contenuto principale occupa la seconda riga.
.png "Differenze di layout dell'intestazione tra layout a larghezza ridotta e a larghezza maggiore")
Queste modifiche vengono applicate tramite una query media CSS che definisce un diverso set di stili specificamente per le larghezze ridotte:
@media (max-width:499px) {
.appGrid {
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 120px 1fr;
width: 100%;
height: 100%;
}
header[role=banner] {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-columns: 60px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
header[role=banner] .win-backbutton {
-ms-grid-column: 1;
-ms-grid-row: 1;
margin-left: 20px;
margin-top: 75px;
}
header[role=banner] .titlearea {
-ms-grid-column: 2;
-ms-grid-row: 1;
margin-top: 69px;
max-width: 260px;
}
.appViewContentMask {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
Nel codice CSS precedente un nuovo valore per la proprietà –ms-grid-columns modifica la griglia principale dell'app (appGrid) da due colonne a una. Inoltre, il codice CSS definisce una griglia figlio per gli elementi nell'intestazione dell'app e posiziona gli elementi dell'intestazione nella nuova griglia. Infine, il codice si sposta nell'area del contenuto (appViewContentMask) dalla colonna 2, riga 2 della griglia precedente alla colonna 1, riga 2 della nuova griglia.
Definizione del layout della previsione per dieci giorni per un layout a larghezza ridotta
Noterai delle modifiche nel layout dei singoli elementi nella previsione per dieci giorni quando ridimensioni l'app impostando una larghezza inferiore a 500 pixel. Quando la larghezza è maggiore di 500 pixel, gli elementi vengono disposti verticalmente usando una griglia a singola colonna. Quando la larghezza è minore di 500 pixel, gli elementi passano a un orientamento orizzontale usando una griglia a due colonne.
L'immagine successiva mostra l'aspetto di un elemento nella previsione per dieci giorni nei diversi layout.
.png "Differenze di layout degli elementi tra layout a larghezza ridotta e a larghezza maggiore")
Per ottenere i diversi layout, nell'esempio vengono usate le query media CSS per applicare gli stili basati sullo stato della visualizzazione corrente. Nell'esempio viene definito un insieme di stili comuni tra tutti gli stati di visualizzazione e un altro insieme solo per i layout in cui la larghezza è minore di 500 pixel:
/* Styles that are common across all view states */
.tenDayGrid
{
width: 190px;
height: 250px;
overflow: hidden;
padding: 10px;
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: (auto)[5];
}
.tenDayDate
{
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.tenDayImg
{
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.tenDayHighLow
{
-ms-grid-column: 1;
-ms-grid-row: 3;
}
.tenDayFeelsLike
{
-ms-grid-column: 1;
-ms-grid-row: 4;
}
.tenDayChanceOfSnow
{
-ms-grid-column: 1;
-ms-grid-row: 5;
}
}
/* Define the template for the width less than 500px */
@media (max-width:499px)
{
.tenDayDate
{
font-weight: 600;
}
.tenDayDate > .day
{
font-weight: 200;
}
.tenDayHighLow
{
font-weight: 300;
}
.tenDayFeelsLike, .tenDayChanceOfSnow
{
font-weight: 300;
}
.tenDayGrid
{
width: 250px;
height: 150px;
overflow: hidden;
padding: 10px;
display: -ms-grid;
-ms-grid-columns: auto 1fr;
-ms-grid-rows: (auto)[4];
}
.tenDayDate
{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
}
.tenDayImg
{
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
}
.tenDayHighLow
{
-ms-grid-column: 2;
-ms-grid-row: 2;
}
.tenDayFeelsLike
{
-ms-grid-column: 2;
-ms-grid-row: 3;
}
.tenDayChanceOfSnow
{
-ms-grid-column: 2;
-ms-grid-row: 4;
}
}
Uso di JavaScript per elaborare gli eventi di ridimensionamento della finestra, se necessario
È meglio definire il più possibile del layout dell'app usando CSS e query media. Tuttavia, talvolta sarà necessario usare JavaScript per gestire i problemi di layout che CSS non può affrontare.
Ad esempio, nell'esempio viene usato un controllo ListView WinJS per visualizzare gli elementi nella previsione per dieci giorni e modificare il controllo ListView tra modalità elenco e griglia in base alla larghezza dell'app. Quando la larghezza dell'app di esempio è maggiore o uguale a 500 pixel, ListView usa le modalità griglia per riversare gli elementi verticalmente e orizzontalmente per riempire il contenitore padre. Quando la larghezza dell'app è inferiore a 500 pixel, ListView usa la modalità elenco per disporre gli elementi in un elenco verticale.
Per creare layout specifici per la visualizzazione in JavaScript, registra un listener di eventi per l'evento di ridimensionamento della finestra. Nel codice del listener di eventi interroga la proprietà clientWidth e configura di conseguenza il layout.
Nell'esempio seguente il layout adattivo con CSS imposta ListView sulla modalità griglia. Se la larghezza della finestra è inferiore a 500 pixel, ListView passa alla modalità elenco. Il listener di eventi dell'app rimane in ascolto dell'evento di ridimensionamento e quindi interroga la proprietà clientWidth, modificando di conseguenza ListView.
function ready(element, options) {
element.winControl = this;
var that = this;
WinJS.UI.process(element).done(function () {
that.listView = element.querySelector(".tenDayListView").winControl;
var itemTemplate = element.querySelector(".tenDayTemplate");
var listViewLayout = new WinJS.UI.GridLayout();
if (document.body.clientWidth <= 499) {
listViewLayout = new WinJS.UI.ListLayout();
}
else {
element.style.opacity = "0";
}
// ...
window.addEventListener("resize", tenDayResize, false);
});
}
function tenDayResize(e) {
var listview = document.querySelector(".tenDayListView").winControl;
if (document.body.clientWidth <= 499) {
if (!(listview.layout instanceof WinJS.UI.ListLayout)) {
listview.layout = new WinJS.UI.ListLayout();
}
}
else {
if (listview.layout instanceof WinJS.UI.ListLayout) {
listview.layout = new WinJS.UI.GridLayout();
}
}
}
Riepilogo
Ora dovrebbe essere chiaro come usare HTML, CSS e JavaScript per creare un'interfaccia utente fluida che abbia un bell'aspetto e funzioni bene con tutte le dimensioni delle finestre.
Argomenti correlati
Esempio di layout adattivo con CSS