📖 ↩️ ☄️ एटलसियन जीरा के लिए प्लगइन्स में सोया, आवश्यकता, बैकबोन जेएस का उपयोग कैसे करें 💅🏿 🚦 👩🏻‍💻

इस लेख में, हम एक प्लगइन विकसित करेंगे जो कि जीरा में प्लगइन सेटिंग्स को बचाएगा। हम यूजर इंटरफेस को प्रदर्शित करने के लिए सोया, रिक्जेस्ट, बैकबोन जेएस लाइब्रेरी का उपयोग करेंगे। सोया, रिक्जेस्ट्स, बैकबोन जेएस बिल्ट-इन लाइब्रेरी हैं।

लेख का उद्देश्य यह दिखाना है कि आप उपयोगकर्ता इंटरफ़ेस विकसित करने के लिए जीरा के अंतर्निहित टूल का उपयोग कैसे कर सकते हैं।

विकसित प्लगइन में जीरा में प्लगइन मापदंडों को बचाने के लिए एक वेबवर्क मॉड्यूल होगा। पैरामीटर दो स्क्रीन (प्रत्येक स्क्रीन पर दो पैरामीटर) पर दर्ज किए जाएंगे। इसके अलावा, मापदंडों को जीन्स में पैक किया जाएगा, जिसे जीरा में संग्रहीत किया जाएगा। प्लगइन का स्रोत कोड यहां पाया जा सकता है ।

एक प्लगइन कंकाल बनाएँ

टर्मिनल खोलें और नीचे दिए गए कमांड को निष्पादित करें:
atlas-create-jira-plugin

हम इस तरह से टर्मिनल में सवालों के जवाब देंगे:

 Define value for groupId: : ru.matveev.alexey.jira.tutorial.webworkui Define value for artifactId: : webwork-soy-require-backbone Define value for version: 1.0.0-SNAPSHOT: : Define value for package: ru.matveev.alexey.jira.tutorial.webworkui: : Y: : Y

Pom.xml में परिवर्तन करें

प्लगइन का कंकाल बनाने के बाद, आपको सही ढंग से काम करने के लिए एटलसियन-स्प्रिंग-स्कैनर 2 के लिए बदलाव करने की आवश्यकता है।

2.0.0 में एटलसियन-स्प्रिंग-स्कैनर संस्करण स्थापित करें:

 <atlassian.spring.scanner.version>2.0.0</atlassian.spring.scanner.version>

संकलन से प्रदत्त एटलसियन-स्प्रिंग-स्केनर-एनोटेशन निर्भरता के दायरे को बदलें:

 <dependency> <groupId>com.atlassian.plugin</groupId> <artifactId>atlassian-spring-scanner-annotation</artifactId> <version>${atlassian.spring.scanner.version}</version> <scope>provided</scope> </dependency>

एटलसियन-स्प्रिंग-स्कैनर-रनटाइम निर्भरता निकालें।

प्लगइन सेटिंग्स प्राप्त करने और सहेजने के लिए एक सेवा बनाएं

सबसे पहले, प्लगइन सेटिंग्स के प्रबंधन के लिए एक इंटरफ़ेस बनाएं।

src / main / java / ru / matveev / alexey / jira / tutorial / webworkui / api / PluginSettingService.java

 package ru.matveev.alexey.jira.tutorial.webworkui.api; public interface PluginSettingService { String getConfigJson(); void setConfigJson(String json); }

अब इंटरफ़ेस को लागू करते हैं।

src / main / java / ru / matveev / alexey / jira / tutorial / webworkui / impl / PluginSettingServiceImpl.java

 package ru.matveev.alexey.jira.tutorial.webworkui.impl; import com.atlassian.plugin.spring.scanner.annotation.imports.ComponentImport; import com.atlassian.sal.api.pluginsettings.PluginSettings; import com.atlassian.sal.api.pluginsettings.PluginSettingsFactory; import ru.matveev.alexey.jira.tutorial.webworkui.api.PluginSettingService; import javax.inject.Inject; import javax.inject.Named; @Named public class PluginSettingServiceImpl implements PluginSettingService { public final PluginSettings pluginSettings; private static final String PLUGIN_STORAGE_KEY = "ru.matveev.alexey.jira.tutorial.webworkui."; private static final String CONFIG_JSON = "configjson"; @Inject public PluginSettingServiceImpl(@ComponentImport PluginSettingsFactory pluginSettingsFactory) { this.pluginSettings = pluginSettingsFactory.createGlobalSettings(); } private void setSettingValue(String settingKey, String settingValue) { this.pluginSettings.put(PLUGIN_STORAGE_KEY + settingKey, settingValue != null?settingValue:""); } private String getSettingValue(String settingKey) { return pluginSettings.get(PLUGIN_STORAGE_KEY + settingKey) != null?pluginSettings.get(PLUGIN_STORAGE_KEY + settingKey).toString():""; } @Override public String getConfigJson() { return getSettingValue(CONFIG_JSON); } @Override public void setConfigJson(String json) { setSettingValue(CONFIG_JSON, json); } }

GetConfigJson और setConfigJson विधियाँ json प्रारूप में पैरामीटर को प्राप्त करने और सहेजने के लिए जिम्मेदार हैं।

प्लगइन सेटिंग्स के प्रबंधन के लिए एक वेबवर्क बनाएं

प्लगइन फ़ोल्डर में टर्मिनल खोलें और नीचे दिए गए कमांड को निष्पादित करें:
create-atlas-jira-plugin-module

हम टर्मिनल के प्रश्नों का उत्तर इस प्रकार देते हैं:

 Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 31 Enter Plugin Module Name My Webwork Module: : Config Show Advanced Setup? (Y/y/N/n) N: : Y Module Key config: : webwork-config Module Description The Config Plugin: : i18n Name Key config.name: : i18n Description Key config.description: : Enter Action Classname MyActionClass: : ConfigWebwork Enter Package Name ru.matveev.alexey.jira.tutorial.webworkui.jira.webwork: :Enter Alias ConfigWebwork: : Enter View Name success: : success.soy Enter Template Path /templates/webwork-config/configwebwork/success.soy.vm: : /templates/webwork-config/configwebwork/success.soy Add Another View? (Y/y/N/n) N: : N Add Another Action? (Y/y/N/n) N: : N Add Another Plugin Module? (Y/y/N/n) N: : N

परिणामस्वरूप, src / main / java / ru / matveev / alexey / jira / tutorial / webworkui / jira / webwork / configWebwork.java फ़ाइल बनाई जाएगी। इस फ़ाइल को इस तरह बदलना होगा:

src / main / java / ru / matveev / alexey / jira / tutorial / webworkui / jira / webwork / configWebwork.java

 package ru.matveev.alexey.jira.tutorial.webworkui.jira.webwork; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com.atlassian.jira.web.action.JiraWebActionSupport; import ru.matveev.alexey.jira.tutorial.webworkui.api.PluginSettingService; import javax.inject.Inject; public class ConfigWebwork extends JiraWebActionSupport { private static final Logger log = LoggerFactory.getLogger(ConfigWebwork.class); private final PluginSettingService pluginSettingService; private String configJson; @Inject public ConfigWebwork(PluginSettingService pluginSettingService) { this.pluginSettingService = pluginSettingService; } @Override public String execute() throws Exception { super.execute(); return SUCCESS; } public void doSave() { pluginSettingService.setConfigJson(configJson); } @ActionViewData public String getConfigJson() { return pluginSettingService.getConfigJson().isEmpty()?"{}":pluginSettingService.getConfigJson(); } public void setConfigJson(String json) { this.configJson = json; } }

@ActionViewData एनोटेशन सोया टेम्पलेट में उपलब्ध होने के लिए configJson पैरामीटर के लिए आवश्यक है।

एक वेब सेक्शन और वेब आइटम बनाएँ

हमने वेबवर्क जोड़ा है। अब मेनू आइटम जोड़ें जिसमें से वेबवर्क लॉन्च किया जाएगा।
टर्मिनल खोलें और निम्नलिखित कमांड निष्पादित करें:
create-atlas-jira-plugin-module

हम प्रश्नों का उत्तर इस प्रकार देते हैं:

 Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 30 Enter Plugin Module Name My Web Section: : Webwork Config Section Enter Location (eg system.admin/mynewsection): admin_plugins_menu Show Advanced Setup? (Y/y/N/n) N: : N Add Another Plugin Module? (Y/y/N/n) N: : Y Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 25 Enter Plugin Module Name My Web Item: : Webwork Config Item Enter Section (eg system.admin/globalsettings): admin_plugins_menu/webwork-config-section Enter Link URL (eg /secure/CreateIssue!default.jspa): /secure/ConfigWebwork.jspa? Show Advanced Setup? (Y/y/N/n) N: : N Add Another Plugin Module? (Y/y/N/n) N: : N

परिणामस्वरूप, हमने Add-ons पृष्ठ पर एक मेनू आइटम बनाया।

एक सोया टेम्पलेट बनाएँ

सोया टेम्प्लेट के बारे में विवरण यहां पाया जा सकता है ।

हम एक फाइल बनाएंगे
src / मुख्य / संसाधन / टेम्प्लेट / वेबवर्क-कॉन्फिगर / configwebwork / success.soy।

src / मुख्य / संसाधन / टेम्प्लेट / वेबवर्क-कॉन्फिगर / configwebwork / success.soy

 {namespace webwork.config} /** * This template is needed for drawing the formview. */ {template .formview} {@param configJson: string} {webResourceManager_requireResource('ru.matveev.alexey.jira.tutorial.webworkui.webwork-soy-require-backbone:webwork-soy-require-backbone-resources')} <html> <head> <meta charset="utf-8"/> <meta name="decorator" content="atl.admin"> <meta name="admin.active.section" content="admin_plugins_menu/telegram-config-section"> <meta name="admin.active.tab" content="telegram-general-config-item"> <title>my page page</title> </head> <body> <div id="container"> <form class="aui" action="ConfigWebwork!save.jspa" method="POST"> <div class="field-group"> <label for="configJson">Json</label> <input class="text long-field" type="text" id="configJson" name="configJson" placeholder="Json String" value="{$configJson}"> <div class="description">the configJson Parameter</div> </div> <div class="buttons-container"> <div class="buttons"> <input class="button submit" type="submit" value="Save" id="config-save-button"> <a class="cancel" href="#">Cancel</a> </div> </div> </form> </div> </body> </html> {/template}

Atlassian-plugin.xml फ़ाइल में, वेब-संसाधन टैग में बनाए गए सोया टेम्पलेट का लिंक जोड़ें:

 <resource type="soy" name="webwork-config" location="/templates/webwork-config/configwebwork/success.soy"/>

अब हम atlassian-plugin.xml में परिवर्तन करेंगे ताकि जब हम वेबवर्क तक पहुंचें, तो बनाया गया सोया टेम्पलेट प्रदर्शित होगा:

 <view name="success" type="soy">:webwork-soy-require-backbone-resources/webwork.config.formview</view>

वेबवर्क-सोया-आवश्यकता-बैकबोन-संसाधन वेब-संसाधन टैग में नाम विशेषता है, जहां हमने अपने सोया टेम्पलेट का लिंक जोड़ा है।

webwork.config.formview - सोया फ़ाइल से टेम्पलेट का नाम स्थान और नाम।

परीक्षण प्लगइन

प्लगइन फ़ोल्डर में टर्मिनल खोलें और निम्नलिखित कमांड निष्पादित करें:
atlas-run

जीरा शुरू होने के बाद, निम्न लिंक का उपयोग करके ब्राउज़र पर जाएं:

लोकलहोस्ट : 2990 / जीरा / सिक्योर / कॉन्फिगरबवर्क.जस्प

स्क्रीन इस तरह दिखाई देगी:

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

स्क्रीन के चारों ओर घूमने और पैरामीटर को जोंस प्रारूप में ले जाने के तर्क को नियंत्रित करने के लिए, हम बैकबोन जेएस का उपयोग करेंगे। आप यहाँ रीढ़ की हड्डी के बारे में पढ़ सकते हैं।

एक बैकबोन मॉडल बनाएं

src / main / Resources / js / webwork-config-model.js

परिभाषित ('वेबवर्क / कॉन्फ़िगरेशन / मॉडल',]
'Jquery',
'रीढ़',
'अंडरस्कोर'
], फ़ंक्शन ($, बैकबोन, _) {
var WebConfigModel = Backbone.Model.extend ({
चूक: {
पैरामीटर 1: '',
पैरामीटर 2: '',
पैरामीटर 3: '',
पैरामीटर 4: ''
}
});
वापसी {
आदर्श: WebConfigModel
};
})

सोया टेम्प्लेट को लोड करते समय उपलब्ध होने वाले मॉडल के लिए, मॉडल के साथ फाइल को वेब-संसाधन टैग में atlassian-plugin.xml में जोड़ा जाना चाहिए:

 <resource type="download" name="webwork-config-model.js" location="/js/webwork-config-model.js"/>

एक बैकबोन दृश्य बनाएं

मैंने महत्वपूर्ण बिंदुओं के लिए कोड में टिप्पणियां लिखीं।

src / main / Resources / js / webwork-config-view.js

// परिभाषित एक आवश्यक निर्देश है और मॉडल को वेबवर्क / कॉन्फिग / व्यू मॉड्यूल के रूप में परिभाषित करता है। यह हमें मॉडल पर अन्य फ़ाइलों में निर्भरता को परिभाषित करने की अनुमति देता है।
परिभाषित ('वेबवर्क / कॉन्फ़िगरेशन / दृश्य',]
'Jquery',
'रीढ़',
'अंडरस्कोर'
], फ़ंक्शन ($, बैकबोन, _) {
"सख्त का उपयोग करें";
var AppView = Backbone.View.extend ({
घटनाएँ: {
"क्लिक करें" कॉन्फिग-सेव-बटन ":" saveConfig ",
"अगला बटन क्लिक करें": "अगला बटन"
"क्लिक करें" बैक-बटन ":" prevButton "

}
// फ़ंक्शन जो सेव बटन द्वारा काम करता है। स्क्रीन से मॉडल में पैरामीटर सहेजता है और पैरामीटर को json प्रारूप में परिवर्तित करता है
saveConfig: फ़ंक्शन () {
this.model.set ("पैरामीटर 3", $ ("# पैरामीटर 3"))। वैल ());
this.model.set ("पैरामीटर 4", $ ("# पैरामीटर 4")। वाल ());
$ ("# configJson")। वैल (JSON.stringify (यह.model));
}
// फ़ंक्शन जो पहली स्क्रीन पर नेक्स्ट बटन द्वारा काम करता है। पहली स्क्रीन से मॉडल में पैरामीटर बचाता है और दूसरी स्क्रीन खींचता है
अगलाबटन: फ़ंक्शन () {
this.model.set ("पैरामीटर 1", $ ("# पैरामीटर 1"))। वैल ());
this.model.set ("पैरामीटर 2", $ ("# पैरामीटर 2")) वैल ());
var टेम्पलेट = webwork.config.page2 ({configJson: $ ("# configJson")। val (), पैरामीटर 3: this.model.get ('पैरामीटर 3'), पैरामीटर 4: this.model .get ('पैरामीटर 4')} );
$ ("# कंटेनर")। प्रतिस्थापन (टेम्पलेट);
$ ("# configJson")। वैल (JSON.stringify (यह.model));
}
// फ़ंक्शन जो दूसरी स्क्रीन पर बैक बटन द्वारा काम करता है। मॉडल के लिए दूसरी स्क्रीन से पैरामीटर बचाता है और पहली स्क्रीन खींचता है
prevButton: फ़ंक्शन () {
this.model.set ("पैरामीटर 3", $ ("# पैरामीटर 3"))। वैल ());
this.model.set ("पैरामीटर 4", $ ("# पैरामीटर 4")। वाल ());
var टेम्पलेट = webwork.config.page1 ({configJson: $ ("# configJson")। val (), पैरामीटर 1: this.model.get ('पैरामीटर 1'), पैरामीटर 2: this.model .get ('पैरामीटर 2')} );
$ ("# कंटेनर")। प्रतिस्थापन (टेम्पलेट);
$ ("# configJson")। वैल (JSON.stringify (यह.model));
}
आरंभ करें: फ़ंक्शन () {
this.render ();
}
रेंडर: फंक्शन () {
var टेम्पलेट = webwork.config.page1 ({configJson: $ ("# configJson")। val (), पैरामीटर 1: this.model.get ('पैरामीटर 1'), पैरामीटर 2: this.model .get ('पैरामीटर 2')} );
$ ("# कंटेनर")। प्रतिस्थापन (टेम्पलेट);
}
// यह मुख्य कंटेनर की एक कड़ी है। इस तत्व के नीचे के तत्वों से दृश्य सभी घटनाओं को पकड़ लेगा।
एल: '# मेनकॉनटेनर'
});
वापसी {
देखें: AppView
};
})

सोया टेम्प्लेट को लोड करते समय उपलब्ध दृश्य के लिए, दृश्य के साथ फाइल को वेब-संसाधन टैग में एटलसियन-प्लगइन.एक्सएमएल में जोड़ा जाना चाहिए:

 <resource type="download" name="webwork-config-view.js" location="/js/webwork-config-view.js"/>

बैकबोन मॉडल और दृश्य को अनुकूलित करने के लिए एक जेएस फ़ाइल बनाएँ

src / main / Resources / js / webwork-soy-requirement-backbone.js

आवश्यकता है ([
'वेबवर्क / कॉन्फिग / व्यू',
'वेबवर्क / कॉन्फिग / मॉडल',
'Jquery',
'रीढ़',
'अंडरस्कोर'
], फ़ंक्शन (webworkConfigView, webworkConfigModel, $, Backbone, _) {
var webworkConfigModel = new webworkConfigModel.Model (JSON.parse ($ ("# configJson")। val ()));
var actionsView = नया वेबवर्ककॉन्फ़िग्यू। दृश्य ({मॉडल: webworkConfigModel});

})

हमारे जेएस फ़ाइल में आवश्यकता होती है। आवश्यकता निर्देश आपको यह सुनिश्चित करने की अनुमति देता है कि सभी निर्भरताएं डाउनलोड होने के बाद ही फ़ाइल डाउनलोड की जाएगी। हमने अपनी फ़ाइल के लिए निम्नलिखित निर्भरताओं को परिभाषित किया: वेबवर्क / कॉन्फिग / व्यू, वेबवर्क / कॉन्फिग / मॉडल, क्वेरी, बैकबोन, अंडरस्कोर।

काम करने के लिए सोया टेम्प्लेट के लिए आवश्यक पैरामीटर जोड़ें।

Atlassian-plugin.xml फ़ाइल में वेब-संसाधन टैग में, जोड़ें:

 <transformation extension="soy"> <transformer key="soyTransformer"/> </transformation> <resource name="success-soy.js" type="download" location="/templates/webwork-config/configwebwork/success.soy"/>

ये पैरामीटर आपको js फ़ाइलों में सोया टेम्प्लेट तक पहुंचने की अनुमति देते हैं।

सफलता में बदलाव करें

मैंने महत्वपूर्ण बिंदुओं पर टिप्पणियाँ जोड़ीं