Отображение содержимого в диалоговом окне JIRA

 

Обзор учебника

В этом руководстве показано, как отображать диалог с контентом с сервера и взаимодействовать с ним на своей странице. В этом уроке вы разработаете диалоговое окно, в котором будет установлена версия, в которой задача должна быть исправлена.

В этом учебном курсе добавлены функциональные возможности диалогового окна для уже существующего плагина, который имеет:

• Действие Webwork для этого содержит логику планирования задачи.
• Шаблон Velocity для отображения(рендеринга) формы
• Тест для обеспечения того, чтобы работало планирование.

Чтобы отобразить эту форму в диалоговом окне и заставить ее взаимодействовать со страницей, мы пройдем несколько этапов:

 

Источник плагина

Мы рекомендуем вам проработать этот учебник. Если вы хотите пропустить или проверить свою работу, когда вы закончите, вы можете найти исходный код плагина на Atlassian Bitbucket. Bitbucket служит публичному репозиторию Git, содержащему код учебника. Чтобы клонировать репозиторий, выполните следующую команду, чтобы получить завершенный код учебника:

git clone https://bitbucket.org/atlassian_tutorial/jira-scheduler-dialog-complete.git

Кроме того, вы можете скачать исходный код с помощью опции get source здесь: https://bitbucket.org/atlassian_tutorial/tutorial-jira-scheduler.

Необходимые знания

Вы уже должны были установить следующее программное обеспечение:

 

• Интегрированная среда разработки (IDE), такая как Eclipse или IDEA.
• Atlassian Plugin SDK 3.7 или выше.
• Система распределения распределенных источников Git

Вы также должны понимать основы разработки Java, включая классы, интерфейсы, методы, как скомпилировать исходный код в JAR-файл и так далее.

Об этих инструкциях

Вы можете использовать любую поддерживаемую комбинацию ОС и IDE для создания этого плагина. Эти инструкции были написаны с использованием Eclipse Classic версии 3.7.1 на MacBook Air с Mac OS X версии 10.7.2. Если вы используете другую комбинацию, вы должны использовать эквивалентные операции для своей конкретной среды.

Шаг 1. Получение базового кода модуля

1. Измените каталог на рабочее пространство Eclipse.
2. Загрузите источник *базового* текст учебника.

$ git clone https://bitbucket.org/atlassian_tutorial/jira-scheduler-dialog-base.git

3. Измените каталог на корневой каталог плагина (где находятся файлы pom.xml.
4. Запустите некоторые тесты, чтобы убедиться, что начальная точка работает.

$ atlas-integration-test

Команда создает код и запускает тесты интеграции, которые поставляются вместе с источником. На протяжении всего этого урока вы будете запускать несколько atlas команд, которые автоматизируют большую часть работы разработки плагинов для вас. Если все работает успешно, вы должны увидеть сообщение, похожее на:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2 minutes 19 seconds
[INFO] Finished at: Sat Nov 26 13:26:03 EST 2011
[INFO] Final Memory: 70M/123M
[INFO] ------------------------------------------------------------------------

Шаг 2. Импортируйте код в Eclipse

1. Перейдите в каталог tutorial-jira-scheduler, созданный предыдущим шагом.
2. Выполните команду:

atlas-mvn eclipse:eclipse

3. Запустите Eclipse.
4. Выберите «Файл-> Импорт».

Eclipse запускает мастер импорта.

5. Фильтр для существующих проектов в рабочее пространство (или расширение дерева общих папок).

 

6. Нажмите «Далее» и введите корневой каталог рабочего пространства.

Ваша папка с плагином Atlassian должна появиться в разделе «Проекты».

7. Выберите свой плагин и нажмите «Готово».

Eclipse импортирует ваш проект.

Шаг 3. Проверьте версию JIRA

Исходные файлы были скомпилированы против версии JIRA, которая существовала при создании кода. Обозначение версии находится в файле проекта pom.xml (файл определения объектной модели проекта). Этот файл находится в проектном проекте и объявляет зависимости проекта. Найдите минутку и изучите зависимость JIRA:

1. Откройте файл pom.xml.
2. Прокрутите страницу до конца.
3. Найдите элемент <properties>.

В этом разделе приведена версия версии JIRA, выбранная на шаге 1, а также версия команд atlas, которые вы используете.

4. Просмотрите элемент <jira.version>.

Вы можете запустить этот учебник с JIRA версии 4.3 или выше. Если вы решили создать плагин для Shiny new JIRA 5, ваш элемент <jira.version> будет иметь следующую версию:

<properties>
        <jira.version>5.0</jira.version>
        <amps.version>3.7</amps.version>
    </properties>

5. Введите номер версии в элементе <jira.version>.

<properties>
        <jira.version>5.2</jira.version>
        <amps.version>3.7</amps.version>
    </properties>    

6. Сохраните файл pom.xml

Шаг 4. Обновите проект и обновите IDE

Если вы измените свой проект Atlassian, Eclipse автоматически не узнает об изменениях. Кроме того, иногда ваши зависимости к проекту требуют обновления. Мы должны это исправить.

1. Переключитесь в окно терминала.
2. Измените каталог на корневой каталог проекта.

Это каталог с файлом pom.xml.

3. Обновите метаданные проекта на диске с помощью новой информации POM.

atlas-mvn eclipse:eclipse

4. Вернитесь в Eclipse, обновите проект плагина, чтобы получить изменения.

Не забудьте сделать это обновление и обновить шаг каждый раз, когда вы редактируете свой pom.xml или иным образом изменяете свой источник плагина с помощью команды Atlassian.

Шаг 5. Проверьте базовый плагин в JIRA

На данный момент вы на самом деле не написали Java-код. Тем не менее вы можете запустить JIRA и увидеть плагин в действии. На этом этапе вы запустите JIRA, создадите проект, который вы будете использовать позже, и проверите сервлет.

1. Откройте окно терминала и перейдите в корневую папку плагина (где находится файл pom.xml).
2. Выполните следующую команду:

atlas-run

Эта команда создает ваш код плагина, запускает экземпляр JIRA и устанавливает в него ваш плагин. Это может занять несколько секунд или около того, когда процесс завершится, вы увидите много строк состояния на вашем экране с чем-то вроде следующих строк:

[INFO] jira started successfully in 71s at http://localhost:2990/jira
[INFO] Type CTRL-D to shutdown gracefully
[INFO] Type CTRL-C to exit

3. Откройте браузер и перейдите к локальному экземпляру JIRA, запущенному с помощью atlas-run. Если вы следуете инструкциям, введите http: // localhost: 2990 / jira в свой браузер.
4. В логине JIRA введите имя администратора admin и пароль администратора admin.

Ранее шаги интеграции, которые вы запускали, создали проект TEST в вашем экземпляре JIRA. Вы должны иметь существующую задачу под названием TEST-1 в категории «Недавние задачи».

5. Отобразите задачу TEST-1.

Между кнопкой «Редактировать» и «Назначить» вы должны увидеть кнопку «Расписание». Это кнопка запуска плагина.

6. Поэкспериментируйте с созданием задач и обратите внимание, как работает кнопка и результирующий диалог.

Теперь мы готовы начать писать код!

Шаг 6. Создание простейшего из диалогов.

JIRA develop имеет функцию, которая позволяет просто добавить класс к ссылке в HTML, чтобы открыть содержимое целевой страницы в диалоговом окне. Запустите Eclipse и выполните следующие действия:

1. Измените файл atlassian-plugin.xml.
2. Найдите <web-item> с ключевым значением key   schedule-web-item расписания-веб-элемента.
3. Добавьте следующий элемент styleClass в качестве дочернего элемента.

<styleClass>trigger-dialog</styleClass>

Когда вы закончите, <web-item появится следующим образом:

<web-item name="Schedule Web Item" i18n-name-key="schedule-web-item.name" key="schedule-web-item" section="operations-top-level" weight="3">
<description key="schedule-web-item.description">The Schedule Web Item Plugin</description>
<conditions type="and">
    <condition class="com.atlassian.jira.plugin.webfragment.conditions.IsIssueEditableCondition"/>
    <condition class="com.atlassian.jira.plugin.webfragment.conditions.HasIssuePermissionCondition">
    <param name="permission" value="edit"/>
    </condition>
    <condition class="com.atlassian.jira.plugin.webfragment.conditions.IsFieldHiddenCondition" invert="true">
    <param name="field" value="fixVersions"/>
    </condition>
</conditions>
<label key="schedule-web-item.label"/>
<link linkId="schedule-web-item-link">/secure/SchedulerWebworkModuleAction!default.jspa?id=${issue.id}</link>
<styleClass>trigger-dialog</styleClass>
  </web-item>    

4. Сохраните изменения.
5. Вернитесь в окно терминала и перейдите в каталог плагина.
6. Введите atlas-debug на подсказку.

Запуск в режиме отладки позволит вам использовать технику Fastdev.

7. Откройте тестовый экземпляр JIRA в браузере и войдите в систему.
8. Откройте существующую задачу(у вас должен быть хотя бы один).
9. Протестируйте поведение кнопки «Расписание».

Нажатие кнопки приведет к диалогу Schedule. Когда вы нажимаете кнопку «Расписание» в этом диалоговом окне, она отправляет содержимое диалогового окна в систему. Что происходит с пользовательским интерфейсом, когда вы нажимаете эту кнопку ScheduleButton.

«Не видете кнопку« Расписание »?»

Обеспечьте следующее:

• В системе есть задачи
• Существуют версии в проекте, которые вы публикуете, в
• У вас есть разрешение на редактирование задачи

Оставьте запущенный процесс JIRA-сервера и интерфейс в активном браузере. Отсюда мы будем использовать метод Fastdev для проверки наших изменений кода.

 

Шаг 7. Очистка действия отправки

На предыдущем шаге вы видели, что отправка формы заставляла интерфейс выглядеть беспорядочно. Нам нужно заставить сервер сообщать о диалоге, который он может закрыть. В действиях веб-сайта есть метод удобства, который позволяет вам это делать.

1. Открыть Eclipse.
2. Найдите файл SchedulerWebworkModuleAction.java и откройте его для редактирования.
3. Измените метод doExecute () в классе, чтобы он выглядел следующим образом:

/**
    * The business logic of your form.
    * Only gets called if validation passes.
    *
    * @return the view to display - should usually be "success"
    */
@RequiresXsrfCheck
protected String doExecute() throws Exception
{
    // Business Logic
    final IssueService.IssueResult update = issueService.update(authenticationContext.getLoggedInUser(), updateValidationResult);

    if (!update.isValid())
    {
        return ERROR;
    }

    // We want to redirect back to the view issue page so
    return returnComplete("/browse/" + update.getIssue().getKey());
}

Если вы следуете учебнику, вам все равно нужна JIRA и ее работа.

4. Перейдите на страницу браузера и интенсивно обновите страницу. Для этого вы можете:

• Shift + Перезагрузка в большинстве браузеров.
• Ctrl + Обновить в Windows или в Internet Explorer.
• В Safari 5 вам нужно будет удерживать клавишу Shift, щелкая значок «Перезагрузка» на панели «Расположение».

Перезагрузка плагина должна корректно работать с перезагрузкой страницы проблемы после закрытия диалогового окна.

Шаг 8. Узнайте, что происходит за кулисами

В этом разделе обсуждается, что происходит на месте в браузере и на сервере.

В браузере

При загрузке страницы плагин переопределяет поведение кликов. Мы указали это, когда добавили диалог <styleClass> trigger-dialog </ styleClass>. Вместо того, чтобы следовать ссылке, он загружает целевую страницу через Ajax и помещает содержимое в диалог. Мы добавляем некоторые URL-параметры в цель ссылок, чтобы сервер знал, что содержимое отображается в диалоговом окне, и они могут настраивать контент,

Параметры URL:

 

Результат любого представления формы или цели любых ссылок помещается в этот диалог, пока сервер не вернет специальный заголовок ответа: X-Atlassian-Dialog-Control: DONE. Любой заголовок ответа, содержащий это, закроет диалоговое окно и обновит базовую страницу.

На сервере

Функция returnComplete (url) проверяет, отображается ли содержимое в диалоговом окне. Если это так, системы добавляют заголовок и возвращают пустой ответ. Если это не так, он будет вести себя как обычно.

Вы также можете перенаправить на другую страницу, когда диалог завершен. Чтобы сделать это, вместо закрытия диалога и обновления текущей страницы вы можете перенаправить на другую страницу, когда диалог закрывается. Для этого верните X-Atlassian-Dialog-Control: redirect: <url-to-redirect-to> вместо X-Atlassian-Dialog-Control: DONE.

Чтобы сделать это в действии веб-работы, вы должны отредактировать класс SchedulerWebworkModuleAction, чтобы использовать returnCompleteWithInlineRedirect (<url-to-redirect-to>) вместо вызова returnComplete (...).

Ограничения простейшего диалога

Ниже приведены ограничения при использовании простейшего диалога:

• Не работает на добавленные динамически ссылки.

Например, когда вы открываете доступные операции с задачами из Навигатора задач, операция Schedule будет там, но она не будет открываться в диалоговом окне. Причина этого в том, что мы привязываем ссылку только к загрузке страницы - это должно быть улучшено для работы со всеми ссылками в будущем.

• Невозможно настроить поведение при закрытии диалогового окна.

Шаг 9. Создание стандартного диалога

Чтобы наш диалог работал каждый раз, нам нужно создать специализированную версию диалога.

В этом разделе мы добавим JavaScript на страницу, которая создаст форму и привяжет ее к ссылке. Кроме того, мы будем использовать генератор модуля плагинов, часть Atlassian Plugin SDK, чтобы создать заглушку для нашего веб-ресурса.

1. Откройте командное окно и перейдите в корневую папку плагина (где находится pom.xml).
2. Запустите atlas-create-jira-plugin-module.
3. При необходимости введите следующую информацию:

 

Это изменит ваш файл atlassian-plugin.xml, чтобы включить веб-ресурс.

4. В Eclipse создайте папку с именем javascript в src / main / resources.
5. Добавьте файл scheduler.js в новую папку javascript.
6. Измените scheduler.js и добавьте следующую форму:

AJS.$(function () {
    JIRA.Dialogs.scheduleIssue = new JIRA.FormDialog({
        id: "schedule-dialog",
        trigger: "a.issueaction-schedule-issue",
        ajaxOptions: JIRA.Dialogs.getDefaultAjaxOptions,
        onSuccessfulSubmit : JIRA.Dialogs.storeCurrentIssueIdOnSucessfulSubmit,
        issueMsg : 'thanks_issue_updated'
    });
});

7. Сохраните файл.
8. Измените файл atlassian-plugin.xml.
9. Измените значение элемента styleClass из диалогового окна триггера  trigger-dialog в issueaction-schedule-issue следующим образом:

<styleClass>issueaction-schedule-issue</styleClass>

10. Добавьте элемент context в новый элемент веб-ресурса (чтобы новый диалог был видимым со всех неадминистративных страниц) следующим образом:

<context>atl.general</context>

11. Сохраните файл.
12. В eclipse снова найдите файл SchedulerWebworkModuleAction.java и откройте его для редактирования.
13. Добавьте вызов requireResource () в метод includeResources ()  для регистрации нового ресурса планировщика:

private void includeResources() {
    webResourceManager.requireResource("jira.webresources:jira-fields");
    webResourceManager.requireResource("com.example.plugins.tutorial.tutorial-jira-scheduler:my-web-resource");
}

14. Сохраните файл.

Шаг 10. Узнайте о JavaScript и повторите тест

Потратьте минутку, чтобы изучить файл, в котором вы просматриваете новый файл scheduler.js, который вы создали на последнем шаге. Этот код создает диалоговое окно формы, указывая следующее:

 

Проверьте свой новый код. Перезагрузите плагин, и теперь эта форма должна работать не только с страницей Просмотр задачи, но и с любым из меню cog (Панель управления, Навигатор задач и список подзадач). На приведенном ниже изображении показан параметр «Расписание» в «Навигаторе задач»:

РИСУНОК

Шаг 11. Создание расширенного диалога

В идеале мы хотели бы избежать обновления всех страниц и обновить только обновленный контент. Для этого мы переопределим поведение по умолчанию формы для записи новых версий непосредственно в поле.

1. В Eclipse отредактируйте scheduler.js.
2. Удалите существующий код формы.
3. Добавьте следующий код формы:

AJS.$(function () {
    // Function for getting the issue key of the issu ebeing edited.
    var getIssueKey = function(){
        if (JIRA.IssueNavigator.isNavigator()){
            return JIRA.IssueNavigator.getSelectedIssueKey();
        } else {
            return AJS.$.trim(AJS.$("#key-val").text());
        }
    };

    // Function for getting the project key of the Issue being edited.
    var getProjectKey = function(){
        var issueKey = getIssueKey();
        if (issueKey){
            return issueKey.match("[A-Z]*")[0];
        }
    };

    JIRA.Dialogs.scheduleIssue = new JIRA.FormDialog({
        id: "schedule-dialog",
        trigger: "a.issueaction-schedule-issue", 
        ajaxOptions: JIRA.Dialogs.getDefaultAjaxOptions,
        onSuccessfulSubmit : function(){  
// This method defines behavior on a successful form submission.
// We want to get the versions specified then place them in the view.
// This selector gets the container for the FixFor Version for 
// both a list of issues and the view issue page.
            var $fixForContainer = AJS.$("#issuerow" + JIRA.IssueNavigator.getSelectedIssueId() + " td.fixVersions, #fixfor-val" );
            $fixForContainer.html("");  // Blank out the existing versions
            // Now lets construct the html to place into the container
            var htmlToInsert = "";
            // this.getContentArea() return the contents of the dialog.  From this we will get teh selected values of the select list and iterate over them.
            this.getContentArea().find("#fixVersions option:selected").each(function(){
                var $option = AJS.$(this);
                // We want to comma separate them
                if (htmlToInsert !== ""){
                    htmlToInsert += ", ";
                }
                var versionName = AJS.$.trim($option.text());
                // Construct the link and append it to the html
                htmlToInsert += "" + versionName + "";
            });

            // If no options were selected, insert none.
            if (htmlToInsert === ""){
                htmlToInsert = AJS.I18n.getText("common.words.none");
            }
            // set the html of the container.
            $fixForContainer.html(htmlToInsert);
        },
        onDialogFinished : function(){  
// This function is used to define behavior after the form has finished
// We want to display a notification telling people that the fix version was updated.
// When displayed in the Issue Navigator also show the issue key of the issue updated.
            if (JIRA.IssueNavigator.isNavigator()){
                JIRA.Messages.showSuccessMsg(AJS.I18n.getText("scheduler.success.issue", getIssueKey()));
            } else {
                JIRA.Messages.showSuccessMsg(AJS.I18n.getText("scheduler.success"));
            }
        },
        autoClose : true // This tells the dialog to automatically close after a successful form submit.

    });
});

4. Сохраните свою работу.

Шаг 12. Проверьте окончательную версию диалога.

Для проверки плагина выполните следующие действия:

1. Переключитесь в окно терминала.
2. Если JIRA работает, остановите ее.
3. Измените каталог на корневой каталог проекта.

Это каталог с файлом pom.xml.

4. Обновите метаданные проекта на диске с помощью новой информации POM.

atlas-mvn eclipse:eclipse

5. Запустите JIRA, запустив atlas-debug.
6. Войдите в JIRA и проверьте новый расширенный диалог Расписание.

 

Поздравляю

Теперь у вас должен быть полностью рабочий диалог.

Есть шоколад!

По материалам Atlassian JIRA  Server Developer Displaying content in a dialog in JIRA