win-django.com

Formクラスからメディアを定義する

template内にJavascript/CSSを定義する以外に、DjangoはFormクラスからも
定義すること出来ることにより、動的にtemplateを修正することなくJavascript/CSSを
定義出来ます。

Form作成

ToggleFormText plug-in exampleを例に進めていきます。
まずは、Formクラスを使ってページを作成して表示してみましょう。

forms.py

from django import forms
from django.forms import Textarea

class ContactForm(forms.Form):
    name = forms.CharField(max_length = 50)
    email = forms.EmailField()
    message = forms.CharField(widget = Textarea)

watermark.html

<html>
<head>
    <title></title>
</head>
<body>
    <H1>Contact Form</H1>
    <table>
    {{ form.as_table }}
    </table>
</body>
</html>

表示したページは以下のようになります。

Form Mediaを使ったFormクラスへ

まずはToggleFormText plug-in exampleからpluginをダウンロードし設置します。

メディア定義を追加し、ToggleFormText plug-in exampleの仕様にあわせて属性を追加します。
CSSはAdmin siteのものを流用してみました。

forms.py

from django import forms
from django.forms import Textarea

class ContactForm(forms.Form):
    name = forms.CharField(
        max_length = 50, 
        widget = forms.TextInput(
            attrs = {'size': 50, 'title': 'name (required)'}))
    email = forms.EmailField()
    message = forms.CharField(widget = Textarea)

    class Media:
        js = ('/media/js/jquery.js',
              '/media/js/watermark/jquery.toggleformtext.js',
        )

        css = {
            'all': ('/media/css/base.css', '/media/css/forms.css')
        }

templateのhead内にメディアオブジェクトを格納する変数を追加します。

watermark.html

<html>
<head>
    <title></title>
    {{ form.media }}
</head>
<body>
    <H1>Contact Form</H1>
    <table>
    {{ form.as_table }}
    </table>
</body>
</html>

作業は以上です。表示してみましょう。