Compartilhar via

Aplicativos modernos

Criar uma interface de usuário dinâmica e moderna com CSS para aplicativos do WinJS

Rachel Appel

Rachel AppelTrabalhar com CSS deixa muitos desenvolvedores frustrados porque ele é cheio de nuances. Até mesmo pequenas mudanças em um seletor ou um elemento HTML geralmente se propagam e afetam outros. Tentar manter o CSS limpo e eficaz pode ser bastante difícil, considerando suas diversas peculiaridades, especialmente quando destinado a vários navegadores. Felizmente, se você estiver desenvolvendo aplicativos da Biblioteca do Windows para JavaScript (WinJS), o CSS interno para os modelos de projeto do Visual Studio é flexível, além de consistente e passível de manutenção. Os modelos de projeto do Visual Studio contêm código que é a base do design de uma interface de usuário dinâmica e moderna.

CSS interno para aplicativos da Windows Store

Todos os modelos de projeto para aplicativos da Windows Store criados com JavaScript contêm duas folhas de estilos ou dois temas básicos, o escuro (padrão) e o claro, nos arquivos chamados ui-dark.css e ui-light.css, respectivamente. Esses arquivos fazem parte de um conjunto central de arquivos de projeto na pasta do CSS sob o nó de referências de projeto do Visual Studio. Existem aproximadamente 4.000 linhas de CSS nos arquivos CSS principais, pois elas constroem uma interface de usuário que segue todos os princípios de design de interface de usuário do Windows, incluindo a resposta à exibição de ajuste do Windows e a alterações de tipo de mídia. Você não deve tentar alterar as folhas de estilos internas (elas são somente leitura), mas, em vez disso, deve substituir os estilos internos em seus próprios arquivos CSS.

Para usar o CSS interno de aplicativo da Windows Store, adicione a seguinte referência à seção <head> de qualquer página (observe que “2.0” no link é para o Windows 8.1, ao passo que “1.0” deve ser usado para o Windows 8):

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

Duas barras no início do caminho indicam uma referência a uma biblioteca principal do WinJS (também chamada de “bibliotecas compartilhadas”, em oposição aos arquivos de projeto locais em seu pacote de aplicativos). Os caminhos nos aplicativos da Windows Store criados com JavaScript que começam com uma única barra indicam que o caminho começa na pasta raiz do projeto, e uma única barra refere-se a arquivos de projetos locais. 

Os aplicativos da Windows Store criados com JavaScript empregam amplos prefixos de fornecedor (por exemplo, -ms-grid, -flexbox e assim por diante), de forma que o CSS mais tecnologicamente avançado esteja disponível para ser usado em aplicativos. Outros CSS de alta tecnologia que você encontrará em um aplicativo do WinJS são cores RGBA de CSS3, fontes de Web Open Font Format (WOFF) e consultas de mídia.

Estilizar controles do WinJS com CSS

Os controles do WinJS são extensões de elementos HTML e, por isso, você deve estilizá-los com o CSS da mesma maneira que faria com qualquer marca HTML. Os modelos de projeto do Visual Studio contêm referências ao CSS que cria estilos de interface de usuário moderna para todos os elementos HTML e controles do WinJS, em ambos os tipos, escuro e claro. É claro que você não está obrigado a usar esses estilos e está livre para modificá-los conforme achar adequado para complementar a identidade visual ou o tema de sua empresa ou de seu produto. Entretanto, é importante manter uma consistência com a nova interface de usuário do Windows para não confundir os usuários.

A Figura 1 demonstra o código para vários controles HTML e WinJS básicos e comuns usando os temas escuro e claro, respectivamente. A Figura 2 mostra a saída desse código.

Figura 1 Código para controles HTML e WinJS básicos

    <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>

Common HTML and WinJS Controls in Dark Default Style
Common HTML and WinJS Controls in Light Default Style
Figura 2 Controles HTML e WinJS comuns nos estilos escuro e claro padrão

Como é possível verificar ao analisar a Figura 2, os estilos de controle padrão refletem a nova interface de usuário do Windows. Uma lista completa de controles HTML e WinJS está disponível no Centro de Desenvolvimento do Windows, em bit.ly/w1jLM5.

Para obter uma visão detalhada do panorama de controles WinJS, consulte minha coluna “Dominando controles e configurações nos aplicativos da Windows Store criados com JavaScript”, em msdn.microsoft.com/magazine/dn296546. Enquanto isso, verificarei nas diretrizes de definição de estilo alguns controles importantes: AppBars, Flyouts e ListViews.

AppBars AppBars são componentes essenciais da interface de usuário de qualquer aplicativo da Windows Store. Os seletores de CSS existem para definir o estilo de cada um dos aspectos de um AppBar, incluindo o AppBar como um todo, bem como os rótulos, as imagens e as dicas de ferramenta de botões individuais para os estados regular e ao passar o mouse. Isso significa que você obtém controle total sobre a aparência dos AppBars. Após definir o estilo do próprio AppBar substituindo a classe .win-appbar, você pode partir para os comandos individuais. Como os botões do AppBar são controles WinJS, o atributo data-win-options contém todas as informações necessárias para configurar os botões de comando maneira apropriada por meio da definição das propriedades de rótulo, ícone, seção e dica de ferramenta:

    <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>

Você pode fazer com que a aparência do AppBar fique muito diferente da faixa simples padrão na parte inferior da tela ajustando os estilos dos seguintes seletores de classe:

  • .win-appbar: Define o estilo do AppBar como um todo.
  • .win-command: Define o estilo de um botão individual do AppBar.
  • .win-commandimage: Define o estilo da imagem do botão de comando.
  • .win-commandring: Define o estilo do contorno do botão do AppBar.
  • .win-commandimage:hover e .win-commandring:hover: Define o estilo da imagem e dos estados do contorno do botão de comando.

Como você pode ver, existem estilos para todos os aspectos do AppBar. 

Flyouts Flyouts são janelas pop-out interativas. Nos aplicativos da Windows Store, você normalmente implementa Flyouts para coletar entradas de usuário, geralmente como parte do botão Configurações do aplicativo. Os Flyouts são uma excelente maneira de implementar configurações ou manter alguns dados que o usuário não acessa com frequência. Por exemplo, você pode usá-los para fornecer uma política de privacidade, necessária para a aceitação de um aplicativo na Windows Store. Definir o estilo de um Flyout é tão simples quanto substituir o seletor .win-flyout. O CSS do sistema contém configurações para .max-width e .max-height; dessa maneira, se você precisar coletar um formulário de dados completo, talvez seja necessário ajustá-las.

O Flyout é um elemento <div> que se mantém oculto e fora do campo de visão até que o usuário o chame a partir de um botão ou um comando do AppBar e, em seguida, ele é exibido na tela. Embora outros controles residam nos Flyouts, a definição de estilo desses controles não muda, pois eles são apenas HTML.

ListView Muito possivelmente o controle WinJS mais complexo, o ListView oferece uma maneira de exibir vários itens de dados em uma grade ou lista. Os ListViews também respondem a eventos de toque e mouse iniciados pelo usuário, o que permite que o usuário selecione um item ou invoque uma ação. Com início no Windows 8.1, o controle ListView permite que os usuários arrastem, soltem e reordenem itens.

Antes de trabalhar com o controle ListView, você deve saber como ele funciona. O controle ListView envolve quatro partes móveis importantes: o próprio ListView, o visor, a área da superfície e os itens. Os itens estão dentro da área da superfície, que é a região rolável do ListView. A área da superfície existe e se move dentro do visor, de forma que faça sentido que o visor tenha barras de rolagem, conforme ilustrado na Figura 3.

The Viewport and Its Surface Area Combine to Make the ListView Control
Figura 3 O visor e sua área de superfície se combinam para formar o controle ListView

Juntos, o visor e sua área de superfície cheios de itens formam o controle ListView. Como o controle ListView contém essas partes operacionalmente diferentes, existem muitas diretrizes detalhadas para definir o seu estilo, e elas estão descritas no Centro de Desenvolvimento do Windows, em bit.ly/­HopfUg. Por enquanto, veremos o que é mais importante saber sobre a definição de estilo do controle ListView:

  • .win-listview: Define o estilo de todo o ListView.
  • .win-viewport: Define o estilo do visor do ListView.
  • .win-surface: Define o estilo da área rolável do ListView.

Essas partes móveis permitem que você faça coisas como aplicar uma imagem de plano de fundo que rola juntamente com os itens. Quando a área da superfície é maior do que o visor, o visor mostra barras de rolagem (vertical ou horizontal, conforme o necessário).

Definir o estilo de itens do ListView é muito simples. Existem as classes .win-item e .win-container para serem usadas. Cada item em um ListView vai em um contêiner que mantém os campos de imagem e texto do item. Esse contêiner é, na verdade, apenas um modelo HTML que define os elementos que se unem para criar um item em um ListView. O código na Figura 4 demonstra como definir esse modelo e seu ListView correspondente. Ele cria um controle WinJS.Binding.Template, que o ListView usa para exibir dados.

