Menggunakan Tema dan Skin

PRADO memiliki dukungan dasar untuk tema. 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.

Membuat Tema

Pertama kita buat direktori baru bernama themes. Ini adalah direktori leluhur bagi semua tema terkait aplikasi PRADO tertentu. Setiap subdirektori di bawah direktori ini yang nama temanya adalah nama subdirektori.

Untuk membuat tema bernama Basic, kita membuat subdirektori theme/Basic. Di bawah direktori ini, kita dapat menempatkan file stylesheet dependen-tema, file Javascript, gambar, dan file skin.

Direktori themes harus bisa diakses dari Web, seperti halnya direktori assets. Jangan menempatkan file data sensitif di bawah direktori ini. Anda bisa mengubah nama atau lokasi dari direktori ini dengan mengkonfigurasi modul TThemeManager dalam konfigurasi aplikasi.

Membuat File Stylesheet

Di bawah direktori themes/Basic, kita membuat sebuah file CSS stylesheet bernama style.css. ketika sebuah halaman menggunakan tema ini, PRADO secara otomatis akan mengimpor stylesheet ini ke halaman. Hal yang sama terjadi untuk file Javascript.

File CSS ditampilkan seperti berikut.

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

Membuat File Skin

Kita menggunakan skin untuk menginisialisasi properti kontrol PRADO. Skin disimpan sebagai file skin (nama berakhiran .skin) di bawah direktori tema. Setiap file skin bisa berisi multipel skin untuk satu atau beberapa tipe kontrol.

Sebagai pengujian, kita akan mencoba membuat sebuah skin yang mengubah warna latar belakang link tombol dalam footer halaman. Kita membuat sebuah file bernama button.skin di bawah direktori tema themes/Basic.

<com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />

File skin button.skin hanya berisi satu skin untuk kontrol THyperLink yang properti SkinID-nya adalah MainMenu. Skin menyetel warna latar belakang kontrol ke hijau-terang.

Sejalan dengan itu, kita perlu memodifikasi protected/common/MainLayout.tpl agar link tombol dalam footer menggunakan MainMenu sebagai SkinID-nya.

...... ...... Sintaks untuk file skin sangat mirip dengan template PRADO. Setiap tag <com:> mendefinisikan sebuah skin untuk tipe kontrol tertentu. PRADO secara otomatis mengumpulkan seluruh file skin dalam sebuah tema dan menerapkannya ketika halaman bertema sedang disajikan.

Menggunakan Tema

Untuk menggunakan tema yang baru kita buat, kita memodifikasi konfigurasi aplikasi seperti berikut. Seperti kita lihat, properti Theme untuk semua halaman disetel sebagai Basic, nama tema yang baru saja kita buat.

...... ...... Dimungkinkan untuk menetapkan tema berbeda untuk halaman yang berbeda, dan ini dapat dikerjakan baik dalam konfigurasi aplikasi/halaman ataupun secara programatis (perhatikan Theme adalah properti halaman). Untuk yan gterakhir, ia harus dikerjakan dalam metode onPreInit() pada halaman karena PRADO menerapkan tema ke halaman sebelumnya dalam masa hidup halaman.

Pengujian

Untuk melihat bagaimana halaman blog terlihat, kunjungi URL http://hostname/blog/index.php. Kita akan melihat font, tata letak, bingkai beruah dalam halaman. Juga, link tombol dalam footer mempunyai latar belakang hijau terang.