goncin@wordpress.com:~$ _

Linux, programação e toda sorte de nerdices

PRADO para PHP 5: Active Controls (AJAX)

Post publicado originalmente em http://www.devfranca.com.br/2009/08/14/prado-para-php-5-active-controls-ajax/ em 14 de agosto de 2009.

Olá pessoal! Este é o segundo post da série sobre o framework PRADO para PHP 5. Se você chegou aqui diretamente, leia o primeiro post, pois estenderemos o projeto iniciado ali.

No primeiro projeto, implementamos um formulário simples que utiliza o método postback para o envio de requisições ao servidor web. O inconveniente desse método é o recarregamento da página inteira para que a exibição do resultado do processamento seja possível.

Uma forma melhor de obter o mesmo resultado, sem a desagradável atualização da página toda, é utilizar o método callback, que por sua vez se utiliza da tecnologia AJAX (Asynchronous Javascript and XML), capaz de atualizar apenas a região da página efetivamente alterada.

Quem desenvolve para a web sabe que trabalhar com AJAX pode ser penoso, principalmente se lidarmos diretamente com Javascript e XMLHTTPRequest. Felizmente, o Prado nos dá uma grande ajuda neste ponto, encapsulando as requisições AJAX em seus próprios componentes. E o que é melhor: em muitos casos, não é necessário sequer mexer com o Javascript!

Como assim? Vejamos como isso funciona na prática. Para começar, vamos fazer uma cópia de nosso projeto olamundo e renomeá-la como olamundo-2.0.

No arquivo /protected/pages/Home.page, vamos trocar os controles TTextBox, TButton e TLabel pelos seus “irmãos ativos”: TActiveTextBox, TActiveButton e TActiveLabel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <com:TForm>
    Qual é o seu nome? <com:TActiveTextBox ID="txtNome" />&nbsp;
    <com:TActiveButton ID="btnEnviar" Text="Enviar" OnClick="Page.btnEnviarClick" />
    <br />
    <com:TActiveLabel ID="lblCumprimento" />
  </com:TForm>
</body>
</html>

Essa é toda a alteração necessária neste arquivo.

No arquivo /protected/pages/Home.php, vamos acrescentar apenas uma linha ao início do arquivo, antes da declaração da classe:

<?php

Prado::using('System.Web.UI.ActiveControls.*');

class Home extends TPage {

  public function btnEnviarClick($sender, $param) {
    $this->lblCumprimento->Text = "Olá, " . $this->txtNome->Text . "!";
  }

}

Como os controles ativos, por padrão, não são carregados automaticamente pelo PRADO, aquela linha serve para dizer ao framework que queremos utilizá-los. E isso é tudo. Você poderá ver o novo projeto em ação aqui e, se tiver olhos atentos, perceberá que a tela não “pisca” mais antes da exibição da saudação.

Para os mais “cismados”, e também para deixar nosso usuário ciente do que está acontecendo nos bastidores, vamos fazer um novo upgrade do projeto, agora para a versão olamundo-2.1. Acrescentaremos um notificador de atividade que será exibida na página enquanto a requisição AJAX vai e volta: uma div vermelha contendo o texto “Aguarde…”.

Vamos mexer no /protected/pages/Home.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- STYLE acrescentado -->
<style>
  #notif {
    background-color:#F00;
    color: #FFF;
    position:absolute;
    visibility:hidden;
  }
</style>
</head>
<body>
  <!-- DIV acrescentada -->
  <div id="notif">Aguarde...</div>
  <h1>Olá, mundo!</h1>
  <com:TForm>
    Qual é o seu nome? <com:TActiveTextBox ID="txtNome" />&nbsp;
    <!-- Propriedades ClientSide Acrescentadas -->
    <com:TActiveButton ID="btnEnviar" Text="Enviar" OnClick="Page.btnEnviarClick"
      ClientSide.OnLoading="$('notif').style.visibility='visible'"
      ClientSide.OnLoaded="$('notif').style.visibility='hidden'" />
    <br />
    <com:TActiveLabel ID="lblCumprimento" />
  </com:TForm>
</body>
</html>

Foram acrescentados um estilo (para configurar a DIV com fundo vermelho, posicionamento absoluto e sem visibilidade inicial), a DIV propriamente dita e configuradas duas novas propriedades do componente TActiveButton: ClientSide.OnLoading e ClientSide.OnLoaded. A primeira propriedade contém um código Javascript (finalmente!) a ser executado quando a requisição é despachada para o servidor e a segunda o código para quando a resposta chegar. Em nosso projeto, a lógica é simples: enviou a requisição, exibe a DIV; a resposta chegou, oculta a DIV. O resultado disso? Veja aqui.

Os mais atentos vão notar que, nas duas linhas Javascript foi utilizado o atalho $(‘notif’) ao invés do longo e tedioso document.getElementById(‘notif’). Isso porque o PRADO também não tem a intenção de reinventar a roda, e, ao contrário, incorpora algumas das melhores soluções desenvolvidas por terceiros. No caso do Javascript, o PRADO já traz consigo o Prototype (de onde vem o atalho $) e o script.aculo.us, entre outros.

Fico por aqui com este post, esperando ter sido didático na minha exposição. Para terminar, zipei as três versões do olamundo, juntamente com o PRADO, e fiz upload aqui, para facilitar. Para quem tem uma instalação PHP 5, basta descompactar num diretório acessível pelo seu servidor web.

Um abraço, e até a próxima!

Anúncios

Uma resposta para “PRADO para PHP 5: Active Controls (AJAX)

  1. Pingback: Apresentando o Yii Framework para PHP « goncin@wordpress.com:~$ _

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: