Научите како да интегришете овај шаблон шаблона у ваше Спринг апликације.

Тхимелеаф је Јава шаблонски механизам. Развија шаблоне за веб и самосталне апликације. Овај механизам шаблона користи концепт Натурал Темплатес да унесе логику у ваш изглед, без угрожавања вашег дизајна. Уз Тхимелеаф, имаћете контролу над начином на који ће апликација обрадити шаблоне које креирате.

Можете да користите Тхимелеаф за обраду шест типова шаблона: ХТМЛ, КСМЛ, Тект, ЈаваСцрипт, ЦСС и РАВ. Тхимелеаф се односи на сваки од шаблона као на режим шаблона, при чему је ХТМЛ најпопуларнији шаблон креиран на овом механизму.

Иницијализација Тхимелеаф-а у вашој апликацији

Постоје два начина да додате Тхимелеаф у вашу Спринг Боот апликацију. Можете да изаберете Тхимелеаф као зависност када генеришете свој шаблон са Спрингов иницијализатор алат. Такође имате опцију да га касније додате у датотеку спецификације израде у одељку зависности.

Ако сте изабрали једну од опција пројекта Градле, датотека која садржи зависности је буилд.градле фајл. Међутим, ако сте изабрали Мавен, онда је та датотека пом.кмл.

instagram viewer

Твоје пом.кмл датотека треба да садржи следећи одељак зависности:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Док твој буилд.градле датотека треба да садржи следећи одељак зависности:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Пример апликације коришћен у чланку је доступан у овом ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.

Додавањем Тхимелеаф-а у вашу Спринг апликацију добићете приступ њеној основној библиотеци, која вам омогућава да користите Тхимелеаф-ов Спринг стандардни дијалект. Спринг стандардни дијалект садржи јединствене атрибуте и синтаксу коју можете користити да додате различите функције у своје изгледе.

Коришћење Тхимелеаф-а у Спринг Боот-у

Када користите Тхимелеаф у својој Спринг апликацији, први корак је да направите свој шаблон документа. За овај пример апликације, шаблон документа је ХТМЛ. Увек треба да креирате своје Тхимелеаф шаблоне у Спринг Боот-у шаблони фолдер, који је доступан у датотеци ресурса.

Датотека хоме.хтмл

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Тхимелеаф шаблон изнад је општи ХТМЛ5 шаблон, са једним страним атрибутом (кмлнс: тх). Сврха је кмлнс: тх атрибут је да обезбеди опсег за све тх:* атрибуте које ћете користити у овом ХТМЛ документу. Остали атрибути и ознаке у Тхимелеаф шаблону су традиционални ХТМЛ ознаке и атрибути.

Креирање заглавља

Један од првих и најважнијих аспеката било које веб странице или апликације је заглавље. Она говори о чему се апликација ради (преко логотипа) и помаже вам да се лако крећете кроз апликацију. Основно заглавље треба да има лого, као и неколико веза за навигацију.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Тхимелеаф вам омогућава да додате горње заглавље на било коју страницу у вашој веб апликацији користећи тх: уметнути атрибут. Тхе тх: уметнути и тх: заменити атрибути прихватају оно што Тхимелеаф назива вредностима израза фрагмената. Изрази фрагмената вам омогућавају да поставите фрагменте ознаке на било коју локацију у вашем распореду.

<divth: insert="~{header:: #nav}">div>

