🎣 🎑 🙏🏼 Cara menggunakan kedelai, requireejs, backbone js dalam plugin untuk Atlassian Jira 💴 🚔 ▶️

Pada artikel ini, kami akan mengembangkan plugin yang akan menyimpan pengaturan plugin di Jira. Kami akan menggunakan pustaka kedelai, requireejs, backbone js untuk menampilkan antarmuka pengguna. Kedelai, diperlukan, backbone js adalah built-in library di Jira.

Tujuan artikel ini adalah untuk menunjukkan bagaimana Anda dapat menggunakan alat bawaan Jira untuk mengembangkan antarmuka pengguna.

Plugin yang dikembangkan akan berisi modul webwork untuk menyimpan parameter plugin di Jira. Parameter akan dimasukkan pada dua layar (dua parameter di setiap layar). Selanjutnya, parameter akan dikemas dalam json, yang akan disimpan di Jira. Kode sumber plugin dapat ditemukan di sini .

Buat kerangka plugin

Buka terminal dan jalankan perintah di bawah ini:
atlas-create-jira-plugin

Kami akan menjawab pertanyaan di terminal seperti ini:

 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

Buat perubahan pada pom.xml

Setelah membuat kerangka plugin, Anda perlu membuat perubahan agar atlassian-spring-scanner 2 berfungsi dengan benar.

Instal versi atlassian-spring-scanner di 2.0.0:

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

Ubah cakupan dependensi atlassian-spring-scanner-annotation dari kompilasi ke yang disediakan:

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

Hapus ketergantungan atlassian-spring-scanner-runtime.

Buat layanan untuk menerima dan menyimpan pengaturan plugin

Pertama, buat antarmuka untuk mengelola pengaturan plugin.

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); }

Sekarang mari kita lakukan implementasi antarmuka.

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); } }

Metode getConfigJson dan setConfigJson bertanggung jawab untuk menerima dan menyimpan parameter dalam format json.

Buat webwork untuk mengelola pengaturan plugin

Buka terminal di folder plugin dan jalankan perintah di bawah ini:
create-atlas-jira-plugin-module

Kami menjawab pertanyaan di terminal sebagai berikut:

 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

Ini akan membuat file src / main / java / ru / matveev / alexey / jira / tutorial / webworkui / jira / webwork / ConfigWebwork.java. File ini perlu diubah seperti ini:

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

Anotasi @ActionViewData diperlukan agar parameter configJson tersedia di templat kedelai.

Buat bagian web dan item web

Kami telah menambahkan webwork. Sekarang tambahkan item menu dari mana webwork akan diluncurkan.
Buka terminal dan jalankan perintah berikut:
create-atlas-jira-plugin-module

Kami menjawab pertanyaan-pertanyaan sebagai berikut:

 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

Sebagai hasilnya, kami membuat item menu pada halaman Add-ons.

Buat templat kedelai

Rincian tentang templat kedelai dapat ditemukan di sini .

Kami akan membuat file
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}

Dalam file atlassian-plugin.xml, tambahkan tautan ke templat kedelai yang dibuat di tag sumber daya web:

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

Sekarang kita akan membuat perubahan pada atlassian-plugin.xml sehingga ketika kita mengakses webwork, templat kedelai yang dibuat akan ditampilkan:

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

webwork-soy-need-backbone-resource adalah atribut nama di tag web-resource, tempat kami menambahkan tautan ke templat kedelai kami.

webwork.config.formview - namespace dan nama templat dari file soy.

Plugin uji

Buka terminal di folder plugin dan jalankan perintah berikut:
atlas-run

Setelah Jira mulai, buka browser menggunakan tautan berikut:

localhost : 2990 / jira / secure / ConfigWebwork.jspa

Layar akan terlihat seperti ini:

Anda dapat mencoba memasukkan data di bidang Json dan menyimpan. Pekerjaan web bekerja.
Sekarang kita perlu memastikan bahwa ada dua layar untuk mengisi parameter, dan pada layar terakhir, tombol Simpan akan mengkonversi semua parameter ke format json dan simpan dalam pengaturan plugin.

Untuk mengontrol logika bergerak di sekitar layar dan memberikan parameter ke format json, kita akan menggunakan backbone js. Anda dapat membaca tentang backbone js di sini .

Buat model backbone

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

