JustRelate

Aktionen anbieten

Sie können Redakteuren in der integrierten Vorschau Menübefehle oder registrierte Assistenten zur Ausführung oder die Bearbeitung einzelner Felder anbieten.

Eine Aktion erscheint in der Vorschau als Link, dessen Aussehen Sie beeinflussen können, indem Sie ein Icon oder HTML-Text angeben. Haben Sie weder ein Icon noch HTML-Code angegeben, wird das konfigurierte Icon bzw. der lokalisierte Titel der Aktion verwendet. Der folgende Screenshot zeigt, wie mit dieser Funktionalität Menüeinträge von einem Redakteur umsortiert werden können:

Die Aktionen, die ausgelöst werden, wirken auf die Datei, in deren Kontext sie definiert sind. Dadurch ist es zum Beispiel möglich, in einer generierten Inhaltsübersicht die aufgelisteten Dateien zu bearbeiten.

Bearbeitungselemente (so genannte Marker) werden auch für Spiegeldateien angeboten. Diese wirken sich auf die jeweiligen Originaldateien aus.

Es gibt zwei Typen von Markern: action marker (ActionMarker), mit denen Menübefehle oder Assistenten ausgeführt werden können, sowie edit marker (EditMarker) zur Bearbeitung von Feldwerten.

Syntax

<npsgui insertMarker="Typ" name="Name" icon="Icon-Datei">HTML-Code</npsgui>

Parameter

  • Typ: Gibt den Typ des einzufügenden Links an:
    • item: Mit dem eingefügten Link kann ein Menübefehl oder ein Assistent ausgeführt werden (action marker).
    • attribute: Mit dem eingefügten Link kann ein Feldwert bearbeitet werden (edit marker).
  • Name: Ist Typ gleich item, so ist dies die ID einer registrierten Aktion. Wenn Typ gleich attribute ist, gibt Name den Namen des Feldes an, das zur Bearbeitung angeboten werden soll.
  • Icon-Datei: Ist der Dateiname eines Icons im Schemaverzeichnis der GUI-Webapplikation. Die Größe des Icons sollte 31×31 Pixel betragen. Dieser Parameter ist optional.
  • HTML-Code: Der HTML-Code, der verlinkt werden soll, damit die Aktion ausgelöst werden kann. Der Text hat gegenüber einem eventuell ebenfalls angegebenem Icon Vorrang. Auch HTML-Code ist optional.

Beispiel

Das im obigen Screenshot gezeigte Bearbeitungselement, mit dem ein Menüeintrag nach oben verschoben werden kann, wird durch den folgenden Code erzeugt:

<npsgui insertMarker="item" name="changeSortOrder" objId1="@{_previous}" objId2="@{self}">
  <img src="ressourcen/icons/inlinePreview/sortUp.gif" title="nach oben" />
</npsgui>

Assistenten parametrisieren

Wenn Sie einen Link, mit dem ein Assistent ausgeführt werden kann, in die integrierte Vorschau einbinden, können Sie dem Assistenten Parameter übergeben. Um beispielsweise den Assistenten zur Bearbeitung eines bestimmten Feldes einzubinden, geben sie das zusätzliche Tag-Attribut attributeName an:

<npsgui insertMarker="item" name="attributeEditWizard" attributeName="Name">Name bearbeiten</npsgui>

Alle Tag-Attribute bis auf insertMarker, name, icon und context werden zu den Parametern des Assistenten hinzugefügt. Den Parameternamen wird wizard. vorangestellt, so dass der Assistent beispielsweise auf attributeName unter wizard.attributeName zugreifen kann.

Edit-Marker dynamisch positionieren

Um störende Auswirkungen der angezeigten Marker auf das Layout zu minimieren, gibt es ab Version 6.7.1 die Möglichkeit, Marker vom Typ attribute dynamisch zu positionieren. Das GUI stellt die Marker dann nicht mehr an Ort und Stelle dar, sondern platziert an den betreffenden Stellen nur noch span-Elemente, die als Anker fungieren. Die Bearbeitungselemente selbst werden in unsichtbaren Containern platziert und bei der Anzeige mit Hilfe von JavaScript positioniert und sichtbar gemacht. Dabei wird das jeweilige Bearbeitungselement über den zu bearbeitenden Inhalt gelegt:

Diese Form der Positionierung funktioniert nicht mit Inhalten, die mit Hilfe von JavaScript ein- oder ausgeblendet werden (etwa JavaScript-Menüs).

Um Marker dynamisch zu positionieren, geben Sie das Attribut placeWithJS mit dem Wert true an:

<npsgui insertMarker="attribute" placeWithJS="true" … />

Bitte beachten Sie, dass dynamisch positionierte Marker nicht aus individuellem HTML-Code bestehen können. Auch kann das dargestellte Icon nur über das Darstellungsschema und nicht über das Attribut icon geändert werden.

Um die dynamische Positionierung zu verbessern oder Effekte (wie Hervorhebung) auf den zu bearbeitenden Inhalt anwenden zu können, kann das npsgui-Element den zu bearbeitenden Inhalt umschließen. Das GUI wird das Anker-span-Element dann ebenfalls um den Inhalt positionieren:

<npsgui … placeWithJS="true"><npsobj insertvalue="var" name="title" /></npsgui>

Mit dem Attribut containerTag können Sie ein alternatives Ankerelement festlegen, wenn span nicht zulässig sein sollte (beispielsweise weil der umschlossene HTML-Code Blockelemente enthält):

<npsgui … placeWithJS="true" containerTag="div"><p>…</p></npsgui>

Marker-Darstellung anpassen

