Criando uma experiência de inicialização de aplicativo fluida e rápida

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Criando uma experiência de inicialização de aplicativo fluida e rápida

  • Comments 0

A inicialização de aplicativos é a principal parte da experiência rápida e fluida do Windows 8, portanto, é importante que você priorize a experiência do usuário ao inicializar seu aplicativo. Um fluxo de inicialização extremamente elegante, com certeza, melhorará a recepção inicial de qualquer aplicativo. Nesta postagem, discutirei como criar uma experiência de inicialização de aplicativo bem projetada, ágil na resposta, e explicarei por que a inicialização de aplicativo é um momento crítico para dar uma impressão positiva para os usuários. Apresentarei quatro padrões de design de inicialização de aplicativos que podem ser aplicados aos seus aplicativos e mostrarei alguns aspectos que você deve ter em mente caso continue criando aplicativos estilo Metro.

Visão geral da inicialização de aplicativos

Caso você já tenha lido a postagem Managing app lifecycle so your apps feel “always alive” (Gerenciando o ciclo de vida do aplicativo para que seus aplicativos fiquem "sempre vivos", você deve estar familiarizado com os estados de ciclo de vida de aplicativo. Esta postagem aborda a inicialização de aplicativos, ou a transição entre o estado “não está em execução” e “está em execução”.

Diagrama que mostra como a inicialização do aplicativo se encaixa no ciclo de vida geral do aplicativo estilo Metro: a inicialização do aplicativo é a transição entre o estado “não está em execução” e “está em execução”.
  Estados de ciclo de vida: a inicialização do aplicativo é a transição do estado “não está em execução” para “está em execução”.

Como a inicialização do aplicativo é altamente visível, é importante planejar bem essa transição. Não somente a transição é fundamental, como os usuários irão experimentá-la repetidamente. Quanto mais contratos (consulte a última postagem: Ativando contratos do Windows 8 em seu aplicativo) você implementa, mais motivos os usuários têm para lançar seu aplicativo. Se você vai causar uma primeira impressão positiva ou negativa, vai depender de como você projetou essa transição; isso pode também, basicamente, determinar se os usuários retornam rotineiramente ao seu aplicativo.

Antes que eu recomende algumas formas de lidar com a inicialização do aplicativo, talvez seja útil revisar a sequência de operações durante essa transição.

Quando um usuário clica no bloco de um aplicativo, o aplicativo é ativado e a tela inicial é mostrada. Quando a animação da inicialização é concluída, a tela inicial fica em tela inteira até que o aplicativo exiba uma janela. Nesse momento, a tela inicial desaparece na primeira exibição do aplicativo.  A sequência de operações durante a inicialização do aplicativo.

Quando os usuários iniciam um aplicativo, eles são imediatamente saudados pela tela inicial. Todo aplicativo estilo Metro tem uma tela inicial, que consiste em uma imagem 620x300 e uma cor de plano de fundo sólida. (Consulte Início rápido: Adicionando uma tela inicial para aprender como personalizar sua tela inicial). O Windows apresenta a tela inicial em seu nome para dar boas-vindas aos usuários quando o seu aplicativo está sendo ativado. O evento ativado é recebido por todos os aplicativos na inicialização, e dá ao seu aplicativo a habilidade de realizar qualquer trabalho de inicialização necessário para apresentar sua interface do usuário inicial. Isso pode incluir a leitura de configurações básicas, determinar para qual página navegar e/ou identificar se o aplicativo foi ativado para um dos vários contratos. Depois que a inicialização estiver concluída e o seu aplicativo estiver pronto para ignorar a tela inicial, ele deve apresentar sua primeira janela. Nenhum trabalho é necessário para aplicativos JavaScript, já que isso é feito automaticamente quando o retorno de chamada da ativação retorna. Entretanto, os aplicativos C# devem fazer isso explicitamente através de uma chamada a Window.Current.Activate. Tenha cuidado para não atrasar essa operação, já que seu aplicativo será encerrado se uma janela não for exibida dentro de um tempo razoável (aproximadamente 15 segundos). Além disso, você vai querer apresentar uma janela tão rápida quanto possível porque manter desnecessariamente a tela inicial ativa pode deteriorar rapidamente a experiência do usuário. Recomendamos que você apresente uma janela dentro de 2 a 3 segundos para garantir que o seu aplicativo sempre seja inicializado conforme esperado, mesmo em hardware inferior.

Depois que a janela do aplicativo é apresentada e a tela inicial é ignorada, os aplicativos assumem o controle da experiência; depende de você determinar como os usuários serão apresentados ao conteúdo de seu aplicativo. Dependendo do aplicativo, transições diferentes podem ser apropriadas. Nas próximas seções, recomendarei quatro padrões de design de inicialização de aplicativo que podem ser aplicados com base nas necessidades de seu aplicativo:

  • Inicialização de aplicativo padrão

Para aplicativos que não requerem carregamento adicional e estão imediatamente prontos para uso.

Exemplo: Um aplicativo de dicionário que permite aos usuários buscar ou traduzir vários termos. A página de aterrissagem consiste apenas em uma caixa de texto para a entrada do usuário.

  • Inicialização de aplicativo esqueleto

Ótima para aplicativos que preenchem a página de aterrissagem de forma incremental durante a inicialização.

Exemplo: Um aplicativo de leitura que controla os livros, revistas e jornais do usuário. Quando inicializado, o aplicativo preenche a biblioteca do usuário de forma incremental.

  • Inicialização de aplicativo estendida

Para aplicativos que realizam operações de carregamento longas antes de apresentar a interface do usuário. Isso pode incluir chamadas à rede ou E/S de arquivo substancial.

Exemplo: Um aplicativo de esportes que mostra os resultados mais recentes e os destaques. O aplicativo usa APIs REST para recuperar essas informações através da rede e exibe dados dinâmicos na página de aterrissagem.

  • Inicialização de aplicativo adiada

Útil para aplicativos que precisam concluir tarefas assíncronas básicas durante a inicialização, como consultar as configurações do aplicativo a serem verificadas na primeira execução.

Exemplo: um jogo que precisa determinar se o usuário já criou uma conta. Essa informação é necessária para determinar qual página deve ser apresentada ao usuário.

Inicialização de aplicativo padrão

Para muitos aplicativos, o fluxo da inicialização de aplicativo padrão será ótimo. Nesse fluxo, o Windows manipula a exibição e a remoção da tela inicial de cada aplicativo. A tela inicial é exibida até que a ativação seja concluída e uma janela seja apresentada, disparando um fading cruzado animado para a página de aterrissagem do aplicativo. Use a inicialização padrão se a sua página de aterrissagem for estática e não depender de operações de carregamento adicionais. Se o seu conteúdo estiver pronto imediatamente, não é necessário atrasar artificialmente o usuário. Na verdade, você não deve fazer isso!

Abaixo há um exemplo do fluxo de inicialização padrão por meio do Internet Explorer 10 do Consumer Preview. Quando o aplicativo é inicializado, a tela inicial é imediatamente exibida para o usuário. A tela inicial fica visível na tela até que o aplicativo seja ativado, nesse ponto a tela inicial desaparece na página de aterrissagem. Nesse caso, a página de aterrissagem mostra a última página visitada pelo usuário, que está prontamente disponível porque foi salva durante a sessão anterior.

Aqui está o processo exibido na imagem seguinte:

  1. O bloco do aplicativo clicado.
  2. A tela inicial exibida.
  3. A página de aterrissagem do aplicativo exibida.

Quando o bloco é clicado, a tela inicial é exibida. Em seguida, quando a primeira exibição do aplicativo está pronta, a tela inicial desaparece na página de aterrissagem do aplicativo. 
O fluxo de inicialização de aplicativo padrão.

Para implementar o fluxo de inicialização padrão, nenhum trabalho adicional é necessário. Simplesmente, especifique sua imagem de tela inicial 620x300 no manifesto de seu aplicativo e, em seguida, crie a página de aterrissagem usando conteúdo estático. Depois que a ativação estiver concluída, a tela inicial desaparece em sua página de aterrissagem e o seu aplicativo estará pronto para uso.

Inicialização de aplicativo esqueleto

Para a maioria dos aplicativos, a inicialização padrão funcionará bem. Depois que a tela inicial for ignorada, o aplicativo estará em execução e pronto para interação. Entretanto, alguns aplicativos podem não estar inteiramente prontos nesse momento; esses aplicativos precisarão carregar conteúdo dinamicamente depois da inicialização. Para essa classe de aplicativo, o padrão de inicialização de aplicativo esqueleto é uma ótima forma de fornecer informações de carregamento significativas para os usuários, enquanto elas são trazidas para o aplicativo da forma mais rápida possível. Nesse padrão, a tela inicial ignora a página de aterrisagem de esqueleto (a página de aterrisagem, como ela apareceria, sem qualquer conteúdo), enquanto o conteúdo é recuperado. Adicionando uma barra de progresso à página, você pode indicar que o aplicativo ainda está sendo carregado. Esta próxima imagem mostra um exemplo do fluxo de inicialização esqueleto usando o aplicativo Música do Consumer Preview. Aqui, a página de aterrissagem esqueleto é exibida enquanto o conteúdo de música mais recente é recuperado.

Aqui está o processo exibido na imagem seguinte:

  1. O bloco do aplicativo clicado.
  2. A tela inicial exibida.
  3. A página de aterrissagem esqueleto exibida. Observe a barra de progresso exibida na parte superior da exibição.
  4. A página de aterrissagem do aplicativo exibida.

Quando o bloco é clicado, a tela inicial é exibida. Em seguida, o aplicativo apresenta uma página de aterrissagem esqueleto como sua primeira exibição. A página de aterrissagem esqueleto é a página de aterrissagem sem qualquer conteúdo. Quando a tela inicial desaparece na página de aterrissagem esqueleto, o aplicativo começa a preencher a página de forma incremental.  O fluxo de inicialização de aplicativo esqueleto.

Para implementar o fluxo de inicialização esqueleto, crie um modo de exibição estático, esqueleto, da página de aterrissagem de seu aplicativo e exiba-a como sua página inicial. Em seguida, durante a ativação, comece a executar as tarefas de carregamento necessárias para preencher a página com conteúdo. Como a maioria das operações é assíncrona, a tela inicial pode ficar oculta enquanto essas tarefas ainda estão sendo executadas. Consequentemente, seus usuários verão a página de aterrissagem ser preenchida de forma incremental.

Se você estiver interessado em saber quando a tela inicial foi ignorada, use a API da tela inicial. A API inclui o evento SplashScreen.Dismissed, que indica quando a transição da tela inicial para a página inicial do aplicativo ocorreu. Isso pode ser útil se você quiser saber quando sua página de aterrissagem esqueleto está em exibição.

JavaScript

Como você verá no exemplo seguinte, seu aplicativo pode começar a executar operações para preencher a página de aterrissagem do retorno de chamada ativado. Opcionalmente, para saber quando a tela inicial é ignorada, use os argumentos de evento para obter o objeto tela inicial. Usando esse objeto, faça o registro para que o evento ignorado seja notificado do descarte da tela inicial.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);
...
}
};

function performSetupTasks() {
// Begin additional loading tasks here…
...
}

function onSplashScreenDismissed() {
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

C#

A implementação não é diferente em C#. Comece as operações que são necessárias para preencher a página de aterrissagem durante a ativação. Em seguida, obtenha opcionalmente o objeto da tela inicial a partir dos argumentos de evento ativado e registre para ser notificado do descarte da tela inicial.

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...
}

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

Inicialização de aplicativo estendida

Para aplicativos que realizam tarefas de carregamento adicionais após a inicialização, a inicialização do aplicativo esqueleto é uma ótima opção. Apesar disso, existe uma desvantagem: como os usuários são trazidos para a página “esqueleto” imediatamente, o fluxo de carregamento coletivo pode parecer desarticulado. A transição da tela inicial para a página de aterrissagem esqueleto pode dar aos usuários a impressão de que há duas operações de carregamento independentes. Quando isso é indesejável, o padrão inicialização de aplicativo estendida é uma ótima alternativa.

O fluxo usa o conceito de uma tela inicial estendida para produzir uma experiência de carregamento contínua. Quando a tela inicial normal é ignorada, o aplicativo exibe uma tela inicial estendida em vez da página de aterrissagem. A tela inicial estendida é completamente do aplicativo e é formatada através da API da tela inicial. A API oferece informações de posicionamento que garantem que a aparência da tela inicial estendida seja visualmente idêntica à tela inicial (com a exceção de um anel de progresso ou detalhes de carregamento), o que unifica as operações de carregamento aparentemente independentes. Enquanto a tela inicial estendida estiver sendo exibida, o aplicativo pode continuar executando as tarefas necessárias para pintar a página de aterrissagem. Em seguida, depois que o carregamento estiver concluído, você pode fazer a transição da tela inicial estendida para a página de aterrissagem.

