2009-10-20 28 views
0

我希望我的小工具有兩種不同的視圖:一種是剛剛添加了 ,讓用戶輸入一些信息,一旦他完成 ,另一種顯示基於該信息的一些數據。對於Google Wave小工具,有沒有一個定義點可以修改用戶界面?

我可以決定顯示哪兩個視圖中的哪一個顯示的最早的點是當我第一次獲得狀態時,即在狀態 回調中。然而,當我在那裏更換用戶界面時,它並不總是顯示 - 顯然涉及一些時間問題。有時用戶界面根本不顯示 ,有時顯示正常,有時顯示在 之前的小工具加載動畫。

這裏有一個簡單的測試案例:

<?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=\"[email protected]\" 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> 
+0

這段代碼中的第二個視圖在哪裏? – Natim 2009-10-27 01:19:16

+0

沒有其他看法。我試圖用這個代碼來完成的事情是在小工具加載後動態地修改用戶界面。如果我能做到這一點,我可以讓任何一個或另一個視圖出現。但即使這個簡單的測試案例也不能可靠地工作。 – 2009-10-27 07:49:57

+0

我已經爲Wave開發了。問題可能在於document.write。你能通過document.createElement(「element」)創建你的元素,然後將它們附加到它們的容器中嗎?這可能會解決您的時間問題。 – 2009-10-28 14:38:00

回答

0
<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=\"[email protected]\" 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> 

正如你可以http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268文件看,

寫: 寫文字,文檔流串由開開()。請注意,該函數將生成一個不一定由DTD驅動的文檔,因此可能會在文檔的上下文中產生無效的結果。

所以使用這種方法並不酷。我建議你使用一個框架,比如jQuery,它可以用DOM友好的方式創建和添加元素。這將是一個工作方法。

相關問題