Continuação o tutorial iniciado ontem.

Veja as partes anteriores:

Parte 1 I Parte 2 I

Mostrando sua generosidade

Apesar de seu gadget poder dar presentes, uma vez que eles são enviados, eles vão para o vácuo e você nunca terá certeza que eles foram realmente enviados. Seria útil se ele pudesse listar os gifts distribuídos e modificar o widget para carregar a lista de presentes que você enviou a outras pessoas.

Você pode trapacear um pouco aqui, e apenas usar o objeto global givenGifts (presentes dados), mas isso poderia mostrar apenas os gifts que você deu em uma seção porque agora eles ainda não estão linkados ao armazenamento persistente.

Você também não poderia saber se os pedidos foram realmente bem sucedidos, apenas porque você os mandou (o objeto JavaScript é atualizado independente de sucesso). Um objeto global é um jeito conveniente de armazenar os presentes que você enviou, se você manter ele atualizado, linkando para um armazenamento persistente, ele irá servir como um lugar adequado de onde carregar os dados.

Você precisará atualizar a lista global de presentes em 2 instâncias. Primeiro, você precisará atualizá-la quando carrega seu widget para ver todos os gifts dados anteriormente. Segundo, você precisará atualizá-la quando você der um novo gift, para ter certeza que o gift foi enviado e para manter o objeto local atualizado.

Primeiro adicione 2 requisições no seu objeto dataRequest no giveGift para buscar as informações do visualizador (viewer) e dos amigos do visualizador, viewerFriends quando ele fizer a requisição. Em seguida, aproveite-se da oportunidade para adicionar um callback para seu request de send a gift (enviar presente)

function giveGift() {
  var nut = document.getElementById('nut').value;
  var friend = document.getElementById('person').value;

  givenGifts[friend] = nut;
  var json = gadgets.json.stringify(givenGifts);

  var req = opensocial.newDataRequest();
  req.add(req.newUpdatePersonAppDataRequest(opensocial
.DataRequest.PersonId.VIEWER, 'gifts', json));
  req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
  req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'),
'viewerFriends');
  req.add(req.newFetchPersonAppDataRequest('VIEWER',
'gifts'), 'data');
  req.send(onLoadFriends);
}

Se você modificar seu pedido inicial para carregar dados dos amigos, você pode reusar a função onLoadFriends para manipular ambas as partes da execução

function loadFriends() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
  req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'),
'viewerFriends');
  req.add(req.newFetchPersonAppDataRequest('VIEWER',
'gifts'), 'data');
  req.send(onLoadFriends);
}

Sua função onLoadFriends agora gera um array, fácil de usar para associar amigos com seus nomes. Este array será passado para a função que irá manipular a atulização da sua lista de presentes dados (givengifts)

function onLoadFriends(data) {
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewerFriends')
.getData();
  var giftData = data.get('data').getData();
  var friends = new Array();

  html = new Array();
  html.push('<select id="person">');
  viewerFriends.each(function(person) {
    html.push('<option value="' + person.getId() +
'">' + person.getDisplayName() + "</option>");

    friends[person.getId()] = person.getDisplayName();
  });
  html.push('</select>');
  document.getElementById('friends').innerHTML
= html.join('');

  updateGiftList(viewer, giftData, friends);
}

Agora, você precisará gravar uma função de updateGiftList (atualizar lista de presentes) para atulizar o objeto global e mostrar os resultados quando o Widget recebe os dados de volta. A função de exemplo abaixo é robusta o suficiente para não levantar uma exceção quando a lista está vazia, mas dados inválidos irão fazer com que a lista global de presentes seja esvaziada (e falhará silenciosamente).

function updateGiftList(viewer, data, friends) {
  var json = data[viewer.getId()]['gifts'];

  if (!json) {
    givenGifts = {};
  }
  try {
    givenGifts = gadgets.json.parse(gadgets.
util.unescapeString(json));
  } catch (e) {
    givenGifts = {};
  }

  var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut'];

  var html = new Array();
  html.push('You have given:');
  html.push('<ul>');
  for (i in givenGifts) {
    if (+(i) > 0) {
      html.push('<li>' + friends[i] + ' received '
 + options[givenGifts[i]] + '</li>');
    }
  }
  html.push('</ul>');
  document.getElementById('given').innerHTML
= html.join('');
}

A última coisa que você precisa é criar um gancho no HTML onde você pode inserir a lista de presentes dados (given gifts):

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifts part 3 - Showing Gifts">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <script src="http://opensocial-resources.googlecode.com/svn
/samples/tutorial/tags/api-0.7/gifts_3_showing_gifts.js"></script>
      <script>
        gadgets.util.registerOnLoadHandler(init);
      </script>
      <div id='main'>
        <div id='give'>
          <form id='gift_form'>
            Give <span id='gifts'></span> to <span id='friends'>
</span>. <a href="javascript:void(0);" onclick='giveGift();'>Give!</a>
          </form>
        </div>
        <div id='given'></div>
      </div>
    ]]>
  </Content>
</Module>

Mostrando os gifts (presentes que você recebeu)

O seu App envia gifts para seus amigos, mas seus amigos não têm como saber que eles receberam os gifts! Quando eles visualizam o App de presentes (gifts), ele não lhes mostra o que outras pessoas enviaram a eles, apenas o que eles enviaram.

Adicionando a habilidade de ver o que os outros enviaram, não é muito difícil, mas envolve um pequeno truque. Atualmente uma aplicação só pode gravar para o armazenamento persistente do visualizador do widget então este App grava todos os gifts que você deu no campo gifts do visualizador (viewer da aplicação). Quando um de seus amigos vê a instância dele do aplicativo, o App vai ter que procurar os gifts que ele recebeu checando os campo gifts de todos os seus amigos que tenham o aplicativo instalado. Para começar, adicione um gancho no HTML para receber a lista de gifts recebidos.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifts part 4 - Showing What You Got">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <script src="http://opensocial-resources.googlecode.com/svn
/samples/tutorial/tags/api-0.7/gifts_4_showing_received.js"></script>
      <script>
        gadgets.util.registerOnLoadHandler(init);
      </script>
      <div id='main'>
        <div id='give'>
          <form id='gift_form'>
            Give <span id='gifts'></span> to <span id='friends'>
</span>. <a href="javascript:void(0);" onclick='giveGift();'>Give!</a>
          </form>
        </div>
        <div id='given'></div>
        <div id='received'></div>
      </div>
    ]]>
  </Content>
</Module>

O próximo passo que precisaremos dar, será criar algumas pequenas mudanças nas funções que buscam dados gravados. Primeiro atualize loadFriends para pedir a aplicação dados dos amigos do visualizador (viewerFriends).

function loadFriends() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
  req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
  req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data');
  req.add(req.newFetchPersonAppDataRequest('VIEWER_FRIENDS',
'gifts'), 'viewerFriendData');
  req.send(onLoadFriends);
}

Em seguida, atualize giveGift para fazer o mesmo (lembre-se que estas 2 entradas para atualizar dados dependem de uma função callback, assim os dados precisam ser buscados consistentemente).

function giveGift() {
  var nut = document.getElementById('nut').value;
  var friend = document.getElementById('person').value;

  givenGifts[friend] = nut;
  var json = gadgets.json.stringify(givenGifts);

  var req = opensocial.newDataRequest();
  req.add(req.newUpdatePersonAppDataRequest(opensocial.
DataRequest.PersonId.VIEWER, 'gifts', json));
  req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
  req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'),
'viewerFriends');
  req.add(req.newFetchPersonAppDataRequest('VIEWER',
'gifts'), 'data');
  req.add(req.newFetchPersonAppDataRequest
('VIEWER_FRIENDS', 'gifts'), 'viewerFriendData');
  req.send(onLoadFriends);
}

Terceiro, atualize a função callback onLoadFriends para puxar dados dos amigos do proprietário dos dados recebidos, e os encaminhe para a função que fará o trabalho, updateReceivedList (atualizar presentes recebidos).

function onLoadFriends(data) {
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewerFriends')
.getData();
  var giftData = data.get('data').getData();
  var viewerfriendData = data.get
('vieweFriendData').getData();
  var friends = new Array();

  html = new Array();
  html.push('<select id="person">');
  viewerFriends.each(function(person) {
    html.push('<option value="' + person.getId()
 + '">' + person.getDisplayName() + "</option>");

    friends[person.getId()] = person.getDisplayName();
  });
  html.push('</select>');
  document.getElementById('friends').innerHTML
= html.join('');

  updateGiftList(viewer, giftData, friends);
  updateReceivedList(viewer,
viewerFriendData, viewerFriends);
}

A última mudança é implementar updateReceivedList paralelamente a updateGiftList (atulizar dados de presentes). Mas ao invés de interagir com a lista de presentes que você mandou, interagindo com cada um dos presentes (gifts) que cada um dos seus amigos mandou, e escolhendo apenas os que foram para você. Estes são selecionados e mostrados.

function updateReceivedList(viewer, data,
friends) {
  var viewerId = viewer.getId();
  var options = ['a cashew nut', 'a peanut',
'a hazelnut', 'a red pistachio nut'];

  var html = new Array();
  html.push('You have received:<ul>');
  friends.each(function(person) {
    var personData = data[person.getId()];
    if (personData) {
      var json = data[person.getId()]['gifts'];

      var gifts = {}
      if (!json) {
        gifts = {};
      }
      try {
        gifts = gadgets.json.parse(gadgets.
util.unescapeString(json));
      } catch (e) {
        gifts = {};
      }

      for (i in gifts) {
        if (+(i) > 0 && i == viewerId) {
          html.push('<li>' + options[gifts[i]] +
' from ' + person.getDisplayName() + '</li>');
        }
      }
    }
  });
  html.push('</ul>');
  document.getElementById('received').innerHTML
= html.join('');
}

Continuaremos amanhã:

Dúvidas ou correções, comentem por favor!