Árvore de páginas

Atualização Necessária

Todo o conteúdo deste espaço carece de atualização e, embora tenha validade nas suas intenções, as informações existentes podem ter divergências quanto à realidade atualizada, pois tratam-se de materiais bastante antigos (alguns com mais de 5 anos de existência) e que sofreram adaptações e evoluções ao longo dos anos, sem terem sido atualizados aqui.
Assim, pede-se ao leitor evitar de tomar decisões com base apenas no material aqui existente.

Skip to end of metadata
Go to start of metadata

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 2 Próxima »

Exemplo de código para criar gadget dinâmico no google spreadsheet

  1. Este exemplo de código mostra como criar uma combo dinâmica, com dados vindos de uma tabela publicada na web.
  2. Também como criar uma combo com dados fixos.
  3. Também mostra como inserir dados em uma determinada célula.
  4. Também mostra como manipular os dados através de funções javascript.
<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Custom gadget"
      author="Google"
      author_email="visualization.api@gmail.com"
      description="Custom gadget"
      thumbnail="http://visapi-gadgets.googlecode.com/svn/trunk/image/thumbnail.png"
      screenshot="http://visapi-gadgets.googlecode.com/svn/trunk/image/screenshot.png">
    <Require feature="idi" />
    <Require feature="setprefs" />
    <!--<Require feature="locked-domain" />  -->
  </ModulePrefs>

  <UserPref name="mylist"
    display_name="Add Teste"
    datatype="list"
    default_value="Hoje|Amanha|ontem"/>

  <Content type="html">
  <![CDATA[

  <style>
    #pop{display:none;position:absolute;top:18%;left:12%;margin-left:-150px;margin-top:-100px;padding:10px;width:90px;height:22px;border:1px solid #d0d0d0}
  </style>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['table']});
    google.setOnLoadCallback(init);

    var query;
    var gadgetHelper;
    var data;
    var table;
    var formatter;

    function init() {
      sendQuery();
    }

    function sendQuery() {
      query = new google.visualization.Query('http://spreadsheets.google.com/pub?key=ttAIQlCACg2EYUJs7dC_vfw&single=true&gid=1&output=html');
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      getComboValues();
      testeUserPrefs();
      // Default error message handling
      gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;

      data = response.getDataTable();

      table = new google.visualization.Table(document.getElementById('visualization'));

      // Aplica formato e seta o valor formatado na primeira coluna.
      //formatter = new google.visualization.TablePatternFormat('<select onchange="JavaScript:teste(this.value);"><option value="Ave">Avestruz</option><option value="Mamifero">Porco</option><option value="Reptil">Jacaré</option></select>');
      //formatter.format(data, [0, 1]);

      table.draw(data, {showRowNumber: false, allowHtml: true});

      google.visualization.events.addListener(table, 'select', function() {
	t();
      });

    }

    function getComboValues(){
      var query2 = new google.visualization.Query('http://spreadsheets.google.com/pub?key=ttAIQlCACg2EYUJs7dC_vfw&single=true&gid=6&output=html');
      query2.send(preencheCombo);
    }

    function preencheCombo(response){
      gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;

      var data2 = response.getDataTable();

      var cv = new google.visualization.Table(document.getElementById('combo_values'));

      //testeUserPrefs2(data2, data2.getNumberOfRows());

      cv.draw(data2, {showRowNumber: false, allowHtml: true});

      var html = "";

      html += "<b>Teste preenchendo combo com os dados da tabela importada:</b><br /><select>";
	for (var i = 0; i < data2.getNumberOfRows(); i++) {
	  var term = (data2.getValue(i, 0));
	  html += "<option>"+term + "</option><br />";
	}
      html += "</select>";

      document.getElementById("content_div2").innerHTML = html;

    }

    function t(){
      //vai abrir popup
      document.getElementById('pop').style.display='block';
    }

    function teste(value){
      var row = table.getSelection()[0].row;
      data.setCell(row, 0, ''+value);
      table.draw(data, {showRowNumber: false, allowHtml: true});
      document.getElementById('pop').style.display='none';
    }

    function testeUserPrefs(){
      // Get userprefs
      var prefs = new gadgets.Prefs();

      prefs.setArray("mylist", ["Nokia","CNET","FDP"]);

      // Get the array of search terms entered by the user
      var terms = prefs.getArray("mylist");
      var html = "";

      // If the user has not added any terms yet, display message.
      if (terms.length == 0)
      {
	html += "Edit the userprefs to add terms.";
      }
      else {
	html += "<b>Teste preenchendo combo com userprefs:</b><br /><select>";
	for (var i = 0; i < terms.length; i++) {
	  var term = (terms[i]);
	  html += "<option>"+term + "</option><br />";
	}
	html += "</select>";
      }
      document.getElementById("content_div").innerHTML = html;
    }

  </script>

  <div id=content_div></div>
  <br/>

  <b>Tabela importada:</b>
  <div id="combo_values">
    <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  <br/>

  <div id=content_div2></div>
  <br/>

  <b>Tabela com funções dinâmicas:</b>
  <div id="visualization">
    <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  <br/>

  <div id="pop">
    <select onchange="JavaScript:teste(this.value);">
      <option value="Avestruz">Avestruz</option>
      <option value="Porco">Porco</option>
      <option value="Jacaré">Jacaré</option>
    </select>
    <font style="color:red;font-size:8px;" onclick="document.getElementById('pop').style.display='none';">[close]</font>
  </div>

  ]]>
 </Content>
</Module>
  • Sem rótulos