SDO – Dokumentation

Einbinden der SDO-Bibliothek in die HTML-Seite
SDO-Objekt - Funktionsreferenz

MoveableObject

ContainerObject

* Funktioniert nicht im Netscape 4.

Einbinden der SDO-Bibliothek in die HTML-Seite

Im HEAD Bereich der HTML-Seite muss folgende Zeile eingefügt werden:

<script type="text/javascript" src="sdo.js"></script>

Alle Module, welche auf das SDO-Objekt aufbauen (z.B. das Menu-Objekt) müssen nach der SDO-Bibliothek eingebunden werden.

Im BODY-Tag muss folgender Zusatz eingebunden werden:

onload="initSDO()"

Da SDO-Objekte auf Layer zugreifen, müssen diese bereits geladen sein, wenn sie benutzt werden. Deshalb dürfen alle Objekte erst nach dem Ausladen der Seite instanziiert werden. Dafür muss eine Funktion namens initDevices() definiert werden. Diese wird von der initSDO() aufgerufen. In der initDevices() Funktion können dann alle Objekte erzeugt und Aktionen gestartet werden. Dies klingt jetzt vielleicht etwas kompliziert, aber nach 1-2 Beispielen erkennt man, dass es gar nicht so kompliziert ist.

SDO-Objekt - Funktionsreferenz

globale Variablen

`ie4`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 4.x ist.
`ie5`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 5.x ist.
`ie6`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 6.x ist. Unterstüzt den DOM-Standart.
`ns4`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Netscape 4.x ist.
`ns6`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Netscape 6.x oder 7.x ist. Unterstüzt den DOM-Standart.
`opera`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Opera Browser ist.
`mac`	`true/false (default:false)`	Browservariable, ist nach der Initialisierung gültig. Gibt an, ob es sich um einen Mac handelt. Auf dem Mac ist Internet Explorer 5.x die höchste verfügbare Version und diese kann im Gegensatz zur Windows Version keine Inhalte dynamisch verändern. Netscape ist auf dem Mac identisch zur Windows Version.
`debug`	`true/false (default:false)`	Gibt an, ob debugFehlermeldungen ausgeben werden sollen.
`operaWarning`	`true/false (default:false)`	Gibt an, ob eine Warnung bei Verwendung eines Opera Browsers ausgegeben werden soll. Opera bis Version 6 (aktuell) unterstützt leider keinerlei dynamische Ebenenmanipulation.
`delay`	`integer (default:20)`	Zeit zwischen Animationsschritten (z.B. moveTo)
`aList`	`typ:Container`	Ist das Listener Objekt. Alle Objekte die überwacht werden sollen können mit den Methoden des Container-Objektes hinzugefügt oder entfernt werden.
`helpo`	`typ:MObject`	Ist das Objekt für das Tooltip. Manipluationen daran sind nicht empfehlenswert.
`enableToolTips`	`true/false (default:false)`	Gibt an ob ToolTips verwendet werden sollen. Aktivierung sollte nur noch über die Funktion setToolTips gemacht werden.

Wenn man keine Extraseite für den Opera machen möchte, aktiviert man den Warnhinweis für Operabenutzer, in dem man einfach im JavaScript eine Zeile einfügt:
operaWarning=true;
Genauso verfährt man, wenn man eine der anderen globalen Variablen ändern möchte.

setToolTips(t_or_f)

Aktiviert oder deaktivert ToolTips. Ein Layer Namens 'tooltip' muss existieren!

t_or_f Muss true oder false sein.

Beispiel: setToolTips(true)

screenWidth()

Gibt die verfügbare Fensterbreite zurück.

Beispiel: var width=screenWidth()

screenHeight()

Gibt die verfügbare Fensterhöhe zurück.

Beispiel: var height=screenHeight()

getOffsetX()

Gibt an um wieviele Pixel die Seite nach rechts gescrollt ist.

Beispiel: var scrollLeft=getOffsetX()

getOffsetY()

Gibt an um wieviele Pixel die Seite nach unten gescrollt ist.

Beispiel: var scrollTop=getOffsetY()

toolTip(text)

Zeigt einen Tooltip mit entsprechendem Text an. Wenn kein Text übergeben wird, wird das Tooltip gelöscht.

Benötigt einen Layer mit Namen 'tooltip' auf der HTML Seite!

text Gibt den anzuzeigenden Text an.

Beispiel: <a href="..." onMouseOver="toolTip('Ein sinnvoller Hilfetext')" onMouseOut="toolTip()">

initSDO()

Initialisiert alle Dinge, die für die Verwendung der SDO-Bibliothek notwendig sind. Diese Funktion muss im BODY Tag der HTML Seite aufgerufen werden.

Beispiel: <body onLoad="initSDO()">

initSDO_soft()

Startet die Initialisierung im Minimalmodus. Es werden nur die Browservariablen gesetzt. Sinnvoll, wenn man nur ein paar kleine Scripte hat, welche Browserspezifisch arbeiten. Die checkBrowser() Funktion der SDO-Bibliothek ist immer auf dem neuesten Stand! Eventuell werden später einige andere Init-Funktionen hinzugefügt. Deshalb ist es besser diese Funktion zu verwenden, anstatt checkBrowser() direkt aufzurufen.

Beispiel: <body onLoad="initSDO_soft()">

checkBrowser()

Diese Funktion wird intern während der Initialisierung aufgerufen und überprüft, welcher Browser gerade verwendet wird. Sie ist immer auf dem neuesten Stand und funktioniert mit Opera 6, Mozilla 1, Netscape 7 und InternetExplorer 6. Ebenso mit den jeweiligen Browsern früherer Versionen. Auserdem können Mac Computer erkannt werden.

initDevices()

Diese Funktion ist als leere Funktion implementiert, um Fehlermeldungen zu unterbinden, falls sie nicht existiert. Es sollte eine Funktion mit genau diesem Namen implementiert werden, welche alle Objekte anlegt und Aktionen startet. Alle Objekte müssen aber bereits auserhalb der initDevices() Funktion definiert sein und werden erst in der initDevices() Funktion erzeugt. Ansonsten sind sie nicht global verfügbar! Falls dies nicht verständlich ist sollte man sich die Beispielseite anschauen.

MoveableObject

interne Variablen

`scrolling`	`true/false (default:false)`	Gibt an, ob bei `setPosition()` Bildschirmscrollen mit einberechnet werden soll.
`moveable`	`true/false (default:false)`	Gibt an, ob das Objekt verschiebbar sein soll. Beim setzen auf `true` muss das Objekt aber mit `setPosition()` absolut positioniert werden, damit es seine Start-Koordinaten kennt.
`updzi`	`true/false (default:true)`	Gibt an, ob beim verschieben der zIndex erhöht werden soll. Fenster kommen damit bei Aktivierung in den Vordergrund.
`info`	`Array (default:leer)`	Ist ein Array, welches am Anfang leer ist und bei Bedarf mit Zusatzinfos gefüllt werden kann.
Nicht veränderliche Variablen. Nur für Programmierer von Modulen interessant und sollten auch nicht verändert werden!
`xc`	`integer`	Beinhaltet die aktuelle X-Koordinate des Objektes. Ist erst nach Verschiebung belegt.
`yc`	`integer`	Beinhaltet die aktuelle Y-Koordinate des Objektes. Ist erst nach Verschiebung belegt.
`objn`	`String`	Beinhaltet den Namen des Objektes.
`name`	`String`	Beinhaltet den Namenn des verwalteten Layers.
`active`	`true/false`	Gibt an, ob das Objekt gerade aktiv ist.
`zIndex`	`integer`	Gibt den aktuellen zIndex des Objektes an.
`mma`	`true/false`	Gibt den aktuellen Aktivitäts-Status an.
`width`	`integer`	Gibt die Breite des Objektes an. Ist nur nach `resizeTo()` belegt.
`height`	`integer`	Gibt die Höhe des Objektes an. Ist nur nach `resizeTo()` belegt.

MObject(name,objn)

Dies ist der sogenannte "Konstruktor". Damit bezeichnet man in der Objektorientierten Programmierung die Funktion, welche das Objekt erzeugt.

`name`	Ist der Name des Layers, welcher dem Objekt zugeordnet ist. 1 Objekt kann immer nur einem Layer zugeordnet sein. Ein Layer kann aber durch mehrere Objekte verwaltet werden, auch wenn dies praktisch wohl nur in Ausnahmefällen Sinn macht.
`objn`	Ist der Name des Objektes, welches gerade erzeugt wird. Dies ist nötig, da sich das Objekt manchmal im HTML-Text selber aufrufen lassen muss. Dazu muss es seinen Namen kennen.

Beispiel: object1=new MObject('layer1','object1');

moveTo(x,y,s)

Verschiebt das Objekt an die definierte X,Y-Position in einer bestimmten Anzahl von Schritten.

Das Objekt muss vorher mit setPosition() absolut positioniert worden sein!

`x`	Gibt die X-Zielkoordinate des Objektes an.
`y`	Gibt die Y-Zielkoordinate des Objektes an.
`s`	Gibt die Anzahl der Animationsschritte an. Als Abstand zwischen den einzelnen Animationsschritten wird die globale `delay` Variable verwendet.

Beispiel: object1.moveTo(100,100,15);

saveLayer()

Speichert den Inhalt des Layers. Dieser kann später mittels restoreLayer() wieder hergestellt werden. Sehr sinnvoll, für Hover-Effekte um schnellere Animationen zu erzeugen.

restoreLayer()

Stellt den Inhalt eines zuvor mit saveLayer() gesicherten Layers wieder her.

setZIndex(num) *

Legt den zIndex für ein Objekt fest. Es kann bei mehreren Objekten somit in den Vordergund oder Hintergrund gesetzt werden.

num Gibt den neuen zIndex des Layers an.

Beispiel: object1.setZIndex(7);

setStyle(style,val) *

Weißt einem Objekt einen CSS-Style zu. Siehe dazu auch die externer Link Hilfe Seite zu CSS im SELFHTML.

Auf Grund der Struktur des SDO-Objektes ist es möglich, dass einige Styles in einigen Browsern nicht korrekt dargestellt werden. Insbesondere sei hier Mozilla und der darauf aufbauende Netscape erwähnt, welche in dieser Beziehung teilweise Fehlerhaft sind. Auch ist eine unterschiedliche Interpretation im IE und NS möglich.

`style`	Gibt den Namen eines Sytles an.
`val`	Gibt den Wert des entsprechenden Styles an.

Beispiel: object1.setSytle('color','#FF0000');

isActive()

Gibt einen true/false Wert zurück. Je nachdem, ob das Objekt gerade aktiv (Maus befindet sich über Objekt) oder inaktiv ist. Diese Funktion ist besonders für Hover-Effekte nützlich.

Beispiel: if ( object1.isActive() ) { alert('Ja ich bin aktiv!') }

write(txt)

txt Gibt den zu schreibenden Text an. Dieser kann auch HTML Code enthalten.

Beispiel: object1.write('<b>schöner Text</b>');

add(txt)

Fügt einem Objekt neuen Text hinzu.

txt Gibt den hinzuzufügenden Text an. Dieser kann auch HTML Code enthalten.

Beispiel: object1.add('<i>mehr Text</i>');

activeStart()

Diese Funktion wird aufgerufen, wenn das Objekt aktiviert wird. Sie ist nur als leerer Prototyp implementiert. Das heißt, Sie müssen sie erst definieren, damit etwas ausgeführt wird. Dies gibt Ihnen aber die flexible Möglichkeit bei Aktivierung (Maus wird über das Objekt bewegt) oder Deaktivieren (Maus verlässt das Objekt wieder) des Objektes eigene Aktionen auszuführen, ohne sich um die Überwachung des Objektes kümmern zu müssen! Das Objekt muss dazu aber dem globalen Listener-Objekt hinzugefügt werden.

Beispiel:

object1.activeStart=function() { alert('Ich wurde aktiviert ') } aList.add('object1');

Dieses Objekt würde jetzt beim Überfahren mit der Maus die Meldung 'Ich wurde aktiviert ' ausgeben.

activeEnd()

Diese Funktion wird aufgerufen, wenn das Objekt deaktiviert wird. Sie ist ebenfalls nur als leerer Prototyp implementiert. Sie ist das Gegenstück zur Funktion activeStart(). Sie muss ebenfalls erst gefüllt werden.

Beispiel: object1.activeEnd=function() { alert('Ich wurde deaktiviert ') }

Dieses Objekt würde jetzt beim Verlassen mit der Maus die Meldung 'Ich wurde deaktiviert ' ausgeben.

hide() *

Macht das Objekt unsichtbar.

Beispiel: object1.hide()

show() *

Macht das Objekt wieder sichtbar.

Beispiel: object1.show()

resizeTo(width,height)

Setzt die Größe des Objektes auf die angegebenen Werte. (Danach sind auch die internen Werte für width und height gesetzt.)

`width`	Gibt die Länge in Pixeln an.
`height`	Gibt die Höhe in Pixeln an.

Beispiel: object1.resizeTo(100,200)

setPosition(x,y)

Positioniert das Objekt an den angegebenen X,Y-Koordinaten.

`x`	Gibt die X-Position am Bildschirm an.
`y`	Gibt die Y-Position am Bildschirm an.

Beispiel: object1.setPosition(100,200)

startFollow()

Startet den Maus-Folge-Modus. Dabei folgt das Objekt der Maus mit dem zur Aktivierung gegebenem X,Y-Offset. Mit X,Y-Offset ist der Abstrand von der linken oberen X,Y-position des Objektes zur Maus X,Y-Position gemeint. Diese Funktion wird verwendet, wenn die interne Variable moveable auf true gesetzt wurde und das Objekt verschoben wird. Ein externer Aufruf dieser Funktion bringt zur Zeit nix.

