31 de jul. de 2014

Estruturas de Árvore com TreeView

Um dos maiores usos de aplicações gráficas é para criação de aplicações onde o usuário interage através de controles. Já abordamos muitos controles aqui no blog:


Hoje iremos apresentar os controle TreeView!

TreeView

TreeView é classe que usamos para visualizar dados em formatos de árvore ou com uma estrutura hierárquica(como uma estrutura de diretórios). Formado por células, podemos usar uma estrutura hierarquica onde uma célula pode ter outras células filhas. Veja:

A classe do TreeView está no pacote javafx.scene.control.

Usando o TreeView

A classe TreeView, como muitos espertinhos já devem ter adivinhado, herda de Node, ou seja, podemos aplicar efeitos, rotacionar, etc... Veja uma a mesma árvore mostrada acima rotacionada e com um efeito de "Blur"

O elemento principal que se relaciona com o TreeView é o TreeItem, que representa os itens da árvore.  Agora note algo interessante: um Item pode ter como filhinho vários outros items, assim criamos a estrutura de árvore. Ou seja, temos um item raiz e ele pode ter filhinhos, e os filhinhos, mais filhinhos, e assim vai... Na TreeView, só informamos o nó raiz. Enfim, veja o código que gerou a árvore acima:

// a nossa árvore
TreeView arvore = new TreeView<>();
// Esse é o item raiz da nossa árvore. Embaixo dele temos que colocar
// mais itens
TreeItem raiz = new TreeItem("Raiz");
// Os itens podem ser aninhados, abaixo criamos dois items filhos no
// nível 1 e para cada um desses, três filhotes no nível 2
for (int i = 0; i < 2; i++) {
 TreeItem lvl1 = new TreeItem("LVL1 " + i);
 for (int j = 0; j < 3; j++) {
  lvl1.getChildren().add(new TreeItem("LVL2 " + j));
 }
 raiz.getChildren().add(lvl1);
}
// você pode expandir para por padrão mostrar os filhos de um item.
// Vamos fazer isso com a nossa raiz
raiz.setExpanded(true);
// agora setamos a raiz da nossa árvore
arvore.setRoot(raiz);

Conclusão

Apresentamos mais um controle do JavaFX. O código pode ser visto no nosso github e usamos Java 8!

18 de jul. de 2014

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 (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.