Ihre Seite hat so viele Regionen, dass schon kein Platz mehr auf dem Bildschirm ist?

Lesen Sie heute über eine nicht ganz gewöhnliche Methode, damit umzugehen. Mit JavaScript können Sie Regionen in HTML DB-Anwendungen beweglich machen. Eine HTML DB-Seite könnte dann so aussehen wie Abbildung 1. Klickt man mit der Maus auf den oberen Rand, so kann man die Region wie ein Windows-Fenster verschieben. Das heutige Beispiel wurde mit dem Internet Explorer und mit Firefox getestet. Wenn Sie andere Browser verwenden möchten, sollten Sie die Funktionalität zunächst testen und den JavaScript-Code ggfs. an den entsprechenden Browser anpassen.

Abb. 1: HTML DB-Seite mit beweglichen Regionen

Die Realisierung der beweglichen Regionen erfordert Programmieraufwand mit JavaScript. Schließlich müssen die Mausklicks und -Bewegungen registriert werden. Wird die Maustaste in einem bestimmten Bereich gedrückt, muss die entsprechende Region - bis zum Loslassen - mit den Mausbewegungen verschoben werden.

Betrachten Sie zunächst die Datei windowmanager.js. Sie enthält den JavaScript-Code, der die Mausbewegungen abfängt und die Regionen entsprechend bewegt. Beachten Sie bitte, dass der Code zur Illustration dient; er wurde nicht unter Berücksichtigung aller Möglichkeiten getestet - Garantien können also nicht übernommen werden. Um den Code zu verstehen, sind Kenntnisse über dynamisches HTML (DHTML) und JavaScript nötig. Es würde im Rahmen dieser Community-Seite zu weit führen, den Code im Detail zu erläutern, daher wird nur auf dessen Nutzung in einer HTMLDB-Anwendung eingegangen. Mit entsprechenden Kenntnissen kann die Funktionalität beliebig erweitert werden.

Damit Sie den JavaScript-Code in Ihren Anwendungen verwenden können, müssen Sie ihn zunächst in Ihren HTML DB Workspace hochladen. Navigieren Sie dazu im Bereich der Gemeinsamen Komponenten zu den Statischen Dateien und klicken Sie dort auf die Schaltfläche Erstellen. Belassen Sie die Auswahlliste Anwendung beim Hochladen auf "- Keiner Anwendung zugewiesen -". Abbildung 2 zeigt das Ergebnis dieses Vorgangs. 

Abb. 2: JavaScript Code als statische Datei in die HTML DB hochladen

Legen Sie als nächstes ein neues Regions-Template an. Navigieren Sie dazu wiederum zu den gemeinsamen Komponenten, dort zu den Templates und dort zur Schaltfläche Erstellen. In der darauf folgenden Seite wählen Sie Region für ein Regionstemplate aus. Alle Regionen, die später dieses neue Template verwenden, werden dann beweglich sein. Nennen Sie es bspw. bewegliche Region. Die Template-Klasse spielt keine Rolle; nehmen Sie der Einfachheit halber Berichtsregion. 

Abb. 3: Ein neues Regions-Template erstellen

Tragen Sie in die Template-Definition folgenden Code ein:

<div id ="#REGION_ID#" style="background-color: white">
  <table cellpadding="0" cellspacing="0" border="0" summary="" 
 style="border-color: black; border-style: solid; border-width: 1.5pt;">  
<tr>
 <td width="100%" 
 style="background-color: orange; color: white; font-weight: bold; font-size: 14pt"
 onMouseDown="javascript:setDragDropOn('#REGION_ID#');"
 onDblClick="showHide('#REGION_ID#')">
 #TITLE#
 </td>
   </tr>
    <tr id="#REGION_ID#_BODY"> 
     <td colspan="1">
       #BODY#<br>
       #CLOSE#&nbsp;&nbsp;&nbsp;#PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##HELP#
     </td>
    </tr>
  </table>
</div>

<script type="text/javascript">
<!--
 initWindow('#REGION_ID#',getInitX(), getInitY(), 'visible');
//-->
</script>

Die Template-Definitionen enthalten den HTML-Code, der die Darstellung der jeweiligen Region steuert. Neu sind in diesem Beispiel die JavaScript-Anweisungen. Bewegt man die Maus über die Titelleiste der Region, so werden zwei Mausereignisse besonders behandelt. Wird die Maustaste gedrückt (onMouseDown), so wird die in der Datei windowmanager.js definierte Funktion setDragDropOn() aufgerufen; der Browser "merkt" sich diese Region und verschiebt sie, wenn die Maus weiter bewegt wird. Das Mausereignis onMouseDown (also wenn die Maustaste losgelassen wird) wird, wird weiter unten behandelt. 

Klickt man die Titelzeile doppelt, dann wird die Funktion showHide() aufgerufen; diese minimiert oder maximiert das Fenster. Um die jeweilige Region zu identifizieren, wird die von der HTML DB bereitgestellte #REGION_ID# verwendet - die HTML DB stellt die Eindeutigkeit sicher. 

Das Aussehen der Region ergibt sich wie immer aus den HTML-Tags und den CSS-Attributen (HTML-Attribute style). Hier können Sie natürlich nach Belieben Änderungen vornehmen. Wichtig ist, dass die JavaScript-Kommandos vorhanden sind, damit alle Mausereignisse richtig abgefangen werden.

Abb. 4: Definition des neuen Regions-Templates bewegliche Region

Als nächstes passen Sie das Seitentemplate an. Damit die beweglichen Regionen funktionieren, reicht es, einem bereits bestehenden Seitentemplate einige Dinge hinzuzufügen. Sie müssen kein neues Seitentemplate anlegen. Bearbeiten Sie zunächst den Seiten-Header und fügen Sie dem Template folgenden Code hinzu.

<script type="text/javascript" src="#WORKSPACE_IMAGES#windowmanager.js"></script>
<script type="text/javascript">
<!--
  setSessionId('&APP_SESSION.');
//-->
</script>
<script for="document" event="onmousemove()" language="JScript" type="text/jscript">
<!--
  DragDrop();
//-->
</script>
<script for="document" event="onmouseup()" language="JScript" type="text/jscript">
<!--
  setDragDropOff();
//-->
</script>

Die erste Zeile lädt den JavaScript Code. Da Sie die statische Datei windowmanager.js keiner Anwendung zugewiesen haben, verwenden Sie den Präfix #WORKSPACE_IMAGES#. 

Damit die Fenster nach einem Reload der Seite nicht wieder auf den Ausgangspunkt zurückgesetzt werden, werden die Koordinaten in einem Cookie gespeichert. Das Cookie lebt nur solange, bis der Browser geschlossen wird. Zur Identifizierung dient die Session-ID der HTML DB. Darauf folgen die Aktionen für das Bewegen und das Loslassen der Maustaste. 

Wenn die Maus bewegt wird, soll die Funktion DragDrop() aufgerufen werden; beim Loslassen der Maustaste die Funktion setDragDropOff(). Diese beiden Definitionen beziehen sich übrigens auf den Internet Explorer - für Mozilla, Firefox oder Netscape befinden sich die entsprechenden Definitionen im JavaScript-Code am Ende der Datei windowmanager.js.

Fügen Sie dann dem Seiten-Footer folgendes hinzu:

<script type="text/javascript">
<!--
  initAllWindows();
//-->
</script>

Die Funktion initAllWindows() wird somit bei jedem Laden der Seite aufgerufen. Sie setzt die Fenster auf die im Cookie gespeicherten Koordinaten. Ohne diese Funktion würden die Fenster bei jedem erneuten Seitenaufbau wieder an ihre ursprüngliche Position zurückgesetzt - die Funktionalität wäre nutzlos. 

Nun sind alle Vorbereitungen getätigt. Legen Sie eine Region an (bspw. einen Bericht), weisen Sie als Regions-Template Ihr neues Template bewegliche Region zu und starten Sie die Seite neu.

Abb. 5: Das neu erstellte Regions-Template wird einem Bericht zugewiesen

Das Ergebnis sieht dann wie folgt aus. Achten Sie bitte darauf, dass JavaScript bei Ihrem Browser eingeschaltet ist. Die Region kann nun wie ein Windows-Fenster bewegt werden. Wenn Sie die Titelleiste doppelklicken, wird das Fenster minimiert - wenn Sie das minimierte Fenster wiederum doppelklicken, wird es maximiert.

Abb. 6: Das Ergebnis

Eine Besonderheit ist bei SVG-Diagrammen zu beachten. Fügen Sie in diesem Fall bei der Regionsdefinition unter Regionsquelle, wie auf der folgenden Abbildung dargestellt, das Attribut wmode="transparent" hinzu. 

Abb. 7: Spezialfall SVG-Grafiken: wmode-Attribut hinzufügen

Zurück zur Community-Seite