Module: sdw/templates/inline/editor

Dieses Modul definiert die Klasse Editor, eine abstrakte Basisklasse für Inline-Editoren. Editor ist die Basisklasse für alle datentypspezifischen Inline-Editoren. Inline bedeutet, dass sich der Editor innerhalb der HMTL-Seite, in der der zu bearbeitende Wert steht, öffnet, sich nach der Bearbeitung wieder schließt und auf der HTML-Seite der ggf. geänderte Wert zurückbleibt.

Die Klasse EditorMetadata stellt die notwendigen Metadaten zur Verfügung.

Die Klasse Editormanager managed die einzelnen Editoren.

Author:
  • sdw.systems
Source:
See:
  • sdw/templates/inline/editorMetadata
  • sdw/templates/inline/editormanager

Requires

Members

(private) autoInvoke

Source:

(private) autoShow

Source:

beforeImage

Properties:
Name Type Description
beforeImage Object

Objekt, wird sofort nach Start des Editor mit getBeforeImage() auf den Wert vor dem Editieren gesetzt um im Cancel-Fall zurücksetzen zu können

Source:

(private) dataItem

Source:

(private) debug

Source:

divEditor

Properties:
Name Type Description
divEditor Object

Dom-Objekt, div, welches den Editor umschließt

Source:

divEditorWrapper

Properties:
Name Type Description
divEditorWrapper Object

Dom-Objekt, div, welches den gesamten Editor unde den Wert einschließt

Source:

(private) divEditorWrapperWidth

Source:

divEinheit

Properties:
Name Type Description
divEinheit Object

Dom-Objekt, div, welche nur dann instantiiert wird wenn in den Editormetadaten ein Einheiten-Array angegeben wurde. Die abgeleitete Klasse ist dafür verantwortlich die Einheiten in diesem div darzustellen. Macht bisher nur für den numberSpinnerEditor Sinn.

Source:

divGUIObjectsWrapper

Properties:
Name Type Description
divGUIObjectsWrapper Object

Dom-Objekt, div, welches alle GUI-Elemente des Editors umschließt

Source:

divValue

Properties:
Name Type Description
divValue Object

Dom-Objekt, div, welches den Wert vor und nach dem Editieren im innerHTML-Bereich anzeigt

Source:

(private) domId

Source:

(private) editormanager

Source:

(private) hasFocus

Source:

(private) hasOkAndCancelButtons

Source:

(private) metadata

Source:

(private) metadataItem

Source:

moduleName

Properties:
Name Type Description
moduleName String

Name des Moduls aus lokaler Konstante

Source:

(private) newObject

Source:

objektInstanzOID

Properties:
Name Type Description
objektInstanzOID OID

OID des Objektes in Baum falls es sich um ein treeContainerView handelt

Source:

Methods

cancel(setBeforeImage)

Cancel wird aufgerufen wenn der Nutzer auf Abbrechen klickt oder wenn der Nutzer auf OK klickt, es aber keine Änderungen gegeben hat, d.h. this.hasBeenUpdated()==false ist. Diese Methode sollte nicht überschrieben werden denn sie ist generisch ausgelegt. Standardmäßig werden hier ein paar Aufräumaktionen gemacht und dann der Editor unsichtbar sowie der die permanente Ansicht wieder sichtbar gemacht. Falls das nicht gewünscht ist kann mit der Option setBeforeImage angegeben werden, dass die permanente Ansicht erneut mit dem beforeImage überchrieben werden soll.

Parameters:
Name Type Description
setBeforeImage Boolean

Flag, das anzeigt, ob das beforeImage expliziet erneut in das Dom geschrieben werden soll.

Source:

clear()

Clear ist eine Convenience-Methode für den Nutzer um Editoren, die nicht verpflichtende Attribute zur Bearbeitung anbieten, mit einem Klick auf den Clear-Btton zu löschen und den Editor zu schließen. Der Clear-Button wird natürlich nur dann angezeigt, wenn das korrespondierende EditorMetadata-Objekt required explizit auf false setzt. Da dieser Vorgang auch manuell innerhalb des EditAll-Szenarios angestoßen werden kann ruft clear nach dem Löschen des Wertes immer ok() mit storeAPI==true auf. Somit wird die Löschung ddirekt an die API propagiert. Andernfalls würde die Löschung nicht persistent gemacht werden, da der Editor ja schon geschlossen ist und beim "saveall" nicht mehr berücksichtigt werden würde.

Source:

constructor(args)

Der Konstruktor stellt alle Argumente innerhalb der Klasse unter this.argument zur Verfügung.

Parameters:
Name Type Description
args Object

Argumentobjekt

Properties
Name Type Description
debug Boolean

Debugflag

editorMetadata module:sdw/templates/inline/editorMetadata

EditorMetadata-Objekt, beschreibt die zu bearbeitenden Daten in Bezug auf Datentyp, zu verwendende Editoren, readonly usw.

dataItem Object

JSON-Fragment, die zu bearbeitenden Daten

editormanager module:sdw/templates/editormanager

Zeiger auf den Editormanager, der diesen Editor verwaltet.

autoInvoke Boolean

[default true] Der Editor ruft sich selber im Konstruktor auf. Bei false muss invoke() explizit aufgerufen werden.

autoShow Boolean

[default true] Der Editor verliert sein hidden-Attribut automatisch im Konstruktor. Bei false muss showEditor() explizit aufgerufen werden.

divEditorWrapperWidth String

[optional, default="400px"] Breite des Editorfeldes im Format "400px"

hasOkAndCancelButtons Boolean

[optional, default=true] Gibt an, ob der Editor separate ok- und cancel-Buttons hat. Das ist im SingleEditorModus so, im EditAllModus hat kein Editor separate Controls sondern die Buttons des containerViews steuern ok und cancel für alle Editoren zusammen.

hasFocus boolean

[optional, default=true] Im Einzeleditormodus ist hasFocus==true, d.h. wenn der Editor die setFocus()-Methode überschrieben hat wird der Focus auf ihn gesetzt. Im EditAllModus wird hasFocus==false gesetzt, nur der erste Editor hat hasFocus==true

newObject Boolean

[optional, default=false] newObject==true bedeutet, dass es sich bei dem zu editierenden Objekt um ein neues Objekt handelt. Das entscheidet darüber, ob diejenigen Editoren, die in ihrem Metadatenbereich ein alert-Tag gesetzt haben, dieses aktivieren oder nicht. Ein neues Objekt wird immer nur als Template mit Defaultwerten bestückt, so dass das Ändern von Attributen nie eine durch alert beschriebene Rückfrage auslösen sollte.

Source:

createGUIObjects() → {Object}

Gibt einen DomNode zurück, der einen Wrapper um das gesamte spezifische GUI des Editors bildet Muss von den abgeleiteten Klassen überschrieben werden, die hier implementierte Methode gibt nur eine Fehlermeldung aus.

  1. DomNode bauen mit this.createGUIObjectsWrapperDiv
  2. anach die anderen Objekte in den DomNode einhängen
  3. Eigene Properties von GUI-Objekten ggf. mit den Metadatenproperties mergen like so:
  4. var props={value:this.beforeImage, id:Util.createUniqueDomId(), trim:true};
  5. this.dijitControl=new DijitControl(lang.mixin(this.metadataItem.editorArgs, props));
Source:
Returns:

DomNode

Type
Object

createGUIObjectsWrapperDiv() → {Object}

Gibt einen GUIObjectsWrapperDiv-DomNode zurück. Convinience. Darf nicht überschrieben werden. Erzeugt einen einfachen div mit den richtigen styles und Klassennamen.

Source:
Returns:

DomNode

Type
Object

displayEinheit(Das)

Zeigt die Einheit (Dimension) des Datums an, falls das in den Editormetadaten definiert ist. Diese Methode wird von dieser Basisklasse nur einmal aufgerufen, und zwar als vorletzte Aktion in invoke bevor setFocus() aufgerufen wird. Die abgeleitete Editorklasse muss sich darum kümmern, dass die Einheit in Abhängigkeit der Werteänderung zwischen Singular und Plural wechselt.

Parameters:
Name Type Description
Das Number

beforeImage beim initialen Aufruf hier in der Basisklasse oder der neue Wert des onChange-Events eines numerischen Editor. Zeigt die Einheit korrekt im Singgular oder Plural an.

Source:

dispose()

Wird von Editor selber aufgerufen, und zwar von ok und cancel. Gibt die Ressourcen frei und ruft als letzte Aktion die dispose-Methode des EditorManagers auf, damit dieser diesen Editor aus der Liste der Editoren löschen kann. Diese Methode sollte von den abgeleiteten Klassen sorgfältig überschrieben werden, um editorspezifische dijit-GUI-Objekte sauber mit destroyRecursice zu löschen. Allerdings MUSS diese Methode in den überschriebenen Varianten als letzter Aufruf stehen, also this.inherited(arguments) muss die letzte Zeile der überschriebenen Methode sein.

Source:

getAfterImage()

Muss von den abgeleiteten Klassen überschrieben werden. Diese Implementierung gibt lediglich eine Fehlermeldung aus. Gibt den Wert des Editors nach der Bearbeitung zurück

Source:

getAfterImageForUpload()

Sollte von den abgeleiteten Klassen überschrieben werden Wird von der itemEditorKlasse aufgerufen kurz vor dem Beenden des Editors.

Source:

getBeforeImage()

Sollte von den abgeleiteten Klassen überschrieben werden. Diese Implementierung gibt entweder einen Label oder das ganze DataItem als beforeImage zurück. Gibt den Wert des Objektes vor der Änderung zurück, so wie er im Control angezeigt wird Wird beim Initialisieren aufgerufen und speichert das beforeImage in der Eigenschaft this.beforeImage

Source:

getObjektInstanzOID()

Zurückgegeben wird die OID des zentralen zu bearbeitenden Objektes, also die OID des DataItems das der Editormanager bereitstellt. Das ist im allgemeinen die OID des treeItems das angeklickt wurde. Bei tabellenwertigen Objekten muss das aber nicht sein, da es im Baum auch Menüknoten ohne OID gibt die die abhängigen Objekte im Editor anzeigen. Solche Editoren müssen diese Methode überschreiben um die passende OID des zentralen Objektes zu finden, siehe z.B. toggleListEditor

Source:

hasBeenUpdated() → {Booleam}

Sollte von den abgeleiteten Klassen überschrieben werden. Gibt zurück, ob der Wert geändert wurde. Kann oft in dieser Implementierung wiederverwendet werden, da als Ergebnis der Vergleich von before- und afterImage verwendet wird

Source:
Returns:

true falls Änderungen am Datenobjekt vorgenommen worden sind, sonst false

Type
Booleam

hideMessage()

Löscht die Meldungszeile und setzt sie dann auf unsichtbar falls sie sichtbar ist.

Source:

invoke()

Ruft den Editor auf.

Source:

isValid() → {Boolen}

Sollte von den abgeleiteten Klassen überschrieben werden, diese Implementierung gibt immer true zurück Prüfroutine, die true zurück gibt wenn der neue Wert nach dem Editieren valide ist. Nur in dem Fall kann der Editor mit OK geschlossen werden, ansonsten müssen die invaliden Eingaben geändert oder der Editor mit Cancel geschlossen werden. Wird von ok() aufgerufen und führt bei false zum Abbruch von ok.

Source:
Returns:

true wenn alle offenen Controls valide sind, sonst false.

Type
Boolen

ok(updateAPI)

Der Editor wurde mit Click auf OK geschlossen oder der BearbeiteAlleModus wude mit AllesSpeichern beendet, so dass diese Methode für alle Editoren aufgerufen wird. Diese Methode sorgt dafür, dass

  1. Geprüft wird, ob das Datenobjekt wirklich geändert wurde. Wenn nicht, wird abgebrochen und cancel aufgerufen
  2. Geprüft wird, ob das Ergebnis der Bearbeitung valide ist. Wenn nicht, wird abgebrochen und cancel aufgerufen
  3. Eine Abfrage an den Nutzer gestellt wird, falls das Metadatenobjekt ein alert-Tag aufweist, ob die Änderung wirklich gewollt ist. Dies kommt aber nur zum Tragen, wenn das newObject-flag nicht true ist, denn neue Objekte werden als Templates immer nur mot Defaultwerten gefüll die immer ohne Bestätigung änderbar sein sollen. Wenn nicht, wird abgebrochen und cancel aufgerufen. Wenn alles OK ist:
  4. Der geänderte Wert wird durch Aufruf der Methode setAfterImage() auf der Oberfläche angezeigt.
  5. Die Änderungen werden durch die Methode getAfterImageForUpload() ermittelt und an den editormanager propagiert, wobei das Flag updateAPI durchgeschleift wird.
  6. Die Metadaten werden angepasst um den neuen Zusatnd widerzugeben
  7. Der Editor wird auf unsichtbar geschlaltet und dann durch Aufruf der Methode dispose() zerstört. Dispose sollte von den abgeleiteten Klassen überschrieben werden, um spezielle dijit/GUI-Objekte durch Aufruf von destroyRecursive() zu löschen. Danach muss die Implementierung der Superklasse (also editor.dispose() aber unbedingt aufgerufen werden, durch this.inherited(arguments).
Parameters:
Name Type Description
updateAPI Boolean

Flag, das anzeigt, ob der geänderte Wert sofort mit einem separaten Update-Call an die API gesendet werden soll oder nicht. Erster Fall tritt ein, wenn der Editor im SingleEditModus durch Klick auf seinen Label aktiviert worden ist. In dem Fall hat der Editor ok- und cancel-Buttons, die Änderung ist auf das Datenobejkt dieses Editors beschränkt und soll sofort zum Server propagiert werden, also ist updateAPI==true. Im EditAllModus sollen die Änderungen aller Editoren gesammelt und zusammen in einem einzigen Update-Call an den Server gesendet werden. In diesem Fall ist updateAPI==false, der EditorManager sorgt dafür, dass nach Beendigung aller Editoren alle geänderten Werte in einem einzigen API-Call zum Server gesendet werden.

Source:

setAfterImage()

Sollte von den abgeleiteten Klassen nicht überschrieben werden Setzt den Wert des Editors nach der Änderung in das GUI (divValue) Diese Implementierung setzt this.divValue.innerHTML auf das Ergebnis von this.getAfterImage(), was wohl in vielen Fällen OK ist.

Source:

setBeforeImage()

Kann von den abgeleiteten Klassen überschrieben werden.
Setzt den sichtbaren Wert im valueDiv. Wird nur aufgereufen bei cancel(true)

FIXME OBSOLET, komplett rausschmeißen!
Wird bei cancel aufgerufen
Source:

setFocus()

Setzt den Focus in den geöffneten Editor Kann von den abgeleiteten Klassen überschrieben werden oder in der hier implementierten Variante verwendet werden, die nichts macht. Falls diese Methode überschrieben wird ist es eine gute Idee mit window.setTimeout(function(){myDomNode.focus();, 10)); zu arbeiten

Source:

setNull()

Sollte von den abgeleiteten Klassen überschrieben werden. Diese Methode kann nur dann im GIU aufgerufen werden, wenn das korrespondierende EditorMetadatenobjekt required==false gesetzt hat. Setzt den Wert auf null / leer / kein Eintrag / ... zurück

Source:

setValue(value)

Sollte von den abgeleiteten Klassen überschrieben werden. Diese Methode ändert den Wert des Editors wenn dieser offen ist programmatisch. Kommt wohl nicht so oft vor

Parameters:
Name Type Description
value Object

Der neue Wert, den der offene Editor annehmen soll

Source:

showMessage(Der)

Blendet die Meldungszeile ein falls sie unsichtbar ist und setzt den Inhalt auf die übergebene Meldung

Parameters:
Name Type Description
Der String

meldungsrexr der angezeigt werden soll

Source: