Usando Apache Pivot para Construir um Cliente de Procura do iTunes

Construa um Rich Internet Application com WTKX e tecnologia Java

Apache Pivot é uma plataforma de software livre para construção de Rich Internet Applications (RIAs) em um ambiente Java™ . Ele combina os recursos de produtividade e usabilidade avançados de um kit de ferramentas RIA moderno com a robustez da plataforma Java padrão de mercado. Os aplicativos Apache Pivot tiram proveito do WTKX, uma linguagem com base em XML para o design da interface com o usuário, que torna a saída do aplicativo fácil de visualizar. Neste tutorial, você acompanhará a implementação de um simples, mas prático, aplicativo Pivot que permite um usuário executar procuras no conteúdo do iTunes Store.

Greg Brown, Senior Software Engineer, VMWare

Greg Brown is a senior member of the technical staff at VMware. He has been working with and evangelizing rich client-enabling technologies for over 10 years, including Java, Flash, Flex, and Ajax. He is the architect and lead developer of Pivot, a Java-based rich client platform. He holds a bachelor's degree in Computer Systems Engineering from the University of Massachusetts Amherst.



11/Nov/2009

Antes de Iniciar

Este tutorial assume alguma familiaridade com conceitos e tecnologias comuns de desenvolvimento da Web, incluindo tecnologia Java, XML, JSON, JavaScript e HTTP. Ao final do tutorial, o leitor compreenderá como essas habilidades podem ser prontamente aplicadas na construção de aplicativos Pivot.

Sobre este tutorial

Termos usados frequentemente

  • Ajax: JavaScript Assíncrono + XML
  • API: Interface de programação de aplicativos
  • CSV: Valor separado por vírgula
  • GUI: Interface Gráfica com o Usuário
  • HTML: Linguagem de Marcação de Hipertexto
  • HTTP: Protocolo de Transferência de Hipertexto
  • JSON: JavaScript Object Notation
  • JVM: Java Virtual Machine
  • REST: Representational State Transfer
  • UI: Interface com o Usuário
  • URL: Localizador Uniforme de Recursos
  • W3C: World Wide Web Consortium
  • XHTML: Linguagem de Marcação de Hipertexto Extensível
  • XML: Linguagem de Marcação Extensível

Como outras plataformas de desenvolvimento RIA, o Apache Pivot inclui recursos que tornam a construção de aplicativos de GUI modernos muito mais fácil, incluindo uma interface declarativa com o usuário, ligação de dados, efeitos visuais e transições e integração de serviços da Web. Os aplicativos Pivot são construídos usando uma combinação da tecnologia Java e uma linguagem de marcação com base em XML chamada WTKX. As linguagens de script de Java Virtual Machine também são suportadas. É possível executar aplicativos em um navegador da Web usando o plug-in Java ou como aplicativos de desktop independentes (off-line, opcionalmente).

Neste tutorial, você implementará um único, porém prático, aplicativo Pivot que permite o usuário executar procuras no conteúdo do iTunes Store. Começo com uma introdução à plataforma Pivot, seguida por uma visão geral da API de procura de iTunes e, em seguida, apresentar o aplicativo de demonstração. No decorrer do tutorial, abordarei como:

  • Criar a declaração da interface com o usuário em WTKX, a linguagem de marcação de UI com base em XML do Pivot
  • Processar dados JSON usando o suporte integrado do Pivot para serialização JSON
  • Manipular eventos da interface com o usuário em JavaScript

Pré-requisitos

O código de exemplo neste tutorial tem como base o release do Pivot 1.3, o qual requer o SDK do Java 6 (ou superior). É possível fazer download do Pivot 1.3 como arquivos binários ou código de origem; a distribuição do código de origem contém um arquivo BUILD que descreve como construir o projeto.

O código de origem para o aplicativo de demonstração é distribuído com a plataforma. Todas as amostras de códigos são liberadas sob a Apache Software License, Versão 2.0.

Consulte Recursos para obter links para o download do código de exemplo, do Pivot 1.3, do SDK do Java 6 e do aplicativo de demonstração.


Introdução

Nesta seção, você pode obter uma introdução ao Apache Pivot e ao desenvolvimento de aplicativos na plataforma Pivot antes de abordar o aplicativo de amostra que estará criando neste tutorial.

