Organização do código

12 de fevereiro de 2014 15 respostas

samueltm 12 de fevereiro de 2014

Olá a todos, estou desenvolvendo um projeto em JavaFX mas a minha dúvida é sobre organização do código.

No projeto, tenho cerca de 11 imagens:

@FXML
private ImageView ombroImageView;
@FXML
private ImageView bicepsImageView;
@FXML
private ImageView peitoImageView;
// E assim por diante

E todas essas imagens possuem 2 métodos em comum:

IMAGEM.setOnMouseEntered(new EventHandler<MouseEvent>() {
    //código
});

IMAGEM.setOnMouseExited(new EventHandler<MouseEvent>() {
    //código
});

Só que no caso tenho 11 imagens, ou seja 22 métodos que fazem a mesma coisa, só muda QUEM executa o método. Será que tem uma maneira melhor de organizar isso?

Agradeço.

15 Respostas

Janerson 13 de fev. de 2014

Bom dia amigo!!!

Notei que vc esta usando Anotações @FXML, logo vc esta usando o Scene builder para montar suas telas

sendo assim você pode criar os dois métodos(já que fazem as mesmas coisas) com anotações @FXML
e na view code do Scene Builder seta-los para sua ImageView

@FXML private void seuMetodo(MouseEvent me){ //TODO }

Bruno_Laturner 13 de fev. de 2014

Normalmente esse tipo de código para montar telas é gerado por uma IDE. Se tiver usando uma, acho melhor nem tentar alterar isso manualmente. Só mantenha esse código de telas separado do teu código de lógica de negócio.

samueltm 17 de fev. de 2014

Estou usando o Scene Builder do JavaFX.
Fiz como Janerson sugeriu e deu certo!
Gostaria saber como que consigo a referência da ImageView que chamou o método que criei pois preciso alterar a cor da imagem…

Janerson 17 de fev. de 2014

samueltm:
Estou usando o Scene Builder do JavaFX.
Fiz como Janerson sugeriu e deu certo!
Gostaria saber como que consigo a referência da ImageView que chamou o método que criei pois preciso alterar a cor da imagem…

Amigo explique melhor para que eu possa entender

samueltm 17 de fev. de 2014

Janerson, me desculpe… Essa é a minha primeira aplicação em JavaFX, estou passando uns apertos rsrs… Vou tentar me expressar melhor:

Estou desenvolvendo uma aplicação em que o usuário interage com uma imagem. Tenho uma imagem de um corpo humano de fundo e várias outras imagens para certos grupos musculares. O problema é que como possuo MUITAS imagens, o código acaba ficando grande, gostaria de saber se há uma forma mais “inteligente” de desenvolver isso. Eis um exemplo:

@FXML
    private ImageView peitoImageView;
    @FXML
    private ImageView bicepsDireitoImageView;
    @FXML
    private ImageView ombroEsquerdoFrenteImageView;
    @FXML
    private ImageView ombroDireitoFrenteImageView;
    @FXML
    private ImageView ombroEsquerdoCostasImageView;
    @FXML
    private ImageView ombroDireitoCostasImageView;
    @FXML
    private ImageView trapezioFrenteImageView;
    @FXML
    private ImageView trapezioCostasImageView;
    @FXML
    private ImageView bicepsEsquerdoImageView;
    @FXML
    private ImageView abdomenImageView;
    @FXML
    private ImageView tricepsEsquerdoFrenteImageView;
    @FXML
    private ImageView tricepsDireitoFrenteImageView;
    @FXML
    private ImageView tricepsEsquerdoCostasImageView;
    @FXML
    private ImageView tricepsDireitoCostasImageView;
    @FXML
    private ImageView antebracoEsquerdoFrenteImageView;
    @FXML
    private ImageView antebracoDireitoFrenteImageView;
    @FXML
    private ImageView antebracoEsquerdoCostasImageView;
    @FXML
    private ImageView antebracoDireitoCostasImageView;
    @FXML
    private ImageView pernasFrenteImageView;
    @FXML
    private ImageView pernasCostasImageView;
    @FXML
    private ImageView panturrilhaFrenteImageView;
    @FXML
    private ImageView panturrilhaCostasImageView;
    @FXML
    private ImageView costasImageView;

    //O que estes métodos fazem é quando o usuário passa o mouse por cima de algum grupo muscular, a imagem muda de cor.

    @FXML
    public void addEfeitoPeito() {
        peitoImageView.setCursor(Cursor.HAND);
        ColorAdjust blackout = new ColorAdjust();
        blackout.setBrightness(-1.0);
        effect = new Glow(1.0);

        peitoImageView.setEffect(blackout);
        peitoImageView.setCache(true);
        peitoImageView.setCacheHint(CacheHint.SPEED);
        System.out.println("Entrou peito");
    }

    @FXML
    public void removerEfeitoPeito() {
        effect = null;
        peitoImageView.setEffect(effect);
        peitoImageView.setCache(true);
        peitoImageView.setCacheHint(CacheHint.SPEED);
        System.out.println("Saiu peito");
    }
    
    @FXML
    public void addEfeitoOmbro() {
        ombroDireitoCostasImageView.setCursor(Cursor.HAND);
        ombroDireitoFrenteImageView.setCursor(Cursor.HAND);
        ombroEsquerdoFrenteImageView.setCursor(Cursor.HAND);
        ombroEsquerdoCostasImageView.setCursor(Cursor.HAND);
        
        ColorAdjust blackout = new ColorAdjust();
        blackout.setBrightness(-1.0);
        effect = new Glow(1.0);

        ombroDireitoCostasImageView.setEffect(blackout);
        ombroDireitoCostasImageView.setCache(true);
        ombroDireitoCostasImageView.setCacheHint(CacheHint.SPEED);
        
        ombroDireitoFrenteImageView.setEffect(blackout);
        ombroDireitoFrenteImageView.setCache(true);
        ombroDireitoFrenteImageView.setCacheHint(CacheHint.SPEED);
        
        ombroEsquerdoFrenteImageView.setEffect(blackout);
        ombroEsquerdoFrenteImageView.setCache(true);
        ombroEsquerdoFrenteImageView.setCacheHint(CacheHint.SPEED);
        
        ombroEsquerdoCostasImageView.setEffect(blackout);
        ombroEsquerdoCostasImageView.setCache(true);
        ombroEsquerdoCostasImageView.setCacheHint(CacheHint.SPEED);
        
        
        System.out.println("Entrou ombro");
    }

    @FXML
    public void removerEfeitoOmbro() {
        effect = null;
        
        
        ombroDireitoCostasImageView.setEffect(effect);
        ombroDireitoCostasImageView.setCache(true);
        ombroDireitoCostasImageView.setCacheHint(CacheHint.SPEED);
        
        ombroDireitoFrenteImageView.setEffect(effect);
        ombroDireitoFrenteImageView.setCache(true);
        ombroDireitoFrenteImageView.setCacheHint(CacheHint.SPEED);
        
        ombroEsquerdoFrenteImageView.setEffect(effect);
        ombroEsquerdoFrenteImageView.setCache(true);
        ombroEsquerdoFrenteImageView.setCacheHint(CacheHint.SPEED);
        
        ombroEsquerdoCostasImageView.setEffect(effect);
        ombroEsquerdoCostasImageView.setCache(true);
        ombroEsquerdoCostasImageView.setCacheHint(CacheHint.SPEED);
        
        
        System.out.println("Saiu ombro");
    }

    //E continua para os outros grupos musculares....

OBS: Se algum moderador por favor, puder mover o tópico para a área de JavaFX eu agradeço. Pensei que minha dúvida era sobre Java básico, mas é específico de JavaFX.

Janerson 17 de fev. de 2014

Boa noite!!!

Amanha vou ver se implemento algo que possa te ajudar, ando um pouco ocupado com meu TCC
http://www.guj.com.br/java/306711-resolvidomultiplos-fxml-e-controller

Mas dando uma rapida olhada acho que tem um erro no seu método, vc quer que quando o usuario passar o mouse sobre as
imagens as mesma mudem de cor, ou seja um efeito HOVER…define um estilo quando passa-se o mouse sobre item;

no seu método como é uma ação do mouse deve ser declarado assim

@FXML public seuMetodo(MouseEvent me){ //TODO HERE }

Voçê pode tambem usar o initiliaze() da classe controller para inicializar o efeito

final ImageView im = new mageView();

im.setOnMouseEntered(new EventHandler&lt;MouseEvent&gt;() {
    @Override
    public void handle(MouseEvent me) {
//TODO HERE
        
        System.out.println("Mouse in");
    }
});

im.setOnMouseExited(new EventHandler&lt;MouseEvent&gt;() {
    @Override
    public void handle(MouseEvent me) {
      //TODO HERE
        System.out.println("Mouse out");
    }
});

E vc tambem pode usar o CSS estude sobre isso

No Scene Builder vc deve atribuir um ID na View Properties opção JavaFX CSS(Atribua o mesmo id para todas as ImageView, nao sei se a ImageView tem seletores padrao, se tiver otimo, leia a referencia do CSS no javafx)

criar um arquivo CSS na sua IDE
e configurar +ou- assim

e por ultimo setar esse arquivo na sua tela pelo scene builder vc faz assim
clica na base de sua janela geralmente é um AnchorPane, na View Properties vc seta esse css na opção StyleSheets

não sei se expliquei bem, mas é algo +ou- assim, depois vou fazer com mais tempo um exemplo para vc.

Tudo de bom abraços e MUITO ESTUDO

//supondo que sua ImageView tenha o id = im

.im:hover{
  
  -fx-effect: dropshadow(three-pass-box, rgba(255,2,217,1), 10, 0, 0, 0);
   
}

Janerson 18 de fev. de 2014

Boa tarde Amigo segue exemplo básico do que falei acima, fiz na correria mas já dá para vc
entender como funciona

samueltm 18 de fev. de 2014

Poxa, MUITO obrigado. Vou dar uma estudada aqui…

samueltm 18 de fev. de 2014

Janerson, muito obrigado pela ajuda! Funcionou certinho… Só tenho mais uma dúvida, será que tem como aplicar o efeito de hover em várias imagens ao mesmo tempo? Abraços.

Janerson 19 de fev. de 2014

Hummmm o efeito hover do css, só é aplicado quando o mouse está sobre um item… mas acredito que sim
vou pensar nisso, depois posto resultado…pois ainda nao sou um expert em JavaFX rsrsrrsrsr…

Janerson 19 de fev. de 2014

Vamos lá primeiramente vc deve editar o arquivos css retirando a propriedade hover
Lembrando que ao retirar a propriedade hover do css, as outras ImageView que estive usando essa Style Class automaticamente
irá aplicar o efeito, entao a melhor opção seria vc criar uma nova Style Class dentro do seu arquivo css e seta-la apenas nas ImageView que vc precisa que o efeito seja aplicado em conjunto

//Ao invés disso
.image:hover{
    -fx-effect: dropshadow(three-pass-box, rgba(255,2,217,1), 10, 0, 0, 0);

}
//Vc usa isso
.image{
    -fx-effect: dropshadow(three-pass-box, rgba(255,2,217,1), 10, 0, 0, 0);

}

depois de editar o arquivo css, crie dois métodos na sua classe controller que serão responsáveis por fazer esse efeito hover

@FXML
    public void mouseIN(MouseEvent event) {//Metodo usado quando o mouse estiver sobre a ImageView
        imageView1.getStyleClass().add("image");//aqui esta setando a Style Class "image" do arquivo css.
        imageView2.getStyleClass().add("image");
       
        //vode poderia fazer assim, mas pelas boas praticas aconselho a opção acima

            /*  imageView1.setStyle("-fx-effect: dropshadow(three-pass-box, rgba(255,2,217,1), 10, 0, 0, 0);"); */

    }
      @FXML
    public void mouseOUT(MouseEvent event) {//Metodo usado quando o mouse sair da ImageView
        imageView2.getStyleClass().clear();
        imageView2.getStyleClass().clear();
    }

Após isso é so setar esses metodo pelo Scene Builder em suas devidas ações, ou seja o metodo mouseIN vc seta na opçao On Mouse Entered e o metodo mouseOUT na opção On Mouse Exited

Assim as duas ImageView do exemplo, vão ter o efeito hover aplicados ao mesmo tempo.

Segue anexo exemplo

samueltm 6 de mar. de 2014

Janerson, novamente agradeço sua ajuda… Funcionou muito bem, o problema é que parece que o “clear” não funciona. Quando tiro o mouse da image, o efeito de cor continua… Também tentei o imageView1.getStyleClass().remove(“image”); mas não funcionou…

Janerson 6 de mar. de 2014

Amigo, execute o projeto anexo para vc ver funcionando
analise seu código, com certeza vc esta fazendo algo errado

Vc setou os métodos conforme expliquei no ultimo post

samueltm 6 de mar. de 2014

Janerson, testei ontem no meu Desktop e não tinha funcionado. Testei agora no notebook e funcionou… rsrs Muito obrigado pela ajuda.

Janerson 6 de mar. de 2014

Que bom,
Marque o tópico como resolvido

Criado 12 de fevereiro de 2014

Ultima resposta 6 de mar. de 2014

Respostas 15

Participantes 3

15 Respostas

Topicos relacionados