2

Eu tenho um choice-box. No meu choice-box tem uma lista de cores pra serem selecionadas pelo usuário através da interface. Toda vez que o usuário seleciona uma cor, o fundo desse mesmo choice-box fica com a mesma cor que o usuário selecionou. Por padrão, a cor da fonte dos items no choice-box é branca, mas, dentre as opções pro usuário escolher, existe a cor branca... logo, quando ele seleciona "Branco", o fundo do choice-box também fica branco... e como a fonte padrão é branca, vcs já sabem... fica tudo branco, "sem texto".

Aqui como fica:

Cor do background do choice-box e do texto brancos...

No arquivo da StyleSheet tem, referente ao que falei, o seguinte:

.choice-box {
        -fx-background-color: black; 
        -fx-mark-color: #950005;
        -fx-border: 1px;
    }

    .choice-box > .label {
        -fx-text-fill: white;   
    }

Aí em cima, como podem ver, a cor da fonte do item da lista do choice-box é setada por padrão como branca na segunda classe do CSS, isso é, na subclasse "label", dentro da ".choice-box".

Quando o cara seleciona um item de cor no menu, a seguinte ação é executada no "OnAction" do choice-box (após fazer toda a verificação da cor blablabla):

choiceBox.setStyle("-fx-background-color: " + selectedColor + ";");

Até aí tudo bem, o choice-box muda de cor tudo filé, porém eu quero colocar a seguinte condição, pra evitar a fonte branca num fundo claro/branco:

if(selectedColor.equalsIgnoreCase(BRANCO)  || 
   selectedColor.equalsIgnoreCase(AMARELO) ||
   selectedColor.equalsIgnoreCase(CINZA)  || 
   selectedColor.equalsIgnoreCase(PRATA)) 
{
    //ação para fazer a cor da fonte do item selecionado no menu ser preta quando a cor selecionada pelo usuário for branca, amarela, cinza ou prata

}

Mas eu não estou conseguindo acessar, pelo java, essa subclasse ".label" que fica dentro do choice-box. E não dá pra criar um @FXML Label meuLabel referenciando a esse texto. Daria pra fazer isso se o que eu quisesse alterar fosse o Label que fica acima de cada menu, dizendo o que ele é. A ideia seria fazer algo tipo:

meuCoiceBox.getValue().setStyle("-fx-text-fill: black;");

ou um

meuChoiceBox.getSelectionModel().getSelectedItem().setStyle("-fx-text-fill: black;");

...pra alterar a cor do texto esse item com fundo claro.

2 Respostas 2

3

No seu caso ficar usando setStyle tem duas desvantagens:

  1. É mais difícil de manter em caso de mudanças;
  2. Haverá repetição de código desnecessária.

Vou colocar aqui uma solução usando CSS externo, (se já fez isso pule essa parte) primeiro você cria um arquivo styles.css em um package no seu projeto (no caso abaixo a default) e adiciona essa linha na sua classe principal:

Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(this.getClass().getResource("styles.css").toString());

No arquivo styles.css fiz o seguinte:

.root{ display: block;}
.corBranca{ -fx-background-color: white;}
.corAmarela{-fx-background-color: yellow;}

.corVermelha{-fx-background-color: red;}
.corVermelha .label{ -fx-text-fill: white;}
.corVermelha .context-menu .label{-fx-text-fill: black;}

.corVerde{-fx-background-color: green;}
.corVerde .context-menu .label{-fx-text-fill: black;}
.corVerde .label{ -fx-text-fill: white;}

Tive que mudar a cor do context menu para preto onde a letra padrão é branca (você mudou o text-fill de todo o component para branco)

Eis o código java para mudança da cor:

ChoiceBox<String> choice = new ChoiceBox();
ObservableList<String> choices = FXCollections.observableArrayList();
choices.addAll("corAmarela","corBranca", "corVermelha", "corVerde");
choice.setItems(choices);

choice.getSelectionModel().selectedItemProperty().addListener((ObservableValue<? extends String> ov, String t, String t1) -> {
    choice.getStyleClass().setAll(t1);
});

Eu coloquei o nome dos itens do choicebox igual ao css pra não ter que fazer if-else mas não é obrigatório. O método getStyleClass() diz qual é a classe do componente, funciona como no css normal quando fazemos class="suaClasse".

O resultado é este:

inserir a descrição da imagem aqui

Só mais uma dica: prefira usar os códigos HEX das cores ao invés dos atalhos (white, red, etc) coloquei-os só por questões didáticas.

6
  • Desculpa a demora pra dar um feedback. Ainda não consegui fazer funcionar... devo estar fazendo algo errado. Assim que eu conseguir eu aviso. Obrigado pela resposta! Commented 15/10/2017 às 23:46
  • Acho que está conflitando com os "fx:Id" que eu setei pra cada menu desse. Eu consigo setar um id pro css e outro pro fx ? Commented 16/10/2017 às 0:01
  • Você não me disse que estava usando FXML, estou alterando para adequar a resposta. Commented 16/10/2017 às 0:11
  • Na verdade, eu consegui fazer funcionar em partes... Ele só funciona corretamente na 1a vez que escolho uma cor do menu. Toda vez que se altera a cor do menu, o onAction do menu chama um método que muda a cor de um retângulo (que fica sobre uma imagem de um resistor). Porém, esse método recebe um parâmetro do tipo choicebox, e salva o nome do Id do menu antes de ir para um switch-case no qual "pergunta" o nome do menu interagido e da cor selecionada e altera a cor do retângulo. Após eu interagir a primeira vez, o menu ganha outro id (para mudar o id do css) e o retangulo para de mudar de cor.. Commented 16/10/2017 às 14:31
  • Eu editei tirando o conflito de Ids, olhe o código e o css novamente. Commented 16/10/2017 às 14:33
1

Precisei responder à minha própria pergunta ao invés de comentar na resposta acima, pois queria mostrar minha solução final, que ficou grande demais pra colocar num comentário lá...

SOLUÇÃO:

Quando o usuário seleciona uma cor no choice-box, é chamado um método onde eu salvo a cor numa variável chamada "selectedColor" e , após um switch-case pra mudar a cor do retângulo e alterar o valor da resistência (até aqui nada diferente do que já estava), coloquei o seguinte if-else:

if(selectedColor.equalsIgnoreCase(BRANCO) || selectedColor.equalsIgnoreCase(AMARELO) || 
       selectedColor.equalsIgnoreCase(CINZA) || selectedColor.equalsIgnoreCase(PRATA)) {
  choiceBox.getStyleClass().setAll("choice-box","itemCorClara");
} else {
  choiceBox.getStyleClass().setAll("choice-box","itemCorEscura");
}

Não usei o addListener, pois não achei necessário. Não sei nem se do meu jeito ficou mais "feio" ou fora de padrão, mas achei mais fácil de eu entender o que eu fiz ali.

Quando eu seto a classe de acordo com a cor, aí nesse if-else, eu, na verdade, setei 2 classes pro Choice-Box, sendo uma "classe base" (choice-box) e uma com a "customização" que eu queria (itemCorClara ou itemCorEscura), ficando meu arquivo do CSS assim:

.choice-box {
    -fx-background-color: black; 
    -fx-mark-color: #950005;
}

.choice-box .label {
    -fx-text-fill: white;   
}

.choice-box .context-menu {
    -fx-background-color: #666666;    
}

.choice-box .menu-item:focused {
    -fx-background-color: #950005;   
}

.choice-box .menu-item > .label {
    -fx-text-fill: black;   
}

.choice-box .menu-item:focused > .label {
    -fx-text-fill: white;   
}

/*#####################################*/

.itemCorEscura .label {
    -fx-text-fill: white;   /
}

/*######################################*/

.itemCorClara .label {
    -fx-text-fill: #000000;   
}

E, continuei usando o setStyle pra alterar somente o background do choice-box, pois achei melhor do que criar uma classe pra cada cor. Minha dúvida é só se realmente fica melhor com o setStyle ou se criando uma classe pra cada cor mesmo. Ou é só questão de gosto pessoal?

choiceBox.setStyle("-fx-background-color: " + traduzirCor(choiceBox.getValue()) + "; -fx-mark-color: #950005;");

Esse método "traduzirCor(choiceBox.getValue())" que usei é só um que fiz pra me devolver um nome de cor "entendível" pelo css, já que o valor recebido do choice-box é o nome da cor em português (Ex.: "BRANCO").

Só assim eu realmente consegui deixar tudo 100%, até então sempre tinha alguma coisinha dando errado.

Obrigado pela ENORME ajuda, Gustavo, aprendi bastante de ontem pra hoje! Todas as observações anotadas!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .