Pour un gadget Google Wave, existe-t-il un point défini auquel vous pouvez modifier l'interface utilisateur?

Question

Je voudrais que mon gadget ait deux vues différentes: Une quand il vient d'être ajouté, pour laisser l'utilisateur entrer des informations, et, une fois qu'il a terminé avec , une autre qui affiche des données basées sur ces informations.

Le premier point auquel je peux décider lequel de ces deux affichages doit être est lorsque je reçois l'état pour la première fois, c'est-à-dire dans l'état . Cependant, lorsque je change l'interface utilisateur, cela ne s'affiche pas toujours - il semble y avoir des problèmes de synchronisation. Parfois, l'interface utilisateur ne s'affiche pas du tout, parfois il apparaît ok, parfois il apparaît en face de l'animation de chargement de gadget.

Voici un exemple simple de test:

<?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> 

Comme vous pouvez le voir dans http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268 le document,

écrire: Ecrire une chaîne de texte à un flux de document ouvert par ouvert(). Notez que la fonction produira un document qui n'est pas nécessairement piloté par une DTD et pourrait donc produire un résultat invalide dans le contexte du document.

Donc, il n'est pas cool d'utiliser une telle méthode. Je vous recommande d'utiliser un framework, tel que jQuery, qui peut créer et ajouter des éléments de manière DOM-friendly. Ce sera une méthode fonctionnant.