Das Grundgerüst eines Visuelements (VSE) besteht aus folgenden Abschnitten (die Reihenfolge der einzelnen Abschnitte ist unerheblich):
[DEF]: Deklarationen (z.B. Name, diverse Defaultparameter, etc.)
[PROPERTIES]: Definition des Eigenschaften-Dialogs zur Bearbeitung der Parameter im Visueditor
[ACTIVATION.PHP]: optionales Script (PHP), das bei der Projekt- oder Visuaktivierung angewendet wird
[EDITOR.JS]: Script (JS ) für die Darstellung des Visuelements im Visueditor
[EDITOR.PHP]: optionales Script (PHP) zur Ermittlung diverser Parameter im Visueditor (z.B. Name einer Zeitschaltuhr)
[VISU.JS]: Script (JS) für die Darstellung/Funktionalität des Visuelements in der Visualisierung
[VISU.PHP]: Script (PHP) für die Darstellung/Funktionalität des Visuelements in der Visualisierung
[SHARED.JS]: optionales Script (JS) für die Verwendung im Visueditor und(!) in der Visualisierung (ähnlich einer Inklude-Datei)
[HELP]: Hilfe
Hinweis:
Die vollständige Syntax zur Definition eines Abschnitts folgt dabei diesem Schema: z.B. ###[DEF]### ... ###[/DEF]###
Wichtig:
Sämtliche Inhalte (insb. Scripte) müssen mit größter Sorgfalt implementiert werden, es erfolgt keine Überprüfung auf eine korrekte Syntax! Fehlerhafte Scripte können den Visueditor oder die Visualisierung zum Absturz bringen!
Der String "VSEID" (Platzhalter, nur Großbuchstaben) wird in der gesamten VSE-Datei durch die tatsächliche ID des Visuelements (definiert durch den Dateinamen) ersetzt und darf daher nicht willkürlich verwendet werden.
Abschnitt [DEF]
Hier werden der Name des VSE und sämtliche Parameter bzw. Eigenschaften definiert.
Die folgenden Eigenschaften repräsentieren einige Parameter in der linken Spalte des Dialogs Visuelement bearbeiten***1002 (allgemeine und spezifische Eigenschaften):
name: Name des VSE (zwingend erforderlich, max. 40 Zeichen)
(folderid: nur für System-VSE erforderlich und zulässig)
xsize/ysize: Defaultgröße in Pixeln
text: Defaulttext für "Beschriftung" (sofern "flagText"=1 ist (s.u.), ansonsten wird diese Angabe ignoriert)
var1..20: Defaultwerte für die "Spezifischen Eigenschaften"
jedes Visuelement verfügt über max. 20 individuelle Parameter (var1..20), die jeweils max. 20 Zeichen enthalten können
diese Parameter können ggf. im Abschnitt [PROPERTIES] vom Nutzer angepasst werden (z.B. eine bestimmte Eigenschaft oder die Auswahl einer konfigurierten Zeitschaltuhr)
Wichtig: Jeder genutzte Parameter (var1..20) muss deklariert werden, ansonsten kann es zu unvorhersehbaren Problemen kommen!
ggf. ist zusätzlich die Angabe einer ID in der Form "#root=..." erforderlich:
diese ID repräsentiert einen Datensatz in der DB "edomiProject.editRoot"
die ID muss prinzipiell im Bereich 1..999 liegen und definiert die Datenbank-Tabelle auf die der Parameter (var1..20) referenziert ist
Beispiel:
der Nutzer soll im Dialog "Visuelement bearbeiten" eine konfigurierte Zeitschaltuhr auswählen können
"var1" soll die ID der vom Nutzer ausgewählten konfigurierten Zeitschaltuhr repräsentieren
damit diverse interne Funktionen (z.B. "Verweise") erkennen können, dass "var1" einen Link zu einer ZSU repräsentiert, ist dies durch den Zusatz "#root=..." zu ermöglichen
"100" ist die ID der konfigurierten ZSUs aus der DB "edomiProject.editRoot" (namedb="editTimer"), also muss "#root=100" ergänzt werden
Hinweis: diese ID wird zudem im Abschnitt [PROPERTIES] benötigt (s.u.)
Diese Eigenschaften aktivieren/deaktivieren bzw. definieren die Eigenschaften in der rechten Spalte des Dialogs Visuelement bearbeiten***1002 (Beschriftung, Designs, Kommunikationsobjekte, etc.):
flagText: 1="Beschriftung" erlauben
captionText: (String, max. 100 Zeichen)=wird ggf. bei "Beschriftung" und "dynamische Designs" informativ angezeigt, wenn im Feld "Beschriftung" spezielle Angaben erforderlich sind (z.B. eine URL im Visuelement "Sprachausgabe")
flagKo1: 0=KO1 deaktiviert, 1=KO1 ist vom Nutzer auswählbar, 2=KO1 ist vorgegeben (muss im Abschnitt [ACTIVATION.PHP] gesetzt werden, z.B. ZSU-Steuerungs-KO)
captionKo1: (String, max. 100 Zeichen)=informative Bezeichnung des entsprechenden KO-Auswahlfeldes (Sonderfall: ist flagKo1=2 wird innerhalb des KO-Auswahlfelds der Hinweis "(wird bei Aktivierung eingefügt)" angezeigt und das Auswahlfeld ist deaktiviert)
Hinweis: wird diese Eigenschaft nicht definiert wird per Default "Steuerung" angezeigt
flagKo2: 0=KO2 deaktiviert, 1=KO2 ist vom Nutzer auswählbar
captionKo2: (String, max. 100 Zeichen)=informative Bezeichnung des entsprechenden KO-Auswahlfeldes
Hinweis: wird diese Eigenschaft nicht definiert wird per Default "Wert setzen" angezeigt
flagKo3: 0=KO3 deaktiviert, 1=KO3 ist vom Nutzer auswählbar (KO3 dient stets der optionalen Steuerung von dynamischen Designs)
flagPage: 1="Seitensteuerung" erlauben
flagCmd: 1="Befehle" erlauben
flagDesign: 1="Design" erlauben
flagDynDesign: 1="dynamische Designs" erlauben
Die folgenden (optionalen) Eigenschaften sind erforderlich, sofern das Visuelement eine Ton- oder Sprachausgabe bereitstellt:
"Whitespace" (Leerzeichen) innerhalb der Deklaration wird ignoriert: [name=(Name)] führt zum gleichen Ergebnis wie [ name = (Name) ].
Im Anschluss an eine Deklaration kann bei Bedarf ein Hilfetext angegeben werden:
###[DEF]###
...
[var1 = A] Hinweis: var1 wird auf den Defaultwert "A" gesetzt
...
###[/DEF]###
Der Hinweistext darf keine eckigen Klammern enthalten!
Wichtig:
Eine Deklaration darf keine eckigen Klammern oder HTML-Tags enthalten, z.B. wäre [var1 = [Test]] keine gültige Deklaration, [var1 = Test] wäre hingegen gültig. Bei Bedarf müssen HTML-Entities/Unicode-Symbole verwendet werden.
Abschnitt [PROPERTIES]
Dieser Abschnitt definiert die "spezifischen Eigenschaften" im Dialog Visuelement bearbeiten***1002 mittels einer speziellen Syntax. Der Nutzer hat hier ggf. die Möglichkeit die Parameter var1..20 entsprechend anzupassen.
Wichtig:
Die Syntax und die Reihenfolge ist präzise einzuhalten (wie nachfolgend beschrieben)!
columns: Breite (und Anzahl) der Tabellenspalten in Prozent (Komma-separiert)
[columns=25,25,50]: generiert 3 Spalten mit 25%, 25% und 50% Breite
[columns=100]: generiert 1 Spalte mit 100% Breite
Wichtig: Diese Angabe muss stets vorhanden sein und vor allen weiteren Parametern angegeben werden!
row: fügt eine neue Tabellenzeile ein, ggf. wird eine Zwischenüberschrift angezeigt:
[row]: fügt nur eine neue Zeile ein
[row=Titel]: fügt eine neue Zeile mit der Überschrift "Titel" ein
Wichtig: Tabellenzeilen müssen stets eingefügt werden, sobald neue Spalten (s.u.) definiert werden - dies geschieht nicht automatisch!
var1..20: fügt ein Eingabeelement in eine (oder mehrere) neue Tabellenspalte ein - die Eingabe/Auswahl des Nutzer wird var1..20 zugewiesen:
Wichtig: Bei allen Angaben sind ggf. einfache Anführungszeichen zu verwenden!
[var1..20=text,(Anzahl der Spalten),'(Bezeichnung)','(Platzhalter-Text)']: generiert ein Eingabefeld (Tastatureingabe)
Anzahl der Spalten: legt fest, wieviele Tabellenspalten das Element für sich beanspruchen soll (colspan)
Bezeichnung: Titel des Elements, ''=ohne, ' '=ohne (jedoch mit Zeilenumbruch)
Platzhalter-Text: dieser Text wird ggf. innerhalb des Eingabefelds angezeigt (placeholder)
[var1..20=select,(Anzahl der Spalten),'(Bezeichnung)','(Wertliste)']: generiert ein Auswahlfeld (Select-Box)
Anzahl der Spalten: legt fest, wieviele Tabellenspalten das Element für sich beanspruchen soll (colspan)
Bezeichnung: Titel des Elements, ''=ohne, ' '=ohne (jedoch mit Zeilenumbruch)
Wertliste: Liste aus Werten und Bezeichnungen in der Form "(Wert)#(Bezeichnung)|(Wert)#(Bezeichnung)|...":
z.B. "0#A|1#B|2#C|EDOMI#D" führt zu 0=A, 1=B, 2=C, EDOMI=D
var1..20 wird je nach Auswahl (A,B,C,D) auf den Wert 0,1,2,EDOMI gesetzt
[var1..20=check,(Anzahl der Spalten),'(Bezeichnung)','(Option)']: generiert ein Optionsfeld (Check-Box)
Anzahl der Spalten: legt fest, wieviele Tabellenspalten das Element für sich beanspruchen soll (colspan)
Bezeichnung: Titel des Elements, ''=ohne, ' '=ohne (jedoch mit Zeilenumbruch)
Option: Bezeichnung der Option, dessen Wert stets auf 0 oder 1 gesetzt wird
wenn das Optionsfeld aktiviert ist, wird die Option grün hinterlegt und der Wert auf 1 gesetzt
wenn das Optionsfeld deaktiviert ist, wird die Option grau hinterlegt und der Wert auf 0 gesetzt
[var1..20=checkmulti,(Anzahl der Spalten),'(Bezeichnung)','(Optionsliste)']: generiert ein Optionsfeld mit mehreren Optionen (Check-Box)
Anzahl der Spalten: legt fest, wieviele Tabellenspalten das Element für sich beanspruchen soll (colspan)
Bezeichnung: Titel des Elements, ''=ohne, ' '=ohne (jedoch mit Zeilenumbruch)
Optionsliste: Liste aus Bezeichnungen der Optionen in der Form "(Bezeichnung)|(Bezeichnung)|(Bezeichnung)|...":
die erste Option entspricht dem Wert 0 und wird grau hinterlegt
alle weiteren Optionen entsprechen dem Wert 1..∞ und werden grün hinterlegt
bei jedem Anklicken wird die nachfolgende Option ausgewählt, am Ende der Optionsliste wird am Anfang fortgesetzt
[var1..20=root,(Anzahl der Spalten),'(Bezeichnung)','(root-ID)']: generiert ein Auswahlfeld für ein Datenbank-Element (z.B. eine konfigurierte Zeitschaltuhr)
Anzahl der Spalten: legt fest, wieviele Tabellenspalten das Element für sich beanspruchen soll (colspan)
Bezeichnung: Titel des Elements, ''=ohne, ' '=ohne (jedoch mit Zeilenumbruch)
root-ID: diese ID repräsentiert einen Datensatz in der DB "edomiProject.editRoot" (siehe Abschnitt [DEF])
beim Anklicken wird der entsprechende Auswahldialog geöffnet (z.B. "Zeitschaltuhren") und ermöglicht die Auswahl eines entsprechenden Datensatzes
der Wert von var1..20 wird ggf. auf die ID des ausgewählten Datensatzes gesetzt
In diesem (optionalen) Abschnitt kann ein PHP-Script hinterlegt werden, das bei der Projekt- oder Visuaktivierung ausgeführt wird (z.B. um bestimmte Parameter zu überprüfen oder zu modifizieren). Typischer Weise werden ausschließlich SQL-Operationen angewendet.
Wichtig:
In diesem Abschnitt sind keine Funktionen/Klassen/etc. erlaubt (der Code wird intern bereits in einer Funktion gekapselt)!
Achtung:
Es ist unbedingt zu bedenken, dass dieser Code im Kontext des Aktivierungsprozesses ausgeführt wird - ein fehlerhaftes Script kann daher EDOMI zum Absturz bringen!
$item[]: (assoziatives Array) repräsentiert den gesamten Datensatz der Visuelement-Instanz aus der DB "edomiLive.visuElement" (diese DB wird zuvor während der Aktivierung erstellt)
Beispiel:
Das Steuerungs-KO der ZSU (edomiProject.editTimer.gaid) soll bei einer Aktivierung als KO1 der Visuelement-Instanz (edomiLive.visuElement.gaid) festgelegt werden. $item['var1'] repräsentiert den Parameter "var1" der Visuelement-Instanz, in dem o.g. Beispiel (siehe [DEF] bzw. [PROPERTIES]) also die ID der ausgewählten ZSU.
###[ACTIVATION.PHP]###
$tmp=sql_getValues('edomiProject.editTimer','gaid','id='.$item['var1']);
if ($tmp!==false) {
sql_call("UPDATE edomiLive.visuElement SET gaid=".$tmp['gaid']." WHERE id=".$item['id']);
}
?>
###[/ACTIVATION.PHP]###
Abschnitt [EDITOR.JS]
Dieser Abschnitt definiert mittels einer vorgegebenen JS-Funktion die Darstellung des Visuelements im Visueditor. Der Aufruf erfolgt nach(!) der Zuweisung von CSS-Eigenschaften ("Design" bzw. "dynamische Designs"), daher können diese Eigenschaften bei Bedarf "übersteuert" werden (siehe Beispiel).
Wichtig:
eigene Javascript-Funktionen müssen stets in dieser Form deklariert werden:
VSE_VSEID_Funktionsname = function (...) {...}
Die nachfolgende Funktion ist zwingend erforderlich und wird vom Visueditor beim Seitenaufbau aufgerufen:
elementId: die ID der Visuelement-Instanz (z.B. "123")
obj: (JS-Objekt) repräsentiert das Visuelement im Visueditor
obj.id: ID des Visuelement-Objekts im Visueditor (eigene HTML-Elemente müssen ggf. "Childs" dieser ID sein, z.B. n+="<div id='"+obj.id+"-dummy1'">)
obj.dataset.var1..20: repräsentiert die Parameter var1..20 aus dem Abschnitt [DEF] bzw. [PROPERTIES]
meta: (JS-Objekt) diverse Metadaten, aktuell sind dies:
meta.itemText: repräsentiert die Angabe unter "Beschriftung" im Dialog zur Bearbeitung eines Visuelements
property: (JS-Array[0,1,2,3,...])
Eigenschaften:
dieses Array kann (optional) im Abschnitt [EDITOR.PHP] mittels eines PHP-Scripts deklariert werden (z.B. der Name einer Zeitschaltuhr)
isPreview: Vorschaumodus im Visueditor
true: Vorschau aktiviert
false: Vorschau deaktiviert
koValue: Vorschau-KO1-Wert
wenn die Vorschau deaktiviert ist (isPreview=false), wird koValue="" (leer) gesetzt
return (optional): in der Seitenleiste (Visueditor) wird der entsprechende Eintrag ggf. mit diesem String ergänzt
false (oder kein return): der Einrag wird nicht weiter ergänzt
true: der Einrag wird mit der "Beschriftung" des Visuelements ergänzt
(String): der Eintrag wird mit diesem String ergänzt (z.B. aus property[], s.o.)
Beispiel:
###[EDITOR.JS]###
VSE_VSEID=function(elementId,obj,meta,property,isPreview,koValue) {
var n="";
n+="
";
//Name der ausgewählten Zeitschaltuhr (wird im Abschnitt [EDITOR.PHP] ermittelt, s.u.):
n+="
"+property[0]+"
";
//"Beschriftung" nur anzeigen, wenn var4=1 ist:
if (obj.dataset.var4==1) {
n+="
"+meta.itemText+"
";
}
n+="
";
//HTML-Code dem Visuelement zuweisen
obj.innerHTML=n;
//CSS-Anpassungen: Text immer zentrieren, kein Padding erlauben (die entsprechenden Design-Einstellungen werden hier übersteuert)
obj.style.textAlign="center";
obj.style.padding="0";
//Rückgabe des ZSU-Namens zur Anzeige in der Seitenleiste
return property[0];
}
###[/EDITOR.JS]###
Abschnitt [EDITOR.PHP]
In diesem (optionalen) Abschnitt kann ein PHP-Script zur Deklaration des Arrays "$property[]" angegeben werden. Dieses Array wird im Abschnitt [EDITOR.JS] als JS-Funktionsparameter "property" der Funktion "VSE_VSEID" (s.o.) übernommen.
Beispielsweise kann der Name einer vom Nutzer ausgewählten Zeitschaltuhr ermittelt und übergeben werden, damit dieser innerhalb des Visuelements und/oder in der Seitenleiste angezeigt werden kann.
$item[]: (assoziatives Array) repräsentiert den gesamten Datensatz der Visuelement-Instanz aus der DB "edomiProject.editVisuElement"
$property[0,1,2,3,...]: (Array) wird intern an die Funktion "VSE_VSEID" im Abschnitt [EDITOR.JS] übergeben
Wichtig:
In diesem Abschnitt sind keine Funktionen/Klassen/etc. erlaubt (der Code wird intern bereits in einer Funktion gekapselt)!
Beispiel:
###[EDITOR.PHP]###
//Name der Zeitschaltuhr ermitteln ($item['var1'] repräsentiert den Parameter "var1" der Visuelement-Instanz):
$tmp=sql_getValue('edomiProject.editTimer','name','id='.$item['var1']);
//Rückgabe-Array auf den ermittelten Namen setzen:
$property[0]=$tmp;
?>
###[/EDITOR.PHP]###
Abschnitt [VISU.JS]
Dieser Abschnitt implementiert mittels vorgegebener JS-Funktionen die Darstellung und die Funktionalität des Visuelements in der Visualsierung auf dem Endgerät.
Wichtig:
eigene Javascript-Funktionen müssen stets in dieser Form deklariert werden:
VSE_VSEID_Funktionsname = function (...) {...}
Die nachfolgende Funktion ist zwingend erforderlich und wird von der Visualisierung beim Seitenaufbau aufgerufen. Der Aufruf erfolgt nur einmalig(!) beim Seitenaufbau und nach(!) der Zuweisung von CSS-Eigenschaften ("Design" bzw. "dynamische Designs"):
VSE_VSEID_CONSTRUCT=function(elementId,obj) {...}
elementId: die ID der Visuelement-Instanz (z.B. "123")
obj: (JS-Objekt) repräsentiert das Visuelement in der Visualisierung
obj.id: die ID des DOM-Elements (DIV) der Visuelement-Instanz (z.B. "e-123")
obj.dataset.id: die ID der Visuelement-Instanz (z.B. "123")
obj.dataset.linkid: repräsentiert ggf. die ID einer verbundenen Visuelement-Instanz (z.B. "123", oder "0" wenn keine Verbindung besteht)
obj.dataset.var1..20: repräsentiert die Parameter var1..20 aus dem Abschnitt [DEF] bzw. [PROPERTIES]
Hinweis: Ggf. können eigene dataset-Variablen definiert werden, diese stehen dann global für diese Visuelement-Instanz zu Verfügung.
Die nachfolgende Funktion ist zwingend erforderlich und wird von der Visualisierung beim Seitenaufbau nach der Funktion controlVSEID_constructControl() aufgerufen. Anschließend wird die Funktion bei jedem "refresh" (z.B. Änderung eines relevanten KO-Wertes) und während einer Drag-Operation (bei Nutzung der entsprechenden Funktionen) aufgerufen:
elementId: die ID der Visuelement-Instanz (z.B. "123")
obj: (JS-Objekt) repräsentiert das Visuelement in der Visualisierung (siehe "VSE_VSEID_CONSTRUCT")
isInit: (Bool)
true: der Aufruf erfolgte beim Seitenaufbau nach dem Aufruf der Funktion "VSE_VSEID_CONSTRUCT"
false: der Aufruf erfolgte aufgrund eines "refreshs" (z.B. KO-Wertänderung)
isRefresh: (Bool)
true: Refresh erfolgte durch die Visu-Engine, d.h. alle KOs (auch koValue) wurden von der Visu-Engine gesetzt
false: der Refresh erfolgte auf Client-Ebene, z.B. durch die "Live-Vorschau"-Funktionalität (KO)
isLive: (Bool)
true: "koValue" repräsentiert einen "Live-Vorschau"-Wert (ggf. auch während der Haltezeit)
false: "koValue" repräsentiert den tatsächlichen KO-Wert
isActive: (Bool)
true: das Visuelement ist aktuell das aktive Drag-Objekt (bei Live-Vorschau oder zyklischem Setzen)
false: der Aufruf erfolgte aufgrund eines "refreshs" (z.B. KO-Wertänderung)
koValue: KO1-Wert (der tatsächliche Wert oder der "Live-Vorschau"-Wert)
Beispiel:
###[VISU.JS]###
VSE_VSEID_CONSTRUCT=function(elementId,obj) {
var n="";
//hier wird eine Tabelle erzeugt und (nachfolgend) mit der "Beschriftung" des Visuelements gefüllt:
n+="
";
n+="
";
n+="
";
obj.innerHTML=n;
//falls Seitensteuerung/Befehle angegeben wurden: Klick-Event auswerten
if (visuElement_hasCommands(elementId)) {
visuElement_onClick(obj,function(veId,objId){visuElement_doCommands(veId);});
}
}
VSE_VSEID_REFRESH=function(elementId,obj,isInit,isRefresh,isLive,isActive,koValue) {
//falls keine Seitensteuerung/Befehle angegeben wurden: Visuelement ist "klicktranparent"
if (!visuElement_hasCommands(elementId)) {
obj.style.pointerEvents="none";
}
//ggf. individuelle CSS-Styles festlegen (hier wurde das "Design/dynamische Design" bereits angewendet und kann nun ggf. "übersteuert" werden):
if (obj.dataset.var2==1) {
obj.style.background="#ff0000";
}
//Visuelement beschriften (der KO-Wert wird mittels visuElement_parseString() geparsed):
document.getElementById("e-"+elementId+"-text").innerHTML=visuElement_parseString(visuElement_getText(elementId),koValue);
}
###[/VISU.JS]###
Die nachfolgende (optionale) Funktion wird von der Visualisierung immer dann aufgerufen, bevor ein Seitenwechsel erfolgt (auch beim Öffnen bzw. Schließen eines Popups). Das Visuelement kann somit ggf. darauf reagieren, dass es in Kürze z.B. unbedienbar wird (z.B. weil ein modales Popup geöffnet wird) bzw. nicht mehr existieren wird. Dies ist z.B. sinnvoll, wenn ein Eingabefeld den Fokus hat und während dessen ein modales Popup geöffnet wird.
Bei Drag-Objekten (falls durch die Funktion "visuElement_onDrag()" definiert) ist keine individuelle Reaktion/Funktion erforderlich, da die Drag-Operation automatisch beendet wird (der aktuell durch die Drag-Operation eingestellte KO-Wert wird dann übernommen).
VSE_VSEID_CANCEL=function(elementId) {...}
elementId: die ID der Visuelement-Instanz (z.B. "123")
Beispiel:
###[VISU.JS]###
VSE_VSEID_CANCEL=function(elementId) {
//hier könnte z.B. eine Tastatureingabe in einem Input-Field abgesendet werden, bevor das Visuelement den Fokus verliert
}
###[/VISU.JS]###
Drag-Operationen
Bei Bedarf können spezielle Funktionen zur Bereitstellung einer Drag-Funktionalität genutzt werden (z.B. zur Implementierung eines Schiebereglers o.d.G.).
Die Registrierung des Drag-Objekts muss dabei mittels der Funktion visuElement_onDrag() erfolgen. Die nachfolgenden Funktionen sind dann zwingend erforderlich (diese werden während einer Drag-Operation aufgerufen):
diese Funktion wird wird bei jedem MouseMove-Event (Mausbewegung mit gedrückter Maustaste) aufgerufen und einmalig unmittelbar nach der Initialisierung mittels "VSE_VSEID_DRAGSTART"
elementId: die ID der Visuelement-Instanz (z.B. "123")
dragObj: das Drag-Objekt
return: Rückgabe des KO-Wertes (optional)
(Wert): dieser Wert wird als KO-Wert übernommen
false: die gesamte Drag-Operation wird abgebrochen, zuvor gesetzte KO-Werte wurden jedoch übernommen
(kein return): der KO-Wert wird nicht verändert (z.B. für eigene Implementierungen)
diese Funktion wird beim MouseUp-Event (Loslassen der Maustaste) aufgerufen und beendet somit die Drag-Operation
elementId: die ID der Visuelement-Instanz (z.B. "123")
dragObj: das Drag-Objekt
dragValue:
(Wert): der letzte (aktuellste) KO-Wert, der durch die Drag-Operation gesetzt worden ist
false: die Drag-Operation wurde abgebrochen (z.B. von der Visu-Engine oder vom Visuelement selbst)
return: Rückgabe des KO-Wertes (optional)
(Wert): dieser Wert wird ggf. abschließend als KO-Wert übernommen
(kein return): der KO-Wert wird weiter nicht verändert (als KO-Wert wird der letzte Rückgabewert der Funktion "VSE_VSEID_DRAGMOVE" übernommen)
Beispiel:
###[VISU.JS]###
VSE_VSEID_CONSTRUCT=function(elementId,obj) {
var n="
(Drag-Bereich)
";
obj.innerHTML=n;
//Drag-Objekt registrieren (KO2 wird per Drag absolut gesetzt, kein zyklisches Setzen):
visuElement_onDrag(document.getElementById("e-"+elementId+"-drag"),0,2,-1);
}
...
VSE_VSEID_DRAGSTART=function(elementId,dragObj) {
//keine besonderen Maßnahmen erforderlich
}
VSE_VSEID_DRAGMOVE=function(elementId,dragObj) {
var obj=document.getElementById("e-"+elementId);
if (obj) {
//Mausposition ermitteln (bezogen auf dragObj)
var tmp=visuElement_getMousePosition(obj,dragObj,0);
//KO2-Wert auf X-Position setzen
return tmp.x;
}
}
VSE_VSEID_DRAGEND=function(elementId,dragObj,dragValue) {
//keine besonderen Maßnahmen erforderlich
}
###[/VISU.JS]###
Abschnitt [VISU.PHP]
In diesem (optionalen) Abschnitt können prinzipiell beliebige PHP-Funktionen/-Klassen deklariert werden.
Wichtig:
eigene PHP-Funktionen/-Klassen müssen stets in dieser Form deklariert werden:
function PHP_VSE_VSEID_Funktionsname (...) {...}
class PHP_VSE_VSEID_Klassenname (...) {...}
Mit Hilfe der JS-Funktion "visuElement_callPhp()" (im Abschnitt [VISU.JS] oder [SHARED.JS]) wird zunächst die PHP-Funktion "PHP_VSE_VSEID()" (per "Ajax") aufgerufen, diese Funktion kann dann ggf. in eigene Implementierungen verzweigen:
function PHP_VSE_VSEID($cmd,$json1,$json2) {...}
diese Funktion wird mit Hilfe der JS-Funktion "visuElement_callPhp()" aufgerufen (asynchron per "Ajax"), dabei können ggf. Parameter oder Formulardaten im JSON-Format übermittelt werden
$cmd: der Parameter "cmd" der JS-Funktion "visuElement_callPhp()", dieser String repräsentiert typischer Weise einen Befehl o.d.G.
$json1/$json2: (Array) ggf. die übergebenen JSON-Daten der JS-Funktion "visuElement_callPhp()"
###[VISU.JS]###
VSE_VSEID_Beispiel=function(value) {
visuElement_callPhp("test",{Wert:value},null);
}
...
###[/VISU.JS]###
###[VISU.PHP]###
function PHP_VSE_VSEID($cmd,$json1,$json2) {
if ($cmd=='test') {
//der Inhalt der JS-Variable "value" steht nun als PHP-Variable "$json1['Wert']" zu Verfügung:
if ($json1['Wert']>100) {
PHP_VSE_VSEID_eigeneFunktion($json1['Wert']);
}
}
}
function PHP_VSE_VSEID_eigeneFunktion(n) {
...
}
?>
###[/VISU.PHP]###
Abschnitt [SHARED.JS]
In diesem (optionalen) Abschnitt können JS-Funktionen hinterlegt werden, die sowohl im Abschnitt [EDITOR.JS] als auch im Abschnitt [VISU.JS] zu Verfügung stehen.
Wichtig:
Für den Abschnitt [EDITOR.JS] stehen nicht alle EDOMI-Funktionen zu Verfügung, die im Abschnitt [VISU.JS] verfügbar sind!
eigene Javascript-Funktionen müssen stets in dieser Form deklariert werden:
VSE_VSEID_Funktionsname = function (...) {...}
Beispiel:
###[SHARED.JS]###
VSE_VSEID_beispiel=function(obj) {
if (obj) {
console.log("VSE_VSEID_beispiel() von ID "+obj.id+" aufgerufen");
}
}
###[/SHARED.JS]###
Diese Funktion kann dann sowohl im Abschnitt [EDITOR.JS] als auch im Abschnitt [VISU.JS] aufgerufen werden, beispielsweise wie folgt:
Hier sollte das VSE kurz beschrieben werden, sowie die Bedeutungen der Parameter var1..20 erläutert werden. Der Hilfetext kann HTML-Tags enthalten (z.B. Tabellen oder Listen).
Beispiel: