PHP

Nos experimentos anteriores, publicados aqui no Viche, utilizei sómente uma das duas propriedades do objeto XMLHttpRequest que permitem acesso às respostas enviadas pelo servidor – a propriedade responseText.

Como o próprio nome indica, são respostas na forma de um texto não padronizado. Em geral é construído em um formato definido pelo desenvolvedor da aplicação, de maneira que possa ser mais facilmente manipulado para gerar conteúdo em uma página. Como por exemplo, em JSON, HTML ou texto simples sem formatação, normalmente para exibir alertas.

Já a segunda propriedade, responseXML, recebe um objeto XML que é padronizado pela W3C e pode ser manipulado pelas propriedades e métodos dos elementos DOM, através de qualquer linguagem de script.

No exemplo que será detalhado a seguir é utilizado o JavaScript para acessar e manipular o documento XML.

O Resultado do Experimento

Veja de imediato o resultado a ser alcançado, que consiste na manipulação de um objeto XML recebido através da propriedade responseXML, como dito, e apresentado na forma de uma tabela.

Se desejar, clique novamente no link acima para fechar a tabela – claro se aberta :-) – e vice-versa.

O Processo de Desenvolvimento

Penso valer a pena detalhar alguns fatos do processo de desenvolvimento, uma vez que tem um papel importante no resultado final do experimento.

Para minha “surpresa” deparei-me, de cara, com um problema no IE. Enquanto nos demais browsers testados por mim (Firefox, Opera e Netscape) obtinha o resultado esperado, no IE o resultado era nulo. Ou seja, não reconhecia a resposta como um documento XML apesar de ter no programa PHP a instrução correta para gerar o cabeçalho HTTP requerido:

header("Content-type: application/xml; charset=UTF-8");

O uso da instrução header é necessária pois o mime-type do Viche é text/html. Diante do fato fui a procura de informações na WWW, via Google, para identificar e corrigir o problema.

Encontrei vários companheiros na mesma situação e uns poucos artigos publicados com a solução. Testei algumas e, talvez por não compreender de forma adequada as explicações encontradas, continuei na mesma.

Lembrei-me, então, que o Analista de Sistemas Nailson Araújo Brito, da empresa em que trabalho, havia recentemente efetuado uma alteração em nossa Intranet com o uso da propriedade em questão e com o funcionamento correto no IE. Ao analisar o código observei que ele utilizava no método open() do objeto XMLHttpRequest, POST ao invés de GET.

Fiz a substituição e acrescentei a propriedade setRequestHeader(“header”) do objeto para alterar o mime-type do pedido, exigido ao se enviar dados através do método POST, conforme indicado abaixo:

xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Como o experimento a ser detalhado em seguida não exigia a passagem de parâmetros, alterei o método send() para:

xmlhttp.send('1')

E … funcionou, tanto no IE como nos demais browsers mencionados no início do artigo.

As Dúvidas

Mesmo com o problema solucionado ficaram dúvidas:

1. É correta a solução, mesmo com o artifício utilizado no método send()?
2. Por que o IE interpretou corretamente o objeto XML com o método POST?
3. Qual seria a solução, nas condições do Viche (text/html), para funcionar com o método GET?

Deixo, as dúvidas, em aberto para quem quiser contribuir nos comentários e vamos, finalmente, ao que interessa.

O Experimento

O experimento consiste:

De um programa simples em PHP que gera o documento XML a partir da tabela Categories do Viche.

Do objeto XML.

De funções em JavaScript apresentadas a seguir com comentários que detalham os principais procedimentos executados.

// Cria o objeto XMLHttpRequest
function criaxmlhttp() {
   try {
      xmlhttp = new XMLHttpRequest();
   } catch(ee) {
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(E) {
            xmlhttp = false;
        }
      }
   }
}

function leXML(url) {
// Verifica se a tabela foi exibida. Se sim, ao clicar
// no link fecha - função limpaResultado()

   if (document.getElementById("cabecalho").hasChildNodes()) {
      limpaResultado();
      return;
   }
   criaxmlhttp();

   document.getElementById("cabecalho").innerHTML = "<img src="%5C%22http:%5C/%5C/www.nghorta.com%5C/wp_aplicacoes%5C/copa2006%5C/progress.gif%5C%22" alt="\"\"" /> Carregando ...";

   xmlhttp.open("POST", url, true);
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
   xmlhttp.onreadystatechange=function() {
// Verifica se o servidor enviou a resposta de forma
// correta
      if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
            limpaResultado();
            montaResultado();
         }
      }
   }
   xmlhttp.send('1')
}

function limpaResultado() {
//Código HTML utilizado no corpo do artigo para
// exibir a tabela
// <span id="cabecalho"></span>
// <table id="resultado" width="100%">
//     <tbody id="r_body">
//     </tbody>
// </table>
// O uso do elemento tbody é necessário por conta do IE
// que não aceita adicionar o elemento tr a tag table

   var header = document.getElementById("cabecalho");
   while(header.childNodes.length > 0) {
      header.removeChild(header.childNodes[0]);
   }
   var tabela = document.getElementById("r_body");
   while(tabela.childNodes.length > 0) {
      tabela.removeChild(tabela.childNodes[0]);
   }
}

function montaResultado() {
// Cria a linha de título das colunas da tabela
   var tr = document.createElement("tr");
// Cria a célula th
   var celula = document.createElement("th");
// Cria o conteúdo Id da celula
   var textoNode = document.createTextNode('Id');
// Adiciona o conteúdo à célula
   celula.appendChild(textoNode);
// Adiciona a célula th ao elemento tr
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Nome Categoria');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Posts');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
// Adiciona o elemento tr à tabela
   document.getElementById("r_body").appendChild(tr);
// Adiciona estilo à linha
   tr.style.cssText = "background-color: #404e2a; color: #ffffff; padding: 5px; text-align: center";

// Recebe o objeto XML
   var aDados = xmlhttp.responseXML;
