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>Menggunakan Tema dan Skin</h1>
<p>
PRADO memiliki dukungan dasar untuk <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Themes">tema</a>. Dengan menggunakan tema, kita dapat memisahkan logika dan penyajian secara lebih baik, dan kita juga bisa mengubah penampilan keseluruhan pada sistem blog kita jauh lebih mudah.
</p>
<h2>Membuat Tema</h2>
<p>
Pertama kita buat direktori baru bernama <tt>themes</tt>. Ini adalah direktori leluhur bagi semua tema terkait aplikasi PRADO tertentu. Setiap subdirektori di bawah direktori ini yang nama temanya adalah nama subdirektori.
</p>
<p>
Untuk membuat tema bernama <tt>Basic</tt>, kita membuat subdirektori <tt>theme/Basic</tt>. Di bawah direktori ini, kita dapat menempatkan file stylesheet dependen-tema, file Javascript, gambar, dan file skin.
</p>
<com:InfoBox>
Direktori <tt>themes</tt> harus bisa diakses dari Web, seperti halnya direktori <tt>assets</tt>. Jangan menempatkan file data sensitif di bawah direktori ini. Anda bisa mengubah nama atau lokasi dari direktori ini dengan mengkonfigurasi modul <a href="http://www.pradosoft.com/docs/classdoc/TThemeManager">TThemeManager</a> dalam konfigurasi aplikasi.
</com:InfoBox>
<h3>Membuat File Stylesheet</h2>
<p>
Di bawah direktori <tt>themes/Basic</tt>, kita membuat sebuah file CSS stylesheet bernama <tt>style.css</tt>. ketika sebuah halaman menggunakan tema ini, PRADO secara otomatis akan mengimpor stylesheet ini ke halaman. Hal yang sama terjadi untuk file Javascript.
</p>
<p>
File CSS ditampilkan seperti berikut.
</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>Membuat File Skin</h2>
<p>
Kita menggunakan skin untuk menginisialisasi properti kontrol PRADO. Skin disimpan sebagai file skin (nama berakhiran <tt>.skin</tt>) di bawah direktori tema. Setiap file skin bisa berisi multipel skin untuk satu atau beberapa tipe kontrol.
</p>
<p>
Sebagai pengujian, kita akan mencoba membuat sebuah skin yang mengubah warna latar belakang link tombol dalam footer halaman. Kita membuat sebuah file bernama <tt>button.skin</tt> di bawah direktori tema <tt>themes/Basic</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />
</com:TTextHighlighter>
<p>
File skin <tt>button.skin</tt> hanya berisi satu skin untuk kontrol <tt>THyperLink</tt> yang properti <tt>SkinID</tt>-nya adalah <tt>MainMenu</tt>. Skin menyetel warna latar belakang kontrol ke hijau-terang.
</p>
<p>
Sejalan dengan itu, kita perlu memodifikasi <tt>protected/common/MainLayout.tpl</tt> agar link tombol dalam footer menggunakan <tt>MainMenu</tt> sebagai <tt>SkinID</tt>-nya.
</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>
Sintaks untuk file skin sangat mirip dengan template PRADO. Setiap tag <tt><com:></tt> mendefinisikan sebuah skin untuk tipe kontrol tertentu. PRADO secara otomatis mengumpulkan seluruh file skin dalam sebuah tema dan menerapkannya ketika halaman bertema sedang disajikan.
</com:InfoBox>
<h2>Menggunakan Tema</h2>
<p>
Untuk menggunakan tema yang baru kita buat, kita memodifikasi konfigurasi aplikasi seperti berikut. Seperti kita lihat, properti <tt>Theme</tt> untuk semua halaman disetel sebagai <tt>Basic</tt>, nama tema yang baru saja kita buat.
</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>
Dimungkinkan untuk menetapkan tema berbeda untuk halaman yang berbeda, dan ini dapat dikerjakan baik dalam konfigurasi aplikasi/halaman ataupun secara programatis (perhatikan <tt>Theme</tt> adalah properti halaman). Untuk yan gterakhir, ia harus dikerjakan dalam metode <tt>onPreInit()</tt> pada halaman karena PRADO menerapkan tema ke halaman sebelumnya dalam masa hidup halaman.
</com:InfoBox>
<h2>Pengujian</h2>
<p>
Untuk melihat bagaimana halaman blog terlihat, kunjungi URL <tt>http://hostname/blog/index.php</tt>. Kita akan melihat font, tata letak, bingkai beruah dalam halaman. Juga, link tombol dalam footer mempunyai latar belakang hijau terang.
</p>
<img src="<%~ output.gif %>" class="output" />
</com:TContent>
|
