Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne

Costruire un'interfaccia utente sensibile e moderna con i CSS per applicazioni WinJS

Rachel Appel

Lavorare con i CSS lascia molti sviluppatori frustrati perché è piena di sfumature. Anche piccoli cambiamenti a un selettore o elemento HTML spesso propagano e influenzano l'altro. Cercando di tenere il CSS pulito ed efficace può essere abbastanza difficile, considerando le sue stranezze numerabile — specialmente quando la destinazione più browser. Per fortuna, se si sta sviluppando la libreria Windows per applicazioni JavaScript (WinJS), il CSS costruito per i modelli di progetto Visual Studio è flessibile ma coerente e gestibile. I modelli di progetto Visual Studio contengono codice che è il fondamento di una progettazione dell'interfaccia utente sensibile e moderno.

CSS integrato per applicazioni Windows Store

Tutti i modelli di progetto per le app di Windows Store con JavaScript contengano due fogli di stile di base o temi — scuro (impostazione predefinita) e la luce — in file ui-dark. css e ui-light, rispettivamente. Questi file sono parte di un set di base di file di progetto nella cartella CSS nel nodo Riferimenti del progetto Visual Studio . Ci sono quasi 4.000 linee di CSS nel nucleo del file CSS perché essi costruire un'interfaccia utente che segue tutti i principi del design dell'interfaccia utente di Windows, tra cui rispondendo a Windows Vista di snap e cambiamenti di tipo di supporto. Si non dovrebbe cercare di modificare i fogli di stile incorporati (sono di sola lettura), ma invece di sovrascrivere gli stili incorporati nel file CSS.

Per utilizzare le app di Windows Store CSS incorporato, aggiungere il seguente riferimento alla testa < > sezione di qualsiasi pagina (nota che "2.0" nel link è per Windows 8.1, mentre "1.0" sarebbe stato utilizzato per Windows 8):

    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

Due barre all'inizio del percorso indicano un riferimento a una libreria di base di WinJS (noto anche come "librerie condivise," in contrasto con i file di progetto locali nel vostro pacchetto app). Percorsi in Windows App Store con JavaScript che iniziano con una singola barra denotano il percorso inizia alla cartella principale del progetto, e le singole barre fare riferimento ai file di progetto locali.

App di Windows Store con JavaScript impiegano i prefissi fornitore ampi (ad esempio, ms-griglia, - flexbox e così via) affinché il più tecnologicamente avanzato CSS è disponibile da utilizzare nelle applicazioni. Altri CSS hi-tech che troverete in un app WinJS sono colori RGBA CSS3, tipi di carattere Web Open Font Format (WOFF) e media query.

Controlli WinJS stile con i CSS

Controlli WinJS sono estensioni degli elementi HTML, così è lo stile WinJS controlli con i CSS, proprio come si farebbe qualsiasi tag HTML. I modelli di progetto Visual Studio contengono riferimenti al CSS che crea stili moderni di interfaccia utente per ogni elemento HTML e controllo WinJS, sapori chiari e scuri. Naturalmente, lei non associati a questi stili e sono liberi di modificarli come vedete la misura per completare la vostra azienda o marchiatura o tema. Tuttavia, è importante mantenere una coerenza con la nuova interfaccia utente di Windows per non confondere gli utenti.

Figura 1 viene illustrato il codice per diversi comuni e base HTML e WinJS controlli utilizzando temi chiari e scuri, rispettivamente. Figura 2 viene illustrato l'output di questo codice.

Figura 1 il codice HTML di base e controlli WinJS

    <div id="grid">
      <div style="-ms-grid-column: 1; -ms-grid-row: 1">
        <label for="textbox">Textbox:</label>
        <input id="textbox" type="text" />
      </div>                   
      <div style="-ms-grid-column: 2; -ms-grid-row: 1">
        <label for="button">Button:</label>
        <button id="button" value="Button">Clickety Click</button>
      </div>
      <div style="-ms-grid-column: 1; -ms-grid-row: 2">
        <label for="radio">Radio:</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">One</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">Two</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">Three</label>
      </div>                   
      <div style="-ms-grid-column: 2; -ms-grid-row: 2">
        <label for="select">Select:</label>
        <select id="select">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
         </select>
      </div>                                  
      <div style="-ms-grid-column: 2; -ms-grid-row: 3">
        <label for="rating">Rating:</label>
          <div id="rating" data-win-control="WinJS.UI.Rating"></div>
      </div>
      <div style="-ms-grid-column: 1; -ms-grid-row: 3">
        <label for="toggle">Toggle:</label>
        <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
      </div>  
      <div style="-ms-grid-column: 1; -ms-grid-row: 4">
        <label for="datepicker">Date Picker:</label>
        <div id="datepicker" data-win-control="WinJS.UI.DatePicker"></div>
      </div>                     
     <div style="-ms-grid-column: 2; -ms-grid-row: 4">
        <label for="timepicker">Time Picker:</label>
        <div id="timepicker" data-win-control="WinJS.UI.TimePicker"></div>
      </div>
    </div>

