понедельник, 20 августа 2012 г.

Редактор контента на отдельной вкладке формы данных

У каждого динамического типа данных в админке есть своя форма для добавления данных.

Если у поля выбран виджет VisualXhtmlEditor, то на форме появляется кнопка "Edit HTML", при нажатии которой открывается окно редактора контента.

Редактор контента вызывается кнопкой Edit HTML

Если вы посмотрите добавление сообщения в блог в пакете Composite.Community.Blog, то вы увидите, что редактор контента там реализован более удобно - на отдельной вкладке.

Как вынести редактор контента для соответствующего поля на отдельную вкладку?

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


Тип данных

Давайте сначала создадим очень простой глобальный тип данных:
  • Название: Элементы контента
  • Имя типа: Item
  • Пространство имен типа: Demo.Content
Создайте глобальный типа данных Demo.Content.Item

А теперь добавим поля:
  • Имя: Title, Надпись: Название, Тип поля: Строка
  • Имя: Description, Надпись: Описание, Типа поля: Строка
Добавьте два поля, одно из которых использует виджет VisualXhtmlEditor

Для поля Description укажем максимальную длину строки - "Неограниченная длина", и на вкладке "Расширенные" выберем виджет VisualXhtmlEditor.

Используйте виджет VisualXhtmlEditor



Форма данных

Теперь самое главное: изменение формы.
  1. Выбираем наш тип данных в разделе "Данные".
  2. Нажимаем "Изменить разметку формы".

    Откройте редактор разметки формы данных
  3. В открывшемся файле делаем такие изменения:
    1. Элемент <FieldGroup/> помещаем в элемент <PlaceHolder/>, а сам элемент <PlaceHolder/> помещаем в элемент <TabPanels/>.
    2. Элементу  <PlaceHolder/> добавляем атрибут Label со значением "Настройки" (или что вам нравиться).
    3. Элемент <InlineXhtmlEditor/> перемещаем на уровень элемента  <PlaceHolder/>, чтобы они были дочерними для элемента <TabPanels/>.
    4. У элемента  <InlineXhtmlEditor/> и его дочернего элемента  <InlineXhtmlEditor.Xhtml/> удаляем "Inline" из названия, чтобы получилось  <XhtmlEditor/> и   <XhtmlEditor.Xhtml/> соответственно.
  4. Сохраняем нашу измененную форму.
У вас должно получиться такое:

<cms:formdefinition xmlns:cms="http://www.composite.net/ns/management/bindingforms/1.0" xmlns="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0" xmlns:ff="http://www.composite.net/ns/management/bindingforms/std.function.lib/1.0" xmlns:f="http://www.composite.net/ns/function/1.0">
 <cms:bindings>
  <cms:binding name="Id" type="System.Guid" optional="true" />
  <cms:binding name="Title" type="System.String" optional="true" />
  <cms:binding name="Description" type="System.String" optional="true" />
 </cms:bindings>
 <cms:layout>
  <cms:layout.label>
   <cms:read source="Title" />
  </cms:layout.label>
  <TabPanels>
   <PlaceHolder Label="Настройки">
    <FieldGroup>
     <TextBox Label="Название" Help="" SpellCheck="true">
      <TextBox.Text>
       <cms:bind source="Title" />
      </TextBox.Text>
     </TextBox>
    </FieldGroup>
   </PlaceHolder>
   <XhtmlEditor Label="Описание" Help="" ClassConfigurationName="common">
    <XhtmlEditor.Xhtml>
     <cms:bind source="Description" />
    </XhtmlEditor.Xhtml>
   </XhtmlEditor>
  </TabPanels>
 </cms:layout>
</cms:formdefinition>

(Если вы сделали что-то не так, то у вас могут возникнуть ошибки при сохранении разметки формы или при добавлении / редактировании данных этого типа.)

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

Редактор контента на отдельной вкладке формы данных


Важные замечания

Первое. Когда вы сохраняете XML формы в первый раз, в папке App_Data\Composite\DynamicTypeForms\ создается файл именно с этим XML-кодом. В нашем случае это - \App_Data\Composite\DynamicTypeForms\Demo\Content\Item.xml

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

Допустим, вы добавили еще одно поле "Summary" в наш тип данных (используйте виджет TextArea).

Добавьте еще одно поле в тип данных

После этого:
  1. Выбирите наш тип данных в разделе "Данные" и нажимите " Изменить разметку формы".
  2. В элемент <cms:bindings/> добавляем <cms:binding name="Summary" type="System.String" optional="true" />
  3. В элемент <FieldGroup/>  добавляем:

    <TextArea Label="Краткое описание" Help="" SpellCheck="true">
     <TextArea.Text>
      <cms:bind source="Summary" />
     </TextArea.Text>
    </TextArea>
  4. Сохраняем.
Должно получится так:

<cms:formdefinition xmlns:cms="http://www.composite.net/ns/management/bindingforms/1.0" xmlns="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0" xmlns:ff="http://www.composite.net/ns/management/bindingforms/std.function.lib/1.0" xmlns:f="http://www.composite.net/ns/function/1.0">
 <cms:bindings>
  <cms:binding name="Id" type="System.Guid" optional="true" />
  <cms:binding name="Title" type="System.String" optional="true" />
  <cms:binding name="Summary" type="System.String" optional="true" />
  <cms:binding name="Description" type="System.String" optional="true" />
 </cms:bindings>
 <cms:layout>
  <cms:layout.label>
   <cms:read source="Title" />
  </cms:layout.label>
  <TabPanels>
   <PlaceHolder Label="Настройки">
    <FieldGroup>
     <TextBox Label="Название" Help="" SpellCheck="true">
      <TextBox.Text>
       <cms:bind source="Title" />
      </TextBox.Text>
     </TextBox>
     <TextArea Label="Краткое описание" Help="" SpellCheck="true">
      <TextArea.Text>
       <cms:bind source="Summary" />
      </TextArea.Text>
     </TextArea>
    </FieldGroup>
   </PlaceHolder>
   <XhtmlEditor Label="Описание" Help="" ClassConfigurationName="common">
    <XhtmlEditor.Xhtml>
     <cms:bind source="Description" />
    </XhtmlEditor.Xhtml>
   </XhtmlEditor>
  </TabPanels>
 </cms:layout>
</cms:formdefinition>

Новое поле появилось на форме данных

Подсказка. Иногда проще будет удалить XML-файл динамической формы и затем опять отредактировать форму как указано выше. Система создаст новый файл динамической формы с добавленными полями и вам нужно будет проделать в нем примерно те же шаги, что описаны выше.

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

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