Coluna Dreamweaver – Loop Horizontal e Vertical – Parte 1

Introdução

Nesta primeira parte vamos aprender a fazer um loop horizontal e vertical com tabelas utilizando a extensão Horizontal Loop, que age igual ao comando Repetir região do Dreamweaver, só que em vez de permitir a escolha somente da quantidade de registro, você poderá escolher as opções quantidade de filas e colunas, gerando uma tabela totalmente editavel no ambiente do Dreamweaver e permitindo personalizar as configurações da tabela e trabalha com a paginação do Dreamweaver.

Pré-requisito

Extensão Horizontal Loop que pode ser baixada aqui para PHP e aqui para ASP/JSP.
Um Conjunto de Registro (Recordset) já configurado

Objetivo

Capacitar o leitor a fazer um loop horizontal e vertical com tabela e com o método tableless

Conteúdo

Abra a página que contém o Conjunto de Registro já configurado

Vamos montar a região onde será aplicado o loop horizontal e vertical

1. No grupo de painéis Aplicativo, clique na guia ligações.
2. No painel ligações, clique no sinal de +, que está a esquerda do nome do Conjuntos de Registros, para que seja mostrada as colunas
3. Clique em uma coluna do Conjunto que Registros segure e arraste até a página. Faça esse processo com todas as colunas que você quer que seja mostrada na região de repetição.

Com a região do loop já montada de acordo com sua preferência, agora aplicaremos o comando Horizontal Looper

4. Selecione todos os itens que faz parte da região que será repetida
5. No grupo de painéis Aplicativo, clique na guia Comportamentos de Servidor
6. Clique no botão +, para acrescentar um comando.
7. Clique na opção DWTEAM e em seguida clique no Horizontal Looper MX

A janela de configuração da extensão Horizontal Looper MX se abrira

8. Recordset: Nesta opção você deve escolher o Conjunto de Registro (recordeset), de onde serão extraídos os registros que serão repetidos.
9. Show Row: Escolha a quantidade de Filas. Ao escolher esta opção, a extensão vai criar automaticamente um filtro no seu Conjunto de registro, estabelecendo um limite da quantidade de registros.

   9.1 Show Column: Escolha a quantidade de colunas

10. All Records: Todos os registros. Ao selecionar esta opção, automaticamente a opção Show Row será desativada. Mostrando apenas a Shown Column, onde todos os registros serão repetidos dentro da quantidade de colunas informadas.
11. Clique em OK, e a janela de configuração da extensão Horizontal Looper MX se fechará.

Pronto à extensão gerou o código que vai aplicar o loop horizontal e vertical na sua região de repetição, de acordo com suas configurações

Analise do código gerado pela extensão

Vamos estudar o código gerado pela extensão para sabe como ela consegue fazer com que os dados sejam repetidos na horizontal e vertical. Analisaremos cada comando e processo para no próximo tutorial possamos criar um loop horizontal utilizando tableless.
Se você estiver no modo de visualização do projeto mude para o modo de visualização do código.

Se você informou a quantidade de filas observe logo no inicio que foi alterado o código da sua instrução SQL, isso porque foi criado um limite da quantidade de registro, que é igual à quantidade de fila informado multiplicado pela quantidade de coluna informada. Isto ocorre porque se você quiser mostrar três colunas e três fileiras você terá que ter nove células, sendo assim ele criar um limite de nove registros. Mais não vou entrar muito em detalhes nesta parte do código.
Atenção: O nome Recordset utilizado nas variáveis abaixo é o nome do seu Conjunto de Registro. Como o meu Conjunto de Registro chamava Recordset, as variáveis foram geradas com esse nome.
Vamos tentar localizar a tabela gerada pela extensão. No meu caso ela foi criada a partir da linha 31 até a linha 52. Com inicio nas tags <table> seguida pela <tr>. Se preferir acompanhe a explicação com o código abaixo:

<table>
<tr>
<?php
$Recordset_endRow = 0;
$Recordset_columns = 3;
$Recordset_hloopRow1 = 0;
do {
if($Recordset_endRow == 0 && $Recordset_hloopRow1++ != 0) echo “<tr>”;
?>
<td>
<!– Inicio da Região que será repetida –>
<p><?php echo $row_Recordset['subtitulo']; ?></p>
<p><?php echo $row_Recordset['foto']; ?></p>
<!– Fim da Região que será repetida –>
</td>
<?php $Recordset_endRow++;
if($Recordset_endRow >= $Recordset_columns) { ?>
</tr>
<?php
$Recordset_endRow = 0;
}
}
while ($row_Recordset = mysql_fetch_assoc($Recordset));
if($Recordset_endRow != 0) {
while ($Recordset_endRow < $Ninguno_columns) {
echo(“<td> </td>”);
$ Recordset_endRow++;
}
echo(“</tr>”);
}?>
</table>

