गाइड: थाइमेलफ + वसंत। भाग २

पहला भाग
तीसरा भाग

5 प्रदर्शन बीज स्टार्टर डेटा

पहली बात यह है कि हमारा /WEB-INF/templates/seedstartermng.html पेज शो प्रारंभिक सूची डेटा के साथ एक सूची है जो वर्तमान में सहेजा गया है। ऐसा करने के लिए, हमें कुछ बाहरी संदेशों की आवश्यकता होती है, साथ ही साथ मॉडल विशेषताओं के लिए कुछ अभिव्यक्ति काम करते हैं। इस तरह:

<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}"> <h2 th:text="#{title.list}">List of Seed Starters</h2> <table> <thead> <tr> <th th:text="#{seedstarter.datePlanted}">Date Planted</th> <th th:text="#{seedstarter.covered}">Covered</th> <th th:text="#{seedstarter.type}">Type</th> <th th:text="#{seedstarter.features}">Features</th> <th th:text="#{seedstarter.rows}">Rows</th> </tr> </thead> <tbody> <tr th:each="sb : ${allSeedStarters}"> <td th:text="${{sb.datePlanted}}">13/01/2011</td> <td th:text="#{|bool.${sb.covered}|}">yes</td> <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td> <td th:text="${#strings.arrayJoin( #messages.arrayMsg( #strings.arrayPrepend(sb.features,'seedstarter.feature.')), ', ')}">Electric Heating, Turf</td> <td> <table> <tbody> <tr th:each="row,rowStat : ${sb.rows}"> <td th:text="${rowStat.count}">1</td> <td th:text="${row.variety.name}">Thymus Thymi</td> <td th:text="${row.seedsPerCell}">12</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> 

देखने को बहुत कुछ है। आइए प्रत्येक टुकड़े को अलग से देखें।

सबसे पहले, यह खंड केवल तभी प्रदर्शित होगा जब बीज शुरुआत हो। हम इसे वें के साथ प्राप्त करते हैं : कभी भी विशेषता और # lists.isEmpty (...) फ़ंक्शन नहीं।

 <div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}"> 

ध्यान दें कि सभी उपयोगिता वस्तुएं, जैसे # लिस्ट , स्प्रिंग ईएल अभिव्यक्तियों में उसी तरह से उपलब्ध हैं जैसे ओजीएनएल में मानक बोली में अभिव्यक्तियाँ होती हैं।

देखने के लिए अगली बात बहुत सारे अंतर्राष्ट्रीयकृत (बाहरी) ग्रंथ हैं, जैसे:

<h2 th: text = "# {title.list}"> बीज शुरुआत की सूची

 <table> <thead> <tr> <th th:text="#{seedstarter.datePlanted}">Date Planted</th> <th th:text="#{seedstarter.covered}">Covered</th> <th th:text="#{seedstarter.type}">Type</th> <th th:text="#{seedstarter.features}">Features</th> <th th:text="#{seedstarter.rows}">Rows</th> ... 

यह एक स्प्रिंग एमवीसी एप्लिकेशन है, हमने अपने स्प्रिंग कॉन्फ़िगरेशन में पहले ही MessageSource बीन को परिभाषित कर दिया है ( MessageSource ऑब्जेक्ट स्प्रिंग MVC में बाहरी ग्रंथों को नियंत्रित करने का मानक तरीका है):

 @Bean public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("Messages"); return messageSource; } 

... और इस बेसन प्रॉपर्टी से संकेत मिलता है कि हमारे पास हमारे classpath में फाइलें होंगी, जैसे कि Message_es.properties या Messages_en.properties । आइए स्पैनिश संस्करण देखें:

 title.list=Lista de semilleros date.format=dd/MM/yyyy bool.true=sí bool.false=no seedstarter.datePlanted=Fecha de plantación seedstarter.covered=Cubierto seedstarter.type=Tipo seedstarter.features=Características seedstarter.rows=Filas seedstarter.type.WOOD=Madera seedstarter.type.PLASTIC=Plástico seedstarter.feature.SEEDSTARTER_SPECIFIC_SUBSTRATE=Sustrato específico para semilleros seedstarter.feature.FERTILIZER=Fertilizante seedstarter.feature.PH_CORRECTOR=Corrector de PH 

तालिका के पहले कॉलम में हम तारीख दिखाते हैं जब स्टार्टर तैयार किया गया था। लेकिन हम यह दिखाएंगे कि यह स्वरूपित है जैसा कि हमने अपने DateFormatter में परिभाषित किया है। ऐसा करने के लिए, हम डबल-ब्रैकेट सिंटैक्स ( $ {{...}} ) का उपयोग करेंगे, जो स्वचालित रूप से स्प्रिंग रूपांतरण सेवा को लागू करेगा, जिसमें डेटफ़ॉर्मेटर भी शामिल है, जिसे हमने सेट करते समय पंजीकृत किया था।

 <td th:text="${{sb.datePlanted}}">13/01/2011</td> 