Figura 4 Código para definir um modelo e seu ListView correspondente

    <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>

Como é possível verificar na Figura 4, existem elementos <div> que compõem o modelo de item do ListView criado nos modelos de projeto Grade e Dividido. No tempo de execução, o mecanismo de execução do aplicativo injeta as classes .win-container e .win-item nesses elementos e, por isso, você não verá esses seletores no código durante o desenvolvimento, mas poderá substituí-los no arquivo CSS para aplicar seus próprios estilos. No código do ListView do modelo de projeto, .item, .item-image, .item-title, .item-subtitle e .item-overlay estão todos disponíveis como seletores que você pode modificar para especificar a aparência de cada item individual dentro da grade.

Nenhuma lista ou grade está completa sem a capacidade de classificar, agrupar e executar outras ações que afetam seus membros. Portanto, existem estilos para itens agrupados, bem como para itens individuais. Defina o estilo de títulos de grupo substituindo o seletor de classe .win-groupheader e mostre o progresso no estilo substituindo .win-progress.

CSS fluido é para interfaces de usuário dinâmicas

Os projetos de grade, divisão e navegação no Visual Studio contêm seletores de CSS do WinJS que funcionam em conjunto com elementos semânticos do HTML5 para garantir um layout fluido e moderno. O código na Figura 5 mostra o CSS e o HTML necessários para criar o layout de grade a partir do modelo de grade. Observe que a classe .fragment define as linhas e as colunas para uma grade usando os prefixos -ms-grid-columns e -ms-grid-rows. Em seguida, esses prefixos e outros seletores são aplicados aos elementos <div> na Figura 5. Os elementos semânticos <header> e <section> claramente definem o tipo de conteúdo para cada um.

Figura 5 HTML e CSS de base para um fragmento de página

    .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>

Como esse CSS faz parte dos modelos de projeto Grade e Dividido, você não precisa se preocupar em realizar a tediosa tarefa de criar uma grade fluida que é alterada com base nas mudanças feitas nos dados ou no estado do aplicativo — ele é interno.

Os modelos de aplicativos JavaScript da Windows Store usam o modelo de caixa CSS (consulte minha postagem no blog “Um guia para exibição e posicionamento de elementos com o modelo de caixa CSS”, em bit.ly/xxATgL) para definir o layout da página e usam o layout de grade do CSS (consulte detalhes no site da World Wide Web Consortium [W3C] em bit.ly/14yzx2h) para criar uma interface de usuário dinâmica. Observe que a grade é alterada para uma lista vertical e, depois, para uma grade novamente com a alternância entre os modos de exibição de ajuste e tela inteira.

Muitos dos modelos de projeto padrão nos aplicativos da Windows Store aproveitam as consultas de mídia do CSS para fornecer uma interface de usuário sofisticada que responda às alterações de tamanho, orientação e resolução no dispositivo e no navegador. Se desejar saber mais sobre consultas de mídia, acesse minha postagem no blog “Criar layouts de site móvel com as consultas de mídia do CSS”, em bit.ly/1c39mDx.

Outro motivo para os aplicativos da Windows Store usarem consultas de mídia é devido ao suporte do Windows 8 a quatro diferentes estados de exibição para os aplicativos: tela inteira, ajuste, tela preenchida e retrato. Quando os usuários colocam um aplicativo no modo de exibição de ajuste ou tela cheia, isso é conceitualmente igual a acessar o aplicativo a partir de um dispositivo diferente, pois as dimensões e a orientação do navegador são alteradas significativamente. 

Ao inspecionar o CSS interno, você encontrará muitas regras @media para os quatro estados de exibição do aplicativo, bem como para os estados de exibição de alto contraste e acessibilidade. Estas são consultas de mídia que detectam os estados de exibição de ajuste e retrato de tela inteira:

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

Normalmente, o mesmo CSS que funciona para a exibição de tela inteira, também funciona na exibição de tela preenchida (três quartos da tela). As consultas anteriores representam os dois recursos de mídia mais populares no realm de aplicativos da Windows Store, mas existem muitos outros recursos de mídia no site da W3C, em bit.ly/gnza0F.

Aplicativos da Windows Store usam CSS eficiente e organizado

