Livro 1-JavaFX “Resumo”

Autor: Bruno Oliveira

Sobre o autor

Conheci o Java há 3 anos, em meu curso técnico em informática com foco em programação.
Desde então desenvolvo softwares com esta linguagem, e pretendo sempre crescer com ela.
Além disso, sou entusiasta JavaFX e, sempre que posso, desenvolvo softwares com esta plataforma, para aprender novas “artimanhas”. Recentemente, fui autor de um artigo da revista MundoJ, sobre JavaFX, na edição de Março/Abril (edição 58).

Apresentação

Um pouco da história

Tudo começou há aproximadamente 7 anos, com um projeto inicial de um desenvolvedor chamado Chris Oliver, com a intenção de criar uma linguagem cujos recursos seriam extremamente avançados em interface gráfica e, ao mesmo tempo, fáceis de implementar. Originando ao projeto F3 , entendia ser muito trabalhoso contudo decidiu iniciar. A Sun Microsystems simpatizou com o projeto de Chris e resolveu obter a sua ideia ,criando a linguagem que se chama JAVA FX Script semelhante a linguagem JAVAScript ,isto é , o código não era oficialmente Java.

A primeira versão do JavaFX Script saiu em maio de 2007, em uma conferência da JavaOne. Os planos eram audaciosos: em pouco tempo, elevar o JavaFX para Desktop e Browser, e futuramente para dispositivos móveis. No decorrer do tempo , os desenvolvedores JavaFX Script , assustaram : porque me 2010 seria o fim da linguagem.

Contudo em Outubro de 2011 , a Oracle, adquiriu a SunMicrosystems, lançou a versão 2.0 do JavaFX especialmente o código seria totalmente em Java ! Ganhando uma grande força no mercado há nível mundial , o seu conceito seria RIA (Rich Internet Application) , tornando aplicações Desktop com qualidade gráfica altíssima e conceitos de programação eficazes , com qualidade gráfica de ambicionar. Rapidamente , a Oracle anunciou que o JavaFx será totalmente open-source, além de uma possível edição para implementação em iOS e Android. Aguardamos ansiosamente pela confirmação! Ao mesmo tempo, há esforços independentes para trazer o JavaFX ao mobile, como a RoboVM: http://blog.robovm.org/2013/05/robovm-002-released.html

Por que estudar JavaFX?

Possui várias razões de ser utilizado efetivamente: organização de código, manutenção rápida e descomplicada e o principal motivo, qualidade gráfica para uma área onde os recursos de programação são limitados possibilitando criar aplicações Desktop com qualidade gráfica avançada, com conceitos CSS e belos efeitos visuais ;

O que veremos no livro?

No decorrer do percurso terá aplicações efetivas, simplificadas e objetivas, cuja prática levará ao conhecimento de diversas características da plataforma .Fique tranquilo pois e sua sintaxe ainda é Java . Além disso é dimensionada a questão do famoso MVC (Model – View – Controller), e perceberá que é muito mais prático do que as antigas aplicações Swing, facilitando a comunicação de camadas e simplificando sua interpretação.

Organização do livro

Iniciaremos este livro com a instalação e configuração do JavaFX e a criação da primeira aplicação simples, um formulário de login, para conhecer o básico da plataforma.

Nos capítulos 3 e 4, criaremos uma pequena aplicação utilizando conceitos simples da plataforma. Esta aplicação será um sistema de gerenciamento de uma loja de artigos esportivos, no qual usaremos recursos gráficos avançados para dar maior riqueza à aplicação.

Nos capítulos 5, 6 e 7, falaremos sobre efeitos visuais e folha de estilos permitidos pelo JavaFX, utilizando-os nas próprias telas do projeto realizado. São muitas as possibilidades!

O capítulo 8 mostrará um pouco da relação de amor e ódio do JavaFX com o Swing, e até como trabalhar com os dois simultaneamente.

No capítulo 9 você vai conhecer componentes mais ricos e ter ideias de como poderá incrementar sua aplicação com eles.

O capítulo 10 mostrará uma forma mais simples de criar e organizar os componentes na tela, com um mecanismo drag and drop.

  • Capítulo 2
  • 2.1 Criando um novo projeto com JavaFX

Crie um formulário de login e senha, cuja lógica é simples: um campo de texto simples para o campo “login”, um campo de texto oculto para o campo “senha” e dois botões, um para “entrar” e outro para “sair”. Primeiro, abra o Eclipse, então clique na aba File, depois em New e, por fim, escolha a opção Java Project .

Nesta tela insira o nome do seu projeto por exemplo FormularioLogin , a seguir clicar em Next.

Selecione a biblioteca do JavaFX SDK e clicar em Finish. Caso tenha baixado e instalado o Eclipse Juno, provavelmente já está tudo configurado e basta adicioná-la ao projeto, conforme a figura abaixo:

Caso seu Eclipse não esteja listando essa biblioteca, vamos criar uma nova definição. Clique em Add Library, e clique em User Library:

Surgirá uma tela para adicionar uma nova biblioteca. Então clique em User Libraries… e, na tela que surgir, clique em New. Coloque o nome da biblioteca de JavaFX, e dê OK.

Após a biblioteca criada, precisamos adicionar o jar do JavaFX. Para isto, clique em Add External JARs… e procure pelo jfxrt.jar. No Windows, ele se encontra em um local como C:/Program Files/Oracle/JavaFX 2.2 Runtime/lib/jfxrt.jar, no Mac e no Linux, algo como /Contents/Home/jre/lib/jfxrt.jar. Nada que um locate jfxrt.jar não resolva.

Para finalizar dê OK e Finish , na tela de adicionar biblioteca. Parabéns já podemos iniciar nosso código!

  • 2.2 Desenvolvendo o formulário de login

Criaremos uma classe que será responsável pela visualização (View, do padrão MVC) e também pelo controle das informações (Controller). Esta classe se estende de uma Application, pertencente ao JavaFX. Com isto, teremos que sobrescrever o método start(Stage stage), vindo desta classe, automaticamente. Terá muita utilidade também para chamarmos outros formulários da nossa aplicação. Daremos o nome de LoginApp. Será apresentado assim:

import javafx.application.Application;
import javafx.stage.Stage;
public class LoginApp extends Application {
@Override
public void start(Stage stage) throws Exception {
}
}

No começo , vamos criar um painel onde se localizarão os componentes da tela por exemplo AnchorPane , vai dar liberdade total na localização de seus componentes. Após instanciar um novo painel, daremos seu tamanho, com o método setPrefSize(double prefWidth, double prefHeight), cujo primeiro parâmetro é sua largura, e o segundo, sua altura.

AnchorPane pane = new AnchorPane();
pane.setPrefSize(400, 300);

Então, precisamos criar uma cena para fazer acontecer nosso formulário. Nela, passaremos o painel, que será a parte principal (ou total) da tela.

 Scene scene = new Scene(pane);  

Por fim, devemos indicar qual cena será usada no nosso Stage, que seria a tela propriamente dita. Esta Stage é passada no próprio método start, e a indicação da cena é passada pelo método setScene(Scene scene).

stage.setScene(scene);


Agora, precisamos abrir o Stage, com o método show().

stage.show();

08/01/2021

Para indicar o ponto de execução da classe, precisamos do método main(String[] args), utilizando o método launch(String[] args), que vem da classe Application. public static void main(String[] args) { launch(args); }

Primeiro, criaremos um campo de texto simples para ser nosso espaço para “login”. Este componente chama-se TextField. Criaremos o campo, e usaremos o método setPromptText(String value), para dar-lhe um texto inicial. Este texto some sempre que seu foco é adquirido.

TextField txLogin = new TextField(); txLogin.setPromptText(“Digite aqui seu login”);

A seguir criaremos um campo de texto oculto para senha. Este componente chama-se PasswordField. Usaremos, também, o método setPromptText(String value), para dar o valor inicial. PasswordField txSenha = new PasswordField(); txSenha.setPromptText(“Digite aqui sua senha”); E criaremos os dois botões para “entrar” e “sair”. O componente de botão é o Button. Na sua construção, passamos o texto do botão. Button btEntrar = new Button(“Entrar”); Button btSair = new Button(“Sair”);

