Module: sdw/templates/dnd/dndEditormanager

Dieses Modul definiert die Klasse dndEditormanager, eine Art multi-toggle-listbox-control. Der dndEditormanager stellt eine Anzahl von Spalten bereit, zwischen denen Objekte hin- und herbewegt werden können. Zur Zeit wird nur move sinnvoll unterstützt, auch wenn copy mit cmd+Mausklick funktioniert.

Die Anzahl Spalten und andere notwendige Eigenschaften werden über ein Metadatenobjekt namens this.dndContainer zur Verfügung gestellt, welches die abgeleiteten Klassen über setProperties() zur Verfügung stellen müssen.

Die Klasse unterstützt einen Filter, der die angezeigten Objekte in der jeweiligen Source unabhängig von der Groß- und Kleinschreibung filtert.

Basis ist das Dojo dnd Framework.

Source:
See:

Extends

Requires

Members

dndContainer

Properties:
Name Type Description
dndContainer Array.<Object>

Array von dndContainer-Metadaten. Muss von der abgeleiteten Klasse per setPproperties() gesetzt werden. Wird aber auch innerhalb dieser Klasse genutzt, um dndContainer-bezogene Metadaten zu verwalten, insb. einen Zeiger auf das source-Objekt, Referenzen auf GUI-Objekte zur Aktualisierung der Anzeige der Anzahl Items in der Source und einen Zeiger auf das ValidationTextBox falls es eines gibt.

Properties
Name Type Description
name String

Interner Name des Containers

label String

Anzeigename des Containers

accept Array.<String>

Array von Strings, die solche Status darstellen, die der Container akzeptiert

initial Array.<String>

Array von Strings, die solche Status darstellen, die ein Datenobjekt initial haben muss um in diesen Container einsortiert zu werden. Das erste Element des Arrays ist auch der default-Wert für den Status, der den ursprünglichen Status von hier reingedroppten Nodes überschreibt. Falls das nicht erwünscht ist, muss this.beforeDrop() überschrieben werden.

creator function

Name einer Funktion die visuelle Präsentation des Objektes und des Avatars erzeugt

hasFilter Boolean

Falls true wird eine ValidationTextBox eingeblendet, die den Inhalt der zugehörigen Source filtert

Source:

moduleName

Properties:
Name Type Description
moduleName String

Name des Moduls aus lokaler Konstante

Source:

statusTag

Properties:
Name Type Description
statusTag String

[default="status"] Tag in den Datenobjekten, flach, nicht eingeschachtelt, dessen Wert für die initial- und accept-Listen ausgewertet wird

Source:

store

Properties:
Name Type Description
Store dojo/store/Memory

Wird von der Methode initStore() initialisiert und gefüllt falls storeCommand gesetzt ist, ansonsten muee die abgeleitete Klasse den Store selber füllen.

Source:

storeCommand

Properties:
Name Type Description
storeCommand sdw/command

Wird von der abgeleiteten Klasse im Konstruktor gesetzt und dafür verwendet, den Store zu füllen.

Source:

topics

Properties:
Name Type Description
topics Array.<Object>

Array der dnd-Topics die subscribed sind um diese bei dispose wieder abzumelden. Das topics-Zeug wird nicht wirklich verwendet, die Subscriptions geben nur Meldungen auf der Konsole aus.

Source:

Methods

afterDrop(Quell-dndSource,, newNodes, copy, target)

Wird von der dnd-Source aufgerufen nachdem die nodes eingefügt werden sind. Kann von den abgeleiteten Klassen überschrieben werden. Diese Implementierung gibt nur Konsolenmeldungen aus.

Parameters:
Name Type Description
Quell-dndSource, dojo/dnd/Source

von der die Nodes gedraged werden

newNodes Array.<Object>

Die neu eingefügten Nodes. Da das ganze GUI-Zeug schon fertig ist, interessiert hier wieder der gesamte Node

Properties
Name Type Description
data Object

Das data-Objekt, das der Node in der creatorMethode mitbekommen hat. Muss in den abgeleiteten Klassen dokumentiert werden.

type Array.<String>

Der type-Array, den der Node in der creatorMethode mitbekommen hat.

copy Boolean

copy==true, move==false

target dojo/dnd/Source

Target-dndSource, in die die Nodes gedraged werden

Source:

beforeDrop(Quell-dndSource,, nodes, copy, target) → {Boolean}

Wird von der dnd-Source aufgerufen bevor die nodes eingefügt werden und also auch bevor die Creator-Methode läuft. Deshalb können abgeleitete Klassen diese Methode überschreiben um Änderungen am Store vorzunehmen, die sich innerhalb der Creator-Methode auf die neuen nodes auswirken soll. Diese Implementierung hier macht nichts anderes als den Status der neuen Nodes auf den default-Status der Source zu setzen. Falls diese Methode überschrieben wird muss die abgeleitete Klasse sicherstellen, dass das Ändern des StatussFlag hier, also beforeDop erfolgt. Das Ändern des StatusFlag nach dem Drop wird von der Source nicht mehr berücksichtigt!

Parameters:
Name Type Description
Quell-dndSource, dojo/dnd/Source

von der die Nodes gedraged werden

nodes Array.<Object>

Die gedraggten Nodes.

Properties
Name Type Description
data Object

Das data-Objekt, das der Node in der creatorMethode mitbekommen hat.

type Array.<String>

Der type-Array, den der Node in der creatorMethode mitbekommen hat.

copy Boolean

copy==true, move==false

target dojo/dnd/Source

Target-dndSource, in die die Nodes gedraged werden

Source:
Returns:

false==DragDropVorgang wird abgebrochen, true==weitermachen

Type
Boolean

constructor(args)

Der Konstruktor stellt alle Argumente innerhalb der Klasse unter this.argument zur Verfügung. Danach wird setProperties() aufgerufen um abgeleiteten Klassen nochmals Gelegenheit zu geben Eigenschaften zu setzen.

Parameters:
Name Type Description
args Object

Argumentobjekt

Source:

createGUI()

Baut das GUI anhand der Vorgaben aus dem dndContainer-Metadaten zusammen. Dafür wird der Array durchlaufen und für jedes Element

  1. Eine dndSource angelegt
  2. Dies source mit zusätzlichen Eigenschaften wie Name aus den Metadaten angereichert
  3. Der onDrop Handler so überschrieben, dass er zuerst this.beforeDrop() aufruft bevor die ursprüngliche Variante ausgeführt wird. Danach wird this.afterDrop() aufgerufen.
  4. Das MetadatenItem bekommt eine Eigenschaft "source" die auf das dndSource-Objekt zeigt
  5. Subscription der dnd-bezogenen Topics. Werden aber nicht wirklich verwendet, nur um Konsolenmeldungen auszugeben.
  6. Die Toolbarbuttons werden initialisiert, d.h. alle disabled
  7. Anzahl Optionen in alles Sourcen initial setzen durch Aufruf von this.updateStoreInfo()
Source:

creator(storeItem, hint) → {Object}

Baut die visuelle Darstellung des dnd-Items und des Avatars, also des beim Verschieben angezeigten Icons an. Sollte von den abgeleiteten Klassen überschrieben werden. Diese Implementierung zeigt den Label des storeItem mit einem einfachen Image davor. Die creator-Methode läuft im Scope der Source. Um Callbacks an diese Klasse machen zu können hat

  1. Der Source einen Zeiger auf diese Klasse namens delegate
  2. Haben die items einen Zeiger auf diese Klasse namens delegate

Vorsicht beim Überschreiben dieser Methode. Insbesondere die letzte Zeile muss zwingend so etas sein wie return { node: node, data: storeItem, type: [storeItem[this.delegate.statusTag]]};

  1. Jeder Node muss eine Eigenschaft "delegate" haben, die auf this.delegate, also diese Klasse zeigt
  2. Jeder Node muss eine Eigenschaft storeId haben, die auf die id des Nodes im store gesetzt wird. Achtung: Nicht id domID überschreiben, dann zickt das dnd!

Ggf. müssen auch htmlTemplates required werden.

Mindestens folgende Attribute müssen übergeben werden:

Parameters:
Name Type Description
storeItem Object

Das Item, wird durch eine Query aus dem Store zur Verfügung gestellt

Properties
Name Type Description
id UUID

Die id des Items im Store, nicht im Dom!

label String

Der Anzeigename des Items wie er auf der Oberfläche und im Avatar erscheinen soll

status String

Der Status des items entscheidet, in welche Source das item initial einsortiert wird und in welche anderen dndSourcen er gedroppt werden kann.

hint String

Leer oder "avatar". Entscheidet, ob der Avatar (sichtbar beim Verschieben) oder die normale Version (sichtbar in der Liste) gebaut wird.

Source:
Returns:

Das returnierte Objekt muss 3-wertig sein:

  1. node: Zeigt auf das div-Domobjekt für die graphische Darstellung
  2. data: zeigt auf das StoreItem
  3. type: Immer [storeItem[this.delegate.statusTag]] Also den Status des StoreItems an der Stelle, die von this.statusTag dafür vorgesehen ist
Type
Object

dispose()

Gibt die Resourcen dieser Instanz frei und ruft dann die Implementierung der Basisklasse auf Konkret wird hier der Store und die anderen hier definierten Objekte gelöscht, die GUI-Objekte räumt die Basisklasse auf. Wichtig: Die Subscriptions für die dnd-Topics löschen: array.forEach(this.topics, function(topic){topic.remove();});

Source:

initStore()

Wird vom Konstruktor aufgerufen falls die abgeleitete Klasse das storeCommand-Objekt gesetzt hat. Füllt den store mithilfe des storeCommand-Objektes und ruft dann createGUI() auf.

Source:

onDNDcancel()

Scbscription zum topic dndCancel. Wird nicht wirklich verwendet, gibt nur Konsolenmeldungen aus.

Source:

onDNDdrop()

Scbscription zum topic dndDrop. Wird nicht wirklich verwendet, gibt nur Konsolenmeldungen aus.

Source:

onDNDstart()

Scbscription zum topic dndStart. Wird nicht wirklich verwendet, gibt nur Konsolenmeldungen aus.

Source:

setProperties()

Gibt der abgeleiteten Klasse neben den Constructor args die Möglichkeit Eigenschaften der Basisklasse zu setzen. Wird vom Konstruktor der Basisklasse aufgerufen. Pure virtual, gibt lediglich eine Fehlermeldung aus falls diese Methode von der abgeleiteten Klasse nicht korrekt überschrieben wurde. Die abgeleitete Klasse muss mindestens folgende Properties setzen:

  1. this.storeCommand Ein sdw/command-Objekt das den Store füllt. Falls nicht, muss die abgeleitete Klasse alternativ this.store füllen
  2. this.store Alternativ zu this.storeCommand
Source:

updateStoreInfo()

Aktualisiert die hinter dem Namen des Stores angegeben Anzahl von Options.

Source: