Блог Сергея Байдачного

Мой блог о технологиях

SharePoint 2010: Очень большой пост о Ленте (Ribbon)

8 комментариев

Сел вчера раскрыть тему Лента. Получилось 8 страниц … и это еще не все. В книге будет больше (о JavaScript и зависимых закладках). Хочу убить тех, кто писал документацию.

Итак,

 

Начнем с первого, что, вероятнее всего, сразу бросится в глаза – Лента (Ribbon). Элемент управления Лента впервые появился в приложениях Microsoft Office 2007 и теперь перекочевал в SharePoint. Фактически везде, где требуется меню, управляющее контентом (как сайта, так и списками), возникает Лента.

 

@1.1

@1.1 Элемент управления Лента

 

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

 

@1.2

@1.2 Изменение размеров элементов в Ленте

 

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

Начнем с описания стандартной Ленты, которая уже присутствует в SharePoint и описывается с помощью XML. Исходный файл Вы сможете найти в следующем каталоге: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML в файле CMDUI.xml. К сожалению, описание элемента Лента пока не представлено достаточно полно в SDK, поэтому этот файл может служить для Вас хорошим примером создания групп и закладок.

На данном этапе нужно обратить на то, что все элементы в этом файле имеют атрибут ID, который очень пригодиться при выполнении настройки Ленты. Так, если Вы решите удалить или заменить одну из кнопок, то Вам потребуется ID этой кнопки, так же как и ID группы при добавлении новой кнопки. Список всех ID можно найти в SDK, но я предпочитаю пользоваться этим файлом. Также нужно отметить, что при формировании ID элемента используют нотацию, позволяющую точно указать расположение элемента или группы, комбинируя имя родительского элемента и новое имя с разделением их точкой. Так ID со значением Ribbon.WikiPageTab.Manage.PageProperties, позволяет однозначно сказать, что речь идет о группе Manage на закладке Page.

Естественно, что основное наполнение Ленты образуют элементарные элементы. Так в CMDUI.xml можно найти следующие элементы, которые полностью покрывают весь список доступных элементов в Ленте:

· Button – обычная кнопка, которая отображается на Ленте в виде изображения размером 32 на 32 пикселя или 16 на 16 пикселей;

· CheckBox – стандартный элемент, реализующий работу переключателя;

· ColorPicker – этот элемент управления представляет собой таблицу, позволяющую выбрать цвет;

· ComboBox – позволяет реализовать выбор одного из предопределенных значений с использованием мыши или путем ввода значения с клавиатуры;

· DropDown – элемент, аналогичный ComboBox, но не поддерживающий ввод с клавиатуры;

· FlyoutAnchor – специальная кнопка, позволяющая открыть выпадающее окно, содержащее другие элементы. Подобные кнопки можно увидеть даже на обычной закладке Page при редактировании текста. Вы можете заметить эту кнопку, устанавливая цвет шрифта или фона;

· InsertTable – применимость этого элемента небольшая. Фактически он используется только в текстовых редакторах, позволяющих вставить таблицу – позволяет в отображаемом гриде быстро выбрать число строк и столбцов будущей таблицы;

· Label – определяет надпись;

· Menu – специальный элемент управления, позволяющий отобразить всплывающее меню. Обычно используется вместе с SplitButton и FlyoutAnchor;

· MenuSection – этот элемент используется совместно с Menu, позволяя разделить меню на отдельные секции;

· MRUSplitButton – очень напоминает SplitButton, но в отличии от последней, может использовать в качестве команды основной кнопки один из пунктов выпадающего меню, который может меняться динамически. Примером может служить кнопка Edit на закладке Page, которая после нажатия преобразуется в кнопку Save;

· Spinner – может использоваться для ввода значения или выбора одного из значений из списка. Примером может служить элемент, позволяющий выбрать размер текста – размеры представлены не все, но это не мешает ввести произвольный размер и применить его для выделенного текста;

· SplitButton – этот элемент управления используется сразу как кнопка и меню, отображая изображение и курсор, позволяющий перейти к выпадающему меню. Если пользователь щелкает на изображении, то выполняется действие по умолчанию, а если на курсоре, то пользователь переходит на выпадающее меню;

· TextBox – определяет текстовое поле;

· ToggleButton – обычная кнопка, которая может оставаться в нажатом состоянии до следующего клика.

В качестве примера описания одного из элементов можно рассмотреть простейший элемент Button:

<Button
 Id="Ribbon.DocLibListForm.Edit.Clipboard.Paste"
 Sequence="10"
 Command="Ribbon.ListForm.Edit.Clipboard.Paste" 
 Image16by16=
    "/_layouts/$Resources:core,Language;/images/formatmap16x16.png?vk=4536" 
 Image16by16Top="-176" Image16by16Left="-112"
 Image32by32=
    "/_layouts/$Resources:core,Language;/images/formatmap32x32.png?vk=4536"   
 Image32by32Top="-32" Image32by32Left="-160"
 LabelText="$Resources:core,ButPasteMenu;"
 ToolTipTitle="$Resources:core,ButPasteMenu;"
 ToolTipDescription="$Resources:core,cui_STT_ButPasteMenu;"
 TemplateAlias="o1"/>

 

Как видно, тут определяются параметры изображений, всплывающая подсказка, ID, а также атрибут Command, который задает имя команды. Команда назначается динамически или задается при описании Ленты. Атрибут Sequence задает порядковый номер кнопки. Номер умножается на 10, поэтому первая кнопка имеет номер 10. Это сделано для того, чтобы программист мог легко вставить свои кнопки (элементы) в любое место группы элементов. При нумерации закладок сохраняется аналогичный подход, но номер закладки умножается на 100.

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

· Ribbon – элемент, описывающий всю Ленту. Вам не придется его использовать, так как переписывать всю Ленту с нуля не имеет смысла;

· Tabs – определяет контейнер для закладок на Ленте;

· Tab – определяет отдельную закладку на Ленте;

· Groups – является контейнером для групп элементов на отдельной закладке;

· Group – позволяет определить группу конкретных элементов. Является контейнером, в котором и происходит основная работа;

· Controls – является контейнером для набора элементов управления, которые обычно наполняют группу;

· ContextualTabs – представляет собой контейнер в котором собраны все элементы типа ContextualGroup;

· ContextualGroup – определяет закладку, которая будет появляться в зависимости от текущего контекста, связанного с действиями пользователя. Например, при редактировании страницы пользователь переходит на таблицу и получает отдельную закладку для работы с таблицей. Фактически этот элемент содержит такой контейнер как Tab и служит лишь оболочкой;

· Gallery – служит для отображения галерей стилей, шрифтов и др. В SharePoint 2010 применение галерей по умолчанию отсутствует. Но увидеть эти элементы Вы можете в приложениях Office 2010 (2007). Например, галерея используется для отображения списка готовых стилей для шрифта в Word 2010;

· GalleryButton – используется для отображения элемента в галерее;

· GroupTemplate – определяет способ отображения элементов внутри группы. Так, одну из кнопок Вы можете отобразить, используя изображение 16 на 16, а другую – 32 на 32. При этом Вы четко можете указать, какая кнопка будет находиться в верхней позиции, а какая под ней (если речь идет о кнопках 16 на 16);

· MaxSize – устанавливает размеры у заданной группы, ссылаясь на определенный шаблон с помощью GroupTemplate;

· QAT – определяет контейнер для кнопок в панели быстрого доступа, которая находится сразу над Лентой между закладками и меню Site Actions;

· Scale – определяет поведение группы при изменении размеров Ленты;

· Scaling – является контейнером для элементов MaxSize и Scale.

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

Чтобы приступить к модификации стандартной ленты, используется элемент CustomAction. Если Вы работали с WSS 3.0, то наверняка сталкивались с этим элементом при расширении меню Site Actions, контекстном меню списков и др. Так, следующий синтаксис для CustomAction добавляет новый элемент с заголовком «Go to Microsoft.com» в меню Site Actions:

<CustomAction
  Id="SiteSettings.GoToMicrosoft" 
  Description="This is link to Mocrosoft.com" 
  Title="Go To Microsoft.com" 
  Location="Microsoft.SharePoint.StandardMenu"
  GroupId="SiteActions"
  Sequence="1001" 
  ImageUrl="/_layouts/images/DWSHOME.png">
     <UrlAction Url="http://www.microsoft.com"/>
</CustomAction>

 

Расширим синтаксис элемента CustomAction, добавив изменения в существующую Ленту. Но, прежде чем переходить к коду, рассмотрим, какие предварительные действия нужно выполнить в Visual Studio 2010, чтобы посмотреть пример в действии.

О Visual Studio 2010 мы будем говорить чуть позже, а сейчас просто создадим проект на основе шаблона Empty SharePoint Project. На этом этапе мы получим диалоговое окно, предлагающее создать решение в «песочнице». Чтобы избежать возможных проблем на этом этапе, выберем Deploy as a farm Solution. О песочнице мы будем говорить в одном из следующих разделов.

@1.3

@1.3 Выбор способа развертывания Решения

Созданный проект полностью готов к развертыванию в SharePoint 2010, но не содержит ни одного компонента, расширяющего функциональность SharePoint. Поэтому, чтобы приступить к работе над Лентой, добавим в проект новый элемент на основе шаблона Empty Element. С помощью этого шаблона, мы добавим в проект единицу развертывания SharePoint – Фичу (Feature) или Возможность. Именно с помощью Фич выполняется развертывание любых компонент в SharePoint.

В результате последнего действия было создано несколько файлов, один из которых Elements.xml. Именно с этим файлом мы и будем работать. Так, если внутрь этого файла, поместить приведенный выше код (размещайте код прямо внутрь элемента Elements) и выполнить команду Build->Deploy, то меню Site Actions пополнится еще одной кнопкой.

@1.4

@1.4 Расширение Site Actions

Если все работает, перейдем к модификации CustomAction. Первым делом определим сам CustomAction следующим образом:

<CustomAction
  Id="MyActions.Ribbon.CustomButtons" 
  Location="CommandUI.Ribbon">
 
</CustomAction>

 

Основным параметром тут является Location. Дело в том, что SharePoint подгружает разные версии Ленты, в зависимости от ситуации. Фактически можно выделить 5 различных лент, ID которых можно использовать в атрибуте Location:

· CommandUI.Ribbon – изменения отображаются на основной Ленте. При этом область видимости изменений можно ограничить с помощью RegistrationId и RegistrationType. Если указать значение List для RegistrationType, а в качестве RegistrationId взять 101, то изменения будут видны только при работе с библиотеками документов, определяемых этим номером;

· CommandUI.Ribbon.ListView – изменения применимы для тех документов, где присутствует веб-часть, отображающая данные из списка (ListViewWebPart);

· CommandUI.Ribbon.NewForm – изменения коснутся Ленты, отображаемой в диалоговом окне создания элемента;

· CommandUI.Ribbon.EditForm – изменения коснутся Ленты, отображаемой в диалоговом окне редактирования элемента;

· CommandUI.Ribbon.DisplayForm – изменения коснутся Ленты, отображаемой в диалоговом окне отображения элемента;

В нашем примере мы модифицируем основную Ленту, делая изменения видимыми везде.

Следующим шагом, начнем вносить изменения в отображения кнопок. Так, следующий код удаляет кнопки Edit Properties, Rename Page, и делает изменения с кнопкой Make Home Page, меняя ее заголовок на Go To Microsoft.com:

Замечание!!! Если Вы реализовали код, а изменения в Ленте не наблюдаются, то очистите кэш браузера. Особенно это относится к закладке Page.

<CustomAction
  Id="MyActions.Ribbon.CustomButtons"
  Location="CommandUI.Ribbon">
  <CommandUIExtension>
    <CommandUIDefinitions>
      <CommandUIDefinition 
        Location="Ribbon.WikiPageTab.Manage.PageProperties">
      </CommandUIDefinition>
      <CommandUIDefinition
        Location="Ribbon.WikiPageTab.Manage.RenamePage">
      </CommandUIDefinition>
      <CommandUIDefinition
        Location="Ribbon.WikiPageTab.PageActions.SetHomePage">
        <Button
          Id="Ribbon.WebPartPage.Actions.MakeHomePage"
          Sequence="20"
          Command="makeHomePageMS"
          Image16by16=
         "/_layouts/$Resources:core,Language;/images/formatmap16x16.png?vk=4536" 
          Image16by16Top="-200" 
          Image16by16Left="-32"
          Image32by32=
         "/_layouts/$Resources:core,Language;/images/formatmap32x32.png?vk=4536" 
          Image32by32Top="-128" 
          Image32by32Left="-224"
          LabelText="Go To Microsoft.com"
          TemplateAlias="o1"
          ToolTipTitle="Navigate to Microsoft.com"
          ToolTipDescription="Just Navigation"/>
      </CommandUIDefinition>
    </CommandUIDefinitions>
    <CommandUIHandlers>
      <CommandUIHandler 
        Command="makeHomePageMS" 
        CommandAction="javascript:navigate('http://www.microsoft.com')">
      </CommandUIHandler>
    </CommandUIHandlers>
  </CommandUIExtension>
</CustomAction>

 

Как видите, для модификации Ленты, элемент CustomAction поддерживает две коллекции: CommandUIHandlers и CommandUIDefinitions. Первая коллекция позволяет определить команды. Тут могут быть части JavaScript, ссылки на подключаемые JavaScript файлы. Кроме того, команды можно назначать динамически. Вторая коллекция, СommandUIDefinitions, содержит определения визуальных изменений внутри Ленты. Так, в нашем случае, элементы CommandUIDefinition заменяют весь код с ID, указанным в Location на наш собственный код. Поскольку первые два элемента CommandUIDefinition не содержат внутреннего кода, то элемент, указанный в Location, просто исчезает из нашей Ленты. В последнем элементе CommandUIDefinition, я просто скопировал существующую кнопку из файла CMDUI.xml, после чего сделал замену заголовка, описания и команды. В результате мы получим Ленту, которая выглядит следующим образом:

@1.5

@1.5 Результат работы приложения

Попробуем переписать элемент CustomAction так, чтобы создать новую закладку на Ленте. При этом ограничим работу закладки на всех страницах, связанных с библиотеками документов (101). Вот код примера:

<CustomAction
  Id="MyActions.Ribbon.CustomButtons"
  Location="CommandUI.Ribbon"
  RegistrationType="List" 
  RegistrationId="101">
  <CommandUIExtension>
    <CommandUIDefinitions>
      <CommandUIDefinition
        Location="Ribbon.Tabs._children">
        <Tab
          Id="Ribbon.CustomTab"
          Title="Custom Tab"
          Description="This is a custom tab"
          Sequence="1001">
          <Scaling
            Id="Ribbon.CustomTab.Scaling">
            <MaxSize
              Id="Ribbon.CustomTab.Scalling.MaxSize"
              GroupId="Ribbon.CustomTab.CustomGroup"
              Size="OneLargeTwoMedium"/>
            <Scale
              Id="Ribbon.CustomTab.Scaling.CustomTabScaling"
              GroupId="Ribbon.CustomTab.CustomGroup"
              Size="OneLargeTwoMedium" />
          </Scaling>
          <Groups Id="Ribbon.CustomTab.Groups">
            <Group
              Id="Ribbon.CustomTab.CustomGroup"
              Description="This is a custom group"
              Title="Custom Group"
              Sequence="52"
              Template="Ribbon.Templates.CustomTemplate">
              <Controls Id="Ribbon.CustomTab.CustomGroup.Controls">
                <Button
                  Id="Ribbon.CustomTab.CustomGroup.Button1"
                  Image32by32="…" 
                  Image32by32Top="-128" 
                  Image32by32Left="-224"
                  Command="CustomTab.Button1Command"
                  Sequence="15"
                  Description="Button1"
                  LabelText="My Button1"
                  TemplateAlias="cust1"/>
                <Button
                  Id="Ribbon.CustomTab.CustomGroup.Button2"
                  Image16by16="…" 
                  Image16by16Top="-200" 
                  Image16by16Left="-32"
                  Command="CustomTab.Button2Command"
                  Sequence="16"
                  Description="Button 2"
                  LabelText="My Button2"
                  TemplateAlias="cust2"/>
                <Button
                  Id="Ribbon.CustomTab.CustomGroup.Button3"
                  Image16by16="…" 
                  Image16by16Top="-200" 
                  Image16by16Left="-32"
                  Command="CustomTab.Button3Command"
                  Sequence="17"
                  Description="Button 3"
                  LabelText="My Button 3"
                  TemplateAlias="cust3"/>
              </Controls>
            </Group>
          </Groups>
        </Tab>
      </CommandUIDefinition>
      <CommandUIDefinition Location="Ribbon.Templates._children">
        <GroupTemplate Id="Ribbon.Templates.CustomTemplate">
          <Layout
            Title="OneLargeTwoMedium"
            LayoutTitle="OneLargeTwoMedium">
            <Section Alignment="Top" Type="OneRow">
              <Row>
                <ControlRef DisplayMode="Large" TemplateAlias="cust1" />
              </Row>
            </Section>
            <Section Alignment="Top" Type="TwoRow">
              <Row>
                <ControlRef DisplayMode="Medium" TemplateAlias="cust2" />
              </Row>
              <Row>
                <ControlRef DisplayMode="Medium" TemplateAlias="cust3" />
              </Row>
            </Section>
          </Layout>
        </GroupTemplate>
      </CommandUIDefinition>
    </CommandUIDefinitions>
    <CommandUIHandlers>
      <CommandUIHandler
        Command="CustomTab.Button1Command"
        CommandAction="javascript:alert('Hello, Button1');" />
      <CommandUIHandler
        Command="CustomTab.Button2Command"
        CommandAction="javascript:alert('Hello, Button2');" />
      <CommandUIHandler
        Command="CustomTab.Button3Command"
        CommandAction="javascript:alert('Hello, Button3');" />
    </CommandUIHandlers>
  </CommandUIExtension>
</CustomAction>

 

Как видно, если мы хотим добавить новые элементы в коллекцию, то используем специальное свойство _children, которое указываем сразу после ID контейнера, разделяя их точкой. Это верно и для коллекции закладок и для коллекции шаблонов типа GroupTemplate.

Код стоит начать рассматривать с определения элемента GroupTemplate, который задает формат отображения создаваемой группы кнопок на нашей закладке. Тут определяется элемент Layout, содержащий элементы Section, отвечающие за отдельные ячейки или столбца в группе элементов. Внутри элементов Section ведется разбиение на строки с помощью элемента Row. Так, в одной секции можно разместить одну большую кнопку или несколько кнопок поменьше. Описание размеров содержится в элементах ControlRef. Тут же содержится имя раздела в шаблоне, куда может быть размещен элемент. Фактически GroupTemplate задает разметку для группы элементов, а элемент определяет, в какой группе он хочет находиться. Ниже приведены четыре возможных размера в разметке:

· Small – только изображение;

· Medium – изображение и текст;

· Large – изображение 32 на 32;

· Text – только текст.

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

На рисунке ниже показан результат работы кода:

@1.6

@1.6 Результат работы приложения

Реклама

Written by Sergiy Baydachnyy

24.03.2010 в 16:05

Опубликовано в SharePoint

Tagged with

комментариев 8

Subscribe to comments with RSS.

  1. .. В книге будет больше .. А когда будет книга? Вы вроде анонсировали книгу о SL 4…

    Александр

    24.03.2010 at 22:01

  2. А как можно отключить показ летны на конкретной странице?

    Евгений

    31.07.2010 at 11:21

    • Отключать можно с помощью класса SPRibbon (на серверной стороне). Я сходу не помню свойство. Но нужно получить контекст и что-то типа Visible.

      Sergiy Baydachnyy

      02.08.2010 at 18:51

  3. Подскажите пожалуйста, как отключить все элементы для формы просмотра определенного списка, спасибо!

    Александр

    11.10.2010 at 19:55

  4. Подскажите пожалуйста, как добавить в CommandAction серверный код на С#. И как скрыть кнопку кастом экшна, если не выбран лист айтем. спасибо!

    Ольга

    11.04.2011 at 16:43

  5. Скажите, а как сделать так, чтобы созданная мною вкладка была видна только в рамках определенного сайта?

    Аноним

    02.04.2012 at 10:49

  6. Добрый день. Сергей, а как (вообще каким-то способом) добавить закладку на ленту, чтобы она отображалась не в контексте списка или библиотеки, а просто на стартовой странице сайта? Рядом с закладками «Обзор» и «Страница». Просмотрел большое количество примеров, но не нашел ответа на свой вопрос. Самое близкое, что попадалось — это контекстная группа для веб части и чтобы группа была видна, необходимо размещать веб часть на странице. Но это нелепый какой-то вариант.

    Я понимаю, что добавить группу в уже существующую закладку ленты просто, а вот если не указывать RegistrationId или RegistrationType — то закладка не видна нигде, хотя вроде как проект развертывается без ошибок. Помогите советом, как получить собственную, новую закладку на главной ленте?

    Денис

    05.10.2016 at 16:10


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

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