Adicionando um modelo de item de Resultados de Pesquisa

Artigo
04/17/2014

Este tópico mostra como permitir a um usuário pesquisar informações dentro de seu aplicativo usando o modelo de item de Resultados de Pesquisa incluído com o Visual Studio. O modelo de item de pesquisa habilita um aplicativo a apresentar uma página de resultados de uma pesquisa iniciada pelo controle WinJS.UI.SearchBox. Para ver descrições dos modelos de itens, consulte Modelos de itens do JavaScript. Na maioria dos aplicativos, você pode usar modelos de itens incluídos no Microsoft Visual Studio 2013 para simplificar o desenvolvimento de aplicativos.

O modelo de Resultados de Pesquisa é um controle de página que implementa o modelo de navegação recomendado para aplicativos da Windows Store. Os modelos de projeto Hub, Grade, Dividido e Navegação implementam esse modelo de navegação. Para saber mais, veja Modelo de navegação.

Importante Para usar o modelo de item de Resultados de Pesquisa com o modelo de projeto de Navegação ou em Branco, adicione mais arquivos de projeto. Veja a lista a seguir.

Para saber mais e obter outras maneiras de implementar a pesquisa, veja Guia de início rápido: adicionando pesquisa.

Os procedimentos neste tópico mostram como adicionar o modelo de item de Resultados de Pesquisa aos modelos de Hub, Grade e Dividido. Para adicionar o modelo de item a um modelo de projeto diferente, observe o seguinte:

Para o modelo em Branco, adicione o arquivo navigator.js ao seu projeto. (Você pode encontrá-lo em outro modelo de projeto, como o modelo de Grade.) Em default.html, você também deve adicionar código ao conteúdo do host. Para saber mais, veja Modelo de navegação.
Para o modelo de Navegação e em Branco, adicione data.js ao seu projeto (você pode encontrá-lo em outro modelo de projeto, como o modelo de Grade) ou implementar seu próprio método para acessar os dados.
Para os modelos de Navegação e em Branco, adicione o controle de pesquisa e seus manipuladores de eventos na página inicial específica para o modelo. Para o modelo de Navegação, a página inicial é home.html. Para o modelo em Branco, você deve criar sua própria página inicial ou usar default.html.

Adicionar o modelo de item de Resultados de Pesquisa

O procedimento a seguir mostra como adicionar o modelo de item de Resultados de Pesquisa a um modelo de projeto.

Hh923025.wedge(pt-br,WIN.10).gif Para adicionar o modelo de item de Resultados de Pesquisa

Crie um novo projeto no Visual Studio. Neste exemplo, use o modelo de Hub, Grade ou Dividido.
Na pasta do projeto pages do Gerenciador de Soluções, adicione uma nova pasta nomeada search.
Abra o menu de atalho para a pasta search e selecione Adicionar > Novo Item.
No painel central da caixa de diálogo Adicionar Novo Item, selecione Página de Resultados de Pesquisa. Neste exemplo, mantenha o nome padrão searchResults.html que aparece na caixa Nome.
Selecione Adicionar.

O Visual Studio adiciona searchResults.html, searchResults.css e searchResults.js ao projeto na pasta de pesquisa.
Abra searchResults.js e verifique se o URI da página de pesquisa está correto:
```
var searchPageURI = "/pages/search/searchResults.html";
```
Se você não colocar os arquivos de pesquisa na pasta de pesquisa, precisará atualizar o URI.
Abra searchResults.html e verifique se a referência para searchResults.css está correta:
```
<link href="/pages/search/searchResults.css" rel="stylesheet" />
```

Adicionar o controle de pesquisa (modelo de Hub)

Use o controle WinJS.UI.SearchBox para permitir que o usuário pesquise os dados do aplicativo. Estas etapas são diferentes para cada modelo de projeto. Estas instruções se aplicam ao modelo de Hub. Para usar o modelo de Grade ou Dividido, veja a próxima seção, Adicionar o controle de pesquisa (modelo de Grade ou Dividido).

Hh923025.wedge(pt-br,WIN.10).gif Para adicionar o controle de pesquisa à página

Na página inicial do aplicativo (hub.html), adicione o controle SearchBox ao elemento DIV do primeiro controle HubSection.

<div class="hero" data-win-control="WinJS.UI.HubSection">
    <div class="searchBox" data-win-control="WinJS.UI.SearchBox">
    </div>
</div>

No arquivo CSS da página inicial (hub.css), especifique as propriedades de exibição para o controle SearchBox. Você pode incluir o código CSS a seguir após as regras para a primeira seção de hub.
```
.hubpage .hub .hero .win-hub-section-header {
    display: none;
}

.hubpage .hub .hero .searchBox {
    margin-left: 400px;
    margin-top: 200px;
}
```
No arquivo JavaScript da página inicial (hub.js), crie um ouvinte de eventos para o evento onquerysubmitted. O manipulador captura as consultas do controle SearchBox.

Crie o ouvinte na função ready, onde os comentários de código indicam que você precisa adicionar código de inicialização.
```
// TODO: Initialize the hub sections here.
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this.searchHandler.bind(this));
```
No hub.js, adicione o manipulador de eventos para navegar até a página de resultados de pesquisa. Adicione o manipulador de eventos no mesmo escopo que a função ready.

Importante Remova a vírgula do código abaixo se for a última função a ser definida para a página.
```
searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
Dica No código anterior, a propriedade detail dos argumentos do evento contém informações sobre a consulta, como o texto da consulta.
Para continuar com o modelo de Hub, pule a próxima seção e veja Fornecer navegação para os itens retornados pela pesquisa.

Adicionar o controle de pesquisa (modelo de Grade e Dividido)

Hh923025.wedge(pt-br,WIN.10).gif Para adicionar o controle de pesquisa à página

Na página inicial do aplicativo (groupedItems.html em Grade e items.html em Dividido), adicione o SearchBoxcontrole.

Coloque o controle após o elemento SECTION do controle ListView, no elemento DIV do fragmento de página (com um nome de classe de fragment groupeditemspage ou fragment itemspage). O código mostrado aqui é para o modelo de Grade.

<section aria-label="Main content" role="main">
    <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
            layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
            selectionMode: 'none',
            currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
            groupDataSource: Data.groups.dataSource,
            groupHeaderTemplate: select('.headertemplate'),
            itemDataSource: Data.items.dataSource,
            itemTemplate: select('.itemtemplate'),
            ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
            oniteminvoked: select('.pagecontrol').winControl.itemInvoked
        }">
    </div>
<div class="searchBox" data-win-control="WinJS.UI.SearchBox" >
</div>

No arquivo CSS da página inicial (groupedItems.css ou items.css), especifique as propriedades de exibição para o controle SearchBox. Adicione o CSS a seguir ao início do arquivo CSS. Depois de testar, ajuste o valor de margin-left para exibir o controle de pesquisa à direita do título do aplicativo.

Dica Para o código CSS do modelo Dividido, use a regra .itemspage em vez da .groupeditemspage.
```
.groupeditemspage .searchBox {
    margin-left: 600px;
    margin-top: 70px;
}
```
No arquivo JavaScript da página inicial (groupedItems.js ou items.js), crie um ouvinte de eventos para o evento onquerysubmitted. O manipulador captura as consultas do controle SearchBox.

Crie o ouvinte de eventos na função ready.
```
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this._searchHandler.bind(this));
```
Em groupedItems.js ou items.js, adicione o manipulador de eventos para navegar até a página de resultados de pesquisa. Adicione o manipulador de eventos no mesmo escopo que a função ready:

Importante Remova a vírgula do código abaixo se for a última função a ser definida para a página.
```
_searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
No código anterior, a propriedade detail dos argumentos do evento contém informações sobre a consulta, como o texto da consulta.

Fornecer navegação para os itens retornados pela pesquisa

Nesta seção, modificamos o modelo de item de Resultados de Pesquisa para dar suporte à navegação. O código do modelo de item de Resultados de Pesquisa lida com a pesquisa em si. Você pode modificar o comportamento padrão. Por exemplo, você pode modificar a função _searchData para corresponder aos tipos diferentes de dados de aplicativo. Por padrão, o modelo compara títulos e subtítulos no modelo de dados com a cadeia de caracteres de consulta. Neste exemplo, mantivemos os critérios de pesquisa sem modificação.

Cuidado A função _searchData procura os dados fornecidos por data.js. Se você estiver usando o modelo de Navegação ou em Branco, adicione data.js ao projeto ou forneça um método para pesquisar seus próprios dados e, depois, personalize a função _searchData. Para saber mais sobre o modelo de dados no data.js, veja Adicionando dados a um modelo do projeto.

Neste exemplo, implementamos um código que fornece navegação aos itens que são retornados pela consulta da pesquisa e aparecem na página de resultados da pesquisa.

Hh923025.wedge(pt-br,WIN.10).gif Para adicionar navegação aos itens

Abra searchResults.js e adicione código à função _itemInvoked para navegar para a página correta. Este código dá suporte à navegação a partir da página de resultados de pesquisa até a página de item associada a um resultado de pesquisa.

Cuidado O URI mostrado aqui é para o modelo de Hub. Para o modelo de Grade, o URI deve ser: /pages/itemDetail/itemDetail.html. Para o modelo Dividido, o URI deve ser: /pages/items/items.html.
```
_itemInvoked: function (args) {
    args.detail.itemPromise.done(function itemInvoked(item) {
        // TODO: Navigate to the item that was invoked.
        var itemData = [item.groupKey, item.data.title];
        WinJS.Navigation.navigate("/pages/item/item.html", { item: itemData });
    });
},
```

No data.js, modifique alguns valores para facilitar a verificação dos resultados da pesquisa quando você executa o aplicativo. Neste exemplo, substitua alguns títulos e subtítulos nos dados de exemplo (a variável sampleItems) por "Hello" e "hloTitle", da seguinte maneira:

var sampleItems = [
    // . . .
    { group: sampleGroups[0], title: "Hello", subtitle: "Item Subtitle: 5", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },

    { group: sampleGroups[1], title: "hloTitle", subtitle: "Hello", description:
        itemDescription, content: itemContent, backgroundImage: darkGray },
    { group: sampleGroups[1], title: "Hello", subtitle: "Item Subtitle: 2", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },
    // . . .
];

Testar a pesquisa

Hh923025.wedge(pt-br,WIN.10).gif Para testar a pesquisa

Selecione Máquina Local na lista suspensa ao lado do botão Iniciar Depuração na barra de ferramentas do depurador.
Selecione F5 para iniciar a depuração.
Na caixa de pesquisa exibida na seção de hub à esquerda, especifique Hello e pressione Enter.

A página de resultados da pesquisa mostra os resultados do seu modelo de dados que incluem o termo pesquisado. Esta ilustração mostra a página de resultados da pesquisa quando "Hello" é inserido na caixa de pesquisa.
Clique em um dos resultados da pesquisa.
O aplicativo de Hub, Grade ou Dividido abre a página de itens com o título selecionado sendo exibido no topo.

Você pode usar o botão Voltar para voltar para a página de resultados de pesquisa.

Tópicos relacionados

Modelos de projeto em JavaScript para aplicativos da Windows Store

Modelos de item em JavaScript para aplicativos da Windows Store

Adicionando um modelo de item Contrato de Pesquisa

Compartilhar via