22 de dez de 2016

Livro gratuito sobre JavaFX



E aconteceu! Esse blog virou um pequeno livro de bolso sobre JavaFX! Agradeço a todos que acessam o blog, são 400 acessos diários(em média), com picos de 1000 acessos por dia!

O livro é simples, com o conteúdo do blog, mas somente as partes básicas. Há também um código testado e preparado para ser importado no Eclipse para uso.

Veja a página do livro para mais informações.

Será que há mais livros por vir? Veremos.

27 de nov de 2016

Um pequeno temporizador (ou cronômetro)

Nessa rápida postagem iremos compartilhar com vocês um pequeno temporizador feito em JavaFX.

A ideia é bem simples, um temporizador configurável que pode ser usado como auxílio aos que gostam da técnica pomodoro. Já quem quer aprender JavaFX, esse é só um código de exemplo de uso da classe Animation.

A ideia é bem simples: você escolhe um tempo e o temporizador começa a diminuir aquele tempo tocando um "tick" até chegar a 0 e então um som de bomba explodindo é tocado.


O código não é complexo, veja abaixo e sem seguida uma pequena explicação:

  • A aplicação funciona dependendo da classe Animation que é controlada pelo único botão da aplicação. Criamos uma animação sem fim(sem tempo para parar), mas que a sua execução é controlada pelo botão;
  • Para que seja executado código a cada um segundo, adicionamos um KeyFrame na animação que é executado a cada 1 segundo e tem por ação o método atualizaValores;
  • Quando o botão é clicado, verificamos o estado atual dele (se ele está com texto PARAR ou Começar) e de acordo com esse valor paramos ou iniciamos a animação e também pegamos o atual valor selecionado no slider;
  • No método atualizaValores é onde tudo acontece. Nele atualizamos o valor do label, atualizamos o tempo restante e também tocamos o áudio;
  • O método atualizaLabelTempo é responsável por pegar o valor em segundos e transformar no formato mm:ss, para que seja mostrado no label;
Essa é a ideia básica dessa app feita em menos de 1 hora. Você pode pegar o código no github e melhorar para adicionar mais funcionalidades! Veja abaixo o código final:






7 de set de 2016

[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.


5 de set de 2016

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á!

20 de ago de 2016

App de Sorteio usando JavaFX

Nessa postagem rápida, vamos mostrar uma aplicação útil, feita em JavaFX, que usamos nos eventos dos nossos JUG.

O código original foi feito em algumas horas, depois foi melhorado para ser integrado a um Web Service REST de outra aplicação, mas o uso básico é possível para sortear números sem sequer acessar o WS.

Veja o sorteio de números:



Após alguns sorteios você pode ver o que falta sortear e o que já foi sorteado:



Bem, era isso, uma postagem rápida mesmo! Espero que a aplicação seja util a alguém. O código está no github do JUG Vale.

6 de mar de 2016

Completar automaticamente ComboBox

Baseado nessa postagem do GUJ, eu criei um simples exemplo de auto complete em ComboBox. O que ele basicamente faz é:


  • Quando o usuário digita com o ComboBox selecionado, ele trabalha com uma String temporária que armazena o texto;
  • A cada tecla digitada, o conteúdo do combobox é mostrado e atualizado;
  • Se backspace é digitado, atualizamos o filtro;
  • A cada tecla digitada, mostramos os itens do combo box, quando o combo box é oculto, o filtro é limpo e a tooltip ocultada.

O resultado é mais ou menos o seguinte:



O código da classe e mais uma aplicação de exemplo está abaixo. Coloquei também no github, me mande PR para melhorar e há MUITAS melhorias a serem feitas, como suporte a espaço e acentos.



28 de fev de 2016

Criando controles customizados com JavaFX

Essa é uma tradução do artigo criado por Hendrik. Veja mais no blog GuiGarage

Por Hendrik Ebbers


Uma coisa que eu frequentemente faço com Java Swing é a customização de componentes e a criação de novos tipos de componentes. Um exemplo é o JGrid. Desde que JavaFX foi lançado, eu quis portar o JGrid. Depois de muitos experimentos e protótipos ruins, eu acho que encontrei a forma correta de fazer isso. As apresentações de Gerrit Grunwald e Jonathan Giles no JavaOne me ajudaram muito a fazer isso. As gravações dessas apresentações estão disponívels online (link e link - NOTA: links quebrados), então eu recomendo quem estiver interessado nesse tópico a investir algum tempo e assistir elas.


Primeiros passos



Como componente de interface no JavaFX é composto por um control(controle), uma skin("casca") e um behaviour(comportamento). Em um caso ideal, há também a parte do CSS.


A melhor forma de começar é criar uma classe que herda de  javafx.scene.control.Control. Essa classe é basicamente compara ao JComponent. O Control deve ter as propriedades do componente e atuar como a classe principal dele porque instâncias dessa classe serão depois criadas automaticamente no códido da aplicação e serão adicionadas para a árvore da interface com o usuário(UI):

MyCustomControl myControl = new MyCustomControl();
panel.getChildren().add(myControl);

Quando programando componentes Swing na forma correta você coloca tudo que depende da visualização ou a interação com o usuário em uma classe de UI (veja LabelUI por exemplo). JavaFX vai além e disponibiliza uma classe de skin para toda a visualização e o layout relacionado com o código e a classe behaviour para todas as interações com o usuário.



Para fazer isso em JavaFX você deve entender como as classes se relacionam. Aqui está um pequeno diagrama que mostra as relações entre essas classes:



Criando o comportamento (classe Behaviour)

Se o seu componente é somente para visualização de dados e não há interação, é baste simples criar um comportamento. Assim, você simplesmente precisa criar um classe que herde de com.sun.javafx.scene.control.behavior.BehaviorBase.

public class MyCustomControlBehavior extends BehaviorBase {
public MyCustomControlSkin(MyCustomControl control) {
super(control, new MyCustomControlBehavior(control));
    }
}

Alguns de vocês podem ficar confusos quando ver o pacote da classe BehavioyBase. No momento é uma API privada e normalmente você não deveria usar essas classes no seu código, mas os caras da Oracle sabem desse problema e irão providencias a classe BehaviorBase como uma API com o JavaFX 8. Então uma boa prática é usar essa classe privada agora e refatorar assim que o JavaFX for lançado(*).

NOTA: O javaFX 8 foi lançado já!

Criando a casca (classe Skin)

Depois que a classe de comportamento é criada, podemos dar uma olhada na skin. Sua classe de skin vai muito provavelmente herdar de com.sun.javafx.scene.control.skin.BaseSkin e criar um novo comportamento para o seu Control. O código normalmente se parece com o seguinte:

public class MyCustomControlSkin extends SkinBase{
public MyCustomControlSkin(MyCustomControl control) {
super(control, new MyCustomControlBehavior(control)); }
}

Criando o controle

A última classe que precisamos é o controle. Primeiro criamos uma classe vazia:

public class MyCustomControl extends Control {
public MyCustomControl() { }
}

Nesse ponto nós temos uma falha nas dependências das nossas classes. A skin conhece o behavior e o control. Aqui tudo parece correto, no entanto, no código da aplicação você vaim simplesmente criar um novo controle e usar como eu mostrei antes. O problema é que a classe de controle não sabe nada sobre a skin ou o behavior. Esse foi um dos maiores desafios quando eu estava aprendendo JavaFX.

Juntando as coisas


O que inicialmente parece um grande problema, é na verdade parte do poder disponibilizado pelo JavaFX. Com JavaFX é muito fácil criar diferente visualizações (skins) para os controles. Nessa parte você pode customizar a aparência dos componentes usando CSS. Como a skin é a parte principal da aparência, ela deve ser definida no CSS também. Assim, invés criar um objeto skin para o controle manualmente, você simplesmente define a classe skin que deve ser usada no seu controle. A criação e tudo mais é automaticamente feito pelas APIs do JavaFX. Para fazer isso, você deve ligar o seu controle a uma classe CSS.
Primeiramente, crie um novo arquivo no seu projeto. Eu acredito que a melhor prática é usar o mesmo pacote que o controle está e não um arquivo CSS criado sob src/main/resource:


Dentro do seu CSS você deve especificar um novo seletor para o seu componente e adicionar a skin como uma propriedade. Isso deveria parecer como o seguinte exemplo:

.custom-control {
-fx-skin: "com.guigarage.customcontrol.MyCustomControlSkin";
}

Assim que você criar o CSS, você tem que definir o mesmo no seu controle. Portanto, você deve configurar o caminho para o arquivo css e o seletor dos seus componentes:

public class MyCustomControl extends Control {
public MyCustomControl() {
getStyleClass().add("custom-control");
}
protected String getUserAgentStylesheet() {
return MyCustomControl.class.getResource("customcontrol.css").toExternalForm();
}
}

Depois que todas essas coisas foram feitas corretamente, JavaFX vai criar uma instância de skin para o seu controle. Você não precisa se preocupar com instanciação ou o mecanismo de depdendëncias. Nesse ponto eu gostaria de agradecer Jonathan Giles, que dedicou um tempo para codificar a integração do css para o gridfx  comigo e explicou todo o mecanismo e benefícios.

Acesso à Skin e Behavior

Normalmente não há a necessidade de acessar a Skin e o Behavior através do controle, mas se você precisar disso, você pode acessá-los da seguinte forma:


Como controler.getSkin() rece um javafx.scene.control.Skin e não a classe SkinBase você deve fazer um cast se precisar do behaviour:


((SkinBase)getSkin()).getBehavior();

Uma solução para os que odeiam CSS

Para alguns de vocës esse mecanimos parece um pouco exagerado. Talvez vocë simplesmente precise de um controle na sua aplicação e você não planeja usar uma skin com CSS e fazer tudo isso. Para esse caso de uso, há um ótimo workaround na API do JavaFX. Você pode ignorar toda a parte do CSS e configurar a classe skin no seu controle usando código:

public class MyCustomControl extends Control {
public MyCustomControl() {
setSkinClassName(MyCustomControlSkin.class.getName());
}
}


O benefício dessa forma de trabalho é que refatorar pacotes e nome de classes não vai quebrar o seu código e você não precisa de um arquivo CSS extra. Por outro lado, há uma grande desvantagem. Você não poderia usar skins definidas por CSS em qualquer extensão do seu controle. Acho que toda API pública, como o GridFX, deveria usar a forma com CSS. Em alguns casos de uso internos, a forma hardcoded(essa que falamos agora) é muito mais rápida.

Conclusão

Agora nós criamos um controle, uma skin e um behavior que está funcionando bem e pode ser adicionado na árvore  UI da sua aplicação. Mas, como acontece com o Swing, simplesmente herdar de JComponent não levará você a ver nada na tela. Então o próximo passo é adicionar estilo e organizar o layout do seu componente. Irei falar disso no meu próximo artigo.
Se você quiser dar uma olhada em algum componente existente veja  jgridfx ou JFXtras. No jgridfx os seguintes arquivos batem com esse artigo:

  • com.guigarage.fx.grid.GridView (control)
  • com.guigarage.fx.grid.skin.GridViewSkin (skin)
  • com.guigarage.fx.grid.behavior.GridViewBehavior (behavior)
  • /src/main/resources/com/guigarage/fx/grid/gridview.css (css)





17 de fev de 2016

Um CRUD com JavaFX usando banco de dados

Devido ao sucesso da postagem anterior Um CRUD com JavaFX, resolvi estender a mesma para falar sobre o acesso a um banco de dados MySQL utilizando a mesma estrutura do artigo anterior.

Acessando banco de dados com Java


Esse é talvez um dos assuntos mais buscados por quem está aprendendo Java. Há muitas referências a isso na internet, inclusive uma série de artigos que o criado desse blog  escreveu há mais de 5 anos atrás para o JavaFree, veja: Acessando dados com Java: 1º parte - Simples Dao - Acessando Dados com Java: Parte 2 - Prevendo problemas - Acessando Dados com Java: Parte 3 - Hibernate Annotations

Preparando o banco

O primeiro passo nosso é garantir que você tenha o MySQL instalado(que depende do sistema operacional sendo utilizado, Linux ou outros) e uma vez feito isso, entre no MySQL e então seguir alguns passos. Para esse artigo foi criado o seguinte:


  • Usuário contas_app com senha aprendajavafx;

CREATE USER 'contas_app'@'localhost' IDENTIFIED BY 'aprendajavafx';


  •  Banco de dados contas crud-contas; 

CREATE DATABASE `crud-contas`  DEFAULT CHARACTER SET utf8  DEFAULT COLLATE utf8_general_ci


  • Garanta os privilégios do usuário contas_app para o banco crud-contas

mysql> use crud-contas
Database changed
mysql> GRANT ALL PRIVILEGES ON * . * TO 'contas_app'@'localhost';


  • Tabela Contas com os campos que precisamos

create table contas(  
   id int auto_increment, 
   concessionaria varchar(30) not null,  
   descricao varchar(1000) not null,  
   data_vencimento date not null,
   primary key(id)         
); 

Notem que o ID é auto_increment, ou seja, o MySQL vai dar o ID para nós. Se inserirmos alguns valores de teste, podemos notar que o ID já foi preenchido:

Criando uma classe para acesso ao banco de dados

Conforme falamos no artigo anterior, para trocar onde os dados serão armazenados nós iremos criar uma implementação de ContasService e trocar o tipo retornado no método getNewInstance

Para falarmos com o nosso banco de dados MySQL, precisamos ter o Driver JDBC no classpath da aplicação, pois é ele quem possibilita a comunicação de uma aplicação Java com o banco. Por isso, baixe o driver JDBC do MySQL e coloque no classpath da aplicação.

A implementação do banco de dados simplesmente envia comandos SQL para o MySQL invés de abrir e manipular arquivos, assim temos que:

* Salvar significa realizar um INSERT com os dados da conta passada;
* Buscar é trazer dados usando SELECT e transformar em uma lista de contas;
* Apagar é realizar um DELETE;
* Por fim atualizar é a realização de um UPDATE.

Claro que tudo pode ser facilitado usando um framework que faz o mapeamento de objetos para o modelo relacional de banco de dados, como o Hibernate, mas por hoje vamos ficar no básico! Finalmente, veja como ficou nossa classe ContasDBService (lembre-se que todo o código pode ser encontrado no github):


15 de fev de 2016

Um CRUD com JavaFX

Finalmente!!! Uma das postagens mais esperadas desse blog é o CRUD! 

VEJA A PARTE 2 COM BANCO DE DADOS

Todo programador já fez(ou vai fazer) um CRUD na vida e é, no geral, a forma que aprendemos conceitos básicos de uma tecnologia. Nesse artigo vamos mostrar um simples CRUD em JavaFX para explorar algumas características da tecnologia.

Definição de CRUD


CRUD é uma sigla que vem das operações básicas que podemos fazer um algo armazenado em uma fonte de dados:

Create: Criar uma nova instância de algo na fonte dos dados;
Retrieve: Trazer os dados já armazenados;
Update: Atualizar dados já armazenados;
Delete: Apagar.

Onde armazenar os dados?


A fonte de dados pode ser um banco de dados(MySQL, MariaDB, Postgres, etc), um arquivo(arquivos em diversos formatos, como CSV), um Web Service (que após chamado, salva os dados em algum lugar) ou até mesmo a própria memória dinâmica do computador(sendo que os dados se perdem quando a aplicação é fechada). Aqui vamos usar um arquivo CSV, uma forma simples de armazenar objetos em um arquivo de texto.
O motivo de não usarmos um banco de dados tradicional é que o foco do artigo é mostrar JavaFX. Um banco de dados comum implica em termos que falar de SQL, conexão com o banco, select, etc, isso vai fugir do foco.

Nosso CRUD


Nossa aplicação simples vai ser um CRUD de Contas. Sim, bills, contas! Pagamos todo mês contas de luz, água, gás, faturas, etc, etc, argh. Para representar a conta, criamos um objeto Java chamado Conta com três atributos: id (gerado automaticamente para controle interno), concessionária, descrição e data de vencimento. É isso, simples, não? Em breve mostramos o código dessa classe, mas agoras que conhecemos os campos, veja a telinha que modelamos usando o SceneBuilder que gerou um FXML (se não sabe o que é isso, veja esse artigo sobre FXML)




Começamos com uma tabela com três colunas representando os campos, após a tabela temos os campos de texto para entrada do nome, descrição e um campo para entrada de data do tipo DatePicker, que infelizmente ainda não abordamos aqui por ter sido adicionado apenas no JavaFX 8, e por fim os botões de ações.

A lógica da aplicação é a seguinte:
  • A tabela tem ID tblContas e três colunas: clConc, clDesc e clVenc. Elas são populadas com os dados de um objeto do tipo Conta;
  • Os campos de texto e o campo de data tem um (txtConc, txtDesc, dpVenc) serão injetados no controller para que possamos saber o valor que o usuário entrou;
  • Cada um dos botões  ação:
    • salvar: salva o objeto de acordo com a informação entrada pelo usuário. Não está habilitado quando um campo está selecionado na tabela;
    • atualizar: Só está habilitado quando selecionamos uma linha da coluna e permite atualizar os dados dessa linha (os campos de entrada de dados vão ser atualizados com o valor selecionado para serem modificados pelo usuário);
    • apagar: apaga a linha selecionada;
    • limpar: limpa o campo selecionado atualmente.
As operações e os elementos da tela ficam na classe ContasController. Código que veremos já já.

Fazendo as operações com o banco de dados

As operações em sí com o banco ficam na interface ContasService. Ela contém os métodos salvar, que recebe uma instância de conta a ser salva, atualizar, que recebe a conta já salva para ser atualizada, apagar, que apaga uma conta e buscarTodos, que retorna todas as contas selecionadas. É nessa classe que fazemos as operações. 
Todo o código poderia ficar dentro do controller, MAS ISSO É COISA FEIA, temos que definir os métodos em uma interface e, vejam que interessante, usando a capacidade do Java 8 de definir métodos padrões, criamos um método getInstance para retornar a implementação que queremos dessa interface. Assim, criamos a clase ContasCSVService, que é uma implementação da interface, e retornamos uma nova instância nesse método! Podemos, obviamente, criar uma interface, por exemplo ContasBDService que faria a mesma coisa, mas que invés de usar um arquivo CSV, se comunica com um banco de dados, a mesma ideia poderia ser aplicada para um arquivo XLS, como ContasXLSService, e por aí vai. O código do controller, que os métodos da interface, não iria sofrer nenhuma modificação, pois só precisaríamos trocar a intância de ContasService retornada no método getNewInstance! (claro que com CDI e outras tecnologias, sequer criar manualmente precisaríamos). Veja a nossa interface



VAMOS AO CÓDIGO!


Agora, depois desse mooonnnntteee de papo, vamos ao código. Claro que se você leu acima com atenção, vai ser muito simples de entender tudo, mas mesmo assim o código está comentado na medida do possível.

Não vou colocar o todo código na postagem, pois já está muito extensa, mas veja o código da classe Conta, da interface ContasService e da classe ContasController. O restante está no github!