B4J Question node - change css style from code

Antonio1 · Jul 8, 2014

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 · Jul 8, 2014

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 · Jul 9, 2014

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 · Jul 9, 2014

Thanks for the reply

Now i will work on the indications

Regards

Antonio1 · Jul 10, 2014

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

B4X:

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

  *  *

  * 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

B4X:

.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

B4J Question node - change css style from code

Antonio1

Member

stevel05

Expert

Erel

B4X founder

Antonio1

Member

Antonio1

Member

Similar Threads

B4J Question node - change css style from code

Antonio1

Member

stevel05

Expert

Erel

B4X founder

Antonio1

Member

Antonio1

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency