Заметки консультанта

Шамрай Александр Владимирович

Archive for Октябрь 2015

Руководство по настройке шаблона процесса TFS. Сценарий 6 – Создание и Добавление пользовательских элементов управления для рабочего элемента

Posted by Шамрай Александр на Октябрь 13, 2015

Краткий обзор бизнес-проблемы

Могут быть случаи, когда мы захотим создать пользовательский элемент управления, например «флажок», чтобы расширить функциональность формы рабочего элемента или добавить новую возможность для веб-клиента.

Что в этом руководстве?

  • Создание пользовательского элемента управления в Visual Studio
  • Добавление поля(ей) для рабочего элемента
  • Создание xml файла расширения wicc
  • Развертывание элемента управления для рабочего элемента
  • Загрузка пакета с пользовательским элементом управления

Настройка

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

Для настройки мы будем использовать шаблон рабочего элемента Bug, в который будет добавлен пользовательский элемент управления, который должен присутствовать в Visual Studio, Web Access, Test Manager и Team Explorer Everywhere (мы не будем объяснять, как это выполняется для Team Explorer Everywhere, но пакет включает в себя исходный код для Team Explorer Everywhere).

Шаги

Шаг Описание Сделано
1 Создание «настольного» элемента управления в Visual Studio [ ]
2 Создание элемента управления для Web Access [ ]
3 Экспортирование необходимого типа рабочего элемента [ ]
4 Открытие необходимого типа рабочего элемента для настройки [ ]
5 Добавление одного или нескольких полей для типа рабочего элемента [ ]
6 Импортирование необходимого типа рабочего элемента [ ]
7 Создание xml файла с расширением wicc [ ]
8 Инсталлирование пользовательского элемента управления [ ]
9 Загрузка пакета с пользовательским элементом управления [ ]
10 Тестирование пользовательского элемента управления в Visual Studio IDE и Web Access [ ]

Таблица 8 – Шаги решения

Реализация и развертывание

1. Создание «настольного» элемента управления в Visual Studio

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

Пользовательский элемент управления является по существу обычным элементом управления Windows Forms. Он является производными от Control и реализует IWorkItemControl. Это будет определять интерфейс между хостом — Team Explorer или Test Manager — и самим пользовательским элементом управления. Мы можем получить доступ к визуализируемому рабочему элементу, получить/установить значение полей и получать события, когда некоторые вещи происходят в рабочем элементе.

To implement a work item custom control all we need to do is implement the <see cref=»Microsoft.TeamFoundation.WorkItemTracking.Controls.IWorkItemControl»/>

Рисунок 47 – Создание пользовательского элемента управления в Visual Studio

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

2. Создание элемента управления Web Access

Начиная с Dev11 способ создания пользовательских элементов управления Web Access резко изменился. Ранее элементы управления Web Access писались как элементы управления ASP.NET и выполнялись внутри веб-сервера. В этой версии элементы управления были переделаны и теперь выполняются исключительно в браузере (элементы управления устанавливаются как расширения и Web Access развертывает код среди всех экземпляров уровня приложения).

Для реализации элемента управления под веб создайте файл (файл должен называться module.min.js, где module — это имя вашего типа элемента управления).

Код должен выполняться через вызов функции TFS. Модуль содержит параметры, первый параметр является именем модуля, который реализуется, второй – массив модулей, которые зависят от нашего элемента управления, и третий – анонимная функция без параметров, которая содержит реализацию элемента управления.

Рисунок 48 – Создание пользовательского элемента управления для Web Access

Нашей анонимной функции следует реализовать несколько функций. Мы не будем перечислить их все. Но опишем наиболее важные (вы можете просмотреть всю реализацию в общем пакете).

Конструктор (Рис. 49) инициализирует наш элемент управления.

Рисунок 49 – Реализация конструктора элемента управления

Выполняется наследование от WorkItemControl и реализация необходимых методов (таких как _init, где мы создаем разметку для нашего элемента управления, invalidate, где мы реализуем обратный вызов, который вызывается при изменении значения нашего поля).

Рисунок 50 – Наследование от WorkItemControl

В теле анонимного метода следует вызывать TFS. WorkItemTracking.Controls.registerWorkItemControl с двумя параметрами (Рис. 51) имя нашего модуля и объект с нашей реализацией. В конце мы возвращаем массив с объектом, который содержит реализацию элемента управления.

Рисунок 51 – Регистрация элемента управления и возврат реализации

После реализации нашего элемента управления, необходимо создать XML-файл, который называется manifest.xml и содержит регистрацию нашего элемента управления.

<WebAccess version11.0«>

<plugin nameALM Rangers CheckBox Custom Control» vendorMicrosoft ALM Rangers» moreinfohttp://go.microsoft.com/fwlink/?LinkID=230946» version1.0.0» >

<modules >

<module namespaceMicrosoft.ALMRangers.CheckBoxControl» loadAfterTFS.WorkItemTracking.Controls«/>

</modules>

</plugin>

</WebAccess>

Исходный код 18 – manifest.xml элемента управления «флажок» для Web Access

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

Архивируем оба файла (javascript и файл манифеста) в один zip-файл, и элемент управления готов к использованию.

3. Следующим шагом является экспорт типа рабочего элемента (bug.xml), который вы хотите изменить в определенном командном проекте, с использованием команды «witadmin exportwitd» .

Чтобы выполнить это, мы можем использовать программу witadmin:

Перейдите в Пуск-> Microsoft Visual Studio 2012-> Visual Studio Tools и откройте Developer Command Prompt

Выполните следующую команду для экспорта типа в файл xml:

witadmin exportwitd /collection:http://tfsserver:8080/tfs/CollectionName /p:TeamProjectName /f:WorkItemTypePathName.xml /n:WorkItemTypeName

4. Далее необходимо открыть файла типа рабочего элемента для настройки, например:

Рисунок 52 – Оригинальный тип рабочего элемента Bug

5. Добавить одно или несколько полей в тип рабочего элемента

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

<FIELD nameBool Sample» refnameALMRangers.Bool» typeBoolean«>

<HELPTEXT>bool used as a boolean variable for purposes of a checkbox</HELPTEXT>

</FIELD>

Исходный код 19 – Добавление логического поля

Добавим элемент управления «Checkbox» в секцию «Layout».

<Control TypeMicrosoft.ALMRangers.CheckBoxControl» FieldNameALMRangers.Bool» NameMyControlName» LabelCheckbox Demo» LabelPositionLeft» />

Исходный код 20 – Добавление элемента управления «флажок»

Примечание

Вы можете использовать несколько разметок формы для различных клиентов, добавив атрибут Target в разделе Layout.

  • Используйте Winfowms для Team Explorer/Test Manager
  • Web для веб-доступа
  • JavaSWT или Teamprise для Team Explorer Everywhere

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

Рисунок 53 – Логические поле

Рисунок 54 – Размещение логического поля

6. Импортируем новый настроенный шаблон рабочего элемента

Выполните следующую команду импорта:

witadmin importwitd /collection:http://tfsserver:8080/tfs/CollectionName /f:WorkItemTypePathName.xml /p:TeamProjectName

7. Создайте XML файл с наименованием Microsoft.ALMRangers.CheckBoxControl.wicc.

Вы должны создать wicc файл с использованием значения для Control Type, чтобы идентифицировать Work Item Custom Control, в нашем случае мы должны дать название Microsoft.ALMRangers.CheckBoxControl.wicc.

Этот файл должен содержать имя файла сборки, а также полное имя (т.е. пространство имен и имя класса).

<?xml version1.0«?>

<CustomControl xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance» xmlns:xsdhttp://www.w3.org/2001/XMLSchema«>

<Assembly>Microsoft.ALMRangers.TFSProcTemplateCust.CustomControls.dll</Assembly>

<FullClassName>Microsoft.ALMRangers.TFSProcTemplateCust.CustomControls.CheckBoxControl</FullClassName>

</CustomControl>

Исходный код 21 – Microsoft.ALMRangers.CheckBoxControl.wicc

8. Установите пользовательский элемент управления для Visual Studio

Откройте решение Visual Studio для пользовательского элемента управления (C:\InstallationFolder\CustomControl\Windows\ ALMRangers.CustomControls.slm) и скомпилируйте код.

Скопируйте два файла (Microsoft.ALMRangers.TFSProcTemplateCust.CustomControls.dll и Microsoft.ALMRangers.CheckBoxControl.wicc) в %ProgramData%\Microsoft\Team Foundation\Work Item Tracking\Custom Controls\11.0 под Environment.SpecialFolder.CommonApplicationData (мы также можем использовать каталог под Environment.SpecialFolder.LocalApplicationData) или создайте новое развертывание MSI в Visual Studio (первый путь позволит вам установить элемент управления для всех пользователей для машине, а второй путь установить только для пользователя, который выполняет установку).

9. Загрузите пакет пользовательского элемента управления для Web Access

  • Перейдите на веб-доступ
  • Переключитесь на сайт администрирования
  • В хабе Extensions нажмите «Install New»
  • Выберите архив с пакетом пользовательского элемента управления для загрузки (C:\InstallationFolder\CustomControl\Web Access\Microsoft.ALMRangers.CheckBoxControl.zip)
  • Активируйте расширение

Рисунок 55 – Установленное расширение Web Access

10. Протестируйте изменения рабочего элемента.

Создайте новый рабочий элемент Bug, заметьте, что появилась новая вкладка CustomControl с элементов управления «флажок».

Примечание: Возможно необходимо будет закрыть Visual Studio для последних шагов или нажать обновить в командном обозревателе, чтобы последние изменения были применены, или удалить ваш пользовательский кэш по пути: «c:\user\<username>\AppData\Local\Microsoft\Team Foundation 4.0\cache»

Рисунок 56 – Рабочий элемент с пользовательским элементом управления в Visual Studio

Перейдите в веб-доступ и создайте новый рабочий элемент Bug.

Рисунок 56 – Рабочий элемент с пользовательским элементом управления в Web Access

Примечание

Поскольку это простой элемент управления, то нам нет необходимости иметь какие-либо внешние ресурсы элемента управления (например, библиотеки javascript, изображение или файл CSS), но для более сложных элементов это представляет общую потребность.

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

Примечание

Если вы хотите использовать пользовательские элементы управления, но не хотите разрабатывать их специально для Team Explorer Everywhere, в Team Explorer Everywhere 2012 можно включить функцию для отображения внутри него формы рабочего элемента Web Access вместо родной Java формы.

Это можно включить, выбрав опцию Embedded Work Item Editor в WindowàPreferencesàTeamàTeam Foundation ServeràWork Item Tracking

Рисунок 57 – Выбор внешнего браузера для редактирования рабочих элементов в Team Explorer Everywhere 2012

Posted in Microsoft, Team Foundation Server, TFS Process Template Customization Guide, Visual Studio | Отмечено: , , | Leave a Comment »

 
%d такие блоггеры, как: