Мастер

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

В зависимости от общей компоновки страницы и бизнес-логики, разработчикам предлагается использовать один из видов Мастера: горизонтальный или вертикальный.

Горизонтальный мастер

Горизонтальный мастер представляет собой ленту из блоков(шагов), для каждого из которых определена своя контентная область. Реализован контролом Wizard/horizontal:Layout — это раскладка ленты блоков(шагов) и визуального отображения шага.

API Стандарт, спецификация

Wizard/horizontal:Layout

Wizard/horizontal:Layout представляет собой контрол-раскладку для создания Мастера. Состоит из контрола Wizard/horizontal:StepBar и контентной области, в которой могут быть размещены любые стандартные контролы. При переходе между шагами контентная область полностью меняется в зависимости от текущего шага.

Руководство разработчика по конфигурации контрола

Чтобы добавить контрол на страницу, необходимо выполнить следующие действия:

  1. Добавить контрол Wizard/horizontal:Layout в шаблон страницы.
<!-- WML -->
<ws:template name="wizard">
   <Wizard.horizontal:Layout />
</ws:template>
  1. В опции items задать массив, каждый элемент которого реализует интерфейс ILayoutItem.
<!-- WML -->
<Wizard.horizontal:Layout
   items="{{ items }}" />
// TypeScript
​​protected _beforeMount(options?: IControlOptions, contexts?: object, receivedState?: void): void {
​​   this.items = [
​​      {
​​         title: 'Тип оборудования',
​​         template: 'Engine-demo/Wizard/horizontal/horizontalBase2/Step1',
​​         templateOptions: {
​​            finishStepHandler: this.finishStepHandler.bind(this),
​​            stepIndex: 0
​​         }
​​      },
​​      {
​​         title: 'Номера',
​​         template: step2template,
​​         templateOptions: {
​​            finishStepHandler: this.finishStepHandler.bind(this),
​​            stepIndex: 1
​​         }
​​      },
​​      {
​​         title: 'Тарифный план',
​​         template: 'Engine-demo/Wizard/horizontal/horizontalBase2/Step3',
​​         templateOptions: {
​​            finishStepHandler: this.finishStepHandler.bind(this),
​​            stepIndex: 2
​​         }
​​      },
​​      {
​​         title: 'Подключение',
​​         template: 'Engine-demo/Wizard/horizontal/horizontalBase2/Step4',
​​         templateOptions: {
​​            finishStepHandler: this.finishStepHandler.bind(this),
​​            stepIndex: 3
​​         }
​​      }
​​   ];
​​}
  1. В опции displayMode задать режим отображения ленты шагов.
<!-- WML -->
<Wizard.horizontal:Layout
   displayMode="{{ _displayMode }}"
   items="{{ items }}" />
// TypeScript
  1. В опции currentStepIndex задать номер выбранного шага.
<!-- WML -->
<Wizard.horizontal:Layout
   currentStepIndex="{{ currentStepIndex }}"
   displayMode="{{ _displayMode }}"
   items="{{ items }}" />
// TypeScript
​​protected _beforeMount(options?: IControlOptions, contexts?: object, receivedState?: void): void {
​​   this.currentStepIndex = 0;
​​}
  1. Управлять переключением шагов необходимо с помощью переменной, к которой привязано значение опции selectedStepIndex: если в опцию передать selectedStepIndex, то шаг будет меняться вместе с этой переменной (подробнее в статье):
<!-- WML -->
<Wizard.horizontal:Layout
   selectedStepIndex="{{ selectedStepIndex }}"
   on:selectedStepIndexChanged="selectedStepIndexChangedHandler()"
   displayMode="{{ _displayMode }}" 
   currentStepIndex="{{ currentStepIndex }}"
   items="{{ items }}" />
// TypeScript
​​protected _beforeMount(options?: IControlOptions, contexts?: object, receivedState?: void): void {
​​    this.selectedStepIndex = 0;
    selectedStepIndexChanged(event: SyntheticEvent<Event>, stepIndex: number) {
        if (this.validateStep(stepIndex) {
             this.selectedStepIndex = stepIndex;
        }
    }
​​}

В зависимости от поставленной задачи вместо Wizard/horizontal:Layout разработчик может использовать Wizard/horizontal:StepBar.

Wizard/horizontal:StepBar

Контрол Wizard/horizontal:StepBar представляет собой ленту из блоков (шагов), размещенную горизонтально. Он отображает общий статус выполнения задачи.

Справочные материалы и ресурсы

Руководство разработчика по конфигурации контрола

Для конфигурации контрола предоставлены следующие опции:

  • currentStepIndex — номер текущего шага.
  • displayMode — режим отображения контрола.
  • items — массив, каждый элемент которого реализует интерфейс IStepBarItem.
  • selectedStepIndex — номер выбранного шага (может не соответствовать текущему).

Пример конфигурации:

<!-- WML -->
<Wizard.horizontal:StepBar
   attr:class="Wizard-Horizontal-Layout__stepBar"
   items="{{items}}"
   displayMode="compact"
   bind:selectedStepIndex="selectedStepIndex"
   currentStepindex="{{3}}"/>

Чтобы настроить возможность перехода на выбранный шаг, используйте событие selectedStepIndexChanged, которое позволяет обработать клик по шагу StepBar’а. В обработчик события приходит номер шага, по которому был произведен клик. Таким образом можно получить событие клика по шагу и номер этого шага.

Чтобы перейти к следующему или предыдущему шагу с помощью других элементов (например, кнопки), необходимо инициировать свое событие в шаблоне шага, который вставляет прикладной разработчик и обрабатывать это событие в контроле родительском для Wizard/horizontal:StepBar.

Пример использования события:

<!-- WML -->
<Wizard.horizontal:StepBar
    ...
    on:selectedStepIndexChanged="selectedStepIndexChanged()" >
</Wizard.horizontal:StepBar>
// TypeScript
selectedStepIndexChanged(event: SyntheticEvent<Event>, stepIndex: number) {
   if (this.validateStep(stepIndex) {
      this.selectedStepIndex = stepIndex;
   }
}

Вертикальный мастер

Вертикальный мастер представляет собой набор заголовков (шагов), для каждого из которых определена контентная область. Реализуется вертикальный Мастер контролами Wizard/vertical:Layout и Wizard/vertical:Container.

Документация API Спецификация Axure

Wizard/vertical:Layout

Чтобы добавить контрол на страницу, необходимо выполнить следующие действия:

  1. Добавить контрол Wizard/Vertical:Layout в шаблон страницы.
  2. Задать опции для конфигурации контрола:
    • items — массив, каждый элемент которого реализует интерфейс IVerticalItem.
      Каждый элемент массива должен иметь поля:
      • title — заголовок шага;
      • titleContentTemplate (необязательное поле) — шаблон для отображения контента справа от заголовка шага.
        В качестве значение в поле можно передать текст:
        <!-- WML -->
        <Wizard.vertical:Container>
            <Wizard.vertical:Layout>
                <ws:items>
                    <ws:Object titleContentTemplate="Текст, который будет отображен" /> 
                    ...
                </ws:items>
            </Wizard.vertical:Layout>
        </Wizard.vertical:Container>
        Также, в поле можно передать шаблон:
        <!-- WML -->
        <Wizard.vertical:Container>
            <Wizard.vertical:Layout>
                <ws:items>
                    <ws:Object titleContentTemplate="wml!MyControl/Template" /> 
                    ...
                </ws:items>
            </Wizard.vertical:Layout>
        <Wizard.vertical:Container>
      • contentTemplate — шаблон для отображения содержимого шага. В качестве значения можно передать текст, который должен быть отображен, или шаблон.
      • contentTemplateOptions(необязательное поле) — объект с опциями, которые доступны в контексте шаблона шага.
        <!-- WML -->
        <Wizard.vertical:Container>
            <div class="demoVertical-Vertical_customContent"></div>
            <Wizard.vertical:Layout
                selectedStepIndex="{{selectedStepIndex}}"
                items="{{_items}}"/>
        </Wizard.vertical:Container>
        // TypeScript
        export default class VerticalBaseDemo extends Control<IControlOptions> {
           protected _template: TemplateFunction = template;
           protected selectedStepIndex: number;
             
           protected _beforeMount(): void {
              this.selectedStepIndex = 0;
                 
              this._items = [
                 {
                    title: 'Если входящий документ',
                    contentTemplate: 'Engine-demo/Wizard/demoVertical2/VerticalStep1',
                    contentTemplateOptions: {
                       finishStepHandler: this.finishStepHandler,
                       finishWizardHandler: this.finishWizardHandler,
                       finished: false
                 }, {
                    title: 'В качестве ответственного назначить',
                    contentTemplate: 'Engine-demo/Wizard/demoVertical2/VerticalStep3',
                    contentTemplateOptions: {
                       finishStepHandler: this.finishStepHandler,
                       finishWizardHandler: this.finishWizardHandler,
                       stepBackHandler: this.stepBackHandler,
                       finished: false
                    }
              })];
    • hideCompletedTitle — опция, отвечающая за скрытие заголовка шага, когда он пройден. Если задать значение true, то заголовок шага будет скрыт, когда он пройден.
    • selectedStepIndex — номер выбранного шага. Управлять переключением шагов необходимо с помощью переменной, к которой привязано значение этой опции: если в опцию передать selectedStepIndex, то шаг будет меняться вместе с этой переменной.

Взаимодействие с текущим шагом должно происходить через функции-обработчики, которые предполагается передавать через contentTemplateOptions.

Рассмотрим пример конфигурации.

<!-- WML -->
​​<Wizard.vertical:Layout
   selectedStepIndex="{{selectedStepIndex}}"
   items="{{_items}}"/>
// TypeScript
​​export default class VerticalBaseDemo extends Control<IControlOptions> {
    protected _template: TemplateFunction = template;
    protected selectedStepIndex: number;
     
    protected _beforeMount(): void {
        this.selectedStepIndex = 0;
         
        this._items = [
            {
                title: 'Если входящий документ',
                ​​contentTemplate: 'Engine-demo/Wizard/demoVertical2/VerticalStep1',
            ​​    contentTemplateOptions: {
                    finishStepHandler: this.finishStepHandler,
                    finishWizardHandler: this.finishWizardHandler,
                    finished: false
                ​​}
            }, {
                title: 'В качестве ответственного назначить',
                contentTemplate: 'Engine-demo/Wizard/demoVertical2/VerticalStep3',
                contentTemplateOptions: {
                    finishStepHandler: this.finishStepHandler,
                    finishWizardHandler: this.finishWizardHandler,
                    stepBackHandler: this.stepBackHandler,
                    finished: false
                ​​}
            }
        ];
    }
}

Wizard/vertical:Container

Контрол предназначен для размещения Вертикального мастера внутри Controls/scroll:Container для корректного отображения элементов, выходящих за горизонтальные границы скролл-контейнера.

В Wizard/vertical:Container включен Controls/scroll:Container. Для расположения Мастера в прокручиваемой области необходимо расположить Wizard/vertical:Layout внутри Wizard/vertical:Container.

<!-- WML -->
<Wizard.vertical:Container>
   <Wizard.vertical:Layout
      selectedStepIndex="{{selectedStepIndex}}"
      items="{{items}}"/>
</Wizard.vertical:Container>