Apresentando o Apache Pivot

Na realidade, a Web é agora o método padrão para o fornecimento de aplicativos. No entanto, os requisitos funcionais para aplicativos da Web começaram a crescer além dos recursos do navegador. Mesmo com a inclusão do suporte a scripts, manipulação de elementos dinâmicos e comunicação assíncrona do servidor, é difícil criar uma experiência do usuário em HTML que seja verdadeiramente equivalente com a de um aplicativo de desktop.

As plataformas de desenvolvimento RIA são um meio de preencher o espaço entre as experiências Web e desktop. Usando plug-ins denavegador, essas plataformas permitem que desenvolvedores construam aplicativos que se pareçam mais como aplicativos nativos de desktop, mas são implementáveis por meio da Web, como aplicativos tradicionais da Web com base em HTML. Geralmente, os RIAs também incorporam efeitos visuais destinados a melhorar a experiência em geral do usuário, como animações e outros comportamentos dinâmicos.

Hoje, as plataformas comuns para construção de RIAs incluem Adobe® Flex®, Microsoft® Silverlight™ e Sun™ JavaFX™. Embora, por grande vantagem, o Java ainda seja a linguagem de programação mais popular, nenhuma dessas plataformas permite que os desenvolvedores escrevam RIAs em Java. Aplicativos Flex são escritos em ActionScript, aplicativos Silverlight são construídos usando .NET, e aplicativos JavaFX são construídos com JavaFX Script. O Pivot permite que os desenvolvedores construam RIAs para a plataforma Java, usando tecnologias e APIs que já conhecem.

O Pivot também oferece uma alternativa verdadeiramente aberta para desenvolvedores RIA. Enquanto podem ser software livre em graus de variação, Flex, Silverlight e JavaFX ainda são plataformas proprietárias. O Pivot começou como um esforço R&D em VMware em 2007 e foi lançado como um projeto de software livre em junho de 2008 sob a licença Apache 2.0. O Pivot uniu-se ao Apache Incubator em janeiro de 2009 e, atualmente, é inteiramente controlado pelo software.

Visão geral da plataforma Pivot

O Pivot fornece um conjunto abrangente de classes de base que juntas formam uma estrutura. As classes Pivot são agrupadas nas seguintes categorias principais, que são empacotadas e distribuídas em um conjunto correspondente de bibliotecas:

  • Core - Um conjunto de classes comuns não-UI
  • WTK - Classes para desenvolvimento de interface com o usuário, incluindo janelas, diálogos, botões, listas, entrada de texto, layout, arrastar e soltar, marcação XML e mais
  • Web - Classes para facilitar a comunicação com serviços de dados remotos
  • Gráficos - Classes para inclusão de recursos de gráficos interativos em aplicativos Pivot
  • Ferramentas - Ferramentas de desenvolvimento e aplicativos utilitários

O aplicativo descrito neste tutorial destaca os recursos fornecidos pelo Core, WTK e bibliotecas da Web.

O aplicativo de demonstração

O aplicativo de demonstração descrito neste tutorial permite que um usuário realize uma procura no iTunes Store por títulos que correspondam um determinado conjunto de critérios de consultas. As consultas são especificadas como um conjunto de termos de cadeias, e os itens correspondentes são apresentados em uma visualização de tabela. O usuário seleciona um item na tabela para mostrar uma visualização em miniatura do título e clica duas vezes o item ou pressiona Visualizar para reproduzir uma visualização de 30 segundos do item. Este exemplo foi escolhido porque ele destaca vários pontos fortes do Pivot, incluindo a facilidade de construção de UI usando WTKX e JavaScript, assim como o suporte integrado do Pivot para interação com serviços REST baseados em JSON.

Figura 1 é uma captura de tela do aplicativo de amostra, obtida após a execução de uma procura por músicas da banda Cheap Trick.

Figura 1. Aplicativo de demonstração do iTunes Search
Captura de tela de uma procura concluída no aplicativo demo de procura do iTunes

Para obter um link de um exemplo real do aplicativo de demonstração, consulte Recursos (é necessário do SDK do Java 6). Clique em uma linha na tabela para exibir uma imagem em miniatura do resultado da procura, e clique em Visualizar para reproduzir uma visualização de 30 segundos do item.

