Tema dan Skin

Pengenalan

Tema dalam PRADO menyediakan cara bagi para pengembang untuk menyediakan tampilan konsisten melintasi seluruh aplikasi web. Tema berisi daftar nilai awal untuk properti dari berbagai tipe kontrol. Ketika menerapkan tema ke sebuah halaman, semua kontrol dalam halaman tersebut akan menerima nilai properti awal terkait dari tema. Ini membolehkan tema untuk berinteraksi dengan seti properti yang banyak dari berbagai kontrol PRADO, berarti bahwa tema bisa dipakai untuk menetapkan jangkauan besar dari properti penyajian yang tidak bisa dilakukan metode tema lain (misaslnya CSS). Sebagai contoh, tema bisa dipakai untuk menetapkan ukuran standar halaman dari semua grid data melintasi aplikasi dengan menetapkan nilai standar untuk properti PageSize dari kontrol TDataGrid.

Memahami Tema

Tema adalah sebuah direktori yang terdiri dari file skin, file javascript dan file CSS. Setiap file javascript atau CSS yang berada dalam tema akan diregistrasi dengan halaman yang menerapkan tema. Skin adalah set nilai properti awal untuk tipe kontrol tertentu. Tipe kontrol dapat memiliki satu atau beberapa skin, masing-masing diidentifikasi dengan SkinID unik. Ketika menerapkan tema ke sebuah halaman, skin diterapkan ke kontrol jika tipe kontrol dan nilai SkinID keduanya sama dengan ada dalam skin. Catatan, jika skin memiliki nilai SkinID kosong, ia akan menerapkannya ke semua kontrol dari tipe tertentu yang SkinID-nya tidak disetel atau kosong. File skin terdiri dari satu atau beberapa skin, untuk satu atau beberapa tipe kontrol. Tema adalah gabungan dari skin yang didefinisikan dalam semua file skin.

Menggunakan Tema

Untuk menggunakan sebuah tema, Anda perlu menyetel properti Theme dari halaman dengan nama tema, yaitu nama direktori tema. Anda dapat menyetelnya dalam konfigurasi halaman atau dalam konstruktor atau metode onPreInit() dari halaman. Anda tidak bisa menyetel properti setelah onPreInit() karena saat itu, kontrol anak dari halaman sudah dibuat (skin harus diterapkan ke kontrol setelah kontrol tersebut dibuat.)

Untuk menggunakan skin tertentu dalam tema untuk sebuah kontrol, setel properti SkinID dari kontrol dalam template seperti berikut,

<com:TButton SkinID="Blue" ... />

Ini akan menerapkan skin 'Blue' ke tombol. Catatan, nilai properti awal yang ditetapkan oleh skin 'Blue' akan mengganti setiap nilai properti tombol. Gunakan tema stylesheet jika Anda tidak ingi diganti. Untuk menggunakan tema stylesheet, setel properti StyleSheetTheme dari halaman daripada Theme (Anda bisa memiliki keduanya StyleSheetTheme dan Theme).

Untuk menggunakan file Javascript dan file CSS yang berada dalam sebuah tema, kontrol THead harus ditempatkan pada template halaman. Ini dikarenakan tema akan meregistrasi file itu dengan halaman dan THead adalah tempat yang tepat untuk menempatkan mengambil file tersebut.

Dimungkinkan untuk menetapkan tipe media dari file CSS yang berisikan sebuah tema. Standarnya, file CSS berlaku untuk semua tipe media. Jika file CSS bernama seperti mystyle.print.css, ia akan diterapkan hanya pada tipe media print. Sebagai contoh lain, mystyle.screen.css hanya berlaku untuk media screen, dan mystyle.css berlaku bagi semua tipe media.

Penyimpanan Tema

Semua tema standarnya harus ditempatkan di bawah direktori [AppEntryPath]/themes, di mana AppEntryPath merujuk ke direktori yang berisi naskah entri aplikasi. Jika Anda ingin menggunakan direktori berbeda, konfigurasi properti BasePath dan BaseUrl dari modul System.Web.UI.TThemeManager dalam konfigurasi aplikasi,

<service id="page" class="TPageService"> <modules> <module id="theme" class="System.Web.UI.TThemeManager" BasePath="mythemes" BaseUrl="mythemes" /> </modules> </service>

Membuat Tema

Membuat sebuah tema melibatkan pembuatan direktori tema dan penulisan file skin (dan kemungkinan file Javascript serta CSS). Nama file skin harus diakhiri dengan .skin. Format file skin adalah sama seperti file template kontrol. Karena file skin tidak mendefinisikan penyajian hubungan leluhur-aak diantara kontrolnya, Anda tidak bisa menempatkan tag komponen di dalam yang lainnya. Dan setiap teks statis antara tag komponen diabaikan. Untuk mendefinisikan skin 'Blue' seperti telah disebutkan di atas untuk TButton, tulis yang berikut dalam file skin,

<com:TButton SkinID="Blue" BackColor="blue" />

Seperti sudah disebutan di atas, Anda dapat menyimpan beberapa skin dalam satu file skin, atau memisahkannya ke dalam beberapa file. Strategi yang umum digunakan adalah bahwa setiap file skin hanya berisi skin untuk satu tipe kontrol. Sebagai contoh, Button.skin akan berisi skin hanya untuk tipe kontrol TButton.