define ('webwork / config / model', [
'jquery',
'tulang punggung',
'garis bawah'
], function ($, Backbone, _) {
var WebConfigModel = Backbone.Model.extend ({
default: {
parameter1: '',
parameter2: '',
parameter3: '',
parameter4: ''
}
});
kembali {
Model: WebConfigModel
};
})

Agar model tersedia saat memuat templat kedelai, file dengan model harus ditambahkan ke atlassian-plugin.xml di tag sumber daya web:

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

Buat tampilan backbone

Saya menulis komentar dalam kode untuk poin-poin penting.

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

// define adalah arahan yang diperlukan dan mendefinisikan model sebagai modul webwork / config / view. Ini memungkinkan kita untuk menentukan dependensi pada file lain pada model.
define ('webwork / config / view', [
'jquery',
'tulang punggung',
'garis bawah'
], function ($, Backbone, _) {
"Gunakan ketat";
var AppView = Backbone.View.extend ({
acara: {
"Klik # config-save-button": "saveConfig",
"Klik # tombol selanjutnya": "tombol berikutnya",
"Klik # tombol kembali": "prevButton"

},
// fungsi yang bekerja dengan tombol Simpan. Menyimpan parameter dari layar ke model dan mengubah parameter ke format json
saveConfig: function () {
this.model.set ("parameter3", $ ("# parameter3"). val ());
this.model.set ("parameter4", $ ("# parameter4"). val ());
$ ("# configJson"). val (JSON.stringify (this.model));
},
// fungsi yang bekerja dengan tombol Berikutnya di layar pertama. Menyimpan parameter dari layar pertama ke model dan menggambar layar kedua
nextButton: function () {
this.model.set ("parameter1", $ ("# parameter1"). val ());
this.model.set ("parameter2", $ ("# parameter2"). val ());
var template = webwork.config.page2 ({configJson: $ ("# configJson"). val (), parameter3: this.model.get ('parameter3'), parameter4: this.model.get ('parameter4')} );
$ ("# container"). replaceWith (templat);
$ ("# configJson"). val (JSON.stringify (this.model));
},
// fungsi yang bekerja dengan tombol Kembali di layar kedua. Menyimpan parameter dari layar kedua ke model dan menggambar layar pertama
prevButton: function () {
this.model.set ("parameter3", $ ("# parameter3"). val ());
this.model.set ("parameter4", $ ("# parameter4"). val ());
var template = webwork.config.page1 ({configJson: $ ("# configJson"). val (), parameter1: this.model.get ('parameter1'), parameter2: this.model.get ('parameter2')} );
$ ("# container"). replaceWith (templat);
$ ("# configJson"). val (JSON.stringify (this.model));
},
inisialisasi: function () {
this.render ();
},
render: function () {
var template = webwork.config.page1 ({configJson: $ ("# configJson"). val (), parameter1: this.model.get ('parameter1'), parameter2: this.model.get ('parameter2')} );
$ ("# container"). replaceWith (templat);
},
// ini adalah tautan ke wadah utama. Tampilan akan menangkap semua peristiwa dari elemen di bawah elemen ini.
el: '#maincontainer'
});
kembali {
Lihat: AppView
};
})

Agar tampilan tersedia saat memuat templat kedelai, file dengan tampilan harus ditambahkan ke atlassian-plugin.xml di tag sumber daya web:

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

Buat file js untuk menyesuaikan model dan tampilan backbone

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

membutuhkan ([
'webwork / config / view',
'webwork / config / model',
'jquery',
'tulang punggung',
'garis bawah'
], function (webworkConfigView, webworkConfigModel, $, Backbone, _) {
var webworkConfigModel = webworkConfigModel.Model baru (JSON.parse ($ ("# configJson"). val ()));
var actionsView = webworkConfigView.View baru ({model: webworkConfigModel});

})

File js kami menggunakan needsejs. Arahan yang disyaratkan memungkinkan Anda untuk memastikan bahwa file akan diunduh hanya setelah semua dependensi diunduh. Kami mendefinisikan dependensi berikut untuk file kami: webwork / config / view, webwork / config / model, permintaan, backbone, garis bawah.

Tambahkan parameter yang diperlukan agar templat kedelai berfungsi.

Dalam tag sumber daya web dalam file atlassian-plugin.xml, tambahkan:

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

Parameter ini memungkinkan Anda untuk mengakses templat kedelai dalam file js.

Buat perubahan untuk sukses

Saya menambahkan komentar ke poin-poin penting