Dúvidas sobre botão no JavaFX

Programação Java
#1

Olá. É a primeira vez que eu trabalho com ícones em botões no JavaFX. Meu objetivo era criar um HBox que fosse parecido com uma notificação. Do lado esquerdo um ícone grande, no meio um texto e no canto superior direito um botão para fechar. Eu já havia usado AnchorPane, mas nunca no código, então por algum motivo, eu não consegui colocar o botão no canto superior direito. Mas tem outro problema nesse botão também, eu gostaria que ele aumentasse seu tamanho com o hover no CSS, mas não está funcionando.

Imagem colada990×145 8.52 KB

O código que cria o HBox:

public void showSimpleNotification(String message, ImageView icon, boolean alwaysOnTop){
	HBox h = new HBox();
	h.getChildren().add(icon);
	h.getChildren().add(new Label("Message"));
	if(!alwaysOnTop){
		AnchorPane anch = new AnchorPane();
		Button bt = new Button();
		bt.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("/icons/cancel.png"))));
		bt.setOnAction((ActionEvent) ->{
			desktop.getChildren().remove(h);
		});
		bt.getStyleClass().add("button-with-icon");
		anch.getChildren().add(bt);
		anch.setRightAnchor(bt, 0.14);
		anch.setTopAnchor(bt, 0.14);
		h.getChildren().add(anch);
	}
	h.getStyleClass().add("notification");
	h.setAlignment(Pos.CENTER_LEFT);
	desktop.getChildren().add(h);
}

O CSS:

/*Botões normais */
.button{
	-fx-background-color: red;
	-fx-text-fill: white;
	-fx-font-size: 150%;
}
.button:hover{
	-fx-background-color: rgb(255,78,78);
}
/*Botões com ícone */
.button-with-icon{
	-fx-background-color: transparent;
	-fx-font-size: 100%;
}
.button-with-icon:hover{
	-fx-pref-width: 150%;
	-fx-pref-height: 150%;
	-fx-background-color: transparent;
}

Alguém sabe me dizer o que eu estou fazendo errado para ficar assim?

#2

Quando você trabalha com HBox, ou VBox, você precisa configurar as constraints de expansão para linhas ou colunas. Nesta caso, trata-se da propriedade Hgrow. Após adicionar todos os elementos você deve configurar esta propriedade. Segue exemplo.

Alert a = new Alert(Alert.AlertType.NONE);
a.initModality(Modality.APPLICATION_MODAL);
a.initStyle(StageStyle.UNDECORATED);

HBox h = new HBox();
h.setPrefWidth(300);
h.setSpacing(5);
h.getChildren().add(new ImageView(new Image(getClass().getResourceAsStream("/javafxapplication17/info.png"))));
h.getChildren().add(new Label(“Message”));
AnchorPane anch = new AnchorPane();
h.setAlignment(Pos.CENTER_LEFT);

ImageView img = new ImageView(new Image(getClass().getResourceAsStream("/javafxapplication17/close.png")));
img.setOnMouseClicked((ActionEvent) -> {
Platform.exit();
});
anch.getChildren().add(img);
AnchorPane.setRightAnchor(img, 0.14);
AnchorPane.setTopAnchor(img, 0.14);
h.getChildren().add(anch);

HBox.setHgrow(h.getChildren().get(0), Priority.SOMETIMES); //Information icon
HBox.setHgrow(h.getChildren().get(1), Priority.ALWAYS); //mensagem
HBox.setHgrow(h.getChildren().get(2), Priority.SOMETIMES); //botão fechar

a.getDialogPane().setContent(h);
a.show();

Espero ter ajudado.

1 curtida
#3

Valeu, o botão ficou no lugar certo. Eu nem imaginava que existi essas propriedades. Eu não aprendi no código. Comecei já pelo Scene Builder :joy:. Tô vendo que devo aprender. Mas e sobre o CSS, sabe o que eu fiz de errado?

#4

Também comecei pelo Scene Builder, é o natural, com o tempo você acaba precisando “explorar” o FXML…kkkkk. Quanto ao hover, tenho uma solução que talvez resolva, usando ImageView.

.botao-hover:hover { -fx-scale-x: 1.5; -fx-scale-y: 1.5; }

.botao-hover {
-fx-scale-x: 1;
-fx-scale-y: 1;
}

Existe algo que ajuda muito nesta manipulação de CSS, que é o CSS Reference do JavaFX.

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
1 curtida
#5

Valeu. Vou começar a ler mais as documentações mesmo.