Observe os seletores de CSS internos dos modelos do Visual Studio e você perceberá que eles são agudos e precisos. A especificidade no CSS (em qualquer código, na verdade) resulta em aplicativos mais fáceis de manter e com melhor desempenho. Ao ver “.fragment header[role=banner]” no código, você sabe exatamente a quais elementos ele se aplica — nesse caso, um elemento <header> que possui um atributo de função com um valor de “banner” dentro de um elemento com a classe definida como “fragment”. Lembre-se de que os navegadores analisam o CSS da direita para a esquerda e, por isso, os seletores mais específicos devem estar no lado direito, de forma que o navegador possa localizar o elemento DOM correspondente mais rapidamente.

Em vez de usar o script para alternar os indicadores visuais, aproveitar determinados recursos do CSS, como pseudosseletores para os estados de passagem de mouse, ativo, desabilitado, habilitado e outros estados visuais, garante uma manutenção mais fácil. O WinJS define os pseudosseletores como necessários para muitos controles. Por exemplo, as caixas de texto e as caixas de seleção podem alternar entre os estados desabilitado e habilitado e as âncoras podem alternar entre os estados de passagem de mouse e ativo. Existem mais animações do CSS no Windows 8.1 (bit.ly/KDVSPU). Verifique-as antes de mudar para o JavaScript para fazer as mesmas animações.

Eficiência significa uma organização de arquivos apropriada, bem como um código eficiente. Um arquivo chamado default.css reside na pasta \css e todas as páginas HTML internas contêm referências a ele. O CSS exibido na Figura 5 reside nesse arquivo, juntamente com regras de estilo regulares, bem como consultas de mídia. Você pode modificar ou excluir o default.css, diferentemente dos arquivos ui-dark.css e ui-light.css.

Os modelos de projeto do Visual Studio organizam os arquivos em pastas que contêm itens relacionados, como groupedItems.html, grouped­Items.js e groupedItems.css na pasta \pages\groupedItems, juntamente com outras estruturas semelhantes. Você pode continuar a organizar os arquivos em pastas dessa maneira, mas também pode reorganizá-los da maneira que desejar. Talvez você esteja reorganizando a estrutura do projeto porque deseja tentar usar o padrão MVVM (Model-View-ViewModel) e, nesse caso, os arquivos CSS podem ir para uma pasta diferente. Ou talvez queira colocar todo o CSS em uma única pasta. Isso realmente não importa, contanto que a organização dos arquivos faça sentido para o seu projeto e seja fácil de manter.

Para facilitar a leitura, divida o CSS em arquivos separados organizados de acordo com sua funcionalidade ou seus recursos. Por exemplo, talvez haja CSS para um único controle usado por muitas páginas, como um Flyout. Esse arquivo pode ir para uma pasta de CSS comum ou para a mesma pasta que o Flyout. Não há nada pior do que percorrer um arquivo CSS cheio de CSS que não tem nada a ver com as páginas que fazem referência a ele. Por exemplo, um CSS que atende aos seguintes critérios merece seu próprio arquivo:

  • CSS para um controle Flyout ou uma página de configurações específica.
  • CSS que contém apenas cores e estética, pois isso permite que você crie temas. Depois, você pode alternar os arquivos CSS, como amostras de cores, de acordo com a necessidade.
  • CSS em consultas de mídia para um cenário específico, como modos de exibição de ajuste ou tela cheia. Esse CSS pode ir em seu próprio arquivo no mesmo diretório que a página que faz referência a ele.

Dessa maneira, você pode usar cada unidade funcional de CSS à medida que precisar, em vez de ter de carregar todo o CSS para cada uma das páginas, independentemente de a página usar CSS ou não. Lembre-se de que isso são apenas diretrizes, e que cada projeto é único e pode apresentar necessidades diferentes.

Os projetos de aplicativos da Windows Store executam código que seja local para o dispositivo, em vez de baixar o CSS ou o script primeiro; por isso, não é necessário agrupar e minificar o CSS e os scripts como você faria em um projeto Web. É claro que o aplicativo deve carregar o código na memória antes da execução e, por isso, você ainda deve evitar códigos inflados por motivos de desempenho e legibilidade.

Foco na criação do aplicativo

Definir o estilo dos muitos controles WinJS internos é muito fácil porque a estrutura fornece recursos de ponta de CSS3 e HTML5. O CSS central no WinJS cria uma interface de usuário moderna, fluida e flexível que responde às alterações no estado de exibição do aplicativo quando o usuário alterna entre os modos de exibição de ajuste e tela cheia. Ter o CSS principal do WinJS disponível pronto para uso significa que você pode se concentrar na criação do aplicativo, em vez de perder tempo com CSS estrutural para criar uma interface de usuário moderna.

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.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Eric Schmidt (Microsoft)