Darstellung von Coach-Ansichten zur Designzeit konfigurieren

• Geben Sie eine Bilddatei an, die als Palettensymbol für Ihre Coach-Ansicht verwendet werden soll.
• Wenn die Benutzerschnittstelle der Coach-Ansicht durch HTML- oder JavaScript-Code und nicht durch andere Coach-Ansichten generiert wurde, geben Sie zusätzlich ein Layoutbild an, das zur Designzeit im Erstellungsbereich angezeigt wird.
• Wenn Sie die Coach-Ansicht zur Designzeit an ein verwaltetes Asset binden wollen, wählen Sie URL-Bindung verwenden aus. Die Bildsteuerelemente verwenden diese Einstellung beispielsweise, sodass sie das Bild anzeigen, an das sie im Process Designer-Erstellungsbereich gebunden sind.
• Wenn Ihre Coach-Ansicht eine Bezeichnung unterstützt, können Sie die Position der Bezeichnung im Erstellungsbereich einstellen, indem Sie die Position der Bezeichnung voranzeigen angeben. Als Position für die Bezeichnungen von Benutzerschnittstellenelementen (z. B. Schaltflächen) wird in der Regel die Option 'Zentriert' verwendet.
  1. Wenn Sie ein Layoutbild angegeben haben und für 'Position der Bezeichnung voranzeigen' die Option Zentriert definiert ist, wird das Layoutbild auf die Breite des Bezeichnungstexts vergrößert. Standardmäßig wird das ganze Bild vergrößert. Wenn Sie mit dem Process Designer-Desktopeditor arbeiten, können Sie die Teile des Bilds, die vergrößert werden sollen, in den Feldern für die Pixelkoordinaten angeben. Wenn Sie in diesen Feldern Werte angeben, erstreckt sich das Bild nur von x1 bis x2 und y1 bis y2.
  2. Wenn Sie den Process Designer-Webeditor verwenden und eine HTML-Snippetdatei und/oder die Helper JS-Datei angegeben haben, dann überschreibt Code zum Positionieren der Bezeichnung, der in diesen Dateien angegeben wird, den Wert, der für 'Position der Bezeichnung voranzeigen' angegeben wurde.

Der Webeditor von Process Designer bietet weitere erweiterte Optionen für die Konfiguration der Darstellung Ihrer Coach-Ansichten zur Designzeit. Bei Verwendung von HTML- und JavaScript-Code können Ihre Coach-Ansichten zur Designzeit so dargestellt werden, wie sie auch zur Laufzeit aussehen. Somit können sich auch Schnittstellenentwickler besser vorstellen, wie ihre Coach-Ansichten später für die Anwendungsbenutzer aussehen werden. In manchen Fällen kann genau derselbe Code, der für die Laufzeit-Coach-Ansicht verwendet wird, auch für den Coach-Erstellungsbereich genutzt werden.

