Hilfe-Center
  1. Startseite
  2. Technische Referenz
  3. API
  4. Template-Funktionen
  5. Shapes

Shapes

Funktionen für Shape-Templates

RenderEditParams(
    Shape As API.iShape, 
    EditMode As Boolean, 
    Optional MoveLevelsInDomUp As Integer = 0
) As MvcHtmlString [V2]

Rendert die Shape-Parameter und die ID des Tag welcher dann als Anker verwendet wird. Diese Funktion muss in das äußerste Tag des Shapes.

Unten folgt eine Anleitung anhand eines Beispiels zur Erstellung eines Shape-Templates.

  • Shape: Das aktuelle Shape
  • EditMode: Bearbeitungsmodus
  • Optionale Parameter:
    • MoveLevelsInDomUp: Für Spezialanwendungen kann hier angegeben werden, dass die Shape-Steuerelemente zur Laufzeit im DOM nach oben wandern sollen (so können z.B. Overflow-Hidden-Styles umgangen werden). Der Wert regelt die Anzahl der Ebenen.

RenderToolbar(
    Model As API.ViewModel.iShape, 
    EditMode As Boolean, 
    MvcHtmlHelper As HtmlHelper, 
    Optional MoveLevelsInDomUp As Integer = 0
) As MvcHtmlString [V2]

Rendert die Toolbar für ein Shape.

  • Model: Das aktuelle Shape-ViewModel
  • EditMode: Bearbeitungsmodus
  • MvcHtmlHelper: Intern benötigtes Hilfsobjekt, kann fest mit "Html" übergeben werden
  • Optionale Parameter:
    • MoveLevelsInDomUp: Für Spezialanwendungen kann hier angegeben werden, dass die Shape-Steuerelemente zur Laufzeit im DOM nach oben wandern sollen (so können z.B. Overflow-Hidden-Styles umgangen werden). Der Wert regelt die Anzahl der Ebenen.

Aufbau eines Shape-Templates:

Copy

@ModelType API.ViewModel.iShape

@Code
    Dim TextAttribute As API.iTypedText = Model.Shape.GetTextAttributeValue("Text", EditMode:=EditMode)
End Code

<div id="myShape" @Template.Shape.RenderEditParams(Model.Shape, EditMode)>
<div @Html.Raw(Template.Attribute.RenderEditParams(CurrentTextAttribute, EditMode))>
        @Html.Raw(CurrentTextAttribute.Value)
    </div>
    @Template.Attribute.RenderToolbar(Html, CurrentTextAttribute, EditMode)
    
    @Template.Shape.RenderToolbar(Html, Model, EditMode)
</div>

Obiges Code-Beispiel zeigt ein vollständiges Template eines Shapes. Erstellt wird damit ein einfaches Shape, das einen Absatz beinhaltet, was dem Default-Paragraph-Shape entspricht.

Betrachtet werden sollen hier nur die unterstrichenen, shapebezogenen Renderfunktionen. Die Funktionen des Attributs werden weiter unten im Abschnitt Attribute erklärt.

  • Grundsätzlich muss ein Shape-Template mit der Zeile "@ModelType API.ViewModel.iShape" beginnen. Damit wird das von CONTAILOR übergebene View-Model-Objekt entgegengenommen und kann verwendet werden.
  • Ein Shape muss ein Element in erster Ebene besitzen, das alle anderen Inhalte umschließt. Nur so kann CONTAILOR das Shape als ganzes erkennen. Dies ist hier das div-Element mit ID "myShape". An genau dieses äußere Element müssen die für CONTAILOR notwendigen Werte zur Verwaltung der Shapes gehangen werden und zwar fest mit der Zeile "@Template.Shape.RenderEditParams(Model.Shape, EditMode)".
  • Ein Shape muss ebenso einen Shaperahmen bekommen, damit im Editmodus alle Shapeaktionen über eine Toolbar aufgerufen werden können. Dieses muss mit der Funktion "@Template.Shape.RenderToolbar(Html, Model, EditMode)" geschehen. Diese Zeile muss sich innerhalb des Shape-Rahmens an letzter Stelle vor dem schließenden Tag des Rahmens befinden.

Damit wäre ein fertiges Shape-Template erstellt.

Sämtliche Render-Funktionen sind im Viewmode nicht von Bedeutung, dort wird der Quelltext des Shapes ohne jede Beeinflussung durch die Render-Funktionen geliefert.

Wichtig: Um das äußerste HTML-Element darf kein weiterer HTML-Code existieren. Z.B. auch kein JavaScirpt-Script-Tag. Diese Elemente müssen immer innerhalb untergebracht werden, da ansonsten DOM-Operationen, wie z.B. das Verschieben, in CONTAILOR nicht korrekt funktionieren können.

War dieser Beitrag hilfreich?
2 von 2 fanden dies hilfreich.
Schade! Bitte teilen Sie uns doch mit was Ihnen nicht weitergeholfen hat.
Es ist ein technisches Problem aufgetreten. Bitte wenden Sie sich telefonisch oder per E-Mail an uns.