// Recupera todos os elementos categoria do objeto
// XML como uma matriz
   var categorias = aDados.getElementsByTagName("categoria");
   for (var i = 0; i < categorias.length; i++) {
// Atribui a cat cada elemento da matriz
      cat = categorias[i];
// Recupera os valores dos nós id, nome e posts
      id = cat.getElementsByTagName("id")[0].firstChild.nodeValue;
      nome = cat.getElementsByTagName("nome")[0].firstChild.nodeValue;
      posts = cat.getElementsByTagName("posts")[0].firstChild.nodeValue;
// Chama a função que cria as linhas da tabela
      adicionaLinha(id, nome, posts)
   }
// Deste ponto em diante deixo para vocês
   var header = document.createElement("h2");
   var texto_header = document.createTextNode("Resultado: Posts por Categoria");
   header.appendChild(texto_header);
   document.getElementById("cabecalho").appendChild(header);
   document.getElementById("resultado").style.cssText = "border-bottom: 5px solid #404e2a;";
}

function adicionaLinha(id, nome, posts) {
   var linha = document.createElement("tr");
   var celula = criaCelula(id);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   celula = criaCelula(nome);
   celula.style.cssText = "padding-left: 5px;";
   linha.appendChild(celula);
   celula = criaCelula(posts);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   linha.style.cssText = "color: #404e2a;";
   document.getElementById("r_body").appendChild(linha);
}

function criaCelula(texto) {
   var celula = document.createElement("td");
   var textoNode = document.createTextNode(texto);
   celula.appendChild(textoNode);
   return celula;
}

Observação Final

Para a edição dos códigos JavaScript utilizei a extensão Perfomancing do Firefox (link abaixo) que mantém a indentação ao gravar o artigo.

Mas se você utiliza o excerpt do WP, ou seja, publica apenas um trecho do artigo, e não o artigo todo, cuidado! pois você terá que fazer isto no editor do CMS. E aí, babau, a indentação vai para o espaço. Tema abordado no post Edição de Código no Wordpress

E como resolvi: simplesmente na “marra”, gravei o excerpt direto na Tabela que armazena os posts no MySQL.

Dica da extensão obtida no blog Mr. TheChessMan.

powered by performancing firefox

Procuraremos seguir, neste e nos demais artigos, a nível mais abstrato, o próprio processo de tecer, visando estabelecer leis de formação na composição dos padrões gerados pela técnica repasso. Para isso será considerado a transcrição numérica do código repasso (veja exemplo abaixo) que contém as indicações necessárias tanto para a passagem dos fios do urdume nas folhas de liços como para a sequência de pedalagem durante a execução da trama.

Para maior comodidade na leitura e compreensão do assunto transcrevo, do artigo inicial, como ocorrem essas indicações. Recomendo, se você ainda não o fez, ler o artigo inicial.

• Leitura e passagem dos fios do urdume: da direita para a esquerda (pode também ser feita da esquerda para a direita) e de cima para baixo. Ou seja, no caso do exemplo acima, será passado o primeiro fio no último olho do liço 4, o segundo no último do 2, o terceiro no penúltimo do 4, o quarto no penúltimo do 2, o quinto no antipenúltimo do 4, o sexto no antipenúltimo do 2 (os seis últimos traços verticais do código), e assim sucessivamente. Ao término da passagem do código (par de liços 2 e 4 mais a esquerda repetidos três vezes) o processo retorna ao início (à direita) se repetindo até ocupar toda a largura do urdume ou a largura do tecido pretendido. Verifica-se, portanto, a existência de uma propriedade cíclica no uso do código. O mesmo se aplica para a sequência de pedalagem;
• Leitura e a sequência de pedalagem: Encontra-se transcrita abaixo do código (na prática não existe esta notação, aqui utilizada apenas para facilitar a explicação), indicando que será pisado o par de pedais 24 três vezes, o par 23, também 3 vezes, e assim por diante. Observe que a leitura do código para a sequência de pedalagem é feita da esquerda para a direita.

Outras informações do artigo inicial serão repetidas visando ganhos na compreensão. Isto posto, vamos adiante.

A técnica repasso é executada em teares com quatro pedais. Cada pedal está amarrado a uma folha de liços por onde se distribuem os fios que compõem o urdume.

O processo de tramagem é levado a efeito, pisando-se, sempre e de cada vez, dois pedais ao mesmo tempo. Efetivada a pisada de um dado par de pedais, os fios distribuídos nas folhas de liços correspondentes descem, enquanto, simultaneamente, os fios passados nas duas restantes sobem, dividindo o urdume em duas camadas. Entre estas é jogada a lançadeira (veja artigo inicial), o instrumento que contém o fio que executa a trama.

Desse modo, o fio da trama passará, de uma só vez, sobre todos os fios do urdume baixados e sob todos os levantados, proporcionando o entrelaçamento que comporá o tecido.

O urdume após armado, conforme indicado acima, torna-se um elemento imútavel durante todo o processo de tecer. Já a sequência de pedalagem, composta de pares de pedais pisados numa dada frequência, pode ou não seguir as especificações do código repassso, dando margem, em vista de sua flexibilidade, a uma certa inventividade. Frise-se, que como regra geral, os tecelões seguem as especificações estabelecidas no código.

Por essas razões, a partir daqui todo o detalhamento se desenrolará com ênfase na sequência de pedalagem – uma das leituras do código – mas tendo como pressupostos que o urdume é montado segundo o mesmo código e todo o processo de entrelaçamento antes explicado.

Relacionaremos, agora, a composição do desenho ou padrão (veja exemplos) por outros instrumentos que não o tear, à prática de tecelagem. O problema, então, se resume em como “preencher” uma matriz de n linhas e 2n colunas. Isto porque a cada par de pedais pisado – que corresponde a uma linha da matriz – equivalem a dois fios do urdume passados nas folhas de liços – que na matriz corresponde a duas colunas (figura 1).

A regra, portanto, consiste em saber o que, em cada linha da matriz, deve ser “marcado” ou não, o que corresponde na prática do tecer a saber sobre e sob que fios do urdume a trama passa a cada pedalagem. Entenda como marcado, a cor do fio da trama. Para os fins deste artigo utilizaremos a cor preta para a trama e o fundo branco para o urdume.

Serão marcados com preto todas as posições em que os números de cada linha (que representam os pedais pisados) coincidem com os números das colunas (que representam os fios do urdume). Assim, as marcações em preto indicarão a passagem do fio da trama sobre os fios do urdume e os espaços em branco o contrário.

Por exemplo, na figura 1, a primeira linha designada pelo par de pedais 14 tem todas as posições em que aparecem o 1 ou o 4, nas colunas, marcadas. Adotamos dois tipos de marcação – ponto e retângulo – apenas para melhor ressaltar o desenho. O ponto é utilizado quando não existe nenhum outro liço, antes ou após, que corresponda a um dos pedais.

A composição de um padrão se dá, no máximo, pelo simples preenchimento e distribuição de quatro linhas distintas – ou seja quatro pares de pedais entre os seis possíveis. As linhas variam de caso a caso, conforme a colocação dos fios do urdume nas quatro folhas de liços (números no sentido horizontal na figura 1). Na prática, as quatro linhas mencionadas, correspondem à pedalagem dos quatro pares de pedais 13, 14, 23 e 24. Os dois restantes – 12 e 34 – são usados para a passagem do fio de ligação – normalmente intercalado com um par do código – que servem para construir o tecido base sobre o qual os fios da trama se destacam para compor o padrão.

À parte do padrão compreendida entre os números nos sentidos horizontal e vertical – que correspondem às indicações contidas no código repasso – denominaremos de MOTIVO GERADOR (MG). Isto porque (lembra da propriedade cíclica mencionada no ínicio do artigo) o padrão como um todo é obtido por meio de repetições sucessivas do MG ou de parte dele no final, dependendo da largura do urdume ou do tecido a ser confeccionado.

É essa utilização reiterada do código repasso na enfiação dos fios do urdume e na pedalagem, que proporciona a composição do padrão tecido. Devido a esta propriedade cíclica sómente a sequência de pedalagem que corresponde ao MG será considerada para a definição das regras e classes de padrões.

Como consequência, podemos iniciar a pedalagem e a enfiação dos fios do urdume em qualquer ponto do código, desde que a ordem dos pares e dos fios seja mantida.

Por um ELEMENTO SIMPLES (ES) da sequência de pedalagem se entenderá um par de pedais pisado numa certa frequência (uma vez, duas vezes, …). Assim, cada tripla da sequência de pedalagem apresentada abaixo do código repasso no início do artigo, representa um ES.

O efeito visual gerado por um ES (por exemplo, 314), na suposição de que o urdume esteja armado apenas com os fios a ele correspondente é um retângulo como exibido na figura 1.

Já com o urdume armado segundo as especificações do código repasso da figura 1, o ES 314 gera toda a faixa inicial.

As diversas maneiras como se distribuem os ES nas sequências de pedalagem dão origem aos mais variados motivos geradores. Dentre estes destacam-se, por sua regularidade, três CLASSES BÁSICAS de sequências de pedalagem: a XADREZ (Xd) , a DIAGONAL (D) e a XIS (X) – diagramadas na figura 2.

As classes básicas foram, assim denominadas, de modo a se aproximar o máximo possível dos efeitos visuais gerados por seus respectivos MG. Denominaremos cada retângulo verde da figura 2 uma COMPONENTE da classe, pois é o modo específico como se combinam que caracteriza cada uma das classes mencionadas.

A COMPONENTE pode ser um ES – e assim denominada uma COMPONENTE SIMPLES – ou uma sequência de pedalagem satisfazendo à seguinte propriedade: alternância de dois pares de pedais pisados, de cada vez, com a mesma frequência ou não – denominadas COMPONENTE COMPOSTA. A figura 1 é um exemplo de COMPONENTE COMPOSTA, cuja sequência de pedalagem é descrita abaixo:

314 113 314 113 314

Para melhor entender o conceito veja um exemplo de um padrão constituído por COMPONENTES COMPOSTAS.

A classe de sequências de pedalagem constituída sómente de COMPONENTES SIMPLES ou ES será denominada de SIMPLES (S) e quando constituída de COMPONENTES COMPOSTA será denominada de COMPOSTA (C).

Assim, os exemplos mostrados na definição das CLASSES BÁSICAS são da classe XADREZ SIMPLES (XdS), DIAGONAL SIMPLES (DS) e XIS SIMPLES (XS), respectivamente. O exemplo anterior pertence à classe XADREZ COMPOSTA (XdC).

Uma variável com influência considerável no aspecto final do MG e consequentemente de todo o padrão, é a frequência com que são pisados os pares de pedais. Uma sequência de pedalagem pertencente a uma classe SIMPLES será UNIFORME (U) quando todos seus pares de pedais forem pisados o mesmo número de vezes (exemplo) e será VARIÁVEL (V) em caso contrário (exemplo). Apesar da aparência distinta dos padrões gerados nos dois últimos exemplos, veremos no próximo artigo que ambos têm a mesma regra de formação e pertencem a classe DIAGONAL SIMPLES.

O que se entenderá por uniformidade ou variabilidade de uma sequência de pedalagem de uma classe COMPOSTA será esclarecido, também, no próximo artigo.

A combinação dos ES – pares de pedais pisados numa certa frequência – obedece, em geral, nas sequências de pedalagem ao seguinte PRINCÍPIO DE CONTINUIDADE: os pares de pedais subsequente e antecedente, que fazem parte dos ES, devem ter um pedal em comum.

Portanto, de acordo com esse princípio, onde não se leva em conta a frequência teremos que:

• 13 deve ser seguido ou por 14 ou por 23
• 14 deve ser seguido ou por 13 ou por 24
• 23 deve ser seguido ou por 13 ou por 24
• 24 deve ser seguido ou por 14 ou por 23

Em todos os exemplos até então apresentados o princípio é aplicado.

A descontinuidade nas sequências pode ou não gerar “erros” nos padrões. A sequência de pedais que gera este padrão apresenta uma descontinuidade em seu início. Esta sequência corrigida, substituindo-se o ES inicial 323 pelo ES 324, gera este padrão (o código repasso é exibido no final, neste e em todos os exemplos. Compare os dois códigos.). Observa-se, assim, que um único ES mudado em uma sequência gera desenhos com diferenças acentuadas. Já este padrão, apesar de gerado por uma sequência com descontinuidades, pode ser considerado correto.

