Scene Builder
Scene Builder é uma grande ferramenta para desenvolver rapidamente aplicações com aparências modernas.
É um WYSIWIG (what you see is what you get (o que você vê é o que você consegue)) uma representação visual da sua aplicação para construir, tem paletas para layouts, controles e propriedades, um editor para criar cenas.
Dá também para mexer com arquivos FXML é um formato intermediário que não impacta o seu código Java.
O IntelliJ tem modelos que estão preparados para trabalhar com arquivos FXML, mas é melhor termos o Scene Builder para ficar mais fácil editar arquivos FXML e modificar a interface.
Scene Builder também é um construtor, empacotador e é distribuído pela Gluon, podemos fazer o download no site. Não tem segredo na instalação.
No Scene Builder abra o arquivo sample.fxml do projeto HelloModernWorld que foi criado no artigo anterior. Não vai aparecer nada, mas você sabe que abriu o arquivo, porque no topo da janela está escrito sample.fxml.
Vamos adicionar alguns componentes para ver como funciona esse programa. Clique em Controls que fica à esquerda e escolha o componente ImageView e arraste para o centro do programa.
Vamos pegar uma imagem para adicionar nesse componente. Se quiser utilizar a mesma imagem do que eu acesse aqui.
Coloque a imagem na mesma pasta que está o arquivo FXML. No painel do lado direito clique em Image e escolha o caminho da imagem. Na aba Layout, na seção Size, para que a imagem fique com o tamanho real dela, em Fit Width escolha a opção Reset to default, essa opção fica em um ícone de engrenagem que aparece ao lado do campo para digitar o tamanho da imagem, faça a mesma ação para Fit Height.
Elemento Label
Do lado esquerdo em Containers, escolha o elemento AnchorPane e arraste para o meio do programa. Na aba Controls, pegue o elemento Label e arraste para o meio do programa.
Selecione o elemento Label e do lado direito em Properties, na opção Text digite: Hello World, em Font-Family escolha a Courier New, na opção size escolha o tamanho 96. No Text Fill escolha a cor White.
Pegue outro Label e arraste para o meio do programa e faça a seguinte configuração: Text: Java, Font-Family: System, Size: 77, Text Fill: #FFA518.
Pegue outro Label e arraste para o meio do programa e faça a seguinte configuração: Text: FX, Font-Family: System, Size: 77, Text Fill: #fb0000.
Deixe parecido com a imagem.
Para aplicar um efeito no AnchorPane escolha no menu a opção Modify-Set Effect-Bloom.
Para salvar escolha no menu File-Save. Agora dá para executar e ver como ficou. Mas antes disso, abra o IntelliJ para fazermos algumas mudanças no arquivo Main.java. O arquivo fica assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package sample; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ Parent root = FXMLLoader.load(getClass().getResource("sample.fxml")); primaryStage.setTitle("Hello Modern World"); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Agora execute o programa e veja como fica.
Se quiser o ebook JavaFX Volume 1, basta adicionar o seu email para recebê-lo.
Deixe um comentário