Change JavaFX Tab-Button orderring of TextFields from "Left to Right" to "Right to Left" by fxml file [duplicate]

Question

Before asking, i should say that the answer of can be found maybe in JavaFX: How to change the focus traversal policy?, but i don't looking for any java code, i would like a way by editing the Fxml file

There is a FXML file that has some TextFields in it and i would like to change focus traversal policy of my TextField : I mean, At the beginning of the application the cursor must be located in id1 and then by pressing TAB button it must go to id2 and etc.

!!!! ID1-->ID2-->ID3-->ID4-->ID5-->ID6 !!!!

Notice that the position of my TextField should be as like as below picture.

So for doing that i change the order of textFields in FXML File:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField fx:id="id1" layoutX="401.0" layoutY="41.0" promptText="id1" />
      <TextField fx:id="id2" layoutX="168.0" layoutY="41.0" promptText="id2" />
      <TextField fx:id="id3" layoutX="401.0" layoutY="110.0" promptText="id3" />
      <TextField fx:id="id4" layoutX="168.0" layoutY="110.0" promptText="id4" />
      <TextField fx:id="id5" layoutX="401.0" layoutY="174.0" promptText="id5" />
      <TextField fx:id="id6" layoutX="401.0" layoutY="249.0" promptText="id6" />
   </children>
</AnchorPane>

it works fine for me, but now i have the big problem, when i wrap two TextFields ( Id1 and Id2 ) in HBox. this approach doesn't give me the correct result and the order of focus traversal has changed.

The modified FXML is like below:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Bank.LayoutController">
   <children>
      <HBox layoutX="168.0" layoutY="41.0" spacing="80.0">
         <children>
             <TextField fx:id="id2" layoutX="168.0" layoutY="41.0" promptText="id2" />
             <TextField fx:id="id1" layoutX="401.0" layoutY="41.0" promptText="id1" />
         </children>
      </HBox>
      <TextField fx:id="id3" layoutX="401.0" layoutY="110.0" promptText="id3" />
      <TextField fx:id="id4" layoutX="168.0" layoutY="110.0" promptText="id4" />
      <TextField fx:id="id5" layoutX="401.0" layoutY="174.0" promptText="id5" />
      <TextField fx:id="id6" layoutX="401.0" layoutY="249.0" promptText="id6" />
   </children>
</AnchorPane>

and the screen shot of result becomes like below picture ( as you can see the staring point has changed to id2 and then by pressing tab the cursor goes to id1... !!!! ID2-->ID1-->ID3-->ID4-->ID5-->ID5 !!! )

SO !?!? how can i change the Focus Traversal of my TextField when the user click the TAB.

It seems if you just have an anchorPane it's very easy, but if you have HBox it starts from Right side to left Side.

By default when the the tab key is pressed, focus shifted (right wards) to the next component but as i mentioned i want Left to Right !!

Is there any solution?

Bolero

@Kleopatra The question marked by you as duplicate has an accepted answer which uses a deprecated method. This may lure users to use not recommended approach to find their solution. – Maryannmaryanna

@Maryannmaryanna true, but then it was internal always ;-) Sad fact is that there is no public, safe support to configure focus traversal in fx (frickling with layout is no viable alternative) – Manumit

@Manumit Could you please be kind enough to explain frickling with layout is no viable alternative :) – Maryannmaryanna

@Maryannmaryanna because layout is just that: placement of components somewhere in its parent. It's semantically unrelated to focus traversal. Mixing orthogonal aspects will lead into hell in any half-way complex ui. As to viable: it's as bad or good as any hack, nothing to favor - but already mentioned in the other QA. BTW: the accepted answer in the duplicate needs to be updated to a... changed internal api <g> – Manumit

@Manumit Ahh, I was of the opinion that the way JavaFX is designed, they are related :D. May be it is just my lack of experience on client side technology. Thanks for clearing the cloud :) – Maryannmaryanna

Also note javafx-jira.kenai.com/browse/RT-25538, javafx-jira.kenai.com/browse/RT-31301, javafx-jira.kenai.com/browse/RT-19379. This seems not to be getting a very high priority (these three issues are pretty much the same and haven't even been linked); but you might like to vote for them. – Bufford

@kleopatra, thank you for your mentioned, your newest answer in link is very fine and true but i am searching for a simple answer by editing fxml file and just for Tab button. Any way thank you – Ethereal

Answer 1

There are multiple ways to achieve the stated behaviour. A very simple technique would be to make use of NodeOrientation on the Parent of the TextFields, along with the ordering of it in the Parent.

I have re-vamped your code to make it more maintainable. The following points can be noted for better understanding:

• Instead of 1, I am using 4 HBox contained in a VBox
• Each of these HBox has one / two TextFields according to the need. It may contain more than two
• The nodeOrientation for each HBox is RIGHT_TO_LEFT
• The first element of first HBox is TextField id1 and not id2, which makes it the first element of be focused on when the scene is loaded
• All the HBox's are contained in a VBox to make the traversal of focus between TextField's contained in different HBox's

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="RIGHT_TO_LEFT" prefHeight="32.0" prefWidth="600.0">
         <children>
            <TextField promptText="id1" />
            <TextField promptText="id2" />
         </children>
      </HBox>
      <HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="RIGHT_TO_LEFT" prefHeight="35.0" prefWidth="600.0">
         <children>
            <TextField promptText="id3" />
            <TextField promptText="id4" />
         </children>
      </HBox>
      <HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="RIGHT_TO_LEFT" prefHeight="34.0" prefWidth="600.0">
         <children>
            <TextField promptText="id5" />
         </children>
      </HBox>
      <HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="RIGHT_TO_LEFT" prefHeight="400.0" prefWidth="600.0">
         <children>
            <TextField promptText="id6" />
         </children>
      </HBox>
   </children>
</VBox>

Maryannmaryanna

@ItachiUnchiha : thank you for reply you understood my question very clearly and answer it, although may be as 'kleopatra' answered in JavaFX: How to change the focus traversal policy? the best answer can be using TraversalEngine, but your answer is exactly what i was searching for. – Ethereal