जानें कि इस टेम्पलेट इंजन को अपने स्प्रिंग अनुप्रयोगों में कैसे एकीकृत किया जाए।

थाइमेलिफ़ एक जावा टेम्पलेट इंजन है। यह वेब और स्टैंडअलोन दोनों अनुप्रयोगों के लिए टेम्पलेट विकसित करता है। यह टेम्प्लेट इंजन आपके डिज़ाइन से समझौता किए बिना, आपके लेआउट में तर्क डालने के लिए नेचुरल टेम्प्लेट अवधारणा का उपयोग करता है। थाइमेलिफ़ के साथ, आपका इस पर नियंत्रण होगा कि कोई एप्लिकेशन आपके द्वारा बनाए गए टेम्पलेट्स को कैसे संसाधित करेगा।

आप छह प्रकार के टेम्पलेट्स को संसाधित करने के लिए थाइमेलिफ़ का उपयोग कर सकते हैं: HTML, XML, टेक्स्ट, जावास्क्रिप्ट, CSS और RAW। थाइमेलिफ़ प्रत्येक टेम्प्लेट को टेम्प्लेट मोड के रूप में संदर्भित करता है, HTML इस इंजन पर बनाया गया सबसे लोकप्रिय टेम्प्लेट है।

आपके एप्लिकेशन में थाइमेलिफ़ प्रारंभ करना

आपके स्प्रिंग बूट एप्लिकेशन में थाइमेलिफ़ को जोड़ने के दो तरीके हैं। आप अपना बॉयलरप्लेट बनाते समय निर्भरता के रूप में थाइमेलिफ़ का चयन कर सकते हैं स्प्रिंग का इनिशियलाइज़र टूल. आपके पास निर्भरता अनुभाग में इसे बाद में अपनी बिल्ड विनिर्देश फ़ाइल में जोड़ने का विकल्प भी है।

यदि आपने ग्रैडल प्रोजेक्ट विकल्पों में से एक का चयन किया है, तो वह फ़ाइल जिसमें निर्भरताएँ शामिल हैं

instagram viewer
बिल्ड.ग्रेडल फ़ाइल। हालाँकि, यदि आपने मावेन को चुना है, तो वह फ़ाइल है पोम.xml.

आपका पोम.xml फ़ाइल में निम्नलिखित निर्भरता अनुभाग होना चाहिए:

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


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

जबकि आपका बिल्ड.ग्रेडल फ़ाइल में निम्नलिखित निर्भरता अनुभाग होना चाहिए:

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

लेख में प्रयुक्त नमूना एप्लिकेशन इसमें उपलब्ध है गिटहब रिपॉजिटरी और यह आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए निःशुल्क है।

अपने स्प्रिंग एप्लिकेशन में थाइमेलीफ को जोड़कर आप इसकी मुख्य लाइब्रेरी तक पहुंच प्राप्त करेंगे, जो आपको थाइमेलीफ की स्प्रिंग स्टैंडर्ड बोली का उपयोग करने की अनुमति देता है। स्प्रिंग स्टैंडर्ड बोली में अद्वितीय विशेषताएँ और वाक्यविन्यास शामिल हैं जिनका उपयोग आप अपने लेआउट में विभिन्न सुविधाएँ जोड़ने के लिए कर सकते हैं।

स्प्रिंग बूट में थाइमेलिफ़ का उपयोग करना

अपने स्प्रिंग एप्लिकेशन में थाइमेलिफ़ का उपयोग करते समय, पहला कदम अपना टेम्पलेट दस्तावेज़ बनाना है। इस नमूना एप्लिकेशन के लिए, टेम्पलेट दस्तावेज़ HTML है। आपको हमेशा स्प्रिंग बूट में अपना थाइमेलिफ़ टेम्पलेट बनाना चाहिए खाके फ़ोल्डर, जो संसाधन फ़ाइल में उपलब्ध है।

Home.html फ़ाइल

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

उपरोक्त थाइमेलिफ़ टेम्पलेट एक सामान्य HTML5 टेम्पलेट है, जिसमें एक विदेशी विशेषता है (xmlns: वें). का उद्देश्य xmlns: वें विशेषता सभी के लिए गुंजाइश प्रदान करना है वां:* विशेषताएँ जिनका उपयोग आप इस HTML दस्तावेज़ में करेंगे। थाइमेलिफ़ टेम्प्लेट में अन्य विशेषताएँ और टैग पारंपरिक हैं HTML टैग और विशेषताएँ.

एक हेडर बनाना

किसी भी वेबसाइट या एप्लिकेशन का पहला और सबसे महत्वपूर्ण पहलू हेडर है। यह बताता है कि एप्लिकेशन किस बारे में है (लोगो के माध्यम से) और आपको अपने एप्लिकेशन को आसानी से नेविगेट करने में मदद करता है। एक मूल हेडर में एक लोगो, साथ ही कई नेविगेशन लिंक होने चाहिए।

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 आपको इसका उपयोग करके अपने वेब एप्लिकेशन में किसी भी पेज पर उपरोक्त हेडर जोड़ने की अनुमति देता है वें: सम्मिलित करें गुण। वें: सम्मिलित करें और वें: बदलें विशेषताएँ वह स्वीकार करती हैं जिसे थाइमेलीफ खंड अभिव्यक्ति मान कहता है। फ़्रैगमेंट अभिव्यक्तियाँ आपको अपने लेआउट में किसी भी स्थान पर मार्कअप के टुकड़े रखने की अनुमति देती हैं।

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

उपरोक्त मार्कअप को सबसे ऊपर सम्मिलित करना होम.एचटीएमएल टैग आपके होम पेज के शीर्ष पर हेडर मार्कअप सम्मिलित करेगा। एक खंड अभिव्यक्ति में कई घटक होते हैं, दो वैकल्पिक हैं और दो आवश्यक हैं:

  • एक टिल्ड (~), जो वैकल्पिक है।
  • घुंघराले ब्रेसिज़ की एक जोड़ी ({}), जो वैकल्पिक है।
  • टेम्प्लेट का नाम जिसमें वह मार्कअप शामिल है जिसे आप सम्मिलित करना चाहते हैं (हेडर.एचटीएमएल).
  • मार्कअप का सीएसएस चयनकर्ता जिसे आप सम्मिलित करना चाहते हैं (#nav)।

तो, निम्नलिखित मार्कअप ऊपर वाले के समान ही परिणाम उत्पन्न करता है।

"header:: #nav">

आपके टेम्प्लेट बॉडी को पॉप्युलेट करना

थाइमेलिफ़ आपको अपने टेम्पलेट्स में पाँच प्रकार के भावों का उपयोग करने की अनुमति देता है:

  • खंड अभिव्यक्ति (~{...})
  • संदेश अभिव्यक्ति (#{...})
  • लिंक यूआरएल अभिव्यक्ति (@{…})
  • परिवर्तनीय अभिव्यक्ति (${…})
  • चयन चर अभिव्यक्ति (*{…})

एक संदेश अभिव्यक्ति आपको अपने लेआउट में पाठ के बाहरी टुकड़े जोड़ने की अनुमति देती है। संदेश अभिव्यक्तियों के साथ, आप अपने लेआउट में टेक्स्ट को आसानी से बदल सकते हैं या पुन: उपयोग कर सकते हैं। संदेश अभिव्यक्ति का उपयोग करते समय, आपको हमेशा बाहरी पाठ अंशों को एक में रखना चाहिए ।गुण के अंतर्गत फ़ाइल करें संसाधन फ़ोल्डर.

इस नमूना अनुप्रयोग के लिए, वह फ़ाइल है संदेश.गुण, जिसमें पाठ का निम्नलिखित अंश शामिल है:

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

आपको ध्यान देना चाहिए कि ऊपर दिए गए पाठ (या संदेश) के टुकड़े में एक अद्वितीय कुंजी है (प्लेसहोल्डर.पाठ). ऐसा इसलिए है क्योंकि प्रत्येक संदेश फ़ाइल में विभिन्न संदेशों का संग्रह हो सकता है। तो, आपको अपने लेआउट में एक विशिष्ट संदेश सम्मिलित करने के लिए एक कुंजी की आवश्यकता होगी।

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

उपरोक्त मार्कअप को अपनी HTML फ़ाइल के मुख्य भाग में सम्मिलित करने से प्लेसहोल्डर टेक्स्ट आपके दृश्य में पैराग्राफ के रूप में प्रभावी रूप से प्रदर्शित होगा। खंडित अभिव्यक्ति के विपरीत, संदेश अभिव्यक्ति का प्रत्येक पहलू अनिवार्य है। एक संदेश अभिव्यक्ति के लिए आवश्यक है:

  • एक संख्या चिह्न (#).
  • घुंघराले ब्रेसिज़ की एक जोड़ी ({}).
  • वह कुंजी जिसमें वह संदेश है जिसे आप सम्मिलित करना चाहते हैं (प्लेसहोल्डर.पाठ).

अपने टेम्पलेट को स्टाइल करना

में एक और महत्वपूर्ण फ़ाइल संसाधन फ़ोल्डर स्थिर फ़ाइल है. यह फ़ाइल आपकी सीएसएस फ़ाइलों और उन सभी छवियों को संग्रहीत करती है जिन्हें आप अपने एप्लिकेशन में उपयोग करने की योजना बना रहे हैं। अपनी बाहरी CSS फ़ाइल को Thymeleaf HTML टेम्पलेट से लिंक करने के लिए आपको लिंक URL एक्सप्रेशन का उपयोग करना होगा। लिंक यूआरएल अभिव्यक्ति प्रक्रियाएँ सापेक्ष और निरपेक्ष दोनों यूआरएल.

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

उपरोक्त मार्कअप को इसमें सम्मिलित करना आपकी HTML फ़ाइल का उपयोग करके आप अपने टेम्पलेट को स्टाइल कर सकेंगे स्टाइल.सीएसएस फ़ाइल। यह फ़ाइल a में उपलब्ध है सीएसएस के अंतर्गत फ़ोल्डर स्थिर का अनुभाग संसाधन नमूना आवेदन की फ़ाइल. आपको हमेशा लिंक यूआरएल एक्सप्रेशन असाइन करना चाहिए वें: href गुण।

थाइमेलिफ़ कई अन्य विशेषताएँ प्रदान करता है जिनका उपयोग आप अपने लेआउट के डिज़ाइन को बढ़ाने के लिए कर सकते हैं। ऐसा ही एक गुण है वें: शैली विशेषता, जिसका उपयोग आप अपने लेआउट में छवियां जोड़ने के लिए कर सकते हैं।

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

उपरोक्त मार्कअप का उपयोग करता है वें: शैली आपके लेआउट के एक विशिष्ट अनुभाग में पृष्ठभूमि छवि जोड़ने के लिए विशेषता। थाइमेलिफ़ में सौ से अधिक विभिन्न विशेषताएँ हैं जिनका उपयोग आप अपने लेआउट में शैली और कार्यक्षमता जोड़ने के लिए कर सकते हैं।

परिवर्तनशील अभिव्यक्ति

परिवर्तनशील अभिव्यक्तियाँ सबसे लोकप्रिय और यकीनन सबसे जटिल अभिव्यक्तियाँ हैं जिनका उपयोग थाइमेलिफ़ करता है। थाइमेलिफ़ वैरिएबल एक्सप्रेशन आपको एप्लिकेशन संदर्भ या एप्लिकेशन में किसी ऑब्जेक्ट से डेटा एकत्र करने और उस डेटा को टेम्पलेट में इंजेक्ट करने की अनुमति देता है। उस डेटा के स्रोत के आधार पर जिसे आप अपने दृश्य में प्रस्तुत करना चाहते हैं, दो प्रकार के परिवर्तनीय अभिव्यक्तियाँ हैं जिनका आप उपयोग कर सकते हैं।

प्राथमिक चर अभिव्यक्ति डॉलर चिह्न का उपयोग करती है और आपको डेटा एकत्र करने की अनुमति देती है एप्लिकेशन संदर्भ (जो इसमें चल रहे विभिन्न कार्यों से जुड़ा डेटा है आवेदन पत्र)। उदाहरण के लिए, यदि आप किसी उपयोगकर्ता के डेटा को किसी मॉडल से कैप्चर करना चाहते हैं, तो डॉलर चिह्न चर अभिव्यक्ति अधिक व्यावहारिक विकल्प है। यदि आप नमूना प्रोजेक्ट निष्पादित करते हैं और नेविगेट करते हैं http://localhost: 8080/ आपके ब्राउज़र में, आपको निम्नलिखित मोडल दिखाई देगा:

आपके द्वारा मोडल बंद करने या नाम सबमिट करने के बाद, एप्लिकेशन होम पेज पर चला जाएगा। मुख पृष्ठ पर, आपको एक सामान्य वेबसाइट दिखाई देगी जो "वेलकम" शब्द प्रदर्शित करती है, उसके बाद वह स्ट्रिंग प्रदर्शित होती है जिसे आपने अभी-अभी मोडल में सबमिट किया है।

नमूना एप्लिकेशन इस प्रक्रिया को पूरा करने के लिए परिवर्तनीय अभिव्यक्ति का उपयोग करता है। में सरल रूप modal.html फ़ाइल में निम्नलिखित मार्कअप है:

<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>

चयन चर अभिव्यक्ति एक तारांकन का उपयोग करती है, और यह तब सबसे उपयोगी होती है जब आप अधिक जटिल अनुप्रयोगों से निपट रहे होते हैं। उदाहरण के लिए, एक एप्लिकेशन जिसके लिए उपयोगकर्ताओं को साइन इन करने की आवश्यकता होती है, वह चयन चर अभिव्यक्ति का उपयोग कर सकता है। आप उपयोगकर्ता ऑब्जेक्ट से उपयोगकर्ता नाम एकत्र कर सकते हैं और उसे लेआउट में सम्मिलित कर सकते हैं।

वैकल्पिक टेम्पलेट और स्टाइलिंग विकल्प

हालाँकि स्प्रिंग बूट अनुप्रयोगों के लिए थाइमेलिफ़ अधिक लोकप्रिय टेम्पलेट विकल्प है, लेकिन कई अन्य समान रूप से व्यवहार्य विकल्प भी हैं। इनमें जावासर्वर पेज (जेएसपी), ग्रूवी-आधारित टेम्पलेट, फ्रीमार्कर टेम्पलेट और मूंछ टेम्पलेट शामिल हैं। कस्टम सीएसएस स्टाइल बनाने के अलावा, आप अपने लेआउट को स्टाइल करने के लिए सीएसएस फ्रेमवर्क का उपयोग करने का विकल्प भी चुन सकते हैं।