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>Using Themes and Skins</h1>
<p>
PRADO has intrinsic support for <a href="http://www.pradoframework.net/site/demos/quickstart/?page=Advanced.Themes">themes</a>. By using themes, we can better separate logic and presentation, and we can also change the overall appearance of our blog system more easily.
</p>
<h2>Creating Theme</h2>
<p>
We first create a new directory <tt>themes</tt>. This is the parent directory of all themes for a particular PRADO application. Any subdirectory under this directory will become a theme whose name is the subdirectory name.
</p>
<p>
To create a theme named <tt>Basic</tt>, we create a subdirectory <tt>theme/Basic</tt>. Under this directory, we may place theme-dependent stylesheet files, Javascript files, images, and skin files.
</p>
<com:InfoBox>
The <tt>themes</tt> directory must be Web-accessible, like the <tt>assets</tt> directory. Do not place sensitive data files under this directory. You can change the name or location of this directory by configuring the <a href="http://pradosoft.github.io/docs/manual/class-TThemeManager">TThemeManager</a> module in the application configuration.
</com:InfoBox>
<h3>Creating Stylesheet File</h2>
<p>
Under the <tt>themes/Basic</tt> directory, we create a CSS stylesheet file named <tt>style.css</tt>. When a page uses this theme, PRADO will automatically import this stylesheet to the page. The same occurs for Javascript files.
</p>
<p>
The CSS file is shown as follows.
</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>Creating Skin File</h2>
<p>
We use skins to initialize the properties of PRADO controls. Skins are stored as skin files (suffix name <tt>.skin</tt>) under a theme directory. Each skin file can contain multiple skins for one or several types of control.
</p>
<p>
As a test, we will try to create a skin that changes the background color of the link buttons in the page footer. We create a file named <tt>button.skin</tt> under the theme directory <tt>themes/Basic</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />
</com:TTextHighlighter>
<p>
The <tt>button.skin</tt> skin file contains only one skin for <tt>THyperLink</tt> controls whose <tt>SkinID</tt> property is <tt>MainMenu</tt>. The skin sets the background color of the control to be light-green.
</p>
<p>
Accordingly, we need to modify <tt>protected/common/MainLayout.tpl</tt> so that the link buttons in the footer use <tt>MainMenu</tt> as their <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>
The syntax for skin files is very similar to that of PRADO templates. Each <tt><com:></tt> tag defines a skin for a particular type of control. PRADO automatically aggregates all skin files in a theme and applies them when a themed page is being rendered.
</com:InfoBox>
<h2>Using Theme</h2>
<p>
To use the theme we just created, we modify the application configuration as follows. As we see, the <tt>Theme</tt> property for all pages is set as <tt>Basic</tt>, the name of the theme we created.
</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>
It is possible to specify different themes for different pages, and this can be done either in application/page configurations or programmatically (note <tt>Theme</tt> a page property). For the latter, it is must be done in <tt>onPreInit()</tt> method of the page because PRADO applies a theme to a page early in the page lifecycle.
</com:InfoBox>
<h2>Testing</h2>
<p>
To see how our blog pages look like, visit the URL <tt>http://hostname/blog/index.php</tt>. We shall see the font, layout, borders are changed in the page. Also, the link buttons in the footer have light-green background.
</p>
<img src="<%~ output.gif %>" class="output" />
</com:TContent>
|
