JavaFX Button: You'd think this would be simple....

I'm porting an iphone game over to java for desktop distribution. I'm in the process of investigating different techs to create it and one of those is JavaFX. I want the app to look as similar to the iphone version as possible and I'm trying to apply an image to all my menu buttons. My first attempt was to have a custom group that I would end up adding a mouse listener to that looks something like this...

This is overly verbose for a button. So I started looking at the Button control. I added an image to it however you can still see the Button underneath because of insets/margins and I can't seem to find out how to remove them. I started looking into "skinning" but that seemed way overly complex for what I am trying to do. I also started looking into creating a custom node or extending Button but again, can't figure out how to apply an image to it. Anyone know a simple way to apply an Image to a Button control and not have any button margins/insets?

"Wild Wild West" guess here.

in the book threads/discussions last week, it was mentioned that javafx had a wrapper class for swing components.

perhaps getting the button to behave itself as a swing component, then using the wrapper class might work.

First, you might want to look at the javafx.scene.control.Button class, however if you want to make the same view that you saw on the iPhone, something like this might work for you. You could also replace Text in the example with javafx.scene.control.Label. Label will confine the text to a maximum width to stay within the overall bounds of the button.

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.layout.Stack;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Resizable;
import javafx.scene.image.Image;
import javafx.scene.text.Text;
import javafx.scene.paint.Color;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.stage.Stage;
import javafx.scene.Scene;

class MyButton extends CustomNode, Resizable {

public var image:Image;

public override function getPrefWidth(w: Number) : Number {
        100.0; // or replace with something more meaningful
    }
    public override function getPrefHeight(h: Number) : Number {
        50.0; // or replace with something more meaningful
    }

public override function create(): Node {
        return Stack {
            nodeHPos: HPos.CENTER // this is default anyway
            nodeVPos: VPos.CENTER // this is default anyway
            content: [
                ImageView {
                    fitWidth: bind width
                    fitHeight: bind height
                    preserveRatio: true
                    image: bind image
                }
                Text {
                    fill: Color.WHITE
                    content: "New Game"
                }

]
        };
    }
}

function run() {
    var myImage = Image { url: "{__DIR__}BakuretsuTenshi.jpg" }
   Stage {
        title : "MyApp"
        scene: Scene {
            width: 200
            height: 200
            content: [
                MyButton {
                    image: myImage
                    width: 100
                    height: 100
                    onMouseClicked: function(e) {
                        println("clicked");
                    }

}

]
        }
    }
}

Jim, did you read my post? I looked at the Button control. I just can't figure out how to give it an image and remove the margins. Thanks for the code example, but my example code is no worse and gives me the result I want. I just assumed there was an easier (less code) way of doing this.

The Button control has a skin based on what is called the Caspian theme. To remove the boundaries you could write your own skin, but that would probably be more work that what you are already doing.

Jim, did you read my post? I looked at the Button control. I just can't figure out how to give it an image and remove the margins. Thanks for the code example, but my example code is no worse and gives me the result I want. I just assumed there was an easier (less code) way of doing this.

Can make use of "graphic" property of Button Control.

mohammed sanaullah wrote:

Jim, did you read my post? I looked at the Button control. I just can't figure out how to give it an image and remove the margins. Thanks for the code example, but my example code is no worse and gives me the result I want. I just assumed there was an easier (less code) way of doing this.

Can make use of "graphic" property of Button Control.
Button{ graphic: ImageView{ image:Image{ url:"<link to image>" } } }

Gregg Bolinger wrote:I added an image to it however you can still see the Button underneath because of insets/margins and I can't seem to find out how to remove them

Gregg Bolinger wrote:

mohammed sanaullah wrote:

Jim, did you read my post? I looked at the Button control. I just can't figure out how to give it an image and remove the margins. Thanks for the code example, but my example code is no worse and gives me the result I want. I just assumed there was an easier (less code) way of doing this.

Can make use of "graphic" property of Button Control.
Button{ graphic: ImageView{ image:Image{ url:"<link to image>" } } }

Gregg Bolinger wrote:I added an image to it however you can still see the Button underneath because of insets/margins and I can't seem to find out how to remove them

Any one got a solution for this?

That was my point, you can use Graphic, but the underlying border will still be shown.

The 2 options are: use CustomNode as I had shown, or use Button but write your own Skin.

Each Control has a

skin

variable and a Skin implements

javafx.scene.control.Skin

. Each skin
in turn has a

behavior

variable,

javafx.scene.control.Behavior

.

So you could write you own skin.
Then, create the Button as:

Both options would be about the same amount of work, but the skin option
is a better design option.

Thanks Jim.

Thanks a lot. That was resourceful.