Desenhando livremente com Canvas e o ColorPicker

Mostramos como desenhar formas geométricas com as classes que herdam de Shape. Essas formas, no entanto, ficam como nós separados no JavaFX. Como faremos se quisermos somente desenhar formas geométricas, textos e outras coisas livremente? Para isso temos o Canvas, uma classe muito interessante para desenharmos livremente!

Canvas

O canvas é simplesmente um nó que representa uma área para desenhar. Isso mesmo, nada mais do que isso. A mágica acontece com  a class GraphicContext, que pode ser adquirida assim que criamos um Canvas. Com o GraphicContext você pode desenhar formas geométricas, textos, imagens, mudar cor, aplicar efeito, etc. Veja um exemplo:



E para gerar isso usamos o seguinte código:

// O construtor do Canvas recebe a largura e a altura
Canvas canvas = new Canvas(300, 300);
// O objeto principal do Canvas é o GraphicsContext, que usamos para desenhar
GraphicsContext ctx = canvas.getGraphicsContext2D();
// estamos prontos para desenhar coisas! Vamos começar mudando a cor
ctx.setFill(Color.RED);
// podemos configurar uma fonte para os textos
ctx.setFont(Font.font("Serif", FontWeight.BOLD, 25));
// desenhando um texto, o primeiro param é o texto, os seguintes são a pos X e Y
ctx.fillText("Olá Mundo Canvas", 15, 30);
// podemos configurar efeitos e novamente trocar a cor
ctx.setFill(Color.BLUE);
ctx.setEffect(new BoxBlur());
ctx.fillText("Olá Mundo Canvas", 15, 60);
// agora vamos trocar o efeito, cor e desenhar um retângulo(x,y, largura, altura)
ctx.setEffect(new Reflection());
ctx.setFill(Color.AQUA);
ctx.fillRect(15, 90, 240, 20);
// ou um retângulo sem preenchimento
ctx.setStroke(Color.GREEN);
ctx.strokeRect(15, 135, 240, 30);
// ou circulos (forma oval)
ctx.setEffect(null);
ctx.setFill(Color.BROWN);
ctx.fillOval(15, 175, 90, 25);
ctx.setStroke(Color.YELLOWGREEN);
// ou formas ovais sem preenchimento
ctx.strokeOval(160, 175, 90, 25);
// ou até desenhar uns poligonos locos, usando diversos pontos X e Y
double xs[] = {15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270};
double ys[] = {205, 235, 250, 265, 205, 235, 205, 205, 235, 250, 265, 205, 235, 205, 205, 235, 250, 205};
ctx.setFill(Color.MAGENTA);
ctx.setEffect(new Reflection());
ctx.fillPolygon(xs, ys, 18);

Nesse momento, você deve estar se perguntando qual é a diferença do Canvas para uma aplicação JavaFX comum, já que podemos fazer tudo isso no JavaFX. Bem, o Canvas é uma tela de desenho, é ótimo para animações, jogos ou visualizações fantásticas. Já uma aplicação JavaFX, temos como maior objetivo objetos que se aninham hierarquicamente e são, no geral, estáticos, como essa página WEB. Desenhar essa página com o Canvas seria um buta dor de cabeça, já usar controles e outras características do JavaFX torna o serviço muito mais fácil.

Um mini paint com canvas

Nesse momento, já temos nossa missão cumprida! Pois apresentamos o componente que queríamos... No entanto, criamos uma aplicação um pouco mais complexa para demonstrar o poder desse componente: um micro paint. Vejam abaixo como é o nosso "paint":

Trocando de cor

Um controle até agora não abordado, mas que foi adicionado no Java 8, é o ColorPicker. Ele é um controle que herda de nó e pode ser adicionada à cena da aplicação e o objetivo é permitir o usuário escolher uma cor em uma paleta de cores! Assim, quando o usuário escolhe a cor, temos a chamada de um método onAction com e o valor do componente muda, podemos assim saber a cor escolhida. Veja o código completo no github.

Conclusão

Não julgue o Canvas só por essa postagem, ele é um dos componentes mais poderosos do JavaFX!
* Código no Github

Organizando conteúdos com o Accordion

Mostramos anteriormente como organizar conteúdos em paineis de aba com o TabPane e como organizar o layout da aplicação. Hoje iremos mostrar mais um controle para organização de conteúdo, o Accordion.

Accordion

Semelhante ao TabPane, o Accordion é feito de paineis, mais especificamente de TitledPane. Para cada TitledPane adicionado ao controle, teremos um painel que pode ser expandido e, quando expandido, temos os outros retraídos. O conteúdo do TitledPane pode ser qualquer coisa, já que o conteúdo deve ser um nó. Veja:

Criando o Accordion

Quando criamos o Accordion, temos que levar em conta que usamos paineis do tipo TitledPane como os paineis do accordion. Assim, essa classe tem uma propriedade para os paineis e é ela que usamos para adicionar todos os paineis do accordion. Também podemos deixar um painel aberto por padrão usando o método setExpanded. Veja o código:

// criamos o Accordion
Accordion accordion = new Accordion();
// criando os paineis do Accordion. Notem que o construtor recebe o
// texto que vai aparecer e o nó
TitledPane painel1 = new TitledPane("Painel 1", new Label(
  "O Primeiro Painel"));
TitledPane painel2 = new TitledPane("Painel 2", new Button(
  "Sou um botão do painel 2"));
TitledPane painel3 = new TitledPane("Painel 3", new Rectangle(150, 50));
// Adicionando um ícone ao Painel
painel1.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("coracao.png"))));
painel2.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("fogo.png"))));
painel3.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("agua.png"))));
// agora adicionamos todas as abas de vez
accordion.getPanes().addAll(painel1, painel2, painel3);
// aqui deixamos o painel que vai expandido por padrao
accordion.setExpandedPane(painel1);
// definimos um padrão mínimo para o painel ou ele vai se dimensionar de
// acordo com o tamanho dos nós
accordion.setMinSize(300, 300);

Conclusão

Apresentamos mais um controle, o Accordion. Veja o código no nosso github.

Usando Tabelas com JavaFX: TableView

Um dos controles mais utilizados em aplicações cotidianas é a Tabela. Com controles que permitam visualizar dados em forma de tabelas podemos mostrar: lista de funcionários, de produtos, dados já ordenados em planilhas, informações diversas que vêm de algum servidor.
Nesse aspecto, estamos bem "servidos" com o TableView do JavaFX. A TableView, juntamente com a classe TableColumn, facilita visualizações de dados em uma aplicação JavaFX.
Nesse artigo, iremos mostrar o básico sobre criação de tabelas usando JavaFX.

Visão geral da classe TableView 

TableView é mais um controle de interface. Para começarmos falando dela, veja a seguinte imagem:

Uma tabela tem colunas e linhas. Quando configuramos as colunas de uma TableView, temos que também dizer como cada coluna vai representar os dados da tabela.

Itens

Os dados devem ser do tipo da declaração da tabela. Por exemplo, se declaramos uma tabela usando:

TableView<Pessoa> tabela = new TableView<>();

A tabela só irá aceitar dados do tipo Pessoa: 

List<Pessoa> pessoas = ....
tabela.setItems(FXCollections.observableArrayList(pessoas));

Caso você tente inserir dados de outro tipo, simplesmente você terá um erro de compilação.

Colunas

As colunas são definidades pela classe TableColumn e devem saber lidar com cada linha da tabela. Isso é feito através de fábricas de células, que são classes que recebem cada item da tabela e retornam uma célula da tabela. A fábrica você deve fornecer ou usar algumas colunas que já sabem fabricar as células de um tipo já conhecido. Veja um exemplo onde criamos colunas para as propriedades nome, idade e email de uma pessoa:

TableColumn<Pessoa, String> colunaNome = new TableColumn<>("Nome");
TableColumn<Pessoa, String> colunaIdade = new TableColumn<>("Idade");
TableColumn<Pessoa, String> colunaEmail = new TableColumn<>("E-mail");
tabela.getColumns().addAll(colunaNome, colunaIdade, colunaEmail);

Por exemplo, para acessar as propriedades do objeto Pessoa, podemos usar uma fábrica pronta, a PropertyValueFactory. Abaixo criamos as fábricas para as propriedades (atributos) da classe pessoa, note a String que ele recebe no construtor que é o nome da propriedade que declaramos na classe:

colunaNome.setCellValueFactory(new PropertyValueFactory<>("nome"));
colunaIdade.setCellValueFactory(new PropertyValueFactory<>("idade"));
colunaEmail.setCellValueFactory(new PropertyValueFactory<>("email"));

Um exemplo completo de uso da TableView

Abaixo temos um código simples que mostra como mostrar uma lista de pessoas em uma TableView. Veja que não é nada sofisticado, mas com esse código, você já estará apto a construir suas próprias aplicações que usam tabelas.

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;

/**
 *
 * @author william
 */
public class Post13Tabelas extends Application {

