آموزش Spring MVC مقدمه ای بر Thymeleaf

تایم لیف یک template engine جاوایی برای پردازش Html, Xml, Css, JavaScript و Text بکار گرفته میشود. در این مبحث مقدمه ای به چگونگی بکارگیری Thymeleaf در Spring MVC میپردازیم.

این template engine در مقایسه با JSP بسیار گسترده تر و منعطف تر است از اینرو میتوان زمان توسعه کوتاهتری را انتظار داشت.

در ابتدای کار میبایست این کتابخانه را به pom پروژه اضافه کنیم :

      <dependency>
         <groupId>org.thymeleaf</groupId>
         <artifactId>thymeleaf-spring5</artifactId>
         <version>3.0.9.RELEASE</version>
      </dependency>

اگر از Spring Boot استفاده میکنید میتوانید کتابخانه thymeleaf را به اینصورت اضافه کنید :

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

کلاس SpringTemplateEngine کلیه تنظیمات مربوط به یک Template Engine را برای ما ساده میکند کافی است یک متد Bean از نوع برگشتی SpringTemplateEngine در کلاس Configuration قرار دهیم.

اینترفیس ViewResolver در Spring MVC تناظر بین نام View ها و ابجکت واقعی ارائه دهنده آن View را برقرار میکند. ThymeleafViewResolver این اینترفیس را پیاده سازی کرده است و میتوانیم با استفاده از آن مشخص کنیم که کدام View باید رندر شود. در این مرحله باید ThymeleafViewResolver را در قالب Bean معرفی کنیم که در متد ()viewResolver ارائه شده

Thymeleaf دارای سینتکس Placeholder خود میباشد و با استفاده از آن میتوان مقادیر را نمایش داد که برای آن هم باید یک Bean تعریف کرد که در متد ()messageSource قرار گرفته است 

@Bean
@Description("Thymeleaf Template Resolver")
public ServletContextTemplateResolver templateResolver() {
    ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setPrefix("/WEB-INF/views/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("HTML5");
 
    return templateResolver;
}
 
@Bean
@Description("Thymeleaf Template Engine")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.setTemplateEngineMessageSource(messageSource());
    return templateEngine;
}

@Bean
@Description("Spring Message Resolver")
public ResourceBundleMessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    messageSource.setBasename("messages");
    return messageSource;
}

@Bean
@Description("Thymeleaf View Resolver")
public ThymeleafViewResolver viewResolver() {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine());
    viewResolver.setOrder(1);
    return viewResolver;
}

نمونه ای از placeholder در Thymeleaf :

<span th:text="#{welcome.message}" />

نمونه ای ساده از کد دریافت دیتا از یک Model :

model.addAttribute("serverTime", dateFormat.format(new Date()));

نمونه کد نحوه خواندن دیتای model در لایه view :

Current time is <span th:text="${serverTime}" />

Collection :

حال بیاییم دیتایی از نوع Collection را ارسال کنیم. فرض کنید کلاسی داریم تحت عنوان Student که دو فیلد دارد :

public class Student implements Serializable {
    private Integer id;
    private String name;
    // standard getters and setters
}

حالا یک لیستی از آن ایجاد میکنیم :

List<Student> students = new ArrayList<Student>();
// logic to build student data
model.addAttribute("students", students);

Foreach :

و در کد template با استفاده از تگ th:each میتوانیم انرا بازخوانی کنیم :

<tbody>
    <tr th:each="student: ${students}">
        <td th:text="${student.id}" />
        <td th:text="${student.name}" />
    </tr>
</tbody>

if / unless : 

حالا اگر بخواهیم شرط هایی را قرار دهیم و لیست دیتا را فیلتر کنیم از th:if برای برقراری شرط و از th:unless برای برقرار نبودن شرط ( not ) استفاده میکنیم. بیایم کلاسمان را کمی گسترده تر کنیم :

public class Student implements Serializable {
    private Integer id;
    private String name;
    private Character gender;
     
    // standard getters and setters
}

<td>
    <span th:if="${student.gender} == 'M'" th:text="Male" /> 
    <span th:unless="${student.gender} == 'M'" th:text="Female" />
</td>

Switch / Case : 

برای switch از th:switch و برای case از th:case استفاده میکنیم :

<td th:switch="${student.gender}">
    <span th:case="'M'" th:text="Male" /> 
    <span th:case="'F'" th:text="Female" />
</td>

Form : 

برای اجزای فرم نیز میتوان به فرم زیر استفاده کرد :

<form action="#" th:action="@{/saveStudent}" th:object="${student}" method="post">
    <table border="1">
        <tr>
            <td><label th:text="#{msg.id}" /></td>
            <td><input type="number" th:field="*{id}" /></td>
        </tr>
        <tr>
            <td><label th:text="#{msg.name}" /></td>
            <td><input type="text" th:field="*{name}" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

th:object برای مشخص کردن object که قرار است دیتای فرم در فیلد های آن ابجکت قرار گیرد استفاده میشود 

th:action برای مشخص کردن آدرسی که فرم به آن ارسال میشود

th:field برای مشخص کردن نام فیلدی از ابجکتی که قرار است دیتای مورد نظر در آن قرار گیرد

در controller اطلاعات فرم را در قالب کلاس Student دریافت میکنیم :

@Controller
public class StudentController {

    @RequestMapping(value = "/saveStudent", method = RequestMethod.POST)
    public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) {
        // logic to process input data
    }
}

Validation Error :

برای نمایش Error ها ناشی از validation میتوان از function زیر استفاده کرد :

<ul>
    <li th:each="err : ${#fields.errors('id')}" th:text="${err}" />
    <li th:each="err : ${#fields.errors('name')}" th:text="${err}" />
</ul> 

کد بالا لیست error های ایجاد شده در فرم را به ترتیب نمایش میدهد 

میتوانیم بجای نام فیلد از wild card * و یا از عبارت all استفاده کنیم که کلیه موارد را در بر بگیرد :

<ul>
    <li th:each="err : ${#fields.errors('*')}" th:text="${err}" />
</ul>

<ul>
    <li th:each="err : ${#fields.errors('all')}" th:text="${err}" />
</ul>

کد بالا را میتوان با کد پایین جایگزین کرد در کد پایین از th:errors بصورت خلاصه شده کد بالا استفاده شده است :

<ul>
    <li th:errors="*{id}" />
    <li th:errors="*{name}" />
</ul>

و اگر میخواستیم خطا های سراسری و نه مربوط به یک فرم را مشاهده کنیم از global استفاده میکنیم :

<ul>
    <li th:each="err : ${#fields.errors('global')}" th:text="${err}" />
</ul>

Formatting : 

برای نمایش اطلاعاتی بصورت فرمت شده میتوانیم از {{}} استفاده کنیم :

<tr th:each="student: ${students}">
    <td th:text="${{student.name}}" />
</tr>

در کد بالا از NameFormatter استفاده شده که باید آنرا به لیست Formatter ها در کلاس WebMvcConfig اضافه کنیم :

@Configuration
public class WebMVCConfig extends WebMvcConfigurerAdapter {
    // ...
    @Override
    @Description("Custom Conversion Service")
    public void addFormatters(FormatterRegistry registry) {
        registry.addFormatter(new NameFormatter());
    }
}

Conversation :

با استفاده از ابزار Conversation میتوان برای نمایش فیلد های یک کلاس بصورت فرمت شده استفاده کرد 

<tr th:each="student: ${students}">
    <td th:text="${#conversions.convert(student.percentage, 'Integer')}" />
</tr>

کد بالا قسمت اعشاری درصد های موجود را حذف میکند