1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<com:TContent ID="Main">
<h1>Utilisation des Thèmes et des Skins</h1>
<p>
PRADO propose un support intrinsèque des <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Themes">thèmes</a>. En utilisant les thèmes, nous pouvons mieux séparer la logique applicative de la présentation et nous pouvons aussi changer facilement la présentation générale de notre blog.
</p>
<h2>Création des thèmes</h2>
<p>
Nous devons auparavant créer un dossier <tt>themes</tt>. C'est le dossier parent de tous les thèmes pour une application de PRADO. Chaque sous-dossier devient ainsi un thème dont le nom est le nom du sous-dossier.
</p>
<p>
Pour créer un thème nommé <tt>Basic</tt>, nous créons un sous-dossier <tt>theme/Basic</tt>. Dans ce dossier, nous pouvons mettre des feuilles de styles dépendantes du thème, des fichiers Javascript, des images et des fichiers skins.
</p>
<com:InfoBox>
Le dossier <tt>themes</tt> doit être accessible de l'extérieur. Ne mettez pas de données sensibles dans ce dossier. Nous pouvons changer l'emplacement de ce dossier en configurant le module <a href="http://www.pradosoft.com/docs/classdoc/TThemeManager">TThemeManager</a> dans le fichier de configuration de l'application.
</com:InfoBox>
<h3>Création de la feuille de style</h2>
<p>
Dans le dossier <tt>themes/Basic</tt>, nous créons un fichier CSS nommé <tt>style.css</tt>. Quand une page utilise ce thème, PRADO importe automatiquement la feuille de style dans cette page. Le même traitement est appliqué aux fichiers Javascript.
</p>
<p>
Le contenu du fichier CSS est le suivant :
</p>
<com:TTextHighlighter CssClass="source">
body {
font-family: verdana, 'trebuchet ms', sans-serif;
font-size: 10pt;
background: white;
}
#page {
margin: 0 auto 0 auto;
width: 600px;
}
#footer {
text-align: center;
margin-top: 10px;
padding: 10px;
border-top: 1px solid silver;
}
.post-box {
margin-bottom: 10px;
padding: 5px;
}
.post-box h3 {
padding: 5px;
font-size: 13pt;
background: lightgray;
}
.post-box a {
color: black;
text-decoration: none;
}
.post-box a:hover {
color: red;
}
</com:TTextHighlighter>
<h3>Création du fichier de Skin</h2>
<p>
Nous utilisons des <tt>skin</tt> pour initialiser les propriétés des contrôles PRADO. Les fichiers <tt>skin</tt> sont enregistrés avec une extension <tt>.skin</tt> dans le dossier du thème. Chaque fichier <tt>skin</tt> peut contenir plusieurs modèles pour un ou plusieurs types de contrôles.
</p>
<p>
Pour notre test, nous allons créer un fichier <tt>skin</tt> qui changera la couleur de fond de nos liens dans le pied de page. Nous créons un fichier nommé <tt>button.skin</tt> dans le dossier du thème <tt>themes/Basic</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />
</com:TTextHighlighter>
<p>
Le fichier <tt>button.skin</tt> contient une seule définition pour les contrôles de type <tt>THyperLink</tt> dont la propriété <tt>SkinID</tt> est <tt>MainMenu</tt>. La définition applique une couleur vert-clair comme couleur de fond du contrôle.
</p>
<p>
En accord avec cette définition, nous modifions notre fichier <tt>protected/common/MainLayout.tpl</tt> pour appliquer aux liens du pied de page la valeur <tt>MainMenu</tt> à la propriété <tt>SkinID</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
......
<div id="footer">
......
<com:THyperLink Text="Home" SkinID="MainMenu"
NavigateUrl="<%= $this->Service->DefaultPageUrl %>" />
<com:THyperLink Text="New Post" SkinID="MainMenu"
NavigateUrl="<%= $this->Service->constructUrl('posts.NewPost') %>"
Visible="<%= !$this->User->IsGuest %>" />
......
</div>
......
</com:TTextHighlighter>
<com:InfoBox>
La syntaxe des fichiers <tt>skin</tt> est très proche de celle des gabarits. Chaque balise <tt><com:></tt> définit la présentation d'un type de contrôle. PRADO concatène automatiquement les fichiers <tt>skin</tt> pour un thème et applique le tout lorsque la page est affichée.
</com:InfoBox>
<h2>Utilisation du thème</h2>
<p>
Pour utiliser le thème que nous venons juste de créer, nous modifions notre fichier de configuration de l'application comme ci-après. Comme vous pouvez le voir, nous affectons la valeur <tt>Basic</tt> (le nom du thème) à la priorité <tt>Theme</tt> pour toutes les pages.
</p>
<com:TTextHighlighter CssClass="source" Language="xml">
......
<services>
<service id="page" class="TPageService" DefaultPage="posts.ListPost">
<pages MasterClass="Application.layouts.MainLayout" Theme="Basic" />
</service>
</services>
......
</com:TTextHighlighter>
<com:InfoBox>
Il est possible de préciser différents thèmes pour différentes pages, et ceci peut-être faits soit en modifiant le fichier de configuration de page soit par programmation (propriété <tt>Theme</tt>). En dernier recours, on peut le faire dans la méthode <tt>onPreInit()</tt> de la page, ceci parce que PRADO applique le thème au début du cycle de vie de la page.
</com:InfoBox>
<h2>Test</h2>
<p>
Pour voir la nouvelle présentation de notre site, allons à l'URL <tt>http://hostname/blog/index.php</tt>. Nous pouvons constater que la mise en page, les polices, les bordures sont modifiées. De même, la couleur de fond des liens en pied de page est vert-clair.
</p>
<img src="<%~ output.gif %>" class="output" />
</com:TContent>
|
