Руководство Бизнес-аналитика

Page tree

Руководство Бизнес-аналитика. Платформа Web-BPM 2.0

Skip to end of metadata
Go to start of metadata

TODO

Добавить более сложные примеры

Добавить информацию про Scope и т.д.


Создадим компоненту TextFieldDemo, представляющую из себя текстовое поле с надписью. Для этого необходимо выполнить шаги:

  1. Запустите студию и откройте проект
  2. Создайте клиентский скрипт, имеющий свойства value, label

    frontend\src\ts\component\field\TextfieldDemo.ts
    import {Control} from "./component/Control";
    
    @Component({
      moduleId: module.id,
      selector: 'textfield-demo',
      templateUrl: './../../../../resources/template/component/field/TextFieldDemo.html', //необходимо указывать относительный путь
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class TextfieldDemo extends Control {
     
      @Input() //свойства, которые задаются извне, нужно делать публичными и помечать аннотацией Input, это позволяет задавать их через html
      public label: string;
      @Input()
      public value: string;
    
    
      constructor(el: ElementRef, cd: ChangeDetectorRef) {
        //Любая ангуляр компонента должна явно определять конструктор, если наследуется не от ангуляр компоненты
        super(el, cd);
      }
     
      getLabel(): string {
        return this.label;
      }
     
      setLabel(label: string) {
        this.label = label;
        //при использовании OnPush (по умолчанию), при изменении свойства нужно вызвать этот метод для перерисовки шаблона
        this.cd.markForCheck(); 
      }
     
      getValue(): string {
        return this.value;
      }
     
      setValue(value: string) {
        this.value = value;
        this.cd.markForCheck();
      }
    }
  3. Создайте HTML-шаблон компоненты 

    frontend\resources\template\component\field\TextFieldDemo.html
    <div [id]="getObjectId()">
        <label [hidden]="!label">{{label}}</label>
        <input type="text"
               name="{{name}}"
               [(ngModel)]="value">
    </div>
  4. Зарегистрируйте компоненту в файле frontend\src\ts\component\component.module.ts. Для этого добавьте строки:

    import { TextFieldDemo } from "./field/TextfieldDemo";
    ...
    forwardRef(() => TextFieldDemo),
  5. Создайте компоненту в любом каталоге внутри каталога resources

  6. При необходимости включите расширенный режим. Меню Вид-Расширенный режим
  7. Выберите файл компоненты и откройте панель инспектор
  8. Добавьте с помощью drag&drop скрипт TextfieldDemo.ts

Создание и указание категории для компоненты

Из соображений удобства использования в студии компоненты отсортированы по категориям. Категория компоненты указывается в её файле *.component, в теге <category>. Доступные по умолчанию категории: containers, grids, editable-grids, buttons, fields, filters.

Пример на основе AdditionalInfoForm.component
	<id>48ad7787-b99a-3a93-84b0-15465017ecdc</id>
    <name>AdditionalInfoForm</name>
    <category>containers</category>
    <icon>META-INF/components/icons/containers/AdditionalInfoForm.png</icon>
    <localization>META-INF/components/localization/containers/additional-info-form</localization>
    <documentation>META-INF/components/documentation/AdditionalInfoForm_1966203.html</documentation>
    

Создание категории

Вы можете создать собственную, новую категорию компонент для проекта. Для этого откройте файл resources/src/main/resources/META-INF/components-package.xml. В этом файле указаны все категории вместе с атрибутом weight. Вес категории используется для сортировки категорий в панели компонентов в студии – чем больше вес, тем выше будет категория. По умолчанию первой категорией идёт containers. Чтобы добавить категорию, определите, какой по порядку должна быть в студии новая категория. Добавьте новый тег <category> в вышеуказанный файл вместе с соответствующим весом.

Локализация категории

После добавления категории нужно задать локализацию её имени. Для этого откройте файл resources\src\main\resources\META-INF\components\localization\default-components_ru_RU.properties. Добавьте русское название для новой категории компонент по аналогии с предыдущими: category-tag.category.name=Имя категории

Русский текст в файлах *.properties нужно хранить в юникоде. Для перевода в юникод можно воспользоваться, например, сервисом calcsbox.com/post/konverter-teksta-v-unikod.html

Задайте локализацию на английском. Это делается аналогичным образом в файле resources\src\main\resources\META-INF\components\localization\default-components.properties. Английский текст кодировать в юникод не нужно.

Добавьте при необходимости локализацию для остальных языков.

Помимо проектной локализации есть пакетная - общая для всех проектов. При совпадении ключей приоритет у проектной локализации выше.

Вес категории. Приоритет веса в проекте и в пакетах

Вы можете изменить порядок, в котором отображаются категории в проекте. Для этого задайте новый вес (weight) для категорий в файле components-package.xml. Собственный порядок категорий в проекте имеет приоритет над порядком из общих компонент. Это значит, что если он поменяется в общих компонентах, то всё равно останется прежним в проекте. Новые категории из общих компонентов появятся в студии в любом случае, даже если их нет в проекте.



  • No labels