JavaRanch: Latest posts for the topic "JavaFX Button: You'd think this would be simple...."

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

Gregg Bolinger — Tue, Jun 23 2009 23:11:45 MDT

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...

def newGame = Group {
    content: [
    	ImageView {
    	    image: buttonImage
    	    x: 10
    	    y: 10
    	
    	},
    	Text {
    	    x: 80
    	    y: 30
    	    fill: Color.WHITE
    	    content: "New Game"
    	    
    	}    	
    ]
}

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?

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

Michael Dunn — Wed, Jun 24 2009 00:00:59 MDT

"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.

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

Jim Clarke — Wed, Jun 24 2009 10:03:42 MDT

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");
                    }

                }

            ]
        }
    }
}

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

Gregg Bolinger — Wed, Jun 24 2009 11:00:15 MDT

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.

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

Jim Clarke — Sun, Jun 28 2009 19:01:07 MDT

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.

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

mohammed sanaullah — Mon, Jul 6 2009 22:01:21 MDT

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:""
      }
  } 
}

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

Gregg Bolinger — Mon, Jul 6 2009 22:13:12 MDT

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:""
      }
  } 
}

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

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

mohammed sanaullah — Mon, Jul 6 2009 22:19:09 MDT

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:""
      }
  } 
}
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?

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

Jim Clarke — Tue, Jul 7 2009 14:56:24 MDT

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:

Button {
   skin: MyButtonSkin{}
   graphic: ImageView{..}
}

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

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

Gregg Bolinger — Tue, Jul 7 2009 14:57:17 MDT

Thanks Jim.

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

mohammed sanaullah — Wed, Jul 8 2009 04:27:01 MDT

Thanks a lot. That was resourceful.