Modelos de projeto em JavaScript para aplicativos da Store

Applies to Windows and Windows Phone

Este tópico fornece informações aprofundadas sobre os modelos de projeto JavaScript para aplicativos da Loja do Windows Phone e aplicativos da Windows Store, incluindo detalhes de implementação sobre o modelo de navegação, modelo de dados, tratamento do estado de visualização e outros detalhes.

Para obter os modelos, é necessária uma versão do Visual Studio que ofereça suporte ao desenvolvimento do Windows; consulte Obter as ferramentas.

Para saber sobre os modelos de projeto para XAML, veja Modelos de projeto C#, VB e C++ para aplicativos da Windows Store. Para saber mais sobre modelos de projetos para Blend, veja Criar um novo projeto.

Importante  As informações desse tópico foram atualizadas para o Windows Phone 8, Windows 8.1 Update. e Microsoft Visual Studio 2013 Update 2. Para obter informações sobre como adicionar suporte do Windows Phone a um aplicativo existente da Windows Store, consulte Modelos de aplicativos Universal neste tópico e Fazendo a portabilidade do aplicativo do Tempo de Execução do Windows no Windows Phone.

Mapa: como este tópico está relacionado aos outros? Veja o mapa para uso de JavaScript.

Modelos universais de aplicativos

O Visual Studio 2013 Update 2 inclui modelos de projeto JavaScript que suportam o desenvolvimento de aplicativos da Loja do Windows Phone e da Windows Store usando um código compartilhado. Um aplicativo universal é um aplicativo construído com código compartilhado usando um modelo de aplicativo universal (dois pacotes de aplicativo separados são criados ao compilar o projeto). Os modelos de aplicativo universal incluem:

  • Um projeto de aplicativos da Loja do Windows Phone, chamado appName.Phone. Cada projeto tem um pacote de aplicativo separado para envio à respectiva Windows Store.
  • Um projeto de aplicativos da Windows Store, chamado appName.Windows.
  • Uma pasta appName.Shared para armazenar códigos compartilhados. Por padrão, todos os arquivos JavaScript para o projeto são compartilhados. Arquivos HTML e CSS também podem ser compartilhados.

Os modelos de aplicativo universal incluem:

Para lidar com as diferenças de comportamento entre as plataformas em código compartilhado:

  • Teste para ver se um recurso é suportado antes de usá-lo. Por exemplo, com IU diferente é possível verificar se um DOM específico de plataforma está presente antes de usá-lo.
  • Se o teste de um recurso não funcionar bem em um cenário específico, use a propriedade WinJS.Utilities.isPhone para identificar a plataforma atual.
  • Alguns controles de IU como Pivot e SettingsFlyout são específicos de plataforma. Para dar suporte às diferenças na IU, use arquivos HTML separados e mova os arquivos separados para o projeto específico da plataforma.
  • Quando você tem um arquivo JavaScript aberto na pasta compartilhada, uma lista suspensa do selecionador de contexto permite a você alterar a versão de destino da Biblioteca do Windows para JavaScript. Isto fornece IntelliSense específico à versão de destino da biblioteca.

    Lista suspensa do selecionador de contexto em um arquivo JavaScript compartilhado

  • Para obter informações sobre as diferenças de API, veja Mudanças na API WinJS para Windows Phone

Dica  Para alterar a meta de implantação e estrutura, como mudar do Windows Phone Emulator para o Simulator, selecione Definir como projeto de inicialização no menu de contexto para um dos projetos.

Hh758331.wedge(pt-br,WIN.10).gifPara adicionar um projeto do Windows Phone a uma solução existente da Windows Store:

  1. No Solution Explorer no Visual Studio, selecione o projeto da Windows Store.
  2. No menu de atalho, escolha Adicionar Windows Phone 8.1.

    O Visual Studio adiciona o projeto do Windows Phone e a pasta para código compartilhado à solução. O novo projeto do Windows Phone é sempre um modelo de projeto em branco.

    Dica  Do mesmo modo, se começar com um projeto do Windows Phone, poderá adicionar um projeto da Windows Store à solução.

  3. Se os aplicativos da Windows Store não estiverem baseados no modelo em branco, será necessário investigar se o modelo em branco é o ponto inicial correto para o projeto do Windows Phone ou se é necessário criar um projeto do Windows Phone separadamente e fazer a portabilidade dos arquivos para o novo projeto compartilhado. Para um aplicativo baseado no modelo Hub para aplicativos da Windows Store, o modelo Pivot do Windows Phone é o ponto inicial recomendado. Se o aplicativo for baseado no modelo Grade ou Dividido, trabalho adicional será necessário para fazer a portabilidade do arquivo para um projeto compartilhado e o modelo Pivot pode funcionar ou não como um ponto inicial.

    Para analisar um arquivo de amostra portabilizado de um modelo Hub para o modelo de aplicativo universal Hub/Pivot, consulte leitor da web JSON que usa o modelo Hub/Pivot.

    Para obter informações aprofundadas sobre a portabilidade de um aplicativo para o Windows Phone, consulte Fazendo a portabilidade do seu aplicativo de Tempo de Execução do Windows para o Windows Phone.

Modelo de projeto Hub/Pivot para aplicativos universais

Use o modelo de projeto Hub/Pivot para criar uma solução compartilhada para um aplicativo da Loja do Windows Phone que apresenta conteúdo em um modo de exibição panorâmico horizontal e fornece uma variedade de maneiras de acessar conteúdo. Exemplos de aplicativos Hub/Pivot incluem aplicativos de compras, aplicativos de notícias, aplicativos de esportes e aplicativos hub de mídia.

Por padrão, um aplicativo Hub/Pivot exibe várias seções em um layout horizontal. Cada seção representa uma categoria de conteúdo, como novos itens, itens realçados e categorias de itens. Se o usuário escolher um item de um dos modos de exibição da seção, um modo de exibição de página inteira mostrará detalhes sobre o item. Essa ilustração mostra a seção 4 no Emulador do Windows Phone.

Modelo de aplicativo de Hub/Pivot

Para saber mais sobre as diretrizes UX do padrão de navegação hub, veja Padrões de navegação.

Arquivos de projeto do modelo Hub/Pivot

O modelo Aplicativo Hub/Pivot inclui estes arquivos:

  • Todos os arquivos comuns como default.html e navigator.js.
  • hub.html, que é uma página de contêiner para as seções individuais ou páginas, do aplicativo (controles HubSection ou PivotItem, dependendo do projeto).
  • sectionNumberPage.html, que contém a marcação de uma página pivô individual. Por exemplo, section1Page.html contém a marcação para a primeira página pivô ou página de seção hub. Em algumas páginas, os usuários podem escolher um item para ver as informações sobre esse item.
  • Um arquivo JavaScript e CSS correspondente a cada página no aplicativo.
  • section.html, que mostra uma categoria de itens e é específico a um aplicativo da Windows Store. Os usuários podem escolher um item para abrir o modo de exibição de página inteira desse item.
  • item.html, que é o modo de exibição de página inteira de um item.
  • phone.css, que especifica estilos de CSS para a página do host de conteúdo e para o aplicativo inteiro como um todo.
  • hubPhone.css, que especifica os estilos de CSS para o controle de pivô e páginas pivô. Estes estilos substituem os estilos definidos em hub.css.
  • Um arquivo CSS que é específico a cada página do aplicativo, como hub.css.

Como funciona o modelo Hub/Pivot

As seções do modelo Hub/Pivot foram projetadas para fornecer exemplos de conteúdo em vez de recomendações de conteúdo. As seções podem ser adicionadas e removidas com facilidade, para se ajustar aos requisitos de conteúdo do aplicativo.

No projeto do Windows Phone, cada seção é um PivotItem separado em um controle Pivot. No projeto do Windows, cada seção é um controle HubSection separado.

As seções do modelo incluem conteúdo estático, por isso, é fácil fornecer recursos globalizados. O arquivo de recurso de exemplo oferece cadeias de caracteres localizadas para a localidade en-us.

Para saber mais sobre a implementação do modelo Hub/Pivot, veja:

Para obter um exemplo que mostra como personalizar o modelo Hub/Pivot para adicionar dados dinâmicos às seções do aplicativo, consulte o leitor da web JSON que usa o modelo Hub/Pivot. Para saber mais sobre o modelo de dados e como personalizá-lo para um aplicativo da Store, veja o tópico sobre adição de dados.

  • Applies to Windows

Modelo de projeto hub para aplicativos da Windows Store

Use o modelo de projeto Hub para criar um aplicativo da Windows Store que exibe conteúdo em uma visualização panorâmica horizontal que fornece uma variedade de maneiras de acessar conteúdo. Exemplos de aplicativos Hub incluem aplicativos de compras, aplicativos de notícias, aplicativos de esportes e aplicativos hub de mídia. O modelo Hub é uma versão de plataforma única do modelo Hub/Pivot.

Por padrão, um aplicativo Hub exibe uma home page que mostra várias seções em um layout horizontal. Cada seção representa conteúdo, como novos itens, itens realçados e categorias de itens. Se o usuário toca em um título de seção interativo (indicado por ">" após o cabeçalho), o aplicativo abre a página de seção que lista os itens associados a essa seção. Se o usuário escolher um item na home page ou na página de seção, um modo de exibição de página inteira mostrará detalhes sobre o item. Essa ilustração mostra uma home page que tem pelo menos três seções.