O fluxo da inicialização estendida funciona especialmente bem se a inicialização puder ser longa (a conectividade da rede, por exemplo, é imprevisível). Se você precisar fazer qualquer tipo de “levantamento pesado” durante a inicialização, a tela inicial estendida é a opção ideal. Trata-se também de uma ótima opção se você quiser garantir que a sua página de aterrissagem tenha sido completamente atualizada antes da transição para ela (caso você opte por não mostrar dados em cache).

Este próximo exemplo mostra um fluxo de inicialização estendida que usa o aplicativo Clima do Windows 8 Consumer Preview. Um aplicativo Clima é um ótimo exemplo de um aplicativo que pode implementar o padrão de inicialização estendida, pois a tela inicial estendida pode ser mostrada enquanto os dados mais recentes sobre o clima são solicitados da rede (não há muito sentido em mostrar para o usuário dados em cache sobre o clima).

Aqui está o processo exibido na imagem seguinte:

  1. O bloco do aplicativo clicado.
  2. A tela inicial exibida.
  3. A tela inicial estendida exibida (com o anel de progresso).
  4. A página de aterrissagem do aplicativo exibida.

Quando o bloco é clicado, a tela inicial é exibida. Em seguida, o aplicativo apresenta uma tela inicial estendida como sua primeira exibição. A tela inicial estendida é visualmente idêntica à tela inicial, mas é do aplicativo. Dessa forma, o aplicativo pode começar as operações de carregamento e a transição para a página de aterrissagem geral quando estiver pronto. 
O fluxo de inicialização de aplicativo estendido.

Para implementar o fluxo de inicialização estendida, a API de tela inicial deve ser usada. Usando SplashScreen.ImageLocation, os aplicativos podem obter as coordenadas da imagem da tela inicial. Isso é importante, já que a imagem deve ser posicionada exatamente no mesmo local na tela inicial estendia para que o usuário perceba uma transição suave. Como mencionado na seção anterior, a API também expõe um evento SplashScreen.Dismissed, que irá notificá-lo da transição da tela inicial normal para a tela inicial estendida.

Como antes, você pode disparar tarefas adicionais durante a ativação. Abaixo, percorremos a implementação de uma tela inicial estendida (com um anel de progresso opcional) em JavaScript e C#.

Observação: Ao implementar uma tela inicial estendida, também é importante lidar com encaixe, desencaixe, rotação, e assim por diante. Esses detalhes são omitidos nesta postagem para que sejamos breves. Para saber mais, veja a amostra da tela inicial.

JavaScript

Primeiro, adicione a marcação HTML da tela inicial estendida (com o anel de progresso) para a sua tela inicial.

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
<img id="extendedSplashImage" src="/images/splash.png" style="position: absolute;" />
<progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
</div>
 

Em seguida, adicione os estilos CSS da tela inicial estendida.

.extendedSplashScreen {
position: absolute;
text-align: center;
background-color: #000000;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.extendedSplashScreen.hidden {
display: none;
}

