SpringBoot – 3 (Thymeleaf)

Selamlar, bu yazımızda Thymeleaf ‘den bahsedeceğim. Spring ile entegresini yapıp bir kaç özelliğini kullanacağım. Thymeleaf, açık kaynak olarak geliştirilen, Servlet tabanlı çalışan bir template engine‘ dir. Daha önce eğer JSP kullanarak bir şeyler yaptıysanız Thymeleaf veya benzeri FreeMarker, Apache Velocity gibi diğer template engine‘lerin  avantajlarını daha iyi anlayabilirsiniz. Ön yüzde  size gerçekten esneklik sağlamakta.  Buradan daha detaylı bilgi alabilirsiniz. Şimdi SpringBoot ile entegresine geçelim. İlk önce bağımlılığımızı ekleyelim. (Bu yazımda da daha önceki projemden ilerliyorum.)

pom.xml

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Ardından resources klasörü içindeki templates klasörüne index.html dosyamızı ekleyelim.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Thymeleaf Examples</title>
</head>
<body>
Test
</body>
</html>

Sonrasında HomeController sınıfımızı aşağıdaki gibi düzenleyelim.

HomeController.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Created by ufuk on 8.8.2016.
 */
@Controller
public class HomeController {

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String displayHomePage(Model model) {

        return "index";
    }
}

Controller‘daki metodumuz da olusturduğumuz html dosyanın adını return ediyoruz. Ardından projeyi run edip http://localhost:8080/SpringGiris/ istek yaptığımızda index.html dosyamızın içeriği gelmektedir. Bu kadar kolay işte 🙂 Şimdi basit olarak for, if ve attribute yazdıralım ekrana.

Controller sınıfımızı düzenleyelim.

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

/**
 * Created by ufuk on 8.8.2016.
 */
@Controller
public class HomeController {

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String displayHomePage(Model model) {

        List<String> uuids = getUUIDList(10);

        model.addAttribute("list", uuids);
        model.addAttribute("isEmpty", uuids.isEmpty());
        model.addAttribute("fullName", "Ufuk Halis");

        return "index";
    }

    private List<String> getUUIDList(int limit) {
        List<String> uuids = new ArrayList<>();
        for (int i = 0; i < limit; i++) {
            uuids.add(UUID.randomUUID().toString());
        }
        return uuids;
    }
}

Rastgele değerler üretip bir liste oluşturdum. Daha sonra bu listeyi ve başka değerleri Metodumuzun model parametresine addAttribute şeklinde ekledik. Artık View kısmından bu değerlere ulaşabiliriz. index.html dosyamızı da düzenlersek.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Thymeleaf Examples</title>
</head>
<body>
<h1 th:text="'Full Name : ' + ${fullName}"></h1>

<h1>UUIDS</h1>
<p th:each="item : ${list}" th:text="${item}"></p>

<p th:if="${isEmpty}" >Empty</p>
<p th:if="${!isEmpty}" >Not Empty</p>

</body>
</html>

Evet, controller da set ettiğimiz attribute‘lere ulaşıp ekrana bastık, each ile listemiz içinde döndük, if ile de koşul durumunu gördük. Thymeleaf ‘in bu özelliklerini JSP kodlarken JSTL ile de yapabiliriz. Ancak tabi Thymeleaf ‘in ayıran özelliklerini fragment‘lar, SpringSecurity ile olan ilişkisi, hazır metotları vb. özelliklerini ilerleyen yazılarda zamanı geldikçe değineceğim. Şimdilik bu kadar. 🙂

Ya İyi Olarak Ölürsün, ya da kötüye dönüşecek kadar uzun yaşarsın
(The Dark Knight – 2008)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s