<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Assets (the Media class) — Django 1.8.19 documentation</title>
<link rel="stylesheet" href="../../_static/default.css" type="text/css" />
<link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '../../',
VERSION: '1.8.19',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="../../_static/jquery.js"></script>
<script type="text/javascript" src="../../_static/underscore.js"></script>
<script type="text/javascript" src="../../_static/doctools.js"></script>
<link rel="index" title="Index" href="../../genindex.html" />
<link rel="search" title="Search" href="../../search.html" />
<link rel="top" title="Django 1.8.19 documentation" href="../../contents.html" />
<link rel="up" title="Working with forms" href="index.html" />
<link rel="next" title="Templates" href="../templates.html" />
<link rel="prev" title="Creating forms from models" href="modelforms.html" />
<script type="text/javascript" src="../../templatebuiltins.js"></script>
<script type="text/javascript">
(function($) {
if (!django_template_builtins) {
// templatebuiltins.js missing, do nothing.
return;
}
$(document).ready(function() {
// Hyperlink Django template tags and filters
var base = "../../ref/templates/builtins.html";
if (base == "#") {
// Special case for builtins.html itself
base = "";
}
// Tags are keywords, class '.k'
$("div.highlight\\-html\\+django span.k").each(function(i, elem) {
var tagname = $(elem).text();
if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
var fragment = tagname.replace(/_/, '-');
$(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
}
});
// Filters are functions, class '.nf'
$("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
var filtername = $(elem).text();
if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
var fragment = filtername.replace(/_/, '-');
$(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
}
});
});
})(jQuery);
</script>
</head>
<body role="document">
<div class="document">
<div id="custom-doc" class="yui-t6">
<div id="hd">
<h1><a href="../../index.html">Django 1.8.19 documentation</a></h1>
<div id="global-nav">
<a title="Home page" href="../../index.html">Home</a> |
<a title="Table of contents" href="../../contents.html">Table of contents</a> |
<a title="Global index" href="../../genindex.html">Index</a> |
<a title="Module index" href="../../py-modindex.html">Modules</a>
</div>
<div class="nav">
« <a href="modelforms.html" title="Creating forms from models">previous</a>
|
<a href="../index.html" title="Using Django" accesskey="U">up</a>
|
<a href="../templates.html" title="Templates">next</a> »</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g" id="topics-forms-media">
<div class="section" id="s-form-assets-the-media-class">
<span id="form-assets-the-media-class"></span><h1>Form Assets (the <code class="docutils literal"><span class="pre">Media</span></code> class)<a class="headerlink" href="#form-assets-the-media-class" title="Permalink to this headline">¶</a></h1>
<p>Rendering an attractive and easy-to-use Web form requires more than just
HTML - it also requires CSS stylesheets, and if you want to use fancy
“Web2.0” widgets, you may also need to include some JavaScript on each
page. The exact combination of CSS and JavaScript that is required for
any given page will depend upon the widgets that are in use on that page.</p>
<p>This is where asset definitions come in. Django allows you to
associate different files – like stylesheets and scripts – with the
forms and widgets that require those assets. For example, if you want
to use a calendar to render DateFields, you can define a custom
Calendar widget. This widget can then be associated with the CSS and
JavaScript that is required to render the calendar. When the Calendar
widget is used on a form, Django is able to identify the CSS and
JavaScript files that are required, and provide the list of file names
in a form suitable for easy inclusion on your Web page.</p>
<div class="admonition-assets-and-django-admin admonition">
<p class="first admonition-title">Assets and Django Admin</p>
<p>The Django Admin application defines a number of customized
widgets for calendars, filtered selections, and so on. These
widgets define asset requirements, and the Django Admin uses the
custom widgets in place of the Django defaults. The Admin
templates will only include those files that are required to
render the widgets on any given page.</p>
<p class="last">If you like the widgets that the Django Admin application uses,
feel free to use them in your own application! They’re all stored
in <code class="docutils literal"><span class="pre">django.contrib.admin.widgets</span></code>.</p>
</div>
<div class="admonition-which-javascript-toolkit admonition">
<p class="first admonition-title">Which JavaScript toolkit?</p>
<p class="last">Many JavaScript toolkits exist, and many of them include widgets (such
as calendar widgets) that can be used to enhance your application.
Django has deliberately avoided blessing any one JavaScript toolkit.
Each toolkit has its own relative strengths and weaknesses - use
whichever toolkit suits your requirements. Django is able to integrate
with any JavaScript toolkit.</p>
</div>
<div class="section" id="s-assets-as-a-static-definition">
<span id="s-id1"></span><span id="assets-as-a-static-definition"></span><span id="id1"></span><h2>Assets as a static definition<a class="headerlink" href="#assets-as-a-static-definition" title="Permalink to this headline">¶</a></h2>
<p>The easiest way to define assets is as a static definition. Using this
method, the declaration is an inner <code class="docutils literal"><span class="pre">Media</span></code> class. The properties of the
inner class define the requirements.</p>
<p>Here’s a simple example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">django</span> <span class="k">import</span> <span class="n">forms</span>
<span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'pretty.css'</span><span class="p">,)</span>
<span class="p">}</span>
<span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'animations.js'</span><span class="p">,</span> <span class="s1">'actions.js'</span><span class="p">)</span>
</pre></div>
</div>
<p>This code defines a <code class="docutils literal"><span class="pre">CalendarWidget</span></code>, which will be based on <code class="docutils literal"><span class="pre">TextInput</span></code>.
Every time the CalendarWidget is used on a form, that form will be directed
to include the CSS file <code class="docutils literal"><span class="pre">pretty.css</span></code>, and the JavaScript files
<code class="docutils literal"><span class="pre">animations.js</span></code> and <code class="docutils literal"><span class="pre">actions.js</span></code>.</p>
<p>This static definition is converted at runtime into a widget property
named <code class="docutils literal"><span class="pre">media</span></code>. The list of assets for a <code class="docutils literal"><span class="pre">CalendarWidget</span></code> instance
can be retrieved through this property:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
</pre></div>
</div>
<p>Here’s a list of all possible <code class="docutils literal"><span class="pre">Media</span></code> options. There are no required options.</p>
<div class="section" id="s-css">
<span id="css"></span><h3><code class="docutils literal"><span class="pre">css</span></code><a class="headerlink" href="#css" title="Permalink to this headline">¶</a></h3>
<p>A dictionary describing the CSS files required for various forms of output
media.</p>
<p>The values in the dictionary should be a tuple/list of file names. See
<a class="reference internal" href="#form-asset-paths"><span class="std std-ref">the section on paths</span></a> for details of how to
specify paths to these files.</p>
<p>The keys in the dictionary are the output media types. These are the same
types accepted by CSS files in media declarations: ‘all’, ‘aural’, ‘braille’,
‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’ and ‘tv’. If
you need to have different stylesheets for different media types, provide
a list of CSS files for each output medium. The following example would
provide two CSS options – one for the screen, and one for print:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">'screen'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'pretty.css'</span><span class="p">,),</span>
<span class="s1">'print'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'newspaper.css'</span><span class="p">,)</span>
<span class="p">}</span>
</pre></div>
</div>
<p>If a group of CSS files are appropriate for multiple output media types,
the dictionary key can be a comma separated list of output media types.
In the following example, TV’s and projectors will have the same media
requirements:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">'screen'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'pretty.css'</span><span class="p">,),</span>
<span class="s1">'tv,projector'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'lo_res.css'</span><span class="p">,),</span>
<span class="s1">'print'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'newspaper.css'</span><span class="p">,)</span>
<span class="p">}</span>
</pre></div>
</div>
<p>If this last CSS definition were to be rendered, it would become the following HTML:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">"http://static.example.com/pretty.css"</span> <span class="nb">type</span><span class="o">=</span><span class="s2">"text/css"</span> <span class="n">media</span><span class="o">=</span><span class="s2">"screen"</span> <span class="n">rel</span><span class="o">=</span><span class="s2">"stylesheet"</span> <span class="o">/></span>
<span class="o"><</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">"http://static.example.com/lo_res.css"</span> <span class="nb">type</span><span class="o">=</span><span class="s2">"text/css"</span> <span class="n">media</span><span class="o">=</span><span class="s2">"tv,projector"</span> <span class="n">rel</span><span class="o">=</span><span class="s2">"stylesheet"</span> <span class="o">/></span>
<span class="o"><</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">"http://static.example.com/newspaper.css"</span> <span class="nb">type</span><span class="o">=</span><span class="s2">"text/css"</span> <span class="n">media</span><span class="o">=</span><span class="s2">"print"</span> <span class="n">rel</span><span class="o">=</span><span class="s2">"stylesheet"</span> <span class="o">/></span>
</pre></div>
</div>
</div>
<div class="section" id="s-js">
<span id="js"></span><h3><code class="docutils literal"><span class="pre">js</span></code><a class="headerlink" href="#js" title="Permalink to this headline">¶</a></h3>
<p>A tuple describing the required JavaScript files. See <a class="reference internal" href="#form-asset-paths"><span class="std std-ref">the
section on paths</span></a> for details of how to specify
paths to these files.</p>
</div>
<div class="section" id="s-extend">
<span id="extend"></span><h3><code class="docutils literal"><span class="pre">extend</span></code><a class="headerlink" href="#extend" title="Permalink to this headline">¶</a></h3>
<p>A boolean defining inheritance behavior for <code class="docutils literal"><span class="pre">Media</span></code> declarations.</p>
<p>By default, any object using a static <code class="docutils literal"><span class="pre">Media</span></code> definition will
inherit all the assets associated with the parent widget. This occurs
regardless of how the parent defines its own requirements. For
example, if we were to extend our basic Calendar widget from the
example above:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span> <span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'fancy.css'</span><span class="p">,)</span>
<span class="gp">... </span> <span class="p">}</span>
<span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'whizbang.js'</span><span class="p">,)</span>
<span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span>
</pre></div>
</div>
<p>The FancyCalendar widget inherits all the assets from its parent
widget. If you don’t want <code class="docutils literal"><span class="pre">Media</span></code> to be inherited in this way, add
an <code class="docutils literal"><span class="pre">extend=False</span></code> declaration to the <code class="docutils literal"><span class="pre">Media</span></code> declaration:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">extend</span> <span class="o">=</span> <span class="kc">False</span>
<span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span> <span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'fancy.css'</span><span class="p">,)</span>
<span class="gp">... </span> <span class="p">}</span>
<span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'whizbang.js'</span><span class="p">,)</span>
<span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span>
</pre></div>
</div>
<p>If you require even more control over inheritance, define your assets using a
<a class="reference internal" href="#dynamic-property"><span class="std std-ref">dynamic property</span></a>. Dynamic properties give you
complete control over which files are inherited, and which are not.</p>
</div>
</div>
<div class="section" id="s-media-as-a-dynamic-property">
<span id="s-dynamic-property"></span><span id="media-as-a-dynamic-property"></span><span id="dynamic-property"></span><h2><code class="docutils literal"><span class="pre">Media</span></code> as a dynamic property<a class="headerlink" href="#media-as-a-dynamic-property" title="Permalink to this headline">¶</a></h2>
<p>If you need to perform some more sophisticated manipulation of asset
requirements, you can define the <code class="docutils literal"><span class="pre">media</span></code> property directly. This is
done by defining a widget property that returns an instance of
<code class="docutils literal"><span class="pre">forms.Media</span></code>. The constructor for <code class="docutils literal"><span class="pre">forms.Media</span></code> accepts <code class="docutils literal"><span class="pre">css</span></code>
and <code class="docutils literal"><span class="pre">js</span></code> keyword arguments in the same format as that used in a
static media definition.</p>
<p>For example, the static definition for our Calendar Widget could also
be defined in a dynamic fashion:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="k">def</span> <span class="nf">_media</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="k">return</span> <span class="n">forms</span><span class="o">.</span><span class="n">Media</span><span class="p">(</span><span class="n">css</span><span class="o">=</span><span class="p">{</span><span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'pretty.css'</span><span class="p">,)},</span>
<span class="n">js</span><span class="o">=</span><span class="p">(</span><span class="s1">'animations.js'</span><span class="p">,</span> <span class="s1">'actions.js'</span><span class="p">))</span>
<span class="n">media</span> <span class="o">=</span> <span class="nb">property</span><span class="p">(</span><span class="n">_media</span><span class="p">)</span>
</pre></div>
</div>
<p>See the section on <a class="reference internal" href="#media-objects">Media objects</a> for more details on how to construct
return values for dynamic <code class="docutils literal"><span class="pre">media</span></code> properties.</p>
</div>
<div class="section" id="s-paths-in-asset-definitions">
<span id="s-form-asset-paths"></span><span id="paths-in-asset-definitions"></span><span id="form-asset-paths"></span><h2>Paths in asset definitions<a class="headerlink" href="#paths-in-asset-definitions" title="Permalink to this headline">¶</a></h2>
<p>Paths used to specify assets can be either relative or absolute. If a
path starts with <code class="docutils literal"><span class="pre">/</span></code>, <code class="docutils literal"><span class="pre">http://</span></code> or <code class="docutils literal"><span class="pre">https://</span></code>, it will be
interpreted as an absolute path, and left as-is. All other paths will
be prepended with the value of the appropriate prefix.</p>
<p>As part of the introduction of the
<a class="reference internal" href="../../ref/contrib/staticfiles.html"><span class="doc">staticfiles app</span></a> two new settings were added
to refer to “static files” (images, CSS, JavaScript, etc.) that are needed
to render a complete web page: <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a> and <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></code></a>.</p>
<p>To find the appropriate prefix to use, Django will check if the
<a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a> setting is not <code class="docutils literal"><span class="pre">None</span></code> and automatically fall back
to using <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><code class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></code></a>. For example, if the <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><code class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></code></a> for
your site was <code class="docutils literal"><span class="pre">'http://uploads.example.com/'</span></code> and <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a>
was <code class="docutils literal"><span class="pre">None</span></code>:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="kn">from</span> <span class="nn">django</span> <span class="k">import</span> <span class="n">forms</span>
<span class="gp">>>> </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span> <span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'/css/pretty.css'</span><span class="p">,),</span>
<span class="gp">... </span> <span class="p">}</span>
<span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'animations.js'</span><span class="p">,</span> <span class="s1">'http://othersite.com/actions.js'</span><span class="p">)</span>
<span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://uploads.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://othersite.com/actions.js"></script></span>
</pre></div>
</div>
<p>But if <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a> is <code class="docutils literal"><span class="pre">'http://static.example.com/'</span></code>:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://othersite.com/actions.js"></script></span>
</pre></div>
</div>
</div>
<div class="section" id="s-media-objects">
<span id="media-objects"></span><h2><code class="docutils literal"><span class="pre">Media</span></code> objects<a class="headerlink" href="#media-objects" title="Permalink to this headline">¶</a></h2>
<p>When you interrogate the <code class="docutils literal"><span class="pre">media</span></code> attribute of a widget or form, the
value that is returned is a <code class="docutils literal"><span class="pre">forms.Media</span></code> object. As we have already
seen, the string representation of a <code class="docutils literal"><span class="pre">Media</span></code> object is the HTML
required to include the relevant files in the <code class="docutils literal"><span class="pre"><head></span></code> block of your
HTML page.</p>
<p>However, <code class="docutils literal"><span class="pre">Media</span></code> objects have some other interesting properties.</p>
<div class="section" id="s-subsets-of-assets">
<span id="subsets-of-assets"></span><h3>Subsets of assets<a class="headerlink" href="#subsets-of-assets" title="Permalink to this headline">¶</a></h3>
<p>If you only want files of a particular type, you can use the subscript
operator to filter out a medium of interest. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">[</span><span class="s1">'css'</span><span class="p">])</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
</pre></div>
</div>
<p>When you use the subscript operator, the value that is returned is a
new <code class="docutils literal"><span class="pre">Media</span></code> object – but one that only contains the media of interest.</p>
</div>
<div class="section" id="s-combining-media-objects">
<span id="combining-media-objects"></span><h3>Combining <code class="docutils literal"><span class="pre">Media</span></code> objects<a class="headerlink" href="#combining-media-objects" title="Permalink to this headline">¶</a></h3>
<p><code class="docutils literal"><span class="pre">Media</span></code> objects can also be added together. When two <code class="docutils literal"><span class="pre">Media</span></code> objects are
added, the resulting <code class="docutils literal"><span class="pre">Media</span></code> object contains the union of the assets
specified by both:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="kn">from</span> <span class="nn">django</span> <span class="k">import</span> <span class="n">forms</span>
<span class="gp">>>> </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span> <span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'pretty.css'</span><span class="p">,)</span>
<span class="gp">... </span> <span class="p">}</span>
<span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'animations.js'</span><span class="p">,</span> <span class="s1">'actions.js'</span><span class="p">)</span>
<span class="gp">>>> </span><span class="k">class</span> <span class="nc">OtherWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'whizbang.js'</span><span class="p">,)</span>
<span class="gp">>>> </span><span class="n">w1</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="n">w2</span> <span class="o">=</span> <span class="n">OtherWidget</span><span class="p">()</span>
<span class="gp">>>> </span><span class="nb">print</span><span class="p">(</span><span class="n">w1</span><span class="o">.</span><span class="n">media</span> <span class="o">+</span> <span class="n">w2</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="s-media-on-forms">
<span id="media-on-forms"></span><h2><code class="docutils literal"><span class="pre">Media</span></code> on Forms<a class="headerlink" href="#media-on-forms" title="Permalink to this headline">¶</a></h2>
<p>Widgets aren’t the only objects that can have <code class="docutils literal"><span class="pre">media</span></code> definitions –
forms can also define <code class="docutils literal"><span class="pre">media</span></code>. The rules for <code class="docutils literal"><span class="pre">media</span></code> definitions
on forms are the same as the rules for widgets: declarations can be
static or dynamic; path and inheritance rules for those declarations
are exactly the same.</p>
<p>Regardless of whether you define a <code class="docutils literal"><span class="pre">media</span></code> declaration, <em>all</em> Form
objects have a <code class="docutils literal"><span class="pre">media</span></code> property. The default value for this property
is the result of adding the <code class="docutils literal"><span class="pre">media</span></code> definitions for all widgets that
are part of the form:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="kn">from</span> <span class="nn">django</span> <span class="k">import</span> <span class="n">forms</span>
<span class="gp">>>> </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span>
<span class="gp">... </span> <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span>
<span class="gp">... </span> <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span>
<span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span>
<span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">media</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span>
</pre></div>
</div>
<p>If you want to associate additional assets with a form – for example,
CSS for form layout – simply add a <code class="docutils literal"><span class="pre">Media</span></code> declaration to the
form:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span>
<span class="gp">... </span> <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span>
<span class="gp">... </span> <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span>
<span class="gp">...</span>
<span class="gp">... </span> <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span> <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span> <span class="s1">'all'</span><span class="p">:</span> <span class="p">(</span><span class="s1">'layout.css'</span><span class="p">,)</span>
<span class="gp">... </span> <span class="p">}</span>
<span class="gp">>>> </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span>
<span class="gp">>>> </span><span class="n">f</span><span class="o">.</span><span class="n">media</span>
<span class="go"><link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet" /></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/animations.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/actions.js"></script></span>
<span class="go"><script type="text/javascript" src="http://static.example.com/whizbang.js"></script></span>
</pre></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="sidebar">
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h3><a href="../../contents.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Form Assets (the <code class="docutils literal"><span class="pre">Media</span></code> class)</a><ul>
<li><a class="reference internal" href="#assets-as-a-static-definition">Assets as a static definition</a><ul>
<li><a class="reference internal" href="#css"><code class="docutils literal"><span class="pre">css</span></code></a></li>
<li><a class="reference internal" href="#js"><code class="docutils literal"><span class="pre">js</span></code></a></li>
<li><a class="reference internal" href="#extend"><code class="docutils literal"><span class="pre">extend</span></code></a></li>
</ul>
</li>
<li><a class="reference internal" href="#media-as-a-dynamic-property"><code class="docutils literal"><span class="pre">Media</span></code> as a dynamic property</a></li>
<li><a class="reference internal" href="#paths-in-asset-definitions">Paths in asset definitions</a></li>
<li><a class="reference internal" href="#media-objects"><code class="docutils literal"><span class="pre">Media</span></code> objects</a><ul>
<li><a class="reference internal" href="#subsets-of-assets">Subsets of assets</a></li>
<li><a class="reference internal" href="#combining-media-objects">Combining <code class="docutils literal"><span class="pre">Media</span></code> objects</a></li>
</ul>
</li>
<li><a class="reference internal" href="#media-on-forms"><code class="docutils literal"><span class="pre">Media</span></code> on Forms</a></li>
</ul>
</li>
</ul>
<h3>Browse</h3>
<ul>
<li>Prev: <a href="modelforms.html">Creating forms from models</a></li>
<li>Next: <a href="../templates.html">Templates</a></li>
</ul>
<h3>You are here:</h3>
<ul>
<li>
<a href="../../index.html">Django 1.8.19 documentation</a>
<ul><li><a href="../index.html">Using Django</a>
<ul><li><a href="index.html">Working with forms</a>
<ul><li>Form Assets (the <code class="docutils literal"><span class="pre">Media</span></code> class)</li></ul>
</li></ul></li></ul>
</li>
</ul>
<div role="note" aria-label="source link">
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../../_sources/topics/forms/media.txt"
rel="nofollow">Show Source</a></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="../../search.html" method="get">
<div><input type="text" name="q" /></div>
<div><input type="submit" value="Go" /></div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<h3>Last update:</h3>
<p class="topless">Mar 10, 2018</p>
</div>
</div>
<div id="ft">
<div class="nav">
« <a href="modelforms.html" title="Creating forms from models">previous</a>
|
<a href="../index.html" title="Using Django" accesskey="U">up</a>
|
<a href="../templates.html" title="Templates">next</a> »</div>
</div>
</div>
<div class="clearer"></div>
</div>
</body>
</html>
distrib
>
Mageia
>
6
>
armv7hl
>
media
>
core-updates
>
by-pkgid
>
65530c6176058f9b54858c3b4f6385e6
>
files
>
948
