Basically I am creating a floating widget application that has a transparent label on top, with a button underneath.

The label has a point in the center where the button is set, with some additional parents covering the button a bit. Both were made as PNG's in photoshop(One was tried as a gif as well).


When the button area is pressed, nothing happens, and it counts it as the label for some reason. The label is transparent though, and when I remove the button from the root, I cannot click in the space, but for some reason when I put the button in there, the button was being counted as the label, and I could drag the application around just fine, and no button actions went off.

When I turned transparency off, I could see the button presses when I was outside of the "label's area" which was basically a 1 pixel column, on the left, that I had to click on; Otherwise it was as if it was all the label. I'm not too sure if other components act in the same way, but that is really strange.


 @Override
    public void start(Stage stage)
    {
        
        this.stage = stage;
        configureGroup();
        configureScene();
        configureStage();
        mouseEvents();
    }

    public void button()
    {
        button = new Button("",new ImageView(button1));
        button.setStyle("-fx-background-color: transparent;");
        button.setLayoutX(-10);
    }

    public void label()
    {
                
        labelB = new Label("", new ImageView(body1));
       // labelB.setMouseTransparent(true);
}

    public void configureGroup()
    {
        label();
        button();
            
        
        
        root = new Group(button,labelB,labelP,labelM,labelH);
    }

 public void configureScene()
    {
        scene = new Scene(root, 500,500,true);
        scene.setFill(Color.TRANSPARENT);
    }
    
    public void configureStage()
    {
        stage.initStyle(StageStyle.TRANSPARENT);
        stage.setTitle("Countdown Timer");
        stage.setResizable(false);
       // stage.setHeight(SCENE_HEIGHT);
        //stage.setWidth(SCENE_WIDTH);
        stage.centerOnScreen();
        stage.setScene(scene);
        stage.show();
    }
    public void mouseEvents()
    {
        labelB.setOnMousePressed((MouseEvent me)
      ->{
            x = me.getScreenX() - stage.getX();
            y = me.getScreenY() - stage.getY();

            me.consume();
        });
        labelB.setOnMouseDragged((MouseEvent me) ->
        {
            stage.setX(me.getScreenX() - x);
            stage.setY(me.getScreenY() - y);
            me.consume();
        });
        
        
        button.setOnMousePressed((event)
        ->{
            button.setGraphic(new ImageView(button2));
            labelB.setGraphic(new ImageView(body2));
            event.consume();
          });
        

        button.setOnMouseReleased((event)
        ->{
            button.setGraphic(new ImageView(button1));
            labelB.setGraphic(new ImageView(body1));
            event.consume();
          });
    }

now as you can see I have tried to use the MouseTransparent on the label, which I can click the button, but that will set everything off to moving which it is the main part of my application.

I originally had the root.setMouseDragged and Pressed, so I figured maybe switching it to just the label would mean the root overrode everything, but nope it didn't work still.


I also want to know what the issue with the buttons are? I had to set my button transparent, because for some reason the picture was HUGE even when saved as transparent. My button, as well as the label, encompass a 500x500 area about, which doesn't get affected by the transparency, but still I'm not too sure why the button is a normal button, and then has the rest of the 500x500 space filled with a normal gray skin...

 I've done buttons in swing, and I've never seen that before. When you set the button's "icon" it was just that, nothing more. Not too sure why the button is filling space when I don't want to.

Thoughts?


EDIT: I tried to put the transparent button on top of the transparent label and the button now encompasses the entire Group now.

To me it seems that FX is having issues with Transparency in general. When putting the transparent button, without transparency, it's a giant button, even though it should be completely transparent with just the graphic(Even though the saved file was 500x500 or whatever.

Next this seems to be even though we are setting the transparent button/label to be transparent again(instead of a big button or white background on the label) I believe it's thinking that it's transparent, but not transparent.

I.E., it thinks it still has that white background, and can now be dragged, and clicked as if that white background is there, but it's not the white background now, it's the button, or the label, and for some reason it seems to be changing the other component into itself.

I also believe that this has to do with the fact that the objects aren't made transparent to begin with. As I mentioned before in Swing I only had to save the file as transparent, set it as the icon, and it would just be the transparent icon, no extra button space, no nothing.(I haven't tried this exact example of placing a button over another transparent object, but it should work in both Swing and FX).


EDIT2: I've added some pictures and tried to explain more since someone on the Oracle forums was confused. I also am including the link here. https://forums.oracle.com/forums/thread.jspa?messageID=10940253#10940253

http://i1139.photobucket.com/albums/n551/ThekonradZuse/main_zpsb0940cc8.png

http://i1139.photobucket.com/albums/n551/ThekonradZuse/main2_zps64505707.png

If you see the button is placed underneath the the label image, which it is placed before it in the group. If I try to click on the button inside the middle, while transparent, it wont return clicks.

If I get rid of the button, I cannot click inside the transparent area.

So what I'm saying is, I feel that for some reason the button is being thought of part of the label, when it is the button.


The other part was this http://i1139.photobucket.com/albums/n551/ThekonradZuse/main3_zpsd14813c8.jpg

this is the button without transparency. The button center is the only part that should be shown, but for some reason the button is now the size of the image(which you see the above 2 images).

So now, if I try to drag any part of that gigantic button, it's as if I'm clicking the label, and I can drag it around no problem.

If I set the button on TOP of the label all you would see is a giant button, or the transparent button on top. I can not move that label then, it will act as if the entire area is a button now.


So again, the label takes on the actions of the button.

It's as if the transparency says "I know there is something here so treat it as my object, and anything that is transparent means nothing to me. It's weird, but yeah........

Thanks,

~JO