Windows App - Pesquisar (Search) Compartilhar (Share)

Por Renato Haddad

Maio, 2013

Dn140239.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Visão Geral

Um dos pontos chave da experiência do usuário no Windows 8 é a barra Charms que é exibida a partir do lado direito da tela. Para exibi-la pressione a tecla Win + C, ou se estiver usando um tablet, passe o dedo no lado direito da tela na direção da direita para esquerda. Os botões contidos na barra Charms fornece um meio para as aplicações no estilo Modern UI expor funcionalidades comuns de uma maneira consistente através da aplicação. Por exemplo, se você deseja realizar uma pesquisa numa aplicação estilo Modern UI, selecione a opção Pesquisar na barra Charms e digite o termo a ser pesquisado no painel de pesquisa. A UI e as ações requeridas para invocar esta UI são as mesmas para cada aplicação.

Para compartilhar dados com outra aplicação, use a opção Compartilhar na barra Charms. Uma aplicação que suporta compatilhamento pode compartilhar dados, por exemplo, um desenho feito no Paint ou uma receita no nosso cardápio eletrônico, pode compartilhar estas informações com outras aplicações.

Neste laboratório, você irá adicionar suporte para pesquisar e compartilhar ao cardápio eletrônico. Você receberá em primeira mão a experiência de implementar contratos de pesquisar e compartilhar, e aprender como esses contratos proporcionam um maior nível de integração entre dois aplicativos no estilo Modern UI ou um aplicativo e o próprio Windows.

Objetivos

Neste lab você aprenderá:

  • Implementar o contrato Compartilhar numa aplicação estilo Modern UI
  • Implementar o contrato Pesqusiar numa aplicação estilo Modern UI
  • Implementar auto sugestões no Pesquisar

Requirementos do Sistema

Você deverá ter os seguintes itens para completar os exercícios:

  • Microsoft Windows 8
  • Microsoft Visual Studio 2012 RC

Configuração

Você deverá seguir estes passos para preparar o seu computador para estes exercícios:

  • Instalar o Microsoft Windows 8
  • Instalar o Microsoft Visual Studio 2012 RC

Exercício 1: Compartilhar uma Receita

Neste primeiro exercício, você adicionará suporte a compartilhamento ao cardápio eletrônico, então as receitas podem ser compartilhadas com outras aplicações. Você irá compartilhar dois tipos de dados para cada receita: textual com os dados da receita (nome, ingredientes e modo de preparo) e a imagem que representa a receita em si.

Tarefa 1 – Invocar o Compartilhar no Charm

Para inciar, vamos ver como que o Compartilhar no Cham se comporta quando é invocado no cardápio eletrônico antes do suporte ao Compartilhar ser adicionado.

  • Abra o projeto ContosoCookbook feito no exercício anterior.
  • Pressione F5 para executar o projeto.
  • Selecione uma receita para exibir os detalhes da mesma.
  • Exiba a barra de Charms. Pressione Win + C ou numa tela de toque passe o dedo do lado direita da tela, no sentido da direita para esquerda.
  • Selecione a opção Compartilhar no painel exibido (Figura 1).

Dn140239.AFC8ADD89C79CFDD0C2CE0EF62B809D7(pt-br,MSDN.10).png

Figura 1 – Painel do Charms

  • Como o cardápio eletrônico atualmente não implementa o contrato de Compartilhar, o painel informa que “Este aplicativo não pode compartilhar”, conforme a Figura 2.

Dn140239.0A38BCDA70C586A6047898D99C8CB681(pt-br,MSDN.10).png

Figura 2 – Mensagem do painel

  • Retorne o Visual Studio e pare a execução.

Tarefa 2 – Implementar o Compartilhamento da Receita

Agora que você viu que o painel de compartilhamento exibe a mensagem que não dá suporte a este recurso, vamos adicionar um contrato de compartilhamento para os dados da receita. Primeiro, vamos adicionar um pouco de infraestrutura para o suporte ao compartilhamento.

  • Abra o arquivo ItemDetailPage.xaml.cs e adicione os seguintes namespaces na lista de using. Vale destacar que o primeiro (DataTransfer) é o responsável por armazenar as informações numa área de transferência da aplicação. E, tais informações só valem para esta aplicação.
using Windows.ApplicationModel.DataTransfer;
using System.Text;
using Windows.Storage.Streams;
  • Localize o método LoadState e adicione o seguinte código no final do método. Isto irá registrar a chamada do método OnDataRequested, o qual ainda não existe.
// Register for DataRequested events
DataTransferManager.GetForCurrentView().DataRequested += OnDataRequested;
  • Agora adicione os seguintes códigos para o método OnDataRequested. Veja que na assinatura do método, o objeto é o DataTransferManager e seus argumentos. No código, o item selecionado no controle flipView é feito um Cast para o tipo RecipeDataItem, e em seguida temos acesso às propriedades deste objeto. Já a variável request atribui o título (Title) com o nome da receita e a descrição (Description) um texto. Para a variável recipe são atribuídas as propriedades Ingredients e Directions do objeto selecionado. Ao final, o objeto recipe é atribuído ao Data.SetText, que será o texto do DataTransferManager a ser compartilhado.
void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
    var request = args.Request;
    var item = (RecipeDataItem)this.flipView.SelectedItem;
    request.Data.Properties.Title = item.Title;
    request.Data.Properties.Description = "Ingredientes e modo de preparo da receita";

    // Share recipe text
    var recipe = "\r\nINGREDIENTES\r\n";
    recipe += String.Join("\r\n", item.Ingredients);
    recipe += ("\r\n\r\nPREPARO\r\n" + item.Directions);
    request.Data.SetText(recipe);
}
Dn140239.note(pt-br,MSDN.10).gifNota:
Quando o usuário dispara o Compartilhar no Charm, o evento é implementado registrando um handler (manipulador de eventos) no DataRequested do DataTransferManager. Neste exemplo, você está respondendo a esse evento, chamando SetText no objeto DataPackage exposto através args.Request.Data para fornecer a receita na forma de texto. Quando o painel Compartilhar aparece com uma lista de aplicações, a lista inclui apenas aplicações que podem consumir texto.

  • Loalize o método SaveState e adicione o seguinte código no final deste método. Este código irá desregistrar o handler OnDataRequested.
// Deregister the DataRequested event handler
DataTransferManager.GetForCurrentView().DataRequested -= OnDataRequested;
  • Antes de executar a aplicação, leia com atenção esta Nota.
Dn140239.note(pt-br,MSDN.10).gifNota:
Para executar um bom teste de compartilhamento, aconselho instalar o aplicativo chamado Share Target Sample App disponível no pacote de exemplos do Windows 8 SDK Samples. Você também pode fazer download diretamente dos Samples em www.dev.windows.com. Esta aplicação demonstra como escrever uma aplicação com alvo em compartilhar. Mais importante, ela fornece um alvo de compartilhamento para testar como você desenvolve aplicações que funcionam como fontes de compartilhamento, que aceita imagens, textos e outros tipos de dados. Para instalar este exemplo, abra-o no Visual Studio e pressione F5 para executá-lo. Em seguida, este alvo aparecerá na lista de Compartilhamento do Charms.

  • Pressione F5 para executar a aplicação.
  • Selecione uma receita a ser compartilhada.
  • Exiba a barra do Charms (Win + C) e selecione Compartilhar (Win + H é o atalho direto). O painel compartilhar agora exibirá uma lista de aplicativos instalados no seu dispositivo o qual podem ter o compartilhar como alvo, ou seja, aplicações que podem consumir dados compartilhados por outras fontes. Note que no meu computador há três aplicativos (Figura 3) para receber este compartilhamento.

Dn140239.27402056EEFFEC4299B6FC7464F12AA1(pt-br,MSDN.10).png

Figura 3 – Compartilhar dados

  • Na lista, selecione o Share Target C# Sample que irá receber os dados compartilhados.
  • A Figura 4 mostra como que o Share Target Sample App mostra os dados após aceitar o texto da receita compartilhada pelo cardápio eletrônico. Caso você não tenha instalada esta aplicação, pode testar com o email.

