• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
Ranch Hand
Posts: 4632
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.

 
author
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Bartender
Posts: 3225
34
IntelliJ IDE Oracle Spring Chrome Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Bartender
Posts: 3225
34
IntelliJ IDE Oracle Spring Chrome Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Posts: 49
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Jim.
 
Mohamed Sanaulla
Bartender
Posts: 3225
34
IntelliJ IDE Oracle Spring Chrome Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks a lot. That was resourceful.
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
reply
    Bookmark Topic Watch Topic
  • New Topic