निम्नलिखित से पता चलता है कि बीज स्टार्टर सीड कंटेनर को कवर किया गया है या नहीं, बूलियन कवर बिन के संपत्ति मूल्य को एक अंतरराष्ट्रीय स्तर पर हां या नहीं में शाब्दिक लुकअप अभिव्यक्ति के साथ परिवर्तित करके:

 <td th:text="#{|bool.${sb.covered}|}">yes</td> 

अब हमें प्रारंभिक बीज स्टार्टर कंटेनर के प्रकार को दिखाने की आवश्यकता है। प्रकार दो मानों ( WOOD और PLASTIC ) के साथ एक जावा गणना है, और इसलिए हमने अपने संदेश फ़ाइल में दो गुण परिभाषित किए हैं जिनके नाम seedstarter.type.WOO D और seedstarter.type.PLASTIC हैं ।

लेकिन अंतर्राष्ट्रीयकृत प्रकार के नाम प्राप्त करने के लिए, हमें seedstarter.type को जोड़ना होगा। एक अभिव्यक्ति का उपयोग कर एनम के मूल्य के लिए उपसर्ग, जिसके परिणामस्वरूप हम तब संदेश कुंजी के रूप में उपयोग करेंगे:

 <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td> 

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

ध्यान दें कि यह विशेष रूप से कठिन है क्योंकि इन ईनम मानों को भी अनुमान लगाना चाहिए, जैसा कि हमने प्रकारों के साथ किया था। आउटपुट स्ट्रीम निम्नानुसार है:

• सुविधाओं के सभी तत्वों के साथ उपयुक्त उपसर्ग को सरणी।
• चरण 1 में सभी कुंजी से मेल खाते बाहरी संदेश प्राप्त करें।
• चरण 2 में प्राप्त सभी संदेशों को एक विभाजक के रूप में अल्पविराम का उपयोग करते हुए संलग्न करें।

ऐसा करने के लिए, हम निम्नलिखित कोड बनाते हैं:

 <td th:text="${#strings.arrayJoin( #messages.arrayMsg( #strings.arrayPrepend(sb.features,'seedstarter.feature.')), ', ')}">Electric Heating, Turf</td> 

हमारी सूची का अंतिम स्तंभ वास्तव में काफी सरल होगा। यहां तक ​​कि अगर इसमें कंटेनर में प्रत्येक पंक्ति की सामग्री प्रदर्शित करने के लिए एक नेस्टेड टेबल है:

 <td> <table> <tbody> <tr th:each="row,rowStat : ${sb.rows}"> <td th:text="${rowStat.count}">1</td> <td th:text="${row.variety.name}">Thymus Thymi</td> <td th:text="${row.seedsPerCell}">12</td> </tr> </tbody> </table> </td> 

6 फॉर्म बनाना

6.1 एक कमांड ऑब्जेक्ट को संसाधित करना

कमांड ऑब्जेक्ट वह नाम है जिसे स्प्रिंग एमवीसी फॉर्म सपोर्ट बीन्स देता है, यानी ऑब्जेक्ट्स जो फ़ील्ड बनाते हैं और प्राप्त करने और सेट करने के तरीके प्रदान करते हैं जो प्लेटफ़ॉर्म ब्राउज़र में उपयोगकर्ता द्वारा दर्ज किए गए मानों को सेट और पुनर्प्राप्त करने के लिए उपयोग करेगा।

Thymeleaf के लिए आवश्यक है कि आप अपने <form> टैग में ऑब्जेक्ट विशेषता का उपयोग करते हुए एक कमांड ऑब्जेक्ट निर्दिष्ट करें:

 <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post"> ... </form> 

यह वें: ऑब्जेक्ट के एक और उपयोग के साथ संगत है, लेकिन वास्तव में यह विशेष परिदृश्य स्प्रिंग एमवीसी फ्रेमवर्क के साथ उचित एकीकरण के लिए कुछ सीमाएं जोड़ता है:

• वें: ऑब्जेक्ट टैग के रूप में ऑब्जेक्ट विशेषता मान वैरिएबल एक्सप्रेशन ( $ {...} ) होना चाहिए, जो गुणों के माध्यम से नेविगेट किए बिना केवल मॉडल विशेषता नाम निर्दिष्ट कर रहे हैं। इसका अर्थ है कि $ {seedStarter} जैसी अभिव्यक्ति मान्य है, लेकिन $ {seedStarter.data} नहीं होगी।
• <फ़ॉर्म> टैग के अंदर , एक और वें: ऑब्जेक्ट विशेषता निर्दिष्ट नहीं की जा सकती है। यह इस तथ्य के अनुरूप है कि HTML रूपों को नेस्टेड नहीं किया जा सकता है।

6.2 इनपुट

आइए अब देखते हैं कि हमारे फॉर्म में इनपुट कैसे जोड़ें:

 <input type="text" th:field="*{datePlanted}" /> 

जैसा कि आप देख सकते हैं, हम एक नई विशेषता पेश कर रहे हैं: th: फ़ील्ड । स्प्रिंग एमवीसी एकीकरण के लिए यह एक बहुत ही महत्वपूर्ण विशेषता है, क्योंकि यह आपके इनपुट को फॉर्म सपोर्ट कंपोनेंट में किसी संपत्ति में बाँधने की पूरी मेहनत करता है। आप इसे स्प्रिंग MVC JSP टैग लाइब्रेरी के टैग में पथ विशेषता के समकक्ष देख सकते हैं।

Th: फ़ील्ड विशेषता इस बात पर निर्भर करती है कि यह <input>, <select> या <textarea> टैग से जुड़ा हुआ है (और विशिष्ट प्रकार के <input> टैग पर निर्भर करता है)। इस स्थिति में (इनपुट [प्रकार = पाठ]) कोड की उपरोक्त रेखा निम्न के समान है:

 <input type="text" id="datePlanted" name="datePlanted" th:value="*{datePlanted}" /> 

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

वें के लिए मान : फ़ील्ड विशेषताओं का चयन अभिव्यक्ति ( * {...} ) होना चाहिए, जो इस तथ्य को देखते हुए समझ में आता है कि उनका मूल्यांकन एक घटक पर किया जाएगा जो फ़ॉर्म का समर्थन करता है, न कि संदर्भ चर (या स्प्रिंग एमवीसी शब्दजाल में मॉडल विशेषताओं) पर। )।

वें में अभिव्यक्ति के विपरीत : ऑब्जेक्ट , इन अभिव्यक्तियों में संपत्ति नेविगेशन शामिल हो सकता है (वास्तव में, किसी भी अभिव्यक्ति को <form: input> JSP टैग की पथ विशेषता के लिए अनुमति दी गई है)।

ध्यान दें कि th: फ़ील्ड HTML5 में शुरू किए गए <इनपुट> तत्व के नए प्रकारों को भी समझता है, जैसे <इनपुट प्रकार = "डेटाटाइम" ... />, <इनपुट प्रकार = "रंग" ... />, आदि, प्रभावी रूप से। स्प्रिंग MVC के लिए पूर्ण HTML5 समर्थन जोड़ना।

6.3 चेकबॉक्स फ़ील्ड

th: फ़ील्ड आपको झंडे के लिए चेकबॉक्स इनपुट को परिभाषित करने की भी अनुमति देता है। आइए हमारे HTML पृष्ठ से एक उदाहरण देखें:

 <div> <label th:for="${#ids.next('covered')}" th:text="#{seedstarter.covered}">Covered</label> <input type="checkbox" th:field="*{covered}" /> </div> 

ध्यान दें कि ध्वज के अलावा कुछ और भी है, उदाहरण के लिए, एक बाहरी लेबल, साथ ही उस मान को प्राप्त करने के लिए # ids.next ('बंद') फ़ंक्शन का उपयोग करते हुए जो ध्वज के इनपुट की आईडी विशेषता पर लागू होगा।

