1 .. -*- coding: utf-8 -*- |
|
2 |
|
3 |
|
4 Les ressources externes |
|
5 ======================= |
|
6 |
|
7 Les ressources externes à une application regroupent l'ensemble des fichiers qui seront chargés dans l'entête des pages XHTML générées. |
|
8 Elles sont donc constituées principalement des feuilles de styles, des scripts javascripts et de certaines ressources graphiques comme l'icône favicon par exemple. |
|
9 |
|
10 |
|
11 Liste des feuilles de styles utilisées par défaut |
|
12 ------------------------------------------------- |
|
13 |
|
14 Les fichiers par défaut se trouve dans les sources du framework. En voici le tableau récapitulatif: |
|
15 |
|
16 +--------------------------------------+----------------------------------------------------+-----------------------------------+ |
|
17 | Fichiers | Utilisation | Vues ou widget concernés | |
|
18 +======================================+====================================================+===================================+ |
|
19 | web/data/cubicweb.acl.css | formulaires pour le contrôle aux accès | editgroups, security | |
|
20 | web/data/cubicweb.calendar.css | calendriers | onemonthcal, oneweekcal | |
|
21 | web/data/cubicweb.calendar_popup.css | popup calendriers | DateWidget | |
|
22 | web/data/cubicweb.css | gabarit principal de l'application | | |
|
23 | web/data/cubicweb.facets.css | surcharge du `MIT Simile Exhibit Web Widgets`_ | filter_box | |
|
24 | web/data/cubicweb.form.css | formulaires | creation, inline-creation, copya, | |
|
25 | | | inline-edition, edition, muledit | |
|
26 | web/data/cubicweb.html_tree.css | style pour les widgets d'arborescence | | |
|
27 | web/data/cubicweb.ie.css | dédié aux comportements de Internet Explorer | | |
|
28 | web/data/cubicweb.iprogress.css | style pour les widgets d'avancement | | |
|
29 | web/data/cubicweb.login.css | page et popup d'authentification | logform | |
|
30 | web/data/cubicweb.mailform.css | style utilisé dans les formulaires d'envoi de mail | | |
|
31 | web/data/cubicweb.preferences.css | style pour la page des préférences utilisateurs | systemepropertiesform | |
|
32 | web/data/cubicweb.print.css | style dédié à l'impression | | |
|
33 | web/data/cubicweb.schema.css | style dédié au schéma de l'application | | |
|
34 | web/data/cubicweb.suggest.css | surcharge utilisée pour les suggestions | | |
|
35 | web/data/cubicweb.tablesorter.css | surcharge pour le tri dans les tableau | | |
|
36 | web/data/cubicweb.tableview.css | surcharge pour le tri sélectif | | |
|
37 | web/data/cubicweb.timetable.css | style pour le widget Timetable | timetable | |
|
38 | web/data/jquery.autocomplete.css | surcharge pour le widget `jQuery autocompleter`_ | | |
|
39 | web/data/jquery.treeview.css | surcharge pour le widget `jQuery treeview`_ | | |
|
40 | web/data/pygments.css | style pour la coloration des blocs de code | | |
|
41 | web/data/timeline-bundle.css | surcharge du `MIT Simile Timeline Web Widgets`_ | TimelineWidget | |
|
42 | web/data/ui.tabs.css | surcharge pour le widget Tabs de `jQuery UI`_ | | |
|
43 +--------------------------------------+----------------------------------------------------+-----------------------------------+ |
|
44 |
|
45 .. _MIT Simile Exhibit Web Widgets: http://code.google.com/p/simile-widgets/wiki/Exhibit |
|
46 .. _MIT Simile Timeline Web Widgets: http://code.google.com/p/simile-widgets/wiki/Timeline |
|
47 .. _jQuery autocompleter: http://www.dyve.net/jquery/?autocomplete |
|
48 .. _jQuery treeview: http://plugins.jquery.com/project/treeview |
|
49 .. _jQuery UI: http://docs.jquery.com/UI |
|
50 |
|
51 D'une manière générale, si vous réutiliser un nom de fichier existant, vous écrasez le contenu du fichier d'origine. |
|
52 |
|
53 |
|
54 Changer les feuilles de styles |
|
55 ------------------------------ |
|
56 |
|
57 Configuration statique |
|
58 ~~~~~~~~~~~~~~~~~~~~~~ |
|
59 Dans les sources de votre nouveau cube, vous devez éditer le fichier *data/external_resources* et définir la variable de configuration: |
|
60 |
|
61 # CSS stylesheets to include in HTML headers |
|
62 # uncomment the line below to use template specific stylesheet |
|
63 STYLESHEETS = DATADIR/cubicweb.css |
|
64 |
|
65 Les styles sont définis dans le fichier external_resources par 3 variables: |
|
66 |
|
67 - la variable STYLESHEETS est défine pour tous les types de médias |
|
68 - la variable STYLESHEETS_PRINT sont les styles applicables pour l'impression |
|
69 - la variable IE_STYLESHEETS s'appliquent uniquement aux versions d'Internet Explorer |
|
70 |
|
71 En copiant le fichier d'origine **cubicweb.css**, il est alors possible de modifier le gabarit de base du framework CubicWeb. |
|
72 Il est également possible de réutiliser le fichier d'origine. |
|
73 |
|
74 En créant un nouveau fichier **cubes.(le_nom_du_cube).css** dans le répertoire **data/** et en ajoutant une directive css @import, il est possible de réutiliser les styles définis par défaut: |
|
75 |
|
76 @import url("cubicweb.css"); |
|
77 |
|
78 |
|
79 Chargement dynamique de feuilles de style dans vos vues |
|
80 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
81 Il est possible de charger des css spécifiques pour une vue par l'utilisation de la méthode add_css(): |
|
82 |
|
83 self.req.add_css('mon_cube.css') |
|
84 |
|
85 |
|
86 Les ressources graphiques de base |
|
87 --------------------------------- |
|
88 |
|
89 Vous pouvez changer certaines ressources graphiques comme: |
|
90 |
|
91 - le logo du site: |
|
92 |
|
93 # path to the logo (relative to the application main script, seen as a |
|
94 # directory, hence .. when you are not using an absolute path) |
|
95 LOGO = DATADIR/logo.png |
|
96 |
|
97 - la 'favicon' du site: |
|
98 |
|
99 FAVICON = DATADIR/favicon.ico |
|
100 |
|
101 - le logo des flux RSS: |
|
102 |
|
103 RSS_LOGO = DATADIR/rss.png |
|
104 |
|
105 - l'icône permettant l'appel au widget 'calendrier': |
|
106 |
|
107 CALENDAR_ICON = DATADIR/calendar.png |
|
108 |
|
109 - l'icône utilisée pour la validation d'une recherche: |
|
110 |
|
111 SEARCH_GO = DATADIR/go.png |
|
112 |
|
113 - l'icône d'aide en ligne: |
|
114 |
|
115 HELP = DATADIR/help.png |
|
116 |
|
117 |
|
118 Ajouter vos scripts javascripts |
|
119 ------------------------------- |
|
120 |
|
121 Configuration statique |
|
122 ~~~~~~~~~~~~~~~~~~~~~~ |
|
123 Vous devez surcharger la variable JAVASCRIPTS dans le fichier *data/external_resources* de votre cube. |
|
124 |
|
125 Chargement dynamique de script javascript dans vos vues |
|
126 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
127 Il est possible de charger vos scripts par la méthode add_js(): |
|
128 |
|
129 self.req.add_js('mon_script.js') |
|
130 |
|
131 |
|
132 Problèmes connus |
|
133 ---------------- |
|
134 |
|
135 Il est important de noter que la méthode de chargement dynamique ne marche pas avec les widgets Ajax. Vos fichiers devront déjà être au préalable avoir été chargés. |
|