B4J Question node - change css style from code

[Antonio1]

hello
I'm trying b4J and I have difficulty to change css style to the nodes from code
example:

.....
Private T_ID As TextField
Dim stile, stile1,stile2 As String
......

stile2="-fx-focus-color:#FF0000;"
stile1="-fx-accent:#F70000;"

T_ID.Style=stile1&stile2

it works

example:
stile="-fx-background-color:#FFFFAA;"

it works

I would like to change the background color when the textfield is active (focused)
is possible via code?
or you have to change the style sheet CSS of payment default?

thanks... and sorry for the English translated from Italian

 

[stevel05]

You could use the FocusChanged(HasFocus As Boolean) callback method of the Textfield to change it using code, but you would probably be better to use CSS.

 

[Erel]

Please use [ code ] [ /code ] tags (without spaces) when posting code.

CSS supports this functionality. You don't need to change it at runtime. See this example: http://www.b4x.com/android/forum/threads/using-external-css-file-to-style-a-togglebutton.37214/

 

[Antonio1]

Thanks for the reply

Now i will work on the indications

Regards

 

[Antonio1]

Solved

Thanks Erel

I understand how to apply a style change on the nodes - even just one node without changing all the other

example:
I want to change the style to Textfield_1 when active (focused)

Premise

Erel said:

The default style is named caspian.css. You can see it here: http://pastebin.com/0PebD9nR
It is useful to make changes based on this style.

Therefore

1)
open caspian.css (con notepad ... word ecc)
copy the part dedicated to textfiled

/*******************************************************************************

  *  *

  * TextField  *

  *  *

  ******************************************************************************/



  .text-field {

  -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";

  -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;

  -fx-background-insets: 0, 1, 2;

  -fx-background-radius: 3, 2, 2;

  -fx-padding: 3 5 3 5;

  -fx-text-fill: -fx-text-inner-color;

  -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);

  -fx-cursor: text;

  }


  .text-field:focused {

  -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;

  -fx-background-insets: -0.4, 1, 2;

  -fx-background-radius: 3.4, 2, 2;

  -fx-prompt-text-fill: transparent;

  }


  .text-field:disabled {

  -fx-opacity: -fx-disabled-opacity;

  }

save in notepad (word ecc.) with any name ... my-textfield-focus.css

2)

open with notepad (word ecc.) the file saved above

Edit lines of interest

Example:change focused

.text-field:focused {

  -fx-background-color:  -fx-focus-color , -fx-text-box-border, -fx-control-inner-background; (delete)

  -fx-background-color: #66FF66, -fx-text-box-border, #CCFFFF; (colors changed focused!!!)

  -fx-background-insets: -0.4, 1, 2;

  -fx-background-radius: 3.4, 2, 2;

  -fx-prompt-text-fill: transparent;

  }

Save the file in the folder Files


3)

-B4J

- Edit Layout

- Java Fx SceneBuilder

- select the node textfield of interest

- properties

- stylesheet (+)

- upload the file to … my-textfield-focus.css

- save the layout

compile the project and see the result, only the specified textfield node has the style changed


I hope may be of interest ....


Saluti