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

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

  • Comments 0

Como prometido, voltei para falar mais sobre o importante trabalho que fizemos desde a //build/. Na parte 1 desta postagem, comentei sobre a integração entre DirectX e XAML, aperfeiçoamentos para Blend designers, animações independentes CSS e muito mais. Mas tenho certeza que você está ansioso para conhecer mais novidades. Então, vamos começar.

Notificações toast e de mosaico

Mosaicos e toasts são partes fundamentais de nossos princípios de design no estilo Metro. Eles permitem que você veja informações importantes em um relance, mesmo que seu aplicativo não esteja em execução. Recebemos muitos comentários de vocês sobre a experiência de desenvolvimento das notificações toast e de mosaico. Uma grande parte daqueles comentários focava na criação e atualização de mosaicos. Em resposta a isso, aperfeiçoamos a experiência com os mosaicos de 3 maneiras:

  1. Introduzimos APIs de sondagem para atualizar os mosaicos. Você poderá usar o novo API de notificação periódica de mosaico para comandar o Windows a sondar um serviço de nuvem para um conteúdo específico de mosaico para o seu aplicativo. Essa é a maneira mais fácil de manter o mosaico do seu aplicativo ativo usando o conteúdo da Web. O trecho de JavaScript abaixo mostra como iniciar uma sondagem para o mosaico do seu aplicativo:

    // update the tile with a poll URL
    var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
    var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
    var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(polledUri, recurrence);

    O conteúdo retornado do seu serviço Web deve estar em conformidade com o mosaico XML schema. Observe que emblemas de mosaicos também podem ser atualizados por meio da sondagem.

    Para obter mais informações sobre a atualização do seu mosaico, verifique estes links no Dev Center:
  2. Facilitamos a criação de belos mosaicos e de conteúdo toast. Outro comentário que recebemos falava que o trabalho com XML através de Notificações APIs era desnecessariamente complexo. Para facilitar o trabalho com mosaico e notificações toast, introduzimos um módulo de objeto de modelo de notificação, que consiste em uma biblioteca que fará parte do Windows SDK. A biblioteca adiciona construtores (e IntelliSense) para modelos de notificações toast e de mosaico. Eis um pequeno exemplo no JavaScript:

    // create the wide template
    var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
    tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

    // create the square template and attach it to the wide template
    var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
    squareTileContent.textBodyWrap.text = "Hello world!";
    tileContent.squareContent = squareTileContent;

    // send the notification
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

    Como bônus, esse módulo de objeto é estruturado de maneira que você possa utilizá-lo em seu código de servidor também.

    Para ver um novo módulo de objeto em uso e adiquiri-lo para seu próprio projeto, verifique o Exemplo de emblemas e mosaicos de aplicativo. Procure o projeto de NotificationsExtensions no exemplo.
  3. Atualizamos o catálogo de modelos de mosaicos disponíveis a adicionamos a capacidade de atualizar as representações grande e quadrada do mosaico. Agora, você pode atualizar as exibições pequena e grande do seu mosaico usando textos e imagens. Esse exemplo demonstra o uso de um de nossos novos modelos de mosaico (TileSquareText04). Você poderá ver a lista completa de modelos disponíveis no artigo Escolhendo um modelo de mosaico.

Ferramentas JavaScript

Desde a //build/, ouvimos muitos comentários de desenvolvedores sobre a experiência de criação de um aplicativo estilo Metro com JavaScript. Para o Windows 8, o JavaScript é um cidadão de primeira classe na plataforma e queremos ter certeza de que ele será um cidadão de primeira classe também em nossa ferramenta. Com o lançamento do Consumer Preview, se você criar um novo aplicativo estilo Metro usando HTML, CSS e JavaScript, você notará muitas melhorias através do Visual Studio e da Biblioteca do Windows para JavaScript (WinJS). Por exemplo, os modelos para aplicativos estilo Metro baseados em JavaScript são mais legíveis e usam os novos APIs.

Além disso, aperfeiçoamos o desempenho e a precisão do JavaScript IntelliSense no VS:

  • Aperfeiçoamos os resultados em listas de conclusão, go to definition e parâmetros.
  • Aperfeiçoamos a precisão IntelliSense através de uma representação mais completa do DOM, para que você obtenha um extrato de conclusão do DOM.
  • O editor JavaScript agora suporta o indent style inteligente, que escolhe com mais eficiência o caret location em novas linhas baseadas no contexto ao redor.
  • Por fim, aperfeiçoamos a extensão JavaScript IntelliSense no VS, facilitando a ampliação do IntelliSense para qualquer biblioteca JavaScript, como jQuery.

Aperfeiçoamos bastante nossas ferramentas de diagnóstico JavaScript e a experiência de depuração também:

  • Com a janela de estilos no DOM explorer, você poderá copiar e adicionar novas regras e definir propriedades de regras para testar os efeitos das modificações de estilo de aplicativos em execução. Você também poderá fazer o vínculo com o arquivo CSS original diretamente da regra.
  • Além disso, o DOM explorer tem uma nova guia (chamada Events) que o permite localizar o local de origem do manipulador de eventos associado aos elementos DOM.
  • O VS agora exibe escopos, protótipos, agrupamentos de função e exceções na janela Inspeção e Local.
  • Adicionamos suporte para exceções de primeira chance para JavaScript.

Associação de dados C++

Em um mundo de aplicativos conectados, a associação de dados é essencial, e ouvimos que precisaríamos facilitar isso no C++. Para implementá-la, você teria de escrever muitas interfaces, o que acarretava em muitos códigos clichê para o C++/XAML. Corrigimos isso no Consumer Preview. Agora tudo o que vocês têm de fazer é adicionar um atributo [Windows::UI::Xaml::Data::Bindable] à classe à qual os dados precisam ser associados. O XAML terá a mesma aparência. Eis aqui um exemplo que mostra a alteração:

Cabeçalho C++

namespace SimpleBlogReader
{
//To be bindable, a class must be defined within a namespace.
[Windows::UI::Xaml::Data::Bindable]
public ref class FeedItem sealed
{
public:
FeedItem(void){}
~FeedItem(void){}
property Platform::String^ Title;
property Platform::String^ Author;
property Platform::String^ Content;
property Windows::Foundation::DateTime PubDate;
};
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>
    

Controles HTML/JavaScript

No Consumer Preview, simplificamos os controles comuns que quase todos os aplicativos precisam usar. Esses controles são uma parte fundamental do design estilo Metro. Eles dão ao seu aplicativo a consistência com o resto do sistema, e permitem que os usuário alternem com facilidade entre os aplicativos e o Windows. O HTML/JS ListView e a AppBar são dois controles nos quais fizemos grandes aperfeiçoamentos.

Controle ListView

Baseado em comentários do Developer Preview, ampliamos o controle do WinJS ListView para facilitar e flexibilizar o carregamento e modelagem do item.

  1. Criamos uma fonte de dados simples e poderosa chamada Binding.List. Nós a desenvolvemos especificamente para os dados na memória.

    A Binding.List expõe um API que quase sempre espelha o objeto de matriz de JavaScript, a não ser que você precise chamar getAt e setAt para ler e escrever itens, porque o JavaScript não oferece suporte a controle manual de operadores. Binding.List facilita o trabalho com os dados da memória, por exemplo:    
    var data = [10, 20, 12, 7];
    var ds = new WinJS.Binding.List(data);
    ds.push(3);
    ds.splice(2, 1);

    var sorted = ds.createSorted(function (a, b) { return (a - b) });
    ds.push("1");
    console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));

    Esta saída: “original: 10,20,7,3,1; sorted: 1,3,7,10,20

  2. Estendemos o ListView para que ofereça suporte a funções de modelagem com recursos multi-stage. Agora você pode escrever uma função de modelagem que apresenta os dados do item em estágios: o dado mais rápido (como texto) é mostrado instantaneamente e os dados mais lentos (como imagens) são mostrados quando se tornam disponíveis. Esses aperfeiçoamentos permitem um carregamento de dados mais suave para usuários dos aplicativos que você escreve.

Controle AppBar

Depois do //build/, muitos dos comentários afirmavam que era um desafio trabalhar com as AppBars. Então, levamos em consideração seus comentários e reimaginamos a HTML AppBar para facilitar o seu uso. O resultado é uma experiência de desenvolvimento mais objetiva. Vejam esse código como exemplo para entender melhor do que estamos falando:

<div class="win-left">
<button onclick="doClickPlay" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Play</span>
</button>
</div>
<div class="win-right">
<button onclick="doClickAdd" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Add</span>
</button>
</div>
         

Botões do HTML AppBar no Consumer Preview:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}"
>
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}"
>
/button>

Como você pode ver, agora você cria os botões com um conjunto de opções em vez de elementos HTML. A criação de botões, seus estilos, ícones, texto, etc. são manipulados para o seu benefício. A AppBar escala adequadamente quando exibida nos modos retrato e ajustado, recolocando automaticamente os seus botões nas posições corretas.

Fizemos muitos outros aperfeiçoamentos na HTML/CSS/JS AppBar sobre os quais não terei tempo de falar aqui. Confira o Dev Center para obter o código de exemplo completo da AppBar e a documentação.

Ferramenta de interoperabilidade multilíngue

Na //build/, mostramos o recurso para criar um aplicativo estilo Metro híbrido, usando uma combinação de idiomas, incluindo o JavaScript, C++, C#, e o Visual Basic. Com essa versão, você pode criar diretamente esses tipos de aplicativos no Visual Studio, por exemplo, um aplicativo JavaScript que se comunica com uma biblioteca de classe C# ou um aplicativo C# que consome um componente C++. Dessa maneira, você pode tirar vantagem das forças únicas de cada idioma, reutilizar ativos existentes e incentivar que membros da equipe com conjuntos de habilidades diversas contribuam em um mesmo projeto.

JavaScript

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
return from c in this.Customers
where c.State == state
select c;
}

Se você for um desenvolvedor C++, você verá alguns dos mais notáveis aperfeiçoamentos, particularmente em DirectX e XAML. DirectX é excelente para a manipulação direta de pixel e XAML é ótimo para a criação de interações com o usuário, como menus e exibição de alertas. Como descrevi na Parte 1 desta postagem, os aplicativos XAML agora podem usar DX. Esse recurso não estaria completo sem o excelente suporte às ferramentas. Em resposta aos seus comentários, o Visual Studio beta agora inclui suporte interoperável entre C++/XAML e DirectX.

Finalizando

Nessas duas últimas postagens, mostrei um exemplo das alterações que vocês verão no Consumer Preview. Há muitos outros ajustes, aperfeiçoamentos e novos recursos que tornam o desenvolvimento de aplicativos estilo Metro no Windows 8 uma experiência ainda melhor do que foi no Developer Preview.

Para obter mais informações sobre esses aperfeiçoamentos, confira nosso Dev Center reformulado no MSDN. Se você já seguiu qualquer um desses links postados para tópicos em destaque, você provavelmente já notou que o Dev Center está melhor do que nunca.

Eis aqui o que fizemos para melhorar nossa documentação:

  • Seção de referência completa para o Windows Runtime (todos os APIs agora têm descrições)
  • Mais de 30 exemplos adicionados, com suporte para vários idiomas
  • Documentação aperfeiçoada para exemplos
  • Quantidade elevada de páginas WinRT que incluem trechos de código
  • Melhoria significativa de nosso guia UX, incluindo a adição de redlines, wireframes e outros ativos de design reutilizados
  • Navegação melhorada e relevância de pesquisa aumentada
  • Adicionamos um novo elemento de barra lateral que fornece links à APIs importantes e uma instrução resumida para tópicos conceituais.
  • Tornamos os tutoriais do Guia de Introdução e de Início rápido mais úteis em todos os idiomas suportados

Para obter informações mais detalhadas sobre as mudanças que serão feitas nas ferramentas, confira a publicação no blog de Jason Zander. E também há uma série de novos recursos de idiomas no C# e Visual Basic para escrever aplicativos estilo Metro.

Portanto, se você ainda não o fez, baixe o Consumer Preview, instale o novo Visual Studio beta, pegue alguns exemplos/documentos do Dev Center e comece a criar excelentes aplicativos. Manteremos as postagens do blog para ajudar a tornar a sua experiência de desenvolvimento ainda mais fácil.

-- Jake Sabulsky, gerente de programas, Windows

Esta postagem é o resultado de um esforço coletivo graças a Kevin Woley, Jonathan Aneja, Jonathan Garrigues, Jon Gordner, Ryan Demopoulos, Keith Boyd e Ian LeGrow.

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