← Back to branch summary

~ubuntu-branches/ubuntu/saucy/python-django/saucy-updates

« back to all changes in this revision

Viewing changes to docs/topics/forms/media.txt

  • Committer: Package Import Robot
  • Author(s): Luke Faraone, Jakub Wilk, Luke Faraone
  • Date: 2013-05-09 15:10:47 UTC
  • mfrom: (1.1.21) (4.4.27 sid)
  • Revision ID: package-import@ubuntu.com-20130509151047-aqv8d71oj9wvcv8c
Tags: 1.5.1-2
[ Jakub Wilk ]
* Use canonical URIs for Vcs-* fields.

[ Luke Faraone ]
* Upload to unstable.

Show diffs side-by-side

added added

removed removed

Lines of Context:
docs/topics/forms/media.txt
66
66
through this property::
67
67
 
68
68
    >>> w = CalendarWidget()
69
 
    >>> print w.media
70
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
71
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
72
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
 
69
    >>> print(w.media)
 
70
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
71
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
72
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
73
73
 
74
74
Here's a list of all possible ``Media`` options. There are no required options.
75
75
 
110
110
 
111
111
If this last CSS definition were to be rendered, it would become the following HTML::
112
112
 
113
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet" />
114
 
    <link href="http://media.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet" />
115
 
    <link href="http://media.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet" />
 
113
    <link href="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet" />
 
114
    <link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet" />
 
115
    <link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet" />
116
116
 
117
117
``js``
118
118
~~~~~~
139
139
    ...         js = ('whizbang.js',)
140
140
 
141
141
    >>> w = FancyCalendarWidget()
142
 
    >>> print w.media
143
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
144
 
    <link href="http://media.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
145
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
146
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
147
 
    <script type="text/javascript" src="http://media.example.com/whizbang.js"></script>
 
142
    >>> print(w.media)
 
143
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
144
    <link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
 
145
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
146
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
 
147
    <script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
148
148
 
149
149
The FancyCalendar widget inherits all the media from it's parent widget. If
150
150
you don't want media to be inherited in this way, add an ``extend=False``
159
159
    ...         js = ('whizbang.js',)
160
160
 
161
161
    >>> w = FancyCalendarWidget()
162
 
    >>> print w.media
163
 
    <link href="http://media.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
164
 
    <script type="text/javascript" src="http://media.example.com/whizbang.js"></script>
 
162
    >>> print(w.media)
 
163
    <link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
 
164
    <script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
165
165
 
166
166
If you require even more control over media inheritance, define your media
167
167
using a :ref:`dynamic property <dynamic-property>`. Dynamic properties give
195
195
Paths in media definitions
196
196
--------------------------
197
197
 
198
 
.. versionchanged:: 1.3
199
 
 
200
198
Paths used to specify media can be either relative or absolute. If a path
201
199
starts with ``/``, ``http://`` or ``https://``, it will be interpreted as an
202
200
absolute path, and left as-is. All other paths will be prepended with the value
221
219
    ...         js = ('animations.js', 'http://othersite.com/actions.js')
222
220
 
223
221
    >>> w = CalendarWidget()
224
 
    >>> print w.media
 
222
    >>> print(w.media)
225
223
    <link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />
226
224
    <script type="text/javascript" src="http://uploads.example.com/animations.js"></script>
227
225
    <script type="text/javascript" src="http://othersite.com/actions.js"></script>
229
227
But if :setting:`STATIC_URL` is ``'http://static.example.com/'``::
230
228
 
231
229
    >>> w = CalendarWidget()
232
 
    >>> print w.media
 
230
    >>> print(w.media)
233
231
    <link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />
234
232
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
235
233
    <script type="text/javascript" src="http://othersite.com/actions.js"></script>
252
250
to filter out a medium of interest. For example::
253
251
 
254
252
    >>> w = CalendarWidget()
255
 
    >>> print w.media
256
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
257
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
258
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
 
253
    >>> print(w.media)
 
254
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
255
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
256
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
259
257
 
260
 
    >>> print w.media['css']
261
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
258
    >>> print(w.media)['css']
 
259
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
262
260
 
263
261
When you use the subscript operator, the value that is returned is a new
264
262
Media object -- but one that only contains the media of interest.
282
280
 
283
281
    >>> w1 = CalendarWidget()
284
282
    >>> w2 = OtherWidget()
285
 
    >>> print w1.media + w2.media
286
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
287
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
288
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
289
 
    <script type="text/javascript" src="http://media.example.com/whizbang.js"></script>
 
283
    >>> print(w1.media + w2.media)
 
284
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
285
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
286
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
 
287
    <script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
290
288
 
291
289
Media on Forms
292
290
--------------
306
304
 
307
305
    >>> f = ContactForm()
308
306
    >>> f.media
309
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
310
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
311
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
312
 
    <script type="text/javascript" src="http://media.example.com/whizbang.js"></script>
 
307
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
308
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
309
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
 
310
    <script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
313
311
 
314
312
If you want to associate additional media with a form -- for example, CSS for form
315
313
layout -- simply add a media declaration to the form::
325
323
 
326
324
    >>> f = ContactForm()
327
325
    >>> f.media
328
 
    <link href="http://media.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
329
 
    <link href="http://media.example.com/layout.css" type="text/css" media="all" rel="stylesheet" />
330
 
    <script type="text/javascript" src="http://media.example.com/animations.js"></script>
331
 
    <script type="text/javascript" src="http://media.example.com/actions.js"></script>
332
 
    <script type="text/javascript" src="http://media.example.com/whizbang.js"></script>
 
326
    <link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
 
327
    <link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet" />
 
328
    <script type="text/javascript" src="http://static.example.com/animations.js"></script>
 
329
    <script type="text/javascript" src="http://static.example.com/actions.js"></script>
 
330
    <script type="text/javascript" src="http://static.example.com/whizbang.js"></script>