Modelo de projeto de Aplicativo Hub

Para saber mais sobre as diretrizes UX do padrão de navegação hub, veja Padrões de navegação.

Arquivos de projeto do modelo Hub

O modelo Aplicativo Hub inclui estes arquivos:

  • Todos os arquivos comuns como default.html e navigator.js.
  • hub.html, que mostra as seções e os itens na home page. Os usuários podem escolher um item para abrir informações sobre esse item ou podem escolher um rótulo de seção para abrir informações sobre essa seção.
  • item.html, que é o modo de exibição de página inteira de um item.
  • section.html, que mostra uma categoria de itens e é específico a um aplicativo da Windows Store. Os usuários podem escolher um item para abrir o modo de exibição de página inteira desse item.
  • Um arquivo JavaScript e CSS correspondente a cada página no aplicativo.

Como funciona o modelo Hub

As seções do modelo Hub têm a finalidade de fornecer exemplos de conteúdo em vez de recomendações sobre qual tipo de conteúdo incluir. As seções podem ser adicionadas e removidas com facilidade, para se ajustar aos requisitos de conteúdo do aplicativo.

As seções do modelo incluem conteúdo estático, por isso, é fácil fornecer recursos globalizados. O arquivo de recurso de exemplo oferece cadeias de caracteres localizadas para a localidade en-us.

Para saber mais sobre a implementação do modelo Hub, veja:

Para obter um exemplo que mostra como personalizar o modelo Hub para adicionar dados dinâmicos às seções do hub, consulte o leitor da web JSON que usa o modelo Hub. Para saber mais sobre o modelo de dados e como personalizá-lo para o modelo de Hub, veja o tópico sobre adição de dados.

  • Applies to Windows Phone

Modelo de projeto Pivot para aplicativos do Windows Phone 8.1

O modelo Pivot é uma versão de plataforma única do modelo Hub/Pivot.

O modelo de aplicativo Pivot proporciona uma maneira rápida de gerenciar vários modos de exibição ou páginas. Pode ser usado para filtrar grandes conjuntos de dados, visualizar vários conjuntos de dados ou alternar exibições do aplicativo. O modelo Pivot implementa um controle Pivot que contém controles PivotItem individuais, cada uma das quais representa uma página pivô. O controle Pivot fornece suporte interno para a interação e navegação de toque.

Modelo de aplicativo Pivot

Arquivos de projeto para o modelo Pivot

O modelo Aplicativo Pivot inclui estes arquivos:

  • Todos os arquivos comuns como default.html e navigator.js.
  • hub.html, que é uma página de contêiner para as páginas pivô individuais (controles PivotItem).
  • sectionNumberPage.html, que contém a marcação de uma página pivô individual. Por exemplo, section1Page.html contém a marcação para a primeira página pivô. Em algumas páginas, os usuários podem escolher um item para ver as informações sobre esse item.
  • Um arquivo JavaScript e CSS correspondente a cada página no aplicativo.
  • item.html, que é o modo de exibição de página inteira de um item.
  • phone.css, que especifica estilos de CSS para a página do host de conteúdo e para o aplicativo como um todo.
  • hubPhone.css, que especifica os estilos de CSS para o controle de pivô e páginas pivô. Estes estilos substituem os estilos definidos em hub.css.

Como funciona o modelo Pivot

As seções do modelo Pivot foram projetadas para fornecer exemplos de conteúdo em vez de recomendações de conteúdo. As seções, implementadas como controles PivotItem, podem ser adicionadas e removidas com facilidade, para se ajustar aos requisitos de conteúdo do aplicativo.

As seções do modelo incluem conteúdo estático, por isso, é fácil fornecer recursos globalizados. O arquivo de recurso de exemplo oferece cadeias de caracteres localizadas para a localidade en-us.

Para saber mais sobre a implementação do modelo Pivot, veja:

Para obter mais informações sobre o modelo de dados e como personalizá-lo para um aplicativo da Store, consulte o tópico sobre adicionar dados e consulte leitor da web JSON que usa o modelo Hub/Pivot.

Modelo de projeto de navegação para aplicativos da Store

O modelo de Aplicativo de Navegação oferece uma navegação básica usando o modelo de navegação recomendado para aplicativos da Store. Esse modelo contém somente um fragmento mínimo de página ao qual você pode facilmente adicionar mais fragmentos de página usando o modelo de item de Controle de Página. Você poderá adicionar seu próprio conteúdo mais tarde.

O modelo de navegação está disponível como um aplicativo universal para aplicativos da Loja do Windows Phone e aplicativos da Windows Store, ou como um aplicativo de plataforma única.

O aplicativo de Navegação assume como padrão uma home page que mostra um título de boas-vindas, conforme mostrado aqui.

Modelo de projeto de Aplicativo de Navegação

Arquivos de projeto para o modelo de Navegação

O modelo Aplicativo de Navegação inclui estes arquivos:

  • A maioria dos arquivos comuns como default.html e navigator.js.
  • home.html, que é a home page. Ela exibe um título de boas-vindas. No aplicativo universal, este arquivo é compartilhado.
  • home.js, que especifica o comportamento associado à home page. No aplicativo universal, este arquivo é compartilhado.
  • home.css, que especifica os estilos de CSS para a home page. No aplicativo universal para o modelo de navegação, cada projeto inclui esse arquivo.

Como funciona o modelo de Navegação

Para obter mais informações sobre a implementação do modelo de Navegação, consulte:

Para adicionar páginas ao aplicativo, use o Modelo de item de Controle de Página. Para ver um exemplo de adição de Controle de Página, consulte o tópico sobre adição de um modelo de item de Controle de Página.

Para uma implementação simples do modelo de Navegação, consulte Exemplo do Button-Tab Navigator. Este aplicativo de exemplo inclui somente personalizações do controle de navegação.

Se você precisar incluir um tratamento especial das mudanças de estado do modo de exibição no modelo de Navegação, deverá fazer mudanças no seu código. Convém usar o mesmo padrão usado nos modelos de Grade e Dividido, que é implementar updateLayout nas páginas HTML. Para saber mais, veja o tópico sobre como lidar com o estado de modo de exibição. O suporte para updateLayout é fornecido no modelo de navegação compartilhado.

Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, veja Padrões de navegação. Além disso, veja o padrão de navegação simples em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

  • Applies to Windows

Modelo de projeto de grade para aplicativos da Windows Store

O modelo de Aplicativo de Grade é uma ótima maneira de iniciar um aplicativo da Windows Store que você pode personalizar para permitir que os usuários naveguem por categorias e localizem conteúdo que eles queiram explorar a fundo. Alguns exemplos incluem aplicativos de compras, aplicativos de notícias e aplicativos de foto ou vídeo. Esse modelo usa o modelo de navegação JavaScript recomendado para aplicativos da Windows Store.

O aplicativo de Grade assume como padrão uma home page que mostra uma lista de grupos. Um grupo representa um conjunto de itens nomeado, como uma parte de uma loja de departamentos virtual com itens de varejo individuais. Se o usuário escolher um grupo, o aplicativo abrirá a página de detalhes desse grupo com uma lista dos itens à direita. O usuário pode selecionar um item da home page ou da página de detalhes do grupo. Isso abre um modo de exibição em página inteira que mostra detalhes do item. A home page é mostrada aqui.

Modelo de projeto de Aplicativo de Grade

Arquivos de projeto para o modelo de Grade

O modelo Aplicativo de Grade inclui estes arquivos:

  • Todos os arquivos comuns como default.html e navigator.js.
  • groupedItems.html, que é a home page. Ela permite que o usuário veja os grupos e itens e escolha um item para navegar até o modo de exibição de itens em página inteira ou selecionar um rótulo de grupo para navegar até a página de detalhes do grupo.
  • groupDetail.html, que permite que o usuário veja detalhes do grupo à esquerda e itens à direita e escolha um item para navegar até o modo de exibição de itens em página inteira.
  • itemDetail.html, que é o modo de exibição de página inteira de um item.
  • Um arquivo JavaScript e CSS correspondente a cada página no aplicativo, como groupedItems.js.

Como funciona o modelo de Grade

Para obter mais informações sobre a implementação do modelo de Grade, consulte:

O tópico sobre adição de dados inclui um exemplo que mostra como adicionar dados dinâmicos ao modelo de Grade e vincular esses dados à interface do usuário.

  • Applies to Windows

Modelo de projeto dividido para aplicativos da Windows Store

O modelo de Aplicativo Dividido é uma ótima maneira de começar a criar um aplicativo da Windows Store que você pode personalizar para permitir que os usuários vejam uma lista de itens e detalhes desses itens em um modo de exibição de duas colunas, onde eles podem alternar rapidamente entre os itens e que permita atualizar essa lista dinamicamente. Exemplos incluem um leitor de notícias, um aplicativo de resultados esportivos ou um aplicativo de email. Esse modelo usa o modelo de navegação JavaScript recomendado para aplicativos da Windows Store.

O aplicativo Dividido assume como padrão uma home page que mostra uma lista de grupos. Um grupo é um conjunto de itens nomeado, como uma seção de jornal que mostra notícias. Quando o usuário toca ou clica em um grupo selecionando-o, o aplicativo abre a página de modo divisão, com itens à esquerda e detalhes do item atual à direita. A página de modo divisão é mostrada aqui.

