B4J Question Background image

[davelew1s]

Hi!
How do I set a backgroung image in an 'anchor pane' using CSS or any other way, I've search the net and tried many ways but I cannot get an image to show. This was my starting point:-
-fx-background-image:url("files/tweed.png");
Any help? Dave.

 

[Erel]

This code will set the background image to an asset file:

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.RootPane.Style = "-fx-background-image:url('" & File.GetUri(File.DirAssets, "smiley.gif") & "');"
   MainForm.Show
End Sub

 

[derez]

Add an ImageView to the anchorpane and put your image there.
Using anchorPane constraints (in the designer, layout) you can set the imageview to fill the anchorpane by putting all zeroes.

 

[Erel]

Note that ImageView and Canvas cannot be automatically resized and will not be affected by the AnchorPane constraints.

 

[dilettante]

There seems to be a problem using a design-time style for images (i.e. setting it in the Scene Builder as one might usually hope). Things like background image URLs are "relative to the stylesheet's location" and I have no idea how you would put your images either "next to" the stylesheet or in a folder under the stylesheet's "folder" (wherever that is in a B4J program).

 

[Erel]

You should make sure that the image files are added to the Files tab. It should work.

 

[dilettante]

I tried setting the Style of an ImageView in Scene Builder as in:

-fx-background-image: url('Information.png')

It does not work.

I have to do it at runtime, as in:

imgIcon.SetImage(fx.LoadImage(File.DirAssets, "Information.png"))

.. or by setting the .Style at runtime.

Is there a way to get this to work at design time?

JavaFX CSS docs say:

url ( [\"\']? <address> [\"\']? )
<address> can be an absolute URI, for example:
url(http://example.com)
url('http://example.com')
url("http://example.com")
or it can be relative to the location of the CSS file.

 

[stevel05]

In scenebuilder Properties for the imageview under Specific, you can set the image directly where it says Image, click the ... box next to the field and a file dialog appears which should be pointing at the files folder of your project. Select the file from there.

That should give the same result as adding it in code with:

imgIcon.SetImage(fx.LoadImage(File.DirAssets, "Information.png"))

I don't think imageview will have a background-image attribute, it has -fx-image:uri;

 

[davelew1s]

Hi!
Thanks for the replies I used Erel's solution and it works ok but only in 'debug' mode to get it to work in'release' mode i had to change it to :-
MainForm.RootPane.Style = "-fx-background-image:url('" & File.GetUri(File.DirApp, "smiley.gif") & "');" and put the .gif in the object folder.
I also thought it would work in the Scene Builder as '-fx-background-image:url("files/tweed.png");' but it did not.
Thanks again Dave.

 

[stevel05]

Sorry Dave, I didn't realize that there were two questions in this thread. My answer was aimed at dilettante.

 

[davelew1s]

That's ok two is better than one!
Dave.

 

[Erel]

The solution I posted should work in Release mode as well. Make sure that the file was added to the Files tab. I uploaded a very small project that you can try.

 

[davelew1s]

My fault Erel I changed the .png file name and didn't add it to the file tab, that's perfect now thanks for your help.
Dave.

 

[dilettante]

In scenebuilder Properties for the imageview under Specific, you can set the image directly where it says Image, click the ... box next to the field and a file dialog appears which should be pointing at the files folder of your project. Select the file from there.

That should give the same result as adding it in code with:

imgIcon.SetImage(fx.LoadImage(File.DirAssets, "Information.png"))

Very helpful, I completely missed that!

I don't think imageview will have a background-image attribute, it has -fx-image:uri;

Ahh, of course.