Adicionar todos os componentes para o painel. Para isto, utilizamos o método getChildren().addAll(Node… elements), passando como parâmetro todos os componentes.

pane.getChildren().addAll(txLogin, txSenha, btEntrar, btSair);

Todos os componentes visuais são filhos de Node, no JavaFX, seguindo o padrão Composite, que será explicado mais tarde. Seria o equivalente ao Component do Swing.

Nossa classe ficará assim:

public class LoginApp extends Application { @Override public void start(Stage stage) throws Exception { AnchorPane pane = new AnchorPane(); pane.setPrefSize(400, 300); TextField txLogin = new TextField(); txLogin.setPromptText("Digite aqui seu login"); PasswordField txSenha = new PasswordField(); txSenha.setPromptText("Digite aqui sua senha"); Button btEntrar = new Button("Entrar"); Button btSair = new Button("Sair"); pane.getChildren().addAll(txLogin, txSenha, btEntrar, btSair); Scene scene = new Scene(pane); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } 

Para começarmos a entender a força da interface gráfica do JavaFX, utilizaremos um pequeno código CSS para melhorar a aparência do painel principal.

 Não se preocupe com o código, inicialmente, teremos um capítulo completo apenas sobre o CSS mais à frente. /* Nosso primeiro toque de requinte... */ pane.setStyle("-fx-background-color: linear-gradient( from 0% 0% to 100% 100%, blue 0%, silver 100%);"); 

Observação
Este CSS é um pouco avançado, e nele pode-se usar dois estilos:
linear-gradient e radial-gradient. Pode-se, também, usar cores sólidas,
sendo que, nesse caso, simplesmente utiliza-se o nome da cor, após o
item -fx-background-color.


Nossa classe completa já começou a ficar grandinha:

public class LoginApp extends Application { @Override public void start(Stage stage) throws Exception { AnchorPane pane = new AnchorPane(); pane.setPrefSize(400, 300); TextField txLogin = new TextField(); txLogin.setPromptText("Digite aqui seu login"); PasswordField txSenha = new PasswordField(); txSenha.setPromptText("Digite aqui sua senha"); Button btEntrar = new Button("Entrar"); Button btSair = new Button("Sair"); pane.getChildren().addAll(txLogin, txSenha, btEntrar, btSair); Scene scene = new Scene(pane); stage.setScene(scene); stage.show(); txLogin.setLayoutX((pane.getWidth() - txLogin.getWidth()) / 2); txLogin.setLayoutY(50); txSenha.setLayoutX((pane.getWidth() - txSenha.getWidth()) / 2); txSenha.setLayoutY(100); btEntrar.setLayoutX( (pane.getWidth() - btEntrar.getWidth()) / 2); btEntrar.setLayoutY(150); btSair.setLayoutX((pane.getWidth() - btSair.getWidth()) / 2); btSair.setLayoutY(200); } public static void main(String[] args) { launch(args); 

Cápitulo 3

GolFX – Nossa loja de artigos esportivos

Criaremos nossos componentes como variáveis globais, e então, eles serão instanciados e configurados em um método chamado initComponents():

public class LoginApp extends Application { private AnchorPane pane; private TextField txLogin; private PasswordField txSenha; private Button btEntrar, btSair; private static Stage stage; /* Demais códigos já implantados... */ 

Antes, precisamos indicar a variável stage, conforme o Stage do método start, além de criar o seu getter. Faremos isto em todas as Applications, para podermos encerrar a tela quando necessitarmos.

public void start(Stage stage) throws Exception { /* Demais códigos */ LoginApp.stage = stage; } public static Stage getStage() { return stage; } 

E o nosso método initComponents() ficará assim:

private void initComponents() { pane = new AnchorPane(); pane.setPrefSize(400, 300); pane.setStyle("-fx-background-color: linear-gradient( from 0% 0% to 100% 100%, blue 0%, silver 100%);"); txLogin = new TextField(); txLogin.setPromptText("Digite seu login..."); /* Outros códigos de inicialização e configuração de componentes */ } 

Podemos, também, criar um método para iniciar as coordenadas dos componentes, que chamaremos de initLayout():

