PRADO para PHP 5: Active Controls (AJAX)
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:
<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” />
<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:
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:
<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” />
<!– 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!
Comentários