thymeleaf中fragment 的layout布局


1 配置

如果要引入fragment的layout,需要添加依赖:

 
compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:1.2.1')

2 layout的引用

定义一个layout文件,目录为/WEB-INF/views/task/layout.html,内容如下:

 
<html>
  <head>
    
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task Listtitle>
    ...
  head>
  <body>
    
    <div th:replace="fragments/header :: header">
      ...
    div>
    <div class="container">
      <div layout:fragment="content">
        
        
        
        
        
        <h1>Static content for prototyping purposes onlyh1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
          Phasellus et placerat elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
          Phasellus et placerat elit.
        p>
      div>
      <div th:replace="fragments/footer :: footer">© 2014 The Static Templatesdiv>
    div>
  body>
html>

上面文件的layout核心配置代码为layout:fragment="content"。在目录WEB-INF/views/task/list.html

下创建内容页面,代码如下:

 
<html layout:decorator="task/layout">
  <head>
    <title>Task Listtitle>
    ...
  head>
  <body>
    
    <div layout:fragment="content">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <td>IDtd>
            <td>Titletd>
            <td>Texttd>
            <td>Due totd>
          tr>
        thead>
        <tbody>
          <tr th:if="${tasks.empty}">
            <td colspan="4">No taskstd>
          tr>
          <tr th:each="task : ${tasks}">
            <td th:text="${task.id}">1td>
            <td><a href="view.html" th:href="@{'/' + ${task.id}}" th:text="${task.title}">Title ...a>td>
            <td th:text="${task.text}">Text ...td>
            <td th:text="${#calendars.format(task.dueTo)}">July 11, 2012 2:17:16 PM CDTtd>
          tr>
        tbody>
      table>
    div>
  body>
html>

页面task/list的内容由task/layout的标签配置布局。注意在标签中的属性layout:decorator="task/layout"。该属性会被标记到Layout Dialect,而Layout Dialect就是layout用来给指定视图配置布局用的。

3 在Layout Dialect中用include方式配置布局

下面为复用alert片段的例子,其目录为layout:fragment (task/alert.html),代码如下:

 
<html>
  <body>
    <th:block layout:fragment="alert">
      <div class="alert alert-dismissable" th:classappend="'alert-' + ${type}">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×button>
        <h4 th:text="${header}">Alert headerh4>
        
        <th:block layout:fragment="alert-content">
          <p>Default alert contentp>
        th:block>
      div>
    th:block>
  body>
html>

若要引用上面的片段,可用下面方式:

 
<div layout:include="task/alert :: alert" th:with="type='info', header='Info'" th:remove="tag">
  
  <th:block layout:fragment="alert-content">
    <p><em>This is a simple list of tasks!em>p>
  th:block>
div>

也可以这样引用:

 
<div layout:include="task/alert :: alert" th:with="type='danger', header='Oh snap!'" th:remove="tag">
  
  <th:block layout:fragment="alert-content">
    <p>Some textp>
    <p>
      <button type="button" class="btn btn-danger">Take this actionbutton>
      <button type="button" class="btn btn-default">Or do thisbutton>
    p>
  th:block>
div>




你可能感兴趣的:(Java)