  private void initLayout() { txLogin.setLayoutX((pane.getWidth() - txLogin.getWidth()) / 2); txLogin.setLayoutY(50); /* Demais códigos de inicialização das coordenadas */ } 

Veja que o código tornou-se muito mais visível para o desenvolvedor. Fica muito claro quando vemos o nosso método start:

public void start(Stage stage) throws Exception { initComponents(); initListeners(); Scene scene = new Scene(pane); stage.setScene(scene); // Remove a opção de maximizar a tela stage.setResizable(false); // Dá um título para a tela stage.setTitle("Login - GolFX"); stage.show(); initLayout(); LoginApp.stage = stage; } 

Podemos rodar nossa aplicação e verificar como está ficando:

3.2 Vitrine de produtos

• Crie uma classe VitrineApp que estenda de uma Application;
• Crie o método start e o método main;

Criaremos a classe como pública, iniciaremos as variáveis de propriedades e criaremos nosso construtor:

public class ItensProperty { private SimpleStringProperty produto; private SimpleDoubleProperty preco; public ItensProperty(String produto, double preco) { this.produto = new SimpleStringProperty(produto); this.preco = new SimpleDoubleProperty(preco); } } 

Por fim, precisamos criar os getters e setters das propriedades. É importante ter atenção, pois o processo é um pouco diferente do habitual.

 public String getProduto() { return produto.get(); } public void setProduto(String produto) { this.produto.set(produto); } public double getPreco() { return preco.get(); } public void setPreco(double preco) { this.preco.set(preco); } 

. Chamaremos de Produto, Vitrine e Carrinho. O padrão dessas classes são aqueles já conhecidos, com getters e setters. Na classe Produto, teremos dois atributos: String produto e double preco.

public class Produto { private String produto; private double preco; public Produto(String produto, double preco) { this.produto = produto; this.preco = preco; } // Getters e Setters } public Produto(String produto, double preco) { this.produto = produto; this.preco = preco; } // Getters e Setters } 
 public class Carrinho { private static List produtos = new ArrayList();

Para o método para adicionar novos produtos, utilizaremos a opção de adicionar diversos produtos ao mesmo tempo, ou apenas um, se preferir.

public void addProdutos(Produto... ps) { for (Produto p : ps) produtos.add(p); } 

Por fim, criaremos o método para retornar a nossa lista de produtos.

public List getProdutos() { return produtos; } 

Crie agora a classe Vitrine, idêntica a classe Carrinho. Ela representará todos os produtos do nosso catálogo .Mostraremos agora um esboço da tela de vitrine, para entendermos como será o andamento e também entender a função de cada componente,

Esboço da tela de vitrine

Voltando à classe VitrineApp, após a finalização da classe interna ItensProperty, indicaremos que ela será a parametrização da TableView e TableColumn, na qual o último necessita, também, indicar qual o tipo de dado será passado para a coluna. Aproveitaremos para criar todos os componentes e também uma ObservableList, que é mais um padrão JavaFX, cuja função é semelhante a uma ArrayList, porém utiliza a forma de propriedades.

private AnchorPane pane; private TextField txPesquisa; private TableView tbVitrine; private TableColumn columnProduto;  private TableColumn columnPreco; private static ObservableList listItens = FXCollections .observableArrayList(); private static Carrinho carrinho; 

Vamos criar o nosso initComponents() para iniciar nossos componentes e o carrinho, deixaremos à sua escolha para dar seus próprios toques de requinte.

pane = new AnchorPane(); pane.setPrefSize(800, 600); txPesquisa = new TextField(); txPesquisa.setPromptText("Digite o item para pesquisa"); tbVitrine = new TableView(); tbVitrine.setPrefSize(780, 550); columnProduto = new TableColumn(); columnPreco = new TableColumn(); tbVitrine.getColumns().addAll(columnProduto, columnPreco); pane.getChildren().addAll(txPesquisa, tbVitrine); carrinho = new Carrinho();