O WTKX, abordado na próxima seção, é usado para estabelecer a estrutura inicial da interface com o usuário de um aplicativo. O Java é usado para definir a lógica principal e o comportamento por trás da UI, e o JavaScript, uma linguagem de script leve, serve como a cola que liga as outras partes.


Marcação de UI no Pivot: WTKX

O WTKX é uma linguagem de marcação com base em XML usada para construir aplicativos Pivot. Geralmente, ele é mais usado para definir a estrutura da interface com o usuário de um aplicativo. A estrutura hierárquica de um documento XML é praticamente paralela à estrutura da hierarquia de componentes do Pivot, tornando mais fácil visualizar a saída resultante. No entanto, na realidade, é possível usar o WTKX para construir de forma declarativa, qualquer tipo de árvore de objetos Java. Essa seção fornece uma breve introdução ao WTKX e destaca alguns dos principais aspectos de como aplicá-lo no aplicativo de amostra.

Apresentando o WTKX

Como com todas as linguagens de UI com base em XML, o WTKX tem como base os conceitos fundamentais do XML de elementos e atributos. Vamos ver como o Pivot mapeia essas construções para instâncias de classes e propriedades Java.

Elementos

No WTKX, um elemento XML representa uma das duas coisas: uma instância da classe ou uma propriedade de uma instância de classe. Os elementos cujos nomes de tags começam com uma letra em maiúsculo, representam instâncias de classes, e aqueles que começam com uma letra minúscula são propriedades de uma instância de classe. Quando o serializador WTKX (a classe responsável por carregar um arquivo WTKX) encontra um elemento cujo nome de tag começa com uma letra maiúscula, ele considera a tag como o nome de uma classe Java e cria uma instância dessa classe. Assume-se que o espaço de nomes do elemento contém o nome do pacote ao qual a classe pertence. Assume-se que qualquer elemento aninhado que comece com uma letra minúsculacontenha valores de propriedades que serão aplicados à classe. Um nome de elemento de propriedade é convertido para o nome de uma propriedade JavaBean exposto pela instância da classe.

Atributos

Os valores de atributos também são convertidos para propriedades JavaBean. Um valor de atributo é passado como o argumento para o método setter. Se o tipo da propriedade for uma cadeia, o valor será passado no estado em que se encontra; entretanto, se ele for um dos tipos primitivos (boolean, char, byte, short, int, long, float ou double) ou um de seus equivalentes de wrapper, ele será convertido para o tipo apropriado antes de chamar o método setter.

Por exemplo, veja a seguinte classe JavaBean simples mostrada na Lista 1.

Lista 1. Classe JavaBean simples
view sourceprint?
package com.foo;

public class MyBean {
    private String foo = null;
    private int bar = 0;

    public String getFoo() {
        return foo;
    }

    public void setFoo(String foo) {
        this.foo = foo;
    }

    public int getBar() {
        return bar;
    }

    public void setBar(int bar) {
        this.bar = bar;
    }
}

Esse código WTKX instancia o bean e invoca os setters foo e bar , passando um valor String para setFoo() e um int para setBar(): <MyBean xmlns="com.foo" foo="hello" bar="123"/>.

Lista 2 produz o mesmo resultado que a Lista 1.

Lista 2. Produzindo o mesmo resultado
<MyBean xmlns="com.foo" bar="123">
    <foo>hello</foo>
</MyBean>

Observe que a propriedade bar ainda é especificada como um atributo. Isso porque o processo de conversão primitiva descrito acima é aplicado em atributos, mas não em valores de elementos. No entanto, além do conteúdo da cadeia, as propriedades de elementos podem conter tipos complexos (por exemplo, outras instâncias JavaBean), ao contrário dos atributos.

Além da instanciação de classe, o WTKX fornece vários outros recursos que ajudam a facilitar a construção da interface com o usuário, incluindo inclusões, script e injeção de recursos. Alguns desses recursos são discutidos em mais detalhes a seguir.

O exemplo de aplicativo

Lista 3 mostra o código de origem WTKX usado para construir a interface com o usuário do aplicativo. O elemento-raiz é uma <Window>, que, como ele usa o espaço de nomes padrão, corresponde a uma instância de org.apache.pivot.wtk.Window. Esse é o tipo de janela mais básico fornecido pelo Pivot; ele não fornece nenhum ajuste, como uma barra de título ou alça de redimensionamento, e serve simplesmente como um ponto de entrada na exibição (a construção de UI de nível superior em um aplicativo Pivot).

Lista 3. Código de origem WTKX para a interface com o usuário do aplicativo
<Window title="Search Demo" maximized="true"
    xmlns:wtkx="http://pivot.apache.org/wtkx"
    xmlns:content="org.apache.pivot.wtk.content"
    xmlns="org.apache.pivot.wtk">
    <content>
    ...
    </content>
</Window>

Observe que a propriedade maximized da janela está configurada como true; isso faz com que a janela seja expandida para preencher toda a área do cliente do contexto do aplicativo. Ao executar em um navegador, isso corresponde à área do cliente do applet na qual o aplicativo está em execução; no desktop, é a área do cliente do quadro do aplicativo.

O único elemento-filho imediato de <Window> é um elemento <content> . O conteúdo desse elemento é configurado como a propriedade content da janela. O conteúdo de uma janela é um componente redimensionado para se ajustar à área do cliente disponível da própria janela. Nesse caso, o conteúdo da janela é um TablePane. TablePane é um contêiner Pivot que corresponde aproximadamente a uma tabela HTML. Ele organiza seus componentes-filho em uma grade de linhas e colunas, opcionalmente, células de extensão. A estrutura da tabela é definida por suas coletas <rows> e <columns> , conforme especificado no XML (consulte a Lista 4).

Lista 4. Definindo o contêiner TablePane
<TablePane styles="{padding:6, verticalSpacing:6}">
    <columns>
        <TablePane.Column width="1*"/>
    </columns>
    <rows>
    ...
    </rows>
</TablePane>

Observe o atributo styles do elemento TablePane . Os estilos são usados para customizar a aparência de um componente, e são especificados no WTKX como uma coleta de pares nome/valor formatada em JSON. Todos os componentes WTK suportam o atributo styles , mas cada componente pode suportar um conjunto diferente de estilos, dependendo de sua atual skin (skins são como o Pivot suporta look-and-feels plugáveis). Nesse exemplo, a área de janela recebe os valores padding e verticalSpacing de 6 (pixels). Padding representa a quantidade de espaço que a área de janela da tabela deixará ao redor de seus componentes, e vertical spacing é o tamanho do intervalo que a área de janela da tabela deixará entre as linhas.

O restante do arquivo WTKX serve para estabelecer a estrutura para a interface com o usuário do aplicativo. Ele também define alguns manipuladores de eventos JavaScript, que são discutidos em mais detalhes em Manipulação de Eventos: JavaScript. De interesse específico, é a definição do componente TableView , que é usado para apresentar os resultados de procuras (consulte a Lista 5).

Lista 5. Definição do componente TableView
<TableView wtkx:id="resultsTableView">
    <columns>
        <TableView.Column name="itemName" width="1*" headerData="Name"/>
        <TableView.Column name="itemParentName" width="1*" headerData="Album"/>
        <TableView.Column name="artistName" width="1*" headerData="Artist"/>
    </columns>
    ...
</TableView>

A visualização de tabela define um conjunto de colunas cujos nomes correspondem diretamente às propriedades de itens nos dados JSON retornados. O componente TableView do Pivot é capaz de apresentar dados JSON no estado em que se encontram, sem nenhuma transformação de dados adicional necessária (os dados CSV também são suportados). Isso torna o Pivot uma plataforma ideal para construção de clientes REST que podem consumir esses formatos de dados comuns. Vamos ver como isso funciona.


Processamento de Consulta: Tecnologias Java + JSON

Enquanto a interface com o usuário de um aplicativo Pivot é normalmente definida usando o WTKX, o comportamento do aplicativo geralmente é definido no código Java. A lógica de aplicativo também pode ser escrita em script, permitindo que desenvolvedores construam parte ou todo o aplicativo Pivot usando linguagens JVM populares, como Groovy ou Scala. Usei JavaScript para definir manipuladores de eventos no aplicativo de amostra.

JavaScript Object Notation (JSON) é um formato independente da plataforma para a troca de dados. Como o XML, ele é usado para representar dados estruturados, mas geralmente mapeia melhor para as estruturas de dados usadas por muitas linguagens de programação populares, incluindo Java e JavaScript. Ele também é um pouco menos detalhado que o XML, pois não necessita de tags de fechamento. Apesar do JSON ser mais usado no desenvolvimento Ajax, ele pode ser usado por qualquer linguagem ou plataforma que o suporte. O Pivot suporta o JSON de forma nativa e faz uso extensivo dele em toda a plataforma, para definição de recursos e declaração de estilos, como também para troca de dados.

Agora você verá como o código Java pode carregar a interface com o usuário de um aplicativo Pivot no WTKX, e como usar o suporte robusto do Pivot para dados JSON para aproveitar facilmente a existência de serviços originalmente criados para aplicativos Ajax, como a API do iTunes Search. O código de origem do aplicativo inteiro está disponível em Recursos.

Carregando a interface com o usuário: código Java

A classe SearchDemo implementa a interface org.apache.pivot.wtk.Application , que serve como o ponto de entrada principal em cada aplicativo Pivot. Ela define os quatro métodos a seguir, semelhantes aos métodos de ciclo de vida usados no desenvolvimento tradicional de applets:

  • startup(): chamado quando um aplicativo está inicializando
  • shutdown(): chamado quando um aplicativo em execução está encerrando
  • suspend(): chamado quando um aplicativo está temporariamente desativado
  • resume(): chamado quando um aplicativo suspenso é continuado

A implementação de startup() e shutdown() no aplicativo de amostra é discutida abaixo; suspend() e resume() não são usados neste exemplo.

startup()

O método startup() no aplicativo é definido na Lista 6.

Lista 6. Método startup() para o aplicativo
public void startup(Display display, Map<String, String> properties)
throws Exception {
    WTKXSerializer wtkxSerializer = new WTKXSerializer();
    wtkxSerializer.put(APPLICATION_KEY, this);

    window = (Window)wtkxSerializer.readObject(this, "search_demo.wtkx");
    wtkxSerializer.bind(this, SearchDemo.class);

    ...
    window.open(display);

    termTextInput.requestFocus();
}

Este método cria uma instância de org.apache.pivot.wtkx.WTKXSerializer, que é usada para carregar a UI a partir do arquivo WTKX. Ele inclui uma referência para ele mesmo no escopo do serializador para que o código do script definido no arquivo possa retornar para o aplicativo para execução de consultas por meio do método executeQuery() discutido em O método executeQuery(). Ele, então, invoca o método readObject() do serializador, que analisa o código de origem do WTKX e retorna a instância da classe correspondente para o elemento WTKX raiz.

startup() , então, chama o método bind() no serializador. Esse método mapeia referências de objetos nomeadas no arquivo WTKX para variáveis de membro do aplicativo. Os objetos são identificados no arquivo de origem por meio de atributos wtkx:id , e as variáveis de membro correspondentes são identificadas com uma anotação @WTKX no código de origem Java (consulte a Lista 7).

Lista 7. Marcando as variáveis do membro com a anotação @WKTX
@WTKX private TextInput termTextInput;
@WTKX private PushButton searchButton;
@WTKX private Label statusLabel;
@WTKX private TableView resultsTableView;
...

A anotação @WTKX é simplesmente uma conveniência para o desenvolvedor. É possível obter as mesmas referências por meio do método get() do serializador; por exemplo, o método startup() pode, como alternativa, conter várias instruções semelhantes às seguintes:
termTextInput = (TextInput)wtkxSerializer.get("termTextInput");.

startup() , então, abre a janela e solicita que o foco de entrada do usuário seja configurado como a entrada de texto do termo de procura.

O método shutdown()

O método shutdown() é definido na Lista 8.

Lista 8. Método shutdown() para o aplicativo
public boolean shutdown(boolean optional) {
    if (window != null) {
        window.close();
    }

    return false;
}

Este método simplesmente fecha a janela de aplicativo principal que foi aberta em startup() e retorna false para indicar que o encerramento deve prosseguir (ou seja, ele não deve ser cancelado, que é o que acontece se o método retornasse true).

A seguir, você verá como isso funciona com um serviço existente: a API do iTunes Search com base em JSON.

Executando consultas de procuras: JSON e a API do iTunes Search

O iTunes Store é um catálogo de mídia on-line fornecido pela Apple aos usuários do software de gerenciamento de mídia iTunes. A loja permite que os usuário naveguem e comprem músicas, filmes e outros conteúdos digitais.

A Apple fornece uma API HTTP com base em JSON para execução de consultas de procuras simples no iTunes Store. Por exemplo, a recuperação do conteúdo da seguinte URL retorna uma coleta de resultados de procuras para a banda Cheap Trick:

http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/itmsSearch?
limit=100&term=cheap+trick&output=json&media=all&country=us

(Nota: A URL acima é dividida em duas linhas para propósitos de formatação. Na realidade, ela é uma única cadeia de caracteres contínua.)

Os resultados desta consulta são semelhantes à Lista 9 (para resumir, vários resultados foram omitidos).

Lista 9. Resultados da consulta
{ "resultCount": 100,
  "results": [
    { "wrapperType": "track",
      "mediaType": "song",
      "artistName": "Cheap Trick",
      "itemParentName": "Heaven Tonight (Remastered)",
      "itemParentCensoredName": "Heaven Tonight (Remastered)",
      "itemCensoredName": "Surrender",
      "itemName": "Surrender",
      "artistLinkUrl": "http://itunes.apple.com/WebObjects/MZStore.woa
/wa/viewArtist?id=461577&uo=4",
      "artworkUrl60": "http://a1.phobos.apple.com/us/r1000/015/Music/47/5b
/a4/mzi.epawifmt.60x60-50.jpg",
      "artworkUrl100": "http://a1.phobos.apple.com/us/r1000/015/Music/47/5b
/a4/mzi.epawifmt.100x100-75.jpg",
      "country": "USA",
      "currency": "USD",
      "discCount": 1,
      "discNumber": 1,
      "itemExplicitness": "notExplicit",
      "itemLinkUrl": "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i
=203267147&id=203267125&s=143441&uo=4",
      "itemPrice": "0.99000",
      "itemParentExplicitness": "notExplicit",
      "itemParentLinkUrl": "http://itunes.apple.com/WebObjects/MZStore.woa/wa
/viewAlbum?i=203267147&id=203267125&s=143441&uo=4",
      "itemParentPrice": "9.99000",
      "previewUrl": "http://a1060.phobos.apple.com/us/r1000/000/Music/4c/4c
/ab/mzi.zquuboiu.aac.p.m4p",
      "primaryGenreName": "Rock",
      "trackCount": 13,
      "trackNumber": 1,
      "trackTime": 253733},
    ...
  ]
}

Todas as URLs de consulta do iTunes começam com esta URL base:

http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/itmsSearch

Customize-as com argumentos de cadeia de consultas; por exemplo:

  • limit=10: restringe o número de resultados em 10
  • term=cheap+trick: procura por correspondências na cadeia de caracteres "cheap trick"
  • output=json: solicita a saída no formato JSON (a resposta padrão é uma página HTML usada principalmente para construir links para o conteúdo da loja)
  • media=all: solicita correspondências em todos os tipos de mídias (outros valores possíveis podem ser "music", "movie" ou "podcast")
  • country=us: solicita resultados da versão americana do iTunes Store

O aplicativo de exemplo usa esta API para obter informações sobre o conteúdo do iTunes Store e o apresenta para o usuário (consulte Recursos para obter um link para a API completa).

Para obter um utilitário fácil de usar (escrito em Pivot) para navegação do conteúdo de resposta (um pouco detalhado), consulte o link em Recursos. Ele requer o SDK do Java 6.

Colar os dados JSON retornados por uma consulta neste applet apresentará uma visualização em árvore dos dados que é muito mais fácil de navegar.

O método executeQuery()

O aplicativo principal define um método adicional chamado executeQuery() que é chamado pelos manipuladores de eventos definidos dentro do próprio WTKX para realmente executar uma procura. Este método executa o pedido de HTTP e processa os resultados JSON recuperados. Ele assume um único argumento de cadeia contendo a cadeia de procura.

A maior parte do trabalho é realizada por uma instância de org.apache.pivot.wtk.GetQuery. Esta classe representa um tipo do que o Pivot chama de "consulta da Web". As consultas da Web são meios nativos do Pivot de comunicação com serviços de dados remotos. Elas são designadas principalmente para facilitar a interação com os serviços REST com base em JSON. Entretanto, são suficientemente genéricas para suportar a comunicação com qualquer tipo de serviço com base em HTTP, usando qualquer formato de dados. O Pivot também fornece classes de consultas para as outras operações HTTP, incluindo POST, PUT e DELETE.

executeQuery() configura o pedido de consulta como na Lista 10.

Lista 10. Método executeQuery()
getQuery = new GetQuery(QUERY_HOSTNAME, BASE_QUERY_PATH);
getQuery.getParameters().put("term", term);
getQuery.getParameters().put("country", country);
getQuery.getParameters().put("media", MEDIA);
getQuery.getParameters().put("limit", Integer.toString(LIMIT));
getQuery.getParameters().put("output", "json");

Então, ele atualiza o estado da UI para refletir que uma procura está em andamento e executa a consulta (consulte a Lista 11).

Lista 11. Atualizando o estado da UI
getQuery.execute(new TaskAdapter(new TaskListener() {
    ...
});

A execução da consulta realiza um pedido GET do HTTP para o servidor especificado no argumento do construtor e desserializa os dados JSON resultantes.

Uma consulta da Web é um tipo de tarefa, que é representada no Pivot como uma instância de org.apache.pivot.util.concurrent.Task (uma superclasse de GetQuery). As tarefas são usadas para simplificar a execução de operação em segundo plano. O dispatcher é usado para enfileirar e processar pedidos de tarefas em um encadeamento secundário. As tarefas operam de forma semelhante ao objeto XMLHTTPRequest usando na programação Ajax, mas não são limitadas aos pedidos do servidor. Uma tarefa do Pivot pode ser usada para implementar qualquer tipo de operação em segundo plano.

Uma instância de org.apache.pivot.util.concurrent.TaskListener é passada para o método execute() . Esta interface define métodos que são chamados quando a tarefa conclui sua execução (consulte a Lista 12).

Lista 12. A interface TaskListener define métodos que são chamados quando a tarefa tiver concluído a execução
public interface TaskListener<V> {
    public void taskExecuted(Task<V> task);
    public void executeFailed(Task<V> task);
}

O primeiro método é chamando quando a tarefa é concluída com êxito, e o segundo quando a tarefa falha ao concluir.

Observe que a real implementação do listener é agrupada em uma instância de org.apache.pivot.wtk.TaskAdapter. Como as tarefas no Pivot não são limitadas ao uso em aplicativos orientados por UI, os métodos de listener de tarefa são chamados no encadeamento no qual a tarefa foi executada. Entretanto, como a maioria dos kits de ferramentas de interface com o usuário, o Pivot permite apenas um único encadeamento (chamado de encadeamento de dispatch de eventos, ou EDT) para interagir com a interface com o usuário. TaskAdapter garante que os retornos da tarefa ocorram no EDT em vez de ocorrerem no encadeamento em segundo plano atual.

Ao concluir de forma bem-sucedida, os dados do resultado são obtidos a partir da consulta. Os dados JSON retornados são um objeto contendo dois valores: resultsCount, que é o número de resultados retornados, e results, uma array contendo os resultados de procuras reais. No Pivot, os objetos JSON são convertidos para instâncias de org.apache.pivot.collections.HashMap, e as arrays JSON são convertidas para instâncias de org.apache.pivot.collections.ArrayList. A lista contendo os dados de resultados é extraída do objeto de resultado raiz como na Lista 13.

Lista 13. Lista contendo os dados de resultado
Map result = (Map)task.getResult();
List results = (List)result.get("results");

Após preservar qualquer classificação aplicada anteriormente, os resultados são configurados na visualização de tabela: resultsTableView.setTableData(results);.

Os resultados podem ser aplicados imediatamente como os dados da tabela, pois o componente TableView do Pivot usa uma instância de org.apache.pivot.collections.List como um modelo de dados, e ArrayList contendo os dados de resultados JSON é uma implementação desta interface. Todos os componentes acionados por dados no Pivot, incluindo ListView, TreeView e Spinner, usam coletas Pivot como um modelo de dados. Isso torna o Pivot um cliente bastante eficiente para o consumo dos dados fornecidos pelos serviços da Web com base em JSON, pois os dados retornados de um servidor não precisam ser transformados ou adaptados antes de serem usados para preencher a UI.


Manipulação de Eventos: JavaScript

Até este ponto, você acompanhou como os dados de resultados de procuras são estruturados e como são processados pelo aplicativo de demonstração, não viu como uma consulta é realmente iniciada. Nesta seção, você verá como fazer isso usando JavaScript.

Iniciando uma consulta

Como a maioria dos outros kits de ferramentas de interface com o usuário, as ações dentro de um aplicativo Pivot geralmente ocorrem em resposta aos eventos. Os eventos são notificações de que algo ocorreu. Geralmente, eles são disparados em resposta à entrada do usuário, como um clique de mouse ou um pressionamento de tecla, mas também podem ser disparados por outros processos assíncronos (como a execução bem-sucedida de uma tarefa de consulta, conforme descrito em O método executeQuery()).

Os responsáveis pela chamada sinalizam seu interesse em um evento registrando um listener de evento. No Pivot, um listener de evento é definido como uma implementação de uma interface que define o evento. Por exemplo, a seguinte interface define um evento "pressionado" para botões (consulte a Lista 14).

Lista 14. Evento passado para botões
public interface ButtonPressListener {
    public void buttonPressed(Button button);
}

No código Java, os listeners de eventos são registrados incluindo o listener na "lista de listeners" relevante (consulte a Lista 15).

Lista 15. Registrando um listener de eventos
myButton.getButtonPressListeners().add(new ButtonPressListener() {
    public void buttonPressed(Button button) {
        // Handle event
    }
});

Isso parece simples, mas pode se tornar problemático, pois muitas interfaces de listeners definem mais de um método. Enquanto o Pivot inclui classes de adaptadoras que fornecem implementações de instruções sem operação padrão para a maioria da interfaces de listeners, qualquer aplicativo mais complexo provavelmente necessitaria definir muitos listeners de eventos. A criação de todos os listeners como classes internas anônimas (ou mesmo nomeadas) pode complicar o código de origem Java em um aplicativo e ofuscar o real propósito de uma classe. Felizmente, o Pivot fornece uma forma mais simples de definir listeners: blocos de script WTKX.

Por exemplo, considere a declaração de WTKX para o botão Visualizar mostrado na Lista 16.

Lista 16. Declaração WTKX para o botão de visualização
<PushButton wtkx:id="previewButton" buttonData="Preview" enabled="false">
    <buttonPressListeners>
        <wtkx:script>
        <![CDATA[
        importPackage(org.apache.pivot.wtk);
        function buttonPressed(button) {
            var selectedResult = resultsTableView.getSelectedRow();
            ApplicationContext.open(selectedResult.get("previewUrl"));
        }
        ]]>
        </wtkx:script>
    </buttonPressListeners>
</PushButton>

Esta marcação cria uma instância de org.apache.pivot.wtk.PushButton e registra o conteúdo do elemento <wtkx:script> como um listener de pressionamento de botão. As funções definidas no elemento de script correspondem aos métodos declarados pela interface do listener. Apesar de não estar óbvio neste exemplo simples, a definição de métodos adicionais do manipulador é opcional; se um responsável pela chamada não estiver interessado em um determinado evento, o manipulador desse evento poderá simplesmente ser omitido. Como resultado, a implementação de listeners de eventos no script pode ser muito mais concisa do que realizá-la no ambiente Java.


Resumo

Neste tutorial, você poderá ver claramente a filosofia Pivot de "usar a ferramenta certa para o trabalho":

  • XML, uma linguagem de marcação hierárquica que torna a saída resultante mais fácil de visualizar, é usado para declarar a estrutura de uma interface com o usuário.
  • O código Java, em uma linguagem de programação robusta e popular, define os principais comportamentos de trabalho em um aplicativo.
  • JavaScript, uma linguagem de script conhecida e popular, define a lógica de manipulação de evento de ação rápida que é, geralmente, mais trabalhosa de codificar no ambiente Java

Você foi apresentado ao Apache Pivot e aprendeu como é possível usá-lo para construir um cliente de procura simples para o iTunes Store. E acompanhou uma introdução à linguagem de marcação WTKX, uma visão geral de como a programação Java e JSON pode ser usada no Pivot e alguns exemplos de integração do código de script para processamento de eventos.

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=446289
ArticleTitle=Usando Apache Pivot para Construir um Cliente de Procura do iTunes
publish-date=11112009