As janelas de dialogs do JavaFX

Uma das maiores necessidades do JavaFX foi a adição de uma biblioteca consistente para termos acesso a diálogos. Aquelas janelinhas que aparecem em uma aplicação para entrarmos alguma informação. Nessa postagem vamos falar das classes que permitem a criação de diálogos, mas que foram adicionadas recentemente. Muitos da era Swing devem se lembrar do JOptionPane.

Os diálogos do JavaFX 

Essa parte do JavaFX começam no Java 8 atualização 40. Ficam no pacote javax.scene.control e usando a classe Alert podemos criar diálogos de erro, avisos, confirmação, com mensagem de erro (stacktrace) e você ainda pode customizar e criar o seu próprio diálogo com botões que irão ter ações customizadas.

Exibindo mensagens de erro, aviso e informação

O mais simples dos diálogos permitem que você simplesmente mostra uma imagem em uma caixinha de texto. Esses diálogos aceitam a configuração de um título, um cabeçalho e a mensagem de aviso em sí. Os diálogos de informação e error são semelhantes, só temos que trocar o tipo de Alert para Error, Warning ou Information. O programa abaixo mostra como podemos usar ambos:



Percebam que as classes bases para criarmos diálogos são javafx.scene.control.Alert e javafx.scene.control.Alert.AlertType.  Vejam o resultado de cada diálogo quando clicamos neles na aplicação acima:

Pegando entradas dos usuários

Um uso mais avançado dos diálogos são para pegarmos uma resposta do usuário. Podemos colocar neles perguntas para pegar a resposta do usuário, campos de texto e caixas de escolha. Veja abaixo um programa que mostra o uso mais simples de cada um deles:




O resultado é mostrado abaixo:

Outros tipos

Essa API demorou para sair, mas quando veio, veio completa! Podemos criar tipos customizados de diálogos de acordo com as necessidades do usuário. Cabe ao leitor explorar as mais diversas alternativas, mas um bom resumão pode ser encontrado nessa postagem em inglês.

Adicionando estilo à sua aplicação com CSS

Até o momento nesse blog fizemos aplicações e deixamos a "cara" delas a padrão que vem com o JavaFX, ou seja, não nos preocupamos em mudar a aparência das da nossa aplicação. Para fazer isso no JavaFX, não precisamos escrever código Java, mas sim conhecer CSS (Cascade Style Sheet), onde podemos declarativamente configurar a aparência de nossa aplicação.

O que é e o que pode ser feito com CSS?

Com o CSS do javaFX é possível adicionar efeitos, mudar cores, dimensionar e completamente trocar a aparência da aplicação.  É possível também definir a aparência quando o mouse fica sobre o elemento.
CSS é uma linguagem declarativa onde identificamos os elementos da nossa aplicação e em seguida definimos valores para as propriedades suportadas para aquele componente.
Essa tecnologia já é utilizada em páginas WEB e para o JavaFX todas as possibilidades de uso do CSS estão descritas em um completo guia de referência.

Como referênciar os componentes do JavaFX no CSS?

Os componentes javafx podem ter várias classes CSS que referenciamos para usarmos na declaração do CSS. Assim, no código Java falamos qual a classe daquele componente e no CSS referenciamos a classe com ponto(".").  Também podemos dar um id para nosso componente e referenciar a classe dele usando cerquilha ("#"). Note que o ID deve ser único, já a classe pode ser aplicada a diversos nós.

Como carregar CSS no JavaFX?

O CSS pode ficar em um arquivo separado e ser carregado na Scene da aplicação ou podemos adicionar estilo a qualquer classe que estenda de nó (todas as classes de uma cena no JavaFX) usando o método setStyle. 

Exemplo

Criamos a seguinte aplicação de exemplo para que você possa ver o que abordamos anteriormente na prática.

Note que a aplicação está diferente. Isso é por que eu carreguei o arquivo app.css na cena:

cena.getStylesheets().add("app.css");

Esse arquivo configura o estilo raiz de toda a aplicação, veja o conteúdo:

.root{
    -fx-base: darkblue;
    -fx-background: lightblue;
}
.button {
    -fx-font-weight: bold;
    -fx-font-size: 15px;
}

.label {
    -fx-font-style: italic;
    -fx-font-size: 9px;
    -fx-text-fill: darkgreen;
}

.titulo {
    -fx-font-style: normal;
    -fx-font-weight: bolder;
    -fx-font-size: 30px;
    -fx-alignment: center;
}

Também temos contéudos para o label  lblTitulo que têm a classe titulo, que referenciamos para modificar o estilo:

No código Java:

 lblTitulo.getStyleClass().add("titulo");

No CSS:
.titulo {
    -fx-font-style: normal;
    -fx-font-weight: bolder;
    -fx-font-size: 30px;
    -fx-alignment: center;
}

Notem que alguns componentes já tem uma classe usado pelo próprio JavaFX, mas que você pode modificar como quiser. No lado esquerdo podemos adicionar o CSS que queremos e ao apertar o botão, esse CSS é aplicação no Text do lado direito. 

btnAplicar.setOnAction( event -> {
    txtAlvo.setStyle(txtCSS.getText());
});

Veja o código inteiro da nossa aplicação abaixo:

// imports omitidos
public class TesteCSS extends Application {

 String txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta erat id lectus interdum, a pharetra est luctus. Nulla interdum convallis molestie. In hac habitasse platea dictumst. Ut ullamcorper ultricies viverra. Quisque blandit libero in ante sagittis sagittis. Ut gravida nibh quis justo sodales rutrum. Fusce euismod diam diam, vitae vulputate urna placerat vel. ";
 
 public void start(Stage s) {
  // declarações
  BorderPane raiz = new BorderPane();
  HBox pnlCentro = new HBox(50);
  VBox vbEsquerda = new VBox(10);
  VBox vbDireita = new VBox(10);
  Button btnAplicar = new Button("Aplicar CSS");
  TextArea txtCSS = new TextArea();
  Text txtAlvo = new Text(txt);
  Label lblTitulo = new Label("Testando CSS");
  Scene cena = new Scene(raiz, 800, 250);

  // configurando Layout e adicionando componentes
  vbEsquerda.getChildren().addAll(new Label("Entre o CSS aqui"), txtCSS);
  vbDireita.getChildren().addAll(new Label("O texto Alvo"), txtAlvo);

  pnlCentro.getChildren().addAll(vbEsquerda, btnAplicar, vbDireita);
  pnlCentro.setAlignment(Pos.CENTER);

  raiz.setCenter(pnlCentro);
  raiz.setTop(lblTitulo);
  BorderPane.setAlignment(lblTitulo, Pos.CENTER); 

  txtCSS.setMinWidth(350);
  txtAlvo.setWrappingWidth(220);
  btnAplicar.setMinWidth(120);
  btnAplicar.setOnAction( event -> {
   txtAlvo.setStyle(txtCSS.getText());
  });
  // configuramos classes para os nossos labels especiais 
  lblTitulo.getStyleClass().add("titulo");
  // informamos o arquivo principal de CSS 
  cena.getStylesheets().add("app.css");
  s.setScene(cena);
  s.setTitle("Teste de CSS do JavaFX");
  s.show();
 }
}

Como fica se quisermos aplicar CSS:

Conclusão

Nesse artigo mostramos como é fácil mudar a aparência de nossas aplicaçõe usando JavaFX.

Código do programa

Escrevendo aplicações JavaFX 8 usando Javascript

Uma das novidades mais legais do Java 8 é a nova engine javascript chamada "Nashorn". Com ela podemos escrever aplicações inteiras que usam JavaFX com a linguagem Javascript.
Hoje vamos mostrar aplicações simples para introduzir e apresentar esse conceito. Lembre que estamos usando a mais nova versão do Java, o Java 8.

* É requerido ter feito pelo menos o "Olá mundo" do JavaFX para seguir nessa postagem

Carregando javascript a partir do Java

Através de sua aplicação, você pode colocar variáveis visíveis para o Javascript e do seu código Java chamar Javascript. O código abaixo é uma aplicação JavaFX que usa a engine para colocar o Stage principal no escopo do script Javascript e então chamamos um script do nosso sistema de arquivos com o resto do código da view:

import javafx.application.Application;
import javafx.stage.Stage;
import javax.script.*;
import java.io.FileReader;

public class CarregaJS extends Application{

        @Override
        public void start(Stage stage){
                try{
                        ScriptEngine engine = new ScriptEngineManager().getEngineByName("nashorn");
                        engine.put("stage", stage);
                        engine.eval(new FileReader("/opt/helloJavaFX.js"));
                }catch(Exception e){ 
                        e.printStackTrace();
                }   
        }   
 }

Veja o uso da classe ScriptEngineManager para carregar a engine do Nashorn. Logo, carregamos o conteúdo do arquivo em um FileReader e interpretamos o script usando o método eval, mas antes disso colocamos o objeto stage no escopo do Javascript. Veja como ficou nosso script:

var txtOla = new javafx.scene.control.Label(">> Olá Mundo! <<")
txtOla.font = new javafx.scene.text.Font(50)
stage.scene = new javafx.scene.Scene(txtOla)
stage.width = 500 
stage.title = "Olá JavaFX + Javascript"
stage.show()

Note que se você quiser alterar a view, você simplesmente pode modificar o script sem ter que recompilar o seu código Java! Resultado:

Carregando scripts usando a linha de comando

É possível usar a ferramenta jjs e escrever somente javascript. Para JavaFX especificamente, há um parâmetro que, quando usado, o Nashorn irá colocar uma variável chamada $STAGE para ser usada no seu script. Ela representa o stage principal da sua aplicação. Veja um "Olá Mundo" só com Javascript:

var txtOla = new javafx.scene.control.Label(">> Olá Mundo! <<")
txtOla.font = new javafx.scene.text.Font(50)
$STAGE.scene = new javafx.scene.Scene(txtOla)
$STAGE.width = 500 
$STAGE.title = "Olá JavaFX + Javascript"
$STAGE.show()

Para executar ele, tenha o JDK 8 instalado e no seu "path", ou navegue até o diretório $JAVA_HOME/bin/ e encontre o executável do jjs e execute o seguinte comando:

$ jjs -fx helloJavaFX.js

Esse script produz o mesmo resultado do código anterior.

Conclusão

Com Java 8 temos uma nova alternativa para escrever aplicações. Claro que o "Olá Mundo" é só o começo, mas teríamos que explorar a nova engine e sua compatibilidade com as APIs Java para construirmos grandes aplicações.
Caso você não queira escrever Java, nem Javascript, lembre-se que você poderá usar FXML e a ferramenta Scene Builder.

O código Javascript do Olá mundo está no github

Um "Olá Mundo" com JavaFX 8

Olá pessoal!

Essa é uma postagem rápida que foge do nosso cronograma habitual e meu objetivo aqui é falar das mudanças mais impactantes do JavaFX 8, que vem com o Java 8.

Java 8 vem preparado para a execução de aplicações JavaFX

Você não precisa colocar o JAR do JavaFX no classpath como fazemos para o JavaFX 2.x. Com essa nova versão, você já pode compilar e executar as aplicações sem ter que fazer nenhum tipo de configuração extra.

Lambdas vão facilitar muito tratamentos de eventos e muito mais

A maior novidade do Java 8 e a adição do Lambda. Com isso, fica muito mais fácil fazer programação funcional utilizando essa linguagem orientadas a objetos . Basicamente o que temos é uma nova forma de escrever implementações de interfaces funcionais (interfaces que só têm um método abstrato, pois no Java 8 interfaces pode ter implementação padrão). 

Claro que poderíamos criar diversos artigos só sobre isso, pois a API básica também sofre adição de um pacotes só de interfaces funcionais, o java.util.function. James Weaver resumiu aqui as mudanças, mas notem que essas mudanças não são na API, mas na forma que podemos escrever código. Segue um exemplo bem básico de tratamento de evento de botão:
Como é:

// Usando classes internas
button.setOnAction(new EventHandler() {
  @Override public void handle(ActionEvent e) {
    System.out.println("Botão clicado...");
  }
});

Com uso de Lambdas :

// Usando expressões Lambdas
button.setOnAction(e -> System.out.println("Botão clicado..."));

Mudanças na API do JavaFX 8

Esse é outro tópico que não vou me estender muito, pois a Oracle já colocou no roadmap do JavaFX o que foi adicionado nessa versão. As novidades são excitantes: novos controles, suporte "embebbed"(exemplo: raspberry pi), suporte a gráficos 3d, entre outras...

Um Olá Mundo

Essa foi uma postagem bem rápida. Gostaria de compartilhar com vocês a construção de um Olá Mundo. Simplesmente baixei a mais nova build do Java 8 e já comecei o vídeo. Até a próxima, pessoal!