Tasarım Şablonları ve Güncel Teknolojiler (Patterns'n'Tech): Aralık 2011

29 Aralık 2011 Perşembe

Wicket Javascript ve CSS Desteği

Geçen yayınımda Wicket projemize nasıl Wicket kontrolünü devre dışı bırakarak JavaScript ve CSS desteği eklenebileceğine deyinmiştim. Bu yayınımda ise, Wicket kütüphanesinin sağladığı JavaScript ve CSS desteği ekleme yeteneklerinden bahsedeceğim.

Wicket projelerinde, genellikle sayfa sınıflarının türediği bir veya birden fazla taban sayfa sınıfları mevcuttur. Bu taban sayfa sınıflarının en önemli özelliklerinden biri ise, JavaScript ve CSS eklentilerinin alt (türemiş) sınıflara aktarabilmesi özelliğidir. Bu yayınımda, bu özellikten yararlanacağım.

<!DOCTYPE html> 
<html xmlns:wicket="http://wicket.apache.org"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="description" content="Base Page of Wicket Pages!" /> 
    </head> 
    <body> 
        <header wicket:id="headerpanel" />
        <section class="content_container"> 
            <wicket:child/> 
        </section> 
        <footer wicket:id="footerpanel" /> 
    </body> 
</html>

Devamı »

3 Aralık 2011 Cumartesi

Wicket Javascript ve CSS Desteği ve Wicket Resim Problemi Çözümü

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.

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