For a Google Wave Gadget, is there a defined point at which it's ok to modify UI?

Question

I'd like my gadget to have two different views: One when it's just been added, to let the user enter some information, and, once he's done with that, another which displays some data based on that information.

The earliest point at which I can decide which of those two views I have to display is when I get the state for the first time, i.e. in the state callback. When I change the UI there, however, it does not always show - apparently there are some timing issues involved. Sometimes the UI doesn't show up at all, sometimes it shows up ok, sometimes it shows up in front of the Gadget-loading animation.

Here's a simple test case:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Trivial" height="120">
  <Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
    <script type="text/javascript">
      function createForm () {
        document.write("<div id=\"form\">");
        document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
        document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
        document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
        document.write("</div>");
      }
    </script>
    <script type="text/javascript">
    function stateUpdated () {
      createForm ();
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback (stateUpdated);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
    </script>
  ]]>
  </Content>
</Module>

Answer 1

<script type="text/javascript">
  function createForm () {
    document.write("<div id=\"form\">");
    document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
    document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
    document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
    document.write("</div>");
  }
</script>

As you can see in http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268 the document,

write: Write a string of text to a document stream opened by open(). Note that the function will produce a document which is not necessarily driven by a DTD and therefore might be produce an invalid result in the context of the document.

So It isn't cool to use such method. I recommend you to use a framework, such as jQuery, which can create and add elements in the DOM-friendly way. It will be a working method.