🙋🏻 💿 🌇 كيفية استخدام فول الصويا ، والطلب ، وشبكة العمود الفقري في الإضافات لـ Atlassian Jira 👨🏽‍🔧 🧓🏻 👩🏽‍🔧

في هذه المقالة ، سنطور مكونًا إضافيًا سيحفظ إعدادات المكونات الإضافية في Jira. سنستخدم مكتبات الصويا ، والطلب ، والمكتبة الأساسية لعرض واجهة المستخدم. الصويا ، والطلب ، وشبكات العمود الفقري هي مكتبات مدمجة في جيرا.

الغرض من المقالة هو إظهار كيف يمكنك استخدام أدوات Jira المدمجة لتطوير واجهة مستخدم.

سيحتوي البرنامج المساعد المطور على وحدة عمل ويب لحفظ معلمات البرنامج المساعد في جيرا. سيتم إدخال المعلمات على شاشتين (معلمتان في كل شاشة). علاوة على ذلك ، سيتم حزم المعلمات في json ، والتي سيتم تخزينها في Jira. يمكن العثور على رمز المصدر للمكوِّن الإضافي هنا .

إنشاء هيكل عظمي المساعد

افتح الوحدة الطرفية ونفذ الأمر أدناه:
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>

تغيير نطاق تبعية Atlassian-spring-scanner-شرح من الترجمة إلى المقدمة:

 <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 في قالب فول الصويا.

إنشاء قسم ويب وعنصر ويب

لقد أضفنا webwork. الآن قم بإضافة عنصر القائمة الذي سيتم إطلاق عمل الويب منه.
افتح الوحدة الطرفية وقم بتنفيذ الأمر التالي:
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

ونتيجة لذلك ، أنشأنا عنصر قائمة في صفحة الإضافات.

إنشاء قالب الصويا

يمكن العثور على تفاصيل حول قوالب فول الصويا هنا .

سنقوم بإنشاء ملف
src / main / resources / templates / webwork-config / configwebwork / Success.soy.

src / main / resources / templates / webwork-config / 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-soy-required-backbone-resources هي سمة الاسم في علامة موارد الويب ، حيث أضفنا رابطًا إلى قالب الصويا.

webwork.config.formview - مساحة الاسم واسم القالب من ملف الصويا.

اختبار البرنامج المساعد

افتح الطرفية في مجلد البرنامج المساعد وقم بتنفيذ الأمر التالي:
atlas-run

بعد بدء تشغيل Jira ، انتقل إلى المتصفح باستخدام الرابط التالي:

المضيف المحلي: 2990 / jira / secure / ConfigWebwork.jspa

ستبدو الشاشة كما يلي:

يمكنك محاولة إدخال البيانات في حقل Json وحفظها. يعمل Webwork.
نحتاج الآن إلى التأكد من وجود شاشتين لملء المعلمات ، وعلى الشاشة الأخيرة ، يجب أن يحول الزر حفظ جميع المعلمات إلى تنسيق json وحفظها في إعدادات المكون الإضافي.

للتحكم في منطق التنقل حول الشاشات ومعلمات الإرسال إلى تنسيق json ، سنستخدم js الفقري. يمكنك أن تقرأ عن شبيبة العمود الفقري هنا .

إنشاء نموذج العمود الفقري

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