Modelo de projeto de Aplicativo Dividido

A página do modo de exibição dividido mostra um modo de exibição de duas colunas (ou um modo de exibição mestre/de detalhes), no qual os detalhes no lado direito mudam conforme o usuário escolhe itens no lado esquerdo. Mais uma vez, imagine uma lista de notícias no lado esquerdo e as notícias propriamente ditas no lado direito.

Arquivos de projeto para o modelo Dividido

O modelo Aplicativo Dividido inclui estes arquivos:

  • Todos os arquivos comuns como default.html e navigator.js.
  • items.html, que é a home page. Ele permite que o usuário escolha um grupo para navegar até a página de modo de exibição dividido do aplicativo.
  • split.html, que é a página de modo de exibição dividido. Ele define duas seções: uma para a lista de itens à esquerda e outra para os detalhes dos itens à direita.
  • Um arquivo JavaScript e CSS correspondente a cada página no aplicativo, como split.js e split.css.

Como funciona o modelo Dividido

Para obter mais informações sobre a implementação do modelo Dividido, consulte:

O tópico sobre adição de dados inclui um exemplo que mostra como adicionar dados dinâmicos ao modelo Dividido e vincular esses dados à interface do usuário.

Para ver um exemplo que mostra como personalizar os recursos do modelo Dividido, confira o tópico Adicionando um modelo de item Contrato de Pesquisa.

Modelo de projeto em branco para aplicativos da Store

O modelo Aplicativo em Branco fornece um aplicativo da Store básico que pode ser compilado e executado, mas que não contém controles de interface do usuário nem dados. Quando você executa um aplicativo com base no modelo de projeto Em Branco, é exibida uma tela preta com texto de espaço reservado.

O modelo em branco está disponível como um aplicativo universal para aplicativos da Loja do Windows Phone e aplicativos da Windows Store, ou como um aplicativo de plataforma única.

Arquivos de projeto para o modelo Em Branco

O modelo Aplicativo em Branco inclui estes arquivos:

Como funciona o modelo em Branco

Para obter mais informações sobre a implementação do modelo Em Branco, consulte:

O comportamento geral e a aparência do modelo em Branco são criados por uma folha de estilos CSS: ui-dark.css. É possível mudar essa referência nas suas páginas HTML para ui-light.css. Para saber mais, veja o tópico sobre estilos de CSS.

Arquivos de modelo de projetos comuns

Os seguintes arquivos são comuns à maioria dos modelos de projeto:

ArquivoDescrição
default.htmlEsta página é carregada primeiro. Para aplicativos de modelo que incluem o modelo de navegação de página única, esta página foi fornece marcação para o host de conteúdo (em que cada página é carregada na janela principal). Nos modelos de aplicativo universal, cada projeto inclui esse arquivo.
navigator.jsImplementa o modelo de navegação de página única para os modelos de projeto JavaScript. O modelo de projeto Em branco não inclui esse arquivo.

Normalmente, você não precisa personalizar o comportamento de navegação implementado nos modelos. No entanto, o controle de navegação (navigator.js) é implementado como um arquivo de projeto padrão para que você possa fazer modificações, se necessário. Para saber mais, veja o seguinte:

data.jsFornece um objeto de origem de dados (um WinJS.Binding.List) que expõe os dados ao restante do aplicativo. Esse arquivo inclui dados de amostra. Para saber mais sobre o modelo de dados, veja Personalizando dados em um modelo de projeto. Os modelos de projeto Em branco e Navegação não incluem esse arquivo.
package.appxmanifestDescreve o pacote de aplicativo dos aplicativos da Windows Store e da Loja do Windows Phone. Em um modelo de aplicativo universal, cada projeto inclui esse arquivo.
Arquivo PFXEste arquivo é usado para assinar o arquivo appxmanifest. É incluído como um arquivo de projeto para oferecer suporte à compilação de aplicativos da Windows Store a partir da linha de comando.
default.jsEspecifica como o aplicativo se comporta quando é iniciado. Nos modelos de aplicativo universal, cada projeto inclui esse arquivo.
default.cssEspecifica os estilos de CSS para o aplicativo. Nos modelos de aplicativo universal, cada projeto inclui esse arquivo.
Vários arquivos de imagem Os arquivos de imagem incluídos por padrão incluem splashscreen.png para a imagem da tela inicial e storelogo.png, que é usada para arquivos da Windows Store e outros arquivos.
resources.jsonUm arquivo de recurso de exemplo que contém cadeias de caracteres de localização.

 

Recursos comuns de codificação

