Aplicativos modernos

Artigo
02/29/2016

Novidades do Windows 8.1 para os desenvolvedores da Windows Store

O Windows 8.1 é uma atualização substancial do Windows OS, com muitas melhorias e recursos novos para ajudá-lo a inovar e construir as melhores criações possíveis. Neste artigo, vamos dar uma olhada nas novas melhorias do Windows 8.1 para desenvolvedores que criam aplicativos para a Windows Store.

Mais maneiras de fazer janelas e blocos

Antes do Windows 8.1, seu aplicativo poderia ser exibido em um de três modos: modo de exibição completo (retrato ou paisagem), tela cheia ou encaixada. Usuários de Surfaces e outros dispositivos pediram por mais controle sobre o gerenciamento de janelas, como, por exemplo, a possibilidade de visualizar mais de dois aplicativos simultaneamente. Portanto, para refletir os variados modos de uso da base de clientes, a equipe do Windows respondeu adicionando mais duas maneiras de gerenciar e organizar as janelas e o espaço na tela. Isso significa que os usuários podem posicionar janelas lado a lado igualmente ou em quaisquer proporções que quiserem, e que um aplicativo também pode criar múltiplas visualizações que os usuários podem posicionar e redimensionar independentemente.

Anteriormente, em aplicativos do Windows 8 criados com JavaScript, você usaria consultas de mídia do CSS para controlar como a página se montaria dependendo do seu estado de visualização (completa, cheia ou encaixada). No Windows 8.1, isso mudou de forma que você só precisa de consultas de mídia do CSS que tenham como alvo as dimensões e orientação da tela, como demonstrado aqui:

    @media screen and (min-width: 500px) and (max-width: 1023px) {
      /* CSS styles to change layout based on window width */
    }
    @media (min-width: 1024px) {
      /* CSS styles to change layout based on window width */
    }
    @media screen and (orientation: portrait) {
      /* CSS styles to change layout based on orientation */
    }

Isso significa que você não precisa ajustar ou consultar para estados de visualização específicos do aplicativo, como fazia antes. Você só precisa usar consultas de mídia e definir uma largura e orientação mínima, algo que pode fazer na própria consulta de mídia. A altura mínima exigida de qualquer aplicativo Windows é 768 pixels.

Os blocos geralmente são o que traz o usuário ao aplicativo inicialmente. Localizados no menu Iniciar, os blocos dinâmicos são um recurso moderno e excelente do Windows e Windows Phone. Nenhuma outra plataforma tem a mesma capacidade que o Windows de mostrar todos os seus dados em um painel em tempo real. Dito isso, como desenvolvedor, você pode estender os seus aplicativos para utilizar quatro tamanhos de bloco: pequeno, médio, largo e grande, como mostrado na Figura 1.

Figura 1 Novos blocos dinâmicos no Windows (sem escala)

O manifesto do pacote no Visual Studio contém uma aba Ativos Visuais, na qual você pode configurar os tamanhos dos blocos, assim como outros ativos visuais, como a tela inicial.

Novos modelos de projeto no Visual Studio 2013 ajudam a criar aplicativos modernos

Como você pode esperar, cada versão do Visual Studio vem com novos modelos de projeto. Novos modelos de projetos de aplicativos da Windows Store criados com JavaScript (usando a Biblioteca do Windows para JavaScript, ou WinJS) incluem um modelo de Hub, enquanto os novos modelos de projeto XAML incluem Hub, Biblioteca de classe portátil e Teste de IU codificado.

O novo modelo de projeto Hub tanto no WinJS quanto no XAML encapsula uma abordagem popular de design a que eu me refiro como “moderna”. Seu layout padrão contém cinco seções diferentes cuidadosamente criadas para que você possa oferecer apresentações visuais variadas dos dados para os seus usuários. O layout Hub facilita para os usuários examinarem e apontarem o que é importante para eles. Projetar uma IU moderna significa apresentar dados de maneiras diferentes das técnicas não modernas anteriores, com foco no usuário e na usabilidade. O projeto Hub faz exatamente isso.

Dentro da pasta páginas do projeto Hub moram três páginas chamadas hub, item e section. Cada uma delas vem com seus próprios arquivos .html, .js e .css correspondentes. Nos projetos XAML, há páginas equivalentes chamadas HubPage.xaml, SectionPage.xaml e ItemPage.xaml na pasta raiz. A Figura 2 mostra o projeto Hub, incluindo o controle Hub, em execução.

Figura 2 O projeto Hub em execução

