Dlaczego Thymeleaf zmienia sposób myślenia o templates?

Tradycyjne template engines jak JSP tworzą pliki które są nieczytelne w surowej formie. Thymeleaf rewolucjonizuje to podejście – tworzy „natural templates” które wyglądają jak normalne HTML i można je otwierać bezpośrednio w przeglądarce. To jak różnica między pisaniem surowego kodu assembly a wysokopoziomowym językiem programowania.

Czym jest Thymeleaf?

Thymeleaf to server-side Java template engine dla web applications. W przeciwieństwie do JSP, tworzy „natural templates” – HTML files które mogą być wyświetlane w przeglądarce nawet bez przetwarzania przez serwer.

Thymeleaf vs JSP – porównanie

Podstawy składni Thymeleaf

Pierwszy template

    
    


    
    
Hello, [Prototype Name]!
    
    
    
Hello, [Name]!
    
    
    

       User status placeholder
    
    
    
    
Current time: 
       
           01/01/2017 12:00
       
    
 

Spring Controller integration

@Controller
public class HelloController {
    
    @GetMapping("/hello")
    public String hello(@RequestParam(defaultValue = "World") String name, 
                       Model model) {
        
        // Dodanie danych do model
        model.addAttribute("name", name);
        model.addAttribute("currentDate", new Date());
        
        User user = new User("john_doe", true);
        model.addAttribute("user", user);
        
        // Zwraca nazwę template (hello.html)
        return "hello";
    }
}

Standard Expression Language

Typy expressions w Thymeleaf

First Name
Last Name



    
First Name
  
    
Last Name



Welcome message


User Profile
Search Results


Header placeholder

Utility objects

01 Jan 2017


USER NAME
No description


99.99


5 users found
No orders


Age category

Iteracje i kolekcje

Lista użytkowników

    

        

            
#
            
Name
            
Email
            
Status
        
    
    

        
        

            
1
            
John Doe
            
john@example.com
            

                Active
                Inactive
            
        
        
        
        

            
No users found
        
    

Controller dla listy

@Controller
@RequestMapping("/users")
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @GetMapping
    public String listUsers(Model model) {
        List users = userService.findAll();
        model.addAttribute("users", users);
        return "users";
    }
    
    @GetMapping("/{id}")
    public String userDetail(@PathVariable Long id, Model model) {
        User user = userService.findById(id);
        model.addAttribute("user", user);
        return "user-detail";
    }
}

Formularze i Spring Forms integration

Form z model binding

    
    
    
    
    
    

        First Name:
        
        

            First name error
        
    
    
    
    

        Email:
        
        

            Email error
        
    
    
    
    

        
        Active User
    
    
    
    
        Create
    

Controller z walidacją

@Controller
@RequestMapping("/users")
public class UserFormController {
    
    @GetMapping("/new")
    public String newUserForm(Model model) {
        model.addAttribute("user", new User());
        return "user-form";
    }
    
    @GetMapping("/{id}/edit")
    public String editUserForm(@PathVariable Long id, Model model) {
        User user = userService.findById(id);
        model.addAttribute("user", user);
        return "user-form";
    }
    
    @PostMapping
    public String saveUser(@Valid @ModelAttribute User user, 
                          BindingResult bindingResult, 
                          Model model) {
        
        if (bindingResult.hasErrors()) {
            return "user-form";
        }
        
        userService.save(user);
        return "redirect:/users";
    }
}

Fragmenty i layouts

Reusable fragments

    







    

        
User Name
        
user@example.com
        View Profile
    

Użycie fragmentów

    
    
    


    
    

    
    

        
Recent Users
        

            
            

                

            
        
    
    
    
    
 

Internationalization (i18n)

Messages properties

# messages.properties (default)
welcome.message=Welcome to our application
user.firstName=First Name
user.lastName=Last Name
user.email=Email Address
button.save=Save
button.cancel=Cancel

# messages_pl.properties (Polish)
welcome.message=Witamy w naszej aplikacji
user.firstName=Imię
user.lastName=Nazwisko
user.email=Adres email
button.save=Zapisz
button.cancel=Anuluj

Użycie w template

    
    

        First Name
        
    
    
    

        Email
        
    
    
    Save
    Cancel
    

Przydatne zasoby:

• Official Thymeleaf Tutorial
• Spring Guide – Serving Web Content
• Thymeleaf Spring Integration

Używasz Thymeleaf w swoich projektach Spring? Jakie są największe zalety natural templates w porównaniu z JSP w twoim doświadczeniu?