Bu şablon motorunu Spring uygulamalarınıza nasıl entegre edeceğinizi öğrenin.

Thymeleaf bir Java şablon motorudur. Hem web hem de bağımsız uygulamalar için şablonlar geliştirir. Bu şablon motoru, tasarımınızdan ödün vermeden düzeninize mantık katmak için Doğal Şablonlar konseptini kullanır. Thymeleaf ile bir uygulamanın oluşturduğunuz şablonları nasıl işleyeceği üzerinde kontrole sahip olacaksınız.

Altı tür şablonu işlemek için Thymeleaf'i kullanabilirsiniz: HTML, XML, Metin, JavaScript, CSS ve RAW. Thymeleaf, şablonların her birini şablon modu olarak adlandırır; HTML, bu motorda oluşturulan en popüler şablondur.

Uygulamanızda Thymeleaf'in Başlatılması

Spring Boot uygulamanıza Thymeleaf eklemenin iki yolu vardır. İle ortak yazınızı oluştururken bağımlılık olarak Thymeleaf'i seçebilirsiniz. Spring'in başlatma aracı. Ayrıca bunu daha sonra bağımlılıklar bölümündeki yapı belirtimi dosyanıza ekleme seçeneğiniz de vardır.

Gradle proje seçeneklerinden birini seçtiyseniz bağımlılıkları içeren dosya build.gradle dosya. Ancak Maven'i seçtiyseniz bu dosya pom.xml.

instagram viewer

Senin pom.xml dosya aşağıdaki bağımlılık bölümünü içermelidir:

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


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

Senin iken build.gradle dosya aşağıdaki bağımlılık bölümünü içermelidir:

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

Makalede kullanılan örnek uygulamaya bu adreste ulaşabilirsiniz. GitHub deposu ve MIT lisansı kapsamında kullanımınız ücretsizdir.

Thymeleaf'i Spring uygulamanıza ekleyerek, Thymeleaf'in Spring Standart Lehçesini kullanmanıza olanak tanıyan çekirdek kütüphanesine erişim kazanacaksınız. Bahar Standardı Lehçesi, düzenlerinize farklı özellikler eklemek için kullanabileceğiniz benzersiz nitelikler ve söz dizimi içerir.

Spring Boot'ta Thymeleaf Kullanımı

Spring uygulamanızda Thymeleaf kullanırken ilk adım şablon belgenizi oluşturmaktır. Bu örnek uygulama için şablon belge HTML'dir. Thymeleaf şablonlarınızı her zaman Spring Boot'ta oluşturmalısınız. şablonlar Kaynaklar dosyasında bulunan klasör.

home.html Dosyası

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Yukarıdaki Thymeleaf şablonu, bir yabancı özelliğe sahip genel bir HTML5 şablonudur (xmlns: th). Amacının xmlns: th özelliği tüm için kapsam sağlamaktır. bu:* Bu HTML belgesinde kullanacağınız nitelikler. Thymeleaf şablonundaki diğer özellikler ve etiketler gelenekseldir HTML etiketleri ve nitelikleri.

Başlık Oluşturma

Herhangi bir web sitesinin veya uygulamanın ilk ve en önemli yönlerinden biri başlıktır. Uygulamanın neyle ilgili olduğunu (logo aracılığıyla) anlatır ve uygulamanızda kolayca gezinmenize yardımcı olur. Temel bir başlıkta bir logonun yanı sıra çeşitli gezinme bağlantıları bulunmalıdır.

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>

Thymeleaf, yukarıdaki başlığı web uygulamanızdaki herhangi bir sayfaya eklemenizi sağlar. inci: ekle bağlanmak. inci: ekle Ve th: değiştir nitelikler, Thymeleaf'in parça ifadesi değerleri olarak adlandırdığı değerleri kabul eder. Parça ifadeleri, işaretleme parçalarını düzeninizde herhangi bir konuma yerleştirmenize olanak tanır.

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

