Bug? [NOT A BUG] B4J Pane vs JavaFX Pane...

[Cableguy]

* SOLVED *

Since the day I initialy posted this, I kept doing my research and found the problem, along with a solution...
Please see Post #23

******************************************************

Hi guys...

I guess this one is straight to @Erel !

I am "Theming" my app using an external css file. I have managed to style every components I targeted by setting the view's ID value, and then refering to it in the css file.
But Panes.... are very peculiar....
In JavaFX there are a few Pane types/definitions.
Please correct me if I am wrong, but this is what I found so far...

B4J AchorPane - JFX AnchorPane this is our form "root", it makes sense since views can be anchored (?)
B4J ScrollPane - JFX ScrollPane
B4J SplitPane - JFX SplitPane
B4J TabPane - JFX TabPane
and....
B4J Pane - anyweresoftware.b4j.controls.PaneWrapper$ConcretePaneWrapper$NonResizePane (......) What ??????? (I found this info using Scenic View.)

Why is this important to me?
I am trying a very trivial thing, using my external css file... create a border on a pane... It just doesn't work!!!

-fx-border-color: red ;
-fx-border-width: 5 ;

HOWEVER.... the same css lines, used directly in the visual designer. extra css field... They work!! My guess is that by putting then there, either they are used directly by a setStyle issued when initializing the view, either they are targeting the JFX class directly.

The only difference I see in behaviour between all these Panes, in relation to B4J Pane, is that in the visual designer, none of then can have children, while B4J Pane can.
I also found that the border settings seem to be the only ones not working as they should.
If I set a Pane's ID and use it in my css file, all other properties seem to be correctly applied.

So.... This is weird to classify... it's a bug... but... or is it actually just a missing parameter/feature?

[EDIT]
I continued testing... all results point to a StyleSheet wide class atribuition BUG....
It seems that, when using an external stylesheet file, not all properties are correctly parsed, specially the Border related ones.
However, the exact same lines when used in the extra css visual designer field or used in code by setting the inline style string, they work perfectly.
It is possible to work around this, if you don't want any degree of transparency on your views background, as I was trying to achieve, by using the background color along with insets.

 

[Magma]

I think.. it has to do with transparent... if you want background color be transparent.. set only as color and not the whole alpha.

 

[Cableguy]

I think.. it has to do with transparent... if you want background color be transparent.. set only to color and not the whole alpha.

No it doesn't....
I spent my time testing...

 

[Magma]

No it doesn't....
I spent my time testing...

can you share an example project ?... to check it ...

 

[Cableguy]

I can't at the moment. I'm at my day job.
I can do that later in the afternoon, but if you so wish to...
Create a new B4Pages project, add a pane to it and set the border to 0 in the visual designer. In code set the pane ID to something like "myPane".
Create a css file and add it to your form.
In it write :
#myPane
{
-fx-border-color: red ;
-fx-border-width: 5 ;
}

Run run the code: no border is shown
Go back to the visual designer and add those 2 lines to the panels extra css field, delete the call to the css file and run the code... tthe border is shown!

Any other property seems to be set correctly using the css file except for the border!

 

[Magma]

The only that worked for me was that:

Root.LoadLayout("MainPage")
'Pane1.Id="Pane1"
Sleep(0)

'Main.mainform.Stylesheets.Add(File.GetUri(File.DirAssets, "test.css"))

Sleep(0)



'Dim jo As JavaObject = Main.MainForm.RootPane
'jo.RunMethodJO("getStylesheets",Null).RunMethod("add",Array(File.GetUri(File.DirAssets, "test.css")))
'Sleep(0)



Log(Pane1.Style)

Pane1.Style="-fx-background-color:#FF0000; -fx-border-color:#00FF00; -fx-border-radius:3.00;-fx-background-radius:3.00;-fx-border-width:5.00;"

Pane1.Style="-fx-background-color:#FF0000; -fx-border-color:#00FF00; -fx-border-radius:3.00;-fx-background-radius:3.00;-fx-border-width:5.00;"

Stylesheets seems not working right... :-( "but as I know - Pane style classes not working at JavaFx general"

* at a fast search did at forum see that you ve already asked that question...
* also here... today u saw it

 

[Cableguy]

You are correctly wrong!
The fact that a views doesn't have style classes assigned to them, does NOT mean that it can't be styled.
If you have read my first post carefully, you will notice that I mentioned that "If I set a Pane's ID and use it in my css file, all other properties seem to be correctly applied."
It's only the Border styling that is giving me problems

 

[Magma]

@Cableguy what java version are you using ?

even if I use:

Pane1.Styleclasses.Add("Pane1")

can't set anything from external css file... only .style

 

[Cableguy]

jdk-19.0.2

in your code do Pane1.id="myPane"
and in the CSS file you target it by...
#myPane{ -fx-...... }

 

[Magma]

jdk-19.0.2

in your code do Pane1.id="myPane"
and in the CSS file you target it by...
#myPane{ -fx-...... }

I tried but none of css.. except if other control... like checkbox, textfield... can take the styles...

I am using jdk 10... may be thats the difference

 

[Magma]

I ve tried with DSS / Designer scripts lib also (stevel05) addstyleclasses

[B4j] [DSE] CSSStyleClass Designer Script Extension

With the new Designer Script Extensions, Erel has given us Class Names for views similar to the B4j CSS class names. For those wanting to use the actual CSS classes and styling in B4j, it is just as easy to add CSS class names to Nodes directly in the designer using the Designer Script...

www.b4x.com

I didn't manage to set style from css at Pane...

 

[Cableguy]

What I have in my code:

AvailableViewsListPane.Id = "Pane"

and in my css file I have:

#Pane
{
-fx-background-color: #15252B, #A0522D;
-fx-background-insets:0, 2;
-fx-background-radius:8px;
-fx-effect:innershadow( gaussian , #D2B48C , 2, 0.0 , -1 , -1 );
}

And this works as expected, except for the border!

 

[Magma]

let me see with your css

 

[Magma]

Found why not worked... the css
If you pre-set at designer the pane style... will not get from the external nothing for Pane at least...

If you just add default settings Pane will work with external css

LOL

*but not setting the border... as CableGuy said

 

[Cableguy]

I already mentioned that itvwas needed to set all values to 0 width, default color values

 

[Magma]

I already mentioned that itvwas needed to set all values to 0 width, default color values

but didn;t count it

 

[Magma]

Found a small solution (trick)...

#Pane
{
-fx-outer-border: white;
-fx-background-color: #15252B, #A0522D;
-fx-background-color:
-fx-outer-border,
-fx-body-color;
-fx-background-insets: 0,16;
}

* first set at designer border widht 0

 

[Cableguy]

Nop... That's just how "Painting" works in JavaFX... You paint by layers and you define their limits...
What I'm trying to do is have the background semi-transparent while having solid border colors

With your solution, the background color would be transparent, but only to let the first color painted (white) "shine" through and not the Root Background

 

[Magma]

Set border size

I want to make the border of a borderpane more round and bold. I tested this code: bpi.setStyle("-fx-background-color: linear-gradient(to bottom, #f2f2f2, #d4d4d4);" + " -fx-border:

stackoverflow.com

 

[Cableguy]

Please, STOP... I wouldn't have posted this if I hadn't do my research... I've been searching for a solution or real workaround for over a week!