Die Darstellung dynamisch positionierter Marker lässt sich mit Hilfe von JavaScript beeinflussen. Das folgende Beispiel zeigt, wie Marker durchscheinend dargestellt werden und der zu bearbeitende Inhalt hervorgehoben wird, wenn die Maus über dem Marker schwebt.

Dynamisch positionierter Marker

Für diese Effekte können entweder die JavaScript-Bibliotheken Prototype und Scriptaculous oder jQuery verwendet werden. Diese müssen jeweils als Inhalte im CMS vorliegen und im head-Bereich der HTML-Seiten eingebunden werden. Der folgende Auszug aus einer Layout-Datei stellt den erforderlichen Code in diesem Bereich zur Verfügung.

<!-- Variante mit Protoype und Scriptaculous -->

<npsgui>
  <script type="text/javascript" language="JavaScript"
    src="/javascripts/prototype.js"></script>
  <script type="text/javascript" language="JavaScript"
    src="/javascripts/scriptaculous.js?load=effects"></script>

  <script type="text/javascript">

  /****************************************/
  /* Hilfsfunktionen für die Hervorhebung */

  function rememberHighlightingStyle(myElement)
  {
    myElement.rememberBackgroundColor = myElement.getStyle('backgroundColor');
    myElement.rememberZoom = myElement.getStyle('zoom');
    myElement.rememberColor = myElement.getStyle('color');
  }

  function highlight(myElement)
  {
    // setting the zoom works around incomplete redraws on ie6
    myElement.setStyle({
      backgroundColor: '#ffffaa',
      zoom: 1,
      color: '#000000'
    });
  }

  function startHighlighting(myElement)
  {
    rememberHighlightingStyle(myElement);
    highlight(myElement);
  }

  function stopHighlighting(myElement)
  {
    myElement.setStyle({
      backgroundColor: myElement.rememberBackgroundColor,
      zoom: myElement.rememberZoom,
      color: myElement.rememberColor
    });
  }

  /******************************************************/
  /* Funktion zum Positionieren und Anpassen der Marker */

  function placeEditMarker(marker, anchor, offsetLeft, offsetTop)
  {
    marker.onmouseover = function() {
      new Effect.Opacity(this, { from: 0.3, to: 1.0, duration: 0.3 });
      anchor.descendants().each(function(e) { rememberHighlightingStyle(e) });
      anchor.descendants().each(function(e) { highlight(e) });
      return startHighlighting(anchor);
    };
    marker.onmouseout = function() {
      new Effect.Opacity(this, { from: 1.0, to: 0.3, duration: 0.3 });
      anchor.descendants().each(function(e) { stopHighlighting(e); });
      return stopHighlighting(anchor);
    };
    new Effect.Opacity(marker, { from: 1.0, to: 0.3, duration: 0 });
    nps.editMarker.placeEditMarker(marker, anchor, offsetLeft, offsetTop);
  }
  </script>
</npsgui>


<!-- Variante mit jQuery -->

<npsgui>
  <script type="text/javascript" language="JavaScript"
    src="/javascripts/jquery.js"></script>

  <script type="text/javascript">

  /****************************************/
  /* Hilfsfunktionen für die Hervorhebung */

  function rememberHighlightingStyle(myElement)
  {
    myElement.rememberBackgroundColor = $(myElement).css('backgroundColor');
    myElement.rememberZoom = $(myElement).css('zoom');
    myElement.rememberColor = $(myElement).css('color');
  }

  function highlight(myElement)
  {
    // setting the zoom works around incomplete redraws on ie6
    $(myElement).css({backgroundColor: '#ffffaa', zoom: 1, color: '#000000'});
  }

  function startHighlighting(myElement)
  {
    rememberHighlightingStyle(myElement);
    highlight(myElement);
  }

  function stopHighlighting(myElement){
    $(myElement).css({
        backgroundColor: myElement.rememberBackgroundColor,
        zoom: myElement.rememberZoom,
        color: myElement.rememberColor
    });
  } 

  /******************************************************/
  /* Funktion zum Positionieren und Anpassen der Marker */

  function placeEditMarker(marker, anchor, offsetLeft, offsetTop)
  {
    marker.onmouseover = function() {
        $(this).fadeTo("slow", 1);
        $(anchor).find(":visible").each(function(i) {
            rememberHighlightingStyle(this)
        });
        $(anchor).find(":visible").each(function(i) {
            highlight(this)
        });
        return startHighlighting(anchor);
    };
    marker.onmouseout = function() {
        $(this).fadeTo("slow", 0.3);
        $(anchor).find(":visible").each(function(i) {
            stopHighlighting(this);
        });
        return stopHighlighting(anchor);
    };
    $(marker).fadeTo(1, 0.3);
    nps.editMarker.placeEditMarker(marker, anchor, offsetLeft, offsetTop);
  }
  </script>
</npsgui>

Falls die JavaScript-Funktion placeEditMarker definiert ist, ruft das GUI sie auf, um die Marker zu positionieren. Andernfalls ruft das GUI zu diesem Zweck die interne JavaScript-Funktion nps.editMarker.placeEditMarker auf.

Die Parameter marker und anchor sind die HTML-Elemente des Markers bzw. dessen Anker. Die Parameter offsetLeft und offsetTop enthalten Werte, mit denen die errechnete Position korrigiert werden kann. Sie können als Attribute im npsgui-Element angegeben werden:

<!-- Marker 10px nach unten und 20px nach links verschieben -->
<npsgui … placeWithJS=" true" offsetTop="10" offsetLeft="-20">…</npsgui>

Positive Werte für offsetTop verschieben die Position nach unten und negative nach oben. Analog dazu verschieben positive Werte für offsetLeft die Position nach rechts und negative nach links.

© JustRelate Group GmbH · 2024