Dn140239.EA38B712244FF8413D47AA4FF70E4EED(pt-br,MSDN.10).png

Figura 4 – Dados compartilhados com outra aplicação

  • Sendo assim, quando falamos de compartilhar informações entre aplicações no estilo Modern UI, estamos falando de aplicações para fornecer informações e outras para ler tais informações. O DataTransferManager gerencia os dados a serem compartilhados.

Tarefa 3 – Implementar o Compartilhamento da Imagem

Até agora o cardápio eletrônico compartilha apenas dados textuais da receita, mas como cada receita contém uma foto do prato, podemos compartilhar isto também. Sendo assim, uma aplicação que tenha como alvo o compartilhamento poderá exibir a imagem juntamente com o texto. Vamos ver como implementar isto.

  • Abra o arquivo ItemDetailPage.xaml.cs, localize o método OnDataRequested.
  • Adicione os seguintes códigos destacados em amarelo no final deste método. Aqui é usado o CreateFromUri que pega a propriedade ImagePath da receita e armazena na variável reference, que é do tipo RandomAccess, que provê acesso randômico para a entrada e saída de dados stream para um arquivo. Em seguida esta referência é atribuída ao Thumbnail e usa-se o SetBitmap para a imagem.
void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
    var request = args.Request;
    var item = (RecipeDataItem)this.flipView.SelectedItem;
    request.Data.Properties.Title = item.Title;
    request.Data.Properties.Description = "Ingredientes e modo de preparo da receita";

    // Share recipe text
    var recipe = "\r\nINGREDIENTES\r\n";
    recipe += String.Join("\r\n", item.Ingredients);
    recipe += ("\r\n\r\nPREPARO\r\n" + item.Directions);
    request.Data.SetText(recipe);

    // Share recipe image
    var reference = RandomAccessStreamReference.CreateFromUri(new Uri(item.ImagePath.AbsoluteUri));
    request.Data.Properties.Thumbnail = reference;
    request.Data.SetBitmap(reference);
}
  • Pressione F5 para executar a aplicação.
  • Selecione uma receita a ser compartilhada.
  • Exiba a barra Charms e selecione Compartilhar ou pressione Win + H. Veja na Figura 5 a receita com os dados completos, inclusive a foto do prato, assim como a lista de aplicações no painel Compartilhar.

Dn140239.1BC3E7DB73169657C8E34FCD28E9EA9B(pt-br,MSDN.10).png

Figura 5 – Receita a ser compartilhada

  • Selecione a opção Share Target C# Sample e veja que os dados completos da receita são compartilhados e exibidos nesta aplicação, que tem um código implementado para receber uma imagem. A Figura 6 mostra a disposição dos dados.

Dn140239.71A09FB904344614674BFACEAB7FFC99(pt-br,MSDN.10).png

Figura 6 – Receita compartilhada

  • Retorne ao Visual Studio e pare a execução.

Este exercício serviu para você entender e implementar o conceito de compartilhar informações entre a sua aplicação e outra através da API do Windows 8. O melhor de tudo é que isto é transparente para qualquer aplicação Windows 8 estilo Modern UI, se a mesma dispor de compartilhamento, será listada no painel do Charms e Compartilhar.

Exercício 2: Pesquisar Receitas

Neste segundo exercício, você adicionará suporte para pesquisas de dados ao cardápio eletrônico, então os usuários poderão usar o Pesquisar no painel Charms para pesquisar alguma receita. Por exemplo, um usuário quer pesquisar todas as receitas que contém açúcar, ele exibe o Pesquisar do Charms, digita “sugar” na caixa de texto e serão exibidas todas as receitas com este critério.

Vale dizer que não existe nenhuma mágica, precisamos sim programar para que a pesquisa seja feita em algumas propriedades da receita, como nome e modo de preparo, por exemplo. Mas o melhor de tudo é que iremos integrar a API do Windows 8 com a nossa aplicação.

Tarefa 1 – Invocar o Pesquisar no Charm