Figura 2 HTML comuni e controlli WinJS nel buio e luce stili di Default

Come si vede dall'esame Figura 2, stili predefiniti per i controlli riflettono la nuova interfaccia utente di Windows. Un elenco completo dei controlli HTML e WinJS è disponibile Windows Dev Center all'indirizzo bit.ly/w1jLM5.

Per un'approfondita il paesaggio di controllo WinJS, vedere l'articolo, "Mastering controlli e impostazioni in Windows Store Apps costruito con JavaScript," a msdn.microsoft.com/magazine/dn296546. Nel frattempo, guarderò linee guida di stile per alcuni importanti Controlli: AppBars, riquadri a comparsa e ListView.

AppBars AppBars sono componenti essenziali dell'interfaccia utente di qualsiasi applicazione Windows Store. Selettori CSS esistono per lo styling di ogni aspetto di un AppBar, compreso il AppBar come insieme e le singole etichette dei pulsanti, immagini e descrizioni comandi per entrambi regolari e Stati hover. Questo significa che si ottiene il controllo totale sopra l'aspetto di AppBars. Una volta che tu hai in stile AppBar stesso sovrascrivendo la classe .win-appbar, si può passare ai singoli comandi. Perché AppBar pulsanti sono controlli WinJS, l'attributo data-win-options contiene tutte le informazioni necessarie per impostare correttamente i pulsanti di comando impostando l'etichetta, icona, proprietà sezione e tooltip:

    <div id="appbar" class="win-appbar"
      data-win-control="WinJS.UI.AppBar">
      <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
          id:'addFriend',
          label:'Add Friend',
          icon:'addfriend',
          section:'global',
          tooltip:'Add a friend'}"
        type="button">
      </button>
    </div>

Si può fare AppBar sguardo notevolmente differente dalla striscia predefinito semplice attraverso la parte inferiore dello schermo modificando gli stili dei selettori di classe seguente:

• .Win-appbar: Stili AppBar nel suo complesso.
• .Win-comando: Un AppBar Button singoli stili.
• .Win-commandimage: Stili l'immagine del pulsante di comando.
• .Win-commandring: Stili l'anello intorno al AppBar Button.
• .Win-commandimage:hover e .win-commandring:hover: L'immagine del pulsante di comando in stile e anello stati hover.

Come potete vedere, ci sono stili per ogni aspetto della AppBar.

Riquadri a comparsa riquadri a comparsa sono interattive finestre di pop-out. Nelle applicazioni Windows Store, è solitamente implementare riquadri a comparsa per raccogliere l'input dell'utente, spesso come parte del fascino di impostazioni dell'applicazione. Riquadri a comparsa sono un ottimo modo per implementare le impostazioni o tenere alcuni dati utente raramente accessi. Ad esempio, è possibile utilizzare per fornire un'informativa sulla privacy, necessaria per l'accettazione di un'app in Windows Store. Lo stile di un riquadro a comparsa è facile come sovrascrivendo il selettore .win-riquadro a comparsa. Il sistema CSS contiene impostazioni relativi a larghezza e altezza relativi, quindi se avete bisogno di raccogliere un'intera forma di dati, potrebbe essere necessario regolare queste.

Il riquadro a comparsa è un < div > elemento che rimane nascosto e fuori dalla vista, fino a quando l'utente richiama da un fascino o AppBar comando, e poi si apre sullo schermo. Anche se altri controlli vivono all'interno dei riquadri a comparsa, styling quei controlli non cambia, perché sono solo HTML.

ListView molto probabilmente il più complesso controllo WinJS, ListView offre un modo per visualizzare più elementi di dati in un elenco o una griglia. ListView rispondere anche toccare e gli eventi del mouse avviata dall'utente, permettendo all'utente di selezionare un elemento o richiamare un'azione. A partire da Windows 8.1, il controllo ListView consente agli utenti di trascinare e riordinare elementi.

Prima di lavorare con il controllo ListView, è necessario sapere come funziona. Il controllo ListView coinvolge quattro principali parti in movimento: ListView stessa e la viewport, superficie e gli elementi. Gli elementi presenti all'interno dell'area di superficie, che è l'area di scorrimento del controllo ListView. L'area della superficie esiste e si muove all'interno della finestra, quindi ha senso che la finestra ha le barre di scorrimento, come illustrato nel Figura 3.

Figura 3 che la finestra e la sua superficie si combinano per rendere il controllo ListView

Insieme, viewport e la sua superficie ricca di elementi formano il controllo ListView. Poiché il controllo ListView contiene queste parti funzionalmente distinte, ci sono molte indicazioni dettagliate per lo styling di esso, delineato in Windows Dev Center presso bit.ly/­HopfUg. Per ora, mi guarderò alle più importanti cose da sapere sulla styling del controllo ListView:

• .Win-listview: Stili l'intero oggetto ListView.
• .Win-finestra: Stili di visualizzazione del controllo ListView.
• .Win-superficie: Stili l'area di scorrimento del controllo ListView.

Queste parti mobili consentono di fare cose come applicare uno sfondo immagine che scorre lungo con gli elementi. Quando la superficie è più grande di viewport, viewport Mostra le barre di scorrimento (verticale o orizzontale, se necessario).

Styling elementi ListView è semplice. Ci sono classi .win-voce e .win-contenitore da utilizzare. Ogni elemento in un controllo ListView va in un contenitore che contiene l'immagine dell'elemento e campi di testo. Questo contenitore è davvero solo un modello HTML definiscono gli elementi che si uniscono per creare un elemento in un controllo ListView. Il codice in Figura 4 viene illustrato come definire quel modello e sua ListView corrispondente. Crea un controllo WinJS.Binding.Template, che il controllo ListView viene utilizzato per visualizzare i dati.

Figura 4 codice per definire un modello e suo corrispondente ListView

    <div id='listviewtemplate' class="itemtemplate" 
      data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#"
          data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
          <h4 class="item-title" data-win-bind="textContent: title"></h4>
          <h6 class="item-subtitle win-type-ellipsis"
             data-win-bind="textContent: subtitle"></h6>
        </div>
      </div>
    </div>
    <div class="groupeditemslist win-selectionstylefilled"
      aria-label="List of groups"
      data-win-control="WinJS.UI.ListView"
       data-win-options="{ selectionMode: 'none' }">
    </div>

Come si può vedere Figura 4, ci sono < div > elementi che compongono il modello di elemento di ListView costruito in modelli di progetto Grid e Split. In fase di esecuzione, il motore di esecuzione dell'applicazione inietta .win-contenitore e classi .win-elemento in questi elementi, così non vedrete quei selettori in codice durante lo sviluppo, ma si possono sovrascriverli nel file CSS per applicare gli stili. Nel codice di ListView su modello di progetto, .item, .item-immagine, .item-titolo, sottotitolo-.item e .item-sovrapposizione sono tutti disponibili come selettori è possibile modificare per specificare l'aspetto di ogni singolo elemento all'interno della griglia.

Nessun elenco o griglia è completa senza la capacità di ordinare, raggruppare ed eseguire altre azioni che interessano i suoi membri. Così, naturalmente, ci sono stili per gli elementi raggruppati come pure quelli individuali. Le intestazioni di gruppo di stile sovrascrivendo il selettore di classe .win-groupheader e mostrare progressi in stile sovrascrivendo .win-progresso.

CSS fluido è per interfacce utente reattive

I progetti Grid, Split e navigazione in Visual Studio contengono selettori CSS WinJS che lavorano in tandem con elementi semantici HTML5 per garantire un layout fluido e moderno. Il codice in Figura 5 illustrato il CSS e HTML per creare il layout di griglia da modello Grid necessaria. Avviso la classe .fragment definisce le righe e colonne per una griglia utilizzando i prefissi -ms-grid-colonne e righe-griglia--ms. Si applica poi questi prefissi e altri selettori a < div > elementi in Figura 5. La semantica < intestazione > e < sezione > elementi chiaramente definiscono quale tipo di contenuto va in ciascuno.