Além do mais, é raro, mas perfeitamente possível, uma sequência contínua gerar um desenho “errado” (mal formatado).

Essas considerações ressaltam os graus de dificuldade e complexidade do assunto em tratamento.

No próximo artigo tentaremos elucidar, a partir da compreensão das leis de formação dos padrões, questões como essas. AGUARDEM!

O detalhamento do código do experimento deve ser encarado como um exercício de um aprendiz em AJAX, como claramente explicitado no post original.

O que me motivou a compartilhar com vocês os detalhes foi a divulgação do experimento no Blog da Visie, pelo Elcio Ferreira, algumas (confesso, não muitas) solicitações enviadas através do formulário de contato do VICHE e, por último, o artigo publicado no Blog do Maujor.

Em função desse artigo, os botões (<input type=”button”>) foram substituídos por ícones (<input type = “image”>). Como consequência houve mudanças no código do experimento que passou a funcionar com múltiplos submit’s no formulário. A abordagem no Blog do Maujor é derecionada especificamente para questões de acessibilidade em que confronta as duas versões do experimento.

Esclareço que os ícones são utilizados em uma aplicação Web da Empresa em que atualmente trabalho, reforçando o comentário postado pelo Maurício em seu artigo. E, além do manual de operação, na maioria de seus formulários tem um ícone de ajuda, que acionado, exibe informações sobre a funcionalidade dos ícones utilizados acrescida das de preenchimento de seus campos (veja um exemplo na figura abaixo).

Sugestões são bem vindas e você pode ver agora, antes das explicações, a nova versão em funcionamento.

Contextualização

O experimento consiste de:

• uma tabela em MySQL;
• rotinas em Javascript AJAX que cria o objeto XMLHttpRequest e faz uso de alguns de seus métodos e propriedades;
• um programa em PHP que executa as requisições desse objeto do lado do servidor e retorna a resposta no formato JSON;
• uma página XHTML, a que você navega, com um formulário e o CSS para renderizá-la;
• códigos em Javascript para a construção dos parâmetros a serem passados para o programa PHP, o tratamento da resposta em JSON e sua exibição no formulário.

A tabela e o CSS, por serem simples, não serão tratados. A quem se interessar, o CSS pode ser visto diretamente no próprio código fonte da página. Do XHTML serão apresentadas apenas os excertos necessários à compreensão do experimento.

Criação do Objeto XMLHttpRequest

A sua criação não é tão complicada como você pode ver abaixo:

try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
xmlhttp = false;
}
}
}

O objeto, e consequentemente o experimento, foi testado no Firefox 1.5.0.4, no Opera 8.54, Netscape 7.2 e no IE 6 (os que tenho instalado). Observe que em xmlhttp teremos o objeto de acordo com o navegador em uso, ou em caso de não ter suporte, lhe é atribuído o valor false.

O Formulário

Os detalhes do experimento serão explicados com base nos elementos e campos do formulário.

a) Código inicial do elemento form

<form class="form-cadastro" name="form_cad" action=""
onsubmit="verifica(document.form_cad.opc.value); return false;" method="get">

Ao submeter o formulário, clicando em qualquer dos ícones, é chamada a função verifica() com o parâmetro correspondente à operação selecionada – incluir, alterar, excluir ou consultar. O parâmetro é setado em um <input type=”hidden”> antes de enviar o formulário.

O return false bloqueia o submit, uma vez que todo o processo é efetuado pelo objeto XMLHttpRequest, evitando-se o refresh da página. A função verifica() e outros detalhes são explicados abaixo.

b) O campo id e o link buscar

Funcionalidade:

Preencher o campo id e clicar no link buscar para realizar uma pesquisa na tabela.

Código XHTML:

<label id="lbl_cad" for="id_cad">Id:
<input type="text" id="id_cad" name="id_cad" size="8" value="" maxlength="12" />
<a xhref="javascript:busca(document.form_cad.id_cad.value)" mce_href="javascript:busca(document.form_cad.id_cad.value)"   >buscar</a></label><br />

Executa a função busca() ao se acionar o link, passando como parâmetro o valor digitado no campo id.

c) a função busca():

Será explicada por partes. A visão geral da função pode ser vista no corpo da página XHTML.

Inicialmente, a função recebe em param o valor digitado no campo id (linha 1), exibe a mensagem “Aguarde …” no campo nome (linha 2) e verifica se esse valor é numérico (linha 3). Caso contrário, exibe um alerta (linha 4), retorna o foco ao campo id (linha 5) e limpa o campo nome do formulário (linha 6).

