четверг, 26 декабря 2013 г.

Создание собственных Ribbon кнопок с помощью ADX Ribbon.



Хочу поделиться опытом использования компоненты ADX Ribbon в SharePoint 2010.
Когда я только начал постигать SharePoint и пробовал писать первые строчки кода захотелось сделать свой Ribbon кнопки, набор кнопок. Немного покопав Google нашел данный компонент.
Скачать его и подробнее изучить можно на сайте разработчика www.add-in-express.com
Компонент очень понятен и прост в использовании. После установки в Visual Studio при создании нового проекта SharePoint появляется новый тип проекта:


Пробуем создать. Задаем имя, размещение. Выбираем Sandbox или же Farm solution:

Я по умолчанию выберем Sandbox. Жмем Finish.
Открывается окно дизайнера наших Ribbon'ов:

Для начала выберем Создание новой Tab-вкладки.
У созданного элемента есть свойство ItemType - именно оно отвечает в каком месте будет появляться созданная нами вкладка для нашего проекта я выбрал Document. Это значит, что она будет появляться во всех библиотеках документов.

После добавления новой вкладки появится конструктор вкладки. С панель компонентов добавим так ImageList. В коллекцию ImageList добавим 2 картинки. Установим свойство ImageSize на 32,32.
В окне конструктора вкладки произведем следующие действия(указаны красными цифрами):

1. Добавим новую группу кнопок.
2. Добавим кнопку № 1
3. Добавим разделитель элементов(Сепаратор)
4. Добавим вторую кнопку.
После этого в добавленных элементах изменим свойство Caption.
В элементах кнопка установим свойство DisplayMode на Image32AndCaption. Это даст нам отображение кнопки как картинки 32*32 с надписью. В свойстве ImageList выберем ранее добавленный нами ImageList и укажем в Image какая картинка соответствует кнопке. На этом дизайн пока закончим.
Так же имется возможность добавлять не только кнопки, но и DropList, Label, TextEdit и т.д. Об этих элементах можно подробнее узнать на сайте разработчика.
Подпишем наши кнопки на события. Стоит сразу отметить, что писать код будем на JavaScript. Для этого в проекте есть по умолчанию созданный файл MyTask1.js




  У элементов Кнопка есть следующие события:




Нас интересует собитые OnClick. Дважды щелкнем на него. Студия автоматически сгенерит функцию и переключит нас на MyTask1.js в режим кода.

Добавим событие второй кнопке и напишем простой код. Для первой кнопки покажем alert, для второй Notification.
Запутим Debug. Во всех библиоткеках документов должна появиться новая вкладка:

Проверим работают ли кнопки.
Первая:

Вторая:

Наша вкладка добавлена и работает. Живет она тут:

Действия сайта - Параметры сайта - Коллекции - Решения.
 
На этом пока всё. Если кому интересно пишите - буду продолжать тему.










Комментариев нет:

Отправить комментарий