Zur Zeit beschränkt sich die Funktionalität noch darauf, dass es verschieben ermöglicht. Eine allgemeine Verwendung wäre unter Umständen nach Anpassung des Codes auch möglich...

stopFollow()

Das Gegenstück zur Funktion startFollow(). Damit wird der Maus-Folge-Modus wieder deaktiviert. Ein externer Aufruf dieser Funktion bringt zur Zeit nix.

ContainerObject

interne Variablen

list Array Array zur internen Verwaltung der Objekte. Auf das Array kann mittels %object%.list zugegrifen werden. %object% ist dabei durch den Namen des erzeugten Containers zu ersetzen. Änderungen und Manipulationen sind nicht sinnvoll, da dadurch die Konsitenz zerstört werden könnte. Es ist nur ein lesender Zugriff sinnvoll, um zum Beispiel über alle Objekte zu iterieren. Einzelne Objekte im Array werden folgendermassen angesporchen: %object%.list[%num%]. %num% Ist hierbei eine zahl zwischen 0 und %object%.list.length. Wenn das Array leer ist, ist die Länge -1. Zu Details zum Array Objekt ist hier die Array Hilfeseite im SELFHTML.

Container()

Erzeugt einen neuen Container. Ein Container ist im Grunde ein Array, in dem keine doppelten Einträge vorkommen können.

Beispiel: object2=new Container();

add(object)

Fügt ein Objekt zum Container hinzu. Dabei wird geprüft, dass das Objekt noch nicht vorkommt. Ansonsten wird es am Ende des Array angefügt. Am Ende der Funktion wird addPersonal(object) aufgerufen. object ist hierbei das an add() übergebene Objekt. Zu Details hierzu bitte die Hinweise zu addPersonal() lesen.

object Kann im Grunde ein beliebiges Objekt sein. In der Regel sind Zeichenketten am sinnvollsten, welche den Namen eines Objektes tragen. Diese können dann mittels der eval() Funktion von JavaScript angesprochen werden.

Beispiel: object2.add('object1')

remove(object)

Entfernt ein Objekt aus dem Array. Wenn es nicht existiert passiert nichts. Am Ende der Funktion wird removePersonal(object) aufgerufen. object ist hierbei das an remove() übergebene Objekt. Zu Details hierzu bitte die Hinweise zu removePersonal() lesen.

Beispiel: object2.remove('object1')

addPersonal(object)

Diese Funktion wird nach dem hinzufügen eines Objektes mittels add() aufgerufen. Diese Funktion ist leer, kann aber selber definiert werden. Dadurch können beim hinzufügen von Objekten weitere Aktionen ausgeführt werden. Ein direkter Aufruf der addPersonal() Funktion ist nicht vorgesehen.

object Ist das an add() übergebene Objekt.

Beispiel: object2.addPersonal=function(object) { alert('Objekt '+object+' wurde hinzugefügt.') }

Dadurch würde beim hinzufügen eines Objektes zu object2 ein Hinweis ausgegeben, dass das Objekt erfolgreich hinzugefügt wurde.

removePersonal(object)

Diese Funktion wird nach dem entfernen eines Objektes mittels remove() aufgerufen. Diese Funktion ist leer, kann aber selber definiert werden. Dadurch können beim entfernen von Objekten weitere Aktionen ausgeführt werden. Ein direkter Aufruf der removePersonal() Funktion ist nicht vorgesehen.

object Ist das an add() übergebene Objekt.

Beispiel: object2.removePersonal=function(object) { alert('Objekt '+object+' wurde entfernt.') }

Dadurch würde beim entfernen eines Objektes aus object2 ein Hinweis ausgegeben, dass das Objekt erfolgreich entfernt wurde.

Navigation

Letzte Updates

SDO – Dokumentation

Einbinden der SDO-Bibliothek in die HTML-Seite

SDO-Objekt - Funktionsreferenz

globale Variablen

setToolTips(t_or_f)

screenWidth()

screenHeight()

getOffsetX()

getOffsetY()

toolTip(text)

initSDO()

initSDO_soft()

checkBrowser()

initDevices()

MoveableObject

interne Variablen

MObject(name,objn)

moveTo(x,y,s)

saveLayer()

restoreLayer()

setZIndex(num) *

setStyle(style,val) *

isActive()

write(txt)

add(txt)

activeStart()

activeEnd()

hide() *

show() *

resizeTo(width,height)

setPosition(x,y)

startFollow()

stopFollow()

ContainerObject

interne Variablen

Container()

add(object)

remove(object)

addPersonal(object)

removePersonal(object)