Bu yayınımda çok teknik olmayarak, oldukça basitçe Wicket sayfamıza nasıl javascript ve CSS desteği ekleyebileceğimizi anlatacağım.
Wicket Framework'ü bize resim, bağlantı gibi bileşenleri iki şekilde eklememizi mümkün kılar.
- Wicket kontrollü
- Wicket kontrolsüz (yada HTML kontrollü)
Ben bu yayında sadece HTML kontrollü olarak CSS ve javascript desteğinin nasıl ekleneceğine değineceğim çünkü Wicket kontrollü olarak eklemek için oldukça fazla kaynak zaten mevcut.
Elimizde login.html şeklinde şablon olarak hazırlanmış bir sayfamız olsun. İlk olarak bu sayfayı Wicket sayfası haline çevirmemiz gerekir. Bunun için aşağıdaki adımlar izlenebilir.
1) Sayfanın ismi LoginPage.html olarak değiştirilir. (Bu adım opsiyoneldir. Fakat okunaklılık açısından bu yapıya uymak önerilir ve Java dosyası ile isim uyuşmasını korumak gerekmektedir).
2) Ardından aynı isimde LoginPage.java Java sınıf dosyası oluşturulur.
public class LoginPage extends WebPage {
}
3) LoginPage.html sayfımızın <html> etiketi aşağıdaki gibi değiştirilir.
4) HTML sayfamızın <head> kısmına css/style.css CSS dosyasını eklemek için aşağıdaki kodlar sonuna eklenir.
5) js/script.js gibi bir javascript dosyasını eklemek için ise <wicket:link> etiketini kullanırız.
Resimlerin HTML kontrollü görünmesi için ise aynı şekilde <wicket:link> etiketini kullanabiliriz.
<html xmlns:wicket="http://wicket.apache.org">
4) HTML sayfamızın <head> kısmına css/style.css CSS dosyasını eklemek için aşağıdaki kodlar sonuna eklenir.
<wicket:head>
<wicket:link>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</wicket:link>
</wicket:head>
5) js/script.js gibi bir javascript dosyasını eklemek için ise <wicket:link> etiketini kullanırız.
<wicket:link>
<script type="text/javascript" src="js/script.js" />
</wicket:link>
Resimlerin HTML kontrollü görünmesi için ise aynı şekilde <wicket:link> etiketini kullanabiliriz.
<wicket:link> <img src="images/image.png" alt="[image]" class="picture" /> </wicket:link>
Hiç yorum yok:
Yorum Gönder