UI updating randomly with strange artifacts, only dragging the UI fixes it.

[eos]

I have a Box Y layout, containing lots of containers with a table layout each.  In each table layout are various labels.

i update them in a background thread (data pulled from server), and do all the work wrapped in the below code.  The problem is, sometimes my code is executed, and there is no change to the GUI.  I have to drag the gui a bit, then suddely I see my updates. Other times, it partially updates the GUI, e.g. one containers items half have the old style, half have the new style, so it looks terrible.  Is there something I can call to force the UI to update itself properly?  The strange thing is that when I do the same things for other parts of the UI, it works without issue. I dont know if its just because I'm using table layouts?

Display.getInstance().callSerially(new Runnable() {

    public void run() {

     

     :

     final Container c = (com.codename1.ui.Container) _uiBuilder.findByName("myContainer" +  i, _mainContainer);

     Label l = findMyLable(f);

     l.setText("something");      

     System.out.println("I set the text to " + l.getText());

     c.setUIID("someStyle");

     :

      }});

I the above example, I can see from the console output that the label was set, but often nothing changes in the GUI till I drag or scroll the container a bit.  The GUI updates perhaps 1 in 4 iterations of the above code, often leaving half finished artifacts.  This is on the simulator.

[Shai Almog]

Invoke revalidate or animate layout after making changes to the UI.
We don't auto-reflow since this is pretty expensive and the main reason why HTML is slow IMO.

[eos]

revalidate on the container above did the trick, although I was only changing text + background image which did not affect the layout.

What does animateLayout do?  I have not come across any animation functions yet.  Or is it more like CSS transitions?

Many thanks!

[Shai Almog]

Changing text affects the preferred size of the component so it would have a cascading effect where one component would move one pixel or so and impact all following components.
animateLayout (and all related methods e.g. animate hierarchy etc) perform a revalidate operation but instead of just placing the component in the "right place" they animate it into place. E.g. if I want a button to animate into place I can do:

cnt.addComponent(button);
cnt.animateLayout(300);

This will animate the button from its current position/size (defaults to 0, 0, 0, 0) to the place where it should be over 300 milliseconds. This is effectively the same thing as invoking revalidate() only adding animation.
There is also animateUnlayout() which does roughly the opposite allowing for a slide out effect.

I suggest checking the effects section of the kitchen sink demo as well as the layouts section.