O que alteramos para os desenvolvedores de aplicativos após a //build/ (parte 1)

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 alteramos para os desenvolvedores de aplicativos após a //build/ (parte 1)

  • Comments 0

O Consumer Preview agora está disponível e esperamos que vocês tenham tido a oportunidade de ver o que temos feito. A nossa equipe de engenharia tem trabalhado muito desde a //build/. Temos lido os seus comentários e, com eles, aperfeiçoamos a nossa plataforma de desenvolvimento. Ao mesmo tempo, estamos dando os retoques finais em vários recursos da plataforma que vocês ainda não viram.

Junto com o trabalho que fizemos diretamente no Windows, também fizemos vários aperfeiçoamos nas nossas ferramentas do Visual Studio desde a //build/. Houve aperfeiçoamentos tanto para o desenvolvimento de aplicativo estilo Metro quanto para outros cenários também. Falarei sobre o desenvolvimento do estilo Metro aqui, mas se vocês estiverem interessados em outros recursos do VS, o blog do Jason Zander é um ótimo lugar para começar.

Sabemos que vocês também têm estado muito ocupados. Vocês começaram mais de 5.000 segmentos diferentes nos fóruns do MSDN Developer Preview e publicaram cerca de 30.000 mensagens. Sabemos, por meio da nossa telemetria, que vocês têm usado o Visual Studio para experimentar a nossa plataforma de desenvolvimento. Vocês criaram milhares de pacotes de aplicativos desde setembro.

E isso me traz ao presente tópico. Quando vocês começarem a criar os seus aplicativos no Consumer Preview, que tipo de alterações poderão esperar? Um dos nossos principais focos no Consumer Preview era tornar o Windows uma plataforma melhor para vocês, os desenvolvedores. Temos facilitado o uso das APIs e a criação de controles padrão da IU estilo Metro. Aperfeiçoamos as ferramentas para que vocês sejam mais produtivos e criem aplicativos rápidos e fluidos. E criamos recursos totalmente novos para que vocês aproveitem ainda mais a riqueza do Windows e a força do hardware.

Nesta postagem composta de duas partes, realçarei alguns dos trabalhos importantes que fizemos para aperfeiçoar a plataforma e as ferramentas no Consumer Preview. Adicionamos alguns novos recursos e aprimoramos os recursos existentes, tudo para proporcionar a vocês uma melhor experiência no desenvolvimento de aplicativos estilo Metro. Achamos que vocês vão gostar das alterações.

Suporte ao DX em XAML

“Precisamos poder renderizar muito rápido com o uso do DirectX… também queremos usar a IU estilo Metro e, com isso, quero dizer que não desejamos criar toda a IU do zero no DirectX.”
– Desenvolvedor de aplicativos estilo Metro

Ouvimos muitas declarações como essa após o lançamento do Developer Preview. Desenvolvedores como vocês desejavam combinar os recursos de renderização do modo imediato DirectX de alto desempenho com a interatividade avançada, o modelo de controle e o tempo de design do XAML.

Vocês foram ouvidos. Com o Consumer Preview, vocês agora podem integrar perfeitamente o XAML e o DirectX 11 no mesmo aplicativo estilo Metro para criar uma experiência rápida e fluida. Por exemplo, agora vocês podem criar um jogo com DirectX e usar XAML para processar a entrada, criar gráficos para menus e vídeos de alerta ou associar ao modelo de dados do aplicativo.

Com esse intuito, adicionamos 3 novos tipos de XAML para dar suporte a uma grande variedade de cenários interoperáveis com o DirectX, cada um com recursos diferentes:

  • O SurfaceImageSource permite a composição completa do conteúdo do DirectX em um aplicativo XAML. Isso permite extrair o conteúdo do DirectX para a árvore visual em XAML, útil para efeitos de imagem complexos, visualização de dados e outros cenários de desenho no modo imediato.
  • O VirtualSurfaceImageSource éusado para conteúdo virtualizado em escala grande. Ele se destina a aplicativos que exigem movimento panorâmico e zoom para conteúdos grandes, como mapas e visualizadores de documentos.
  • O SwapChainBackgroundPanel se destina a cenários em tela inteira com foco no DirectX. Ele é ótimo para jogos e outros aplicativos DirectX em tela inteira de baixa latência com sobreposição em XAML.

Isto é realmente avançado: usufrua a força dos elementos gráficos completos do DX combinada com a facilidade do XAML. Se vocês estiverem entusiasmados como estamos com esses novos recursos, confira o nosso tutorial do DirectX e XAML no MSDN.

Também há aplicativos de exemplo disponíveis:

Blend e os designers do Visual Studio

XAML

Temos outras ótimas notícias. O Visual Studio beta não apenas inclui o Blend para HTML, como também inclui uma versão de pré-lançamento do Blend para XAML. O Blend agora dá suporte a design em HTML e XAML, basta selecionar o tipo de projeto desejado. O Blend para XAML dá suporte à animação e criação de estado visual na combinação, pronto para os seus aplicativos estilo Metro.

Exibição em tela inteira do designer Blend para XAML, mostrando como vocês podem editar as propriedades do botão

O novo designer Blend para XAML que acompanha as ferramentas do Visual Studio

No Visual Studio, o designer XAML agora dá suporte ao controle e à edição do modelo de dados, e oferece um melhor suporte aos controles de aplicativos estilo Metro, como o SemanticZoom, GridView e o AppBar.

Visualizando um layout XAML no Visual Studio.  A exibição do designer aparece no painel de exibição, e a marcação XAML aparece no painel abaixo.

Usufrua o designer XAML diretamente no Visual Studio

HTML

O Blend para HTML vem com inúmeros aperfeiçoamentos para a criação de aplicativos HTML.

Controle ListView em HTML mostrado no designer Blend para HTML. A interface do usuário do ListView aparece no painel de exibição principal. Marcações HTML e CSS usadas para criar o controle e conferir estilo aparecem em painéis separados abaixo.

Usufruam os recursos estendidos do designer Blend para HTML

Entre outras coisas, expandimos os recursos de edição dos controles de aplicativos estilo Metro, que agora incluem edição interativa de modelos de dados do ListView. Além disso, agora é possível editar fragmentos HTML no local, exatamente na página em que eles são usados, e eles podem ser aninhados com a profundidade necessária. Além disso, há muitos aperfeiçoamentos de produtividade no painel de atributos HTML e na inspeção de propriedade da CSS, incluindo o realce dos valores substituídos pelo JavaScript.

Depois de baixarem o Visual Studio, iniciem os designers e experimentem alguns desses aperfeiçoamentos.

Biblioteca do Windows para navegação em JavaScript

Outra área que tem recebido muita atenção é o WinJS (Biblioteca do Windows para JavaScript), que, entre muitos aperfeiçoamentos, teve o modelo de navegação simplificado. Os modelos do VS na //build/ chamaram explicitamente as APIs WinJS.UI.Fragments para carregar, de forma dinâmica, novas partes de HTML (fragmentos) para o DOM no tempo de execução. Mas o carregador de fragmentos é uma API de baixo nível e exigiu os modelos para conter também vários códigos clichê bastante complexos para concluir o cenário atual.

Se tiverem tentado usar o código gerado nos modelos do Developer Preview, vocês sabem que isso pode ser complicado.

  • Era difícil ler e usar o código.
  • Vocês eram responsáveis pelo código que inicializava o fragmento.
  • A inicialização dos controles do WinJS na nova página também era responsabilidade sua.
  • Era muito difícil acompanhar o estado em cada página.

Em resposta aos seus comentários, criamos um novo recurso para facilitar a sua vida: controles de página.

Os controles de página foram inseridos na parte superior do carregador de fragmentos e adicionam peças de alto nível necessárias para a navegação em uma única página:

  • Um ciclo de vida de criação bem definido
  • Um escopo bem definido para os seus dados
  • Ativação automática dos controles do WinJS no momento certo
  • O conteúdo automaticamente se torna filho do DOM
  • Uma API que é mais fácil de ler e usar

Os modelos do projeto do VS também geram um novo arquivo, navigator.js, que encapsulam toda a navegação de nível superior para o seu aplicativo. Isso é criado como um WinJSControl personalizado, nomeado PageControlNavigator. O código de navegação nesse arquivo é muito mais simples do que o código de navegação dos modelos do Developer Preview.

Para obterem mais informações sobre o novo modelo de navegação, consultem:

Suporte a DRM

Antes, o desenvolvimento de um aplicativo do Windows que dava suporte a conteúdo DRM era um desafio. Como desenvolvedores, vocês tinham que ter um profundo conhecimento das tecnologias DRM usadas para proteger o seu conteúdo. Além disso, haviaum programa de certificação rígido pelo qual o seu aplicativo tinha de passar para que ele atendesse aos requisitos do suporte a DRM.

Com o lançamento do Silverlight, a Microsoft simplificou muito todo esse processo. No Windows 8, estamos levando esse modelo simplificado para os aplicativos estilo Metro. Se já tiverem um serviço de licença que atenda às licenças do PlayReady, vocês poderão adicionar suporte para conteúdo DRM do PlayReady dentro do seu aplicativo muito mais rápido do que antes, com sobrecarga mínima. E vocês podem incluir esse suporte usando HTML ou XAML e C++, C# e JavaScript. Nunca foi tão fácil criar uma experiência avançada com conteúdo protegido no Windows.

Para ajudá-los a fazer isso, introduzimos uma nova superfície de APIs estilo Metro do PlayReady no Consumer Preview. Vocês podem usar essas APIs para implementar rapidamente o suporte à reprodução DRM do PlayReady dentro do seu aplicativo. Depois, concentre os seus esforços de desenvolvimento na criação de outros ótimos recursos e de uma experiência que os seus clientes adorem. Para aplicativos estilo Metro, o SDK é gratuito e não é necessário enviá-los para o PlayReady para testes de conformidade DRM. Vocês podem se concentrar na criação de experiências incríveis para os seus usuários.

Aqui está um trecho de código mostrando uma Solicitação de serviço de individualização (JS):

var indivSr = new Microsoft.Media.PlayReadyClient.PlayReadyIndividualizationServiceRequest();
indivSr.beginServiceRequest().then(indivSrOnComplete, indivSrOnError);

Para obterem mais informações sobre como dar suporte ao conteúdo DRM do PlayReady dentro do aplicativo, vejam a amostra no MSDN.

Animações independentes

No Developer Preview, vocês tiveram acesso a um conjunto de animações CSS que puderam usar para criar as suas próprias lindas transições dentro do seu aplicativo estilo Metro escrito em HTML/CSS/JS. Para o Consumer Preview, fizemos enormes aperfeiçoamentos nessas animações com base nas nossas experiências no IE com aceleração de hardware, agora animações básicas podem ser executadas independentemente da thread de IU e inteiramente na GPU. Chamamos essas animações independentes, e elas facilitam mais do que nunca a criação de um design estilo Metro rápido e fluido.

A Biblioteca de animação do Windows 8 foi projetada para usufruir totalmente as animações independentes. Se vocês estiverem criando animações personalizadas, recomendo que usem as animações independentes somente com a Animação CSS/Transições ou Transformações e Opacidade. 

A maneira tradicional de se fazer animações com JavaScript põe o trabalho no segmento da interface do usuário; vocês apenas alteram as coordenadas do seu objeto no DOM e ele redesenha. Embora isso seja relativamente direto, o segmento da interface do usuário é bloqueado e o trabalho é colocado na CPU, o que é dispendioso! Fica assim:

<script type="text/javascript">
function doAnimation() {
foo.style.left = parseInt(foo.style.left) + 1 + 'px';
if (foo.style.left != '100px')
{ setTimeout(doMove, 20); }
}

function init() {
foo = document.getElementById('fooObject');
foo.style.left = '0px';
doAnimation();
}
</script>

Quando vocês usam animações independentes, elas são compostas separadamente do segmento da interface do usuário e todo o trabalho ocorre de forma nativa no hardware.

<style>

.doAnimation{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 2s;
-ms-transform: translateX(100px);
}
</style>

O uso dessas animações resultará em experiências contínuas/sem problemas para os seus usuários porque essas animações não são afetadas pelo script em execução no segmento da interface do usuário. Vocês não precisam fazer nenhum trabalho adicional ou marcação. Basta que continuem usando as animações CSS certas e o Windows fará o resto.

Para obter mais informações sobre essas animações CSS, confiram:

Aperfeiçoamentos da depuração

Compreendemos a importância de se ter suporte a uma depuração de primeira classe para aplicativos estilo Metro, e fizemos vários aperfeiçoamentos para facilitar essa tarefa.

Há grandes aperfeiçoamentos no número de objetos C++ que você pode inspecionar na janela Inspeção. Em vez de apenas ver um objeto COM, é possível expandi-lo para ver muitas das propriedades e campos desejados. (Para obter a melhor experiência de depuração para C++, baixe os símbolos de depuração do servidor de símbolos do Windows). Há alterações incrementais na inspeção dos objetos C# e Visual Basic também.

Exibição aproximada da janela Inspeção para um projeto C++, mostrando um objeto COM de exemplo e propriedades e campos expandidos na janela Inspeção.

Inspecione mais objetos na janela Inspeção

Nós também aperfeiçoamos a depuração para métodos assíncronos no Visual Basic e C#. O depurador, em especial, agora trata exceções rejeitadas pelos métodos void assíncronos como não manipuladas pelo usuário, permitindo que ele quebre diretamente no método void assíncrono. Também, no C++, vocês agora podem ver informações de erro detalhadas quando houver uma exceção WinRT, assim como ocorre no Visual Basic, C# e JavaScript.

Outra área em que temos trabalhado é a interface do usuário no disparo de eventos Suspender, Continuar e Desligar da Barra de ferramentas do local de depuração. Agora vocês podem selecionar um processo específico no qual disparar o evento.

Exibição aproximada dos botões suspender, continuar e desligar no Visual Studio. À esquerda dos botões, há uma lista suspensa em que vocês podem escolher um processo para o qual enviar mensagens.

IU para disparar eventos de tempo de vida do aplicativo

Desde a //build/, adicionamos vários recursos no Simulador também, por exemplo:

  • Elementos visuais aperfeiçoados, com cromado mais fino que utiliza menos espaço na tela
  • Simulação de local, para que vocês possam inserir a latitude/longitude, altitude e radius de erro para simular alterações no local do dispositivo
  • Rotação mais rápida e emulação de toque aperfeiçoada
  • Suporte à resolução 1024 x 768
  • A capacidade de capturar telas do aplicativo em execução e salvá-las na área de transferência ou em um arquivo


Simulador mostrando a tela inicial do Windows 8 com uma linha fina de botões à direita.

Interface do usuário do simulador atualizada com cromado mais fino

Há muito mais a caminho

Temos lido os seus comentários e esperamos que vocês gostem do que fizemos a partir deles. Mas fizemos muito mais do que poderia ser descrito em uma única postagem. Na parte 2 desta postagem, realçarei mais alterações feitas, incluindo atualizações sobre como vocês podem trabalhar com mosaicos e notificações, atualizações nos controles HTML/JavaScript, melhor criação de aplicativos híbridos e muito mais.

-- Jake Sabulsky, gerente de programas, Windows

Esta postagem foi obra de um grupo. Agradecimentos a: Jesse Bishop, Jonathan Aneja, Chris Tavares, Eric Salerno, Angelina Gambo e Ian LeGrow

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