01 function busca(param) {
02   document.getElementById("id_nome").value="Aguarde ...";
03   if (isNaN(param)) {
04      alert("VICHE! Tem algo de Errado");
05      get_focus('id_cad');
06      document.form_cad.elements[1].value = '';
07      return;
08   }

O método open é constituído de três parâmetros – método = “GET”, url = “rotina2.php?id=”+param e async = “true” – e tem como função preparar o objeto XMLHttpRequest para uma requisição. Quando ativado, requisita o programa PHP passando como parâmetro o valor informado no campo id através do método GET, de forma assíncrona.

   xmlhttp.open("GET", "rotina2.php?id="+param,true);

A função onreadystatechange (veja código abaixo) dispara um evento quando o estado da requisição muda. O if (linha 2) verifica se a requisição foi finalizada com sucesso (= 4) utilizando-se da propriedade readyState do objeto. Se sim, recebe o retorno de rotina2.php em formato JSON, através da propriedade responseText (linha 3) do objeto XMLHttpRequest. O alerta comentado no código, foi utilizado para checagem da resposta durante o processo de desenvolvimento.

Através da função eval() (linha 3) do JavaScript o formato JSON é convertido na matriz aDados, onde aDados[0] indica o resultado da pesquisa/operação e aDados[1] se foi realizada com sucesso.

O if (linha 4) verifica se nenhum registro foi encontrado na tabela. Em caso positivo, limpa os campos do formulário (linhas 5-8), habilita o ícone incluir e desabilita os ícones alterar e excluir (linhas 9-14). A classe imgfull exibe a imagem original do ícone e imgfade a imagem com opacidade para indicar que estão desabilitados. Funcionam sómente no IE e navegadores Mozilla, e foi colocada apenas a título de ilustração (encontram-se no CSS da página).

O else (linha 16) é executado quando o registro é localizado. As instruções (linhas 17-25) habilita os ícones alterar e excluir, desabilita o ícone incluir e exibe os dados no formulário a partir da matriz aDados (linhas 23-25).

A função get_focus() (linha 28) posiciona o foco no campo nome do formulário.

E, finalmente, o método send dispara a requisição (linha 31).

01 xmlhttp.onreadystatechange=function() {
02    if (xmlhttp.readyState==4) {
//     alert(xmlhttp.responseText);
03       var aDados=eval((xmlhttp.responseText));
04       if (aDados[0] == '0' && aDados[1] == 0) {
05          var campos = document.getElementsByTagName('input');
06        for (i=1;i<7;i++) {
07           campos[i].value = '';
08          }
09          document.getElementById("b_incluir").attributes["class"].value = "botao imgfull";
10          document.getElementById("b_incluir").disabled = false;
11          document.getElementById("b_alterar").attributes["class"].value = "botao imgfade";
12          document.getElementById("b_alterar").disabled = true;
13          document.getElementById("b_excluir").attributes["class"].value = "botao imgfade";
14          document.getElementById("b_excluir").disabled = true;
15      }
16      else {
17         document.getElementById("b_incluir").attributes["class"].value = "botao imgfade";
18         document.getElementById("b_incluir").disabled = true;
19         document.getElementById("b_alterar").attributes["class"].value = "botao imgfull";
20         document.getElementById("b_alterar").disabled = false;
21         document.getElementById("b_excluir").attributes["class"].value = "botao imgfull";
22         document.getElementById("b_excluir").disabled = false;
23         for (var i=0;i<aDados.length;i++) {
24            aDados[i]=unescape(aDados[i]);
25            document.form_cad.elements[i].value = aDados[i];
26         }
27      }
28      get_focus('id_nome');
29   }
30 }
31 xmlhttp.send(null)
}

d) Os ícones incluir, alterar, excluir e consultar

Código XHTML:

01 <input name="incluir" id="b_incluir" class="botao imgfade" type="image" disabled="disabled"
value="" title="Incluir Registro" alt="Incluir Registro" xsrc="inclui.gif" mce_src="inclui.gif"   onclick="seta_opc(1)" />

02 <input name="alterar" id="b_alterar" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="modifica.gif" mce_src="modifica.gif"   title="Alterar Registro" alt="Alterar Registro" onclick="seta_opc(2)" />

03 <input name="excluir" id="b_excluir" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="elimina.gif" mce_src="elimina.gif"   title="Excluir Registro" alt="Excluir Registro" onclick="seta_opc(3)" />

04 <input name="consultar" id="b_consultar" class="botao" type="image" xsrc="pesquisa.gif" mce_src="pesquisa.gif"
title="Consulta Registros" alt="Consulta Registros" onclick="seta_opc(4)" />

05 <input name="opc" type="hidden" id="opc" />

Os ícones incluir, alterar e excluir são inicialmente exibidos desabilitados e com opacidade (conforme rapidamente já explicado). O ícone consulta fica sempre habilitado e com sua imagem original.

O evento onclick em todos eles aciona a função seta_opc() cujo código é apresentado a seguir e que dispensa comentários por sua simplicidade:

function seta_opc(opc) {
document.form_cad.opc.value = opc;
}

e) A função verifica()

Executada quando o formulário é enviado, conforme mostrado no item a). Recebe como parâmetro a variável opc, checa qual ícone foi clicado e chama as funções executa() e consulta(), conforme o valor de opc.

function verifica(x) {
if (x == 1) executa('1');
if (x == 2) executa('2');
if (x == 3) executa('3');
if (x == 4) consulta();
}

f) A função consulta()

Quando o ícone consultar é clicado a função seta_opc(4) é executada e, em seguida, a função verifica(4), quando o formulário é submetido.

As instruções contidas na função já foram descritas anteriormente. Cabe apenas observar que a resposta é exibida na forma de um alerta do navegador e é passado o parâmetro con com valor 1.

function consulta() {
xmlhttp.open("GET", "rotina2.php?con=1",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null)
}

g) A função executa()

Executada quando os ícones incluir, alterar e excluir são clicados, de forma semelhante à explicada no item f).

Inicia com a simples verificação de preenchimento dos seis primeiros campos do formulário (linhas 2-10). Em seguida, é montada a string que será passada para o programa PHP, com base nos dados informados nos campos do formulário (linhas 11-15) e da operação selecionada (op). Faz a requisição (linha 16), dispara o evento (linha 17) e checa se a requisição foi realizada com sucesso (linha 18).

Armazena a resposta no formato JSON em aDados (linha 19), verifica qual a operação realizada e se teve sucesso e exibe um alerta (linhas 20-22), limpa os campos do formulário (linhas 24-26) e seta o foco para o campo id (linha 28).

01 function executa(op) {
02   var erro = 0;
03   for (i=1;i<6;i++) {
04      if (document.form_cad.elements[i].value == '') { erro = 1; }
05   }
06   if (erro == 1) {
07      alert("VICHE! Tem Campo em Branco");
08      get_focus('id_nome');
09      return;
10   }
11   var dados = '';
12   for (i=0;i<7;i++) {
13      dados = dados + "c" + i + "=" + document.form_cad.elements[i].value + "&";
14   }
15   var dados1="rotina2.php?op="+op+"&"+dados;
16   xmlhttp.open("GET", "rotina2.php?op="+op+"&"+dados,true);
17   xmlhttp.onreadystatechange=function() {
18      if (xmlhttp.readyState==4) {
19         var aDados=eval((xmlhttp.responseText));
20     if (aDados[0] == 1 && aDados[1] == "OK") { alert("Registro Incluído") };
21     if (aDados[0] == 2 && aDados[1] == "OK") { alert("Registro Alterado") };
22     if (aDados[0] == 3 && aDados[1] == "OK") { alert("Registro Deletado") };
23      }
24      var campos = document.getElementsByTagName('input');
25      for (i=0;i<7;i++) {
26           campos[i].value = '';
27      }
28      get_focus('id_cad');
29   }
30   xmlhttp.send(null)
31 }

h) A função get_focus()

function get_focus(campo) {
document.getElementById(campo).focus();
}

O Programa PHP

Para não se extender muito, serei breve na explicação do programa cujo trecho inicial é apresentado abaixo.

• linha 2: são extraídos os parâmetros;
• linhas 4-5: conecta e seleciona o banco;
• linhas 6-9: verifica se a requisição partiu do link buscar e executa a função checa_entrada();
• linhas 10-37: verifica se a requisição partiu de um dos ícones incluir, alterar e excluir, substitui os caracteres “[", ' e "," utilizados no formato JSON, antes de gravar na tabela, e executa a função executa();
• linhas 38-41: verifica se a requisição partiu do ícone consultar e executa a função consulta();
• linhas 42-54: checa se o registro existe na tabela. Se não, retorna como resposta "['0','0']“. Se sim, retorna uma string semelhante em formato JSON com os dados do registro selecionado;
• A função consulta(), cujo código não é apresentado, seleciona os primeiros 50 registros da tabela e retorna um texto com o id dos registros;
• E a função executa(), idem, constitui-se dos comandos SQL – INSERT, UPDATE e DELETE -, conforme o ícone selecionado.

01 <?php
02 extract ($_GET);
03 extract ($_POST);
04 $conn = mysql_connect("localhost","usuário","senha") or die ("Erro de Acesso");
05 mysql_select_db ("banco");
06 if ($id) {
07    $resposta = checa_entrada($id);
08    echo $resposta;
09 }
10 if ($op) {
11    $c1 = str_replace(',', '', $c1);
12    $c2 = str_replace(',', '', $c2);
13    $c3 = str_replace(',', '', $c3);
14    $c4 = str_replace(',', '', $c4);
15    $c5 = str_replace(',', '', $c5);
16    $c6 = str_replace(',', '', $c6);
17    $c1 = str_replace('[', '', $c1);
18    $c2 = str_replace('[', '', $c2);
19    $c3 = str_replace('[', '', $c3);
20    $c4 = str_replace('[', '', $c4);
21    $c5 = str_replace('[', '', $c5);
22    $c6 = str_replace('[', '', $c6);
23    $c1 = str_replace(']', '', $c1);
24    $c2 = str_replace(']', '', $c2);
25    $c3 = str_replace(']', '', $c3);
26    $c4 = str_replace(']', '', $c4);
27    $c5 = str_replace(']', '', $c5);
28    $c6 = str_replace(']', '', $c6);
29    $c1 = str_replace("'", '', $c1);
30    $c2 = str_replace("'", '', $c2);
31    $c3 = str_replace("'", '', $c3);
32    $c4 = str_replace("'", '', $c4);
33    $c5 = str_replace("'", '', $c5);
34    $c6 = str_replace("'", '', $c6);
35    $resposta = executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6);
36    echo $resposta;
37 }
38 if ($con) {
39    $resposta = consulta();
40    echo $resposta;
41 }
42 function checa_entrada($id_c) {
43    $SEL = mysql_query("SELECT * from cadastro1 WHERE id = '$id_c'");
44    $res = mysql_fetch_object($SEL);
45    if (!$res) {
46       $resposta = "['0','0']";
47    }
48    else {
49       $v = "','";
50       $resposta = "['".$res->id.$v.$res->nome.$v.$res->nome_mae.$v.$res->nome_pai
51       $resposta .= $v.$res->cidade_nasc.$v.$res->pais.$v.$res->telefone."']";
52    }
53    return $resposta;
54 }
55 function executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6) {
56 ...
57 }
58 function consulta() {
59 ...
60 }
61 ?>

O VICHE entrou definitivamente no espírito da Copa. Primeiro com pequenas mudanças no layout padrão – o qual pode ser “recuperado” na barra lateral de navegação no rótulo Temas -, e agora com um experimento que disponibiliza a tabela de jogos da primeira fase da competição, feito com a ferramenta AJAX.

O experimento é composto de consultas que se utilizam:

• do CSS Framework de Mike Stenhouse, com adaptações;
• de três tabelas MySQL (seleções, jogos e fases);
• de um programa em PHP; e
• de uma rotina bem simples em AJAX.

Os dados e os ícones das bandeiras dos países, apresentados no experimento, foram obtidos no site oficial da FIFA. A única mudança foi a dos horários dos jogos, com a redução de 5 horas correspondente ao fuso entre o Brasil e a Alemanha.

BRASIL HEXA!!! A emoção vai começar e a nossa torcida também.

O fato é que me empolguei com os resultados até agora obtidos com o programa em PHP para exibir os padrões dos tecidos gerados pela técnica Repasso, cujo preâmbulo, para quem deseja melhor se posicionar, foi publicado no post Tecelagem Popular no Triângulo Mineiro.

Por isso estou disponibilizando a primeira versão do programa, sem as prometidas e necessárias explicações, até para de imediato demonstrar visualmente a criatividade e riqueza embutidas neste fazer popular, me comprometendo dar a devida continuidade o mais breve possível.

Aproveito este momento para deixar registrado que os posts seguintes se restringirão ao detalhamento dos procedimentos da técnica Repasso que permitam o entendimento de como os padrões são gerados. Pelas mesmas razões éticas consideradas na época da pesquisa, o modelo “matemático” não será explicitado. Pois, com ele, é perfeitamente viável a automação da técnica Repasso, o que poderia trazer prejuízos sociais para os tecelões que a utilizam. Apesar de não ter conhecimento de algum interesse por parte da indústria em confeccionar produtos desta natureza, fica a ressalva.

Considerações feitas, voltemos ao programa PHP. Esta versão mostra apenas três exemplos de padrões, apesar de ter rotinas genéricas já codificadas. A idéia final será possibilitar, caso não haja restrições por parte da classe dos tecelões, que você construa padrões a partir de dados informados de acordo com as regras que serão definidas nos próximos artigos.

A geração de cada um dos três exemplos, que você pode ver clicando nos links abaixo, pode demorar a ser renderizado conforme a velocidade de sua conexão. São fornecidos o nome dado ao padrão e as iniciais do tecelão entre parêntesis (dados da pesquisa). As cores dos padrões foram definidas por mim e se não gostarem a culpa é toda minha.

Exemplo 1: Preguiça (MH);

Exemplo 2: Borboleta (AUG);

Exemplo 3: Dona Iraci (IRA).

UPDATE (20/03/2006): Corrigido problema de cores, no exemplo 2, que ocorria na renderização no IE e Opera.

Registro e submeto às críticas e sugestões meu primeiro experimento com a ferramenta AJAX. Atualmente, sou aluno do módulo AJAX I do curso online da Visie Treinamentos Web.

O experimento tem como objetivo demonstrar algumas funcionalidades dessa ferramenta sem a preocupação de um tratamento rigoroso de alguns procedimentos normalmente exigidos em uma aplicação comercial.

Trata das velhas e conhecidas operações de manutenção de uma tabela de dados – incluir, alterar, excluir e consultar -, bem simples, onde utilizo a técnica de passagem de parâmetros através da URL (“?’ e “&”) para um programa PHP que se encarrega de operacionalizar, do lado do servidor, essas tarefas. É claro que poderia ser adotado outros mecanismos para a passagem de parâmetros.

As respostas do programa PHP são retornadas no formato JSON. Por esta razão os caracteres “[", "]“, ‘ e “,” são eliminados dos campos antes da gravação na tabela.

Pela simplicidade da rotina desenvolvida não vale a pena me alongar em explicitar detalhes. Veja funcionando e dê o seu feedback. Fico na esperança de que tenha alguma utilidade.

Introdução

Estou iniciando uma série de artigos sobre o tema. Neste introduzirei o cenário, atores e seus papéis de forma bem geral e sucinta. Ou seja, apenas as informações necessárias para o entendimento de onde pretendo chegar.

O resultado final (a apresentação) consistirá de um programa PHP para gerar padrões originados da técnica REPASSO empregada em teares com 4 pedais que será o objetivo deste e dos próximos artigos. Óbvio que antes será fornecido o script.

Trata-se de uma técnica artesanal utilizada no Triângulo Mineiro, pelo menos na época da pesquisa realizada pela extinta Fundação Nacional Pró-Memória, vinculada ao Ministério da Cultura. Como me encontro afastado há bastante tempo da área de pesquisa cultural, não sei precisar se essa técnica permanece em uso na região.

A pesquisa teve uma abrangência muito maior do que a técnica repasso. Tratou de questões, entre outras, como o material têxtil empregado, preparação do fio, tingimento, os instrumentos necessários e de outras técnicas que não o repasso.

A abordagem da técnica repasso se baseava no seguinte princípio:

Que a classificação de uma coleção de objetos culturais seja realizada segundo o processo de sua produção, propiciando, assim, além da referenciação, uma maneira codificada de preservar aquele processo. Esta consiste no estabelecimento de uma notação simbólica – sugerida pela identificação de propriedades pertinentes ao fazer -, de uma ordenação destes símbolos e de regras de como manipulá-las segundo aquele fazer.

Ou seja, ao nos determos no fazer, e não somente no produto deste fazer, vislumbramos a potencialidade de todo o processo, que pode não estar revelada no universo dos produtos observados. Considero o princípio importante, na medida em que se trata de um modelo aberto – abstração que possibilita a compreensão de outros processos da realidade cultural brasileira em que se identifiquem propriedades e regras de operação sugeridas pelo modelo em questão.

O modelo já tinha sido empregado em outro trabalho de minha autoria “Regularidade do Trançado Entrecruzado em Diagonal”, artesanato indígena muito encontrado na região do Alto Xingu, utilizada para produzir padrões geométricos em cestas e outros objetos.

Assim, o que estaremos detalhando a partir daqui seguirá, em um nível mais abstrato, o próprio processo de tecer. Mas antes é preciso montar o cenário.

Cenário, Atores e Papéis

Serão considerados apenas algumas características e instrumentos do processo de tecer utilizados na técnica REPASSO, sem um detalhamento rigoroso, visando fornecer subsídios para o entendimento dos artigos que se seguirão a este.

a) Tear com quatro Pedais

Na figura acima estão legendados sómente os elementos do tear que facilitarão o entendimento dos demais artigos:

• Os quatro pedais, cada um conectado (amarrado) a uma folha de liço, ou seja, o pedal 1 com o liço 1 e assim por diante;
• Os liços (ou folhas de liços), utilizados para a montagem do urdume (a base do tecido). No desenho não dá para visualizar, mas são compostos de cordões amarrados da extremidade superior para a inferior com um olho (“furo”) no meio onde são passados os fios do urdume;
• As roldanas onde o cordão que as perpassam está amarrado a um par de liços. Destina-se a proporcionar a abertura do urdume ao se pisar um par de pedais. Isto é, ao pisar o par de pedais 13 os fios dos liços correspondentes abaixam enquanto os outros dois sobem (24). Na técnica REPASSO a pedalagem é sempre aos pares.

b) Lançadeira

Para tecer é necessário urdir e tramar. Acima já dei a dica da montagem do urdume e como se processa a movimentação dos liços a cada pedalagem de um par de pedais. Quando isto ocorre, a lançadeira é jogada na abertura do urdume com o fio da trama (veja figura) passando sobre todos os fios do urdume baixados e sob todos os levantados. A repetição deste procedimento gera o tecido e o seu padrão (desenho). Existem, é claro, outros passos, que não serão aqui tratados, para a obtenção do tecido final (batida do pente – localizado na frente dos liços – para apertar a trama e o uso dos rolos de urdimento e do tecido localizados da parte posterior e anterior do tear, entre outros).

