Документация для разработчиков
Документация для разработчиков Документация по D7 Документация по REST Пользовательская документация
Темная тема

Шаблон мастера

Описание

Для мастера системой определены два шаблона по умолчанию. Один подключается при запуске мастера из административного раздела, второй – при запуске мастера из публичной части сайта (подробнее см. запуск мастера).

Вы можете разработать собственный интерфейс, отличный от интерфейса по умолчанию. Шаблон мастера определяется классом, который обязательно должен наследоваться от класса CWizardTemplate. В этом классе необходимо переопределить метод GetLayout, который должен вернуть HTML шаблона мастера. Внутри шаблона мастера обязательно должны быть определены следующие макросы:

  • {#FORM_START#} – начало формы, макрос будет заменен тегом <form>;
  • {#FORM_END#} – конец формы, макрос будет заменен тегом </form>;
  • {#CONTENT#} – область содержимого шага, макрос будет заменен содержимым текущего шага;
  • {#BUTTONS#} – область кнопок навигации, макрос будет заменен кнопками навигации.

Если необходимо разделить область навигации на отдельные кнопки, то для этого можно использовать следующие макросы:

  • {#BUTTON_PREVIOUS#} - кнопка Назад;
  • {#BUTTON_NEXT#} - кнопка Далее;
  • {#BUTTON_CANCEL#} - кнопка Отмена;
  • {#BUTTON_FINISH#} - кнопка Готово.

Чтобы воспользоваться методами класса CWizardBase в теле переопределяемой функции GetLayout необходимо получить ссылку на экземпляр мастера:

<?
class MyTemplate extends CWizardTemplate
{
	function GetLayout()
	{
		$wizard =& $this->GetWizard(); //Получаем ссылку на объект мастера
		/*
			Определение шаблона
			...
		*/
	}
}
?>

После определения класса шаблона мастера в файле .description.php в ключе "TEMPLATES" массива $arWizardDescription необходимо описать шаблон, указав название класса, файл, где находится класс, а также ID шага, для которого будет применен шаблон. Шаблон можно определить как для всех шагов мастера, так и для конкретного, указав в ключе "STEP" ID шага:

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$arWizardDescription = Array(
	"NAME" => "Мой мастер", 
	"STEPS" => Array("Step0", "Step1", "Step2", "Install", "FinalStep", "CancelStep"),
	"TEMPLATES" => Array(
		Array("SCRIPT" => "wizard_pink.php", "CLASS" => "PinkTemplate"), //Для всех шагов шаблон PinkTemplate
		Array("SCRIPT" => "template_red.php", "CLASS" => "RedTemplate", "STEP" => "Step0"), //А для шага Step0 шаблон RedTemplate
	),
);
?>

Особенности системных шаблонов по умолчанию

1. Если навигация шага содержит только кнопку Отмена, по ее нажатию системный шаблон закроет pop-up окно мастера.

2. В системных шаблонах определены следующие каскадные стили оформления:

  • wizard-data-table - применяется для оформления таблиц;
  • wizard-note-box - применяется для оформления подсказки;
  • wizard-required - выделяет текст красным цветом.
3. В системных шагах определены следующие CSS-классы:
  • wizard-license-iframe - класс для тега iframe, выводящего лицензионное соглашение;
  • wizard-iframe-container - класс для тега div, содержащий фрейм с лицензионным соглашением;
  • wizard-prev-button - класс для кнопки Назад;
  • wizard-next-button - класс для кнопки Далее;
  • wizard-finish-button - класс для кнопки Готово;
  • wizard-cancel-button - класс для кнопки Отмена.
Подробнее см. Мастер создания нового пользователя

Примеры

Пример шаблона мастера для использования его в административном разделе (высота таблицы совпадет с высотой всплывающего окошка на странице Список мастеров.)

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
//Красный шаблон мастера
class MyRedTemplate extends CWizardTemplate
{
	function GetLayout()
	{
		//Получаем ссылку на объект мастера
		$wizard = &$this->GetWizard();
		$formName = $wizard->GetFormName(); //имя формы
		$wizardName = $wizard->GetWizardName(); //имя мастера
		$charset = LANG_CHARSET; //текушая кодировка
		//Получаем значения атрибута name кнопок мастера
		$nextButtonID = $wizard->GetNextButtonID();
		$prevButtonID = $wizard->GetPrevButtonID();
		$cancelButtonID = $wizard->GetCancelButtonID();
		$finishButtonID = $wizard->GetFinishButtonID();
		//Получаем ссылку на объект текущего шага
		$obStep =& $wizard->GetCurrentStep();
		$stepTitle = $obStep->GetTitle(); //Заголовок шага
		$stepSubTitle = $obStep->GetSubTitle(); //Подзаголовк шага
		//Получим ошибки шага
		$arErrors = $obStep->GetErrors();
		$strError = "";
		if (count($arErrors) > 0)
		{
			foreach ($arErrors as $arError)
				$strError .= $arError[0]."<br />";
			$strError = '<div id="step_error">'.$strError.'</span>';
		}
		/*
			Возвращаем HTML-код шаблона, в котором обязательно 
			должны быть определены следующие макросы:
				{#FORM_START#} - начало формы
				{#CONTENT#} - содержимое текущего шага
				{#BUTTONS#} - кнопки навигации
				{#FORM_END#} - конец формы
		*/
		return <<<HTML
<html>
	<head>
		<title>{$wizardName}</title>
		<meta http-equiv="Content-Type" content="text/html; charset={$charset}">
		<style type="text/css">
			body
			{
				margin:0; padding:0; background-color: #FFDEDE; 
				font-family:Verdana,Arial,helvetica,sans-serif;font-size:75%;
			}
			table {font-size:100%;}
			form {margin:0;}
			#border-box{margin:2px 2px 0 2px; border:1px dashed red;}
			#step_info
			{
				height:45px;padding:8px 30px;border-bottom:1px dashed red;
				box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;background:#FFC4C4;
			}
			#step_title{font-weight:bold;}
			#step_description {font-size:95%; margin-left:10px;}
			#step_content {padding:20px 20px;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
			#step_buttons
			{ 
				height:50px; text-align:right; padding-right:20px; padding-top:5px; 
				overflow:hidden; box-sizing:border-box;-moz-box-sizing:border-box;
			}
			#step_content_container { height:290px; overflow:auto;background:#fff;}
			#step_error {color:red; margin:6px;}
		</style>
		<script type="text/javascript">
			function OnLoad()
			{
				/*Установим в окошке мастера заголовок*/
				var title = self.parent.window.document.getElementById("wizard_dialog_title");
				if (title)
					title.innerHTML = "{$wizardName}";
				/*Получаем объект формы*/
				var form = document.forms["{$formName}"];
				if (!form)
					return;
				/*Получаем объекты кнопок*/
				var cancelButton = form.elements["{$cancelButtonID}"];
				var nextButton = form.elements["{$nextButtonID}"];
				var prevButton = form.elements["{$prevButtonID}"];
				var finishButton = form.elements["{$finishButtonID}"];
				/*Если в шаге только кнопка Отмена, то закроем окно мастера,
				иначе запросим подтверждение*/
				if (cancelButton && !nextButton && !prevButton && !finishButton)
					cancelButton.onclick = CloseWindow;
				else if(cancelButton)
					cancelButton.onclick = ConfirmCancel;
			}
			/*Подтверждение по кнопке Отмена*/
			function ConfirmCancel()
			{
				return (confirm("Вы действительно хотите прервать мастер?"));
			}
			/*Закроем окошко мастера*/
			function CloseWindow()
			{
				if (self.parent.window.WizardWindow)
					self.parent.window.WizardWindow.Close();
			}
		</script>
	</head>
	<body onload="OnLoad();">
		{#FORM_START#}
			<div id="border-box">
				<div id="step_info">
					<div id="step_title">{$stepTitle}</div>
					<div id="step_description">{$stepSubTitle}</div>
				</div>
				<div id="step_content_container">
					{$strError}
					<div id="step_content">{#CONTENT#}</div>
				</div>
			</div>
			<div id="step_buttons">{#BUTTONS#}</div>
		{#FORM_END#}
	</body>
</html>
HTML;
    }
}

Пример шаблона для использования в публичной части сайта

class MyPinkTemplate extends CWizardTemplate
{
	function GetLayout()
	{
		$wizard =& $this->GetWizard();
		$obStep =& $wizard->GetCurrentStep();
		$wizardName = htmlspecialcharsEx($wizard->GetWizardName());
		//Получаем ошибки
		$arErrors = $obStep->GetErrors();
		$strError = "";
		if (count($arErrors) > 0)
		{
			foreach ($arErrors as $arError)
				$strError .= $arError[0]."<br />";
			$strError = '<tr><td style="padding-top: 10px; padding-left: 20px; color:red;">'.$strError.'</td></tr>';
		}
		//Заголовок и подзаголовок
		$stepTitle = $obStep->GetTitle();
		$stepSubTitle = $obStep->GetSubTitle();
		return <<<HTML
			{#FORM_START#}
			<table style="border:2px outset #D4D0C8; background-color: #FFDEDE;" border="0" cellpadding="0" cellspacing="0" height="370" width="100%">
				<tr>
					<td style="background-color: #142F73" height="1"><span style="color:white; font-weight:bold; text-align:left; padding-left: 2px;">{$wizardName}</span></td>
				</tr>
				<tr>
					<td style="height: 60px; border-bottom:2px groove  #aca899; background-color: #FFC4C4; padding: 8px;" valign="top">
						<div style="padding-top: 5px; padding-left: 20px;"><b>{$stepTitle}</b></div>
						<div style="padding-left: 40px;">{$stepSubTitle}</div>
					</td>
				</tr>
				{$strError}
				<tr>
					<td style="padding: 20px; padding-left: 28px;padding-right: 28px;" valign="top" id="wizard-content-area">{#CONTENT#}</td>
				</tr>
                
				<tr>
					<td style="background-color: #FFC4C4; height: 40px; border-top:2px groove #ffffff; padding-right: 15px;" align="right">{#BUTTONS#}</td>
				</tr>
			</table>
			{#FORM_END#}
			<script type="text/javascript">
			function WizardOnLoad()
			{
				var cancelButton = document.forms["my_form"].elements["cancel_button"];
				var nextButton = document.forms["my_form"].elements["next_button"];
				var prevButton = document.forms["my_form"].elements["prev_button"];
				var finishButton = document.forms["my_form"].elements["finish_button"];
				if (cancelButton && !nextButton && !prevButton && !finishButton)
					cancelButton.onclick = CloseWindow;
				else if(cancelButton)
					cancelButton.onclick = ConfirmCancel;
			}
			function CloseWindow()
			{
				window.location = '/';
				return false;
			}
			function ConfirmCancel()
			{
				return (confirm("Вы действительно хотите прервать мастер?"));
			}
			WizardOnLoad();
			</script>
HTML;
	}
}


© «Битрикс», 2001-2024, «1С-Битрикс», 2024