Media)Lien vers cette rubrique#L’affichage d’un formulaire Web attractif et ergonomique exige plus que du code HTML simple, il nécessite également des feuilles de style CSS, et si vous voulez utiliser des composants « Web 2.0 » plaisants, il sera peut-être nécessaire d’inclure aussi du code JavaScript sur chaque page. La combinaison exacte de CSS et de JavaScript nécessaire pour une page donnée dépend des composants de formulaire employés sur cette page.
\nC’est là où la définition de fichiers annexes intervient. Django permet d’associer différents fichiers comme des feuilles de style et des scripts à des formulaires et des composants qui ont besoin de ces fichiers. Par exemple, si vous voulez utiliser un calendrier pour afficher les champs date, vous pouvez définir un composant Calendrier personnalisé. Ce composant peut ensuite être associé à des fichiers CSS et JavaScript requis pour afficher le calendrier. Quand le composant Calendrier est utilisé dans un formulaire, Django est capable d’identifier les fichiers CSS et JavaScript nécessaires et de fournir la liste des noms de fichiers au formulaire de manière à ce qu’ils puissent être facilement inclus dans la page Web.
La façon la plus simple de définir des fichiers annexes est sous forme de définition statique. Avec cette méthode, la déclaration se fait dans une classe Media interne. Les propriétés de la classe interne définissent les exigences.
Voici un exemple simple :
\nfrom django import forms\n\nclass CalendarWidget(forms.TextInput):\n class Media:\n css = {\n 'all': ('pretty.css',)\n }\n js = ('animations.js', 'actions.js')\nCe code définit un composant CalendarWidget, qui est basé sur TextInput. Chaque fois que CalendarWidget sera utilisé dans un formulaire, ce dernier sera amené à inclure le fichier CSS pretty.css et les fichiers JavaScript animations.js et actions.js.
Cette définition statique est convertie au moment de l’exécution en une propriété de composant nommée media. La liste des fichiers annexes d’une instance de composant CalendarWidget peut être obtenue par cette propriété :
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\nVoici une liste de toutes les options possibles de Media. Il n’y a pas d’option obligatoire.
cssLien vers cette rubrique#Un dictionnaire décrivant les fichiers CSS requis par les différentes formes de support d’affichage.
\nLes valeurs du dictionnaire doivent être composées de tuples/listes de noms de fichiers. Consultez la section sur les chemins pour plus de détails sur la manière de définir les chemins de ces fichiers.
\nLes clés du dictionnaire correspondent aux types de support d’affichage. Ce sont les mêmes types que les fichiers CSS acceptent dans les déclarations « media » : “all”, “aural”, “braille”, “embossed”, “handheld”, “print”, “projection”, “screen”, “tty” and “tv”. Si vous avez besoin de feuilles de style différentes en fonction de types de support différents, indiquez des listes de fichiers CSS correspondant à chacun de ces types. L’exemple suivant fournit deux options CSS, une pour l’affichage à l’écran et l’autre pour l’impression :
\nclass Media:\n css = {\n 'screen': ('pretty.css',),\n 'print': ('newspaper.css',)\n }\nSi un groupe de fichiers CSS convient à plusieurs types de support d’affichage, la clé de dictionnaire peut être une liste de types de support d’affichage séparés par des virgules. Dans l’exemple suivant, les télévisions et les projecteurs ont les mêmes exigences en terme de support :
\nclass Media:\n css = {\n 'screen': ('pretty.css',),\n 'tv,projector': ('lo_res.css',),\n 'print': ('newspaper.css',)\n }\nSi cette dernière définition de CSS devait être affichée, cela produirait le code HTML suivant :
\n<link href="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet" />\n<link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet" />\n<link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet" />\njsLien vers cette rubrique#Un tuple décrivant les fichiers JavaScript nécessaires. Consultez la section sur les chemins pour plus de détails sur la manière de définir les chemins de ces fichiers.
\nextendLien vers cette rubrique#Une valeur booléenne définissant le comportement de l’héritage des déclarations Media.
Par défaut, tout objet utilisant une définition statique de Media hérite de tous les fichiers annexes associés au composant parent, et ceci quelle que soit la manière dont le parent définit ses propres exigences. Par exemple, si nous devions améliorer notre composant Calendar basique de l’exemple ci-dessus :
>>> class FancyCalendarWidget(CalendarWidget):\n... class Media:\n... css = {\n... 'all': ('fancy.css',)\n... }\n... js = ('whizbang.js',)\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\nLe composant FancyCalendar hérite de tous les fichiers annexes de son composant parent. Si vous ne souhaitez pas que Media soit hérité de cette façon, ajoutez une déclaration extend=False à la déclaration de Media:
>>> class FancyCalendarWidget(CalendarWidget):\n... class Media:\n... extend = False\n... css = {\n... 'all': ('fancy.css',)\n... }\n... js = ('whizbang.js',)\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\nSi vous avez besoin de pouvoir contrôler encore plus l’héritage, définissez vos fichiers annexes en utilisant une propriété dynamique. Les propriétés dynamiques vous donnent un contrôle total sur les fichiers hérités et ceux qui ne le seront pas.
\nMedia comme propriété dynamiqueLien vers cette rubrique#Si vous avez besoin d’effectuer certaines manipulations encore plus sophistiquées sur les fichiers annexes requis, vous pouvez définir directement la propriété media. Cela peut être réalisé en définissant une propriété du composant qui renvoie une instance de forms.Media. le constructeur de forms.Media accepte les paramètres nommés css and js dans le même format que celui qui est utilisé pour les définitions statiques de fichiers annexes.
Par exemple, la définition statique de notre composant de calendrier pourrait tout aussi bien être réalisée de manière dynamique :
\nclass CalendarWidget(forms.TextInput):\n def _media(self):\n return forms.Media(css={'all': ('pretty.css',)},\n js=('animations.js', 'actions.js'))\n media = property(_media)\nConsultez la section sur les objets Media pour plus de détails sur la manière de construire des valeurs de retour pour les propriétés dynamiques media.
Les chemins utilisés pour définir les fichiers annexes peuvent être relatifs ou absolus. Si un chemin commence par /, http:// ou https://, il sera interprété comme un chemin absolu et laissé tel quel. Tous les autres chemins seront préfixés par la valeur appropriée.
Dans le cadre de l’introduction de l”application staticfiles, deux nouveaux réglages ont été ajoutés pour faire référence aux « fichiers statiques » (images, CSS, JavaScript, etc.) nécessaires à l’affichage d’une page Web complète : STATIC_URL et STATIC_ROOT.
Pour trouver le bon préfixe à utiliser, Django contrôle si le réglage STATIC_URL est différent de None et se rabat sur MEDIA_URL en cas de besoin. Par exemple, si le réglage MEDIA_URL de votre site est 'http://uploads.example.com/' et que STATIC_URL vaut None:
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n... class Media:\n... css = {\n... 'all': ('/css/pretty.css',),\n... }\n... js = ('animations.js', 'http://othersite.com/actions.js')\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://uploads.example.com/animations.js"></script>\n<script type="text/javascript" src="http://othersite.com/actions.js"></script>\nMai si STATIC_URL vaut 'http://static.example.com/':
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://othersite.com/actions.js"></script>\nMediaLien vers cette rubrique#Lorsque vous interrogez l’attribut media d’un composant ou d’un formulaire, la valeur renvoyée est un objet forms.Media. Comme nous l’avons déjà vu, la représentation textuelle d’un objet Media contient le code HTML nécessaire pour inclure les fichiers concernés dans le bloc <head> de votre page HTML.
Cependant, les objets Media ont certaines autres propriétés intéressantes.
Si vous ne souhaitez obtenir que les fichiers d’un type particulier, vous pouvez utiliser l’opérateur d’indice pour filtrer le support qui vous intéresse. Par exemple :
\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n\n>>> print(w.media['css'])\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\nLorsque vous employez l’opérateur d’indice, la valeur renvoyée est un nouvel objet Media, mais qui ne contient que les fichiers qui vous intéressent.
MediaLien vers cette rubrique#Les objets Media peuvent aussi être fusionnés. Lorsque l’on additionne deux objets Media, l’objet Media résultant contient l’union des fichiers annexes contenus dans les deux objets :
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n... class Media:\n... css = {\n... 'all': ('pretty.css',)\n... }\n... js = ('animations.js', 'actions.js')\n\n>>> class OtherWidget(forms.TextInput):\n... class Media:\n... js = ('whizbang.js',)\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\nMedia pour les formulairesLien vers cette rubrique#Les composants ne sont pas les seuls objets qui peuvent posséder des définitions media, les formulaires peuvent aussi en définir. Les règles concernant les définitions media des formulaires sont les mêmes que pour les composants : les déclarations peuvent être statiques ou dynamiques ; les règles des chemins et de l’héritage de ces déclarations sont également identiques.
Que vous définissiez une déclaration media ou non, tous les objets Form possèdent une propriété media. La valeur par défaut de cette propriété est le résultat de la fusion de toutes les définitions media de tous les composants du formulaire :
>>> from django import forms\n>>> class ContactForm(forms.Form):\n... date = DateField(widget=CalendarWidget)\n... name = CharField(max_length=40, widget=OtherWidget)\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\nSi vous souhaitez associer des fichiers annexes supplémentaires à un formulaire, par exemple des règles CSS pour la mise en forme du formulaire, ajoutez simplement une déclaration Media au formulaire :
>>> class ContactForm(forms.Form):\n... date = DateField(widget=CalendarWidget)\n... name = CharField(max_length=40, widget=OtherWidget)\n...\n... class Media:\n... css = {\n... 'all': ('layout.css',)\n... }\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />\n<link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet" />\n<script type="text/javascript" src="http://static.example.com/animations.js"></script>\n<script type="text/javascript" src="http://static.example.com/actions.js"></script>\n<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>\n