Antes de adicionar suporte à pesquisas no cardápio, vamos ver qual é a UI de pesquisar do Windows 8, enquanto a aplicação estiver em segundo plano.

  • Pressione F5 para executar a aplicação.
  • Exiba o Charms (Win + C) e selecione Pesquisar. O atalho direto pelo teclado é Win + F.
  • Será mostrado o Pesquisar no painel, conforme a Figura 7. Digite “sugar” (sem as aspas, é claro) na caixa de texto, e pressione ENTER ou clique no ícone de lupa a direita.

Dn140239.340C346C0DAB61A0F68D994613A072D0(pt-br,MSDN.10).png

Figura 7 – Painel de pesquisa

  • O Windows 8 informa que “Nenhum arquivo corresponde à sua pesquisa”. Então, vamos preparar o projeto para ser pesquisável.
  • Retorne ao Visual Studio e pare a execução.

Tarefa 2 – Adicionar Suporte à Pesquisas

Para implementar a pesquisa é preciso codificar um contrato para a aplicação. O Visual Studio fará a maioria do trabalho pra você inserir um contrato em C# na aplicação. Você precisa ajustar o código para realizar a pesquisa de dados dentro da aplicação, e exibir uma lista com o resultado. Vamos ver como realizar isto passo a passo.

  • No Solution Explorer, clique com o botão direito e selecione Add - New Item. Na lista de templates, selecione Search Contract e o nome será SearchResultsPage.xaml, como a Figura 8. Clique no botão Add para criar está página.

Dn140239.9FA033D24FDE1336C3B1EBFE2F0B40F3(pt-br,MSDN.10).png

Figura 8 – Contrato de pesquisa

  • Visualize o xaml do arquivo SearchResultsPage.xaml. Na seção <Pages.Resources> troque o “My Application” por “Resultado da pesquisa” no conteúdo da string de recurso chamada “AppName”. Este é o texto a ser exibido no topo da página.
<x:String x:Key="AppName">Resultado da pesquisa</x:String>
  • Quando esta página de resultado da pesquisa mostrar todas as receitas que atendem o critério de seleção, é preciso implementar uma forma navegação para a página de detalhes da receita quando o usuário clicar na receita pesquisada. Então, o próximo passo é atribuir um evento ao controle. No entanto, os resultados serão sempre exibidos ou no controle GridView ou ListView, já padrão nesta página de contrato de pesquisa criada.
  • Localize os controles GridView chamado “resultsGridView” e o ListView chamado “resultsListView”. Adicione o atributo ItemClick=”OnItemClick” a ambos. O GridView exibe o resultado da pesquisa quando a aplicação não estiver no modo snapped, e o ListView exibe quando estiver em snapped.
<GridView
    x:Name="resultsGridView"
    AutomationProperties.AutomationId="ResultsGridView"
    AutomationProperties.Name="Search Results"
    TabIndex="1"
    Grid.Row="1"
    Margin="0,2,0,0"
    Padding="110,0,110,46"
    SelectionMode="None"
    IsItemClickEnabled="True"
    ItemsSource="{Binding Source={StaticResource resultsViewSource}}"
    ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}"
    ItemClick="OnItemClick">
<ListView
    x:Name="resultsListView"
    AutomationProperties.AutomationId="ResultsListView"
    AutomationProperties.Name="Search Results"
    TabIndex="1"
    Grid.Row="1"
    Margin="16,0,0,0"
    Padding="0,0,0,60"
    SelectionMode="None"
    IsItemClickEnabled="True"
    ItemsSource="{Binding Source={StaticResource resultsViewSource}}"
    ItemTemplate="{StaticResource StandardSmallIcon70ItemTemplate}"
    ItemClick="OnItemClick">
  • Até aqui apenas atribuímos que o evento OnItemClick será disparado ou no GridView ou no ListView. Agora, pressione F7 para exibir o código C#. Na lista de using no topo da tela, adicione o ContosoCookbook.Data e o seguinte método. Este código irá navegar para a página de detalhes da receita (ItemDetailPage) quando o item for selecionado na lista do resultado da pesquisa. Note que é feito o Cast para o tipo RecipeDataItem, o qual captura todas as propriedades (e.ClickedItem), e ao final lê apenas a propriedade UniqueId para passar como parâmetro para a página de destino.