Como se pode ver, o projeto e controle Hub mostra uma visão panorâmica de conteúdo belamente distribuído. É um design moderno e arrojado.

Novos e atualizados controles HTML e XAML para uma IU moderna

Novos controles, assim como melhorias nos existentes em todos os tipos de projetos, os tornam mais simples de usar. Esses controles novos e atualizados facilitam mais do que nunca a criação e publicação de um aplicativo moderno. Tanto no HTML quanto no XAML, há melhorias no desempenho e no controle de vinculação de dados. Para obter um ponto de partida sobre os controles da Windows Store, consulte meu artigo “Dominando controles e configurações nos aplicativos da Windows Store criados com JavaScript” da MSDN Magazine, em msdn.microsoft.com/magazine/dn296546.

No modelo de projeto Hub, vem o controle Hub, uma novidade tanto para WinJS quanto para XAML. O controle Hub do modelo padrão estrutura o layout da IU com cinco seções com rolagem horizontal, todas na página inicial do aplicativo. A seção hero é a joia da rainha do aplicativo, muito utilizada para apresentar o conteúdo de maior destaque. Além de ser a primeira coisa que o usuário vê depois da tela inicial. Fornecidas como um ponto de partida para o desenvolvedor, as próximas quatro seções apenas contém itens de dados de tamanhos variados. Os usuários podem navegar até a associação de grupo da seção 3 ou até itens individuais na seção 3. É claro que o controle Hub é flexível e consegue acomodar qualquer número de seções com qualquer conteúdo. Ele é projetado para lidar facilmente com conteúdo heterogêneo de diferentes tipos e origens, em vez de conteúdo estritamente homogêneo de dados similares e origem única.

O modelo Grade precisa apenas do controle ListView. Agora o novo controle Hub contém um controle ListView embutido, então a navegação funciona da maneira esperada tanto para a listagem de grupo quanto para um item individual, dependendo de qual item o usuário clica ou toca.

Essa ListView tem muitas melhorias modernas, incluindo suporte a operações de arrastar e soltar. Além do recurso de arrastar e soltar, outra melhoria do ListView é o reordenamento de itens. Apenas defina a propriedade itemsReorderable do ListView para true e não é necessário mais nenhum código. O ListView inclui diversas outras melhorias, incluindo melhor distribuição de células, acessibilidade e gerenciamento de memória.

A despeito de todos os novos e brilhantes recursos do controle ListView, há outro controle que vale a pena mencionar: o Repeater. Diversos controles de IU no Microsoft .NET Framework usam controles que se repetem. Por exemplo, há um controle ASP.NET Repeater. Controles Grid e parecidos existem por toda a plataforma .NET, personalizados às diversas maneiras de criar uma IU com o .NET Framework. Como você provavelmente suspeita, pode usar o controle Repeater para gerar uma lista de itens com estilo a partir de um conjunto de dados. No WinJS, isso significa que o Repeater vai renderizar corretamente praticamente quaisquer controles HTML ou WinJS. A Figura 3 mostra um exemplo do controle Repeater. Perceba como ele funciona quase como um ListView, exceto que grupos não são mais exigidos. Como você pode ver nos dados de exemplo da Figura 3, o JavaScript cria um simples array.

Figura 3 HTML e JavaScript que constroem um simples controle Repeater

    <!—HTML -- >
    <div id="listTemplate" data-win-control="WinJS.Binding.Template">
      <li data-win-bind="textContent: title"></li>
    </div>
    <ul data-win-control="WinJS.UI.Repeater"
      data-win-options="{data: RepeaterExample.basicList,
      template: select('#listTemplate')}">
    </ul>
    // JavaScript
    (function () {
      "use strict";
      var basicList2 = new WinJS.Binding.List(
        [
          { title: "Item 1" },
          { title: "Item 2" },
          { title: "Item 3" },
          { title: "Item 4" }
        ]);
      WinJS.Namespace.define("RepeaterExample",
        {
          basicList: basicList2
        });
    })();

O NavBar é outro controle que melhora a experiência do usuário ao fornecer opções de menu de uma forma que é condutiva à sua interação. Diferente dos menus em JavaScript populares na Web de épocas passadas, os itens de um menu moderno são grandes e otimizados para diversos dispositivos de entrada. Todos nós já vimos alguém pouco habilidoso com um mouse passar trabalho com aqueles pequenos menus em cascata dos sites de antigamente. Isso significa que, como parte dos princípios modernos de design de aplicativos, o NavBar funciona bem com entradas de toque, um recurso obrigatório para tablets. O usuário invoca a barra de ferramentas de navegação com um deslizar de dedos a partir da extremidade superior ou inferior, usando o atalho Win+Z ou com o botão direito. Se você já usou o controle AppBar, o NavBar funciona de maneira quase idêntica.