تعريف ("webwork / config / model" ، [
"مسج" ،
"العمود الفقري" ،
"تسطير"
] ، الوظيفة ($ ، العمود الفقري ، _) {
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

// معرف هو توجيه مطلوب ويعرف النموذج كوحدة webwork / config / view. هذا يسمح لنا بتحديد التبعيات في الملفات الأخرى على النموذج.
تعريف ("webwork / config / view" ، [
"مسج" ،
"العمود الفقري" ،
"تسطير"
] ، الوظيفة ($ ، العمود الفقري ، _) {
"استخدم صارم" ؛
var AppView = Backbone.View.extend ({
الأحداث: {
"انقر # config-save-button": "saveConfig" ،
"Click # next-button": "nextButton" ،
"Click # back-button": "prevButton"

} ،
الوظيفة التي تعمل عن طريق الزر حفظ. يحفظ المعلمات من الشاشة إلى النموذج ويحول المعلمات إلى تنسيق json
saveConfig: function () {
this.model.set ("معلمة 3" ، $ ("# معلمة 3"). val ()) ؛
this.model.set ("معلمة 4" ، $ ("# معلمة 4"). val ()) ؛
$ ("# configJson"). val (JSON.stringify (this.model)) ؛
} ،
الوظيفة التي تعمل عن طريق زر التالي على الشاشة الأولى. يحفظ المعلمات من الشاشة الأولى إلى النموذج ويرسم شاشة ثانية
nextButton: الوظيفة () {
this.model.set ("معلمة 1" ، $ ("# معلمة 1"). val ()) ؛
this.model.set ("معلمة 2" ، $ ("# معلمة 2"). val ()) ؛
var template = webwork.config.page2 ({configJson: $ ("# configJson"). val () ، المعلمة 3: this.model.get ('معلمة 3') ، المعلمة 4: this.model.get ('معلمة 4')} ) ؛
$ ("# الحاوية"). replaceWith (قالب) ؛
$ ("# configJson"). val (JSON.stringify (this.model)) ؛
} ،
الوظيفة التي تعمل عن طريق زر الرجوع على الشاشة الثانية. يحفظ المعلمات من الشاشة الثانية إلى النموذج ويرسم الشاشة الأولى
prevButton: الوظيفة () {
this.model.set ("معلمة 3" ، $ ("# معلمة 3"). val ()) ؛
this.model.set ("معلمة 4" ، $ ("# معلمة 4"). val ()) ؛
var template = webwork.config.page1 ({configJson: $ ("# configJson"). val () ، المعلمة 1: this.model.get ('معلمة 1') ، المعلمة 2: this.model.get ('معلمة 2')} ) ؛
$ ("# الحاوية"). replaceWith (قالب) ؛
$ ("# configJson"). val (JSON.stringify (this.model)) ؛
} ،
تهيئة: الوظيفة () {
this.render () ؛
} ،
تقديم: الوظيفة () {
var template = webwork.config.page1 ({configJson: $ ("# configJson"). val () ، المعلمة 1: this.model.get ('معلمة 1') ، المعلمة 2: this.model.get ('معلمة 2')} ) ؛
$ ("# الحاوية"). replaceWith (قالب) ؛
} ،
// هذا رابط للحاوية الرئيسية. ستلتقط طريقة العرض جميع الأحداث من العناصر الموجودة أسفل هذا العنصر.
el: '#maincontainer'
}) ؛
العودة {
طريقة العرض: AppView
} ؛
})

من أجل إتاحة العرض عند تحميل قالب فول الصويا ، يجب إضافة الملف مع العرض إلى atlassian-plugin.xml في علامة مورد الويب:

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

قم بإنشاء ملف js لتخصيص نموذج العمود الفقري وطريقة العرض

src / main / resources / js / webwork-soy-required-backbone.js

تتطلب ([
"webwork / config / view" ،
"webwork / config / model" ،
"مسج" ،
"العمود الفقري" ،
"تسطير"
] ، الوظيفة (webworkConfigView ، webworkConfigModel ، $ ، Backbone ، _) {
var webworkConfigModel = new webworkConfigModel.Model (JSON.parse ($ ("# configJson"). val ())) ؛
var ActionsView = new webworkConfigView.View ({model: webworkConfigModel}) ؛

})

يستخدم ملف js لدينا متطلبات js. يسمح لك التوجيه المطلوب بالتأكد من أنه لن يتم تنزيل الملف إلا بعد تنزيل كل التبعيات. حددنا التبعيات التالية لملفنا: webwork / config / view ، webwork / config / model ، الاستعلام ، العمود الفقري ، التسطير السفلي.

أضف المعلمات اللازمة لعمل قوالب الصويا.

في علامة مورد الويب في ملف 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.

قم بإجراء تغييرات على النجاح

أضفت تعليقات إلى نقاط مهمة