हमें इस क्षेत्र के लिए आईडी विशेषता बनाने की आवश्यकता क्यों है? चूंकि झंडे संभावित रूप से बहु-मूल्यवान हैं, और इसलिए, अनुक्रम संख्या का प्रत्यय हमेशा उनके पहचानकर्ता मूल्यों में जोड़ा जाएगा (आंतरिक रूप से # ids.seq (...) फ़ंक्शन का उपयोग करके) यह सुनिश्चित करने के लिए कि एक ही संपत्ति के इनपुट झंडे में से प्रत्येक का एक अलग पहचानकर्ता मान है ।

अगर हम इस तरह के बहु-मूल्यवान चेक बॉक्स को देखें तो यह देखना हमारे लिए आसान होगा:

 <ul> <li th:each="feat : ${allFeatures}"> <input type="checkbox" th:field="*{features}" th:value="${feat}" /> <label th:for="${#ids.prev('features')}" th:text="#{${'seedstarter.feature.' + feat}}">Heating</label> </li> </ul> 

कृपया ध्यान दें कि इस बार हमने वें: मूल्य विशेषता को जोड़ा है, क्योंकि फ़ंक्शन फ़ील्ड तार्किक नहीं है, जैसा कि ऊपर वर्णित है, लेकिन मूल्यों की एक सरणी है।

आइए इस कोड द्वारा उत्पन्न HTML आउटपुट देखें:

 <ul> <li> <input id="features1" name="features" type="checkbox" value="SEEDSTARTER_SPECIFIC_SUBSTRATE" /> <input name="_features" type="hidden" value="on" /> <label for="features1">Seed starter-specific substrate</label> </li> <li> <input id="features2" name="features" type="checkbox" value="FERTILIZER" /> <input name="_features" type="hidden" value="on" /> <label for="features2">Fertilizer used</label> </li> <li> <input id="features3" name="features" type="checkbox" value="PH_CORRECTOR" /> <input name="_features" type="hidden" value="on" /> <label for="features3">PH Corrector used</label> </li> </ul> 

यहां हम देखते हैं कि प्रत्येक आईडी इनपुट विशेषता में अनुक्रम प्रत्यय कैसे जोड़ा जाता है और # ids.prev (...) फ़ंक्शन हमें एक विशिष्ट इनपुट पहचानकर्ता के लिए उत्पन्न अंतिम अनुक्रम मान निकालने की अनुमति देता है।

नाम = "_ फीचर" के साथ इन छिपे हुए इनपुट्स के बारे में चिंता न करें: वे स्वचालित रूप से उन ब्राउज़रों के साथ समस्याओं से बचने के लिए जोड़े जाते हैं जो फ़ॉर्म सबमिट किए जाने पर सर्वर पर अचयनित ध्वज मान नहीं भेजते हैं।

यह भी ध्यान दें कि यदि हमारी सुविधाओं की संपत्ति में हमारे फॉर्म-बैकिंग बीन में कुछ चयनित मान शामिल हैं, तो th: फ़ील्ड इस बात का ध्यान रखेगा और संबंधित इनपुट टैग में चेक किए गए = "चेक किए गए" विशेषता को जोड़ेगा।

6.4 रेडियो बटन फ़ील्ड

स्विच फ़ील्ड निश्चित रूप से गैर-बूलियन (बहु-मूल्यवान) झंडे के समान सेट किए जाते हैं, सिवाय इसके कि वे मूल्यवान नहीं हैं:

 <ul> <li th:each="ty : ${allTypes}"> <input type="radio" th:field="*{type}" th:value="${ty}" /> <label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label> </li> </ul> 

6.5 ड्रॉपडाउन / सूची चयनकर्ता

चयन फ़ील्ड में दो भाग होते हैं: <select> टैग और उसका नेस्टेड <विकल्प> टैग। इस प्रकार का क्षेत्र बनाते समय, केवल <select> टैग में th: फ़ील्ड विशेषता शामिल होनी चाहिए, लेकिन नेस्टेड <विकल्प> टैग में मूल्य विशेषताएँ बहुत महत्वपूर्ण होंगी क्योंकि वे यह पता लगाने का अवसर प्रदान करेंगे कि वर्तमान में चयनित विकल्प क्या है (गैर-बूलियन फ़्लैग और रेडियो बटन के समान) )।

आइए एक ड्रॉपडाउन प्रकार फ़ील्ड का पुनर्निर्माण करें:

 <select th:field="*{type}"> <option th:each="type : ${allTypes}" th:value="${type}" th:text="#{${'seedstarter.type.' + type}}">Wireframe</option> </select> 

इस बिंदु पर, कोड के इस टुकड़े को समझना बहुत आसान है। ध्यान दें कि कैसे प्राथमिकता प्राथमिकता हमें वें सेट करने की अनुमति देती है : प्रत्येक विशेषता <विकल्प> टैग में ही है।

6.6 गतिशील क्षेत्र

स्प्रिंग एमवीसी में बाध्यकारी फॉर्म फ़ील्ड की उन्नत क्षमताओं के लिए धन्यवाद, हम अपने फॉर्म-बैकिंग बीन के लिए गतिशील फॉर्म फ़ील्ड को बांधने के लिए जटिल स्प्रिंग ईएल अभिव्यक्तियों का उपयोग कर सकते हैं। यह हमें हमारे SeedStarter घटक में नई रो ऑब्जेक्ट बनाने और उपयोगकर्ता के अनुरोध पर इन लाइनों के क्षेत्रों को हमारे फॉर्म में जोड़ने की अनुमति देगा।

ऐसा करने के लिए, हमें अपने नियंत्रक में कुछ नए मैप किए गए तरीकों की आवश्यकता है जो कुछ अनुरोध मापदंडों की उपलब्धता के आधार पर हमारे SeedStarter से एक पंक्ति जोड़ते हैं या हटाते हैं:

 @RequestMapping(value="/seedstartermng", params={"addRow"}) public String addRow(final SeedStarter seedStarter, final BindingResult bindingResult) { seedStarter.getRows().add(new Row()); return "seedstartermng"; } @RequestMapping(value="/seedstartermng", params={"removeRow"}) public String removeRow( final SeedStarter seedStarter, final BindingResult bindingResult, final HttpServletRequest req) { final Integer rowId = Integer.valueOf(req.getParameter("removeRow")); seedStarter.getRows().remove(rowId.intValue()); return "seedstartermng"; } 

और अब हम अपने फॉर्म में एक डायनामिक टेबल जोड़ सकते हैं:

 <table> <thead> <tr> <th th:text="#{seedstarter.rows.head.rownum}">Row</th> <th th:text="#{seedstarter.rows.head.variety}">Variety</th> <th th:text="#{seedstarter.rows.head.seedsPerCell}">Seeds per cell</th> <th> <button type="submit" name="addRow" th:text="#{seedstarter.row.add}">Add row</button> </th> </tr> </thead> <tbody> <tr th:each="row,rowStat : *{rows}"> <td th:text="${rowStat.count}">1</td> <td> <select th:field="*{rows[__${rowStat.index}__].variety}"> <option th:each="var : ${allVarieties}" th:value="${var.id}" th:text="${var.name}">Thymus Thymi</option> </select> </td> <td> <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" /> </td> <td> <button type="submit" name="removeRow" th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button> </td> </tr> </tbody> </table> 

यहाँ पर्याप्त चीजें हैं, लेकिन इतनी नहीं कि समझ में न आए ... सिवाय एक अजीब बात के:

 <select th:field="*{rows[__${rowStat.index}__].variety}"> ... </select> 

यदि आप ट्यूटोरियल से याद करते हैं , " थाइमेल्फ का उपयोग करना, " वाक्यविन्यास __ $ {...} __ एक प्रीप्रोसेसिंग अभिव्यक्ति है, जो एक आंतरिक अभिव्यक्ति है जिसका मूल्यांकन संपूर्ण अभिव्यक्ति के वास्तविक मूल्यांकन से पहले किया जाता है। लेकिन पंक्ति सूचकांक को निर्दिष्ट करने का यह तरीका क्यों? यह पर्याप्त नहीं होगा:

 <select th:field="*{rows[rowStat.index].variety}"> ... </select> 

... वास्तव में नहीं। समस्या यह है कि स्प्रिंग ईएल सरणी सूचकांक के कोष्ठक में चर का मूल्यांकन नहीं करता है, इसलिए उपरोक्त अभिव्यक्ति को निष्पादित करते समय, हमें एक त्रुटि मिलती है जो हमें बताती है कि पंक्तियाँ [rowStat.index] ( पंक्तियों के बजाय [0] , पंक्तियों [1] , आदि। ) पंक्ति संग्रह में अमान्य स्थिति। यही कारण है कि यहां प्री-प्रोसेसिंग की जरूरत है।

हम कई बार "रो जोड़ें" क्लिक करने के बाद परिणामी HTML कोड का एक टुकड़ा देखते हैं:

 <tbody> <tr> <td>1</td> <td> <select id="rows0.variety" name="rows[0].variety"> <option selected="selected" value="1">Thymus vulgaris</option> <option value="2">Thymus x citriodorus</option> <option value="3">Thymus herba-barona</option> <option value="4">Thymus pseudolaginosus</option> <option value="5">Thymus serpyllum</option> </select> </td> <td> <input id="rows0.seedsPerCell" name="rows[0].seedsPerCell" type="text" value="" /> </td> <td> <button name="removeRow" type="submit" value="0">Remove row</button> </td> </tr> <tr> <td>2</td> <td> <select id="rows1.variety" name="rows[1].variety"> <option selected="selected" value="1">Thymus vulgaris</option> <option value="2">Thymus x citriodorus</option> <option value="3">Thymus herba-barona</option> <option value="4">Thymus pseudolaginosus</option> <option value="5">Thymus serpyllum</option> </select> </td> <td> <input id="rows1.seedsPerCell" name="rows[1].seedsPerCell" type="text" value="" /> </td> <td> <button name="removeRow" type="submit" value="1">Remove row</button> </td> </tr> </tbody>