Nella figura 5 la fondazionale HTML e CSS per un frammento di pagina

    .fragment {
      /* Define a grid with rows for a banner and a body */
      display: -ms-grid;
      -ms-grid-columns: 1fr;
      -ms-grid-rows: 128px 1fr;
      height: 100%;
      width: 100%;
    }
      .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title.
    */
        display: -ms-grid;-ms-grid-columns: 39px 81px 1fr;
        -ms-grid-rows: 1fr;
      }
      .fragment header[role=banner] .win-backbutton {
        -ms-grid-column: 2;
        margin-top: 59px;
      }
      .fragment header[role=banner] .titlearea {
        -ms-grid-column: 3;
        margin-top: 37px;
      }
      .fragment header[role=banner] .titlearea .pagetitle {
        width: calc(100% - 20px);
      }
      .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
      }
    <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">CSS in Windows Store apps</span>
        </h1>
      </header>
      <section aria-label="Main content" role="main">
        <div class="groupeditemslist win-selectionstylefilled"
           aria-label="List of groups"
           data-win-control="WinJS.UI.ListView"
           data-win-options="{ selectionMode: 'none' }">
      </div>
      </section>
    </div>

Perché questo CSS è parte della griglia e dividere i modelli di progetto, non devi preoccuparti di prendere il noioso compito di creare una tabella di fluido che cambiamenti basati su modifiche nei dati o lo stato dell'app — è incorporato.

Modelli di app di Windows Store JavaScript utilizzano il modello di box CSS (vedi mio post del blog, "Una guida per elemento di visualizzazione e posizionamento con i CSS Box Model," a bit.ly/xxATgL) per il layout della pagina e il layout di griglia CSS (vedi dettagli sul sito World Wide Web Consortium [W3C] a bit.ly/14yzx2h) per creare un'interfaccia utente sensibile. Si noti la griglia cambia in un elenco verticale e nuovamente in una griglia su cambia tra snap e vista completa.

La maggior parte dei modelli di progetto predefiniti nelle applicazioni Windows Store approfittare di CSS media query per fornire un'interfaccia utente sofisticata che risponde ai cambiamenti nel dispositivo e dimensioni del browser, l'orientamento e risoluzione. Se volete saperne di più su media query, vedere il mio blog post, "Creare il layout del sito mobile con CSS Media query," a bit.ly/1c39mDx.

Un altro motivo Windows Store apps che fanno uso di media query è dovuta a stati di quattro diversi vista supporto Windows 8 per le applicazioni: completo, snap, riempito e ritratto. Quando gli utenti mettere un app in snap o riempito di vista, è concettualmente lo stesso accesso a app da un dispositivo diverso, perché sia le dimensioni e l'orientamento del browser cambia abbastanza drasticamente.

Momento dell'ispezione CSS incorporato, troverete molte regole di @media per gli Stati di visualizzazione quattro app pure per quanto riguarda l'alto contrasto e visualizzazione di stati accessibili. Ecco le media query snap di rilevare gli Stati di visualizzazione e fullscreen-ritratto:

    @media screen and (-ms-view-state: snapped) {}
    @media screen and (-ms-view-state: fullscreen-portrait) {}

Solitamente, il CSS stesso che funziona per vista funziona piena vista (tre quarti dello schermo) pure. La query precedente rappresentano due caratteristiche multimediali più popolari nel Regno delle app di Windows Store, ma ci sono molte più funzioni multimediali sul sito del W3C, al bit.ly/gnza0F.

App Store Windows utilizzare CSS efficienti e organizzati

Guardate i selettori CSS incorporati di i modelli di Visual Studio e si noterà che sono nitide e precise. Specificità nel CSS (in qualsiasi codice, davvero) si traduce in applicazioni più performante e più facile da mantenere. Quando si vede ".fragment intestazione [ruolo = banner]" nel codice, sapere esattamente quali elementi si applica — in questo caso, un < header > elemento con un attributo role con un valore di "banner" all'interno di un elemento classificato come "frammento". Tenete a mente che browser analizzare CSS da destra a sinistra, quindi il selettore più specifico dovrebbero andare sul lato destro, quindi il browser può trovare il corrispondente elemento DOM più veloce.

Piuttosto che utilizzare script per attivare e disattivare gli indicatori visivi, sfruttando alcune caratteristiche CSS come pseudo-selettori per hover, attivo, disabili, abilitati e altri stati visivi assicura più facile manutenzione. WinJS definisce pseudo-selettori come necessario per molti controlli. Ad esempio, caselle di testo e caselle di controllo può passare tra gli stati attivati e disattivati, e ancore possono passare da Tucows e stati attivi. Ci sono anche più animazioni CSS Windows 8.1 (bit.ly/KDVSPU), quindi controllare fuori prima di girare a JavaScript per fare le animazioni stesse.

Efficienza significa file appropriata organizzazione così come codice efficiente. Vive di un file denominato Default. css nella cartella \css, e tutte le pagine HTML incorporate contengono riferimenti ad esso. Il CSS si vede in Figura 5 vive in questo file, a fianco di regole di stile normale, così come i media query. È possibile modificare o eliminare default. CSS, a differenza dei file ui-dark. css e ui-light.

Visual Studio di modelli di progetto organizzano i file in cartelle che contengono elementi correlati, ad esempio GroupedItems. html, raggruppati­Items. js e GroupedItems. css nella cartella \pages\groupedItems a fianco di altre strutture simili. È possibile continuare a organizzare i file in cartelle in questo modo, ma è anche possibile riordinare i file in qualsiasi modo che desideri. Forse si sta riorganizzando la struttura del progetto perché si vuole provare utilizzando il pattern Model-View-ViewModel (MVVM), e in tal caso, il file CSS potrebbero andare in una cartella diversa. Forse si vuole buttare tutti i CSS in una cartella invece. Non importa, purché l'organizzazione di file ha un senso per il progetto ed è facile da mantenere.

Per ragioni di leggibilità, scoppiano CSS in file separati organizzati dai loro funzionalità o caratteristiche. Ad esempio, si potrebbe avere CSS per un singolo controllo utilizzato da molte pagine, ad esempio un riquadro a comparsa. Tale file può andare in una cartella comune CSS o può andare nella stessa cartella del riquadro a comparsa. Non c'è niente di peggio di aratura attraverso un file CSS riempito con CSS che non ha nulla a che fare con le pagine che fanno riferimento ad esso. Ad esempio, CSS che soddisfi i seguenti criteri merita proprio file:

• CSS per un controllo specifico del riquadro a comparsa o una pagina di impostazioni.
• CSS contenente solo i colori e l'estetica, come questo permette di creare temi. Si può quindi scambiare dentro e fuori i file CSS come campioni di colore su una base come-necessaria.
• CSS in media query per uno scenario specifico come snap o riempite viste. Questo CSS può andare nel proprio file nella stessa directory della pagina che vi fa riferimento.

In questo modo è possibile utilizzare ogni unità funzionale dei CSS come si necessità piuttosto che dover caricare tutti i CSS per ogni pagina se la pagina utilizza i CSS o non. Ricordate, queste sono sola linee guida e ogni progetto è unico e può avere esigenze diverse.

Progetti di app Store di Windows eseguire codice che è locale al dispositivo anziché scaricando il CSS o script in primo luogo, quindi non non c'è alcuna necessità di aggregare e minify CSS e script come si farebbe in un progetto Web. Naturalmente, l'app deve caricare il codice nella memoria prima dell'esecuzione, quindi vuoi evitare codice gonfio per ragioni di leggibilità e di prestazioni.

Concentrarsi sulla costruzione di App

Styling molti controlli integrati WinJS è un gioco da ragazzi perché il framework offre caratteristiche all'avanguardia di CSS3 e HTML5. Il nucleo CSS in WinJS crea un'interfaccia utente moderna, fluida e flessibile che risponde ai cambiamenti nello stato di visualizzazione app quando l'utente passa tra viste completa e snap. Avendo il nucleo WinJS CSS disponibili fuori dalla scatola, significa che si può concentrarsi sulla costruzione app piuttosto che giocherellare con i CSS strutturali per creare un'interfaccia utente in stile moderno.

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI. Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros. Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta. Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

Si ringraziano i seguenti esperti tecnici per aver rivisto questo articolo： Eric Schmidt (Microsoft)