Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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

Section
Column
width10%
Painel
borderColororange
bgColor#FFFFCE

Image Modified

Column
width90%
Painel
borderColororange
bgColor#FFFFCE
Informações
  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.
Bloco de código
<?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>