Dúvidas sobre botão no JavaFX

27 de fevereiro de 2017 4 respostas Resolvido

Thallysson 27 de fevereiro de 2017

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.

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?

4 Respostas

Solucao aceita

LeonardoU 27 de fev. de 2017 1 like

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.

Thallysson 27 de fev. de 2017

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 . Tô vendo que devo aprender. Mas e sobre o CSS, sabe o que eu fiz de errado?

LeonardoU 27 de fev. de 2017 1 like

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

Thallysson 27 de fev. de 2017

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

Criado 27 de fevereiro de 2017

Ultima resposta 27 de fev. de 2017

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados