Monitorando mudança de aba em SPA

YeAPF! tem um gestor de abas bem simples de usar que permite construir um SPA (Single Page Application) com muita facilidade.

Tendo várias abas, uma coisa que quase com certeza vai querer fazer é responder dinamicamente a essa mudança atualizando – por exemplo – o conteúdo de algum campo ou coisa assim.

Digamos que no seu HTML tem a seguinte estrutura de abas:

<div class=tnContainer>
  <div class=tnTab id=vw_boas_vindas>
    <img id=imagemBoasVindas>
  </div>
  <div class=tnTab id=vw_cadastro>
    <form ...>
      ...
    </form>
  </div>
  <div class=tnTab id=vw_listagem>
    <table ...>
    </table>
  </div>
</div>

E imaginemos também que cada vez que você envia o usuário a sua tela de boas vindas quer mudar a imagem de uma lista que seu aplicativo tem.

Seu javascript ficaria assim:

/* lista de imagens */
var imagens = ["rio.jpg", "montanha.jpg", "deserto.png", "cascata.jpeg"];
/* indice da imagem atual */
var imagemAtual = 0;

function monitorarMudancaAba() {
  /* verifico se a aba mostrada é a de boas-vindas */
  if (mTabNav.currentTab().id=="vw_boas_vindas") {
    /* calculo o seguinte indice da imagem */
    imagemAtual = (imagemAtual + 1) % imagens.length;
    /* altero a imagem a ser mostrada */
    y$("imagemBoasVindas").src="img/"+imagens[imagemAtual++];
  }
}

function inicializacao() {
  /* adiciono um gestor de eventos do objeto window */
  window.addEventListener('tabshow', monitorarMudancaAba);
}

/* indico ao YeAPF! para chamar a rotina de inicialização assim que estiver tudo pronto */
addOnLoadManager(inicializacao);

Com isso, toda vez que a aba for alterada, há um monitoramento sobre essa mudança e uma alteração da imagem de boas vindas que era o objetivo procurado.

Obvio que sua criatividade vai levar este simples exemplo a níveis maiores.