Aplicativos que usam só uma página têm um lugar assegurado no desenvolvimento de software atual e futuro.

Bem feitos são elegantes e fáceis de manter. Também são uma mão na roda na hora de fazer um aplicativo que funcione tanto em desktop como em mobile.

Para construirmos um aplicativo com essas características, precisamos primeiro, ter uma forma de organizar as diversas telas que serão mostradas no aplicativo. Que ele seja mono página não quer dizer que seja mono tela. Chamaremos porém a essas telas de abas.

Este post então será organizado como segue: 1) O uso do mTabNav() para organizar suas abas. 2) Como trazer uma lista de dados para uma tabela dentro de uma aba. 3) Como acrescentar links aos itens da sua tabela.

1) Usando o mTabNav()

O YeAPF incorpora um gestor leve de abas. Há muitos gestores de abas e você mesmo pode construir o seu, porém não é perca de tempo dar uma olhada no que você já tem no YeAPF. A partir da versão 0.8.28 ele tem um mecanismo automático de trava que facilita ainda mais a gestão das abas.

/YeAPF/yloader.js

<style>
  .tnTabTitle { font-size: 24px; };
  .tnTab { height: 100%; }
</style>

<body>
  
    
      
      
        
          
        
        
          
        
      </div>

      <!-- ABAS -->
      
        Primeira
        <h1>Esta é a primeira aba</h1>
        <h2>Bem vindo!</h2>
      </div>

      
        Segunda
        <h1>Esta aba é a segunda</h1>
        Caso queira ir para a primeira, 
        pode clicar <a href='javascript:mTabNav.showTab("vwPrincipal")'>aqui</a>
      </div>

      
        Terceira
        <h1>Esta é a terceira aba</h1>
      </div>

    </div>
  </div>
</body>


  mTabNav.init();

Deste ponto em diante, assumiremos que você colocou este exemplo na /var/www/testeAbas

Como sempre, o anterior é um exemplo imperfeito mas completamente funcional. Mais uma vez, partimos do suposto que o YeAPF está instalada na /var/www/YeAPF. Se você colocou este exemplo na pasta /var/www/testeAbas e o chamou abas.html, você pode ver o resultado em http://localhost/testeAbas/abas.html .

Cada div da classe tbTab contém uma página a ser visualizada. O objeto universal mTabNav() é o responsável por gerenciar as abas. Ele precisa ser inicializado mTabNav.init() para um correto funcionamento, porém, caso não tenha sido inicializado, ele fará o procedimento de inicialização na primeira chamada.

No topo da página colocamos dois botões para navegar entre as abas. Estes chamam dois procedimentos do mTabNav() o showNext() para mostrar a seguinte aba e o showPrior() para mostrar a anterior. Caso queira ir para uma aba específica, é só usar showTab() como fizemos na segunda aba. Isto feito, vai da inventiva do programador usar o mTabNav() para produzir seu aplicativo todavia, vamos construir um nos seguintes passos.

2) Listando dados numa aba

Partiremos do suposto que você já tem o YeAPF configurado em uma pasta por ter seguido o tutorial dos primeiros passos com YeAPF. O que vamos fazer, é de fato aplicar este outro tutorial (Preenchendo listas de opções e tabelas) que nos ensina como preencher tabelas HTML com dados vindos de um servidor SQL.

Resumindo, coloque o configure.php, o query.php, o yeapf.db.ini e o e_body.xml que vem na distribuição do YeAPF na mesma pasta em que criou o abas.html logo acima. Após isso pode modificar o yeapf.db.ini e rodar o configure.php ou também pode só copiar o sgug.ini do outro aplicativo feito anteriormente para esta pasta; isso vai conectar esta pasta com seu banco de dados.

Se tudo tiver dado certo, você terá um script chamado yeapf.php criado na sua pasta pelo configure.php

Agora vamos criar um script autores.php que vai responder às nossas requisições.

<?php
  function qautores($a) {
    $useColNames = true;
    $countLimit=20;
    $ret='';

    if ($a == 'listarAutores') {
      $ret = "select * from autores";
    }

    xq_produceReturnLines($ret, $useColNames, $countLimit);
  }
?>

Podemos ver se este script está funcionando corretamente, chamando ele pelo navegador: http://localhost/testeAbas/query.php?s=autores&a=listarAutores. A saída será um XML contendo a lista dos autores.

Caso tenha dado errado: 1) verifique a URL e veja se ele é o adequado para sua pasta. 2) verifique se tem o e_body.xml, o query.php e o autores.php na pasta. 3) Verifique se quando rodou o configure.php, ele funcionou certinho, ou seja, ele deve ter mostrado um quadro verde e criado o yeapf.php. Caso mesmo assim não tenha conseguido, tente seguir de novo o ‘Primeiros passos’ adaptando para sua realidade.

Agora vamos criar um arquivo index.html para ter nossas abas e o ponto de entrada de nosso aplicativo.

/YeAPF/yloader.js

<style>
  .tnTabTitle { font-size: 24px; };
  .tnTab { height: 100%; }
</style>

<body>
  
    
      
        
          
        
        
          
        
      </div>

      
        Autores
        <table id='tbl_autores'></table>
      </div>

      
        Obras
      </div>

    </div>
  </div>
</body>

http://autores.js

Observe que estamos seguindo a recomendação de Crockford e carregamos o script ao final e não ao inicio. Repare também a existência de uma tabela vazia em uma das abas chamada tbl_autores.

Agora, criemos o autores.js que por agora o deixaremos na mesma pasta do index.html mas pode colocá-lo em outro lugar. Só lembre de corrigir a pasta na hora da carga.

function preencherListaAutores() {
  ycomm.invoke(
    'autores',         /* subject */
    'listarAutores',   /* action */
    {                  /* other data (in this case, empty) */
    },
    function (status, error, data) {  /* calllback function */
      if (error)
        alert(error)
      else
        ycomm.dom.fillElement('tbl_autores',
                              data,
                              {
                                idFieldName: 'codigo',
                                columns: ['nome', 
                                          'localNascimento', 
                                          'estiloPrincipal']
                              }
                             );
    }
  );
}

mTabNav.init();
preencherListaAutores();

Agora podemos testar nosso projeto e ver que a lista é preenchida dentro da aba correspondente.

O funcionamento é bem simples e de compreensão direta: Chamamos desde o cliente (no caso, html/js) o ycomm.invoke() que se encarrega de enviar a solicitação ao servidor (no caso, autores.php). Este por sua vez empacota o resultado em um XML que é recebido pelo YeAPF do lado do cliente que por sua vez chama à rotina de callback indicada. Neste caso, é uma função anônima embutida na prórpia chamada.

O programador deve ter em conta que esta rotina só vai ser chamada após os dados chegarem do servidor. Isso quer dizer que logo após a função preencherListaAutores() ser chamada, a tabela ainda não tem os dados. Isso é assim porque por padrão, o invoke só chama o Ajax de forma assíncrona.

3) Acrescentando links aos elementos da tabela.

Uma tabela com dados é interessante, mas ela se torna realmente útil quando conseguimos interatuar com ela.

Finalizaremos este post criando links para cada item da tabela. Este post só nos mostrará o nome do autor por meio da função alert() do javascript. Um post posterior nos mostrará como editar dados, eliminar, enfim, o restante do CRUD.

Repare que na hora de montar os dados na tabela, indicamos à ycomm.fillElement() que nosso campo chave é chamado de ‘codigo‘ por meio de idFieldName: ‘codigo’

Este é um ponto muito importante para depois podermos recuperar o restante da informação. Todavia, acrescentaremos alguns dados junto com a chave para que não tenhamos que ir até o servidor para puxar mais informação. Modifique o seu autores.js para que a carga de dados fique da seguinte forma:

ycomm.dom.fillElement('tbl_autores',
      data,
      {
        idFieldName: 'codigo',
        inplaceData: ['nome'],
        html: '<a href="javascript:editarAutor(%(rowid))">'
             +'%(nome)</a>'
      }
);

Repare que a edentação foi sacrificada em beneficio da legibilidade.

Foi acrescentada uma entrada inplaceData na hora da chamada. Também tenha por bem reparar que em lugar de indicar as colunas em um vetor, agora temos código html expressado como string. Veja que podemos mencionar os nomes dos campos por meio do macro %() dentro da string. Isso fará com que a cada linha esse espaço seja preenchido com o campo correspondente. Ora com rowid ora com nome. Aceite que rowid é só um número sequencial que serve só para referenciar os dados recebidos do servidor. E finalmente, observe que há uma função ainda não declarada chamada editarAutor().

Accrescentemos então a função editarAutor() ao autores.js da seguinte maneira:

function editarAutor(nroLinha) {
  /* Código associado à linha da qual me chamaram */
  var codigo = ycomm.dom.getTableRowId('tbl_autores', nroLinha);
  /* Nome do autor que está embutido na linha como dados */
  var nome = ycomm.dom.getTableInplaceData('tbl_autores', nroLinha, 'nome');
  /* Mostramos ao usuário a linha, o código e o nome do autor */
  window.alert("Você está querendo editar a linha {0}\nQue tem o autor {1}:{2}".format(nroLinha, codigo, nome));
}

Feito isso, seu aplicativo agora mostrará links em cada autor, e ao usuário clicar neles, lhe será mostrada o numero da linha, o código (chave no banco de dados) e o nome do autor.

Com isso encerramos um novo degrau no desenvolvimento YeAPF.

Como tarefa, construa o aplicativo passo a passo novamente em pasta separada. Eis aqui um pequeno guia de como proceder:

Faça download do YeAPF mais recente clicando aqui
Crie uma pasta sob sua www.
Coloque nela o configure.php e o yeapf.db.ini do esqueleto da distribuição.
Modifique o yeapf.db.ini para conectar-se com seu banco de dados.
Crie um index.html com as abas usando a classe tnContainer e tnTab para identificar o contenedor e as abas internas ao contendor.
Acrescente uma rotina de carga no final do seu HTML para carregar o autores.js
Crie o autores.js e o autores.php para responder aos eventos criados.

Aplicativos mono página

1) Usando o mTabNav()

2) Listando dados numa aba

3) Acrescentando links aos elementos da tabela.

Relacionado

BlackBerry QNX e o uso em aplicativos de saúde

1) Usando o mTabNav()

2) Listando dados numa aba

3) Acrescentando links aos elementos da tabela.

Compartilhe isso:

Relacionado

BlackBerry QNX e o uso em aplicativos de saúde