O que mudou para os desenvolvedores de aplicativos desde o Consumer Preview

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

O que mudou para os desenvolvedores de aplicativos desde o Consumer Preview

  • Comments 1

Chegou novamente o momento: Com o novo Release Preview e as novas ferramentas de desenvolvedor, o Windows 8 está um passo mais próximo da versão final. E como no Consumer Preview, nossa equipe de engenharia tem trabalhado duro polindo a plataforma de desenvolvimento para oferecer a melhor experiência de desenvolvimento possível no Windows 8. Nesta postagem, destaco alguns dos novos recursos nos quais temos trabalhado e também ajudo você a começar a migração de seus aplicativos existentes do Consumer Preview para o Release Preview.

Mas primeiro alguns insights sobre o processo de desenvolvimento do Windows

Mas antes de entrar nos novos recursos do Release Preview, eu gostaria de dar um pequeno insight sobre o que nossa equipe pensa sobre as alterações de recurso na etapa Release Preview. Nesse momento do processo de desenvolvimento, a maioria dos recursos do Windows está inserida na plataforma. No Release Preview, nossa meta é polir essas experiências existentes.

Portanto, o que isso significa para você como um desenvolvedor? Isso significa que a maioria das alterações que você encontrará no Release Preview são muito menores do que nas relações anteriores do Windows 8. Os novos recursos destinam-se a atender a necessidades específicas. Muito das alterações simplesmente fazem com que os cenários do Consumer Preview funcionem ainda melhor do que antes. Corrigimos bugs na plataforma, aumentamos seu desempenho (também tornamos mais fácil criar aplicativos mais rápidos, fazendo apenas pequenas mudanças em seu código), e aprimoramos a experiência do desenvolvedor até que estivéssemos felizes com os resultados.

Isso é ótimo para você porque isso significa que todo o conhecimento e habilidades ganhos com o desenvolvimento de aplicativos no Consumer Preview ainda são totalmente aplicáveis ao Release Preview. Isso também significa que a quantidade de alterações necessárias aos seus aplicativos existentes é mínima. Mas ao mesmo tempo, a plataforma de desenvolvimento é muito mais aprimorada do que antes. Observe as mudanças e você terá uma boa ideia do que estivemos preparando.

Configurações de aplicativo de roaming de alta prioridade

O Windows 8 Application Data oferece uma forma de habilitar facilmente um comportamento “configure uma vez, use em qualquer lugar” para as configurações de seu aplicativo com dados de aplicativo móvel. Com muito pouco esforço de sua parte, seus usuários obtêm a mesma configuração de aplicativo em todos os seus PCs com Windows 8. Com o Release Preview, expandimos esse recurso para incluir as configurações de aplicativo móvel HighPriority. Com o roaming de alta prioridade, você pode criar uma experiência de aplicativos contínua entre PCs, permitindo que uma pequena quantidade de dados de estado em seu aplicativo sejam transferidos com alta frequência.

Por exemplo, um aplicativo leitor de notícias poderia usar a configuração HighPriority para transferir o artigo de notícias que um usuário estava lendo. Sempre que o usuário alterar os artigos, o leitor de notícias altera essa configuração e transfere. Se esse usuário alternasse para um PC com Windows 8 diferente, o aplicativo leitor de notícias poderia exibir o último artigo que o usuário estava lendo, para que ele continuasse a ler de onde estava em seu outro dispositivo.

Melhor de tudo, esse recurso é fácil de implementar. Simplesmente, faça uma configuração ou composição com o nome “HighPriority” no contêiner-raiz Configurações móveis. Essa configuração é transferida um minuto depois de ser alterada, o que permite que você transfira partes essenciais dos dados de estado do seu aplicativo, de forma que um usuário possa pegá-lo de onde parou entre PCs. O roaming de alta prioridade funciona somente com uma configuração, portanto, se você precisar transferir diversas partes de dados, tais como um artigo e um número de página, poderá usar um valor composto. A composição “HighPriority” não pode exceder 8k. Se ela for maior do que isso, será transferida como uma configuração normal.

Para começar, consulte Application data Sample (Amostra de dados do aplicativo), que foi atualizado para incluir um exemplo de configurações de aplicativo móvel de Alta Prioridade.

Modelos aprimorados do Visual Studio

Outra área onde fizemos diversas melhorias são os modelos do Visual Studio. Fizemos várias alterações em nossos modelos e inclusive adicionamos um novo que facilita o início de um novo projeto para que você tenha um ótimo aplicativo funcionando e em execução rapidamente.

Atualizações nos modelos XAML

Os modelos XAML receberam muito foco no Release Preview. Aqui estão algumas das alterações mais importantes que fizemos.

  • Removemos do modelo de aplicativo Em branco os componentes que não eram necessários, por exemplo, auxiliares para associação de dados, auxiliares de página para suporte a navegações, gerenciamento de tempo de vida do processo etc. Isso proporciona mais flexibilidade para criar seu aplicativo do zero. Caso adicione um modelo de item que precise desses componentes comuns, você tema opção de adicioná-los.
  • Os modelos XAML agora dão suporte à virtualização como padrão. GridView e ListView agora tiram vantagem de uma região do cabeçalho, permitindo que os itens associados sejam virtualizados. Além disso, a página de aterrissagem do GridApp agora permite somente a um subconjunto de itens em vez de toda a coleção, possibilitando um melhor desempenho. Essas melhorias significam que o seu aplicativo fará movimento panorâmico/rolará mais rapidamente do que antes sem qualquer trabalho extra de sua parte.
  • Adicionamos animações de entrada a todas as páginas (exceto na Página em Branco, que continua em branco. Essas animações suavizam as transições entre as páginas dos modelos e tornam seu aplicativo rápido e fluido para o usuário.
  • O modelo do Project D2D agora oferece suporte a XAML.

Atualizações de todos os modelos

Aprimoramos a navegação de todos os modelos. No Consumer Preview, a navegação nos modelos era principalmente estruturada para toque. Agora, os modelos oferecem suporte completo a navegação com teclado e mouse usando os botões voltar e avançar e os atalhos de teclado. Usando os modelos, a estrutura de navegação de seus aplicativos é automaticamente configurada para aceitar todas as formas de entrada.

Novo modelo para a criação de um componente do Tempo de Execução do Windows

Além de atualizar nossos modelos existentes, também quisemos facilitar a criação de seus próprios componentes do Tempo de Execução do Windows. Para fazer isso, adicionamos um novo modelo C#/VB que faz o trabalho sujo para você. Este modelo permite que você crie rapidamente um novo componente de tempo de execução do Windows que pode ser usado em seu aplicativo principal. Você não precisa mais criar manualmente esses componentes do zero porque os modelos fazem todo o trabalho de configuração. Você precisa apenas adicionar sua lógica personalizada e está tudo pronto.

Propriedade de arquivo e APIs de pré-busca de miniatura

Desde o lançamento do Windows 8 Consumer Preview, temos olhado com cuidado o desempenho, e como ajudá-lo a criar aplicativos mais rápidos e fluidos. Um gargalo de desempenho crucial em que trabalhamos foi o acesso aos arquivos para aplicativos que usam o sistema de arquivos para exibir modos de exibição da galeria, listas de reprodução de músicas ou conjuntos de documentos.

Recuperar propriedades de arquivo e miniaturas de imagem pode levar um longo tempo nas compilações do Customer Preview. Em particular, o modelo de recuperação de propriedade é por demanda, portanto, os aplicativos que acessam muitos arquivos de uma vez podem sofrer muita sobrecarga no back-end devido à comunicação de processo cruzado repetida. Além disso, nem todas as propriedades são otimizadas para acesso rápido, portanto, se você quiser usar propriedades incomuns seu aplicativo é penalizado.

Para lidar com essas lacunas sem forçar alterações extensas no código de seu aplicativo, adicionamos dois novos recursos às APIs de modelo de dados.

Windows.Storage.Search.QueryOptions.SetPropertyPrefetch

  • Isso permite que você forneça uma lista de propriedades que o Windows otimizará para recuperação rápida
  • Você pode acessar essas propriedades com os mesmos métodos assíncronos usados antes - elas apenas retornam mais rápido

Windows.Storage.Search.QueryOptions.SetThumbnailPrefetch

  • Isso informa ao Windows que o seu aplicativo precisa de miniaturas dos arquivos no conjunto de resultados da consulta
  • Você pode recuperar as miniaturas com o mesmo método assíncrono usado antes - elas apenas retornam mais rápido

Aqui está como aparece em JavaScript:

var search = Windows.Storage.Search;
var fileProperties = Windows.Storage.FileProperties;

// Create query options with common query sort order and file type filter.
var fileTypeFilter = [".jpg", ".png", ".bmp", ".gif"];
var queryOptions = new search.QueryOptions(search.CommonFileQuery.orderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and an array for additional properties.
var imageProperties = fileProperties.PropertyPrefetchOptions.imageProperties;
var copyrightProperty = "System.Copyright";
var colorSpaceProperty = "System.Image.ColorSpace";
var additionalProperties = [copyrightProperty, colorSpaceProperty];
queryOptions.setPropertyPrefetch(imageProperties, additionalProperties);

// Set up thumbnail prefetch.
var thumbnailMode = fileProperties.ThumbnailMode.picturesView;
var requestedSize = 190;
var thumbnailOptions = fileProperties.ThumbnailOptions.useCurrentScale;
queryOptions.setThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Query the Pictures library
var query = Windows.Storage.KnownFolders.picturesLibrary.createFileQueryWithOptions(queryOptions);
query.getFilesAsync().done(function (files) {
// Output the query results
files.forEach(function (file) {
// getImagePropertiesAsync returns synchronously when prefetching
// retrieved the properties in advance.
file.properties.getImagePropertiesAsync().done(function (properties) {
// Use image properties
});

// Similarly, extra properties are retrieved asynchronously but may
// return immediately when prefetching completed.
file.properties.retrievePropertiesAsync(additionalProperties).done(function (properties) {
// Use additional properties
});

// You can also retrieve and use thumbnails
file.getThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions).done(function (thumbnail) {
// Use the thumbnail
});
});
});

Um código semelhante em C# seria como o seguinte:

const string CopyrightProperty = "System.Copyright";
const string ColorSpaceProperty = "System.Image.ColorSpace";

// Set up file type filter.
List<string> fileTypeFilter = new List<string>();
fileTypeFilter.Add(".jpg");
fileTypeFilter.Add(".png");
fileTypeFilter.Add(".bmp");
fileTypeFilter.Add(".gif");

// Create query options.
var queryOptions = new QueryOptions(CommonFileQuery.OrderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and a list for additional properties.
List<string> propertyNames = new List<string>();
propertyNames.Add(CopyrightProperty);
propertyNames.Add(ColorSpaceProperty);
queryOptions.SetPropertyPrefetch(PropertyPrefetchOptions.ImageProperties, propertyNames);

// Set up thumbnail prefetch.
const uint requestedSize = 190;
const ThumbnailMode thumbnailMode = ThumbnailMode.PicturesView;
const ThumbnailOptions thumbnailOptions = ThumbnailOptions.UseCurrentScale;
queryOptions.SetThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Set up the query and retrieve files.
var query = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);
IReadOnlyList<StorageFile> fileList = await query.GetFilesAsync();
foreach (StorageFile file in fileList)
{
// GetImagePropertiesAsync returns synchronously after prefetching
// retrieves the properties in advance.
var properties = await file.Properties.GetImagePropertiesAsync();
// Use image properties

// similarly, extra properties are retrieved asynchronously but may
// return immediately when prefetching completes.
IDictionary<string, object> extraProperties = await file.Properties.RetrievePropertiesAsync(propertyNames);
// Use additional properties

// You can also retrieve and use thumbnails.
var thumbnail = await fle.GetThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions);
// Use thumbnail
}

Em nosso teste de aplicativos que usam esses novos recursos, vimos melhorias significativas: 70% de melhoria no tempo levado para mostrar um modo de exibição de fotos da biblioteca Imagens do usuário com o StorageDataSourceAdapter, e 400% de melhoria de um aplicativo que preenche um banco de dados com as propriedades do arquivo extraídas do sistema de arquivos.

Portanto, se você estiver compilando um aplicativo que precise acessar grandes números de arquivos, observe esses novos recursos e use-os para agilizar seu aplicativo. Para obter mais informações, consulte a documentação da API Windows.Storage.Search.QueryOptions no Centro de Desenvolvimento.

Designers do Blend e do Visual Studio

Desde o Consumer Preview, continuamos a aprimorar nossas ferramentas de design. Sabemos que a interface de usuário de seu aplicativo é uma das principais formas de você fazer seu aplicativo ser notado, portanto, quisemos tornar o mais fácil possível integrar todos os novos conceitos de design estilo Metro em seu aplicativo.

Criação de estado de exibição aprimorado para aplicativos XAML

Os estados de exibição são um dos conceitos principais da interface do usuário dos aplicativos estilo Metro. No Release Preview, tanto o designer VS XAML e o Blend foram atualizados para que você agora possa visualizar e criar páginas usando Visual States para implementar os estados de exibição do aplicativo de plataforma (FullScreenLandscape, FullScreenPortrait, Filled e Snapped) usando o painel Device (Dispositivo) (anteriormente chamado de painel Platform [Plataforma]). O painel Device agora muda automaticamente os estados visuais quando você altera a exibição. Ativar o modo de gravação permite que as alterações que você fez no Design Surface ou Property Inspector alterem o estado visual selecionado no momento em vez sempre fazer alterações no painel Base.

Imagem mostrando o novo painel Device. A imagem mostra o painel no modo FullScreenLandscape com um menu suspenso para selecionar outros estados de exibição. A opção para habilitar a gravação de estado também é mostrada.O novo painel Device (Dispositivo) com suporte a design de estado de exibição completo

Além disso, você agora pode criar e visualizar estados visuais com animações de tema da Biblioteca de Animação usando o recurso de design Visual State do Blend. A Biblioteca de Animação é uma suíte de animações estilo Metro que foi criada especificamente para tirar vantagem do recurso de animação da plataforma. Essas animações são usadas na interface do usuário do Windows e também estão disponíveis para seu aplicativo estilo Metro.

Melhor produtividade no Blend para criação em HTML

No Consumer Preview, trabalhamos para obter muitas funcionalidades excelentes em nossa ferramenta Blend para criação em HTML. No Release Preview, focalizamos facilitar e melhorar sua produtividade no uso dessa funcionalidade no Blend. Fizemos várias melhorias no design geral HTML/CSS no Blend que tornam o design de aplicativos mais fácil no Release Preview, por exemplo:

  • O Blend agora aceita Recortar, Copiar e Colar propriedades CSS e regras de estilo, assim como elementos no quadro de arte e Live DOM.
  • Você pode editar as propriedades CSS e os atributos HTML de vários elementos ao mesmo tempo.
  • Você pode escolher “Create a style rule from element class/id” (Criar uma regra de estilo de classe/id de elemento) e “Add/Remove class” (Adicionar/Remover classe) via menu de contexto em qualquer elemento.
  • Todos os painéis pesquisáveis indicam melhor quando um filtro de pesquisa é aplicado.

HTML_blend_designerO designer HTML Blend com novo recurso recortar, copiar e colar

Também fizemos algumas melhorias mais específicas para torná-lo mais produtivo ao criar aplicativos. Por exemplo, agora é mais fácil trabalhar com controles WinJS no Blend.

  • O Blend aceita valores dinâmicos para propriedades de controle.
  • Agora o Blend mostra informações de erro detalhadas no painel de resultados quando um controle WinJS lança uma exceção.
  • Aprimoramos a interface do usuário para alternar entre as exibições SemanticZoom e a ativação dos controles Flyout e Menu.
  • Adicionamos novos editores de valores da propriedade de ícone AppBarCommand, AppBarCommand e MenuCommand Flyout.

Portanto, independentemente de você estar criando em HTML/CSS ou XAML, você encontrará muitas melhorias em nossas ferramentas de design para aplicativos estilo Metro. Obviamente, os novos recursos que descrevemos aqui são apenas uma amostra do trabalho que fizemos. Verifique as ferramentas você mesmo para ver todas as melhorias.

Modelo de evento de gesto JavaScript

Outra área em que fizemos melhorias significativas é na forma em que o modelo de evento de gesto funciona para aplicativos JavaScript. Nossa meta era dar a você mais flexibilidade e poder na maneira de seu aplicativo processar gestos. Especificamente:

  • O novo modelo de evento aceita vários gestos simultâneos. Essa nova funcionalidade significa que agora você pode criar uma UX de vários gestos (por exemplo, um gesto baseado em vários controles deslizantes).
  • Agora você obtém controle explícito sobre quais elementos são direcionados a gestos, e sobre quais contatos de toque ativos são alimentados em cada gesto. No Consumer Preview, o modelo de evento tinha regras muito simples e restritivas para determinar contados de destino e relevantes. No novo modelo, você decide quando um contato fica abaixo, com que outros contatos ele deve ser agrupado, e para qual elemento entregar os eventos de gesto resultantes. Você pode inscrever o contato em mais de um reconhecedor de gestos ao mesmo tempo; você pode criar mais de um reconhecedor de gestos direcionado ao mesmo elemento; em ambos os casos, seus ouvintes de evento pode escolher de forma programática quais gestos devem ser honrados.
  • Ele permite que você direcione e manipule eventos de toque e de gesto, independentemente um do outro (até agora ele forçava o toque e o gesto a se direcionarem ao mesmo elemento). Isso torna muito mais fácil implementar cenários de entrada mais complexos, por exemplo, permitindo que o usuário realize gestos multitoque para ampliar um contêiner, enquanto ao mesmo tempo realça elementos individuais nesse contêiner que os dedos estão tocando.
  • O evento retorna dados de transformação em um formato que permite que você o consuma facilmente para manipular conteúdo em resposta a gestos. Antigamente, você precisava realizar uma quantidade significativa de matemática de matriz para extrair os dados relevantes. O novo modelo retorna deltas de transformação (incrementos) no espaço de coordenada do pai. Essa é exatamente a informação de que você precisa para concatenar a transformação CSS atual que posiciona o elemento no contêiner para atualizar a posição, tamanho e orientação do elemento.

Com essas alterações, agora é muito mais fácil trabalhar com entrada de gesto em seu aplicativo. Para obter mais informações, consulte Responding to user interaction (Respondendo à interação do usuário) no Centro de Desenvolvimento e a amostra Instantiable gesture (Gesto que pode ser instanciado).

Atualizações do Centro de Desenvolvimento

Além de todo o trabalho que temos feito na plataforma de desenvolvimento, gastamos muito tempo aprimorando nossa documentação no Centro de Desenvolvimento. O Centro de Desenvolvimento é a sua entrada para aprender tudo o que há para saber sobre o desenvolvimento de aplicativos estilo Metro e trabalhamos duro para torná-lo o mais completo possível para o Release Preview.

A primeira forma em que aprimoramos o Centro de Desenvolvimento foi simplesmente adicionando mais conteúdo. No Consumer Preview, o Centro de Desenvolvimento tinha o essencial de que você precisava para começar. Agora, no Release Preview, é muito mais fácil encontrar orientações nos tópicos avançados que fazem com que os ótimos aplicativos estilo Metro ganhem visibilidade. Aqui estão alguns dos destaques:

  • Adicionamos muitas novas amostras, incluindo amostras do controle WebView XAML, IndexedDB, o pool de threads, trabalhos da Web JS, e muito mais.
  • Agora há mais de 200 novos tópicos conceituais, Início rápido e tópicos como fazer para ajudá-o a criar aplicativos estilo Metro.
  • A documentação de referência da API está mais completa do que nunca.

Além do novo conteúdo, também tornamos mais fácil para você encontrar informações e começar a criar seu aplicativo. Por exemplo, aprimoramos muito a ligação cruzada entre amostras e sua documentação associada. Você agora pode procurar por uma amostra, observar o código e, em seguida, ir para a documentação que fornece mais detalhes sobre o código que você está observando. Ou se você gostaria de começar na documentação, aprimoramos nossos tópicos de Introdução existentes e adicionamos mais tutoriais básicos para fazer seus esforços de criação de aplicativo decolarem.

Portanto, uma das primeiras coisas que você vai querer fazer quando instalar o Release Preview é ir para o Centro de Desenvolvimento e observar todo esse novo conteúdo você mesmo. Você encontrará essas e outras melhorias para facilitar o desenvolvimento de aplicativos estilo Metro.

Colocando seus aplicativos existentes em execução no Release Preview

Enquanto estávamos desenvolvimento o Release Preview, tentamos manter em um nível mínimo as alterações nos aplicativos. Sabemos que muitos de vocês têm trabalhado duro nos aplicativos e queremos minimizar a rotatividade que você tem que enfrentar para alternar para o Release Preview. Obviamente, levar uma nova plataforma de desenvolvimento a um alto nível de qualidade sempre requer algumas alterações de seus recursos.

Algumas das maiores alterações que fizemos foram nos próprios projetos do Visual Studio (descrevi algumas delas anteriormente nesta postagem). Isso significa que a melhor forma de colocar seu aplicativo em execução é iniciar um novo projeto no Visual Studio, selecionar o modelo de seu aplicativo e começar a importar o seu projeto antigo para o novo. O layout dos modelos não mudou muito, portanto, muito do seu código existente se encaixará perfeitamente. Ao fazer isso, não se esqueça de importar seu manifesto antigo também.

Depois que o seu projeto tiver sido importado, execute seu aplicativo e acompanhe quaisquer erros causados pelas alterações na API. Para ajudá-lo, criamos um Guia de migração  que documenta a maioria das alterações de API que fizemos do Consumer Preview para o Release Preview.

Criando um novo projeto VS e usando o Guia de migração para alterações de API, você deve ter o seu aplicativo em execução no Release Preview rapidamente.

Resumo

Espero que você esteja tão animado como estamos para começar a desenvolver aplicativos no Release Preview. As alterações desta postagem são apenas uma amostra do trabalho que fizemos nesta nova versão. O efeito combinado de todas essas alterações é que o Windows 8 permite que você desenvolva mais facilmente aplicativos mais poderosos do que nunca. Com a ajuda do Guia de migração, você pode começar a tirar vantagem dessas alterações em seus novos aplicativos e nos existentes.

Portanto, vá em frente e baixe o Release Preview e as ferramentas de desenvolvedor e comece a criar aplicativos. Você também pode consultar o blog Windows Store for developers (Windows Store para desenvolvedores), e não se esqueça de que se você tiver uma dúvida, os fóruns do Centro de Desenvolvimento, e nosso blog têm muitas respostas para você. Feliz criação de aplicativos!

--Jake Sabulsky 
   Gerente de Programa, Windows

Um agradecimento especial para Dave Bennett, Marc Wautier, Paul Chapman, Heather Brown, Keith Boyd e Steve Wright por ajudar a criar esta postagem.


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