Como usar o Django Widget Tweaks e Customizar Campos do Formulário

Imagem Django Widget Tweaks

Em algum momento você como programador precisará customizar os campos do seu formulário, Django prover uma forma relativamente simples através da sua API de formulários de fazer isso, porém, na minha opinião em alguns casos não é a melhor forma de se fazer, continue lendo e descubra outra possibilidade.

Contextualização

Imagine a situação, geralmente muito comum, você decide usar o Twitter Bootstrap ou qualquer outro framework para o desenvolvimento de interfaces no seu projeto, tudo muito bem feito por sinal. Basicamente trabalhar com esses frameworks consiste em adicionar uma classe no seu elemento HTML, eles vem com arquivos de CSS, JS, SASS e por aí vai, certo?

API de Formulários do Django

Então, quando estamos usando o Django como framework back-end construir formulários HTML é uma tarefa extremamente simples, você só precisa criar uma classe que herde de ModelForm e informar qual modelo deverá fornecer os campos para o formulário e, nesse momento, certamente você precisará atribuir a estes campos gerados automaticamente a partir do modelo uma classe para que a estilização seja corretamente aplicada, você reescreve o campo que deseja adicionar a classe que dará a estilização adequada, é nesse momento que considero essa forma a menos adequada! Por quê? Por conta do DRY (Don’t Repeat Youself), poxa, se estou usando a criação do formulário a partir do modelo que já tem todos os campos que desejo e ainda tenho reescrever eles só por conta de uma classe CSS? É disso que não gosto!

A seguir um exemplo de como se resolve isso de forma nativa, podemos dizer assim.

class PessoaForm(forms.ModelForm):
  nome = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))

  class Meta:
    model = Pessoa
    fields = '__all__'

E qual seria a melhor forma de resolver o problema?

É nessa hora que entra o package Django Widget Tweaks, este é basicamente uma “extensão” e permite que alteremos os atributos dos campos HTML gerados automaticamente no próprio HTML! Bom, com ele você não precisa reescrever os campos no nível do Python/Django, após instalado no projeto é disponibilizado algumas Templates Tags que ajudam nessa tarefa. Entendeu porque considero essa a melhor forma de se fazer customizações nos atributos? Vamos ver um exemplo.

Você poderá usar uma Template Tag ou um Filtro, como no exemplo a seguir.

{% load widget_tweaks %}

<!-- alterando o atributo type do campo -->
{% render_field form.search_query type="search" %}

<!-- adicionando/alterando diversos atributos -->
{% render_field form.text rows="20" cols="20" title="Olá Mundo - Django Widget Tweaks!" class="form-control" %}

<!-- adicionando mais classes no campo -->
{% render_field form.title class+="css_class_1 css_class_2" %}

<!-- Variáveis de templates podem ser usadas como valores dos atributos -->
{% render_field form.text placeholder=form.text.label %}

<!-- USANDO OS FILTROS -->

<!-- alterando o atributo type do campo -->
{{ form.search_query|attr:"type:search" }}

<!-- adicionando/alterando diversos atributos -->
{{ form.text|attr:"rows:20"|attr:"cols:20"|attr:"title:Olá Mundo - Django Widget Tweaks!" }}

<!-- atributos sem parâmetros -->
{{ form.search_query|attr:"autofocus" }}

<!-- Variáveis de templates podem ser usadas como valores dos atributos -->
{{ form.text|attr:"placeholder:form.text.label" }}

<!-- adicionando 2 classes css extras no elemento HTML -->
{{ form.title|add_class:"css_class_1 css_class_2" }}

Conclusão

Bom, põe uma coisa na sua cabeça, não existe bala de prata! Não existe aquela lib, framework ou tecnologia que resolve todos os problemas do melhor jeito de todos! Certamente tem programadores que discordam da forma que considero a melhor e isso é muito importante e necessário! Eu mesmo tenho situações em mente que essa já não seria a melhor forma, portanto, use sempre o bom senso, faça da forma mais reaproveitável possível naquele momento e para os requisitos do projeto.

Ahhh, não posso deixar de pedir sua participação nessa conversa, comenta aí o que achou do post, concorda com essa forma de trabalhar? Tem alguma objeção ou gostaria de adicionar algo? Se tiver, manda ver, aqui a construção é coletiva. ¯\_(ツ)_/¯

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *