Com o Top Navigator o usuário tem acesso às categorias mais populares do  Buscapé. Navegando por essas categorias, é possível encontrar produtos e ofertas relacionados a elas.

Para exemplificar, iremos criar uma aplicação utilizando apenas JSP e XPath. Esta aplicação exibirá as categorias mais populares e, em seguida, será possível navegar dentro dessas categorias e visualizar seus produtos e ofertas.

Nosso projeto terá basicamente uma página JSP:

• index.jsp: Página principal onde será exibida a lista de categorias

Tecnologias envolvidas:

• HTML
• CSS
• JSP
• JSTL
• XPath

Dependências do Maven:

<!-- JSTL -->
<dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>jstl</artifactId>
 <version>1.1.2</version>
</dependency>

<!-- JAKARTA STANDARD -->
<dependency>
 <groupId>taglibs</groupId>
 <artifactId>standard</artifactId>
 <version>1.1.2</version>
</dependency>

<!-- XALAN -->
<dependency>
 <groupId>xalan</groupId>
 <artifactId>xalan</artifactId>
 <version>2.7.1</version>
</dependency>

Veja o exemplo em execução

Index.jsp

A primeira página de nosso projeto exibirá as categorias mais populares do Buscapé.

Para correto funcionamento das TAGLIBs utilizadas neste exemplo, ´é necessário configurar o web.xml para utilizar Servlet 2.4 como mostrado abaixo:

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">

No início de nossa página, informaremos as TAGLIBs que serão utilizadas.

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>

Feito isso, o próximo passo será buscar as informações.
Para obter essas informações, nós iremos utilizar o serviço findCategoryList. Este serviço é responsável pela busca de categorias do BuscaPé utilizando o ID da categoria ou uma palavra-chave.

<c:import charEncoding="UTF-8" var="xml" url="http://sandbox.buscape.com/service/findCategoryList/<APPLICATION_ID>/?categoryId=0"/>

Como podemos ver, a tag c:import executa o serviço findCategoryList, informando o parâmetro categoryId=0, onde 0 é o ID da categoria raiz do Buscapé. A resposta deste serviço é armazenado na variável XML.

Outro detalhe importante é o uso do charEnconding=”UTF-8″ para evitar problemas com acentos.

Dica: Sempre prefira buscas utilizando o ID. As buscas feitas por ID são mais rápidas, tornando a aplicação mais eficiente. Clique aqui para visualizar os IDs das categorias.

No primeiro passo, armazenamos na variável XML as categorias. Agora iremos fazer o “parse” do XML.
Como falamos anteriormente, utilizaremos o XPath para navegar pelo XML.
O parse do XML é muito simples, conforme veremos abaixo:

<x:parse doc="${xml}" var="data"/>

Essa tag executará o parse do XML, armazenando-o na variável data
Agora é só utilizar as notações XPath para obter as informações do XML. Veja abaixo:

<div style="font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight: bold; text-decoration: none;">
    <table border="1" cellpadding="1" cellspacing="0" width="100%">
    <tr bgcolor="#e0e0e0">
        <th>Image</th>
        <th>Title</th>
        <th>Has Offers</th>
        <th>Is a final Category</th>
        <th>Links</th>
    </tr>
    <x:forEach select="$data//*[name()='top5Category']">
        <tr>
            <td><img src="<x:out select="*[name()='thumbnail']/@url" />"></td>
            <td align="center">
                <span style="color:#000099;">
                        <x:out select="*[name()='name']" />
                </span>
            </td>
            <td align="center"><x:out select="@hasOffer"/></td>
            <td align="center"><x:out select="@isFinal"/></td>
            <td>
                <ul>
                    <x:forEach select="*[name()='links']//*[name()='link']">
                    <li>
                        <a href="<x:out select="@url"/>" target="_blank">
                            <x:choose>
                                <x:when select="@type = 'category'">BuscaPé Category Page</x:when>
                                <x:when select="@type = 'xml'">BWS Service</x:when>
                            </x:choose>
                        </a>
                    </li>
                    </x:forEach>
                    <li>
                        <x:choose>
                            <x:when select="@hasOffer = 'true' and @isFinal = 'true'">
                                <a href="offers.jsp?categoryId=<x:out select="@id"/>">See offers</a>
                            </x:when>
                            <x:otherwise>
                                <a href="products.jsp?categoryId=<x:out select="@id"/>">See products</a>
                            </x:otherwise>
                        </x:choose>
                    </li>
                </ul>
            </td>
        </tr>
    </x:forEach>
    </table>
</div>

No código acima, é importante destacar a área em vermelho, na qual determinados se uma categoria terá ofertas ou produtos.
Para cada categoria, o XML sempre informa os atributos hasOffer e isFinal

• sFinal: Quando uma categoria for final, ela poderá ter produtos ou ofertas no próximo nível. O serviço disponibilizará o link do tipo XML já com a URL pronta do serviço findProductList ou findOfferList
• hasOffer: Indica se a categoria tem ou não ofertas

Voltando ao código, se você precisa saber se a categoria tem ofertas ou produtos, uma vez que isFinal=true, apenas verifique se o hasOffer é verdadeiro ou falso.

Acima temos o resultado de nosso primeiro JSP exibindo as 5 categorias mais populares. Para cada categoria, a aplicação disponibiliza 3 links:

• Primeiro Link: Link da página no Buscapé
• Segundo Link: Link do serviço do BWS
• Terceiro Link: Link da nossa aplicação (offers.jsp ou products.jsp)

Instale esse aplicativo e fique por dentro de tudo o que é mais vendido no Buscapé!

Baixar o código fonte do exemplo acima aqui.