Aqueles que quiserem integrar um site moderno com aplicativos clientes podem usar o novo controle WebView. Ele pode apresentar dados da internet de maneira muito mais fácil do que em versões anteriores do WinJS que usaram um iframe. O controle WebView é um elemento HTML que se parece com isso:

    <x-ms-webview id="webview" src="https://msdn.microsoft.com/pt-br/"
      style="width: 400px; height: 400px;"></x-ms-webview>

Isso é diferente do que a maneira padrão de criar controles WinJS usando um elemento <div> e definindo o atributo data-win-options. O controle WebView serve como um contêiner que está hospedando o conteúdo externo. Junto com isso, há implicações de segurança e sandboxing, então usar um elemento HTML funciona melhor do que um controle típico nesse caso. O WebView não é um controle que você pode simplesmente implementar com outros elementos HTML, ele precisa ser suportado diretamente no host do aplicativo. Há pessoas trabalhando para propor um elemento <webview> como padrão para consideração pelo World Wide Web Consortium (W3C).

Até esta versão do Windows, o XAML nunca havia atingido paridade com o HTML no que diz respeito a controles. Agora o XAML o alcançou, adicionando os seguintes novos controles:

AppBar: a barra de menu atravessando a parte de baixo da tela.
CommandBar: um item individual de barra de menu.
DatePicker: um conjunto de três listas suspensas para que o usuário insira uma data.
Flyout: uma caixa de diálogo sem janela restrita e de descarte suave ou um controle de configurações.
Hub: permite que seja exibido um panorama com itens de vários tamanhos em grupos.
Hyperlink: Um link que navega até um URI.
MenuFlyout: um submenu predefinido com estilo específico para exibir uma lista de itens de menu.
SettingsFlyout: um submenu que aparece do lado direito do da tela à interação ou deslizar de dedos do usuário. É utilizado para gerenciar configurações do aplicativos.
TimePicker: um controle que permite ao usuário selecionar horas, minutos, segundos e outros segmentos de tempo. Frequentemente complementa o DatePicker.

Agora há menos necessidade dos desenvolvedores XAML criarem seus próprios elementos visuais, já que muitos são parte do framework de IU.

O Windows 8.1 tem mais escolha na pesquisa

O Windows 8 introduziu o conceito dos botões “charm” — atalhos para tarefas comuns. Os usuários têm seus hábitos, e usar a pesquisa como forma de abrir aplicativos ou encontrar informação é um hábito comum. Os usuários frequentemente fazem pesquisas para encontrar informações, como as ferramentas de busca da web podem comprovar. A pesquisa é uma parte tão importante da computação que é parte do Windows OS e agora há um controle de pesquisa para complementar os botões charm. Quando você tem dados que são locais ao seu aplicativo e pelos quais os usuários poderiam ser capazes de pesquisar, use o controle SearchBox, e quando eles precisarem fazer uma pesquisa com escopo maior ou na internet, escolha o SearchPane (o botão Search Windows introduzido no Windows 8). Depois que você configura o contrato de pesquisa no package.appmanifest na guia de declarações, você pode oferecer serviços de pesquisa para os seus usuários. Você pode ter o SearchBox ou o SearchPane no seu aplicativo, mas não os dois.

Adicionar um controle SearchBox é fácil. Basta aplicar o atributo data-win-control ao WinJS.UI.SearchBox, como você poderia esperar:

    <div id="searchBoxId"
      data-win-control="WinJS.UI.SearchBox"
      data-win-options="{focusOnKeyboardInput: true}">
    </div>

o XAML mantém a definição de classe do SearchBox no namespace do Windows.UI.Xaml.Controls, e a sintaxe declarativa fica assim:

    <SearchBox x:Name="SearchBox"
      FocusOnKeyboardInput="True"
      QuerySubmitted="SearchBox_QuerySubmitted"
      Height="35" />

A Microsoft recomenda adicionar pesquisa instantânea aos seus aplicativos. Pesquisa instantânea é quando o usuário simplesmente começa a digitar para ativar e iniciar uma pesquisa. Vá até a tela inicial do Windows 8 e comece a digitar. Você vai perceber que o SearchPane imediatamente inicia uma pesquisa no dispositivo inteiro e também na Internet. É claro que você pode emular esse comportamento nos seus aplicativos, como os exemplos de código anteriores fazem ao definir o atributo HTML data-win-option para focusOnKeyboardInput, ou o valor FocusOnKeyboardInput do XAML para True.

Use APIs de contatos e calendário para permanecer conectado e atualizado

Com o Windows 8.1, você recebe APIs convenientes para interagir com os contatos e o calendário do usuário, se ele permitir. A API Contacts permite a um aplicativo de origem consultar a loja de dados por endereço de email ou número de telefone e fornecer informações ao usuário. A API Calendar permite adicionar, remover ou de qualquer outra forma trabalhar com os compromissos e exibir o provedor de compromissos padrão do usuário (por exemplo, o aplicativo embutido de calendário ou o Outlook) na tela ao lado do seu aplicativo durante a execução. Isso significa que o seu aplicativo pode se integrar perfeitamente aos aplicativos embutidos.

Na API Contact, o Windows 8.1 usa a classe Windows.ApplicationModel.Contacts.Contact para representar um contato, e a antiga classe ContactInformation que era usada no Windows 8 foi preterida. Felizmente, a documentação da API marca claramente cada membro dos namespaces preteridos com a mensagem a seguir: “<nome do membro> pode ter sido alterado ou estar indisponível para as versões após o Windows 8.1”, então é fácil evitar de usá-los. A Figura 4 mostra como é fácil capturar um endereço de email e número de telefone e mostrar o cartão de contato de um usuário a partir desses dados. Com um pouco mais de código, você poderia salvar ou exibir o contato em outra parte do aplicativo.

Figura 4 Exibindo um cartão de contato

    <label for="emailAddressInput">Email Address</label>
    <input id="emailAddressInput" type="text"/>
    <label for="phoneNumberInput">Phone Number</label>
    <input id="phoneNumberInput" type="text" />
    <button id="addToContactsButton" onclick=
      "addContactWithDetails()">Add to Contacts</button>
    function showContactWithDetails() {
      var ContactsAPI = Windows.ApplicationModel.Contacts;
      var contact = new ContactsAPI.Contact();
      var email = new ContactsAPI.ContactEmail();
      email.address = document.querySelector("#emailAddressInput");
      contact.emails.append(email);
      var phone = new ContactsAPI.ContactPhone();
      phone.number = document.querySelector("#phoneNumberInput");
      contact.phones.append(phone);
      ContactsAPI.ContactManager.showContactCard(
        contact, {x:120, y:120, width:250, height:250},
        Windows.UI.Popups.Placement.default);
    }

Como você pode ver, a API Contacts é simples de usar e ao mesmo tempo permite uma integração profunda com o Windows. A API Calendar é bem similar. Em código, você faz instâncias de objetos de compromissos e atribui valores a propriedades que representam detalhes das reuniões — tais como data e hora — e então as salva. Então você tem capacidades de contatos e calendário no seu aplicativo.

Novas APIs de segurança e sistemas de rede

Nenhuma atualização de sistema estaria completa sem melhorias nos sistemas de rede e na segurança. Essas melhorias de sistemas de rede permitem que você faça mais do que nunca com seu código, sem deixar de estar seguro. Novidades no Tempo de Execução do Windows (WinRT) do namespace Windows.Web.Http são os objetos e métodos que se conectam a serviços HTTP e REST com mais poder e flexibilidade do que estavam disponíveis com APIs anteriores como WinJS.xhr e System.Net.HttpClient. O código a seguir mostra como se conectar a um serviço RESTful:

var uri = new Uri("http://example.com/data.svc");
var httpClient = new HttpClient();
httpClient.GetStringAsync(uri).done(function () {
  // Process JSON
}, error);
function error(reason) {
  WinJS.log && WinJS.log("Oops!");
}

Assim como com qualquer outra biblioteca, o namespace Windows.Web.Http tem membros que realizam suas funções de maneira assíncrona, e com JavaScript isso significa usar a função “done” que é executada ao retorno de uma promessa. No entanto, se você quiser aplicativos atualizados em tempo real, pode usar o Windows.Web.Http para ter aplicativos em espera sendo executados em segundo plano. Observe também que você tem todo tipo de outras capacidades com o Windows.Web.Http, tais como controlar o cache, os cookies, fazer outros tipos de requisições e inserir filtros no pipeline para fazer todo tipo de coisa interessante que eu não tenho espaço para explorar aqui.