Novamente, inicie as tarefas adicionais durante a ativação e use os argumentos de evento para obter o objeto tela inicial. Dessa vez, o objeto da tela inicial será usado para registrar o evento ignorado e configurar a tela inicial estendida. Consulte o objeto da tela inicial para saber a posição da imagem da tela inicial e organize o layout de acordo.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the regular splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);

// Display the extended splash screen.
displayExtendedSplash(splash);

WinJS.UI.processAll();
}
};

function displayExtendedSplash(splash) {
// Position the extended splash screen image in the same location as the system splash screen image.
var extendedSplashImage = document.getElementById("extendedSplashImage");
extendedSplashImage.style.top = splash.imageLocation.y + "px";
extendedSplashImage.style.left = splash.imageLocation.x + "px";
extendedSplashImage.style.height = splash.imageLocation.height + "px";
extendedSplashImage.style.width = splash.imageLocation.width + "px";

// Position the extended splash screen's progress ring.
var extendedSplashProgress = document.getElementById("extendedSplashProgress");
extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";

// After the extended splash screen is set up,
// apply the CSS style that will make the extended splash screen visible.
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

Especifique as tarefas de carregamento a serem concluídas enquanto a tela inicial está sendo exibida. Quando o carregamento estiver completo, retire a tela inicial estendida. Certifique-se de lidar com os casos de erro elegantemente; se as tarefas de carregamento excederem o tempo de espera ou falharem, faça com que o usuário vá para uma página que explique o que aconteceu.

function performSetupTasks() {
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
removeExtendedSplash();
}

function onSplashScreenDismissed() {
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

function removeExtendedSplash() {
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
}

C#

Como acontece com o JavaScript, precisamos adicionar marcações para a tela inicial estendida com anel de progresso. Dessa vez, usaremos XAML.

<!-- This snippet represents the ExtendedSplash class -->
<Canvas Grid.Row="0">
<Image x:Name="extendedSplashImage" Source="images/splash.png" />
<ProgressRing x:Name="ProgressRing" Foreground="White"
HorizontalAlignment="Center" IsActive="True"
MaxHeight="30" MinHeight="30" MaxWidth="30"
MinWidth="30"></ProgressRing>
</Canvas>

Novamente, começaremos iniciando as tarefas de carregamento na ativação. Em seguida, obteremos o objeto da tela inicial a partir dos argumentos de evento ativado e exibiremos a tela inicial estendida.

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

ExtendedSplash eSplash = new ExtendedSplash(splashScreen);

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...

Window.Current.Content = eSplash;
Window.Current.Activate();
}

public ExtendedSplash(SplashScreen splash)
{
InitializeComponent();

// Position the extended splash screen image in the same location as the splash screen image.
this.extendedSplashImage.SetValue(Canvas.LeftProperty, splash.ImageLocation.X);
this.extendedSplashImage.SetValue(Canvas.TopProperty, splash.ImageLocation.Y);
this.extendedSplashImage.Height = splash.ImageLocation.Height;
this.extendedSplashImage.Width = splash.ImageLocation.Width;

// Position the extended splash screen's progress ring.
this.ProgressRing.SetValue(Canvas.TopProperty, splash.ImageLocation.Y + splash.ImageLocation.Height + 32);
this.ProgressRing.SetValue(Canvas.LeftProperty,
splash.ImageLocation.X +
(splash.ImageLocation.Width / 2) - 15);
}

Realize as tarefas de carregamento necessárias enquanto a tela inicial estendida estiver na tela e, em seguida, navegue para a página de aterrissagem.

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
RemoveExtendedSplash();
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

void RemoveExtendedSplash()
{
Window.Current.Content = new LandingPage();
}

Inicialização de aplicativo adiada

O padrão de inicialização final que discutiremos é inicialização de aplicativo atrasada. A inicialização atrasada é semelhante à inicialização estendida no sentido de que possibilita a preparação da página de aterrissagem antes da transição para fora da tela inicial. Entretanto, em vez de exibir uma tela inicial “estendida”, o aplicativo atrasa o descarte da tela inicial normal até que as tarefas assíncronas tenham sido executadas. Como os aplicativos têm um tempo limitado para concluir esse atraso, o padrão de atraso deve ser usado com moderação, e principalmente, para concluir operações assíncronas simples como ler as configurações do aplicativo antes que o mesmo seja exibido. Além disso, se você não conseguir lidar apropriadamente com os erros/exceções durante esse tempo, é possível que a inicialização seja encerrada. Portanto, se o seu aplicativo precisar fazer chamadas à rede ou processar grandes quantidades de dado, o padrão de inicialização de aplicativo esqueleto ou estendida deve ser usado.

Abaixo há um exemplo da inicialização atrasada usando o aplicativo Fotos do Consumer Preview. Quando um arquivo .jpg é aberto na área de trabalho, o aplicativo Fotos é iniciado como o manipulador padrão desse tipo de arquivo. O aplicativo Fotos usa atraso para carregar a miniatura da imagem antes que a tela inicial seja descartada. Esse é um uso aceitável do atraso, já que a operação de recuperação da miniatura pode ser concluída de forma relativamente rápida. Em seguida, depois que o usuário estiver no aplicativo, a imagem de maior resolução pode ser adquirida assincronamente para substituir a miniatura. Esse fluxo garante que quando o usuário faz a transição para o aplicativo, a miniatura já está na tela.

Aqui está o processo exibido na imagem seguinte:

  1. A imagem .jpg é clicada (Fotos é o manipulador de .jpg padrão).
  2. A tela inicial exibida.
  3. Ativação atrasada, enquanto a miniatura é recuperada.
  4. Aplicativo exibido com a miniatura à vista.

Quando um arquivo .jpg é clicado na área de trabalho, a tela inicial é exibida do manipulador de arquivo .jpg é exibida. Em seguida, o aplicativo atrasa a ativação de forma que a tela inicial permaneça na tela até que o aplicativo tenha processado o arquivo .jpg. Depois que o arquivo .jpg tiver sido processado, o aplicativo conclui o atraso e apresenta a primeira exibição com a miniatura .jpg à vista. 
O fluxo de inicialização de aplicativo atrasada.

Para implementar o fluxo de inicialização atrasada em JavaScript, o atraso de ativação deve ser usado. O atraso dá ao aplicativo a habilidade de atrasar a conclusão da ativação até que as operações assíncronas estejam concluídas. Caso contrário, a ativação é concluída quando o retorno de chamada retorna. Como a maioria das APIs de Tempo de Execução do Windows é assíncrona, isso é útil para aplicativos que precisam confirmar se as ações estão concluídas antes da exibição da interface do usuário inicial do aplicativo. Em C#, os aplicativos podem implementar o atraso, atrasando a chamada ao evento Window.Current.Activate. Abaixo, demonstraremos ambas as abordagens.

JavaScript

Existem duas formas de implementar o atraso da ativação em JavaScript, dependendo de como o seu aplicativo manipula a ativação.

Se o seu aplicativo usa WinJS para lidar com a ativação (padrão para modelos de projeto VS), use o código a seguir. Chamar setPromise nos argumentos do evento de ativação atrasa a conclusão da ativação até que ambas as chamadas assíncronas (WinJS.UI.processAll e asyncOperation) estejam concluídas.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventArgs.setPromise(WinJS.UI.processAll().then(function() {
return asyncOperation().done(function () { });
}));
}
};

Se você registrar manualmente para lidar com o evento ativado, o método ActivatedOperation.getDeferral pode ser usado. Abaixo, um objeto de atraso é obtido durante a ativação e complete é chamado depois que todo o trabalho assíncrono é concluído.

Observação: Complete deve ser chamado independentemente de a chamada assíncrona ter êxito. Se complete não for chamado, o aplicativo nunca retornará da ativação e a inicialização do aplicativo excederá o tempo de espera. Essa é uma desvantagem comum do uso desse padrão. É crucial que o seu aplicativo lide com todos os casos de erro.

Windows.UI.WebUI.WebUIApplication.addEventListener("activated", onActivated, false);
function onActivated(eventArgs) {
if (eventArgs.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
var deferral = eventArgs.activatedOperation.getDeferral();
asyncOperation().done(function () {
deferral.complete();
}, function (error) {
deferral.complete();
});
}
}

C#

Para implementar o atraso em C#, simplesmente adie a chamada ao evento Window.Current.Activate até que as operações de carregamento estejam concluídas. Lembre-se: assim como em JavaScript, você só deve atrasar essa chamada brevemente para concluir operações simples. Se o seu aplicativo não conseguir ativar sua janela dentro de um tempo razoável, o tempo de espera da inicialização se excederá. Além disso, atrasos longos causam impacto negativo no desempenho percebido de seu aplicativo, o que fará com que você não seja querido pelos usuários.

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
// Create a frame to act navigation context and navigate to the first page.
var rootFrame = new Frame();
rootFrame.Navigate(typeof(BlankPage));

// Place the frame in the current Window and ensure that it is active.
Window.Current.Content = rootFrame;

// Use “await” to execute an async operation prior to activating a window.
// Remember, avoid lengthy operations here.
await asyncOperation();

Window.Current.Activate();
}

Conclusão

Nesta postagem, discutimos algumas técnicas para produzir uma experiência de inicialização elegante. Para diferenciar a aparência de seu aplicativo, revimos quatro padrões de design específicos que podem ser aplicados a qualquer aplicativo estilo Metro. Conforme você continua a criar seus aplicativos, lembre-se de priorizar a inicialização do aplicativo e use os padrões destacados nesta postagem. Afinal de contas, essa é a sua primeira chance de causar uma impressão memorável nos usuários.

Para obter mais informações sobre ativação, telas iniciais ou ciclo de vida de aplicativo, consulte os recursos a seguir:

Link

Tipo

Destaques

Adicionando uma tela inicial

Documentos

Seção extensa que destaca a tela inicial e a tela inicial estendida. A seção também inclui diretrizes de design úteis.

Amostra de tela inicial

Amostra

Amostra de SDK que demonstra o padrão de inicialização de aplicativo estendida em JavaScript, C#, C++ e VB.NET.

Classe SplashScreen

Referência à API

Documentação da API da classe de tela inicial.

Como ativar um aplicativo – VB/C#/C++ e XAML

Início rápido

Tutorial para ativar um aplicativo estilo Metro em C#, C++ ou VB.NET.

Como ativar um aplicativo – JavaScript e HTML

Início rápido

Tutorial para ativar um aplicativo estilo Metro em JavaScript.

Amostra de ativação e suspensão de aplicativo

Amostra

Amostra de SDK demonstrando a ativação e suspensão de aplicativo estilo Metro em JavaScript.

Namespace Windows.ApplicationModel.Activation

Referência à API

Documentação da API de namespace de ativação.

Evento WebUIApplication.activated

Referência à API

Documentação da API de evento ativado.

Ciclo de vida de aplicativo

Artigo

Artigo explicando o clico de vida do aplicativo estilo Metro.

--Justin Cooperman, Gerente de Programa, Windows User Experience

  • Loading...
Leave a Comment
  • Please add 1 and 7 and type the answer here:
  • Post