Os seguintes recursos são comuns a todos os modelos de projeto:

  • Cada arquivo JavaScript encapsula código em uma função anônima autoexecutável, como esta:
    
    (function () {
        // . . .
    })();
    
    

    Os membros adicionados na função anônima são privados, mas você pode torná-los públicos usando a função WinJS.Namespace.define. O uso da função anônima altera o modo como você precisa gravar algum código, como ao adicionar seus próprios manipuladores de eventos. Para saber mais, veja Codificando aplicativos básicos.

  • Cada arquivo JavaScript especifica o uso do modo estrito com a declaração "uso estrito". Para saber mais, veja Modo estrito na Referência da Linguagem JavaScript.
  • O processamento declarativo estrito está sempre habilitado. Você deve usar WinJS.Utilities.markSupportedForProcessing para especificar se uma função é permitida para usar o processamento declarativo.

Os comentários da documentação XML são usados em alguns lugares nos arquivos JavaScript para fornecer uma experiência mais completa do IntelliSense. Para saber mais, veja IntelliSense para JavaScript.

Ciclo de vida do aplicativo

A implementação do ciclo de vida do aplicativo é a mesma para todos os modelos de projeto JavaScript para aplicativos da Windows Store. O ciclo de vida do aplicativo começa quando o aplicativo é iniciado e termina quando ele é fechado. Os modelos de projeto incluem um padrão genérico para o gerenciamento do ciclo de vida do aplicativo. Quando você cria um aplicativo com base em um modelo de projeto, talvez precise incluir um código para lidar com cenários adicionais, por exemplo, para manipular dados quando o aplicativo é suspenso ou encerrado.

O arquivo default.html é definido como a página inicial para cada modelo. O arquivo JavaScript correspondente para default.html inclui a seguinte chamada para WinJS.Application.start, que começa a distribuir eventos de aplicativo.


var app = WinJS.Application;
// . . .
app.start();

O melhor lugar para adicionar um código relacionado ao gerenciamento do ciclo de vida de um aplicativo é em default.js. A implementação de default.js é a mesma para todos os modelos de projeto. Esse arquivo inclui código para manipular o evento onactivated do WinJS. Esse evento é acionado quando ocorre a ativação do Tempo de Execução do Windows. O código no manipulador de eventos onactivated verifica se o aplicativo foi iniciado na tela Inicial do Windows e chama WinJS.UI.processAll. A função processAll carrega todos os controles que incluem o atributo data-win-control no elemento DIV do controle. Eis o código que contém a função processAll.



app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // . . .
        } else {
            // . . .
        }
        // . . .
        }
        // . . .

        // . . .
        var p = ui.processAll().then(function () {
            return nav.navigate(nav.location || Application.navigator.home, nav.state);
        }).then(function () {
            return sched.requestDrain(sched.Priority.aboveNormal + 1);
        }).then(function () {
            ui.enableAnimations();
        });

        args.setPromise(p);
    }
});

Se você possui um código que precisa ser executado quando o aplicativo configura seu estado inicial, convém incluir esse código no manipulador do evento onactivated do WinJS. Talvez também seja necessário incluir um código adicional caso o aplicativo tenha sido reativado após ser suspenso. Adicione este código onde indicado pelos comentários.



if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize
    // your application here.
} else {
    // TODO: This application has been reactivated from suspension.
    // Restore application state here.
}


Como já foi mencionado, os modelos não incluem código para lidar com a suspensão do aplicativo. Para lidar com este estado do aplicativo em seu código, você pode adicionar código ao manipulador de eventos oncheckpoint WinJS, mostrado aqui em default.js, ou adicionar código para se registrar para o evento suspending de Tempo de Execução do Windows (que chama oncheckpoint).


app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

Você pode usar eventos do WinJS, o Tempo de Execução do Windows ou uma combinação de ambos para gerenciar o ciclo de vida do aplicativo. Porém, funções e eventos do WinJS são suficientes para a maioria dos aplicativos. Para saber mais, veja Como suspender um aplicativo e Como retomar um aplicativo.

Estes são alguns dos eventos e funções do WinJS relacionados ao ciclo de vida do aplicativo:

Modelo de navegação

O modelo de navegação usado nos modelos de projetos de Aplicativos de Hub, Grade, Dividido e de Navegação é o modelo de navegação recomendado para aplicativos da Windows Store em JavaScript. Nesse modelo, páginas HTML carregadas por meio do URI da páginas são carregadas em um único contexto no âmbito do aplicativo. As lógicas são carregadas conforme necessário, geralmente em resposta às ações do usuário. Muitas vezes, os desenvolvedores da Web chamam esse tipo de modelo de navegação de navegação de página única. O arquivo navigator.js implementa o modelo de navegação. O modelo de navegação de página única oferece uma transição suave entre as páginas e também facilita o gerenciamento de estados, pois os scripts nunca são descarregados.

Dica  Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, veja Padrões de navegação. Além disso, veja o padrão de navegação simples em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

Para personalizar a navegação em seus aplicativos usando o modelo de navegação de página única fornecido nos modelos de projeto:

  • Verifique se o seu aplicativo inclui navigator.js e a marcação de host de conteúdo necessária para o controle de navegação em default.html (veja abaixo).
  • Verifique se todas as páginas estão implementadas como um PageControl. (Você pode usar o Visual Studio para adicionar um modelo de item PageControl.)
  • Implemente o código de inicialização para cada página no ready ou na função init.
  • Chame WinJS.Navigation.navigate para navegar para novas páginas.

Detalhes adicionais sobre esses requisitos estão a seguir.

Os modelos de projeto, como o modelo Em Branco, não incluem um arquivo navigator.js Para esse modelo, você precisa implementar a navegação personalizada quando não adiciona manualmente o arquivo de projeto navigator.js. Se você usar o modelo de navegação de página única e a WinJS.Navigation.navigate para navegar entre páginas, lembre-se de que a WinJS.Navigation.navigate não executa a navegação diretamente, mas essa função é uma função de wrapper que armazena um objeto de estado associado em seu local atual e chama o evento WinJS.Navigation.onnavigated. Para saber mais sobre a navegação e obter um exemplo do uso na navegação de página única em aplicativos da Windows Store criados para Windows em JavaScript, veja Guia de início rápido: usando a navegação de página única.

No modelo de navegação de página única usado nos modelos de Aplicativo de Grade, Dividido e de Navegação, um elemento DIV que é declarado como controle de navegação do aplicativo fornece o host do conteúdo para todas as páginas do aplicativo. Todo o conteúdo da página é carregado nesse DIV. O elemento mostrado aqui é incluído em default.html nos modelos de projeto.


<div id="contenthost" data-win-control="Application.PageControlNavigator"
    data-win-options="{home: '/pages/items/items.html'}">
</div>

O próprio controle de navegação é implementado em navigator.js e, para a maioria dos aplicativos, não precisa ser modificado. O controle de navegação define manipuladores para o evento WinJS.Navigation.onnavigated.

As páginas carregadas no host de conteúdo devem ser objetos PageControl. Cada controle de página representa uma unidade modular de código HTML, CSS e JavaScript. Quando o controle de navegação carrega uma página, ele chama métodos definidos internamente da interface IPageControlMembers, como ready.

Os modelos de projeto implementam a função ready e, em alguns modelos, a função init. A função ready é chamada quando a página é carregada e totalmente processada.

Dica  Para obter mais informações sobre o processo de carregamento de páginas, consulte IPageControlMembers.init.

Para navegar até uma nova página, cada aplicativo de modelo chamaWinJS.Navigation.navigate. Essas chamadas fazem com que o controle de navegação carregue o arquivo HTML como um elemento DIV do host de conteúdo. Várias funções nas páginas de modelo chamam a função navigate da Biblioteca do Windows para JavaScript (WinJS):

  • A função _itemInvoked, que lida com a seleção de um item em um modo de exibição de lista. Dependendo do contexto e da página atual, a seleção pode ser um item individual ou um grupo.
  • A função _selectionChanged, que lida com a seleção de um item em split.html (no modelo Dividido).

Em alguns modelos, funções específicas nos arquivos JavaScript de páginas HTML podem mudar o histórico do botão Voltar, dependendo do estado do modo de exibição atual. Por exemplo, no modelo de Aplicativo Dividido, o aplicativo muda o histórico do botão Voltar quando está em um estado de modo de exibição definido por modelo denominado modo de exibição mestre/de detalhes. Para saber mais, veja o tópico Lidando com o estado de modo de exibição.

Para saber mais sobre a implementação da navegação de página, veja Navegando entre as páginas.

Estilos de CSS

O comportamento geral e a aparência dos modelos são criados por uma folha de estilos CSS: ui-dark.css. Trata-se de uma folha de estilos WinJS que define o esquema de cor principal, as fontes e outras propriedades de estilo. A referência do projeto é mostrada aqui:


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

Você pode mudar essa referência em todas as suas páginas HTML para ui-light.css, que é a cor alternativa recomendada e o esquema de estilo para aplicativos da Windows Store:


<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

A maioria das páginas HTML nos modelos de projeto de Grade e Dividido usa um ou mais modelos do WinJS (que não são iguais aos modelos de item e projeto do Visual Studio) para formatar e mostrar várias instâncias de dados. Por exemplo, sempre que um controle ListView estiver presente em uma página, você encontrará um modelo do WinJS que tem um nome de classe de itemtemplate. Os nomes de classe são usados tanto para recuperar elementos nos arquivos JavaScript quanto para especificar CSS. Este é o modelo de item presente em items.html, no modelo de projeto Dividido:


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


Importante  O modelo itemtemplate é usado para qualquer tipo de item ListView, que pode ser um grupo ou um item de dados individual, dependendo do contexto.

Os estilos de CSS associados às páginas HTML, juntamente com seus modelos do WinJS, são estilos de CSS com escopo definido. O uso de estilos com escopo definido limita a aplicação de estilos a páginas específicas. Isso pode ajudar a reduzir o tempo necessário para corrigir problemas que ocorrem quando a fonte de um determinado estilo de CSS não é evidente. Veja aqui um exemplo do uso de estilos com escopo definido. Essa seção de código, em items.css, mostra as propriedades CSS definidas para o elemento IMG do modelo de item anterior. Esse elemento representa a imagem associada para cada item em ListView.


.itemspage .itemslist .item .item-image {
    -ms-grid-row-span: 2;
}


No exemplo anterior, a entrada itemspage define o escopo do estilo, restringindo a aplicação do CSS a elementos que estão no elemento DIV itemspage declarado no items.html. A entrada itemslist restringe ainda mais o CSS à seção de conteúdo principal na página inicial, e assim por diante. A seção de conteúdo principal em items.html, que declara ListView, tem a seguinte aparência:


<div class="itemslist win-selectionstylefilled" 
    aria-label="List of groups" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ selectionMode: 'none' }">
</div>


O suporte à folha de estilos para os sistemas de escrita da direita para a esquerda é fornecido nos modelos do Microsoft Visual Studio 2012 Update 1. O exemplo a seguir mostra um estilo CSS para um cabeçalho de grupo exibido da direita para a esquerda em groupedItems.css (modelo de Grade).


.groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
    content: "\E26C";
}

Para usar os estilos da direita para a esquerda, inclua os recursos para um idioma da direita para a esquerda em seu projeto e defina o Windows com as configurações corretas do idioma. Para saber mais, veja Guia de início rápido: traduzindo recursos de interface de usuário. Para conferir as diretrizes de suporte aos sistemas de escrita da direita para a esquerda nos aplicativos da Windows Store, veja Como dar suporte a interface do usuário bidirecional.

Lidando com o estado do modo de exibição

Os modelos Hub e Grade não implementam suporte especial para diferentes estados de exibição, além daquele fornecido pelos controles de layout, mas fornecem uma estrutura básica para habilitar personalização decorrente de mudanças no layout. As alterações de layout podem ser tratadas no modelo de navegação do modelo de projeto. Para saber mais, veja o tópico sobre modelo de navegação.

Em navigator.js, o controle de navegação cria um manipulador para o evento window.onresize.


window.onresize = this._resized.bind(this);


No código do construtor para PageControlNavigator, o evento onresize acaba sendo mapeado para a função updateLayout que é implementada no arquivo JavaScript associado à página HTML atual. No tempo de execução, o evento onresize chama essa função.

A implementação de updateLayout é específica em cada página, mas geralmente não é implementada nos modelos de projeto. Esse código mostra o código de stub para updateLayout na página de seção do modelo Hub.


updateLayout: function (element) {
    /// <param name="element" domElement="true" />

    // TODO: Respond to changes in layout.
},


O modelo Dividido dá suporte ao comportamento exclusivo relacionado ao estado do modo de exibição. Por padrão, a página de modo divisão (split.html) no modelo Dividido é um modo de exibição de duas colunas — o modo de exibição mestre/detalhes. O modelo Dividido define um modo de exibição alternativo chamado modo de exibição de coluna única. Para defini-lo, basta selecionar a largura do nó raiz do documento. O código que define e configura o modo de exibição de coluna única está no split.js. A função _isSingleColumn define o estado do modo de exibição de coluna única:


_isSingleColumn: function () {
    return document.documentElement.offsetWidth <= 767;
},


Vários métodos do split.js, como _updateVisibility, chamam _isSingleColumn. A função _updateVisibility ativa e desativa a visibilidade das colunas, o que depende de o aplicativo estar, no momento, em modo de exibição de coluna única e de haver um item selecionado. _updateVisibility é chamado no split.js pela função ready, quando a página é carregada, e também por updateLayout, quando o evento de redimensionamento ocorre. Para saber mais, veja split.js no modelo Dividido.

Várias funções em split.js também modificam o histórico do botão Voltar ou o comportamento de navegação, o que vai depender do estado do modo de exibição. A função ready e a função updateLayout mudam o histórico do botão Voltar. A função selectionChanged, que é chamada quando um item no modo de exibição de lista é selecionado, muda o comportamento de navegação.

Para saber mais sobre como lidar com alterações de layout, veja Diretrizes para tamanhos de janela e dimensionamento de telas.

 

 

Mostrar:
© 2014 Microsoft