Уметање ознаке изнад на врх хоме.хтмл таг ће уметнути ознаку заглавља на врх ваше почетне странице. Израз фрагмента има неколико компоненти, две су опционе, а две су обавезне:

  • Тилда (~), која је опциона.
  • Пар витичастих заграда ({}), што је опционо.
  • Назив шаблона који садржи ознаке које желите да уметнете (хеадер.хтмл).
  • ЦСС селектор ознаке коју желите да уметнете (#нав).

Дакле, следећа ознака даје исти резултат као и она изнад.

"header:: #nav">

Попуњавање тела шаблона

Тхимелеаф вам омогућава да користите пет типова израза у својим шаблонима:

  • Израз фрагмента (~{…})
  • Израз поруке (#{…})
  • Израз УРЛ адресе везе (@{…})
  • Променљиви израз (${…})
  • Израз променљиве селекције (*{…})

Израз поруке вам омогућава да додате екстернализоване фрагменте текста у ваш изглед. Са изразима порука можете лако да замените или поново употребите текст у свом изгледу. Када користите израз поруке, увек треба да поставите спољне фрагменте текста у а .особине фајл испод ресурси фолдер.

За овај пример апликације, та датотека је поруке.особине, који садржи следећи фрагмент текста:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Имајте на уму да горњи део текста (или поруке) има јединствени кључ (чувар места.текст). То је зато што свака датотека поруке може садржати колекцију различитих порука. Дакле, биће вам потребан кључ да бисте уметнули одређену поруку у свој изглед.

<pth: text="#{placeholder.text}">p>

Уметање горње ознаке у тело ваше ХТМЛ датотеке ефективно ће приказати текст чувара места као пасус у вашем приказу. За разлику од фрагмената израза, сваки аспект израза поруке је обавезан. Израз поруке захтева:

  • Знак броја (#).
  • Пар витичастих заграда ({}).
  • Кључ који држи поруку коју желите да убаците (чувар места.текст).

Обликовање вашег шаблона

Још један важан фајл у ресурси фолдер је статична датотека. Ова датотека чува ваше ЦСС датотеке и све слике које планирате да користите у својој апликацији. Да бисте повезали своју спољну ЦСС датотеку са Тхимелеаф ХТМЛ шаблоном, мораћете да користите израз УРЛ адресе. Процеси изражавања УРЛ адресе везе и релативне и апсолутне УРЛ адресе.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Уметање ознаке изнад у ваше ХТМЛ датотеке ће вам омогућити да стилизујете свој шаблон користећи а стиле.цсс фајл. Ова датотека је доступна у а цсс фасцикла испод статична одељак на ресурси фајл узорка пријаве. Увек треба да доделите израз УРЛ адресе везе тх: хреф атрибут.

Тхимелеаф пружа неколико других атрибута које можете користити да побољшате дизајн вашег изгледа. Један такав атрибут је тх: стил атрибут, који можете користити за додавање слика у свој изглед.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Горња ознака користи тх: стил атрибута да бисте додали позадинску слику одређеном делу вашег изгледа. Тхимелеаф има преко стотину различитих атрибута које можете користити да додате стил и функционалност вашим изгледима.

Променљиви израз

Променљиви изрази су најпопуларнији и вероватно најсложенији изрази које Тхимелеаф користи. Тхимелеаф променљиви изрази вам омогућавају да прикупите податке било из контекста апликације или из објекта у апликацији и убаците те податке у шаблон. У зависности од извора података које желите да прикажете у приказу, постоје две врсте променљивих израза које можете да користите.

Примарни израз променљиве користи знак долара и омогућава вам да прикупљате податке из контекст апликације (који су подаци повезани са различитим задацима који се извршавају у апликација). На пример, ако желите да снимите податке корисника из модала, онда је израз променљиве знака долара практичнији избор. Ако извршите огледни пројекат и пређете на http://localhost: 8080/ у вашем претраживачу, видећете следећи модал:

Након што затворите модал или пошаљете име, апликација ће прећи на почетну страницу. На почетној страници видећете генеричку веб локацију која приказује реч „Добродошли“, а затим низ који сте управо послали у модалном.

Пример апликације користи израз променљиве да заврши овај процес. Једноставан облик у модал.хтмл датотека има следеће ознаке:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Када корисник пошаље образац, он покреће тх: акција атрибут који има вредност УРЛ-а поста, који можете пронаћи у ВебЦонтроллер класа.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

Тхе име процеса() метода прихвата стринг који корисник доставља модалу, а затим тај стринг додељује променљивој која се зове корисничко име. Користећи израз променљиве, контролер затим убацује променљиву корисничког имена у изглед.

<h1>Welcome <spanth: text="${userName}">span>!h1>

Израз променљиве за избор користи звездицу и најкориснији је када имате посла са сложенијим апликацијама. На пример, апликација која захтева од корисника да се пријаве може да користи израз променљиве за избор. Можете прикупити корисничко име из корисничког објекта и уметнути га у изглед.

Алтернативни шаблон и опције стила

Иако је Тхимелеаф популарнија опција шаблона за Спринг Боот апликације, постоји неколико других једнако одрживих опција. Ово укључује ЈаваСервер странице (ЈСП), шаблоне засноване на Гроови-у, ФрееМаркер шаблоне и Мустацхе шаблоне. Поред креирања прилагођеног ЦСС стила, можете се одлучити и за коришћење ЦСС оквира за стилизовање вашег изгледа.