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

  • Статья

Дата последнего изменения: 2 февраля 2011 г.

Применимо к: SharePoint Foundation 2010

В этом пошаговом руководстве показано, как настроить визуализацию поля на страницах для мобильных устройств посредством реализации настраиваемого элемента управления визуализацией поля вместе с объектом RenderingTemplate. В примере показано, как настроить поле Title элемента в списке Announcements на страницах для мобильных устройств "Показать элемент", "Создать элемент" и "Изменить элемент". Настройка отличается для трех типов страниц.

  • Показать форму — добавляет ссылку поиска, с помощью которой пользователи могут применять службу Bing для поиска заголовка объявления в Интернете.

  • Изменить форму — добавляет текст по умолчанию, если значение в столбце "Expires" меньше текущей даты.

  • Создать форму — добавляет текст по умолчанию, чтобы показать пользователям определенный формат значений.

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

Необходимые компоненты

Следует выполнить по крайней мере одно из следующих действий.

Рекомендуется: выполните инструкции пошагового руководства, описанные в статье Пошаговое руководство. Настройка заголовков элементов в мобильных формах.

Настройка проекта настраиваемого поля

  1. В Visual Studio создайте Пустой проект SharePoint. Выберите фермы, а не для песочницы. В качестве имени укажите MobileItemTitleField.

  2. В окне Обозреватель решений щелкните правой кнопкой мыши имя проекта, а затем выберите пункт Свойства.

  3. На вкладке Приложение диалогового окна Свойства в поле Имя сборки введите Contoso.SharePoint.MobileControls.ItemTitleField, а в поле Пространство имен по умолчанию — Contoso.SharePoint.MobileControls. В поле Конечная платформа оставьте значение .NET Framework 3.5.

  4. Если в поле Платформы решенияVisual Studio стандартного меню не указано "Любой процессор" или "x64", откройте вкладку Построение и присвойте параметру Конечная платформа значение "Любой процессор" или "x64". Сведения о том, как выбрать правильное значение, см. в статье Правильное задание конечной среды и процессора.

  5. Нажмите кнопку Сохранить все файлы на панели инструментов.

  6. Щелкните правой кнопкой мыши имя проекта в окне Обозреватель решений, выберите команду Добавить, а затем — Новый элемент.

  7. В диалоговом окне Добавление нового элемента в разделе Установленные шаблоны выберите Visual C#, а затем — Код.

  8. Выберите параметр Класс в поле Шаблоны и введите ItemTitleField.cs в поле Имя. Нажмите кнопку Добавить.

  9. Щелкните правой кнопкой мыши узел Ссылки в окне Обозреватель решений, выберите пункт Добавить ссылку и, удерживая клавишу CTRL, выберите System.Web и System.Web.Mobile на вкладке .NET в диалоговом окне Добавление ссылки. Нажмите кнопку ОК.

  10. В окне Обозреватель решений щелкните правой кнопкой мыши имя проекта, выберите пункт Добавить, а затем выберите Сопоставленная папка SharePoint.

  11. С помощью элемента управления "Дерево" сопоставьте папку папке TEMPLATE\ControlTemplates и нажмите кнопку ОК.

  12. В окне Обозреватель решений щелкните правой кнопкой мыши новую папку ControlTemplates (не имя проекта), выберите команду Добавить, а затем — Новый элемент.

  13. В разделе Установленные шаблоны диалогового окна Добавление нового элемента выберите SharePoint , а затем — 2010.

  14. Выберите Пользовательский элемент управления SharePoint в поле Шаблоны и задайте для ASCX-файла имя AnnouncementsItemTitleField.ascx. Нажмите кнопку Добавить. Visual Studio автоматически добавляет файл в манифест решения SharePoint и задает параметры для его развертывания в папку %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Кроме того, в манифест добавляется сборка, которая развертывается в глобальный кэш сборок (GAC).

    СоветСовет

    Не добавляйте пользовательский элемент управления щелчком правой кнопкой мыши имени проекта в окне Обозреватель решений. При добавлении пользовательского элемента управления этим способом Visual Studio помещает его во вложенную папку TEMPLATE\ControlTemplates и, если элемент управления не перемещен, Visual Studio развертывает его в соответствующую вложенную папку %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Шаблоны визуализации страниц для мобильных устройств, находящиеся во вложенных папках, не загружаются.

  15. Удалите файлы AnnouncementsItemTitleField.ascx.cs и AnnouncementsItemTitleField.ascx.designer.cs, которые созданы автоматически вместе с файлом AnnouncementsItemTitleField.ascx. Для данного проекта эти файлы не потребуются. Содержимое файла AnnouncementsItemTitleField.ascx по умолчанию связано с файлом AnnouncementsItemTitleField.ascx.cs, который только что был удален, поэтому компилятор выдаст предупреждение об отсутствующем файле. Это предупреждение можно игнорировать, поскольку содержимое по умолчанию будет изменено на следующем шаге, описанном в этом разделе.

Создание элемента управления визуализацией

  1. Откройте файл ItemTitleField.cs проекта, если он еще не открыт, и добавьте следующие операторы using.

    using System.Web.UI.MobileControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.MobileControls;

  2. Добавьте модификатор доступа public в объявление ItemTitleField, если это еще не сделано, и измените объявление, чтобы указать, что оно наследуется от класса SPMobileBaseTextField:

    public class ItemTitleField : SPMobileBaseTextField
{

}

  3. Добавьте в метод CreateControlForDisplay() следующее переопределение:

    protected override MobileControl CreateControlForDisplay()
{
   string title = Convert.ToString(this.ItemFieldValue);
   if (!String.IsNullOrEmpty(title))
   {
      this.LabelControl.BreakAfter = false;
      this.LabelControl.Text = title + " ";

      this.LinkControl.BreakAfter = false;
      this.LinkControl.Text = "Search";
      this.LinkControl.href = "https://www.bing.com/?scope=web&mkt=ru-ru" + title.Replace(' ', '+');

      Panel panel = new Panel();
      panel.BreakAfter = false;
      panel.Controls.Add(this.LabelControl);
      panel.Controls.Add(this.LinkControl);

      return panel;
   }
   return null;
}

    Учтите, что этот метод начинает работу с получения текущего значения поля Title текущего элемента списка. Это текущее значение хранится в свойстве ItemFieldValue.

  4. Добавьте в метод CreateControlForNew следующее переопределение:

    protected override MobileControl CreateControlForNew()
{
   MobileControl myNewControl = null;
   if (this.Field != null)
   {
      string text = "Group: Project Name";
      if (!this.Page.IsPostBack)
      {
         this.TextBoxControl.Text = text;
      }
      myNewControl = this.TextBoxControl;
   }
   return myNewControl;
}

  5. Добавьте в метод CreateControlForEdit следующее переопределение:

    protected override MobileControl CreateControlForEdit()
{
   MobileControl myEditControl = null;
   if (this.Item != null && this.Field != null)
   {
      if (this.NeedEllipsisRendering)
      {
         myEditControl = this.CreateControlForDisplay();
      }
      else
      {
         if (!this.Page.IsPostBack)
         {
            string strEdit = this.Field.GetFieldValueForEdit(this.ItemFieldValue);
            string overDue = "OVERDUE: ";

            SPListItem item = this.ListItem;
            if (item["Expires"] != null)
            {
               System.DateTime date = (DateTime)item["Expires"];
               if (date.CompareTo(System.DateTime.Today) < 0)
               {
                  this.TextBoxControl.Text = overDue + strEdit;
               }
               else
               {
                  this.TextBoxControl.Text = strEdit;
               }
            }
         }
         myEditControl = this.TextBoxControl;
      }
   }
   return myEditControl;
}

Создание шаблона визуализации

  1. Откройте файл AnnouncementsItemTitleField.ascx и замените весь раздел директив следующей разметкой.

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  2. Добавьте регистрацию дополнительного префикса тега с помощью следующего кода.

    <%@ Register TagPrefix="Contoso" Namespace="Contoso.SharePoint.MobileControls" Assembly="$SharePoint.Project.AssemblyFullName$" %>

    При построении проекта маркер $SharePoint.Project.AssemblyFullName$Visual Studio будет заменен именем сборки из четырех частей.

  3. Добавьте директиву Import для пространства имен Microsoft.SharePoint.

    <%@ Import Namespace="Microsoft.SharePoint" %>

  4. Под директивами добавьте шаблон RenderingTemplate и задайте для него идентификатор, который ищет среда выполнения: MobileCustomListField_Announcements_Text_Title.

    <SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >

</SharePoint:RenderingTemplate>

  5. В элементе RenderingTemplate определите элемент Template, в котором настраиваемый объект ItemTitleField используется как дочерний элемент управления.

    <Template>
  <Contoso:ItemTitleField RunAt="Server" />
</Template>

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

    • Новая директива Register добавлена для регистрации префикса тега "Contoso".

    • Добавлена строка, импортирующая пространство имен Microsoft.SharePoint.

    • Строка из раздела Пошаговое руководство. Настройка заголовков элементов в мобильных формах

      <mobile:Label Text="Title field in Announcements List" RunAt="Server" />

      заменена в этом примере кода строкой

      <Contoso:ItemTitleField RunAt="Server" />

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

  6. В меню Построение выберите пункт Развернуть решение. При этом сборка будет автоматически построена повторно, ASCX-файл будет сохранен, сборка будет развернута в глобальном кэше сборок, а ASCX-файл — в папке %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates, и веб-приложение будет повторно запущено.

Тестирование элемента управления визуализацией

На мобильном устройстве или в эмуляторе зайдите на веб-сайт в веб-приложении со списком Объявления. Откройте список Объявления. Выберите ссылку Новый элемент. Сравните результаты с рис. 1.

Рис. 1. Текст по умолчанию, заданный для поля Title в новой форме

Настраиваемая форма создания элемента для мобильного устройства

Создайте новый элемент и задайте для него в столбце Срок действия значение, которое представляет некоторую дату в прошлом. Нажмите кнопку Сохранить. Снова появится представление списка. Щелкните, чтобы показать новый элемент. Сравните результаты с рис. 2. Обратите внимание на то, что ссылка Поиск добавлена к концу заголовка.

Рис. 2. Ссылка поиска добавлена к "Показать форму"

Настраиваемая форма для элемента отображения на мобильных устройствах

Выберите ссылку Изменить. Сравните результаты с рис. 3. Обратите внимание на то, что слово "ПРОСРОЧЕНО" добавлено к текущему заголовку.

Рис. 3. Условная визуализация текста в поле Title или форме редактирования

Настроенная форма изменения элемента для мобильного устройства

См. также

Задачи

Настройка отображения поля на страницах для мобильных устройств

Концепции

Макет и разбивка страниц для мобильных устройство

Система отображения страниц для мобильных устройств