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!