diff options
Diffstat (limited to 'demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page')
| -rwxr-xr-x | demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page | 138 |
1 files changed, 0 insertions, 138 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page b/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page deleted file mode 100755 index 840a26b0..00000000 --- a/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page +++ /dev/null @@ -1,138 +0,0 @@ -<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>
\ No newline at end of file |