B4J Question PNG graphics in Buttons?

[Roger Daley]

Hi All

I am trying to use a PNG graphic in a button [BitmapDrawable in the visual Designer] as I have done in B4A.
The problem is that the parts of the PNG graphic that should be transparent aren't transparent but show as white. This is what I would expect from a JPG file.
I know the PNG file is OK as I have copied it from a B4A project where it works corectly.
Any idea's?

Regards Roger

 

[Roycefer]

Just a wild guess, have you tried using CSS?

-fx-background-image:url("../files/test.png");

 

[Roger Daley]

Roycefer,

Thanks for the suggestion but all I get is the whole button "White" no matter what image I use.

Perhaps I am using the wrong syntax. I have tried:
-fx-background-image:url("../files/imgbtn5.png");
-fx-background-image:url("DirAssets/imgbtn5.png");
-fx-background-image:url("DirApp/files/imgbtn5.png");
-fx-background-image: (File.DirAssets, "imgbtn5.png") ;
-fx-background-image: (File.DirApp/files, "imgbtn5.png") ;
No success anywhere.

Regards Roger

 

[Roycefer]

CSS doesn't know anything about the File.DirAssets constant or any of B4J's unique syntax. This works for me:

TButt.Style = TButt.Style & "-fx-background-image:url('/Files/1434671913_Robot_Devil.png');"

when the Robot Devil image is in the Files folder in the B4J project. You should also make sure the image is synced in the Files Tab in the IDE so that it is properly packaged into the jar file.

When I do this, it properly displays transparency in the Robot Devil png. That is, I can set the background color of the button using CSS and it will show through on the transparent parts of the png. The downside to this CSS approach, though, is that you have to manually size the png to your button.

 

[Roger Daley]

Roycefer,

I'm doing something wrong. imgbtn5.png shows in "Files" for both the IDE and the VD. I add this line to AppStart:
BtnFiles.Style = BtnFiles.Style & "-fx-background-image:url('/Files/imgbtn5.png');"
and the transparent bits still show as white.

No reference to imgbtn5 in CSS, no image file selected for BitmapDrawable.


Regards Roger

 

[Roycefer]

Don't set the background image or a background color in the Visual Designer. Instead, add this to AppStart after you've done MainForm.Show:

Dim bgc As String = "-fx-background-color:chartreuse;"
Dim bgi As String = "-fx-background-image:url('/Files/imgbtn5.png');"
BtnFiles.Style = BtnFiles.Style & bgc & CRLF & bgi

I just did the equivalent with your file imgbtn5.png and it works.

 

[Roger Daley]

Roycefer,

It Works perfectly, Erel should update your status to expert.

So many things in B4J the same as B4A, so many not the same.



Many Thanks Roger

 

[Roycefer]

Haha, I think the "Expert" label is automatically assigned once you've posted a certain number of times or gotten a certain number of likes.

Yes, JavaFX is a little different from Android UI development. But just think of this CSS stuff as good practice for web development.