Yukarıdaki işaretlemenin üst kısmına yerleştirilmesi anasayfa.html etiketi, başlık işaretlemesini ana sayfanızın en üstüne ekleyecektir. Bir parça ifadesinin birkaç bileşeni vardır; ikisi isteğe bağlıdır ve ikisi gereklidir:

  • İsteğe bağlı olan yaklaşık işareti (~).
  • İsteğe bağlı bir çift süslü parantez ({}).
  • Eklemek istediğiniz işaretlemeyi içeren şablonun adı (başlık.html).
  • Eklemek istediğiniz işaretlemenin CSS seçicisi (#nav).

Dolayısıyla, aşağıdaki işaretleme yukarıdakiyle aynı sonucu üretir.

"header:: #nav">

Şablon Gövdenizi Doldurma

Thymeleaf, şablonlarınızda beş tür ifade kullanmanıza olanak tanır:

  • Parça İfadesi (~{…})
  • Mesaj İfadesi (#{…})
  • Bağlantı URL'si İfadesi (@{…})
  • Değişken İfadesi (${…})
  • Seçim Değişkeni İfadesi (*{…})

Bir mesaj ifadesi, düzeninize dışsallaştırılmış metin parçaları eklemenizi sağlar. Mesaj ifadeleriyle mizanpajınızdaki metni kolayca değiştirebilir veya yeniden kullanabilirsiniz. Bir mesaj ifadesi kullanırken, harici metin parçalarını her zaman bir .özellikler dosyanın altında kaynaklar dosya.

Bu örnek uygulama için bu dosya mesajlar.özellikleraşağıdaki metin parçasını içeren:

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

Yukarıdaki metin parçasının (veya mesajın) benzersiz bir anahtarı olduğunu unutmayın (yer tutucu.metin). Bunun nedeni, her mesaj dosyasının farklı mesajlardan oluşan bir koleksiyon içerebilmesidir. Bu nedenle, düzeninize belirli bir mesaj eklemek için bir anahtara ihtiyacınız olacak.

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

Yukarıdaki işaretlemeyi HTML dosyanızın gövdesine eklemek, yer tutucu metni görünümünüzde paragraf olarak etkili bir şekilde görüntüleyecektir. Parça ifadesinin aksine, mesaj ifadesinin her yönü zorunludur. Bir mesaj ifadesi şunları gerektirir:

  • Bir sayı işareti (#).
  • Bir çift süslü parantez ({}).
  • Eklemek istediğiniz mesajın bulunduğu tuş (yer tutucu.metin).

Şablonunuzu Şekillendirme

Bir diğer önemli dosya ise kaynaklar klasör statik dosyadır. Bu dosya, CSS dosyalarınızı ve uygulamanızda kullanmayı planladığınız görselleri saklar. Harici CSS dosyanızı Thymeleaf HTML şablonuna bağlamak için bağlantı URL'si ifadesini kullanmanız gerekir. Bağlantı URL'si ifadesi işlemleri hem göreceli hem de mutlak URL'ler.

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

Yukarıdaki işaretlemeyi HTML dosyanızın bir kısmı, şablonunuzu bir stil kullanarak şekillendirmenize olanak tanır. stil.css dosya. Bu dosya şu şekilde mevcuttur: css altındaki klasör statik bölümü kaynaklar Örnek başvuru dosyası. Bağlantı URL'si ifadesini her zaman inci: href bağlanmak.

Thymeleaf, düzeninizin tasarımını geliştirmek için kullanabileceğiniz diğer birçok özelliği sağlar. Böyle bir özellik, stil: stil düzeninize resim eklemek için kullanabileceğiniz özellik.

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

Yukarıdaki işaretleme şunu kullanır: stil: stil Düzeninizin belirli bir bölümüne arka plan resmi ekleme özelliği. Thymeleaf, düzenlerinize stil ve işlevsellik eklemek için kullanabileceğiniz yüzden fazla farklı özelliğe sahiptir.

Değişken İfade

Değişken ifadeler, Thymeleaf'in kullandığı en popüler ve tartışmasız en karmaşık ifadelerdir. Thymeleaf değişken ifadeleri, uygulama bağlamından veya uygulamadaki bir nesneden veri toplamanıza ve bu verileri şablona eklemenize olanak tanır. Görünümünüze oluşturmak istediğiniz verilerin kaynağına bağlı olarak kullanabileceğiniz iki tür değişken ifadesi vardır.

Birincil değişken ifadesi dolar işaretini kullanır ve uygulama bağlamı (uygulamada çalışan farklı görevlerle ilişkili verilerdir) başvuru). Örneğin, bir kullanıcının verilerini bir modaldan yakalamak istiyorsanız dolar işareti değişken ifadesi daha pratik bir seçimdir. Örnek projeyi yürütür ve şuraya giderseniz: http://localhost: 8080/ tarayıcınızda aşağıdaki modeli göreceksiniz:

Modu kapattıktan veya bir ad gönderdikten sonra uygulama ana sayfaya gidecektir. Ana sayfada, "Hoş Geldiniz" kelimesini ve ardından modalda az önce gönderdiğiniz dizeyi görüntüleyen genel bir web sitesi göreceksiniz.

Örnek uygulama, bu işlemi tamamlamak için değişken ifadesini kullanır. Buradaki basit form modal.html dosya aşağıdaki işaretlemeye sahiptir:

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


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


form>

Bir kullanıcı formu gönderdiğinde, th: eylem içinde bulabileceğiniz bir gönderi URL'si değerine sahip olan özellik WebDenetleyici sınıf.

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


 model.addAttribute("userName", userName);


return"home";
 }

İşlem adı() yöntem, kullanıcının kipe sağladığı dizeyi kabul eder, ardından bu dizeyi adı verilen bir değişkene atar. Kullanıcı adı. Değişken ifadesini kullanarak denetleyici daha sonra kullanıcı adı değişkenini düzene enjekte eder.

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

Seçim değişkeni ifadesi bir yıldız işareti kullanır ve daha karmaşık uygulamalarla uğraşırken çok kullanışlıdır. Örneğin, kullanıcıların oturum açmasını gerektiren bir uygulama, seçim değişkeni ifadesini kullanabilir. Kullanıcı adını kullanıcı nesnesinden toplayabilir ve düzene ekleyebilirsiniz.

Alternatif Şablon ve Şekillendirme Seçenekleri

Thymeleaf, Spring Boot uygulamaları için daha popüler şablon seçeneği olmasına rağmen, aynı derecede uygun başka seçenekler de vardır. Bunlara JavaServer Pages (JSP), Groovy tabanlı şablonlar, FreeMarker şablonları ve Mustache şablonları dahildir. Özel CSS stili oluşturmanın yanı sıra, mizanpajınızı şekillendirmek için bir CSS çerçevesi kullanmayı da tercih edebilirsiniz.