• Das einfachste Verfahren, bei dem die Darstellung von Coach-Ansichten zur Designzeit das Aussehen zur Laufzeit präzise wiedergeben kann, greift auf ein HTML-Snippet zurück. Das HTML-Snippet wird als verwaltetes Asset hochgeladen und dann im Abschnitt für die erweiterte Vorschau im Editor für Coach-Ansichten ausgewählt. Diese Datei muss eine HTML-Datei mit einem Snippet sein, das die Ansicht darstellt.
  1. Erstellen Sie ein HTML-Snippet. Diese Datei muss eine HTML-Datei mit einem Snippet sein, das die Ansicht darstellt. Beispiel:

     <div>
     <button class="DesignLabel"></button>
     </div>

     Das HTML-Snippet bietet verschiedene Funktionen, mit denen Inhaltsfelder und Bezeichnungen korrekt platziert werden können.

     Class: DesignLabel

     Diese Klasse wird in dem HTML-Element platziert, das die Bezeichnung darstellt, wenn die Coach-Ansicht eine Bezeichnung unterstützt. Der Editor platziert die Zeichenfolge für die Bezeichnung im inneren HTML-Inhalt dieses Elements. Ein Snippet kann mehrere Bezeichnungen haben und die Bezeichnung wird auf alle Elemente angewendet und bei allen Elementen aktualisiert.

     Class: DesignContentBox

     Diese Klasse wird verwendet, um anzugeben, wo ein deklariertes Inhaltsfeld in der Vorschau angeordnet werden soll. Wenn diese Klasse verwendet wird, muss für das Element auch das Attribut data-designContentBoxID definiert sein. Dieses Attribut sollte auf die Steuerelement-ID des deklarierten Inhaltsfelds eingestellt werden. Wenn mehrere Inhaltsfelder deklariert werden, kann jedes eine eindeutige Platzierung in der HTML-Vorschau erhalten. Wenn ein Inhaltsfeld im Layout der Coach-Ansicht deklariert wird, sich in der HTML-Schablone aber kein 'div' mit der Klasse DesignContentBox und entsprechender data-designContentBoxID befindet, platziert der Editor die Inhaltsfeldinstanz an das Ende der Ansichtswiedergabe.

     Anmerkung: Die Design*-Klassennamen sind für den Editor reserviert. Snippets dürfen keine Klassen verwenden, die mit diesem Muster übereinstimmen. Entsprechend müssen die data-design*-Attributnamen vermieden werden.
     Im Folgenden finden Sie ein Beispiel für ein HTML-Snippet:

     <div>
     <h2 class="DesignLabel"></h2>
     <div class="DesignContentBox" data-designContentBoxID="ContentBox1">
     </div>

  2. Fügen Sie externe Dateien zu Ihrer Prozessanwendung oder ihrem Toolkit hinzu (siehe Verwaltete Dateien hinzufügen).
  3. Wählen Sie im Abschnitt 'Erweiterte Vorschau' der Registerkarte 'Überblick' der Coach-Ansicht die Datei aus, die das HTML-Snippet enthält.
• Wenn ein HTML-Snippet alleine nicht die gewünschte Vorschau zur Designzeit ermöglicht, können Sie auch eine verwaltete Datei angeben, die einen JavaScript-Handler enthält.

  Ein JavaScript-Handler ermöglicht die Bearbeitung des Designzeit-DOM, um auf Modelländerungen zu reagieren. Der JavaScript-Handler kann zusammen mit einem HTML-Snippet verwendet werden oder er kann die gesamte Vorschau alleine handhaben.

  Der JavaScript-Handler besteht aus einer JavaScript-Datei mit definiertem mixObject. Das mixObject kann eine oder mehr Funktionen implementieren, die der Editor während des Editorlebenszyklus aufruft. Sie können außerdem zusätzliche Funktionen definieren, aber die Namen müssen das Präfix coachViewImpl haben. Beispiel: coachViewImpl_calcValue(). Wenn Sie zusätzliche Informationen zu this speichern möchten, sollten diese im Objekt this.context.coachViewData platziert werden. Sowohl die Konvention für die Funktionsbenennung als auch die Speicherposition der Instanzvariable dienen dazu, Konflikte in zukünftigen Produktversionen zu verhindern.

  Das folgende Beispiel zeigt einen einfachen JavaScript-Handler, der eine Vorschaubezeichnung und ein Bild für eine Schaltfläche bereitstellt.

  var mixObject = {
  	createPreview: function(containingDiv, labelText, callback) {
  		require([ "dojo/dom-construct"], this.lang.hitch(this, function(domConstruct){
  			var buttonDiv = domConstruct.create("div");
  			domConstruct.place(buttonDiv, containingDiv);
  			var button = domConstruct.create("button");
          	
  			domConstruct.place(button, buttonDiv);
  			this.context.coachViewData.labelTextDom = document.createTextNode(labelText);
  			button.appendChild(this.labelTextDom);
  			callback();
  		}));	
  	},
  	propertyChanged: function(propertyName, propertyValue) {
  		if(propertyName=="@label" && this.context.coachViewData.labelTextDom){
  			this.context.coachViewData.labelTextDom.data = propertyValue;
  		}
  	},
  };

  Weitere Informationen zu den APIs für die Vorschau zur Designzeit finden Sie in Ereignishandler für Vorschau der Coach-Ansicht zur Designzeit.