Thymeleaf Template Initialize

Merhaba arkadaslar, bu yazımda thymeleaf template’lerimizi initalize etme ve kullanımına deginmeye çalışacağım.

Önceki yazılarda belirttigim gibi Spring ile daha iyi bir ikili oluşturuyorlar ancak thymeleaf’ı tek başına da kullanabiliriz. Servlet ile kullanımını göreceğiz bugün.

Thymeleaf Template Initialize

Öncekile bir web projesi oluşturalım ve thymeleaf için gerekli jar’ları sitesinden edinelim. Proje dizin yapısı aşağıda yer almaktadır.

 

Screenshot from 2016-04-19 21:11:20

Template initialize etmek için öncelikle Servlet listener yazacagız. Bu konuyu bilmiyorsanız blogdaki Servlet&Jsp yazılarına bakabilirsiniz.

TemplateInitializer.java

Context initialize olurken template resolver’ımızı oluşturuyoruz bu sayede daha sonra kullanacagımız template’ler için resolverımız hazır bulunuyor. Resolver oluştururken template mode olarak XHTML verdik, default olarak XHTML’dir. Farklı olarak xml, xhtml, html verilebileceginiz belirtelim. Prefix vereken WEB-INF altında ki dosyalar ile ben çalışacağım diye belirttik. Suffix ise template dosyalarımızın uzantısının .html oldugunu belirttik. Cache olarak bir zaman belirttik. Son olarak servlet context’e attribute olarak resolver’ı ekledik.

Şimdi de template dosyamız icin bir servlet olusturalım;

Kod içerisine açıklamalar ekledim. Yaptıgımız is dataları bind edecegimiz bir webContext olusturmak ve buna bind etmek. Engine’e bir template ismi ile beraber webcontexti verip işledik. Son olarak result’u respınse gönderiyoruz.

Burada dikkat edilecek konu şu; “thy” ile template dosya ismi veriyoruz. Verdigimiz suffix ve prefixlerden sonra Thymeleaf, /WEB-INF altında thy.html uzantlı bir dosya arayacaktır.

Servlet’in mappingi şu şekilde;

Şimde template dosyamıza bakalım, asıl konuya da gelelim;

 

Bir ekran görüntüsü ekleyelim ve template’i acıklayalım;

Screenshot from 2016-04-19 20:40:40

Kısaca bir order ekleme/silme/düzenleme ekranı. Bu ekranda sol tarafta order ekleme ve sağ tarafta listeleme/silme/düzenleme yapacagız.

Az önce servlet’te data olarak orders’ları “orders” adıyla bind etmistik. Template’de bu degiskeni nasıl kullandıgımız bakalım;

Table içerisinde tr etiketi ile gelen orders’ları th:each ile itere ediyoruz. Burada order, itere edilen orders içerisindeki order’ı ifade ediyor. Current ise o anki orderın sırasını gösterebilmek için kullanacagız.

Bir önceki yazıda expression’lara deginmis, 4 adet olan expressionları anlatmıstık. Bunların nested olabileceginden bahsetmistik.

#lists bir utility objecti ve listeler konusunda bize yardımcı olacaktı. Gelen orders listesini sort etmek istedim. Sort islemini de price alanına göre yaptım. Sort edebilmek icin #list utility objesine listeyi ve neye göre sort edecegini bilmesi icin comparator veriyoruz.

Not : Orders’ları Java tarafından comparator yapmazsak template’de hata alacaktır.

Sort edilen listeyi variable expression olan ${…} ile kullanacagız.

th:class kısmını orderın aktif olması durumunda succes, degilse danger olarak işaretkemek için kullandım. ${order.status} alanı true/false olabilmekte, thymeleaf içerisinde conditional operatorlerin kullanımına örnek olması için özellikle ekledim.

Tabloyu doldururken satırlara order’ın bilgilerini girecegiz. th:text ile satırın degerini ayarlıyoruz. Yine variable expression kullandık. Burada asterik operator de kullanılabilir, size kalmıs bir durum.

Link expression’a örnek olarak şu kısmı ekledim;

Burada link expression ile a elementinin href degerini dinamik olarak ürettik. Link şu olacaktır: /deleteOrder?orderId=3 gibi.

Thymeleaf içerisinde javascript function çağırmaya örnek olması için de şu kısmı ekledim;

th:onclik ile js dosyamızdaki edit fonksyionunu çağırdık ve paremetre gönderdik. Edit fonksiyonu gelen order’ı ekrandaki kutucuklara yazıp action’u add yerine update olarak degistiriyor, bu konulara girmeyecegim.

Template include etmeye bir örnek olarak da header ve footer kısımlarını ekledim;

İlk header paremetresi contexti ifade ediyor, yani nereye include edilecegini. İkincisi ise template’in adı.

header.html

th:fragment içerisindeki header, include ediriken yazılan ikinci paremetredir, bir nevi id gibi.

Message expressiona örnek olması için şu kısmı ekledik;

Message expression #{…} kullanılıyor demistik. Message properties dosyası template adı ile aynı olmalı ve _language olarak bitmeli. /WEB-INF altında thy_en.properties dosyasında author degiskeni kullanılacaktır.

thy_en.properties

Multiple language özellikli diller yapabilmek için thy_en, thy_tr gibi properties dosyaları hazırlamanız ve template engine’de template’i işlerken Locale bilgisi olarak request’in locale bilgisini eklerseniz otomatik olarak ek birşey yapmadan çoklu dil özellikli uygulama yazmıs olacaksınız.

Yazıyı burada sonlandırıyorum arkadaslar, mutlu ve esen kalın

Örnek uygulamaya şuradan erişebilirsiniz; https://github.com/AlicanAkkus/ThymeleafTutorial

~ A.Akkus

 

860 Total Views 2 Views Today