title: Redrawing container or individual, dynamic elements in GWT page?
body: <p>I am developing a GWT app (I'm fairly new to GWT so this is a request for best practices; I haven't found any relevant answer on SO or elsewhere) where a timeline is required. This timeline (with descriptions, labels, interaction handles, and plots) resides in its own container (a <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/Panel.html" rel="nofollow"><code>Panel</code></a>).</p>
  
  <pre><code>          [&lt;] [now] [&gt;]             // Interaction (navigation)
            2007 2008 2009 2010       // Labels
            |    |    |    |
  + Group 1                           // Collapsible groups
  - Group 2
    Item 2a  =====   ==               // Item with plots (plots are wrapped in container per Item)
    Item 2b    =====     ===  =
  -Group 3
    Item 3a ===
    Item 3b      ===
  </code></pre>
  
  <p>Now, when user's navigate the timeline (using the button to move forward or backwards), I need to recalculate some elements of the layout:</p>
  
  <ul>
  <li>Labels need recalculating / repositioning</li>
  <li>Plots need recalculating / repositioning. Plots are based on a set of <code>Timeslot</code> elements (extends <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/Widget.html" rel="nofollow"><code>Widget</code></a>, attributes <code>dateStart</code> and <code>dateEnd</code>) which are already related to <code>Item</code>s which are related to <code>Group</code>s.</li>
  </ul>
  
  <p>The collapsible panels are <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/DisclosurePanel.html" rel="nofollow"><code>DisclosurePanel</code></a>s.</p>
  
  <p>As far as I can tell, I now have two options for handling navigation:</p>
  
  <ol>
  <li>I can <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FlowPanel.html#clear%28%29" rel="nofollow"><code>clear()</code></a> the container panel and do a complete redraw. For this, I need to preserve the state (collapsed/expanded) for all groups. (Groups and items are static for the entire period, by the way!) This will give <strong>one big redraw</strong>.</li>
  <li>I can let the plot containers (each <code>Item</code> has its own <code>TimeslotContainer</code> which is a <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FlowPanel.html" rel="nofollow"><code>FlowPanel</code></a>) hold a reference to all its <code>Timeslot</code>s and then let every <code>TimeslotContainer</code> redraw itself (i.e., filter and position relevant <code>Timeslot</code>s) based on the current timespan. This will give <strong>several minor redraws</strong> (one per <code>Item</code> per expanded <code>Group</code>), the advantage being that the <code>DisclosurePanel</code>s will be preserved, thus maintaining their own state.</li>
  </ol>
  
  <p>I'm inclined to go with the second solution. But are there any best practices on this one? Am I missing some common gotchas?</p>