Gerador de formulários HTML em PHP orientado a objetos (parte 1)

Os frameworks para desenvolvimento Web nunca estiveram tão em voga quanto atualmente. De fato, utilizá-los é bem melhor do que reinventar a roda, apesar do esforço despendido no apendizado no aprendizado da ferramenta.

O código fonte de seu framework favorito é uma fonte abundante de técnicas de programação. Não hesite em vasculhá-lo. Foi olhando um desses códigos (no caso, o do Yii Framework), que cogitei em escrever um gerador de formulários HTML, como prova de conceito.

Mas, para quê reimplementar, se já está no framework? No meu caso, pelo próprio aprendizado, para dominar técnicas novas. E, diga-se de passagem, não sou o único a fazer esse tipo de coisa. Obviamente, essas experimentações jamais entrarão em produção. A não ser que, é claro, fiquem tão boas e estáveis que se tornem um novo framework.

A ideia por detrás do gerador de formulários é bastante simples: a partir de uma conjunto de objetos, cada qual representando um controle de formulário e com propriedades corretamente configuradas, obter código o HTML válido correspondente. Não sei quando a vocês, mas acho digitar HTML um porre (abre tag, põe id, configura atributos, etc., etc. e, no fim, acaba esquecendo de fechar a tag). Por que não, então, escrever esses formulários em puro PHP, e deixá-lo gerar o chato do HTML?

De acordo? Vamos lá.

Comecei codificando uma classe genérica e abstrata, para servir de base a todos os controles, chamada GFormControl. Segue o código abaixo:

<?php
  abstract class GFormControl {

    private $_id;                         // ID do campo de formulário
    private $_label;                      // Texto descritivo do campo
    private $_attributes;                 // Outros atributos do campo
    private $_labelSeparator = '
';  // Separador entre o "label" e o campo

    public function  __construct($id, $label = '', $attributes = array()) {
      $this->setId($id);
      $this->setLabel($label);
      $this->setAttributes($attributes);
    }

    /********** SETTERS **********/

    protected function setId($value) {
      $this->_id = $value;
      return $this;
    }

    public function setLabel($value) {
      $this->_label = $value;
      return $this;
    }

    public function setLabelSeparator($value) {
      $this->_labelSeparator = $value;
      return $this;
    }

    public function setAttributes($value) {
      $this->_attributes = $value;
      return $this;
    }

    /********** GETTERS **********/

    public function getId() {
      return $this->_id;
    }

    public function getLabel() {
      return $this->_label;
    }

    abstract protected function getOpenTag();

    abstract protected function getCloseTag();

    public function getLabelSeparator() {
      return $this->_labelSeparator;
    }

    public function getAttributes() {
      return $this->_attributes;
    }

    /***** MÉTODOS PROTEGIDOS *****/

    // Rendereiza a abertura da DIV
    protected function renderOpenDiv() {
      return "<div>\n\t";
    }

    // Renderiza o LABEL que contém a descrição do campo
    protected function renderLabel($labelSeparator = null) {

      if (! is_null($labelSeparator))
        $this->setLabelSeparator($labelSeparator);

      return "<label for="{$this->getId()}">{$this->getLabel()}</label>{$this->getLabelSeparator()}\n\t";

    }

    // Renderiza o campo de formulário propriamente dito
    protected function renderField() {

      $html = $this->getOpenTag() . " id='{$this->getId()}' ";
      $html .= $this->renderFieldAttributes();
      $html .= $this->getCloseTag();

      return $html;

    }

    // Renderiza os atributos do campo de formulário
    protected function renderFieldAttributes() {
      $html = '';

      if ($attrs = $this->getAttributes())
        foreach($attrs as $attr => $value)
          $html .= "{$attr}='{$value}' ";

      return $html;
    }

    // Renderiza o fechamento da DIV
    protected function renderCloseDiv() {
      return "\n</div>\n";
    }

    /***** MÉTODOS PÚBLICOS */

    /*
     * Renderiza o campo de formulário, de acordo com os parâmetros configurados.
     * Para tanto, efetua chamadas aos métodos protegidos responsáveis pela
     * renderização das diferentes partes.
     * Cada campo será renderizado da seguinte forma:
     *
     *
<div>
     *   <label for="nome_campo">Descrição do campo</label>
     *
     *</div>
     */

    public function render($labelSeparator = null) {

      $html = $this->renderOpenDiv();
      $html .= $this->renderLabel($labelSeparator);
      $html .= $this->renderField();
      $html .= $this->renderCloseDiv();

      return $html;

    }

  }

Por que uma classa abstrata? Simples: não desejo criar instâncias dessa classe. Sua razão de ser é servir como ancestral para as classes de cada controle de formulário. Além da própria classe, os métodos protegidos getOpenTag() e getCloseTag() estão também marcados como abstract. Isso significa que qualquer classe que estenda GFormControl fica obrigada a implementar esses dois métodos.

O único método público da classe (desconsiderando-se os getters) é o render(), responsável por gerar o código HTML correspondente ao campo de formulário. Esse método faz chamadas a outros métodos, cada qual responsável por renderizar uma parte diferente do campo. Os métodos renderXXX() foram definidos como protegidos – isso significa que são visíveis somente pelas classes descendentes, pois não foram projetadas para serem chamados pelo usuário final.

Em suma, esta classe define muita coisa, mas não faz nada. E agora? Veja como ficou o código de quatro controles:

<?php
  // Campo de texto
  class GTextBox extends GFormControl {

    protected function getOpenTag() {
      return "<input type="text" />';
    }

  }

  /***********************************************************/

  // Campo de senha
  class GPassword extends GFormControl {

    protected function getOpenTag() {
      return "<input type="password" />';
    }

  }

  /***********************************************************/

  // Caixa de verificação
  class GCheckBox extends GFormControl {

    protected function getOpenTag() {
      return "<input type="checkbox" />';
    }

  }

  /***********************************************************/

  // Botão de enviar
  class GSubmit extends GFormControl {

    protected function getOpenTag() {
      return "<input type="submit" />';
    }

    /* No caso do botão de enviar, foi necessária uma sobrecarga (override)
     * dos métodos renderField() e render(), porque o controle não tem um
     * LABEL associado a ele, e o texto que iria no LABEL vai no atributo
     * VALUE do próprio controle.
     */

    protected function renderField() {
      $html = $this->getOpenTag() . " id='{$this->getId()}' value='{$this->getLabel()}' ";
      $html .= $this->renderFieldAttributes();
      $html .= $this->getCloseTag();

      return $html;
    }

    public function render() {
      $html = $this->renderOpenDiv();
      $html .= $this->renderField();
      $html .= $this->renderCloseDiv();

      return $html;

    }
  }

?>

Nos casos dos controles de caixa de texto, caixa de senha e caixa de verificação, basta implementar os métodos getOpenTag() e getCloseTag(), para que tudo o que foi definido no ancestral funcione apropriadamente. No caso do botão de enviar, foram necessárias algumas modificações nos métodos definidos na classe base, pois seu comportamento foge um pouco ao padrão (vide comentários no código).

Isso feito, podemos escrever um formulário simples de login da seguinte forma:

<?php   $usuario = new GTextBox('usuario', 'Usuário:', array('maxlength'=-->50, 'size'=>15));
  $senha = new GPassword('senha', 'Senha:', array('maxlength'=>50, 'size'=>15));
  $guardarInfo = new GCheckBox('guardar_info', 'Guardar informações?');
  $enviar = new GSubmit('enviar', 'Enviar');

  echo $usuario->render();
  echo $senha->render();
  echo $guardarInfo->render(' ');
  echo $enviar->render();

?>

O código HTML gerado, por seu turno, é o seguinte:

<div>
	<label for="usuario">Usuário:</label>

	<input id="usuario" maxlength="50" size="15" type="text" /></div>
<div>
	<label for="senha">Senha:</label>

	<input id="senha" maxlength="50" size="15" type="password" /></div>
<div>
	<label for="guardar_info">Guardar informações?</label>

	<input id="guardar_info" type="checkbox" /></div>
<div>
	<input id="enviar" type="submit" value="Enviar" /></div>

Aparência do formulário gerado

Acho que devo parabenizá-lo por ter chegado até aqui na leitura deste post. E, se entendeu o que eu quis fazer, parabéns duplos!!

Todavia, o trabalho está bem longe de terminar. Falta escrever os demais controles de formulário e, se você notou bem, o código sequer gera a tag <form>. Isso é tarefa para as próximas partes.