✨ Composants

Les composants sont les piliers de l'architecture de Unified Builder.
Ils doivent être importés selon un ordre précis.

Interface Component

interface Component<Props> {
    Template: string
    Data: EntryComponentData<Props> | MultiComponentData<Props> | SingleComponentData<Props>,
    Props: Props
}

Tous les composants héritent de l'interface Component.

📜 Champs

Template

Component.Template = string

Contient le template HTML qui servira à créer le composant.

const Template = 
        `<div>
             <my-button></my-button>
             <div class="flex flex-row w-full place-items-center mt-1.5">
                   <my-circle></my-circle>
             </div>
        </div>`

Vous utilisez les tags div afin de positionner vos élèments dans le template. Tous les frameworks CSS peuvent être employés, dans cet exemple j'utilise TailwindCss.

Data

Component.Data = EntryComponentData<Props> | MultiComponentData<Props> | SingleComponentData<Props>

Contient les définitions des balises HTML.

      
import {EntryComponent} from "@adclz/unifiedbuilder/builder";
import {Button} from "@adclz/unifiedbuilder/widgets"
import {Circle} from "@adclz/unifiedbuilder/shapes"
 
const Template =
    "<div>" +
        "<my-button></my-button>" +
            "<div class="absolute flex flex-row w-full place-items-center mt-1.5 top-0">" +
                "<my-circle></my-circle>" +
            "</div>" +
    "</div>"
 
export default EntryComponent(
    () => {
        return {
            Template,
            Data: {
                'my-button': new Button(),
                'my-circle': new Circle()
            }
        }
    })
 

Data est un objet dont l'index représente le nom de la balise HTML que vous souhaitez transformer.

Les balises HTML autres que div ou ceux définis dans Data seront ignorés.
Unified Builder ne supporte pas les balises HTML self-closed, au lieu de <my-item/>, vous devez utiliser <my-item></my-item>
Chaque balise peut être de type Item ou Component.
Dans l'exemple ci-dessous, <my-component> prendra la forme de AnotherComponent.
      
import {EntryComponent} from "@adclz/unifiedbuilder";
import {AnotherComponent} from "ComponentLocation"
 
const Template =
        "<div>"+
             "<my-button></my-button>"+
             "<div class="absolute flex flex-row w-full place-items-center mt-1.5 top-0">"+
                   "<my-component></my-component>"+
             "</div>"+
        "</div>"
 
export default EntryComponent(
    () => {
        return {
            Template: Template,
            Data: {
                'my-button': new Button(),
                'my-component': AnotherComponent
            }
        }
    })
 

Liste des composants

L'importation des composants doit se faire dans un ordre précis.

1 = Seul une instance de ce composant est autorisé.
n = Vous pouvez importer autant d'instances que nécéssaires.

EntryComponent

EntryComponent est le composant racine de votre application.
Il ne peut y avoir qu'un seul composant de ce type dans toute la solution.
Il peut contenir les composants suivants:

  • MultiComponent - n
  • SingleComponent - n

MultiComponent

MultiComponent permet de mettre en place un système responsive.
Les élèments situés à l'intérieur de ce composants peuvent être dupliqué un nombre n fois défini de façon arbitraire selon le contexte.

Il peut y avoir plusieurs composants, mais seulement dans EntryComponent.
Il peut contenir les composants suivants:

  • SingleComponent - n

🔒📜 Champs

MultiComponent possède 2 champs uniques.

Repeat
MultiComponent.prototype.Repeat = number

Repeat vous permet de définir le nombre de fois que ce composant doit être répété.

MaxRepeat
MultiComponent.prototype.MaxRepeat = Record<Model, number>

MaxRepeat limite l'utilisation de Repeat en indiquant que seul un nombre limité de composants ne peut être affiché par écran.

Lorsque Repeat est supérieur à MaxRepeat, Unified Builder va créer un autre écran afin de caser les composants en trop.
Builder répetera ce procédé jusqu`à ce qu'il n'y ait plus de composants à répéter.
import {Model} from "@adclz/fevertypes/devices"

const Responsive: Record<Model, number> = {
    MTP700: 3,
    MTP1000: 3,
    MTP1200: 5,
    MTP1500: 5,
    MTP1900: 7,
    MTP2200: 9
}

✨ Exemple

Cet exemple vous permet de modifier l'affichage d'un MultiComponent qui contient un bouton sur une Hmi de type MTP700.
Vous pouvez aperçevoir la création automatique d'écrans lorsque MaxRepeat limite Repeat.

./my-multi-component.ts
./my-entry-component.ts

SingleComponent

SingleComponent est un composant seul qui ne peut être dupliqué.
Ile peut être présent partout dans le projet, mais ne doit pas servir de composant racine.
Il peut contenir les composants suivants:

  • SingleComponent - n

Contexte

Contexte de création

Lorsque vous appellez la fonction Data d'un Item, vous pouvez invoquer un objet de type ItemContext.
En effet lorsque vous choisissez un MultiComponent ou que vous avez séléctionné l'option OnEachScreen, la fonction Data() est appellé autant de fois qu'il sera nécèssaire de créer le même item.
Ainsi vous pouvez changer les champs de l'Item en fonction du contexte d'appel de celui-ci.

      
import {EntryComponent} from "@adclz/unifiedbuilder/builder";
import {Button} from "@adclz/unifiedbuilder/widgets"
import {Circle} from "@adclz/unifiedbuilder/shapes"
 
const Template =
    "<div>" +
        "<my-button></my-button>" +
            "<div class="absolute flex flex-row w-full place-items-center mt-1.5 top-0">" +
                "<my-circle></my-circle>" +
            "</div>" +
    "</div>"
 
export default EntryComponent(
    () => {
        return {
            Template: Template,
            Data: {
                'my-button': new Button()
                    .Data(function (ItemContext) {
                        this.Height = 50
                        this.Width = 50
                        
                        if (ItemContext.ScreenNumber === 1) {
                            this.Width
                        }
                    }),
                'my-circle': new Circle()
            }
        }
    })
 

Injection de dépendances

En utilisant le terme générique Props contenu dans chaque Component, vous pouvez injecter vos dépendances dans tous les composants.
Vous devez spécifier un nom de variable dans la fonction qui exécute le composant afin d'accéder à votre dépendance.
Graçe à l'inférence de type de Typescript, cette variable prendra le type de la dépendance définit dans Props.

Dans cet exemple, Context a été choisi comme nom de variable et devient du type MyDependency.
      
import {EntryComponent} from "@adclz/unifiedbuilder/builder";
import {Button} from "@adclz/unifiedbuilder/widgets"
import {Circle} from "@adclz/unifiedbuilder/shapes"
 
interface MyDependency {
    MyParameter1: string
    MyParamater2: string
}
 
const Template =
    "<div>" +
        "<my-button></my-button>" +
            "<div class="absolute flex flex-row w-full place-items-center mt-1.5 top-0">" +
                "<my-circle></my-circle>" +
            "</div>" +
    "</div>"
 
export default EntryComponent<MyDependency>(
    (Context) => {
        return {
            Template,
            Data: {
                'my-button': new Button()
                    .Data(function () {
                        this.Height = 50
                        this.Width = 50
 
                        if (Context.MyParameter1 === "MyParameterContent") {
                            this.Width = 100
                        }
                    }),
                'my-circle': new Circle()
            }
        }
    })
 
Table of Contents