Scribd Logo
Upload

Welcome to Scribd!

  • Thyme Leaf

    Uploaded by

    varun varun
    7 views25 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views25 pages

    Thyme Leaf

    Uploaded by

    varun varun

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 25

    Thymeleaf

    It is a template engine
    In spring web mvc we can use Thymeleaf as presentation
    technology
    We can use Thymeleaf as replacement for JSP
    Note: Every JSP page should be converted to Servlet to send response to browser
    hence performance wise JSP is slow.
    To overcome JSP problems we are using Thymeleaf for presentation layer
    development.
    It is a UI technology used to implement Dynamic web pages with
    Lightweight UI engine.

    =>Compared to JSP its coding and memory is less and execution is faster.

    =>JSP (JASPER) is a heavy weight engine;

    Thymeleaf is a light engine (less memory).


    Thymeleaf work flow:--
    =>Boot supports working with Thymeleaf UI engine which
    converts only
    Dynamic content into its equal java code, static content is
    placed as it is.
    =>Dynamic content will be converted to java format and then compiled, finally
    executed and mixed with static output.

    =>It may read data from spring container using Thymeleaf EL.
    =>To enable Thymeleaf UI in Spring boot apps add below starter in pom.xml.
    <dependency>

    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    =>Thymeleaf tags(code) --- starts
    Ex:- th:action, th: hreaf, th:object

    =>Thymeleaf supports Symbols like and for dynamic coding.


    @{url}, ${EL}, *{Link}
    Here *{ } Symbol indicates link to variable/Property in
    ModelAttribute.

    This is used incase of UI forms.


    th:action

    Here ${ } symbol indicates EL in Thymeleaf.


    It supports data reading from spring container(may read data from memory).

    =>UI form can read data using ModelAttribute, Text Data, can be taken from
    modelMap
    Data Exchange between UI and Controller using Thymeleaf:--

    =>We can send data from controller to UI using ModelMap. Here, Thymeleaf UI
    reads data using EL and TH NAMESPACE.

    =>To use Thymeleaf tags we should provide Thymeleaf Engine Location to current UI
    page, as:
    <html xmlns:th
    Step#1:- Create one Spring boot Starter Project
    Name : SpringBootWebMVCWithThymeleaf
    Dependencies : Web, Thymeleaf
    Model class:--
    package com.app.model;
    import lombok.Data;
    import javax.persistence.Id;
    import javax.persistence.Table;

    @Data
    @Entity
    @Table(name="employeeTab")
    public class Employee {
    @Id
    private Integer empId;
    private String empName;
    private Double empSal;
    }
    package com.app.controller;
    @Controller
    public class EmployeeController {
    @RequestMapping(value="/save", method=RequestMethod.POST)
    @RequestMapping("/reg") public String saveData(@ModelAttribute Employee employee,
    ModelMap map)
    public String regPage(ModelMap
    { map)
    { map.addAttribute("emp", employee);
    //Form Backing Object
    Employee e= new Employee();
    return "Info";
    map.addAttribute("employee",
    } e);
    return "Register";
    }
    @RequestMapping("/all")
    public String showDates(ModelMap map) {
    map.addAttribute("message","Hello UI");
    List<Employee> emps=Arrays.asList(
    new Employee(10, "Uday",2.2),
    new Employee(11, "Venkat",6.3),
    new Employee(12, "Neha",9.8)
    );
    map.addAttribute("list", emps);
    return "Data";
    }
    }
    Step#3:- UI Pages (Under templates folder)
    Register.html:--
    <html xmlns:th="http://www.thymeleaf/">
    <body><h3>Welcome to Register Page</h3>
    <form action="#" method="post" th:action="@{/save}" th:object="${employee}">
    ID : <input type="text" th:field="*{empId}"><br><br>
    NAME : <input type="text" th:field="*{empName}"><br><br>
    SALARY : <input type="text" th:field="*{empSal}"><br><br>
    <input type="submit" value="Create"/>
    </form>
    </body></html>
    b. Info.html:--
    <html xmlns:th="http://www.thymeleaf.org/">
    <body>
    Your form data is : <div th:text="${emp}"></div>
    </body>
    </html>

    You might also like