using ContosoCookbook.Data;

private void OnItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the page showing the recipe that was clicked
    this.Frame.Navigate(typeof(ItemDetailPage), ((RecipeDataItem)e.ClickedItem).UniqueId);
}
  • E como saber quais as receitas que atendem ao critério de pesquisa? No topo do arquivo SearchResultsPage.xaml.cs declare um campo chamado _results do tipo dicionário (chave / valor), sendo que o valor é uma lista de receitas List<RecipeDataItem>, conforme o código seguinte.
public sealed partial class SearchResultsPage : ContosoCookbook.Common.LayoutAwarePage
{
    private UIElement _previousContent;
    private ApplicationExecutionState _previousExecutionState;

    // Collection of RecipeDataItem collections representing search results
    private Dictionary<string, List<RecipeDataItem>> _results = new Dictionary<string, List<RecipeDataItem>>();
  • Vá para o método LoadState e adicione os seguintes códigos ANTES do comentário existente “Communicate results through the view model”.
// Search recipes and tabulate results
var groups = RecipeDataSource.GetGroups("AllGroups");
string query = queryText.ToLower();
var all = new List<RecipeDataItem>();
_results.Add("All", all);

foreach (var group in groups)
{
    var items = new List<RecipeDataItem>();
    _results.Add(group.Title, items);

    foreach (var item in group.Items)
    {
        if (item.Title.ToLower().Contains(query) || item.Directions.ToLower().Contains(query))
        {
            all.Add(item);
            items.Add(item);
        }
    }

    filterList.Add(new Filter(group.Title, items.Count, false));
}

filterList[0].Count = all.Count;
Dn140239.note(pt-br,MSDN.10).gifNota:
Este código pesquisará todas as receitas que contém o texto digitado na pesquisa onde as propriedades Titles (título) e Directions (modo de preparo) sejam iguais ao texto. Para cada receita encontrada, é adicionada à lista de RecipeDataItem o que representa todas as receitas. A lista List<> é mantida no dicionário Dictionary declarado anteriormente e são focados nos nomes dos grupos como All, Chinese, Italian, etc.

