B4J Question Background image

davelew1s · Dec 28, 2013

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 · Dec 29, 2013

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

B4X:

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 · Dec 29, 2013

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 · Dec 29, 2013

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

dilettante · Dec 29, 2013

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 · Dec 29, 2013

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

dilettante · Dec 29, 2013

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 · Dec 29, 2013

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:

B4X:

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 · Dec 29, 2013

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 · Dec 29, 2013

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

davelew1s · Dec 29, 2013

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

Erel · Dec 30, 2013

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 · Dec 30, 2013

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 · Dec 30, 2013

stevel05 said:
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:

B4X:

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

Very helpful, I completely missed that!

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

Ahh, of course.

B4J Question Background image

davelew1s

Active Member

Erel

B4X founder

derez

Expert

Erel

B4X founder

dilettante

Active Member

Erel

B4X founder

dilettante

Active Member

stevel05

Expert

davelew1s

Active Member

stevel05

Expert

davelew1s

Active Member

Erel

B4X founder

Attachments

davelew1s

Active Member

dilettante

Active Member

Similar Threads

B4J Question Background image

Active Member

B4X founder

Expert

B4X founder

Active Member

B4X founder

Active Member

Expert

Active Member

Expert

Active Member

B4X founder

Attachments

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency