<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>