    @Override
    public void start(Stage primaryStage) {
        List pessoas = Arrays.asList(
                new Pessoa("William", 32, "william@email.com"),
                new Pessoa("Luana", 17, "luana@email.com"),
                new Pessoa("Maria", 12, "maria@email.com"),
                new Pessoa("João", 15, "joao@email.com"),
                new Pessoa("Antônio", 28, "antonio@email.com"),
                new Pessoa("Teles", 17, "teles@email.com"),
                new Pessoa("Eduan", 30, "eduan@email.com"),
                new Pessoa("Gabu", 22, "gabu@email.com")
        );

        TableView tabela = new TableView<>();
        TableColumn colunaNome = new TableColumn<>("Nome");
        TableColumn colunaIdade = new TableColumn<>("Idade");
        TableColumn colunaEmail = new TableColumn<>("E-mail");

        colunaNome.setCellValueFactory(new PropertyValueFactory<>("nome"));
        colunaIdade.setCellValueFactory(new PropertyValueFactory<>("idade"));
        colunaEmail.setCellValueFactory(new PropertyValueFactory<>("email"));

        tabela.setItems(FXCollections.observableArrayList(pessoas));
        tabela.getColumns().addAll(colunaNome, colunaIdade, colunaEmail);
        
        primaryStage.setScene(new Scene(tabela));
        primaryStage.setWidth(250);
        primaryStage.setHeight(300);
        primaryStage.setTitle("Tabelas no JavaFX");
        primaryStage.show();
    }

    public static class Pessoa {

        private String nome;
        private int idade;
        private String email;

        public Pessoa(String nome, int idade, String email) {
            this.nome = nome;
            this.idade = idade;
            this.email = email;
        }

        public String getNome() {
            return nome;
        }

        public void setNome(String nome) {
            this.nome = nome;
        }

        public int getIdade() {
            return idade;
        }

        public void setIdade(int idade) {
            this.idade = idade;
        }

        public String getEmail() {
            return email;
        }

        public void setEmail(String email) {
            this.email = email;
        }

    }
}

Conclusão

Nesse breve artigo nós mostramos como criar tabelas em JavaFX. Claro que o tópico é extenso e podemos voltar ao tópico no futuro.

Nosso código agora é usando Java 8 e Netbeans 8.  Veja o código no github.

Introdução ao FXML: Criando interfaces em JavaFX usando XML e o Scene Builder

Veja aqui um CRUD com JavaFX

Até agora nossas postagem utilizaram código Java na criação das interfaces gráficas(GUI). O uso de Java  pode parecer atrativo a primeira vista, no entanto, o código pode se tornar complexo e de díficil manutenção, mas não é só em Java que podemos criar as telas.
O uso de XML é possível no JavaFX para que possamos criar a GUI de uma aplicação e então referenciar o mesmo no código JavaFX. Os XMLs que contém componentes JavaFX são chamados de FXML.

O modo Java de se fazer interfaces

Digamos que temos uma aplicação que contém um campo de texto, um botão e um campo de texto de leitura com uma saudação ao nome entrado. O código de interface para esse simples programa ficaria como segue:

public class DigaOlaComJava extends Application {

 public static void main(String[] args) {
  launch();
 }

 @Override
 public void start(Stage palco) throws Exception {
  final Reflection r = new Reflection();
  final VBox raiz = new VBox(30);
  final HBox hbTopo = new HBox(5);  
  final TextField txtNome = new TextField();
  final Button btnAcao = new Button("Enviar");
  final Label lblMensagem = new Label();
  raiz.setTranslateX(10);raiz.setTranslateY(10);
  lblMensagem.setText("Digite seu nome e clique no botão");
  hbTopo.getChildren().addAll(txtNome, btnAcao);  
  raiz.getChildren().addAll(hbTopo, lblMensagem);
  lblMensagem.setEffect(r);
  Scene cena = new Scene(raiz, 250, 100);
  palco.setTitle("Aplicação usando código Java");
  palco.setScene(cena);
  palco.show();

  btnAcao.setOnAction(new EventHandler() {
   @Override
   public void handle(ActionEvent arg0) {
    lblMensagem.setText("Olá, " + txtNome.getText()
      + ", bem vindo!");
   }
  });
 }
}

Essa é uma aplicação simples, temos poucos componentes e um leiaute muito fácil de se montar. Mas e quando temos aplicações cheia de controles e leiaute complexo?

Usando FXML 

Utilizar XML em interface gráfica não é uma novidade. O Pivot, um framework Java para criação de aplicações desktop, e o Adobe Flex também utilizam esse conceito. A grande vantagem do uso dessa linguagem declarativa está na possibilidade de usar uma ferramenta para a geração da interface e a possibilidade de modificar o XML sem ter que recompilar a aplicação inteira.

O JavaFX traz suporte ao FXML, uma forma de declarar todos os elementos de interface sem escrever uma linha de código de Java. Veja como o programa que demonstramos anteriormente ficaria com FXML(código no github):

Claro que o FXML também pode ser complexo e gigante, já falamos mais sobre isso. No código Java acima é fácil adicionar ações ao botão e manipular os elementos da interface. Mas como fazer com FXML?

O controller de um FXML

A lógica e o tratamento de eventos em uma aplicação JavaFX que usa FXML fica em uma classe que referênciamos no próprio FXML, essa classe é chamada de controller. Nessa classe podemos referenciar os elementos declarados no FXML para manipulação deles, látambém declaramos o método que irá tratar os eventos. Veja como fica o FXML completo e pronto para uso com o nosso controller

O código do controller ControleAplicacao está mais abaixo e ele tem declarado campos correspondentes ao nosso TextField e Label. Notem que usamos a anotação @FXML no campo, é ela que informa o nome do mesmo e o JavaFX injeta o campo declarado lá no XML para nosso uso aqui! Veja o método atualizaMensagem também, é ele que é invocado quando clicamos no botão.

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class ControleAplicacao {

 @FXML
 Label lblMensagem;

 @FXML
 TextField txtNome;

 public void atualizaMensagem() {
  lblMensagem.setText("Olá, " + txtNome.getText() + ", bem vindo!");
 }
}

Executando sua aplicação com FXML

Nesse momento, nossa aplicação está funcionando. Só precisamos carregar o FXML e isso é feito através da classe FXMLLoader, que lê o nosso arquivo .fxml e retorna um objeto do tipo Parent. Com ele é possível configurar a raiz da cena da aplicação, veja:

public class DigaOlaComFXML extends Application {

 public static void main(String[] args) {
  launch(); 
 }

 @Override
 public void start(Stage palco) throws Exception {
  URL arquivoFXML = getClass().getResource(
    "./ola-mundo.fxml");
  Parent fxmlParent = (Parent) FXMLLoader.load(arquivoFXML);
  palco.setScene(new Scene(fxmlParent, 300, 100));
  palco.setTitle("Olá mundo com FXML");
  palco.show();
 }
}

Criando interfaces visualmente com o Scene Builder

Falamos que com Java o projeto poderia ficar muito complexo, mas você pode perceber que o XML não é lá aquelas facilidades... Felizmente temos uma ferramenta onde podemos arrastar e soltar componentes para desenhar nossa tela. Em seguida, exportamos um arquivo .fxml para uso em nossa aplicação JavaFX! Veja uma imagem da ferramenta. (mais imagens e informações nesse blog)

Em uma postagem futura iremos trazer mais detalhes com relação ao uso do Scene Builder. O download pode ser feito no site da Oracle.O Scenebuilder deve ser baixado no site da empresa Gluon.

Vídeo

Abaixo um vídeo demonstrando o que falamos nesse breve artigo.

Conclusão

Criar interfaces com  FXML traz agilidade e facilidade na criação de aplicações em JavaFX, além de forçar o usuário a separar bem sua lógica da construção da GUI.

 O código da aplicação está no Github!

Controles Básicos de Interface III

Na terceira parte de nossa série sobre os controles do JavaFX, vamos falar das caixas de combinação, ComboBox, e caixas de escolhas, ChoiceBox. Ambas permitem você escolher um valor entre um conjunto de opções. Além do que mostrar como usar o controle, vamos ainda explorar os eventos que ele oferece,criando uma aplicação um pouco mais interessante do que algo inútil

Muitas opções, uma possível escolha

Os dois controles que vamos apresentar hoje funcionam de maneira muito semelhante, a maior diferença está na forma visual que elas são apresentadas dentro da sua aplicação. Ambas permitem que você faça a escolha de uma só opção entre diversas outras. no entanto, há uma pequena diferença visual entre elas e o ComboBox permite que você fabrique as células que serão mostradas. Criar fábrica de células é um assunto que facilmente ocuparia uma postagem inteira, você pode ver mais sobre isso aqui.
Para tratar dos dados individualmente da parte visual, usamos em ambas classes o conceito de SelectionModel, onde abstraimos a parte de seleção de dados. Temos duas abstrações: MultipleSelectionModel(permite selecionar vários itens ao mesmo tempo) e SingleSelectionModel(permite selecionar um único item ao mesmo tempo.
Hoje também vamos falar de um conceito novo e específico do JavaFX, então vamos nos limitar a mostrar o ComboBox e uma aplicação super simples, no entanto, o leitor deve pode acessar a documentação do ChoiceBox e criar a mesma aplicação usando ele. Enfim, vamos ao código!

Selecione a cor

Para demostrar o ComboBox, criamos uma aplicação bem simples que permite que você selecione a cor da cena e de um retângulo através do uso desse controle de interface. Ao selecionar a cor, a mudança já é imediata. Como fazemos isso? Confira o código e em seguida tenha acesso

package main;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Main extends Application {

 String cores[] = { "Blue", "Black", "Red", "White", "Green", "Yellow",
   "Gray", "Pink", "Salmon" };

 public static void main(String[] args) {

  launch();
 }

 @Override
 public void start(Stage palco) throws Exception {
  StackPane raiz = new StackPane();

  HBox opcoes = new HBox(10);
  opcoes.setAlignment(Pos.CENTER);

  final Rectangle retangulo = new Rectangle(300, 100);

  ComboBox cbCorCena = new ComboBox<>(); // 1
  ComboBox cbCorRetangulo = new ComboBox<>();

  cbCorCena.getItems().addAll(cores); // 2
  cbCorRetangulo.getItems().addAll(cores);

  opcoes.getChildren().addAll(cbCorCena, cbCorRetangulo);

  raiz.getChildren().addAll(retangulo, opcoes);

  final Scene cena = new Scene(raiz, 450, 250);
  palco.setTitle("Uso de ComboBox");
  palco.setScene(cena);
  palco.show();
  // 3
  cbCorCena.getSelectionModel().selectedItemProperty()
    .addListener(new ChangeListener() {
     @Override
     public void changed(
       ObservableValue valorObservado,
       String valorAntigo, String valorNovo) {
      cena.setFill(Color.valueOf(valorNovo));
     }

    });
  cbCorRetangulo.getSelectionModel().selectedItemProperty()
    .addListener(new ChangeListener() {
     @Override
     public void changed(
       ObservableValue valorObservado,
       String valorAntigo, String valorNovo) {
      // 4
      retangulo.setFill(Color.valueOf(valorNovo));
     }

    });
  cbCorCena.getSelectionModel().select(0); // 5
  cbCorRetangulo.getSelectionModel().select(1);
 }
}

1. Começamos instanciando uma ComboBox. Perceba que ela faz uso de genéricos, onde informamos que tipo de dado serão os itens contidos nela, no nossa caso, String;
2. Nessa linha adicionamos os itens. Isso é feito de forma semelhante com a qual adicionamos itens a um componente pai como o Grupo, VBox, HBox, entre outros. Nesse caso estamos adicionando uma lista de Strings, pois esse é o tipo aceitado por essa combobox;
3. Para observar quando o usuário escolhe algum valor no Combox, adicionamos um ouvinte ao valor observável a propriedade do item selecionado. Isso pode parecer bastante estranho, mas em breve você vai se acostumar. JavaFX traz uma API com atributos diferentes, onde nós podemos observar as modificações feitas nesses atributos e tomar alguma ação. Novamente isso é feito através de Listeners, no nosso caso usamos um listener de mudança, o ChangeListener. Note que o uso dele é bastante semelhante ao uso dos listeners de botões. Em resumo, nós estamos observando o valor selecionado do combox através de um listener, quando ele muda, nós trocamos a cor de fundo da cena;
4. A classe Color do JavaFX é bastante interessante e contém muito mais do que um aglomerado de constantes para definir cores. É possível também converter o valor de texto de uma cor para um objeto Color. É isso o que fazermos aqui;
5. Por fim nós usamos o método select do modelo de seleção para escolher uma cor. Esse método equivale a ação de um usuário ao escolher uma cor na combobox usando a sua aplicação, ou seja, isso também vai disparar o ouvinte de mudança que falamos na explicação 3.

Por fim, essa é a aplicação resultante:

Conclusão

Hoje nós mostramos o combobox e também apresentamos um conceito muito importante do JavaFX que são as "Properties". Você já deve ter percebido que há muito coisa a ser esclarecida e faremos isso aos poucos. 

Já está chegando o dia da nossa primeira aplicação do "mundo real", vamos apresentar mais alguns conceitos e em breve poderemos começar a criar coisas mais interessantes com JavaFX.

• Baixar projeto do Eclipse

Controles Básicos de Interface II

Vamos para mais um post e nesse vamos falar sobre mais alguns controles de interface, especificamente sobre botões agrupados, mas que permitem a seleção individual, e também sobre a caixa de checagem, que representam um valor booleano (sim ou não, verdadeiro ou falso).

Várias possibilidades, uma escolha

Os botões de rádio, RadioButton, ou os botões alternados, ToggleButton, permitem apresentar um grupo de botão no qual é permitido selecionar somente um. Esse controle de não deixar dois botões serem selecionados é feito atráves de um grupo de botões, ToggleGroup, que recebe os mesmos e então controla o comportamento deles. 

O uso desse tipo de botão é feito em diversos casos onde você tem escolhar bem pré-definidas, por exemplo: campos para escolha de sexo, alternativas de questões multivaloradas com uma resposta válida, entre outros.

Três estados, um controle

O segundo controle de interface que vamos mostrar hoje é simples e bastante utilizado em formulários para pedido de informações de usuários quando temos uma questão direta (exemplo: "Você Fuma?"). Estamos falando da caixa de checagem, CheckBox, que na verdade tem três estados: selecionado, não selecionado e indeterminado(você pode escolher se quer habilitar esse estado ou não). 

Pode parecer estranho, mas um problema que podemos ter é pedir a entrada de um usuário e o mesmo sequer ligar para esse campo, daí ele larga o campo em branco, logo, como você vai fazer para saber se ele não responde ou não marcou de propósito? 

A hora mais feliz

Vamos agora colocar esses botões em uma tela JavaFX e  mostrar algumas classes novas para posicionar os componentes. Vamos avançar um pouco o level, já são 5 tutoriais só com aplicações simples, temos que colocar um pouco mais de emoção e daqui a pouco já estaremos trabalhando com aplicações grandes com JavaFX. Enfim, como já está se tornando algo clássico do presente blog, vamos ao código e em seguida explicações dos pontos mais interessantes ou novos.

O programa abaixo representa um programa de uma pesquisa simples sobre programação. Com ele vamos mostrar o que discutimos nesse post e algumas coisas novas.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Principal extends Application {

 public static void main(String[] args) {
  launch();
 }

 @Override
 public void start(Stage palco) throws Exception {
  VBox raiz = new VBox(10);
  raiz.setTranslateX(10);
  raiz.setTranslateY(20);

  Label lblTitulo = new Label("Pesquisa sobre Programação");
  lblTitulo.setUnderline(true); // 1

  final TextField txtNome = new TextField();
  HBox hbNome = new HBox(10); // 2
  hbNome.getChildren().addAll(new Label("Nome"), txtNome);

  HBox hbSo = new HBox(20);
  ToggleButton tbLinux = new ToggleButton("Linux"); // 3
  tbLinux.setSelected(true);
  ToggleButton tbWindows = new ToggleButton("Windows");
  ToggleButton tbMac = new ToggleButton("Mac");
  final ToggleGroup tgSo = new ToggleGroup(); // 4
  tgSo.getToggles().addAll(tbLinux, tbWindows, tbMac); // 5
  hbSo.getChildren().addAll(new Label("Sistema Operacional utilizado"),
    tbLinux, tbWindows, tbMac);

  final ToggleGroup tgLinguagem = new ToggleGroup();
  HBox hbLinguagens = new HBox(20);
  RadioButton rbJava = new RadioButton("Java"); // 6
  rbJava.setSelected(true);
  RadioButton rbC = new RadioButton("C");
  RadioButton rbPython = new RadioButton("Python");
  tgLinguagem.getToggles().addAll(rbJava, rbC, rbPython);
  hbLinguagens.getChildren().addAll(
    new Label("Linguagem de programação Predileta:"), rbJava, rbC,
    rbPython);

  final CheckBox chkFrequencia = new CheckBox("Programa todo dia?"); // 7
  final CheckBox chkGosto = new CheckBox("Gosta de programação?");
  chkGosto.setAllowIndeterminate(true); // 8
  chkGosto.setIndeterminate(true);

  Button btnSubmeter = new Button("Submeter pequisa");
  btnSubmeter.setOnAction(new EventHandler() {

   @Override
   public void handle(ActionEvent evt) {

    System.out.println("\t\tResultado da pesquisa para \""
      + txtNome.getText() + "\"\n");
    // Podemos não ter um SO selecionado
    ToggleButton tbSo = (ToggleButton) tgSo.getSelectedToggle(); // 9
    System.out.print("Sistema Operacional predileto: ");
    System.out.println(tbSo == null ? "Não selecionado." : tbSo
      .getText());

    // Deve ter uma linguagem selecionada
    RadioButton rbLinguagem = (RadioButton) tgLinguagem
      .getSelectedToggle();
    System.out.println("Linguagem de programação: "
      + rbLinguagem.getText());
    // 10
    System.out.println((chkFrequencia.isSelected() == true ? "P"
      : "Não p") + "rograma todo dia.");

    System.out.print("Gosta de programação: ");
    if (chkGosto.isSelected()) {
     System.out.println("Sim.");
     // 11
    } else if (chkGosto.isIndeterminate()) {
     System.out.println("Não respondido.");
    } else {
     System.out.println("Não.");
    }
    System.out.println("\n\n");
   }
  });

  raiz.getChildren().addAll(lblTitulo, hbNome, hbSo, hbLinguagens,
    chkFrequencia, chkGosto, btnSubmeter);

  Scene cena = new Scene(raiz, 450, 250);
  palco.setTitle("Tratando eventos");
  palco.setScene(cena);
  palco.show();
 }
}

1. Já começamos mostrando uma propriedade do Label. Se você chamar esse método e enviar true, ele será sublinhado;
2. Esse componente é novo, mas o primo dele, VBox, funciona de forma muito semelhante. As propriedades são exatamente as mesmas, a diferença é que a HBox os componentes são organizados horizontalmente;
3. Nessa linha estamos criando o tão falado botão alternado. Vamos usar três. Daqui a pouco teremos que adicionar ele a um grupo junto com outros botões alternados, assim somente um poderá ser escolhido nesse grupo, mas há a possibilidade de não escolher nenhum. Perceba que estamos informando no construtor o texto que ele irá mostrar;
4. O grupo que falamos no passo anterior é representado pela classe ToggleGroup. Ele agrupo objetos do tipo Toggle, que é a classe pai do ToggleButton e do RadioButton;
5. Nessa linha simplesmente adicionamos os botões já declarados para o grupo, dizendo que eles não podem ser selecionados simultaneamente;
6. Semelhante ao ToggleBox, temos o RadioButton. A maior diferença está na aparência e que um grupo de RadioButton não permite um botão não selecionado;
7. Aqui usamos uma caixa de checagem. A String enviada no construtor também é o texto associado a ela;
8. Dizemos que essas caixas de checagem têm três estados. Nessa linha habilitamos o terceiro estado, o estado indeterminado (quântico?);
9. Dentro do listener anônimo do botão, estamos lendo as propriedades dos controles de interface apresentados. Essa linha especificamente retorna o Toggle selecionado. Como sabemos que esse grupo contém toggles do tipo ToggleButton, já fazemos um "cast" para esse tipo. Se nada estiver selecionado, null é retornado;
10. O isSelected retorna um valor booleano para informar se essa caixa está selecionada;
11. Por fim(ufa), usamos o método isIndeterminate para sabermos se o estado dessa CheckBox é indeterminado.

Como sempre, você deve pode baixar o projeto anexado ao final do post para aprender mais e explorar esses novos componentes.

Conclusão

Mostramos mais alguns controles simples de interface, dessa vez os botões que dão ao usuário certa chance de escolha. Veja que após aprender campos de texto, botões e os organizadores de layouts que mostramos até agora, você já está apto a criar pequenas aplicações. Então, não perca tempo e nos mostre tudo o que vocês tem para oferecer.

• Botões agrupados e caixas de checagem

Sua primeira aplicação em JavaFX usando Eclipse

Para aprender como iniciar com o JavaFX 8, vejam esse artigo

Veja um CRUD completo com JavaFX 8!

Nessa primeira postagem vamos mostrar um passo a passo de como executar sua primeira aplicação usando JavaFX 2!
Vamos direto ao assunto, abaixo o que você precisa para seguir esse texto:

• Eclipse (não há preferência de versão, mas eu irei usar o Indigo para Java EE);
• Baixe o SDK do JavaFX no site da Oracle.

Ótimo! Já temos tudo o que precisamos. O próximo passo agora é abrir o Eclipse e criar um projeto do tipo Java Project(1). Nesse projeto iremos criar um pacote(2) e nele uma classe Java(3).

1. Acesse o menu
File -> New -> Java Project, dê um nome (no meu caso ola-javafx) e clique em Finish. 
2. Clique com o botão direto sobre o seu projeto e acesse o menu New -> Package, dê um nome (no meu caso main) e em seguida clique em Finish.
3. Clique com o botão direito no pacote main e acesse o menu New -> Class. Dê um nome para a classe (eu usei Main) e clique em Finish.

Agora você deve configurar a biblioteca do JavaFX(1), adicionar o JAR(2) e assim referenciar no seu projeto(3). Uma vez feito isso, todas as classes serão reconhecidas no seu código e você poderá compilar/executar sua aplicação JavaFX

1. Acesse o menu Windows -> Preferences. Na árvore no lado esquerdo, escolha Java -> Build Path -> User Libraries e clique em New... dê um nome para a biblioteca (eu usei JAVAFX) e clique em OK.
2. Clique sobre a biblioteca criada e então clique em Add JARs..., navegue até a instalação do JavaFX(no Windows, o SDK deverá ficar em C:\Program Files\Oracle\JavaFX 2.1 SDK) e procure o JAR jfxrt.jar (geralmente na pasta lib). Clique em Ok.
3. Clique com o botão direito sobre o seu projeto e acesse o menu Build Path -> Add Libraries..., vai aparecer um diálogo. Escolha User Libraries e na tela seguinte marque a recém criada biblioteca do JavaFX e clique em Finish.

Perfeito, agora é hora de código. Nesse primeiro "post" vou simplesmente colar o código aqui e explicar brevemente o mesmo. Veja abaixo o código completo da classe Main e note que temos comentários numerados. Eles marcam os pontos mais importantes do código e explicarei na lista numerada a seguir.

package main;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application { // 1

 public static void main(String[] args) {
  launch(); // 2
 }

 @Override
 public void start(Stage palco) throws Exception { // 3
  StackPane raiz = new StackPane(); // 4
  Label lblMensagem = new Label(); // 5

  lblMensagem.setText("Estou aprendendo JavaFX!"); // 6
  raiz.getChildren().add(lblMensagem); // 7

  Scene cena = new Scene(raiz, 250, 100); // 8
  palco.setTitle("Aprendendo JavaFX"); // 9
  palco.setScene(cena); // 10
  palco.show(); // 11

 }
}

1. Perceba que a classe principal herda de javafx.application.Application. Toda classe principal de JavaFX deve herdar de Application e implementar o método start;
2. No método main chamamos o método lunch para começar a nossa aplicação. Aqui não vai código JavaFX, o código vai no método start;
3. A implementação do método start, herdado da classe Application. O atributo recebido é do tipo Stage. Bruscamente falando, podemos ver o Stage (palco) como o frame, a janela da nossa aplicação, mas na verdade ele não pode ser representado sim se pensarmos nos diversos dispositivos que podem rodar(em um futuro próximo) JavaFX: Celulares, televisores, "tablets", etc;
4. Nesse ponto nós criamos um elemento chamado "pai", pois permite adicionarmos outras coisas dentro dele. No nosso caso, o StackPane permite adicionar vários elementos os quais tem seu leiaute de pilha, ou seja, eles serão empilhados um sobre o outro. No futuro falaremos mais sobre isso, mas lembre-se que tudo no JavaFX é um nó, ou seja, herda da classe Node;
5. Não há nada de mais aqui, simplesmente criamos um objeto do tipo Label, que é um controle de interface para mostrar texto. Ponto;
6. Aqui informamos o texto que o Label irá mostrar. Note que isso poderia ter sido feito pelo construtor, na criação do Label;
7. Como o StackPane é um elemento pai, ele também tem elementos filhos. Nessa linha de código, recuperamos os filhos dele(getChildren()) e adicionamos nosso Label(add(Node)), fazendo que o Label seja um filho dele;
8. É hora de aprender outro conceito do JavaFX. Nessa linha criamos uma Scene(cena). Uma cena é o contâiner principal de todos os elementos do JavaFX e na criação dela aproveitamos para informar a raiz (como o nome diz, a raiz de todos os componentes), largura e altura da cena;
9. Agora vamos voltar a mexer com nosso palco. Nessa linha informamos o título dele, no nosso caso atual, o título da janela que será mostrada;
10. O palco precisa de uma cena, simplesmente é isso que é feito nessa linha.
11. Simplesmente mostrando o palco! Se esse método não for chamado, nada irá acontecer quando executar esse código.

Ufa, agora a melhor parte: executar e ver o resultado! Execute[1] o código e deverá ver uma janela como abaixo.

1. Com a classe Main aberta, simplesmente segure Ctrl e aperte F11.

Conforme pode ver, não é muito difícil usar JavaFX. Ok, pode parecer, mas mais umas 5 aplicações e você já ficará fera nessa nova biblioteca gráfica da plataforma Java. Vou tentar manter um post por semana e esse mesmo estilo de tutorial, espero ter agradado vocês!

• Baixar projeto do Eclipse