Tratamento de Evento Simples e o Botão

Vamos continuar falando de controles de interface e esse artigo será dedicado a somente um componente: o Botão. O motivo disso é que para falar de botão iremos falar de tratamento de evento, logo, precisaremos focar nisso, pois esse conhecimento é muito utilizado em qualquer aplicação.

Tratamento de evento

Tratar evento é determinar qual código será executado de acordo com uma ação do usuário. O usuário interage com sua aplicação através da interface, e dela ele faz diversas coisas: passa o cursor do mouse sobre um componente, arrasta coisas, clica, move o cursor para dentro ou para fora de um componente, entre outros. Qualquer componente é passível de sobre ações desse tipo por parte do usuário, logo, na classe Node podemos tratar qualquer um desses eventos. No post de hoje, no entanto, não iremos falar de todos eles, mas só de um que é o evento de ação. Quando o usuário clica em um botão, ele dispara esse evento, hoje iremos apresentar o botão, fazer um programa simples com ele e explicar como tratar o clique em um botão. Futuramente iremos falar mais sobre como tratar cada um desses outros eventos quando entrarmos em detalhes na classe Node.

Botões e Ouvintes

Botões estão em todos os lugares, com certeza você deve ter clicado em algum botão hoje :). No JavaFX, um botão pode ser usado através da classe Button. No entanto, simplesmente adicionar um botão na cena não ajuda em muita coisa, você deve informar para ele o que deve ser feito assim que um usuário clicar no mesmo. Isso é feito através de ouvintes de evento, que são classes que implementam uma determinada interface.
No caso de botão, temos o atributo onAction que é do tipo da interface EventHandler. Essa interface exige que você implemente o método handle, pois é esse método que será chamado quando você clicar no botão. Em resumo, você deve criar uma classe que implementa essa interface e informar ao botão uma instância dessa classe para que o botão chame o método quando o usuário do seu programa clicar nele! Indo um pouco mais a fundo, note que também essa interface usa genéricos para determinar o tipo de atributo que o método deverá receber, no nosso caso, o botão chama o método e envia um instância de ActionEvent, classe que contém diversas informações sobre o evento ocorrido.
Nossa, muita informação! Mas isso ficará melhor nas próximas linhas, pois mostremos exemplos de código e tudo ficará mais claro.

Clique em mim!

Vamos começar mostrando um exemplo do clássico clique em mim para assim demonstrar o tratamento mais simples possível de evento. A nossa classe ouvinte, ou tratadora de evento se encontra abaixo e em seguida uma breve explicação do código.

import javafx.event.ActionEvent;
import javafx.event.EventHandler;

public class TratadorEvento implements EventHandler { // 1


 @Override
 public void handle(ActionEvent evento) { // 2
  System.out.println("Evento tratado por uma classe externa");
 }

}

1. Conforme já falamos, a classe destinada a tratar eventos deve implementar a Interface EventHandler. Nesse caso também fica claro o uso de Genéricos, onde devemos informar um tipo de classe que herda de Event, no caso informamos o ActionEvent, pois é o que o botão requer;
2. Esse é o método que será chamado quando clicarmos no botão.O parâmetro evento será enviado pelo gerador do evento, no caso o botão, e deles poderíamos saber tudo de quem gerou o evento.

Mas de quem esse tratador de evento trata eventos? O próximo passo é informar para um botão qual será o seu tratador de evento. Veja abaixo que uso duas linhas para isso e basicamente criamos um botão e informamos quem será o tratador de evento através do método setOnAction.

Ótimo, já sabemos tratar eventos, mas e se você não quiser criar uma classe para toda vez que quiser tratar um clique? Você pode utilizar um classe anônima. Outra possibilidade é usa a própria classe atual para ser quem irá tomar alguma ação ao clique do usuário.
Para ilustrar tudo isso, criamos uma simples aplicação com três botões e as três formas de se registar um tratador de evento. O código abaixo mostra essa aplicação e também explica diretamente no comentário!

package main;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

//Se quisermos que essa classe trate evento, ela deve herdar de EventHandler
public class Principal extends Application implements EventHandler {

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

