Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: Migration of unmigrated content due to installation of a new plugin

...

Section
Column
width10%
Painel
borderColororangeblue
bgColor#FFFFCElightblue

Column
width90%
Painel
borderColororangeblue
bgColor#FFFFCElightblue
.
Informações
iconfalse
titleEste exemplo de código mostra *como criar uma combo dinâmica*, com dados vindos de uma tabela publicada na web
  1. Também como criar uma combo com dados fixos.
  2. Também mostra como inserir dados em uma determinada célula.
  3. Também mostra como manipular os dados através de funções javascript.

Abaixo alguns dos links usados para pesquisa:

http://code.google.com/intl/pt-BR/apis/gadgets/docs/legacy/gs.html#Hello_World
http://code.google.com/intl/pt-BR/apis/visualization/documentation/dev/gadgets.html#Start_with_a_Gadget_Skeleton
http://code.google.com/intl/pt-BR/apis/gadgets/docs/fundamentals.html#Existing
http://code.google.com/intl/pt-BR/apis/visualization/interactive_charts.html
http://code.google.com/intl/pt-BR/apis/gadgets/docs/gs.html
http://code.google.com/intl/pt-BR/apis/visualization/documentation/examples.html
http://code.google.com/apis/ajax/playground/?type=visualization#gauge_interaction
http://code.google.com/intl/pt-BR/apis/visualization/documentation/gallery/table.html#customproperties
http://igoogledeveloper.blogspot.com/
http://code.google.com/intl/pt-BR/apis/visualization/documentation/querylanguage.html#Setting_the_Query_in_the_Data_Source_URL
http://docs.google.com/support/bin/answer.py?hl=en&answer=99488
http://code.google.com/intl/pt-BR/apis/visualization/documentation/spreadsheets.html
http://code.google.com/intl/pt-BR/apis/spreadsheets/
http://code.google.com/intl/pt-BR/labs/

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" />//Necessário para usar o userprefs
    <!--<Require feature="locked-domainsetprefs" />  -->
  </ModulePrefs>

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

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

  // css que configura a div com a combo oculta que aparece quando clica em uma linha da table.
  <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>

  //importa libs do google-api
  <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;
      // pega os dados da table.
      data = response.getDataTable();
      // cria uma table
      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]);
      
      //adiciona os dados a table criada
      table.draw(data, {showRowNumber: false, allowHtml: true});
  
      //adiciona a table a um evento de select
      google.visualization.events.addListener(table, 'select', function() {
	t();
      });

    }

    // pega os valores da single-table e adiciona a uma combo criada com javascript. 
    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'));

      //ISSO NAO FUNCIONA POIS data2 NAO PASSA COMO ARRAY E SIM COM UMA STRING
      //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
      //vai abrir popupfunction t(){
      document.getElementById('pop').style.display='block';
    }

    // adiciona novo valor a célula específica na table
    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';
    }

    // cria uma combo com valores fixos vindos da definição da tag userprefs no início do código
    function testeUserPrefs(){
      // Get userprefs
      var prefs = new gadgets.Prefs();

      //SETA outros valores a array.
      prefs.setArray("mylist", ["Nokia","CNET","FDP"]);

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

      // IfItera theos userdados hase notcria addeda anycombo terms yet, display message.com innerHTML
      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 que permanece oculta.
  <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>