Commits

Benoît Bryon committed 779ae50

Added two template-based customization examples in demo project

Comments (0)

Files changed (10)

demo/demoapp/templates/demoapp/base.html

         <h3>{% trans "Fields order and form decomposition" %}</h3>
           <h4><a href="{% url demoapp:fields_order %}">{% trans "Fields order" %}</a></h4>
           <h4><a href="{% url demoapp:fieldsets %}">{% trans "Fieldsets" %}</a></h4>
+        <h3>{% trans "Template-based customization" %}</h3>
+          <h4><a href="{% url demoapp:two_custom_fields %}">{% trans "Customizing a few fields" %}</a></h4>
+          <h4><a href="{% url demoapp:altering_all_elements %}">{% trans "Customizing all elements in a form" %}</a></h4>
     </div>
   </body>
 </html>

demo/demoapp/templates/demoapp/includes/altering_all_elements_builtin.html

+<form>
+  {{ form.non_field_errors }}
+
+  {% with form.subject as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.message as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.sender_email as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.sender_nickname as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.cc_myself as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+  
+  <input type="submit">
+</form>

demo/demoapp/templates/demoapp/includes/altering_all_elements_formrenderingtools.html

+{% load form_layouts %}
+
+<form>
+  {% form layout="altering_all_elements" %}
+  <input type="submit">
+</form>

demo/demoapp/templates/demoapp/includes/two_custom_fields_builtin.html

+<form>
+  {{ form.non_field_errors }}
+
+  {% with form.subject as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      <label for="id_subject">{{ field.label }}</label>
+      {{ field }}
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.message as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      <label for="id_subject">Your message</label>
+      {{ field }}
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.sender_email as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      <label for="id_subject">{{ field.label }}</label>
+      {{ field }}
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.sender_nickname as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      {{ field }}
+      <label for="id_subject">{{ field.label }}</label>
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+
+  {% with form.cc_myself as field  %}
+    <div class="fieldWrapper">
+      {{ field.errors }}
+      <label for="id_subject">{{ field.label }}</label>
+      {{ field }}
+      <span class="helptext">{{ field.help_text }}</span>
+    </div>
+  {% endwith %}
+  
+  <input type="submit">
+</form>

demo/demoapp/templates/demoapp/includes/two_custom_fields_formrenderingtools.html

+{% load form_layouts %}
+
+<form>
+  {% form layout="two_custom_fields" %}
+  <input type="submit">
+</form>

demo/demoapp/templates/form_layouts/altering_all_elements/field/default.html

+{% if field.is_hidden %}
+{{ field }}
+{% else %}
+{% load form_layouts %}
+<div class="formItem{% if field.errors %} hasErrors{% endif %}{% if field.field.required %} required{% endif %} {{ field.html_name }}">
+  {% field_errors %}
+  {{ field }}
+  {% label %}
+  {% help_text %}
+</div>
+{% endif %} 

demo/demoapp/templates/form_layouts/two_custom_fields/field/sender_nickname.html

+{% if field.is_hidden %}
+{{ field }}
+{% else %}
+{% load form_layouts %}
+<div class="formItem{% if field.errors %} hasErrors{% endif %}{% if field.field.required %} required{% endif %} {{ field.html_name }}">
+  {% field_errors %}
+  {{ field }}
+  {% label %}
+  {% help_text %}
+</div>
+{% endif %} 

demo/demoapp/templates/form_layouts/two_custom_fields/label/message.html

+<label for="{{ field_id }}" class="{% if field.field.required %} required{% endif %}">Your message</label> 

demo/demoapp/urls.py

     url(r'^as-p/$', 'as_p', name='as_p'),
     url(r'^fields-order/$', 'fields_order', name='fields_order'),
     url(r'^fieldsets/$', 'fieldsets', name='fieldsets'),
+    url(r'^two-custom-fields/$', 'two_custom_fields', name='two_custom_fields'),
+    url(r'^altering all elements/$', 'altering_all_elements', name='altering_all_elements'),
 )

demo/demoapp/views.py

     form = FakeContactForm({'subject': u''})
     template = 'fieldsets'
     return comparison_page(request, title, description, form, template)
+
+
+def two_custom_fields(request):
+    title = _("Customizing specific fields in a form")
+    description = _("""What if you want to customize only a few fields in a form?</p>
+<p>In this example, we want to do two things:</p>
+<ol>
+  <li>change label of "message" field by "Your message"</li>
+  <li>change order of field and label for "sender nickname" field</li>
+</ol>
+<p>What happened in the Django-formrenderingtools side?</p>
+<ul>
+  <li>we declared a new "form layout". It is the directory name of a set of templates.</li>
+  <li>we created two template files in demo/demoapp/templates/form_layouts/two_custom_fields/</li>
+  <li>one is called label/message.html</li>
+  <li>the other is called field/sender_nickname.html</li>
+  <li>the two templates were copied then adapted from djc/formrenderingtools/templates/form_layouts/default/...</li>
+</ul>""")
+    form = FakeContactForm({'subject': u''})
+    template = 'two_custom_fields'
+    return comparison_page(request, title, description, form, template)
+
+
+def altering_all_elements(request):
+    title = _("Altering all elements at once for a specific form")
+    description = _("""What if you want to customize all elements in a form?</p>
+<p>In this example, we want to display field before label for each field.</p>
+<p>What happened in the Django-formrenderingtools side?</p>
+<ul>
+  <li>we declared a new form layout: "altering_all_elements"</li>
+  <li>we created a template file in demo/demoapp/templates/form_layouts/altering_all_elements/</li>
+  <li>it is called field/default.html</li>
+  <li>the templates was copied then adapted from djc/formrenderingtools/templates/form_layouts/default/field/default.html</li>
+</ul>""")
+    form = FakeContactForm({'subject': u''})
+    template = 'altering_all_elements'
+    return comparison_page(request, title, description, form, template)