 @Override
 public void start(Stage palco) throws Exception {
  VBox raiz = new VBox(20);
  raiz.setAlignment(Pos.CENTER);
  raiz.setTranslateY(5);

  Button botao1 = new Button("Clique em mim! (Tratador externo)");
  Button botao2 = new Button("Clique em mim! (Class Anônima)");
  Button botao3 = new Button("Clique em mim! (Própria classe)");

  // usamos a classe TratadorEvento para cuidar dos eventos
  botao1.setOnAction(new TratadorEvento());
  // Criando uma instância de uma classe anônima para tratar evento
  botao2.setOnAction(new EventHandler() {

   @Override
   public void handle(ActionEvent evento) {
    System.out.println("Evento tratado por uma classe anônima!");
   }
  });
  // o botão 3 usa essa própria classe para tratar seus eventos
  botao3.setOnAction(this);

  raiz.getChildren().addAll(botao1, botao2, botao3);

  Scene cena = new Scene(raiz, 300, 200);
  palco.setTitle("Tratando eventos");
  palco.setScene(cena);
  palco.show();

 }

 @Override
 public void handle(ActionEvent evento) {
  System.out.println("Evento tratado na próxima classe!");
 }
}

A aplicação final bem como o que será impresso no console é mostrado na imagem abaixo

Conclusão

Mostramos como tratar eventos de um botão com JavaFX. Esse post foi meio parado e chato, mas isso foi necessário. Em breve mostraremos outros elementos de interface e iremos querer dar mais vida aos nossos programas. Isso só pode ser feito tratando eventos :). Como sempre, segue abaixo o projeto do Eclipe caso você queira baixar e explorar mais.

• Tratanto Evento do Botão

Controles Básicos de Interface I

Fazendo jus ao seu principal objetivo, JavaFX oferece muitos controles de interface entre simples rótulos para mostrar texto até complexas tabelas com milhares de registros. Nesse artigo vamos mostrar os controles mais básicos de interface que JavaFX oferece.

Controles de interface

Todos os controles que o JavaFX oferece herdam da classe Control. Como alguns já devem ter deduzido, Control vai herdar em algum momento de Node, mas nesse caso ele antes herda de Parent.

• 
  

• java.lang.Object
• • javafx.scene.Node
  • • javafx.scene.Parent
    • • javafx.scene.control.Control

Logos todos os controles usufruem com atributos como height, maxHeight, width, minWidth, entre outros.  O destaque fica para o tooltip, onde você pode informar um texto informativo para o controle quando o usuário deixa o cursor do mouse em cima dele por alguns segundos.

Tooltip em ação

Os controles são muito fáceis de lidar, no entanto, muitos tem suas características especifícas, o que leva a abordargem complicada para somente um post, então iremos separar a abordagem dos controles em vários posts.

Rótulos, campos de texto,  separadores e controles deslizantes

Hoje serão apresentados os controles mais simples possíveis, deixando para artigos futuros outros controles que exigem tratamento de evento ou maior conhecimento prévio. Hoje vamos mostrar rótulos, campos de texto, separados e controles deslizantes.  Não vamos perder mais tempo e vamos para o código!

package main;

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.control.Slider;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ControlesSimples extends Application {

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

 @Override
 public void start(Stage palco) throws Exception {
  VBox raiz = new VBox(10); // 1
  raiz.setAlignment(Pos.CENTER); // 2

  Label rotuloDemo = new Label("Sou um rótulo de texto!"); // 3
  rotuloDemo.setTooltip(new Tooltip(
    "Esse é um rótulo para mostrar textos de forma simples")); // 4

  TextField campoTexto = new TextField("Digite algo"); // 5
  campoTexto.setTooltip(new Tooltip(
    "Campo de texto para entrada de uma só linha "));

  TextArea areaTexto = new TextArea("Digite algo com várias linhas"); // 6
  areaTexto.setTooltip(new Tooltip(
    "Campo de texto para entrada de múltiplas linhas"));

  Separator separadorHorizontal = new Separator(); // 7
  Separator separadorVertical = new Separator(Orientation.VERTICAL); // 8
  Slider deslizante = new Slider(); // 9
  deslizante.setShowTickLabels(true); // 10
  deslizante.setShowTickMarks(true); // 11
  deslizante
    .setTooltip(new Tooltip(
      "O controle deslizante tem um valor numérico de acordo com sua posição"));

  raiz.getChildren().addAll(rotuloDemo, campoTexto, areaTexto,
    separadorVertical, separadorHorizontal, deslizante);

  Scene cena = new Scene(raiz, 300, 400);
  palco.setTitle("Controles Básicos I");
  palco.setScene(cena);
  palco.show();
 }
}

1. Nessa linha introduzimos um novo componente pai, ou seja, um componente que podemos colocar outros dentro dele. Nesse caso a VBox, que irá organizar os componentes verticalmente. O construtor informa o espaçamento entre os componentes, no nosso caso 10;
2. Você também pode determinar qual o posicionamento dos componentes dentro da VBox. Você usa o enum Pos para informar qual posicionamento quer. Nessa linha, informamos o posicionamento CENTER, logo todos os componentes serão posicionados no centro da nossa VBox;
3. Esse é nosso primeiro controle de interface apresentado um Label, ou o rótulo. Esse componente nada mais é do que um texto estático, semelhante ao Text, mas herda de Control, o que significa que ele é um controle de interface, no entanto, o usuário não muda o texto do Label diretamente. Como você já deve ter deduzido, o Label é um Node, assim como todos os controles e assim como e qualquer componente dentro da Cena do JavaFX. Pense quão poderoso esse detalhe arquitetural é!
4. Os controles tem algumas características em comum e uma delas é a possibilidade de informar um Tooltip, que nada mais é um texto demostrativo informado quando mantemos o mouse sobre o componente;
5. Nessa linha criamos um campo de texto, o TextField. Esse campo, ao contrário do Label, permite a modificação do usuário diretamente. Futuramente você pode recuperar esse texto através do método getText();
6. Semelhante ao campo de texto, temos o uma área de texto. Não há muita diferença entre essas duas classes, na verdade a maior diferença é que o TextArea permite a entrada de várias linhas e também contém propriedades para trabalhar com essa característica. Detalhe que a TextArea e o TextField, ambos herdam de TextInputControl;
7. Nessa linha mostramos um separador horizontal. Ele é sem graça assim mesmo, só serve para separar as coisas. No entanto, lembre-se que ele é um... Node e também um controle;
8. Aqui também criamos um separador, mas esse fica na vertical conforme informado pelo Enum Orientation;
9. O controle deslizando, ou Slider, permite você escolher um valor numérico dentro de uma faixa determinada. De acordo com a posição do controle, você terá um valor numérico que pode ser recuperado depois através do método getValue().
10. Se você quiser que o controle deslizante mostre marcas para indicação relativa de qual valor o Slider tem no momento, você deve chamar o método setShowTickLabels que vai configurar se devem aparecer essas marcas, ou não (true, false);
11. Na linha anterior, mostramos como colocar marcas, nessa linha chamamos o método setShowTickMarks e informamos que queremos ver números que indicam o valor do controle deslizante.

Finalmente, olhe como ficou nossa aplicação:

Conclusão

Hoje nós introduzimos os controles mais básicos do JavaFX, mas não fizemos nada de interessante por que ainda não falamos de tratamento de ações do usuário na sua aplicação. Fique ligado que o próximo post será dedicado ao botão (classe Button) e nele você irá começar a dar vida as suas aplicações JavaFX.

Bem, não preciso repetir que agora entra sua vez para você explorar esse componentes lendo a documentação, e, como ponto de partida, você pode usar o projeto Eclipse abaixo. Até a próxima!

• Controles Simples I

Imagens e Formas Geométricas

Esse é o terceiro artigo desse blog de menos de uma semana de existência e já temos 500 visitas! 

Hoje iremos falar de como mostrar imagens e figuras geométricas em sua aplicação JavaFX. O artigo será um pouco mais complexo, no entanto, nada que umas três lidas não ajude. Com certeza o leitor já deve ter explorado os outros dois posts anteriores e ido muito além do mostrado. A idéia desse blog é exatamente essa: dar ao leitor uma base e ele se divertir pelas páginas da Javadoc do JavaFX, pois essa é a melhor forma de aprender, se divertindo! Então chega de papo e vamos ao que interessa.

Mostrando Imagens

Mais uma vez devo repetir que fazer as coisas em JavaFX é muito simples, principalmente mostrar imagem. Para quem veio do Swing, sabe que até isso era difícil como podermos ver nesse post do site da DevMedia. Por outro lado, no moderno JavaFX necessitamos, mais uma vez, seguir dois simples passos:

• Carregar a imagem. Para isso usamos a classe Image. Perceba que essa classe é uma representação alto nível de uma imagem, sendo que a mesma pode vir de um InputStream, um arquivo do seu computador e até mesmo uma URL da internet, sem você se preocupar com qualquer outra coisa;
• Mostrar a imagem. Visualizamos a imagem através da classe ImageView. Repetimos o mesmo discurso para dizer que ImageView é um Node e é ele que adicionamos à nossa aplicação, aplicamos efeitos, animações etc (calma, iremos mostrar tudo em posts futuros).

Após saber disso, você entenderá perfeitamente que com três linhas de código podemos ter uma imagem em uma aplicação JavaFX. Mas código só daqui a pouco :)

Forma Geométricas

Todas as formas geométricas do JavaFX, adivinhe, também são Nodes e podem sofrer efeitos, transformações e animações, além de ter diversas propriedades em comum. Você pode ver as figuras geométricas oferecidas pelo JavaFX no pacote javafx.scene.shape. Todas as figuras geométricas herdam de Shape (que por sua vez herda de... Node), portanto temos propriedades comuns só para as figuras geométricas, entre as quais destacamos:

• fill: O preenchimento da figura geométrica. Esse é um parâmetro do tipo Paint, que representa ou uma cor simples(exato: azul, verde, rosa...) ou um gradiente complexo;
• stroke: Também do tipo Paint, mas se aplica a linha que envolve a forma geométrica;
• strokeWidth: A largura da "stroke".

Hora de Código

Ufa, hora de se divertir. No código atual iremos mostrar a carga de uma imagem e algumas figuras geométricas, ficando a seu cargo baixar o projeto anexado e fazer algo mais elaborado e divertido. Se formos explorar todas as propriedades de cada forma geométrica, estaríamos sendo redundantes, verbosos e chatos e programação se aprende com ação e não exposição :). 

Lembre-se: se você se sentir perdido, leia os posts anteriores para maiores informações. Abaixo o código e em seguida a explicação dos pontos mais interessantes:

package main;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;


public class GraficosImagens extends Application {

 private final String IMG_URL = "http://www.oracle.com/ocom/groups/public/@otn/documents/digitalasset/402460.gif";

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

 @Override
 public void start(Stage palco) throws Exception {
  Image imagem = new Image(IMG_URL); // 1
  ImageView visualizadorImagem = new ImageView(imagem); // 2
  visualizadorImagem.setTranslateX(80); // 3
  visualizadorImagem.setTranslateY(5); // 4

  Text textoInformativo = new Text(
    "Algumas figuras Geométricas desenhadas com JavaFX");
  textoInformativo.setTranslateX(30);
  textoInformativo.setTranslateY(70);

  Rectangle retangulo = new Rectangle(100, 40); // 5
  retangulo.setTranslateX(5);
  retangulo.setTranslateY(90);
  retangulo.setFill(Color.GREEN); // 6

  Circle circulo = new Circle(30);
  circulo.setTranslateX(160);
  circulo.setTranslateY(110);
  circulo.setFill(Color.YELLOW);

  Circle circuloBranco = new Circle(30);
  circuloBranco.setTranslateX(240);
  circuloBranco.setTranslateY(110);
  circuloBranco.setStroke(Color.BLACK); // 7
  circuloBranco.setStrokeWidth(3.0); // 8
  circuloBranco.setFill(Color.WHITE);

  Ellipse elipse = new Ellipse(30, 10);
  elipse.setTranslateX(320);
  elipse.setTranslateY(110);
  elipse.setFill(Color.BLUE);

  Group componentes = new Group(); // 9
  componentes.getChildren().addAll(visualizadorImagem, textoInformativo,
    retangulo, circulo, circuloBranco, elipse); // 10
  Scene cena = new Scene(componentes, 360, 150);
  palco.setTitle("Gráficos e Imagens em JavaFX");
  palco.setScene(cena);
  palco.show();
 }
}