A boa notícia é que se você acessar serviços REST que exijam credenciais do usuário, você (como usuário) agora pode gerenciá-los como contas múltiplas no botão Configurações. Junto com esses recursos de segurança e gerenciamento de contas vem a opção de usar autenticação por impressão digital nos seus aplicativos modernos utilizando as APIs de autenticação biométricas Windows Fingerprint.

Aplicativos modernos precisam funcionar em diversos dispositivos

Não há nada mais moderno que impressão 3D. O Windows 8.1 tem, e você pode desenvolver com ela! Isso sem mencionar o catálogo de APIs de sensores e hardware que foram disponibilizadas, incluindo:

Human Interface Devices (HID): um protocolo que promove a comunicação e a programabilidade entre hardware e software.
Point of Service (PoS): uma API para aplicativos da Windows Store que é neutra em termos de fornecedor e pode acessar dispositivos como scanners de códigos de barra ou leitores de fita magnética.
USB: habilita comunicação com dispositivos USB padrão.
Bluetooth: habilita comunicação com dispositivos Bluetooth padrão.
Impressão 3D: extensões C++ do suporte a impressão 2D que serve de base ao suporte a impressoras 3D. Você pode acessar a impressão do Windows para enviar conteúdo formatado para 3D à impressora através de um aplicativo.
Digitalização: habilita suporte a scanners.

Todas as APIs anteriores possibilitam integração com hardware periférico. Desde o Windows 8, porém, aplicativos em HTML e XAML têm a capacidade de tirar proveito da integração com hardware para trabalharem com webcam, acelerômetros, canetas, toque e outros periféricos.

O Windows 8.1 inclui um conjunto de APIs para síntese de fala, ou texto para voz. Utilizando essas APIs, você pode transformar dados textuais em um transmissão de voz — e isso exige menos código do que você pode estar esperando. Por exemplo, o exemplo de código a seguir mostra como depois que uma nova instância do SpeechSynthesizer existe, você pode chamar o seu método synthesizeTextToStreamAsync. O método synthesizeTextToStreamAsync aceita dados textuais que então transforma em uma transmissão de voz e envia para o player:

var audio = new Audio();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
var input = document.querySelector("#input");
synth.synthesizeTextToStreamAsync(input).then(function (markersStream) {
  var blob = MSApp.createBlobFromRandomAccessStream(
    markersStream.ContentType, markersStream);
  audio.src = URL.createObjectURL(blob, { oneTimeOnly: true });
  audio.play();
});

Além de trabalhar com dados textuais simples, você pode usar o W3C standard Speech Synthesis Markup Language (SSML) para construção de frases e outros esclarecimentos léxicos. O uso dessa linguagem baseada em XML permite que você execute síntese de entrada e saída de forma mais claramente definida, o que faz a diferença para o usuário.

Encerrando com novos recursos de empacotamento da loja de aplicativos

É possível configurar recursos como as imagens dos blocos e strings localizadas no manifesto do pacote, que mudou sensivelmente para refletir novos tamanhos de imagem e outras opções de configuração. Uma dessas opções é para criar agrupamentos. Os agrupamentos servem principalmente para que você adicione e gerencie informações específicas de local para que possa implantar seu aplicativo em diferentes áreas geográficas.

Quando você implantar o seu aplicativo à loja, perceba que há algumas mudanças, incluindo uma IU melhorada no portal do desenvolvedor. Agora os usuários podem encontrar seu aplicativo com maior facilidade do que nunca, graças à integração do Bing diretamente ao sistema operacional. Com essa integração, os usuários podem descobrir seu aplicativo (ou qualquer arquivo) através da Windows Store, de um site ou de uma pesquisa. Além disso, os aplicativos que os usuários instalam agora se atualizam automaticamente a menos que o usuário desligue o recurso de atualização automática. Você não precisa se preocupar com atualizações frequentes do aplicativo por parte do usuário.

Eu não tenho espaço suficiente para listar todos os novos recursos e melhorias do Tempo de Execução do Windows e do Visual Studio aqui. Sugiro fortemente que você revise os outros novos recursos, como o DirectX, que vem com várias atualizações sobre as quais você pode ler em bit.ly/1nOp0Ds. Além disso, Charles Petzold assina uma coluna na MSDN Magazine com foco em DirectX, então você pode esperar ver mais detalhes por lá (bit.ly/1c37bLI). Por último, todas as informações que você pode precisar sobre o que esperar do Windows 8.1 estão no Guia de recursos do Windows 8.1 em bit.ly/1cBHgxu.

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI. Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros. Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta. Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Kraig Brockschmidt (Microsoft)