Share via

Guia de início rápido: definindo layouts de aplicativos (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Você pode definir layouts de aplicativos para qualquer tamanho ou orientação de janela.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Objetivo: Depois de ler este artigo, você terá sólidos conhecimentos sobre como usar HTML, CSS (Folhas de Estilo em Cascata) e JavaScript para criar uma interface do usuário fluida com ótima aparência e funcionalidade em todos os estados de exibição.

Pré-requisitos

  • Ter um design em mente para o aplicativo.

    Você pode aprender sobre o planejamento e a criação de um aplicativo do Tempo de Execução do Windows em Definindo a visão.

  • Familiarize-se com as janelas redimensionáveis no Windows 8.1.

    Saiba mais sobre estados da exibição em Diretrizes de experiência do usuário para layout e dimensionamento.

  • Entender as consultas de mídia CSS.

    As consultas de mídia são definidas na Especificação de Consultas de Mídia do W3C (Wide Web Consortium). Você pode ver as consultas de mídia em ação em nosso exemplo de consultas de mídia CSS.

  • Saber usar os avançados recursos de layout do CSS3 (Folhas de Estilo em Cascata, Nível 3), principalmente o Alinhamento de Grade CSS3.

    Você pode saber mais sobre os avançados recursos de layout do CSS3 e do Alinhamento de Grade em CSS.

Layout adaptável com amostra de CSS

Este artigo ilustra os conceitos básicos envolvidos na definição dos layouts de aplicativo descrevendo como eles são implementados no Layout adaptável com amostra de CSS. Esse exemplo é um aplicativo de Clima simulado que exibe o tempo do dia de hoje e a previsão para dez dias. Ele demonstra como usar CSS e HTML, a grade CSS, o controle ListView e as consultas de mídia CSS para criar um layout de aplicativo fluido.

Antes de descrever os detalhes, vamos analisar a estrutura do Layout adaptável com amostra de CSS. O aplicativo consiste em três páginas HTML. A primeira é uma página de nível superior chamada App.html que define a principal superfície dos itens de interface do usuário do aplicativo. Ela inclui um botão para voltar, um título e um subtítulo, um menu de aplicativo, os botões da barra de aplicativos e uma área para exibir conteúdo (a área branca na imagem a seguir).

A página principal do aplicativo da amostra

As outras duas páginas HTML, Current.html e TenDay.html, definem a estrutura do conteúdo exibida na área de conteúdo da página principal. A página Current.html exibe detalhes sobre o tempo do dia de hoje:

Página do tempo atual

A página TenDay.html exibe detalhes sobre a previsão para dez dias:

Página da previsão para dez dias

Vamos nos concentrar nas partes do Layout adaptável com amostra de CSS que definem o layout da página principal do aplicativo e o layout da previsão para dez dias.

Veja a seguir a aparência da página principal de um aplicativo com a previsão para dez dias na exibição de 10,6", a uma resolução de 1366 x 768 nas orientações retrato e paisagem de tela inteira, e também lado a lado com outro aplicativo, redimensionada para um layout estreito e um mais largo.

Layouts retrato, paisagem, estreito e largo

Verificar se o aplicativo preenche a área da tela disponível

Um aplicativo bem projetado tem uma superfície de IU que consome toda a área da tela disponível. Em um primeiro momento, isso poderá parecer um desafio impossível de se superar devido à ampla variedade de fatores forma, resoluções e orientações de dispositivo que um aplicativo precisa aceitar. Felizmente, o CSS facilita tudo.

Para garantir que o aplicativo preencha toda a área da tela disponível:

  1. Use um elemento div como contêiner de nível superior para todos os outros elementos da interface do usuário na página.

    <body>
    <div class="win-ui-dark appGrid">
        <!-- TODO: Define page structure here. -->
    </div>
</body>

  2. Use as propriedades CSS, vw e vh, para definir as propriedades width e height do div relativo ao visor. Por exemplo, use 100vw (largura do visor) e 100vh (altura do visor) para preencher o visor, como mostrado aqui.

    .appGrid {
    width: 100vw;
    height: 100vh;
    /* TODO: Add other styles here. */
}

    vw e vh podem ser especificados para cada elemento, não importa a profundidade na hierarquia. Como o contexto de dimensionamento do visor não é alterado, não há necessidade de justificar o dimensionamento herdado.

    Observação  A amostra define as propriedades width e height como 100%.

     

Definir o layout básico para a página principal

Quando você define o layout da interface do usuário do aplicativo, é melhor começar com a orientação paisagem. Depois que você define o layout paisagem, fica fácil adaptá-lo aos layouts retrato e estreito.

Usar HTML para definir os itens de interface do usuário da página

Uma interface do usuário do aplicativo normalmente contém itens como botões de navegação, cabeçalhos, menus, controles e assim por diante. Adicione esses itens de interface do usuário como elementos HTML filho do elemento div de nível superior referente à página.

O HTML a seguir define os itens de interface do usuário referentes à página de nível superior do aplicativo do Layout adaptável com amostra de CSS. Os itens incluem o botão para voltar, o título e subtítulo, o menu de aplicativos, a área de conteúdo principal e os botões da barra de aplicativos.

<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">&#xE099</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>

Usar grades de CSS para posicionar os itens de interface do usuário na página HTML

Uma das melhores maneiras de obter um layout de interface do usuário fluido e adaptável é usar grades de CSS. Isso acontece porque a grade pode se expandir automaticamente para preencher o espaço que recebe, e ela expõe um conjunto completo de propriedades que facilitam o ajuste do layout da interface do usuário para diferentes tamanhos de janela. Como a posição dos elementos em uma grade é independente da ordem em que eles são especificados — ou seja, sua posição é ditada exclusivamente pela CSS, e não por sua ordem na marcação HTML, — é fácil dar aos elementos diferentes organizações em diversos tamanhos de tela ou orientações, ou ainda evitar a exibição de alguns elementos por completo em determinados layouts.

Definindo o layout da página principal

  1. O aplicativo Layout adaptável com amostra de CSS aplica uma grade de CSS ao div de nível superior na página App.html definindo a propriedade display do div -ms-grid. Essa grade de nível superior define a estrutura geral para posicionar os itens da interface do usuário na página principal do aplicativo.

  2. Depois, o aplicativo de amostra define as colunas e linhas da grade definindo o valor das propriedades -ms-grid-columns e -ms-grid-rows.

    O código CSS a seguir aplica uma grade ao div de nível superior na página principal da amostra. Essa grade é usada para posicionar os itens que consistem no cabeçalho do aplicativo (o botão para voltar, título e subtítulo e menu de aplicativo) e para definir a posição da área de conteúdo principal.

    .appGrid {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 120px 1fr; 

    /* Other properties omitted for clarity. */

}

    O código CSS anterior cria uma grade com duas colunas e duas linhas. A primeira coluna tem 120 pixels de largura, enquanto a segunda coluna tem uma "unidade fracional" de largura. Isso significa que a largura da coluna se expande automaticamente para preencher o espaço disponível que não é consumido pela primeira coluna. As linhas são definidas de maneira semelhante.

    Essa ilustração mostra como a grade divide a página principal do aplicativo:

    A grade da página principal

  3. Depois, o Layout adaptável com amostra de CSS define a posição dos itens de interface do usuário atribuindo cada item a uma determinada célula na grade. Para fazer isso, a amostra aplica as propriedades -ms-grid-column e -ms-grid-row aos elementos na página. A grade de CSS permite várias outras propriedades para posicionar os itens em relação aos limites da célula e permitir que os itens se estendam por várias colunas ou linhas. Para saber mais, veja Alinhamento da grade.

    O código CSS a seguir posiciona o elemento header da página principal do aplicativo de amostra na coluna 1, linha 1 da grade de nível superior e permite que o elemento abranja ambas as colunas da grade. O código também cria uma grade "filho" na coluna 1, linha 1 da grade de nível superior. A grade filho é usada para posicionar os itens individuais que consistem no cabeçalho (botão para voltar, título e subtítulo e menu de aplicativo).

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

    O código anterior cria uma grade na área realçada em azul na imagem a seguir.

    A grade filho do cabeçalho do aplicativo de amostra

    O Layout adaptável com amostra de CSS usa elementos div aninhados para definir a área de conteúdo principal em que a previsão atual e a previsão para dez dias aparecem:

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

    Observe no exemplo anterior que o controle HtmlControl da Biblioteca do Windows para JavaScript é usado para incluir dinamicamente as páginas HTML referentes às previsões atual e para dez dias. Para saber mais sobre os controles WinJS, veja Guia de início rápido: adicionando controles e estilos WinJS.

    O código CSS a seguir posiciona o appViewContentMask div na coluna 2, linha 2 da grade de nível superior. Ele também define as propriedades para garantir que o conteúdo preencha a célula da grade inteira e que nenhuma parte do conteúdo que não seja preenchida na célula fique oculta.

    .appViewContentMask {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Other properties omitted for clarity. */

}

    O código CSS a seguir transforma o appViewContent div em uma grade filho que contém uma única célula que preenche a área definida pelo appViewContentMask div. O uso de uma grade filho facilita o refluxo do conteúdo quando o estado de exibição muda o tamanho ou a orientação do aplicativo.

    
.appViewContent {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

    O código CSS atribui a grade da área de conteúdo à área realçada em azul:

    Grade na área de conteúdo do aplicativo de amostra

Defina o layout básico da previsão para dez dias

A previsão para dez dias é uma coleção de itens gerenciados e exibidos usando um controle ListView WinJS. Cada item consiste em uma imagem e um conjunto de cadeias de caracteres, incluindo a data, temperaturas altas e baixas, a sensação térmica e a possibilidade de nevar:

Layout dos itens na previsão para dez dias

A página HTML a seguir define a interface do usuário dos itens na previsão para dez dias. O Exemplo de layout adaptável com CSS usa os modelos e a vinculação de dados WinJS para fornecer dados ao controle ListView. Este tópico se concentra em como definir o layout da interface do usuário, por isso não vamos tratar de modelos e vinculação de dados. Para saber mais sobre modelos e vinculação de dados, veja Como usar modelos para associar dados.

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

Observe que o exemplo anterior usa WinJS CSS classes for typography especiais para definir um tamanho de fonte extragrande para as cadeias de caracteres de data e de temperaturas altas/baixas. É esse o significado de class="win-type-x-large" nos elementos tenDayDate e tenDayHighLow div.

O aplicativo de amostra usa o código CSS a seguir para garantir que a página TenDay.html e seu controle ListView preencham o contêiner pai (a área de conteúdo da página principal do aplicativo).

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

Usar consultas de mídia CSS para aplicar layouts e estilos específicos de exibição

Usando consultas de mídia CSS, você pode facilmente definir estilos diferentes para aplicar aos itens HTML em seu aplicativo, dependendo do tamanho da janela. Você pode usar uma consulta de mídia separada para cada layout diferente ou combinar consultas de mídia para aplicar o mesmo conjunto de estilos a vários layouts. A seguir descrevemos as consultas de mídia que o Layout adaptável com amostra de CSS usa para definir o layout de sua página principal e dos itens na previsão para dez dias.

Definindo o layout da página principal para um layout estreito

Se você usar o aplicativo de exemplo, vai perceber que o tamanho e o layout dos itens da interface do usuário não mudam muito entre os layouts retrato, paisagem e redimensionado. Mas quando o aplicativo é redimensionado para uma largura inferior a 500 pixels, você vê as seguintes mudanças:

  • Os itens da interface do usuário no cabeçalho do aplicativo ficam menores.
  • O layout muda de duas colunas e duas linhas para uma única coluna em que o cabeçalho ocupa a primeira linha e a área de conteúdo principal ocupa a segunda linha.

Diferenças entre os layouts de cabeçalho estreito e largo

Essas mudanças são aplicadas através de uma consulta de mídia CSS que define um conjunto diferente de estilos especificamente para a largura estreita:

@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;
    }

No código CSS anterior, um novo valor para a propriedade –ms-grid-columns muda a grade principal do aplicativo (appGrid) de duas colunas para uma. O código de CSS também define uma nova grade filho para os itens no cabeçalho do aplicativo e posiciona os itens do cabeçalho na nova grade. Por fim, o código move a área de conteúdo (appViewContentMask) da coluna 2, linha 2 da antiga grade para a coluna 1, linha 2 da nova grade.

Definindo o layout da previsão para dez dias para um layout estreito

Você percebe mudanças no layout de cada item na previsão para dez dias ao redimensionar o aplicativo para uma largura inferior a 500 pixels. Quando a largura é maior que 500 pixels, os itens são dispostos na vertical usando uma grade de coluna única. Quando a largura é menor que 500 pixels, os itens passam para a orientação horizontal usando uma grade de duas colunas.

A imagem a seguir mostra a aparência de um item na previsão para dez dias nos diferentes layouts.

Diferenças entre os layouts dos itens estreito e largo

Para chegar a esses layouts diferentes, o exemplo usa consultas de mídia CSS para aplicar estilos baseados no estado da exibição atual. O exemplo define um conjunto de estilos que são comuns a todos os estados da exibição, e outro conjunto somente para os layouts com largura inferior a 500px:

/* 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;
    }
}

Usar JavaScript para processar eventos de redimensionamento de janela, se necessário

É melhor definir o máximo do layout do aplicativo usando CSS e consultas de mídia. Entretanto, às vezes é necessário usar JavaScript para lidar com problemas de layout que o CSS não consegue resolver.

Por exemplo, o aplicativo de exemplo usa um controle ListView WinJS para exibir os itens na previsão para dez dias e alterna o ListView entre o modo de lista e de grade, dependendo da largura do aplicativo. Quando o aplicativo de exemplo tem 500 pixels ou mais, o ListView usa o modo de grade para fluir os itens na vertical e na horizontal para preencher o contêiner pai. Quando o aplicativo tem menos de 500 pixels, o ListView usa o modo de lista para organizar os itens em uma lista vertical.

Para criar layouts específicos da exibição em JavaScript, registre um ouvinte de eventos para o evento de redimensionamento de janela. No código do ouvinte de eventos, consulte a propriedade clientWidth e configure o layout adequadamente.

No exemplo a seguir, o Exemplo de layout adaptável com CSS define o ListView como modo de grade. Quando a largura da janela é menor do que 500 pixels, o ListView muda para o modo de lista. O ouvinte de eventos do aplicativo escuta o evento de redimensionamento e consulta a propriedade clientWidth para mudar o ListView adequadamente.

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(); 
            } 
        } 
    }

Resumo

Agora você já sabe como usar HTML, CSS e JavaScript para criar uma interface do usuário fluida para seu aplicativo com excelentes aparência e funções em todos os tamanhos de janela.

Tópicos relacionados

Exemplo de layout adaptável com CSS

Amostra de consultas de mídia de CSS

Laboratórios práticos do Windows 8

Desenvolvendo aplicativos de leitura

Especificação das Consultas de Mídia

Controle ListView

Guia para Desenvolvedores do Internet Explorer 10