Добавление вкладки подробного просмотра

 

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

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

Учебное пособие предназначено для того, чтобы показать вам, как сделать настройку для Jira Software, а также пропустить вас через поток разработки для разработки приложения Jira Software с помощью Atlassian Plugin SDK.

Наше приложение добавит вкладку в пользовательский интерфейс Jira Software UI, подобный существующим, например вкладку «Детали и люди». Обратите внимание, что на каждой вкладке есть заголовок, значок ссылки слева и содержимое вкладки. Мы также должны создать их в нашем приложении.

РИСУНОК

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

Вы можете использовать любую поддерживаемую комбинацию операционной системы и IDE для создания этого приложения. Эти инструкции были написаны с использованием IntelliJ IDEA 2017.3 на macOS Sierra. Если вы используете другую операционную систему или комбинацию IDE, вы должны использовать эквивалентные операции для своей конкретной среды.

Этот учебник был последний раз проверен с помощью Jira 7.7.1 с использованием Atlassian Plugin SDK 6.3.10.

Прежде чем вы начнете

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

1. Основы разработки Java, такие как классы, интерфейсы, методы и т. д.
2. Как создать проект плагина Atlassian с помощью Atlassian Plugin SDK.
3. Как использовать и администрировать Jira Software.

Источник приложения

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

Чтобы клонировать репозиторий, выполните следующую команду:

git clone https://bitbucket.org/atlassian_tutorial/adding-an-issue-view-tab-in-jira-agile.git

Кроме того, вы можете загрузить исходный код в виде ZIP-архива.

Шаг 1. Создайте проект приложения

На этом этапе вы создадите свой скелет приложения, используя Atlassian Plugin SDK.

1. Настройте SDK Atlassian Plugin и создайте проект, если вы этого еще не сделали.
2. Откройте терминал и перейдите в каталог, в котором вы хотите сохранить свой проект.
3. Чтобы создать скелет приложения, выполните следующую команду:

atlas-create-jira-plugin

4. Чтобы определить ваше приложение, введите следующую информацию при появлении запроса.

5. Подтвердите свои записи при появлении запроса.

SDK генерирует домашнюю директорию проекта с файлами проекта, такими как POM (то есть файл определения объектной модели проекта), исходный код заглушки и ресурсы приложения.

6. Перейдите в каталог, созданный на предыдущем шаге.
7. Удалите тестовые каталоги.

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

rm -rf ./src/test/java
rm -rf ./src/test/resources/

8. Удалите ненужные файлы классов Java.

rm -rf ./src/main/java/com/example/plugins/tutorial/jiraagile/*

9. Импортируйте проект в свою избранную среду IDE.

Шаг 2. Просмотрите и настройте код заглушки

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

SDK генерирует и поддерживает POM самостоятельно, по большей части. Однако вам необходимо вручную настроить некоторые из включенных метаданных для вашего проекта..       

1. Перейдите в каталог проекта, созданный SDK, и откройте файл pom.xml.
2. Добавьте название своей компании или организации и URL вашего сайта в качестве значений имени name и значение URL-адреса url элемента организации organization :

<organization>
    <name>Example Company</name>
    <url>http://www.example.com/</url>
</organization>

3. Обновите элемент description:

<description> Добавляет вкладку просмотра в доски JIRA Software. </ description>

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

Шаг 3. Добавьте модуль веб-панели

На этом этапе вы будете использовать генератор модуля плагина (то есть другую команду atlas) для создания кода-заглушки для модулей, требуемых приложением.

Для этого урока вам понадобится модуль плагина веб-панели. Вы добавите это, используя команду atlas-create-jira-plugin-module.

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

atlas-create-jira-plugin-module

3. Выберите параметр Web Panel «Веб-панель».
4. При появлении запроса введите следующую информацию.

5. Выберите Y для показа расширенной настройки.

 

6. Примите значения по умолчанию для:

• ключ модуля module key
• описание description
• i18n name key
• ключ описания i18n description key
• вес weight

7. Выберите Y для добавления ресурса.
8. Чтобы настроить ресурс, при появлении запроса введите следующее.

9. Выберите N для добавления параметра ресурса.
10. Выберите Y для добавления другого ресурса.
11. При появлении запроса введите следующие параметры для ресурса.

12. Выберите N для добавления параметра ресурса.
13. Выберите N для добавления другого ресурса.
14. Выберите параметр Y для добавления параметра контекста Velocity.
15. Примите значение по умолчанию для полнофункционального класса поставщика контекста, который должен быть примерно таким:

com.example.plugins.tutorial.jiraagile.web.contextproviders.MyContextProvider

16. Выберите N для добавления условий».
17. Выберите N для добавления другого модуля плагина.

SDK генерирует артефакты модуля, указывая на новые элементы на выходе(результате).

Шаг 4. Внесите изменения в сгенерированный модуль

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

1. Перейдите в src / main / resources / и откройте файл atlassian-plugin.xml.
2. Добавьте еще несколько дочерних элементов на веб-панель, которую вы только что добавили:

<label key="gh.issue.panel.reference" />
<tooltip key="gh.issue.panel.reference.tooltip" />

Шаг 5. Добавление ресурсов проекта

Скопируйте это изображение в каталог src / main / resource / images.

Это будет значок для вкладки в представлении задачи.

Обратите внимание, что любые значки, созданные для ваших собственных вкладок, должны иметь одинаковый размер, примерно 14 × 14 пикселей.

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

На этом шаге вы создадите шаблон Velocity, который создает содержимое вкладки пользовательского просмотра.

1. Перейдите в src / main / resources и создайте папку directory.
2. В новой папке каталога создайте файл с именем reference-gh-issue-details-panel-1.vm.
3. Добавьте в файл следующее содержимое:

<div class="ghx-container">
    <h4>Einstein Quotes</h4>
    <blockquote>
        Секрет творчества - это знание того, как скрыть ваши источники.
    </blockquote>
    <blockquote>
        Воображение важнее знаний. Знания ограничены.
    </blockquote>
    <blockquote>
        Мне достаточно художника, чтобы свободно рисовать мое воображение.
    </blockquote>
    <blockquote>
        Когда я исследую себя и свои методы мышления, я прихожу к выводу, что дар фантазии значил для меня больше, чем любой талант к абстрактному, позитивному мышлению.
    </blockquote>
    <blockquote>
        Истинный признак интеллекта - это не знание, а воображение.
    </blockquote>
    <blockquote>
        Чтобы поднимать новые вопросы, новые возможности, рассматривать старые проблемы с нового ракурса, требуют творческого воображения и знаменуют реальный прогресс в науке.
    </blockquote>
    <blockquote>
         Истинное искусство характеризуется непреодолимым стремлением к творческому художнику.
    </blockquote>
    <blockquote>
        Монотонность и одиночество тихой жизни стимулирует творческий ум.
    </blockquote>
    <blockquote>
         Высшее искусство учителя пробуждает радость в творческом выражении и знании.
    </blockquote>
</div>

Шаг 7. Добавьте текст пользовательского интерфейса

1. В том же каталоге ресурсов откройте файл свойств MyViewTab.properties.
2. Добавьте следующие свойства:

gh.issue.panel.reference=Reference Issue Tab Panel
gh.issue.panel.reference.tooltip=Reference Issue Tab Panel Tooltip

Этот текст появится в пользовательском интерфейсе как текст заголовка для вашей вкладки и текст наведения для значка.

Шаг 8. Запишите код Java

Если вы помните, модуль веб-панели web-panel, добавленный в дескриптор приложения, указывал класс  context-provider контекста-провайдера. Вы должны создать этот класс в своем проекте. Класс позволяет шаблону Velocity вставлять свой HTML в контекст приложения Jira.

Дополнительные сведения о context-providers поставщиках контекстов для веб-панелей см. в документации  модуля веб-панели.

1. Перейдите в корневую директорию вашего проекта и создайте файл с именем MyContextProvider.java.
2. Добавьте в файл следующее содержимое:

package com.example.plugins.tutorial.jiraagile.web.contextproviders;
import java.util.Map;
import com.atlassian.jira.util.collect.MapBuilder;
import com.atlassian.plugin.PluginParseException;
import com.atlassian.plugin.web.ContextProvider;
public class MyContextProvider implements ContextProvider {
    private Long itemCount = 4L;
    @Override
    public void init(Map<String, String> params) throws PluginParseException {
        if (params.containsKey("itemCount")) {
            this.itemCount = Long.parseLong(params.get("itemCount"));
        }
    }
 
    @Override
    public Map<String, Object> getContextMap(Map context) {
        return MapBuilder.<String, Object>newBuilder()
                .add("atl.gh.issue.details.tab.count", itemCount).toMap();
    }
}

Обратите внимание, что этот класс:

• Осуществляет интерфейс ContextProvider.
• Переопределяет методы init () и getContextMap (). Эти методы могут получить доступ и добавить к контекстной карте, которые являются переменными контекста, доступными для использования в наших шаблонах Velocity.
• Устанавливает значение известной переменной atl.gh.issue.details.tab.count на номер самого индикатора вкладки.

3. Сохраните и закройте файл.

Шаг 9. Создание, установка и запуск приложения.

На этом этапе вы запустите Jira Software и протестируйте приложение.

1. Убедитесь, что AMPS настроен для запуска Jira с установленным Jira Software. Если вы еще этого не делали, см. Раздел Настройка AMPS для запуска Jira Core с установленной страницей дополнительных приложений.
2. Убедитесь, что вы сохранили все свои изменения кода до этой точки.
3. В окне терминала перейдите в корневую папку приложения, где находится файл pom.xml.
4. Выполните следующую команду:

atlas-run

Для запуска Jira требуется несколько минут, вывод терминала будет уведомлять вас об успешной сборке.

 

5. В окне браузера перейдите на домашнюю страницу Jira. URL-адрес указывается в выводе терминала, например localhost: 2990 / jira.

 

6. Войдите в систему, используя учетные данные администратора admin / admin.

 

7. Выберите проект разработки программного обеспечения Scrum в качестве нового проекта для создания. Jira Software предлагает вам создать проект при первом входе в систему.

 

8. Зайдите на панель для проекта, который вы создали.

 

9. Убедитесь, что приложение Eintstein Quotes отображается в правой части страницы, как показано на изображении.

РИСУНОК

Поздравляю, вот и все!

Имейте удовольствие!

 

Следующие шаги

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

 

По материалам Atlassian JIRA  Server Developer Adding a Detail View tab