Iniciando no JavaFX – Parte 2

Enquanto o post anterior foi um Hello World para o JavaFX (veja Iniciando no JavaFX ), este terá algumas dicas simples para iniciantes no JavaFX. O ambiente de desenvolvimento continua sendo o NetBeans IDE integrado ao JavaFX Scene Builder.

1. Fit to Parent

Em muitos casos, é possível usar a função “Fit to Parent“, para que um componente preencha todo o espaço disponível no Pane acima. Isso pode ajudar quando a tela for redimensionada.

jfx1 jfx2

2. fx:id

Adicione no código da classe Controller apenas os componentes que o código vai precisar. Em seguida, ao adicionar o componente na interface gráfica no Scene Builder, o fx:id criado no Controller aparecerá na lista para seleção.

jfx3jfx4

3. Edição no Hierarchy

Edite os textos dos botões e dos labels diretamente no painel Hierarchy. É mais rápido que usar os painéis da direita.

jfx5

4. Preview

Não é necessário rodar a aplicação para ver como está ficando. Veja um preview da tela diretamente do Scene Builder.

jfx7

5. Use CSS

Use CSS para customizar a aparência do aplicativo. Para criar um arquivo CSS no projeto do NetBeans, clique com o botão direito no paconte ou na pasta onde o CSS será criado, selecione “Novo > Outros” e escolha “Folha de Estilo em Cascata“.

jfx9jfx10

O meu CSS de exemplo está a seguir:

.tagarq{
 -fx-text-fill: white;
 -fx-font-size: 25px;
 -fx-font-family: sans-serif;
 -fx-font-weight: bold;
 -fx-label-padding: 25px;
 -fx-background-color: linear-gradient(to top right, lightslategrey, black);
}
.titulo, .subtitulo{
 -fx-padding: 0px 0px 0px 80px;
}
.titulo{
 -fx-font-size: 20px;
 -fx-text-fill: #345678;
 -fx-font-weight: bold;
 -fx-padding: 20px 0px 0px 80px;
}
.subtitulo{
 -fx-text-fill: #555555;
 -fx-font-style: italic;
}
.button{
 -fx-base: #345678;
 -fx-label-padding: 5px;
 -fx-border-radius: 0;
 -fx-background-radius: 0;
}
.conteudo{
 -fx-padding: 10px;
}
.descricao{
 -fx-background-image: url('pencil2.png');
 -fx-background-repeat: no-repeat;
 -fx-background-position: right bottom;
}
.tags{
 -fx-background-image: url('tag2.png');
 -fx-background-repeat: no-repeat;
 -fx-background-position: right bottom;
 -fx-background-color: transparent;
}
.tree-view{
 -fx-background-color: transparent;
}
.list-cell{
 -fx-background-color: transparent;
}
.rodape{
 -fx-background-color: linear-gradient(to bottom, white, lightgray)
}
.file{
 -fx-background-image: url('file.png');
 -fx-background-repeat: no-repeat;
}
.folder{
 -fx-background-image: url('folder.png');
 -fx-background-repeat: no-repeat;
}
.button:hover{-fx-base: #1245ab;} /* Se o mouse estiver em cima, o botão fica com uma cor mais forte */
.button:focused{-fx-base: #347856;} /* Se o botão estiver com foco, fica esverdeado */
.button:pressed{-fx-base: #783456;} /* Se o botão estiver pressionado, fica avermelhado */

Não é o CSS que conhecemos de sites da web, mas é bem parecido, pois foi baseado no CSS da W3C. Para ver mais sobre o CSS do JavaFX, confira o Guia de Referência do JavaFX.

Em seguida, no Scene Builder, adicione o CSS no menu “Preview > Scene Style Sheets > Add a Style Sheet…“.

jfx8

As classes do CSS poderão ser adicionadas aos componentes facilmente no campo Style Class, do painel de propriedades, como mostrado na figura abaixo.

jfx11

Veja o resultado do uso de CSS na figura à seguir. A tela da esquerda está sem o CSS, e a tela da direita está com o CSS.

jfx12

É possível alterar toda a aparência diretamente no Scene Builder, mas, com o arquivo CSS, você terá tudo organizado em um arquivo e poderá trocar toda a aparência de uma vez só, no menu “Scene Style Sheets“.

6. Componentes já possuem Style Class

Todos os componentes já possuem uma classe própria, como o label do exemplo abaixo. Para editar todos os labels do programa, basta colocar no CSS o Style Class e as propriedades.

jfx13

Exemplo 1:

.label{
-fx-text-fill: #555555;
}

Exemplo 2:

No meu CSS, mudei a aparência de todos os botões adicionando as propriedades à Style Class.button“:

.button{
 -fx-base: #345678;
 -fx-label-padding: 5px;
 -fx-border-radius: 0;
 -fx-background-radius: 0;
}

7. fx-base

Use a propriedade -fx-base para alterar a cor do componente sem perder as características de aparência originais do componente. Veja no código acima que alterei a cor dos botões para um azul marinho, usando -fx-base: #345678, mas não precisei redefinir as características de linhas de borda, gradientes, aparência de hover e clicked, etc.

8. pseudo-classes

Para alguns componentes, há várias pseudo-classes.

Exemplo 1:

.button:hover{-fx-base: #1245ab;} /* Se o mouse estiver em cima, o botão fica com uma cor mais forte */
.button:focused{-fx-base: #347856;} /* Se o botão estiver com foco, fica esverdeado */
.button:pressed{-fx-base: #783456;} /* Se o botão estiver pressionado, fica avermelhado */

Exemplo 2: Use as pseudo-classes :even e : odd para diferenciar as linhas pares e ímpares de uma tabela.

Para ver mais sobre as pseudo-classes, confira o Guia de Referência de CSS do JavaFX.

Anúncios
Marcado com: , , , ,
Publicado em JavaFX

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: