[Especial] Eleições 2016: Mostrar dados abertos com JavaFX

É amigos, mais um ano de eleições. Nós, profissionais de TI, podemos criar aplicações que exploram dados abertos. Por exemplo, já falamos aqui de uma API para as eleições de 2014:

[Especial] Eleições 2014: Uma aplicação em JavaFX e apresentando uma API Java

Hoje vamos mostrar mais uma pequena aplicação para uma API criada por meu colega Pedro. Essa API permite ver as leis de vereadores da cidade de São José dos Campos, o Têmis.

Essa postagem também ajudara a fixar os conceitos em JavaFX que você deve ter aprendido ao ler esse blog. Caso ainda não seja tão experiente em JavaFX, siga os links que coloquei e leia os artigos, pois praticamente tudo que foi usado na aplicação já foi discutido aqui!

Dados abertos e JavaFX

JavaFX é um framework essencialmente desktop. No entanto, você pode criar sua aplicação e migrar ela para um celular, como já falamos aqui. O JavaFX oferece todos os recursos para facilmente criar uma aplicação visualmente atraente e útil: tabelas, efeitos, gráficos e muito mais.

Além do mais, JavaFX é Java, ou seja, temos acesso a infinitas APIs para ajudar a acessar WEB Services, parse de arquivos, I/O, inteligência artificial e muito mais!

TemisFX

Essa é a nossa aplicação:

A pessoa pode escolher o vereador e ao clicar no mesmo, a lista de leis é carregada e podemos selecionar uma lei para ler a mesma. Veja o vídeo:

O funcionamento é simples, pois Nossa aplicação é simples e consiste de poucas classes. Veja abaixo:

• A classe App é quem estende de Application. 
• As classes Alderman e Law são representantes da resposta da API do Têmis. Elas têm os mesmos campos do JSON para que possamos transformar a resposta do Web Service REST em objeto Java;
• TemisClientService é uma interface Java que representa as operações com a API. Já a classe TemisClientServiceImpl implementa essa interface e nela é que fazemos a chamado ao Web Service;
• TemisClientUI é onde toda a aplicação é criada. Essa classe estende de BorderPane e nela criamos a lista e os outros paineis da aplicação. A lista dos vereadores é customizada através da AldermanListCell.

Vamos na classe TemisClientUI. Como falamos, ela estende de BorderPane e nela temos as listas e os paines principais da aplicação. Veja o código e em seguida uma explicação sobre os diversos métodos:

• Perceba que a aplicação recebe uma boolean property no construtor. A ideia é quando fizermos alguma chamada ao servidor, deixar a tela em modo de espera. Assim manipulamos essa propriedade toda vez que algo está sendo carregado; Por isso usamos uma property, podemos fazer binding dos elementos da app com essa property!
• Em seguida criamos o painel que contém as leis. Para garantir que quando uma lei é selecionada o conteúdo é mostrado, adicionar um listener ao elemento selecionado na lista de leis. Outro ponto interessante é que o texto da lei vem como HTML já. Assim usamos o browser do JavaFX para carregar aquele conteúdo em HTML. O painel das leis e o seu conteúdo fica em um SplitPane, para que o usuário possa dimensionar manualmente os paineis e facilitar a leitura;
• O método fadeCenterPane é interessante pois ele que faz um efeito de transição quando selecionamos um vereador. Simplesmente nele tocarmos uma FadeTransition;
• Já os vereadores ao serem carregados são colocado em uma ListView que tem a orientação horizontal e tem a célula customizada;
• Por fim, notem que a aplicação se comporta de maneira assíncrona. Isso é facilmente feito usando a Task do JavaFX. Como a mesma usa generics, conseguimos facilmente trocar os tipos usados na task, ou seja, usamos o mesmo método para pegar as leis e a lista de vereadores.

Conclusão

Apresentamos a aplicação TêmisFX e falamos sobre apresentação de dados abertos com JavaFX. O código completo está no github.

Listas e imagens: ListView

Nessa rápida postagem iremos falar sobre imagens dentro das ListView do JavaFX.

A ListView

A classe javafx.scene.control.ListView permite mostrar listas de algum objeto e também que seja selecionado um dos items. A ListView é um Node. Ou seja, você pode adicionar ela em qualquer um dos painéis que já falamos aqui e assim mostrar a lista na sua aplicação. Veja abaixo um exemplo de ListView:






Como as tabelas, temos um método getItems que permite você acessar os itens e adicionar novos. A lista pode ser vertical, como acima, ou horizontal usando o método lista.setOrientation(Orientation.HORIZONTAL). Um exemplo:

Customizando ListView 

Cada item é adicionado em uma ListCell<TIPO>, que você pode customizar. Uma forma simples de customizar é criando sua própria ListCell (uma classe que estende de ListCell) e sobreescrever o método updateItem. Ao sobreescrever o método, não se esqueça de chamar super.updateItem e seja feliz mexendo nas configurações da célula. Importante dizer que a célula pode ter o texto mudado e também o graphics, ou seja, você pode configurar uma imagem e o texto de acordo com o objeto que você colocou no TIPO.

O TIPO é o seguinte: Uma ListCell é parametrizada, ou seja, você informa o tipo de objeto que ela aceita. Assim você vai ter erros se tentar inserir outros tipos. Ou seja, se a sua lista é do tipo String, você tem erros ao inserir Integer nessa lista. O mesmo vale para a ListCell, você cria uma ListCell para o TIPO que escolher. Por fim, o tipo vale também para tipos customizados da sua aplicação.

Agora que você criou sua célula, como você informa que quer usar ela na sua lista? Bem, a resposta é simplesmente informar uma fábrica de células usando o método setCellFactory. Não se apavore, com Java 8 você simplesmente usa o seguinte: lista.setCellFactory(param -> new MinhaListCell())

Um exemplo com imagem

O código abaixo esclarece tudo que mencionei:

Conclusão

Falamos brevemente de ListCell. Na verdade o objetivo dessa postagem é preparar terreno para a próxima que fala da aplicação que mostramos nos screenshots - até lá!