1. Nessa linha carregamos nossa imagem usando uma URL da internet. Lembrando que essa não é a única maneira, podemos também usar um arquivo ou qualquer coisas que forneça um InputStream;
2. Agora criamos o nó da imagem e informamos que imagem será mostrada no construtor;
3. Usamos uma propriedade nova nessa linha e ela nem é só do ImageView, é da classe Node! Com o translateX informamos a posição X(imagine o posicionamento como um plano cartesiano) de um componente no pai. O método set serve para configurar um valor, você já viu o uso dele em classes como o Stage;
4. Fazemos o mesmo descrito em 3, mas agora para a posição Y. ATENÇÃO: Posicionar componentes assim não é legal de ser feito em aplicações grandes, vamos mostrar em breve os gerenciadores de leiaute do JavaFX;
5. Aqui já estamos criando uma forma geométrica, um Retângulo (Rectangle). De acordo com a forma criada, teremos parâmetros que devem ser informados. No caso do retângulo, informamos a largura e a altura;
6. Mudamos a cor padrão da forma geométrica (preta) para verde. Note que aqui usamos uma constante da classe Color;
7. É informado a cor da linha que envolve essa forma geométrica, nesse caso: preta;
8. Também aumentamos a largura (ou grossura) da linha;
9. Outra novidade nesse código: a classe Group. Como o próprio nome disse, usamos ela para agrupar outros nós(classes que herdam de javafx.scene.Node). Ela é um nó de nós, ou seja, podemos aplicar efeito, animar, transformar que isso será aplicado a todos os nós;
10. Finalmente usamos um novo método dos filhos do grupo que é adicionar todos os nossos nós de uma vez. Podemos fazer isso, ou adicionar um por um.

Abaixo vejam como a aplicação ficou:

Olha, está começando a ficar interessante o negócio, hein?

Conclusão

Mostramos mais alguns componentes do JavaFX, dessa vez as classes de imagem e formas geométricas e aprendemos alguns pequenos novos métodos e classes. Vamos avançando! 

• Projeto do Eclipse

Tocando Áudio e Vídeo

Nesse artigo vamos mostrar como criar aplicações com capacidade de tocar áudio e vídeo com JavaFX. Serão mostradas duas aplicações bastante simples com o objetivo de mostrar essas características. Futuramente teremos artigos mais avançados nesse assunto.

Se você nunca fez nada com JavaFX até agora sugiro que você dê uma olhada nesse post para criar sua primeira aplicação. A partir dele você estará preparado para esse artigo.

Carregando, tocando e mostrando um vídeo

Tocar vídeo em JavaFX é tão simples que chega a assustar quem já tentou tocar um vídeo usando Java anteriormente. Nós só temos que seguir três pequenos passos:

1. Carregar. Você primeiramente deve carregar a mídia que vai tocar. A mídia pode estar no seu disco rígido como em um um servidor.
2. Tocar. A partir da mídia, você deverá controlar a mesma: tocar, parar, pausar, etc.
3. Mostrar. Nesse ponto iremos colocar o vídeo dentro de sua aplicação JavaFX.

Para realizar esses três passos temos três classes JavaFX que ficam no pacote javafx.scene.media. Para 1 nós temos a classe Media, 2 podemos fazer com a classe MediaPlayer e finalmente conseguimos o passo três com o uso da MediaView. O uso dessas classes é muito simples, abaixo temos o código de um aplicação de exemplo e em seguida um breve explicação de cada linha nova. 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;

public class TocandoVideo extends Application {

 private String VIDEO_URL = getClass().getResource(
   "/video/creativecommons.mp4").toString();

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

 @Override
 public void start(Stage palco) throws Exception {

  Media media = new Media(VIDEO_URL); // 1
  MediaPlayer mediaPlayer = new MediaPlayer(media); // 2
  MediaView mediaView = new MediaView(mediaPlayer); // 3

  StackPane raiz = new StackPane();
  raiz.getChildren().add(mediaView); // 4
  Scene cena = new Scene(raiz, 600, 400);
  palco.setTitle("Tocando Video em JavaFX");
  palco.setScene(cena);
  palco.show();

  mediaPlayer.play(); // 4
 }
}

1. Nessa linha estamos carregando o nosso vídeo. No construtor é recebido a URL do vídeo que pode ser ou um arquivo local ou um link para um vídeo publicado em algum servidor;
2. Após informar a mídia, nós temos que criar um player ("tocador") que será responsável por interagir com a midia em sí e assim poder tocar, parar, pausar (entre outras ações) o referido vídeo.
3. Nós já temos o vídeo e já sabemos como controlar ele, no entanto, temos que adicionar ele a nossa aplicação JavaFX para que o vídeo seja mostrado. 
4. O MediaView é uma classe que herda de  Node, ou seja, podemos adicionar ele a qualquer Node que herda de Parent (não se preocupe, futuramente teremos posts específicos sobre essas classes). Nessa linha nós adicionamos o vídeo ao pai.
5. Por fim tocamos o vídeo através do método play(). Há também outros métodos para controle do vídeo, sendo possível criar um player dinâmico, iremos mostrar isso no futuro também

Conforme mostrado acima, são quatro linhas para podermos tocar um vídeo em uma aplicação JavaFX. Veja abaixo o resultado:

Carregando e tocando áudio

Se tocar vídeo exige menos de 4 linhas de código, tocar áudio exige ainda menos: 2. Semelhante ao que fizemos com vídeo, o áudio deve ser carregado e então tocado. O áudio, no entanto, não dispõe de uma classe para visualização, já que essa não é necessária e temos somente uma classe necessária para a carga e execução do áudio, a classe AudioClip. Claro que você pode criar um player se achar necessário. Vejam abaixo o código de uma pequena aplicação de exemplo:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.media.AudioClip;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class TocandoAudio extends Application {

 private String AUDIO_URL = getClass().getResource(
   "/audio/top-jamendo.mp3").toString();

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

 @Override
 public void start(Stage palco) throws Exception {
  AudioClip clip = new AudioClip(AUDIO_URL);// 1
  clip.play(); // 2
  StackPane raiz = new StackPane();
  raiz.getChildren().add(new Text("Tocando Música ")); //3
  Scene cena = new Scene(raiz, 600, 100);
  palco.setTitle("Tocando Audio em JavaFX");
  palco.setScene(cena);
  palco.show();

 }
}

1. Aqui carregamos o clipe de áudio e informamos a URL do audio a ser tocado;
2. O áudio irá começar a tocar nessa linha. Semelhante ao vídeo, temos vários outros métodos que poderíamos utilizar
3. Não é relacionado ao áudio, mas essa linha adiciona um simples texto informativo, pois não temos nada visual quanto tocamos áudio

Conclusão

Tocar conteúdo multimídia usando Java nunca foi tão fácil! Obviamente mostramos aqui a forma mais simples de fazer isso, mas você pode explorar a documentação para criar aplicações mais elaboradas.

Baixe os projetos do Eclipse abaixo(em breve adicionarei os links). As mídias usadas estão dentro de cada projeto, isso deixou os projetos com alguns "megas" a mais. Usamos o vídeo de apresentação do conceito de Creative Commons e o áudio foi o top do Jamendo nesse momento: All I'll Ever Need - Sean Fournier.

• Tocando Vídeo
• Tocando Áudio

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