diff options
Diffstat (limited to 'demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page')
| -rw-r--r-- | demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page b/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page new file mode 100644 index 00000000..6766d659 --- /dev/null +++ b/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page @@ -0,0 +1,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>
\ No newline at end of file |