title: How to swap two GridPane nodes in JavaFX?
body: <p>I want to emulate the swapping of array elements in a GUI in javafx.
  I have a grid pane <code>Memory</code> which acts like an array. Row 1 of the grid only has the array.
  In each row/col I have added a stack pane having image view and label.
  I want to change the image view of the current node and its next node. Along with the data.</p>
  <p>I tried doing it through the loop but the result was not seen.
  So I used a thread to do the background image swapping but that did not allow swapping of label values.
  This is the closest I have got without swapping while changing the background.</p>
  <pre><code>public void insertFront() {
      System.out.println(&quot;InsertList before insert &quot;+ insertList.size()+&quot; : &quot;+insertList);
      if (insertList.size() == 0){
          ObservableList&lt;Node&gt; nodes = insertArr[0].getChildren();
          Label temp = (Label) nodes.get(1);
          insertList.add(random.nextInt(999));
          temp.setText(&quot;&quot;+insertList.get(0));
      } else {
          if (insertList.size() &lt; max) {
              new Thread(()-&gt;{
                  for (int i = insertList.size()-1; i &gt;= 0; i--) {
                      ObservableList&lt;Node&gt; currNodes = insertArr[i].getChildren();
                      ImageView temp = (ImageView) currNodes.get(0);
                      temp.setImage(current);
  
                      ObservableList&lt;Node&gt; nextNodes = insertArr[i+1].getChildren();
                      ImageView tempNext = (ImageView) nextNodes.get(0);
                      tempNext.setImage(next);
                      Label tempLabel = (Label) currNodes.get(1);
                      Label tempNextLabel = (Label) nextNodes.get(1);
  
                      try {
                          Thread.sleep(1000);
                      } catch (InterruptedException e) {
                          e.printStackTrace();
                      }
                      temp.setImage(allocated);
                      tempNext.setImage(allocated);
                      try {
                          Thread.sleep(1000);
                      } catch (InterruptedException e) {
                          e.printStackTrace();
                      }
                  }
              }).start();
  
              for (int i = insertList.size()-1; i &gt;= 0; i--) {
                  ObservableList&lt;Node&gt; currNodes = insertArr[i].getChildren();
                  ObservableList&lt;Node&gt; nextNodes = insertArr[i+1].getChildren();
  
                  Label tempLabel = (Label) currNodes.get(1);
                  Label tempNextLabel = (Label) nextNodes.get(1);
  
                  tempNextLabel.setText(tempLabel.getText());
                  tempLabel.setText(&quot;&quot;);
              }
              ObservableList&lt;Node&gt; nodes = insertArr[0].getChildren();
              Label temp = (Label) nodes.get(1);
              insertList.add(0, random.nextInt(999));
              temp.setText(&quot;&quot; + insertList.get(0));
          } else {
              insertList.removeAll(insertList);
              fillInsert();
              insertFront();
          }
      }
      System.out.println(&quot;InsertList after insert &quot;+ (insertList.size())+&quot; : &quot;+insertList);
  }
  </code></pre>
  <p>But this is not synced. What I was trying to achieve is at least show the swapping of backgrounds first and then directly update the row.
  but because the threads are not synced the transition is slow and the grid row is updated.</p>
  <p>I want help for at least syncing the threads so the transition is shown first. Then the row is changed.</p>