Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Michael Dunn
Ranch Hand
Posts: 4632
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
"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.

 
Jim Clarke
author
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.



 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Jim Clarke
author
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Mohamed Sanaulla
Saloon Keeper
Posts: 3159
33
Google App Engine Java Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.


 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.




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

 
Mohamed Sanaulla
Saloon Keeper
Posts: 3159
33
Google App Engine Java Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.




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?
 
Jim Clarke
author
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Jim.
 
Mohamed Sanaulla
Saloon Keeper
Posts: 3159
33
Google App Engine Java Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a lot. That was resourceful.
 
James Bell
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Just for those coming to view this post in the future, I have found the correct and easiest answer (The other answers won't even work, actually :P)
Use the following line of code:


Credit to Lord Windy on StackOverflow for replying to the same question here.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic