Edit-In-Place — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Отмена правки 528 участника 91.214.45.89 (обсуждение))
Строка 1: Строка 1:
−
doors.txt;5
+
== Что такое edit in place? ==
 +
edit in place (редактирование на месте) - это возможность редактировать свойства объектов и страниц прямо на сайте (без входа в административный интерфейс), возможность наглядно видеть, как будет выглядеть редактируемая страница.
 +
 
 +
== Условия работы ==
 +
1. Пользователь должен быть авторизован и иметь права на использование edit in place
 +
2. Шаблон должен быть сверстан по определенным правилам
 +
== Особенности верстки tpl-шаблона ==
 +
1. В шаблоне необходимо объявить пространство имен umi:
 +
<source lang="xml">
 +
<!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>
 +
</source>
 +
2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place:
 +
<source lang="xml">
 +
<!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>
 +
</source>
 +
3. Определить редактируемые области (поля), прописав тэгам определенные атрибуты. Смотрите описание пространства имен umi.
 +
 
 +
== Особенности верстки xsl-шаблона ==
 +
1. Необходимо определить пространство имен umi
 +
2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place, используя протокол udata
 +
 
 +
Пример шаблона:
 +
<source lang="xml">
 +
<?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>
 +
</source>
 +
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-шаблоне страницы:
 +
<source lang="xml">
 +
<h1 umi:element-id="%pid%" umi:field-name="h1">%header%</h1>
 +
</source>
 +
2. Создаем редактируемый список пользователей с возможностью добавить, удалить пользователя и редактировать имя каждого пользователя. xsl - шаблон:
 +
<source lang="xml">
 +
<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>
 +
</source>
 +
 
 +
3. Создаем редактируемое меню в tpl-шаблоне. Получаем возможность добавлять в меню страницы на любую вложенность, удалять страницы и изменять имена пунктов меню. Модифицируем шаблон /tpls/content/menu/default.tpl:
 +
 
 +
<source lang="php">
 +
<?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;
 +
 
 +
 
 +
?>
 +
</source>

Версия 17:07, 25 сентября 2009

Что такое 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;


?>
Источник — «https://wiki.umisoft.ru/index.php?title=Edit-In-Place&oldid=532»