A montagem do urdume e a sequência de pedalagem da trama obedecem regras determinadas pelo código REPASSO abaixo.

c) Código Repasso

O código repasso se apresenta sob a forma de uma tira de papel, com quatro pautas, nas quais figura uma série de tracinhos verticais ou, muito raramente, algarismos. Ele é o ator principal e serve para indicar tanto a passagem dos fios do urdume nos liços (urdir) como a sequência de pedalagem (tramar). Apesar disto ele é o mocinho da história. Assim, o script será desenvolvido a partir dele nos próximos capítulos, claro, levando-se em conta os atores coadjuvantes. Ah! os numeros (1, 2, 3 e 4) ou linhas horizontais indicam tanto as folhas de liços como os pedais.

Mas, antes de encerrar este capítulo vamos conhecer melhor o papel do ator principal.

• Leitura e passagem dos fios do urdume: da direita para a esquerda (pode também ser feita da esquerda para a direita) e de cima para baixo. Ou seja, no caso do exemplo acima, será passado o primeiro fio no último olho do liço 4, o segundo no último do 2, o terceiro no penúltimo do 4, o quarto no penúltimo do 2, o quinto no antipenúltimo do 4, o sexto no antipenúltimo do 2 (os seis últimos traços verticais do código), e assim sucessivamente. Ao término da passagem do código (par de liços 2 e 4 mais a esquerda repetidos três vezes) o processo retorna ao início (à direita) se repetindo até ocupar toda a largura do urdume ou a largura do tecido pretendido. Verifica-se, portanto, a existência de uma propriedade cíclica no uso do código. O mesmo se aplica para a sequência de pedalagem.;
• Leitura e a sequência de pedalagem: Encontra-se transcrita abaixo do código (na prática não existe esta notação, aqui utilizada apenas para facilitar a explicação), indicando que será pisado o par de pedais 24 três vezes, o par 23, também 3 vezes, e assim por diante. Lembro que a cada pisada é jogada a lançadeira para construir a trama. Observe que a leitura do código para a sequência de pedalagem é feita da esquerda para a direita.

Por enquanto é isso. Dê a sua opinião ela é muito importante.

UPDATE (19/03/2005): Publicado o post Tecelagem Popular no Triângulo Mineiro – O Trailer com a primeira versão do programa PHP.

Antes do boom em torno do AJAX utilizava, e ainda utilizo, uma rotina em PHP (veja funcionando aqui), gerando código javascript visando:

1. Evitar o refresh da página e a pesquisa ao banco de dados a cada digitação de um campo de uma tabela, para exibir a sua descrição ou uma mensagem de erro no caso de não existir;
2. Carregar permissões de acesso, após o usuário se logar, em aplicações disponibilizadas na Web.

Citando um exemplo para clarear as idéias (assim espero):

Um aplicativo multiusuário que permite alterar, incluir e excluir dados, entre outras funcionalidades, relativos à uma determinada modalidade de contrato com vários termos (número dos contratos). Cada usuário tem o seu login e senha e são cadastradas as modalidades de contratos e os termos que podem ser manipulados por ele. Ao se logar no aplicativo estas informações são carregadas do banco de dados para uma ou mais matrizes (array’s) e, a partir daqui, toda a digitação feita nos campos modalidade e termo é checada diretamente no cliente via javascript, inviabilizando acessos a contratos não permitidos sem a necessidade de pesquisa ao banco de dados a cada transação, evitando, ainda, o refresh da página.

Note que nesse exemplo real é necessário a utilização de matrizes com 2 dimensões. A rotina apresentada neste post utiliza-se de matrizes 1 x n (vetor) e trabalha com a tabela wp_categories do VICHE. O código em PHP da rotina é apresentado abaixo e as explicações dos pontos chaves colocadas entre /* e */. O XHTML é simples e não será explicado aqui.

Não é recomendado utilizar esta rotina para carregar tabelas com muitos dados (já fiz uso em tabelas com 400 registros e funcionou muito bem).

/*
…

conexão e seleção do banco (mysql_connect e mysql_select_db)

…
*/

<head>
<? php
echo “<script type=\”text/javascript\”>\n”;

/*
Definição da função categorias com os parâmetros cat (o campo id_cat do formulário), i e j (id dos campos onde serão exibidas as informações do nome da categoria e da quantidade de posts. Veja a chamada utilizada no html do exemplo:

<input name=”id_cat” id=”id_cat” type=”text” size=”4″ maxlength=”4″ onblur=”categorias(this.value, ‘desc_categoria’, ‘num_posts’)” /><br />
*/

echo “function categorias(cat , i, j) {\n

/*
Definição das matrizes onde serão armezanadas as informações do nome da categoria e da quantidade de posts publicados
*/

var categoria = new Array();
var num_posts = new Array();\n”;

/*
Leitura da tabela wp_categories e alimentação das matrizes
*/

$SEL_categoria = mysql_query (‘SELECT cat_ID, cat_name, category_count FROM wp_categories ORDER BY cat_ID’);
while ($rs = mysql_fetch_object($SEL_categoria)){
$cat_id = $rs->cat_ID;
$cat_nome = $rs->cat_name;
$num_posts = $rs->category_count;
echo ” categoria[$cat_id] = ‘$cat_nome’;\n”;
echo ” num_posts[$cat_id] = ‘$num_posts’;\n”;
}

/*
Crítica e display das informações nos campos correspondentes do formulário se informado corretamente. Caso contrário será exibida uma mensagem de erro.
*/

echo “if (categoria[cat]) { “;
echo ” document.forms[0].elements[i].value=categoria[cat];\n”;
echo ” document.forms[0].elements[j].value=num_posts[cat];\n”;
echo ” } else {“;
echo ” document.forms[0].elements[i].value=’Categoria não Cadastrada’;\n”;
echo ” document.forms[0].elements[j].value=”;\n”;
echo “}\n”;
echo ” document.forms[0].id_cat.focus();\n”;
echo ”
}\n”;
echo “</script>\n”
?>
</head>

Espero que tenham gostado e tenha alguma utilidade, apesar do uso cada vez mais frequente do AJAX, que ainda estou começando a aprender.