50

Maybe a really newbie's question....

I'm starting learning JavaFX in a FMXL Application using the Scene Builder, by reading this tutorials:

http://docs.oracle.com/javase/8/javafx/get-started-tutorial/fxml_tutorial.htm

So once i applied some changes, an issue with this 2 IDs came up... I might have missed or confused something about them...

Can anyone tell me in which cases they are used one or another?

glglgl
  • 89,107
  • 13
  • 149
  • 217
Analyst
  • 945
  • 1
  • 9
  • 15
  • 2
    `id` you use, to set a `CSS ID` to your Component, for example and in your Stylesheet you have something like that `.welcome-text { font-size: 16pt; }` so this will be applied to your `Text` and the `fx:id` you have to use, if you want to work with your Components in your Controller class, where you annotate them with `@FXML Text myWelcomeText` – Patrick May 15 '14 at 18:52
  • 2
    @Patrick It's not `.welcome-text`, but `#welcome-text` in the CSS. – glglgl Jun 04 '17 at 10:31

4 Answers4

66

id you use to set a CSS ID to your Component, for example <Text id="welcome-text" .../> and in your stylesheet you have something like #welcome-text { font-size: 16pt; } so this will be applied to your Text.

fx:id you use if you want to work with your Components in your Controller class, where you annotate them with @FXML Text myWelcomeText.

jewelsea
  • 150,031
  • 14
  • 366
  • 406
Patrick
  • 4,532
  • 2
  • 26
  • 32
  • So when we need to style the node and also want to assign an id, we must assign id and fx:id to the node? – Fandi Susanto Jun 09 '17 at 11:56
  • 1
    @Fandi Currently, if only `fx:id` is assigned, that value will also be used for the `id` property. But I'm not sure if that's documented behavior or an implementation detail. – Slaw Mar 28 '20 at 13:18
12

The fx:id is the identity associated to component in fxml to build a controller, and the id is used for css.

Lucas Z.
  • 435
  • 3
  • 11
7

I took a look at an FXML document generated using the JavaFX Scene Builder. You access controls from Java Controller with the fx:id. (edit) I stand corrected, the id does matter.

You can apply css from the FXML document like this:

<Slider id="css_id" fx:id="myslider" styleClass="style_name" .../>

(Replace slider with any control)

And Java controller interaction:

@FXML
Slider myslider;
Cobbles
  • 1,748
  • 17
  • 33
1

In JavaFX id is used to set a CSS ID to a component. And fx:id is used for accessing that component in code (i.e. in a controller class). fx:id works like a components name.

wake-0
  • 3,918
  • 5
  • 28
  • 45
Amita Patil
  • 1,310
  • 2
  • 14
  • 22