Edit-In-Place

Материал из Umicms
(перенаправлено с «EditInPlace»)
Перейти к:навигация, поиск

Что такое edit in place?[править]

edit in place (редактирование на месте) - это возможность редактировать свойства объектов и страниц прямо на сайте (без входа в административный интерфейс), возможность наглядно видеть, как будет выглядеть редактируемая страница.

Условия работы[править]

1. Пользователь должен быть авторизован и иметь права на использование edit in place 2. Шаблон должен быть сверстан по определенным правилам

Особенности верстки tpl-шаблона[править]

1. В шаблоне необходимо объявить пространство имен umi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
...
</html>

2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
	<head>
		...
		%system includeQuickEditJs()%
		%system includeEditInPlaceJs()%
		...
	</head>
	<body>
		...
	</body>
</html>

3. Определить редактируемые области (поля), прописав тэгам определенные атрибуты. Смотрите описание пространства имен umi.

Особенности верстки xsl-шаблона[править]

1. Необходимо определить пространство имен umi 2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place, используя протокол udata

Пример шаблона:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp "&#160;">
	<!ENTITY middot "&#183;">
	<!ENTITY copy "&#169;">
]>

<xsl:stylesheet	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:php="http://php.net/xsl"
	xmlns:date="http://exslt.org/dates-and-times"
	xmlns:udt="http://umi-cms.ru/2007/UData/templates"
	xmlns:umi="http://www.umi-cms.ru/TR/umi"
	extension-element-prefixes="php"
	exclude-result-prefixes="xsl php udt date">

	<xsl:output method="html" version="4.01"
		encoding="utf-8"
		doctype-public="-//W3C//DTD HTML 4.01//EN"
		doctype-system="http://www.w3.org/TR/html4/strict.dtd"
		indent="yes"
		cdata-section-elements="script noscript"
		undeclare-namespaces="yes"
		omit-xml-declaration="yes"/>

	<xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
			<head>
				<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes"/>
				<xsl:value-of select="document('udata://system/includeEditInPlaceJs')/udata" disable-output-escaping="yes"/>
			</head>
			<body>
				...
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

3. Определить редактируемые области (поля), прописав тэгам определенные атрибуты. Смотрите описание пространства имен umi.

Описание атрибутов из пространства имен umi[править]

Атрибуты из пространства имен umi необходимы для указания редактируемых регионов.


Список атрибутов: umi:element-id - указывает идентификатор элемента (страницы), соответствующий редактируемой области. При наличии подключенной возможности "Виджеты" и если этот атрибут указан, создается редактируемый регион и появляется возможность удалить элемент из структуры.

umi:object-id - указывает идентификатор объекта, соответствующий редактируемой области. При наличии подключенной возможности "Виджеты" и если этот атрибут указан, создается редактируемый регион и появляется возможность удалить объект.

umi:field-name - указывает идентификатор свойства элемента или объекта (можно смотреть в шаблонах данных), с которым связана редактируемая область. Работает только в связке с umi:element-id или umi:object-id. Если umi:object-id и umi:element-id не указан, пытается взять его у первой родительской редактируемой области. Если этот атрибут указан и определен идентификатор объекта или элемента, создается редактируемый регион с возможностью править свойство.

umi:module и umi:method - указывает какому модулю и методу соответствует редактируемая область. Если оба атрибута указаны, создается редактируемый регион с возможностью добавлять объекты или элементы (при наличии подключенной возможности "Виджеты"). Если у области указан umi:element-id, то создаваемые элементы (страницы) будут создаваться дочерними от элемента, соответствующего идентификатору umi:element-id

Примеры назначения редактируемых регионов[править]

1. Создаем редактируемый заголовок в tpl-шаблоне страницы:

	<h1 umi:element-id="%pid%" umi:field-name="h1">%header%</h1>

2. Создаем редактируемый список пользователей с возможностью добавить, удалить пользователя и редактировать имя каждого пользователя. xsl - шаблон:

	<xsl:template match="udata[@module='users'] and udata[@method='list_users']">
		<ul umi:module="users" umi:method="list_users">
			<xsl:apply-templates select="items/item" mode="viewuser">
		</ul>
</xsl:template>

<xsl:template match="item" mode="viewuser">
		<li umi:object-id="{@id}" umi:field-name="{fname}"><xsl:value-of select="document(concat('uobject://', @id, '.fname'))//value" /></li>
</xsl:template>

3. Создаем редактируемое меню в tpl-шаблоне. Получаем возможность добавлять в меню страницы на любую вложенность, удалять страницы и изменять имена пунктов меню. Модифицируем шаблон /tpls/content/menu/default.tpl:

<?php

$FORMS = Array();


$FORMS['menu_block_level1'] = <<<END
			<div id="menu" umi:element-id="%id%" umi:module="content" umi:method="menu">
%lines%
			</div>

END;

$FORMS['menu_line_level1'] = <<<END
				<a href="%link%" umi:element-id="%id%" umi:field-name="name">%text%</a>

END;

$FORMS['menu_line_level1_a'] = <<<END
				<a class="active" href="%link%" umi:element-id="%id%" umi:field-name="name">%text%</a>

END;


?>