Observe que o loop foi criado entre da tags <tr> e </tr>, ou seja dentro de uma fila. Analisaremos as variaveis que foram declarada:

$Recordset_endRow = 0; /*contador de loop*/
$Recordset_columns = 3; /* número de coluna */
$Recordset_hloopRow1 = 0;

Na primeira linha foi declarada a variável $Recordset_endRow, com o valor de zero. Essa variável será o contador de loop.
Na segunda linha foi declarada a variável $Recordset_columns, com o seu valor sendo a quantidade de colunas escolhida.
Na terceira linha foi declarada a variável $Recordset _hloopRow1 com o valor de zero. Essa variável não tem nenhuma função porque esta extensão e versão gratuita. Se preferir pode apagar.
Agora vamos analisar os comando:

do { /* inicio do comando de repetição */

Este comando indica o inicio do loop, de onde o loop vai partir.

if($Nenhum_endRow == 0 && $Nenhum_hloopRow1++ != 0) echo “<tr>”;

Este comando diz que se for verdadeiro (if) que a variável contador de loop ($Recordset1_endRow ) for igual a zero, então mostre (echo) a tag <tr>. Esta instrução serve para mostra a tag <tr> que vai dar inicio a uma nova fila. Observe que a segunda seqüência de comando (&& $Recordset1_hloopRow1++ != 0) não tem nenhuma utilidade neste versão da extensão. Então pode apagar esse segundo comando.
Logo abaixo vêm à região que vai ser repetida, observe que está entre as tags <td> e </td> ou seja, dentro de uma coluna.

<!– Inicio da minha região que será repetida –>
<td>
<p><?php echo $row_Recordset['subtitulo']; ?></p>
<p><?php echo $row_Recordset['foto']; ?></p>
</td>
<!– Fim da minha região que será repetida –>
No final da região que vai ser repetida vem o comando:

<?php $Recordset1_endRow++; /*soma mais um no contador de loop*/

Este comando manda soma (++) mais um na variável contador de loop ($Recordset_endRow), depois que passou pela região de repetição , informando que foi executado um loop. E prossegue para o próximo comando:

if($Recordset1_endRow >= $Recordset1_columns) { /*se a quantidade de coluna chegou no limite então vai inicia uma nova fila */
?>
</tr>
<?php
$Recordset1_endRow = 0; /* zera a variável contador de loop*/
}
Esse comando diz que se for verdadeiro (if) que a variável contador de loop ($Recordset1_endRow) seja maior ou igual (>=) que variável com a quantidade de registro ($Recordset1_columns), então ela vai mostra a tag </tr>, fechando à fila para depois inica novamente, ja que a variável contador de loop vai zerar ($Recordset1_endRow = 0).

A região de repetição vem sendo montada em colunas, ou seja, ele inicia uma coluna<td>, coloca um registro, e fecha a coluna </td>, soma mais um na variável contador de loop e volta a iniciar uma nova coluna, coloca outro registro, fecha a coluna, e soma mais um na variável contador de loop, e assim sucessivamente. Até quando o contador de loop for igual à quantidade de coluna, então vai mostrar a tag </tr>, fechando a fila e, zerando o contador para que na primeira instrução seja mostrado a tag <tr> , dando inicio a uma nova fila. E volta a montar as colunas novamente, e assim conseqüentemente até que seja atingido o limite total de registros, para isso utiliza o próximo comando:

while ($row_Recordset = mysql_fetch_assoc($Recordset)); /* fim do loop*/

Que manda voltar (while) para o inicio do loop até que todos os registros do Conjunto de registro Recordset tenham sido mostrado ($row_Recordset = mysql_fetch_assoc($Recordset1).
Atenção para seguinte instrução localizada no final:

if($Recordset_endRow != 0) {
while ($Recordset_endRow < $Ninguno_columns) {
echo(“<td> </td>”);
$ Recordset_endRow++;
}
echo(“</tr>”);
}
Não tem nenhuma utilidade já que esta extensão é a versão gratuita. E só apagar esses comando

Considerações Final

No proximo tutorial vamos fazer um loop horizontal sem tabelas com base na linha de raciocinio deste tutorial
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Qualquer dúvida envie um email para ramos.marcelosouza@gmail.com ou acesse o nosso fórum