  • A listagem a seguir é a mesma que a anterior, no entanto, eu gostaria de expor uma explicação detalhada das principais linhas diretamente na seguinte listagem.
// Retorna uma coleção de Grupo do tipo IEnumerable
var groups = RecipeDataSource.GetGroups("AllGroups");

// Este é o texto digitado no painel Pesquisar. O ToLower converte o texto para minúsculo para evitar erros na comparação da pesquisa 
string query = queryText.ToLower();
// Cria uma lista do tipo RecipeDataItem
var all = new List<RecipeDataItem>();
// _results é o dicionário do tipo chave / valor onde a chave é uma string e o valor é uma lista de List<RecipeDataItem>
_results.Add("All", all);
// Monta o looping para pesquisar nos grupos
foreach (var group in groups)
{
    var items = new List<RecipeDataItem>();
    _results.Add(group.Title, items);
    // Monta o looping para cada receita do grupo
    foreach (var item in group.Items)
    {
        // Verifica se o texto digitado está contido (Contains) nas propriedades 
        // Title ou Directions. Aprenda métodos de extensão do LINQ e expressões Lambda
        if (item.Title.ToLower().Contains(query) || item.Directions.ToLower().Contains(query))
        {
           // Caso afirmativo, o item é adicionado à lista
            all.Add(item);
            items.Add(item);
        }
    }
    // Monta o Filter com o título do grupo e a quantidade de receitas encontradas
    filterList.Add(new Filter(group.Title, items.Count, false));
}

filterList[0].Count = all.Count;
  • Localize o método Filter_SelectionChanged e adicione o seguinte código destacado em amarelo dentro da claúsula IF, ou melhor dizendo, logo após o comentário TODO.
if (selectedFilter != null)
{
    // Mirror the results into the corresponding Filter object to allow the
    // RadioButton representation used when not snapped to reflect the change
    selectedFilter.Active = true;

    // TODO: Respond to the change in active filter by setting this.DefaultViewModel["Results"]
    //       to a collection of items with bindable Image, Title, Subtitle, and Description properties
    this.DefaultViewModel["Results"] = _results[selectedFilter.Name];         

    // Ensure results are found
    object results;
  • Chegou a hora de ajustar o layout da página de resultado da pesquisa de receitas. Abra o arquivo StandardStyles.xaml na pasta Common.
  • Localize o DataTemplate chamado “StandardSmallIcon300x70ItemTemplate”. Para o controle Border, altere as propriedades Width para 60 e Height para 45. Para o primeiro TextBlock que faz o Binding para Title, troque para ShortTile. Remova o segundo TextBlock que faz o Binding para a propriedade Subtitle.
<DataTemplate x:Key="StandardSmallIcon300x70ItemTemplate">
    ...
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,0,0,10" Width="60" Height="45">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Grid.Column="1" Margin="10,-10,0,0">
            <TextBlock Text="{Binding ShortTitle}" Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap"/>
            <TextBlock Text="{Binding Subtitle}" Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"/>
</DataTemplate>
  • Já que fizemos diversas alterações no código da chave StandardSmallIcon300x70ItemTemplate, veja o código completo após as alterações.
<!-- Grid-appropriate 300 by 70 pixel item template as seen in the SearchResultsPage -->
<DataTemplate x:Key="StandardSmallIcon300x70ItemTemplate">
    <Grid Width="294" Margin="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                Margin="0,0,0,10" Width="60" Height="45">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Grid.Column="1" Margin="10,-10,0,0">
            <TextBlock Text="{Binding ShortTitle}" Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap"/>
            <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"/>
        </StackPanel>
    </Grid>
</DataTemplate>
  • Pressione F5 para executar a aplicação.
  • Exiba a barra do Charms (Win + C).
  • Selecione o Pesquisar (o Win + F é o atalho direto da aplicação) para abrir o painel de Pesquisar no estilo Modern UI.
  • É mostrada uma caixa de texto para você informar qual o texto a ser pesquisado. Digite “sugar” (sem as aspas, é claro) e pressione ENTER ou clique na lupa. Na Figura 9, perceba que são mostradas diversas aplicações para que a pesquisa seja realizada na selecionada. Neste caso, o cardápio eletrônico faz parte desta lista. Portanto, deixe-o selecionado para que a pesquisa seja feita no cardápio.

Dn140239.A072423F7DDDA0DB081EC2B71B8F2626(pt-br,MSDN.10).png

Figura 9 – Painel pesquisar

  • Verifique se o resultado da pesquisa com todas as receitas que contém o “sugar” está similar ao mostrado na Figura 10. Este layout é exatamente o que alteramos anteriormente para ajustar as propriedades e os devidos tamanhos. Veja que o grupo All contém o total de receitas, seguido da respectiva quantidade de cada grupo.

Dn140239.E7A1AC4E48486C81E27FABCA0793957E(pt-br,MSDN.10).png

Figura 10 – Resultado da pesquisa

  • Clique em qualquer receita para exibir todos os detalhes da mesma, diretamente na página ItemDetailPage.
  • Retorne ao Visual Studio e pare a execução.

Tarefa 3 – Adicionar Sugestões à Pesquisa

Um recurso muito comum em pesquisas que você pode implementar é o auto sugestão, de acordo com o que o usuário digita na caixa de texto da pesquisa. É super fácil de fazer e agrega valor à aplicação. Tudo o que você precisa fazer é registrar um manipulador (handler) para o SuggestionsRequested.

  • Abra o arquivo App.xaml.cs e adicione o seguinte código na lista de using no topo do arquivo.
using Windows.ApplicationModel.Search;
  • Localize o método OnLaunched e adicione o seguinte código, exatamente após a chamada dos métodos RecipeDataSource.LoadLocalDataAsync ou RecipeDataSource.LoadRemoteDataAsync que carregam os dados das receitas. Isto registra um handler para o evento OnSuggestionsRequested. Note que o SearchPane é uma classe para administrar o painel de pesquisa do Windows 8. Sendo assim, procure pesquisar quais as APIs que o Windows 8 oferece para integração com a aplicação.
// Register handler for SuggestionsRequested events from the search pane
SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested;
  • Como o OnSuggestionsRequested registrado anteriormente não existe, adicione o seguinte método no App.xaml.cs para disparar o auto sugestão da pesquisa.
void OnSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
{
    string query = args.QueryText.ToLower();
    string[] terms = { "salt", "pepper", "water", "egg", "vinegar", "flour", "rice", "sugar", "oil" };

    foreach (var term in terms)
    {
        if (term.StartsWith(query))
            args.Request.SearchSuggestionCollection.AppendQuerySuggestion(term);
    }
}
  • Aqui vai uma explicação detalhada do código anterior para que você não tenha nenhuma dúvida.
// Assinatura do método onde o SearchPane é o objeto com os devidos argumentos
void OnSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
{
    // Captura o texto digitado na caixa de texto no painel de pesquisa.
    // O texto digitado é convertido para minúsculo para evitar erros de comparação
    string query = args.QueryText.ToLower();
    // Aqui são as sugestões a serem comparadas com o texto digitado. Terms é um array
    string[] terms = { "salt", "pepper", "water", "egg", "vinegar", "flour", "rice", "sugar", "oil" };

    // Monta um looping para percorrer todos os textos do array de strings Terms
    foreach (var term in terms)
    {
        // Verifica se o item do array inicia com o texto digitado, ou seja, o método
        // de extensão StartsWith se encarrega de comparar
        if (term.StartsWith(query))
            // Caso seja verdadeiro, o item atual do array é adicionado e exibido
            // à lista de sugestões no painel de pesquisa
            args.Request.SearchSuggestionCollection.AppendQuerySuggestion(term);
    }
}
Dn140239.note(pt-br,MSDN.10).gifNota:
Este código irá disparar o auto sugestão de acordo com as palavras existentes do array de strings, sendo salt, pepper, water, egg, vinegar, flour, rice, sugar e oil. Se o usuário digitar “sa” a palavra “salt” aparecerá na lista como um item sugerido. Fique à vontade para adicionar outras palavras que achar necessário no array, de acordo com a sua necessidade.

  • Pressione F5 para executar a aplicação, e no painel de pesquisa, digite “su” na caixa de texto. Veja que a palavra “sugar” aparecerá na lista de sugestões, conforme a Figura 11.

Dn140239.69DA9427DC84E4E454FC064DC7923119(pt-br,MSDN.10).png

Figura 11 – Auto sugestão

  • Retorne ao Visual Studio e pare a execução.
Dn140239.note(pt-br,MSDN.10).gifDica:
Será que toda aplicação é passível de pesquisa? Como excluir as palavras da lista de auto sugestão? Estas questões são fundamentais para tornar a UI interativa com o usuário. Caso queira mudar qualquer configuração do Windows 8 em relação à Pesquisas, abra a barra Charms, selecione Configurações. Em seguida, selecione Mudar configurações do PC para abrir a tela de Configurações (Figura 12). Na lista da esquerda, selecione Pesquisar. Note que do lado direito são mostradas todas as opções de histório, então clique no botão Excluir histórico para apagar todas as pesquisas. Veja que abaixo há a lista de aplicações instaladas no computador, e você pode ativar ou desativar o recurso de Pesquisar para cada aplicação.

Dn140239.001A65AED7F1B4A526184CD799F24F1E(pt-br,MSDN.10).png

Figura 12 – Configurações do Pesquisar

Tarefa 4 – Adicionar Suporte Externo

Você está quase pronto, mas ainda há uma tarefa para melhorar. Atualmente, a pesquisa funciona muito bem se Cardápio Eletrônico está sendo executado quando uma pesquisa é executada. No entanto, isso não funcionará se o usuário usar a Pesquisa de fora do aplicativo. Para ver por si mesmo, certifique-se que o cardápio não está executando (você pode verificar isso no Gerenciador de Tarefas e terminá-lo, se necessário). Então, chame o Pesquisar na barra do Charms, digite “sugar” na caixa de texto e selecione o Cardápio Eletrônico na lista de aplicações no painel Pesquisar. Veja a Figura 13 que você será notificado que não foram encontrados resultados para esta pesquisa.

Dn140239.CDD90C10FEA5213FF1CCE324B48C7185(pt-br,MSDN.10).png

Figura 13 – Pesquisar com a aplicação fechada

  • Abra o arquivo App.xaml.cs e localize o método OnSearchActivated.
Dn140239.note(pt-br,MSDN.10).gifNota:
O OnSearchActivated é um método virtual da classe da Application, já que a página SearchResultsPage herda a Application. É chamado para ativar a página de resultados da pesquisa quando o usuário realiza uma pesquisa, e foi adicionado à App.xaml.cs quando você adicionou um contrato de pesquisa ao projeto. OnSearchActivated é chamado no lugar de OnLaunched se o sistema operacional lança o Cardápio Eletrônico do painel de pesquisa. Se isso ocorrer, é preciso reinicializar o aplicativo antes de ativar a página de resultados da pesquisa.

  • Na assinatura do método OnSearchActivated, adicione o atributo async.
Protected async override void OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)
  • Adicione os seguintes códigos no início do método OnSearchActivated.
// Reinitialize the app if a new instance was launched for search
if (args.PreviousExecutionState == ApplicationExecutionState.NotRunning ||
    args.PreviousExecutionState == ApplicationExecutionState.ClosedByUser ||
    args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
    // Load recipe data
    await RecipeDataSource.LoadLocalDataAsync();

    // Register handler for SuggestionsRequested events from the search pane
    SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested;

    // Add a Frame control to the window
    var rootFrame = new Frame();
    SuspensionManager.RegisterFrame(rootFrame, "AppFrame");
    Window.Current.Content = rootFrame;
}
Dn140239.note(pt-br,MSDN.10).gifNota:
Este é um bom momento para você testar a origem dos dados das receitas. No primeiro exercício deste treinamento, definimos que os dados são locais (LoadLocalDataAsync), porém, troque para LoadRemoteDataAsync. Esta linha está comentada no código, basta descomentar esta e comentar a do LoadLocalDataAsync.

  • Pressione F5 para executar a aplicação só para instalar esta nova versão.
  • Volte para o Visual Studio e pare a execução.
  • Use o Gerenciador de Tarefas do Windows para certificar-se que o Cardápio Eletrônico não está sendo executado.
  • Vá para a tela inicial do Windows (tecla Win). Exiba a barra do Charms e selecione Pesquisar.
  • Digite a palavra “sugar” e selecione o Cardápio Eletrônico na lista de aplicações no painel. Veja que a aplicação é aberta, é mostrada a página de resultado que deverá ser similar a Figura 14.

Dn140239.EB3CAAC3ADCC2CA284A441545750E05A(pt-br,MSDN.10).png

Figura 14 – Resultado da pesquisa

  • Pressione Alt-F4 para fechar a aplicação.

Resumo

Os contratos são uma parte importante do Windows 8, porque eles permitem a integração entre os aplicativos com o Modern UI e fornecer ao usuário uma experiência que seja consistente e previsível. Esta colaboração flexível é muito sinérgica e extensível, permitindo que você compartilhe qualquer coisa com aplicativos de busca.

Neste laboratório, você aprendeu sobre dois tipos de contratos em primeira mão: o de compartilhar e de pesquisar. Em um futuro laboratório você aprenderá o contrato de configurações. Mas primeiro, vamos focar no uso de captura de mídias (fotos e vídeos) com câmeras incorporadas à maioria dos PCs e dispositivos móveis de hoje. Esse é o tema do próximo laboratório, então vamos seguir em frente!

Sobre o Autor

Renato Haddad (rehaddad@msn.comwww.renatohaddad.com ) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010/2012, ASP.NET 4, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog http://weblogs.asp.net/renatohaddad.

Mostrar: