Hs Ajax Visu Doku Dacom

HomeServer

AjaxVisu

Browser-Visualisierung
mit AJAX-Technologie

für

Gira
HomeServer und FacilityServer

DaCom HomeAutomation
2008 2009

DaCom HomeAutomation HomeServer AjaxVisu (RC)

… ist ein Apronym für die Wortfolge "Asynchronous Ajax [ˈeɪdʒæks]
JavaScript and XML". Es bezeichnet ein Konzept der
asynchronen Datenübertragung zwischen einem Server
und dem Browser, das es ermöglicht, innerhalb einer
HTML-Seite eine HTTP-Anfrage durchzuführen, ohne die
Seite komplett neu laden zu müssen. Das eigentliche
Novum besteht in der Tatsache, dass nur gewisse Teile
einer HTML-Seite oder auch reine Nutzdaten sukzessiv bei
Bedarf nachgeladen werden, womit Ajax eine
Schlüsseltechnik zur Realisierung des Web 2.0 darstellt.
Zitat aus Wikipedia
http://de.wikipedia.org/wiki/Ajax_(Programmierung) :

v0.99 Technische Änderungen vorbehalten! Seite 2 / 61
Stand: 26.06.2009 © DaCom Database Computing GmbH 2005-2009


Inhalt
Ajax [ˈeɪdʒæks] 2
Einleitung 5
Support 6
Voraussetzungen 7
Browser 7
Software 7
Geräte 7
Umfang 7
Besonderheiten 7
Installation 8
Umfang 8
Globale und lokale Installation 10
Windows Vista 11
Deinstallation und Sicherung 12
Muster-Projekt 13
Auto-Installation 13
Umfang 13
mehrere Projekte 13
Tool: HSAjaxFramework 14
Beschreibung 14
Voraussetzungen 14
Installations-Ort 14
Umfang 14
Parameter-Definition list.hs 14
list.hs 16
Parameterübergabe 17
Auswahl-Maske 17
Inbetriebnahme 18
Einrichtung 18
Seitengröße 19
Maskengröße und Visu-Fläche 19
PopUp-Seite 20
Übertragung 20
Start-Dateien 21
Code-Listing 21
Erklärungen 23
Start der Visu 24
Sicherheit 24
Reconnect und Refresh 25
Anmeldevarianten 26
Tabellarische Übersicht 26
Anmeldung über Login-Maske 26
Direkte Anmeldung inkl. Passwort 26
Direkte Anmeldung ohne Passwort 26
Anmelde-Verhalten 27
Login-Maske, Felder 28
Benutzername 28
Passwort 28
Design 28
Refreshzeit 28
Angaben speichern 28
Anmelden 28
5. Parameter 29
Installierte Dateien 30



Grafik-Dateien 31
Problem mit transparenten .png Dateien 31
Aktions-Fläche für Buttons (transparent) 31
Klick-Anzeige (rote Fläche) 31
Inaktive Buttons (weiße Fläche) 32
Keine Hintergrund-Klicks bei Masken (grauer Hintergrund) 32
Keine Hintergrund-Klicks bei PopUp's (grauer Hintergrund) 32
Bilder für Musterprojekt 32
Tipp: Erstellung von halbtransparenten Hintergründen 32
Javascript-Dateien 33
HTML-Dateien 34
Übersicht der Masken 34
Login-Masken 34
Einfache Masken 35
Komplexe Masken 36
Eingabe-Überprüfung 36
Login-Maske 1 + 2 37
Buddy-Liste 38
Datum+Uhrzeit Eingabe 39
Feiertage-Kalender 40
Kamera-Archiv 41
Meldungs-Archiv 42
Urlaubs-Kalender 43
Werte-Eingabe 44
UZSU-Start 45
UZSU-Event 46
UZSU-Datum-Auswahl 47
UZSU-Uhrzeit-Auswahl 48
UZSU-Filter-Auswahl 49
UZSU-Funktionen 50
UZSU-Datum-Wochentage 51
UZSU-Datum-Zeitraum 53
UZSU-Datum-Einzeltag 54
UZSU-Uhrzeit-Masken 55
Begriffs-Erklärungen 56
Ajax 56
Cookie 56
Apronym 56
Akronym 57
Programm Versions-Historie 58
Dokument Versions-Historie 59
Disclaimer 61



Mit der HomeServer AjaxVisu bekommen Sie eine browser- Einleitung
basierende Bedienmöglichkeit für den HomeServer und
FaciltyServer. Hiermit erhalten Sie eine mit HTML realisierte
Visualisierung mit neuester Ajax-Technologie.
Die bestehende Visualisierung wird um folgende Features
erweitert:
- Automatischer Refresh im Hintergrund
- Refresh-Rate variabel ab 1 Sekunde einstellbar
- Unterschiedliche Seitengrössen möglich
- PopUp-Seiten (Visu und Masken)

Vorliegende Dokumentation und Software-Module haben
zur Zeit noch den Status einer Vorabversion (RC Release
Candidate).

Beispiel: Urlaubskalender-PopUp aus dem Musterprojekt



Die HomeServer AjaxVisu ist ab sofort ein Open-Source-Projekt. Support
Der Source-Code steht allgemein zur Verfügung unter der GNU GPL
3.0 Lizenz.
Source-Codes:
http://www.dacom-homeautomation.de/page.php?pageid=deopensource
GNU GPL-Lizenz:
http://www.dacom-homeautomation.de/content/addons/gpl-3.0.txt

Daher gibt es für die HomeServer AjaxVisu keinen weiteren
Support!



Internet-Browser auf dem Bediengerät. Voraussetzungen

Browser
Das Musterprojekt wurde auf einem Windows-PC mit Internet
Explorer 7, Firefox 2 und 3 und Opera 9.25 getestet, auf Apple
mit Safari-Browser 3.0.4

Software
Auf dem HS/FS:
HS/FS-Experte ab Version 2.2.071114
(ab 14.11.2007 oder jünger)
HS/FS-Firmware ab Version 2.2.071114
(ab 14.11.2007 oder jünger)

Geräte
- PC mit Windows XP oder Vista
- Apple Computer

Die HomeServer AjaxVisu erweitert die vorhandene HS/FS Umfang
Visualisierung.
'Menü', 'Query', und 'Maske Wochenzeitschaltuhr' sind nicht im
Umfang enthalten.

Im Download bei www.dacom-ha.de wird ein Setup, bestehend
aus einen Design und einem Musterprojekt (siehe unten),
angeboten.

Die HomeServer AjaxVisu umfasst die Möglichkeit, Besonderheiten
unterschiedlich große Visu-Seiten zu definieren.
Eine Visu-Seite kann als PopUp Maske aufgerufen werden.
In einem Projekt ist kein zusätzliches Design für die
HomeServer AjaxVisu notwendig. Das Layout wird durch die
Visu bestimmt.



Ein HS/FS-Experte ab Version 2.2.x muss installiert sein! Installation

Im Folgenden wird davon ausgegangen, dass Sie den HS/FS
Experten unter dem Verzeichnis-Pfad

C:ProgrammeGirahs+fsexp23DE

installiert haben. Sollte das nicht der Fall sein, ersetzen Sie
bitte in allen nachfolgenden Pfad-Angaben diesen Pfad durch
Ihren eigenen.
Näheres zu den installierten Dateien finden Sie in den Kapiteln
"Grafik-Dateien", "Javascript-Dateien" und "HTML-Dateien".

Wenn Sie die ausführbare HS_AjaxVisu_Setup.exe benutzen,
folgen Sie einfach den Installations-Anweisungen. Die
benötigten Verzeichnisse werden automatisch angelegt.
Üblicherweise unter:
C:ProgrammeGirahs+fsexp23DEhsuploadhsav

Umfang
Folgende Dateien werden installiert:
[EXPERTE_DIR]doku
Diese Dokumentation -> HS_AjaxVisu_Doku_dacom.pdf
Flyer 01 -> HS_AjaxVisu_Flyer01_dacom.pdf

[EXPERTE_DIR]proj
hs_ajax_muster01_dacom.hs3
[alle Muster-Projekt-Dateien]

[EXPERTE_DIR]toolsav-dacom
av_lizenz_dacom.txt
av_liesmich_dacom.txt
uninst.exe
HSAjaxFramework.exe
list.hs
test.bat

[EXPERTE_DIR]hsuploadhsavimg
ax0.gif
hide.png
hide2.png
hide3.png
hide4.png

[EXPERTE_DIR]hsuploadhsavjs
ajax.js
gpl-3.0.txt



[EXPERTE_DIR]hsuploadhsav
start.htm
startgast.htm

[EXPERTE_DIR]hsuploadhsavtpl
pop_ca_default.htm
pop_ca_300x225.htm
pop_ca_640x480.htm
pop_dt_default.htm
pop_hol_default.htm
pop_list_default.htm
pop_login1.htm
pop_login2.htm
pop_uzsu_act1_default.htm
pop_uzsu_date1_default.htm
pop_uzsu_datetype1_default.htm
pop_uzsu_evt1_default.htm
pop_uzsu_filter1_default.htm
pop_uzsu_start_default.htm
pop_uzsu_time1_default.htm
pop_uzsu_timetype1_default.htm
pop_vac_default.htm
pop_val_default.htm

[START-MENÜ]DACOM_HAHS_AjaxVisu
HSAjaxVisu Dokumentation.lnk -> HS_AjaxVisu_doku_dacom.pdf
HSAjaxVisu Flyer.lnk -> HS_AjaxVisu_Flyer01_dacom.pdf
HSAjaxVisu Lies mich.lnk -> av_liesmich_dacom.txt
HSAjaxVisu Lizenz.lnk -> av_lizenz_dacom.txt
HSAjaxVisu Uninstall.lnk -> uninst.exe
HSAjaxVisu GNU GPL Lizenz.lnk -> gpl-3.0.txt
HSAjaxFramework.lnk -> HSAjaxFramework.exe



Globale und lokale
Die HomeServer AjaxVisu wird standardmäßig, d.h. bei
Installation
Installation mittels des Setup-Programms, unter
hsuploadhsav im Experten-Verzeichnis installiert, dessen Pfad
wiederum normalerweise C:ProgrammeGirahs+fsexp23DE
lautet. Diese Installations-Art ist die globale Installation.
Es gibt noch eine weitere Installationsmöglichkeit. Sie wird
lokale Installation genannt. Diese Installation erfolgt innerhalb
eines Projekts. Die Baumstruktur der HomeServer AjaxVisu
(hsuploadhsav) muss dabei erhalten bleiben!
! Achtung: Eine lokale Installation kann ausschließlich durch
Kopieren der Dateien in das lokale Verzeichnis erfolgen. Das
Setup-Programm bietet diese Möglichkeit nicht!
Das Schaubild (s.u.) zeigt eine globale (blauer Pfeil) und jeweils
eine lokale Installation für die Projekte "Haus - Familie Meier"
(roter Pfeil) und "Haus - Familie Müller" (grüner Pfeil).
Globale und lokale Installation können auch gleichzeitig
verwendet werden. Damit es dabei nicht zu Fehlern kommt, gilt
in einem solchen Fall die folgende Regel:
Lokal geht vor Global!
Das bedeutet, dass bei einer Datei, die es sowohl lokal, als
auch global gibt, immer die aus der lokalen Installation
verwendet wird. Nur wenn eine Datei nicht in der lokalen
Installation vorhanden ist, wird die der globalen Installation
verwendet.
Der Vorteil daran ist, dass der Inbetriebnehmer individuelle
Start-Dateien pro Projekt verwenden kann.
Ebenso können natürlich auch Bilder oder HTML-Dateien
(Maskendefinitionen) für einzelne Projekte abweichend vom
Standard (der in der globalen Installation abgelegt ist) in der
lokalen Installation definiert werden.
! Anmerkung: Ist die HomeServer AjaxVisu global installiert,
steht sie für alle im HS/FS Experten installierten Projekte zur
Verfügung.
! Anmerkung: Ist die HomeServer AjaxVisu lokal installiert,
steht sie nur für das jeweilige Projekt zur Verfügung!



Globale ( ) und lokale ( , ) Installationen Schaubild

Windows Vista
Sollten Sie mit dem Vista-Betriebssystem arbeiten und den
HS/FS Experten unter
"C:Programme..." bzw "C:Program Files..."
installiert haben, kann es trotz Administrator-Rechten dazu
kommen, dass die HomeServer AjaxVisu-Installation nicht
funktioniert.



Wenn Sie die ausführbare HS_AjaxVisu_Setup.exe benutzt Deinstallation
und Sicherung
haben, finden Sie im Start-Verzeichnis im von Ihnen gewählten
Ordner den Punkt "HSAjaxVisu Uninstall".
Damit deinstallieren Sie sowohl die HomeServer AjaxVisu, als
auch die beigefügte Dokumentation und das ebenfalls
mitinstallierte Musterprojekt.
! Anmerkung: Wenn Sie mehrere Versionen der HomeServer
AjaxVisu ins gleiche Experten-Verzeichnis installiert haben
(d.h., Sie haben eine neuere Version über eine ältere
installiert), wird durch die Benutzung einer "alten" Uninstall-
Routine, die im Windows Start-Menü evtl. noch vorhanden ist,
ihr aktuelles Projekt entfernt!
Haben Sie bei der Installation der HomeServer AjaxVisu die
"Sicherungs"-Funktion des Setup-Programms verwendet, wird
die damit gesicherte Version nicht deinstalliert.
Wenn Sie also ältere Versionen der HomeServer AjaxVisu
behalten möchten, nutzen Sie bei der Installation die
"Sicherungs"-Funktion des Installations-Programms.
Beim Deinstallieren wird immer der Ordner hsav und alles, was
sich darin befindet, gelöscht.
Die "Sicherungs"-Funktion des Installationsprogramms benennt
die im Verzeichnis hsupload existierende Version um, indem an
den Namen des Verzeichnisses hsav ein 4-stelliger Zähler
angehängt wird. Es können also theoretisch bis zu 9999 alte
Versionen gleichzeitig existieren.
Beispiel: Das alte Verzeichnis hsav wird umbenannt in
hsav.0001. Anschließend wird die neue Version wieder in das
Verzeichnis hsav installiert.



Ein Musterprojekt liegt der HomeServer AjaxVisu bei. Muster-Projekt

Auto-Installation
Das Musterprojekt hs_ajax_muster01_dacom wird automatisch in
dem ausgewählten Experten-Verzeichnis im Projekt-Ordner
installiert. Sie können es direkt nach der Installation und nach
dem Neustart des Experten öffnen.
Umfang
Auflösung: 1024x768 Vollbild

Visu-Masken:

- UZSU
- Kamera-Archiv
- Buddy-Liste
- Meldungsarchiv
- Werte-Eingabe
- Urlaubs-Kalender
- Feiertagskalender
- Datum+Uhrzeit Eingabe

PopUp's:

- Diagramme
- Kamera-Bilder

mehrere Projekte
Wenn Sie an mehreren Projekten gleichzeitig arbeiten und diese
im Wechsel auf den HS/FS übertragen, sollten Sie unbedingt
folgendes tun:
Leeren Sie vor jedem Projekt-Wechsel den Cache Ihres
Browsers!
Da Sie bei verschiedenen Projekten gleiche Dateinamen
verwenden, die Inhalte dieser Dateien aber unterschiedlich sein
können, kann es zu falschen Anzeigen im Browser führen, wenn
der Browser, anstatt die aktuelle Seite anzuzeigen, auf den
Cache zurückgreift und die gleichnamige Seite eines anderen
Projekts anzuzeigen versucht.



Tool:
HSAjaxFramework

Beschreibung
HSAjaxFramework ist ein Windows Werkzeug, das den MS
Internet Explorer (IE) startet.
Es werden dabei keine Steuerelemente des IE, wie z.B.
Navigationsknöpfe, etc. angezeigt.
Durch Parameter können Fensterposition, Fenstergröße,
Randbreite und Fensterdarstellung eingestellt werden.
HSAjaxFramework kann auf zwei verschiedene Arten
aufgerufen werden: Mit oder ohne Parameter. Als Parameter
kann der unten beschriebene <key> übergeben werden. Bei
Aufruf ohne Parameter erscheint eine Auswahl-Maske.
Bei Eingabe einer URL in der Auswahlmaske wird
HSAjaxFramework im Vollbild-Modus gestartet.

Voraussetzungen
Microsoft .NET Framework 2.0

Installations-Ort
HSAjaxFramework wird automatisch in dem ausgewählten
Experten-Verzeichnis unter toolshsajaxvisu installiert.

Umfang
- HSAjaxFramework.exe
- list.hs
- test.bat

Parameter-
Alle einstellbaren Parameter werden in der Definitions-Datei
Definition
list.hs (XML-Format) angelegt. list.hs
Verwenden Sie dazu einen Text-Editor.
Die Datei besteht aus folgenden Parametern (XML-Tags):

Sektion <device>

Innerhalb dieses XML-Tags wird ein HS/FS definiert.
Es können mehrere HS/FS in dieser Datei definiert werden;
jeder durch ein eigenes <device> XML-Tag.

Eindeutiger Schlüssel: <key>

Mit diesem Parameter kann das Programm aufgerufen werden.
Dann werden automatisch alle weiteren Parameter
berücksichtigt.
Beispiel: Siehe unten.



Fenster-Größe <windowstate>

0 = Normal
1 = Maximiert

Fenster-Titel <border>

0 = Randlos (kompletter Bildschirm, keine Windows-Leiste)
1 = mit Rand (Fenster hat Titel-Zeile und Windows-Leiste ist
sichtbar)

Fenster-Darstellung <ontop>

0 = Normal
1 = Fenster immer im Vordergrund

Beschreibung <text>

Bezeichnung des HS/FS für die Auswahlliste im Programm

URL für HS/FS-Aufruf <url>

Beachten Sie dabei, dass nicht XML-konforme Zeichen maskiert
werden müssen.
Im Beispiel: "&" muss als "&" geschrieben werden.

Horizontale Fensterposition bei Aufruf <pos_x>

Position, an der die linke, obere Ecke des Fensters platziert
wird. (Rechts/Links)
Wird nur berücksichtigt, wenn <windowstate>=0 ist.

Vertikale Fensterposition bei Aufruf <pos_y>

Position, an der die linke, obere Ecke des Fensters platziert
wird. (Oben/Unten)

Fensterbreite <width>


Fensterhöhe <height>




<?xml version="1.0" encoding="ISO-8859-1"?> list.hs
<devices>

<device>
<key>HS150</key>
<text>RedStone</text>
<url>http://192.168.0.150/opt/hsav/start.htm</url>
<windowstate>1</windowstate>
<border>1</border>
</device>

<device>
<key>HS144</key>
<text>Demo HS</text>
<url>http://192.168.0.144:88/hshtm?
user=u1&pw=u1&cl=GIRA800&ref=R3</url>
<windowstate>0</windowstate>
<pos_x>100</pos_x>
<pos_y>100</pos_y>
<width>800</width>
<height>600</height>
<border>1</border>
<ontop>1</ontop>
</device>

</devices>



Parameterübergabe
Das Programm kann auch per Parameterübergabe gestartet
werden.
Beispiel: HSAjaxFramework.exe HS150
HS150 ist der o.g. <Key>
Wird kein Parameter übergeben, erscheint die Auswahlliste.
Auswahl-Maske

Fenstertitel Punkt 1

Name des Programms mit Versions-Nummer.

Radio-Button Punkt 2

Hier klicken, um aus der Liste einen HS/FS auszuwählen.

Spalte "Key" Punkt 3

Eindeutiger Schlüssel für die Bezeichnung eines HS/FS.
Dieser Wert kann HSAjaxFramework als Parameter beim Aufruf
mitgegeben werden.

Spalte "Description" Punkt 4

Kurze Beschreibung des HS/FS.

Radio-Button Punkt 5

Hier klicken, um im Eingabe-Feld eine URL angeben zu können.
Beispiele:
- http://192.168.0.150/opt/hsav/startgast.html
- http://192.168.0.144:88/hshtm?user=u1&pw=u1&cl=GIRA800&ref=R3

OK-Button Punkt 6

Hier klicken, um Ihre Eingaben zu bestätigen.


Inbetriebnahme

Einrichtung
Bestehende Projekte kann man ohne zusätzliches Design um
die HomeServer AjaxVisu erweitern. Nach der Installation
müssen im Experten unter dem Menüpunkt

folgende zwei Symbole angelegt werden. Die Bild-ID ist bei
der Definition entscheidend!
- Bild-ID: XXPAGE
- Bild-ID: XXPOPUP
Die Namen der Symbole können frei vergeben werden; es
empfiehlt sich aber, sprechende Namen zu benutzen.
! Anmerkung: Beachten Sie, dass diese beiden Symbole nicht
durch kopieren oder duplizieren eines anderen Symbols
erstellt werden können!



Seitengröße
Möchte man die Fläche einer Standard-Visuseite begrenzen, ist
dies mit dem Symbol XXPAGE möglich. Setzt man dieses
Symbol auf eine Visu-Seite, so definiert man damit die untere
rechte Ecke. Alle Informationen, die außerhalb der begrenzten
Fläche liegen, werden nicht angezeigt.
Legen Sie wie oben beschrieben das Symbol an:
Bild-ID: XXPAGE
Bezeichnung (Name): "Ajax_Seitengröße".
Das Symbol kann optional verwendet werden. Wird dieses
Symbol nicht verwendet, zeigt der Browser die gesamte Fläche
der Visu-Seite an.
Es empfiehlt sich, ein kleines, quadratisches Symbol zu
verwenden. Die obere linke Ecke des Symbols definiert die
Seitengröße.

Der grüne Rahmen im linken Bild zeigt die Fläche, die durch
den oberen linken Punkt des kleinen grauen XXPAGE-Symbols
definiert wird. Das rechte Bild zeigt das in der HomeServer
AjaxVisu sichtbare Ergebnis.
! Anmerkung: Die Größe und Farbe des XXPAGE-Symbols
haben keine Bedeutung, da es ja außerhalb der definierten
Anzeige-Fläche liegt.

Maskengröße und
Die größte dem Musterprojekt beiliegende HTML-Masken ist 619
Visu-Fläche
Pixel breit und 523 Pixel hoch.
Wenn Sie die Größe der Visu-Fläche mittels des XXPAGE-
Symbols kleiner als die Größe der HTML-Masken definieren,
können die HTML-Masken nicht komplett angezeigt werden.



PopUp-Seite
Die HomeServer AjaxVisu bietet die Möglichkeit von PopUp-
Visu-Seiten.
Möchte man eine Visu-Seite über die aufrufende Visu-Seite
legen (PopUp), so ist dies mit dem Symbol XXPOPUP möglich.
Setzt man dieses Symbol auf eine Visu-Seite, so definiert man
damit die untere rechte Ecke und gleichzeitig diese Seite als
PopUp. Alle Informationen, die außerhalb der begrenzten Fläche
liegen, werden nicht angezeigt. Die Seite wird bei Aufruf
zentriert über die bestehende Seite gelegt.
Legen Sie wie oben beschrieben das Symbol an:
Bild-ID: XXPOPUP
Bezeichnung (Name): "Ajax_PopUp".
Es empfiehlt sich, ein kleines, quadratisches Symbol zu
verwenden. Die obere linke Ecke des Symbols definiert die
Seitengrösse.
Eine Maske (z.B. Meldungsarchiv) kann von einer PopUp-Seite
aus aufgerufen werden, der Aufruf einer weiteren Visu- oder
PopUp-Seite ist innerhalb einer PopUp-Seite nicht möglich.
Daher müssen Sie auf jeder PopUp-Seite ein Navigations-
Element definieren (z.B.: "Navigation: Zurück" oder
"Navigation: Startpunkt").
Mit einer PopUp-Seite kann man beispielsweise geräte-
spezifische PopUp's realisieren, wie z.B. ein PopUp zur Jalousie-
Steuerung.

Im linken Bild ist das spätere PopUp zusammen mit dem
kleinen roten XXPOPUP-Symbol zu sehen, das die
darzustellende Fläche abgrenzt. Rechts ist das Ergebnis, das
dann als PopUp in der HomeServer AjaxVisu zu sehen ist,
abgebildet.

Übertragung
Das Projekt muss immer komplett (Bilder+Daten+Ansagen) auf
den HS/FS übertragen werden.


Die Erklärungen zu den Start-Dateien erfolgen am Beispiel der Start-Dateien
Datei startgast.htm.
Die Datei startgast.htm unterscheidet sich nur in der mit roter
Schrift auf gelbem Grund markierten Zeile von start.htm.

Zeile Code Code-Listing
1 <html>
2 <head>
3 <title>HomeServer AjaxVisu</title>
4 <meta name="viewport" content="width=320;
user-scalable=1; minimum-scale=0.5; maximum-scale=1.0;
initial-scale=1.0;">
5 <script type="text/javascript" src="js/ajax.js"></script>
6 <style class="text/css">
7 body { background-color:black; }
8 div {}
9 img {}
10 input {padding:0px; margin:0px; }
11 </style>
12 </head>
13 <body scroll="no">
14 
15 <div id="xbase" style="position:absolute; top:0px;
left:0px; width:320px; height:480px; overflow:hidden;
border:0px;">
16 </div>
17
18 
19 <div id="xmark" style="position:absolute; top:0px;
left:0px; visibility:hidden;">
20 <img id="xmarkimg" src="img/hide.png"
style="position:absolute; top:0px; left:0px;" />
21 </div>
22
23 
24 <div id="xreconnect" style="position:absolute; top: 0px;
left: 0px; width:320px; height:480px;
background-color:#404040; text-align:center;
overflow:hidden; visibility:hidden;">
25 <div style="position:absolute; top:323px; left:371px;
width:282px; height:132px; background-color:white;">
26 <div style="position:absolute; top: 1px; left:
1px; width:280px; height:130px;
background-color:#ff8080;">

Zeile Code
27 <div style="position:absolute; top: 15px; left:
1px; width:278px; padding:0;
background-color:#ff8080; text-align:center;
font-family:arial; color:black;">
28 <span style="font-size:14pt; font-weight:bold;">
29 HomeServer AjaxVisu
30 </span>
31 <br/><br/>
32 <span style="font-size:10pt;
font-weight:normal;">
33 Stelle Verbindung wieder her...
34 </span>
35 <br/><br/>
36 <span id="tryCnt" style="font-size:18pt;">
37 **********
38 </span>
39 
40 </div>
41 </div>
42 </div>
43 </div>
44
45 
46 <script language="JavaScript">
47 startClientEx('user', 'passwd', 'design', 'refresh', 1);
48 </script>
49 </body>
50 </html>


Erklärungen
Die Erklärungen beziehen sich auf die Einstellungs-
Möglichkeiten in dieser Datei. Die Standard-HTML-Kommandos
werden als bekannt vorausgesetzt.

Zeilen Erklärungen
3 Seiten-Titel bzw. Laschen-Titel im Browser.
6-11 CSS-Einstellungen für Login- und Reconnect-Masken
7 Hintergrund-Einstellungen. Aktuell: Farbe
15 <div> "xbase". Dieser Container enthält die gesamte Visu.
19-21 <div> "xmark" mit img "xmarkimg". Das hier eingetragene Bild
("img/hide.png") wird für die Klick-Anzeige benötigt.
24 <div> "xreconnect". Container für die Reconnect-Anzeige-Maske.
25-42 Diese <div> definiert die Meldebox in der Reconnect-Anzeige-Maske.
Die <span>'s mit den ID's "tryCnt" und "tryState" müssen vorhanden
sein, ansonsten kann hier frei mit HTML gestaltet werden.
46-48 Client wird per JavaScript gestartet. Einige Dinge sind einstellbar:
47 Aufruf des Clients. In dieser Zeile unterscheiden sich die Start-Dateien
voneinander. Siehe dazu auch dieses und die darauf folgenden Kapitel.



Die HomeServer AjaxVisu wird durch den Aufruf einer der Start der Visu
folgenden Seiten in einem der o.a. Browser gestartet:

A.) http://IP_DES_HS-FS/opt/hsav/start.htm
B.) http://IP_DES_HS-FS/opt/hsav/startgast.htm

Bei der Variante B (siehe Beispiel, entnommen der dem Projekt
beigelegten startgast.htm) können die Parameter angepasst
werden.
Dies sind (in dieser Reihenfolge): 'User', 'Passwort', 'Design-
Kürzel', 'Refreshzeit' und 'Anmelde-Verhalten'. Eine detaillierte
Beschreibung der Felder finden Sie im Kapitel Login-Maske,
Felder, oder folgen Sie den o.g. Hyperlinks.
Im Kapitel "Code-Listing" ist die betreffende Zeile mit roter
Schrift auf gelbem Grund markiert.
Hier ein Beispiel für die Datei startgast.htm:
startClientEx('admin', 'admin', 'gira1024v', 'R2',1);

! Achtung: Wenn Sie sich mit der B-Variante einloggen,
werden alle Cookies gelöscht, d.h. beim nächsten Einloggen mit
Variante A müssen Sie alle Daten wieder neu eingeben.

! Anmerkung: Die Namen der beiden Dateien (start.htm,
startgast.htm) können natürlich beliebig vergeben werden.

Da bei der B-Variante die Anmeldedaten unverschlüsselt Sicherheit
gespeichert werden, empfehlen wir, diese Variante nur für
Benutzer, die eine ausschließlich interne Zugriffsberechtigung
haben, zu nutzen. Ansonsten kann nicht ausgeschlossen
werden, dass sich jemand Zugriff auf diese Datei verschafft und
die Daten missbraucht.

Variante A hingegen kann unbegrenzt eingesetzt werden, da in
diesem Fall keine Daten in ungeschützten Bereichen
gespeichert werden und bei jeder Anmeldung und bei jedem
Reconnect mindestens das Passwort abgefragt wird.



Bei einem Abbruch der Verbindung zum HS/FS, z.B. wegen Reconnect und
eines Neustarts des HS/FS, wird ein rötlich eingefärbtes Info- Refresh
Fenster mit der Überschrift "HomeServer AjaxVisu" und dem
Hinweis, dass gerade versucht wird, die abgebrochene
Verbindung wieder herzustellen, angezeigt. Dieser Reconnect-
Versuch wird in Abständen, die durch die Refreshzeit bestimmt
werden, wiederholt.
Im Info-Fenster wird eine Reihe von Sternchen angezeigt, von
denen jedes für einen bereits erfolgten Reconnect-Versuch
steht.
Sowie die Verbindung wieder hergestellt wurde, verschwindet
das Info-Fenster.
Hat man sich mit der in Kapitel "Start der Visu" beschriebenen
'Variante A' eingeloggt, so wird nach Verbindungs-Aufbau
wieder die Login-Maske angezeigt.
Bei Benutzung der 'B-Variante' steht man anschließend wieder
auf der Seite, auf der man vor Verbindungs-Abbruch aktiv war.
Ausnahme: PopUp-Seiten. Man steht wieder auf der Seite, von
der aus die PopUp-Seite aufgerufen wurde.



Zur Anmeldung gibt es drei Varianten: Anmeldevarianten

1. Anmeldung über Login-Maske
2. Daten inkl. Passwort in HTML-Startseite
3. Daten ohne Passwort in HTML-Startseite

Tabellarische
URL zur Anmeldung:
Übersicht

http://IP_DES_HS-FS/opt/hsav/[Startseite]

Anmeldetyp Angezeigte Startseite für Benutzerdaten Passwort
die Anmeldung eingeben eingeben

1 start.htm Ja Ja

2 startgast.htm / Nein Nein
Letzte besuchte Seite

3 startgast.htm / Nein Ja
Letzte besuchte Seite

Anmeldung über
Anmeldetyp 1
Login-Maske
Die Anmeldung erfolgt über die Login-Maske. Nach
erfolgreicher Anmeldung erscheint immer die für den Benutzer
definierte Startseite.
Siehe auch Kapitel "Login-Maske, Felder".

Direkte Anmeldung
Anmeldetyp 2
inkl. Passwort
Alle nötigen Benutzerdaten werden in der aufzurufenden
Startseite vermerkt. Es kann parametrisiert werden, ob nach
erfolgreicher Anmeldung die Visu-Startseite oder die zuletzt
besuchte Visu-Seite angezeigt werden soll.

Direkte Anmeldung
Anmeldetyp 3
ohne Passwort
Alle nötigen Benutzerdaten, außer dem Passwort, werden in der
aufzurufenden Startseite vermerkt. Beim Aufruf der Startseite
erscheint eine Passworteingabemaske. Es kann parametrisiert
werden, ob nach erfolgreicher Anmeldung die Visu-Startseite
oder die zuletzt besuchte Visu-Seite angezeigt werden soll.



Anmelde-Verhalten
Der 5. Parameter in startgast.htm
Dieser Parameter definiert, auf welcher Visu-Seite man nach
dem Einloggen landet. Es gibt kein Eingabe-Feld auf der Login-
Maske für diesen Parameter. Er muss direkt in der
startgast.htm geändert werden.
0 = Visu-Startseite
1 = zuletzt besuchte Visu-Seite



Die Login-Maske enthält nachfolgend aufgeführte Felder und Login-Maske,
Schaltknöpfe. Felder

Die Daten werden im HS/FS-Experten angelegt.

Benutzername
Eingabe-Feld, im Beispiel: 'admin'
Groß-/Klein-Schreibung beachten!
Benutzername für die Anmeldung am HS/FS.
Dieser Benutzer bekommt die Startseite in der Visualisierung
zugeordnet.

Passwort
Eingabe-Feld, im Beispiel: 'admin'
Groß-/Klein-Schreibung beachten!
Passwort für die Anmeldung am HS/FS.

Design
Eingabe-Feld, im Beispiel: 'gira1024v'
Kürzel.
Gibt an, welches Design bzw. welche Visu-Startseite angezeigt
werden soll; hat sonst keinen weiteren Einfluss auf die
HomeServer AjaxVisu.

Refreshzeit
Eingabe-Feld, im Beispiel: 'R1'
Kürzel.
Wird über ein Element in der Visu eine Änderung herbeigeführt,
beispielsweise ein Licht eingeschaltet, wird in Abständen, die
sich jedesmal verdoppeln, ein automatischer Refresh der Seite
(der Status des betreffenden Objektes wird ermittelt und auf
der Visu angezeigt) durchgeführt. Dies passiert solange, bis
eine Zeitspanne vergangen ist, die unter Refreshzeit im HS/FS
Experten eingetragen wurde.
Beispiel: Als Refreshzeit sind 5 Minuten (= 300 Sekunden)
eingetragen. Dann wird nach 2, 4, 8, 16, 32, 64, 128 und 256
Sekunden ein automatischer Refresh durchgeführt.

Angaben speichern
Check-Box
Wird diese Check-Box aktiviert, werden Benutzername und
Passwort sowie alle weiteren Einstellungen als Cookie auf dem
Gerät gespeichert.

Anmelden
Button
Mit Klick auf diesen Button meldet man sich mit den zuvor
gemachten Angaben am HS/FS an und startet bei
erfolgreichem Anmeldevorgang die Visualisierung.



5. Parameter
In der Datei Startgast.htm gibt es noch einen weiteren
Parameter, der allerdings kein Eingabefeld auf der Login-Maske
hat. Näheres dazu siehe hier.



Im Folgenden werden die Details der HomeServer AjaxVisu Installierte
beschrieben. Dateien

Diese Dateien können mit geringen HTML-Kenntnissen für
eigene Bedürfnisse (Farben etc.) angepasst werden.
Die installierten Dateien gliedern sich in mehrere Rubriken auf,
die jeweils in einem gesonderten Unterverzeichnis zu finden
sind.

Rubriken:
Grafik-Dateien
Javascript-Dateien
HTML-Dateien



Die Grafik-Dateien sind im Unterordner img des Ordners hsav Grafik-Dateien
abgelegt.
Der Pfad zum Ordner hsav lautet wie unter Installation
beschrieben.
Die Dateien dienen dazu, gewisse Aktionen (z.B. Klicks) zu
ermöglichen, zu verhindern oder auch nur anzuzeigen.
Die Dateien werden entsprechend der benötigten Fläche in
horizontaler und vertikaler Richtung gedehnt bzw. gestaucht.
! Anmerkung: Die im Folgenden beschriebenen Grafik-Dateien
können von Ihnen durch eigene ersetzt werden, wenn Ihnen
die im Musterprojekt vorhandenen nicht zusagen sollten. Sie
dürfen nicht einfach nur gelöscht werden, sondern es muss
immer eine Datei mit dem entsprechenden Namen vorhanden
sein!

Problem mit
! Achtung: transparenten .png
Alle Internet-Explorer Versionen kleiner als Version 7 Dateien
unterstützen keine transparenten Grafiken von Typ ".png".
Erst die Version 7 stellt diese Grafiken korrekt dar.

Aktions-Fläche für
ax0.gif
Buttons
Transparente Fläche, d.h. sie hat keine Farbe und ist somit (transparent)
100% durchsichtig.
Diese Datei wird dazu benutzt, über alle als anklickbar
definierten Visu-Elemente gelegt zu werden. Sie macht aus den
reinen Grafik-Elementen erst bedienbare Schaltflächen.

Klick-Anzeige (rote
hide.png
Fläche)
Nur teilweise transparente, rot eingefärbte Fläche, d.h. sie ist
nicht völlig durchsichtig.
Diese Datei wird dazu benutzt, für kurze Zeit über ein Visu-
Element gelegt zu werden, nachdem der Anwender darauf
geklickt hat. Damit wird der Klick dem Anwender sichtbar
gemacht. Nach ein bis zwei Sekunden verschwindet die rote
Fläche wieder. Dies passiert aber nur in der Visu; die Masken
sind davon ausgenommen.
! Anmerkung: Siehe dazu auch Erklärungen zur start.htm.



Inaktive Buttons
hide2.png
(weiße Fläche)
Nur teilweise transparente, weiß eingefärbte Fläche, d.h. sie ist
nicht völlig durchsichtig.
Diese Datei wird dazu benutzt, um z.B. in den Masken inaktive
Buttons zum Einen anzuzeigen und zum Anderen auch klick-
inaktiv zu machen.

Keine Hintergrund-
hide3.png
Klicks bei Masken
Halbtransparenter (grauer) Vollbild-Hintergrund, der nach (grauer
Aufruf einer Systemmaske (z.B. ZSU, Werteingabe …) unterlegt Hintergrund)
wird. Damit werden Klicks auf den Hintergrund vermieden.

Keine Hintergrund-
hide4.png
Klicks bei PopUp's
Halbtransparenter (grauer) Vollbild-Hintergrund, der nach (grauer
Aufruf einer Visu-PopUp-Seite unterlegt wird. Damit werden Hintergrund)
Klicks auf den Hintergrund vermieden.

Bilder für
Diese Dateien dienen der optischen Gestaltung des von DaCom
Musterprojekt
GmbH entworfenen Musterprojekt-Layouts und sind daher nicht
zwingend notwendig für den Betrieb der HomeServer AjaxVisu.

hoftor.png Bild für Kamera-Simulation

Tipp: Erstellung von
Mit dem Programm Paint.NET (Freeware der Firma Microsoft)
halbtransparenten
geht man vor wie folgt: Hintergründen
- Neues (leeres) Bild erstellen
- Alles markieren und löschen: (STRG-A), (ENTF)
- Im Fenster "Farben" eine Farbe auswählen
- Mit dem Tool "Farbeimer" alles komplett einfärben
- Im Fenster "Ebenen" auf den Button "Eigenschaften" (am
unteren Rand des Fensters, rechts) klicken
- Im nun angezeigten Popup-Fenster die Deckfähigkeit
nach Belieben einstellen



Die Javascript-Dateien sind im Unterordner js des Ordners hsav Javascript-
abgelegt. Dateien

beschrieben.
Die Dateien dienen dazu, den HTML-Dateien sozusagen Leben
einzuhauchen. Diese Dateien enthalten den Programm-Code,
der z.B. aus einem gezeichneten Button, bzw. der
transparenten Fläche, die über ihm liegt, einen tatsächlich auf
Klick reagierenden Button macht.
Die momentan verwendete Datei heißt ajax.js.



Die HTML-Dateien sind im Unterordner tpl des Ordners hsav HTML-Dateien
abgelegt.
beschrieben.
Diese Dateien definieren das Aussehen der vordefinierten Visu-
Masken. Damit kann der Systemintegrator eigene Anpassungen
am Masken-Design vornehmen.

Übersicht der
!Anmerkung: Die Wochen-Zeitschaltuhr ist nicht Umfang der Masken
HomeServer AjaxVisu. Verwenden Sie stattdessen die
Universalzeitschaltuhr.
! Anmerkung: Die Masken Diagramm und Kamera werden in
der HomeServer AjaxVisu nicht (mehr) benötigt, da über die
Einbettung in die Visu-Fläche das Gleiche und noch mehr in
größerer Variationsbreite erreicht werden kann.
! Anmerkung: Einige Masken der Universal-Zeitschaltuhr
werden in der HomeServer AjaxVisu nicht mehr benötigt, da
sich das Handling gegenüber der Standard-Darstellung
geändert hat. Die Funktionalität ist dennoch in vollem Umfang
erhalten geblieben.

Login-Masken
Die beiden hier genannten Dateien werden abhängig von der
verwendeten Startseite vom Gerät aufgerufen.

Maske '.HTM'-Datei

Login-Maske 1 (Alle Angaben) pop_login1.htm
Login-Maske 2 (Nur Passwort) pop_login2.htm

Die aufgeführten Masken sind Einzel-Masken und benötigen
daher nur jeweils eine '.HTM'-Datei.



Einfache Masken

Maske '.HTM'-Datei

Buddy-Liste pop_list_default.htm
Datum+Uhrzeit Eingabe pop_dt_default.htm
Feiertage-Kalender pop_hol_default.htm
Kamera-Archiv pop_ca_default.htm
pop_ca_300x225.htm *
pop_ca_640x480.htm *
Meldungs-Archiv pop_list_default.htm
Urlaubs-Kalender pop_vac_default.htm
Werte-Eingabe pop_val_default.htm

Die aufgeführten Masken sind Einzel-Masken und benötigen
daher nur jeweils eine '.HTM'-Datei.

Die beiden mit * gekennzeichneten '.HTM'-Dateien des Kamera- Alternative Kamera-
Archive
Archivs sind zusätzlich im Musterprojekt enthalten.
Die Datei pop_ca_300x225.htm ist per Default identisch mit der
Datei pop_ca_default.htm. Das Design dieser Dateien zeigt drei
Kamera-Bilder nebeneinander mit einer Grösse von 300x225
Pixeln.
Alternativ liegt noch eine weitere Kamera-Archiv-Datei mit
Namen pop_ca_640x480.htm bei, deren Design nur ein
Kamerabild, dieses aber in einer Grösse von 640x480 Pixeln,
darstellt.
Um eine der Varianten zu testen, kopieren Sie sie als
pop_ca_default.htm und überschreiben damit die existierende
pop_ca_default.htm.
Übertragen Sie nun ihr Projekt nochmals auf den HS/FS.
Evtl. müssen Sie den Cache Ihres Browsers löschen, um das
Ergebnis sehen zu können.



Komplexe Masken

Maske '.HTM'-Datei

Universal-Zeitschaltuhr pop_uzsu_start_default.htm
(UZSU) pop_uzsu_evt_default.htm
pop_uzsu_datetype1_default.htm
pop_uzsu_timetype1_default.htm
pop_uzsu_filter1_default.htm
pop_uzsu_act1_default.htm
pop_uzsu_ date2_default.htm
pop_uzsu_ date3_default.htm
pop_uzsu_time1_default.htm

Die aufgeführte Maske hat mehrere Unter-Masken und benötigt
daher mehrere '.HTM'-Dateien.

Eingabe-
Bitte beachten Sie, dass bei der Eingabe von Werten u.U. Überprüfung
nicht sofort während der Eingabe überprüft werden kann,
ob der eingegebene Wert korrekt oder sinnvoll ist.
Diese Überprüfung findet dann aber spätestens bei Klick
auf den in der Maske vorhandenen OK-Button statt.
Sollten Sie beispielsweise ein ungültiges Datum
eingegeben haben, so wird üblicherweise bei Klick auf OK
das Datums-Feld wieder geleert.
Kontrollieren Sie daher bitte immer, ob die von Ihnen
gemachten Angaben auch akzeptiert wurden.



Login-Maske 1 + 2
Dateiname: pop_login1.htm / pop_login2.htm

Der HTML-Inhalt der Maske muss sich in einem DIV-Container Einführung
befinden, der mit der ID "pop_login" gekennzeichnet ist. Die
Anordnung innerhalb dieses Containers ist bis auf eine
Ausnahme frei gestaltbar und wird nur durch HTML begrenzt.
Die Ausnahme besteht darin, dass die Eingabe-Felder der
Maske sich in einem Container befinden müssen, der mit der ID
"pop_local1" gekennzeichnet ist. Dieser Container muss sich
innerhalb des Containers "pop_login" befinden. Die Anordnung
innerhalb dieses Containers ist frei gestaltbar und wird nur
durch HTML begrenzt.
Die Masken für Login 1 und Login 2 sind fast identisch, sie
unterscheiden sich nur in der Anzahl der in ihnen
erscheinenden Eingabe-Felder. Die Spalten login1 und login2 in
der nachfolgenden Tabelle definieren, welche Felder in welcher
der beiden Masken vorkommen.

Element-Liste
ID login1 login2 Typ Beschreibung

pop_login x x div Container für gesamtes Popup

pop_titel1 x x div Feld für Maskentitel 1

pop_titel2 x x div Feld für Maskentitel 2 (optional)

pop_ico x x img Logo in Titelzeile (optional)

pop_local1 x x div Container für alle Eingaben

login_user x input Eingabe-Feld: Name

login_pw x x input Eingabe-Feld: Passwort

login_refresh x input Eingabe-Feld: Refresh-Zeit

login_design x input Eingabe-Feld: Design-Kürzel

login_save_pw x input Check-Box: Angaben speichern

btnok x x input Button: OK - Eingaben abschicken

Zurück zur Übersicht der Masken



Buddy-Liste
Dateiname: pop_list_default.htm

befinden, der mit der ID "pop_list" gekennzeichnet ist. Die
Anordnung innerhalb dieses Containers ist frei gestaltbar und
wird nur durch HTML begrenzt.
Alle als Button gekennzeichneten Elemente können z. B. durch
ein Image-Tag dargestellt werden. Sie müssen einen
eindeutigen Namen erhalten!
! Anmerkung: Diese Maske benutzt dieselbe '.htm'-Datei wie
das Meldungs-Archiv.

In dieser Maske werden zwei Mengen-Variablen verwendet: Mengen-Elemente
pop_linexa und pop_linexb. Diese Variablen haben einen Zähler
(x) im Namen und werden von der Programmlogik automatisch
erkannt. Es können bis zu 1000 Elemente mit Zähler-Werten
zwischen 1 und 1000 von jeder der beiden Mengen-Variablen in
der Maske verwendet werden.

Im Musterprojekt werden jeweils fünf Elemente der beiden
Mengen-Variablen verwendet.
Element-Liste
D Name Typ Beschreibung

pop_list div Container für gesamtes Popup

pop_titel1 div Feld für Maskentitel 1

pop_titel2 div Feld für Maskentitel 2 (optional)

pop_ico img Logo in Titelzeile (optional)

pop_line1a div Zeile 'x' - Name
bis
pop_line1000a 'x' kann Werte von 1 bis 1000 annehmen

pop_line1b div Zeile 'x' - Datum + Uhrzeit
bis
pop_line1000b 'x' kann Werte von 1 bis 1000 annehmen

pop_back 9 img Button, Zurück

pop_taste1 1 img Button, zur vorhergehenden Seite springen

pop_taste2 2 img Button, zur nächsten Seite springen

pop_taste3 3 img Button, zur 1. Seite springen

pop_taste4 4 img Button, zur letzten Seite springen




Datum+Uhrzeit
Dateiname: pop_dt_default.htm
Eingabe

befinden, der mit der ID "pop_dt" gekennzeichnet ist. Die

Element-Liste
ID Name Typ Beschreibung

pop_dt div Container für gesamtes Popup




pop_value div Feld für Wertanzeige

pop_taste10 10 img Button, Ziffer 0











pop_taste1 1 img Button, OK - Wert speichern

pop_taste2 2 img Button, Clear - Wert löschen

pop_taste3 3 img Button, Datum eingeben

pop_taste4 4 img Button, Uhrzeit eingeben




Feiertage-Kalender
Dateiname: pop_hol_default.htm

befinden, der mit der ID "pop_hol" gekennzeichnet ist. Die

Element-Liste

pop_hol div Container für gesamtes Popup

hol_titel1 div Feld für Maskentitel 1

hol_titel2 div Feld für Maskentitel 2 (optional)

hol_ico img Logo in Titelzeile (optional)

hol_value div Feld für Wertanzeige

hol_taste10 1000 img Button, Ziffer 0










hol_back 9 img Button, Zurück

hol_taste1 1 img Button, OK - Wert speichern

hol_taste2 2 img Button, zusätzlichen Feiertag anlegen

hol_taste3 3 img Button, aktuellen Feiertag löschen

hol_taste4 4 img Button, zum vorherigen Feiertag wechseln

hol_taste5 5 img Button, zum nächsten Feiertag wechseln




Kamera-Archiv
Dateiname: pop_ca_default.htm

befinden, der mit der ID "pop_ca" gekennzeichnet ist. Die

pop_prevx und pop_linex. Diese Variablen haben einen Zähler

Im Musterprojekt werden jeweils drei Elemente der beiden
Element-Liste

pop_ca div Container für gesamtes Popup




pop_prev1 101 img Button, Kamerabild 'x'
bis bis
pop_prev1000 1100 'x' kann Werte von 1 bis 1000 annehmen

pop_line1 div Aufnahme-Datum des angezeigten Bildes
bis
pop_line1000

pop_prev div Aufnahme-Datum des vorhergehenden
Bildes

pop_next div Aufnahme-Datum des nächsten Bildes


pop_taste1 1 img Button, zum 1. Bild springen

pop_taste2 2 img Button, zum vorherigen Bild springen

pop_taste3 3 img Button, zum nächsten Bild springen

pop_taste4 4 img Button, zum letzten Bild springen




Meldungs-Archiv
Dateiname: pop_list_default.htm

befinden, der mit der ID "pop_list" gekennzeichnet ist. Die
! Anmerkung: Diese Maske benutzt dieselbe '.htm'-Datei wie
die Buddy-Liste.

pop_linexa und pop_linexb. Diese Variablen haben einen Zähler

Im Musterprojekt werden jeweils fünf Elemente der beiden
Element-Liste

pop_list div Container für gesamtes Popup




pop_line1a div Zeile 'x' - Meldungs-Text
bis
pop_line1000a 'x' kann Werte von 1 bis 1000 annehmen

pop_line1b div Zeile 'x' - Datum + Uhrzeit
bis
pop_line1000b 'x' kann Werte von 1 bis 1000 annehmen


pop_taste1 1 img Button, zur vorhergehenden Seite springen

pop_taste2 2 img Button, zur nächsten Seite springen

pop_taste3 3 img Button, zur 1. Seite springen

pop_taste4 4 img Button, zur letzten Seite springen




Urlaubs-Kalender
Dateiname: pop_vac_default.htm
befinden, der mit der ID "pop_vac" gekennzeichnet ist. Die

Element-Liste

pop_vac div Container für gesamtes Popup

vac_titel1 div Feld für Maskentitel 1

vac_titel2 div Feld für Maskentitel 2 (optional)

vac_ico img Logo in Titelzeile (optional)

vac_value div Feld für Wertanzeige

vac_state1 div Container für Button vac_taste4

vac_taste10 1000 img Button, Ziffer 0










vac_back 9 img Button, Zurück

vac_taste1 1 img Button, OK - Wert speichern

vac_taste2 2 img Button, von-Datum bearbeiten

vac_taste3 3 img Button, bis-Datum bearbeiten

vac_taste4 4 img Button, Urlaubs-Kalender aktivieren/deaktivieren

vac_taste5 5 img Button, Clear - Datum löschen
(Nur im Bearbeiten-Modus)




Werte-Eingabe
Dateiname: pop_val_default.htm

befinden, der mit der ID "pop_val" gekennzeichnet ist. Die

Element-Liste

pop_val div Container für gesamtes Popup



pop_value div Feld für Wertanzeige













pop_taste1 1 img Button, OK - Wert speichern

pop_taste2 2 img Button, Clear - Wert löschen

pop_taste3 3 img Button, Backspace - Letzte Ziffer löschen

pop_taste4 4 img Button, '+/-' (Vorzeichenwechsel)

pop_taste5 5 img Button, Komma (Dezimal-Trenner)




UZSU-Start
Dateiname: pop_uzsu_start_default.htm
befinden, der mit der ID "pop_uzsu_start" gekennzeichnet ist.
Die Anordnung innerhalb dieses Containers ist frei gestaltbar
und wird nur durch HTML begrenzt.

In dieser Maske werden drei Mengen-Variablen verwendet: Mengen-Elemente
uzsu_linexa, uzsu_linexb und uzsu_linex. Diese Variablen
haben einen Zähler (x) im Namen und werden von der
Programmlogik automatisch erkannt. Es können bis zu 1000
Elemente mit Zähler-Werten zwischen 1 und 1000 von jeder
der drei Mengen-Variablen in der Maske verwendet werden.

Im Musterprojekt werden jeweils vier Elemente der drei

UZSU-Event-Maske ruft auf

ID Name Typ Beschreibung Element-Liste

pop_uzsu_start div Container für gesamtes Popup

uzsu_titel1 div Feld für Maskentitel 1

uzsu_titel2 div Feld für Maskentitel 2 (optional)

uzsu_ico img Logo in Titelzeile (optional)

uzsu_state1 div Container für Button uzsu_taste4

uzsu_line1a div UZSU 'x' - Überschrift
bis
uzsu_line1000a 'x' kann Werte von 1 bis 1000 annehmen

uzsu_line1b div UZSU 'x' - Werte
bis
uzsu_line1000b 'x' kann Werte von 1 bis 1000 annehmen

uzsu_line1 1001 img Button, UZSU 'x' - Symbol
bis bis
uzsu_line1000 2000 'x' kann Werte von 1 bis 1000 annehmen

uzsu_back 9 img Button, Zurück

uzsu_taste1 1 img Button, vorhergehende Seite aufrufen

uzsu_taste2 2 img Button, nächste Seite aufrufen

uzsu_taste3 3 img Button, neue UZSU anlegen

uzsu_taste4 4 img Button, UZSU aktivieren/deaktivieren




UZSU-Event
Dateiname: pop_uzsu_evt1_default.htm

befinden, der mit der ID "pop_uzsu_event" gekennzeichnet ist.

Start-Maske wird aufgerufen von

Datum-Auswahl ruft auf
Uhrzeit-Auswahl
Filter-Auswahl
Funktions-Auswahl
Element-Liste

pop_uzsu_event div Container für gesamtes Popup

uevt_titel1 div Feld für Maskentitel 1

uevt_titel2 div Feld für Maskentitel 2 (optional)

uevt_ico img Logo in Titelzeile (optional)

uevt_line1a div Datum-Auswahl - Überschrift

uevt_line1b div Datum-Auswahl - Werte

uevt_line1 1001 img Button, Datum-Auswahl - Symbol

uevt_line2a div Uhrzeit-Auswahl - Überschrift

uevt_line2b div Uhrzeit-Auswahl - Werte

uevt_line2 1002 img Button, Uhrzeit-Auswahl - Symbol

uevt_line3a div Filter-Auswahl - Überschrift

uevt_line3b div Filter-Auswahl - Werte

uevt_line3 1003 img Button, Filter-Auswahl - Symbol

uevt_line4a div Funktion-Auswahl - Überschrift

uevt_line4b div Funktion -Auswahl - Werte

uevt_line4 1004 img Button, Funktion -Auswahl - Symbol

uevt_back 9 img Button, Zurück

uevt_taste1 1 img Button, OK - UZSU speichern

uevt_taste2 2 img Button, Clear - UZSU löschen




UZSU-Datum-
Dateiname: pop_uzsu_datetype1_default.htm
Auswahl
befinden, der mit der ID "pop_uzsu_datetypes" gekennzeichnet
ist. Die Anordnung innerhalb dieses Containers ist frei
gestaltbar und wird nur durch HTML begrenzt.

UZSU-Event-Maske wird aufgerufen von

Datum-Wochentage ruft auf
Datum-Zeitraum
Datum-Einzeltag
Element-Liste

pop_uzsu_datetypes div Container für gesamtes Popup

udtt_titel1 div Feld für Maskentitel 1

udtt_titel2 div Feld für Maskentitel 2 (optional)

udtt_ico img Logo in Titelzeile (optional)

udtt_line1a div Wochentags-Maske - Überschrift

udtt_line1 1001 img Button, Wochentags-Maske - Symbol

udtt_line2a div Zeitraum-Maske - Überschrift

udtt_line2 1002 img Button, Zeitraum-Maske - Symbol

udtt_line3a div Einzeltag-Maske - Überschrift

udtt_line3 1003 img Button, Einzeltag-Maske - Symbol

udtt_back 9 img Button, Zurück




UZSU-Uhrzeit-
Dateiname: pop_uzsu_timetype1_default.htm
Auswahl
befinden, der mit der ID "pop_uzsu_timetypes" gekennzeichnet
ist. Die Anordnung innerhalb dieses Containers ist frei
gestaltbar und wird nur durch HTML begrenzt.

utt_linexa und utt_linex. Diese Variablen haben einen Zähler

Im Musterprojekt werden jeweils vier Elemente der beiden


Alle Uhrzeit-Masken ruft auf

Element-Liste

pop_uzsu_timetypes div Container für gesamtes Popup

utt_titel1 div Feld für Maskentitel 1

utt_titel2 div Feld für Maskentitel 2 (optional)

utt_ico img Logo in Titelzeile (optional)

utt_line1a div Uhrzeit-Maske Zeile 'x' - Überschrift
bis
utt_line1000a 'x' kann Werte von 1 bis 1000 annehmen

utt_line1 1001 img Button, Uhrzeit-Maske Zeile 'x' - Symbol
bis bis
utt_line1000 2000 'x' kann Werte von 1 bis 1000 annehmen

utt_back 9 img Button, Zurück

utt_taste1 1 img Button, vorhergehende Seite aufrufen

utt_taste2 2 img Button, nächste Seite aufrufen




UZSU-Filter-
Dateiname: pop_uzsu_filter1_default.htm
Auswahl
befinden, der mit der ID "pop_uzsu_filter" gekennzeichnet ist.

ufilt1_linexa und ufilt1_linex. Diese Variablen haben einen
Zähler (x) im Namen und werden von der Programmlogik
automatisch erkannt. Es können bis zu 1000 Elemente mit
Zähler-Werten zwischen 1 und 1000 von jeder der beiden
Mengen-Variablen in der Maske verwendet werden.



setzt Filter und wechselt zurück zur UZSU-Event-Maske ruft auf

Element-Liste
D Name Typ Beschreibung

pop_uzsu_filter div Container für gesamtes Popup

ufilt_titel1 div Feld für Maskentitel 1

ufilt_titel2 div Feld für Maskentitel 2 (optional)

ufilt_ico img Logo in Titelzeile (optional)

ufilt_line1a div Filter Zeile 'x' setzen - Überschrift
bis
ufilt_line1000a 'x' kann Werte von 1 bis 1000 annehmen

ufilt_line1 1001 img Button, Filter Zeile 'x' setzen - Symbol
bis bis
ufilt_line1000 2000 'x' kann Werte von 1 bis 1000 annehmen

ufilt_back 9 img Button, Zurück

ufilt_taste1 1 img Button, vorhergehende Seite aufrufen

ufilt_taste2 2 img Button, nächste Seite aufrufen




UZSU-Funktionen
Dateiname: pop_uzsu_act1_default.htm

befinden, der mit der ID "pop_uzsu_action" gekennzeichnet ist.

uact1_linexa und uact1_linex. Diese Variablen haben einen
Zähler (x) im Namen und werden von der Programmlogik
automatisch erkannt. Es können bis zu 1000 Elemente mit
Zähler-Werten zwischen 1 und 1000 von jeder der beiden
Mengen-Variablen in der Maske verwendet werden.



setzt Aktion und wechselt zurück zur UZSU-Event-Maske ruft auf

Element-Liste

pop_uzsu_action div Container für gesamtes Popup

uact1_titel1 div Feld für Maskentitel 1

uact1_titel2 div Feld für Maskentitel 2 (optional)

uact1_ico img Logo in Titelzeile (optional)

uact1_line1a div Aktion Zeile 'x' setzen - Überschrift
bis
uact1_line1000a 'x' kann Werte von 1 bis 1000 annehmen

uact1_line1 1001 img Button, Aktion Zeile 'x' setzen - Symbol
bis bis
uact1_line1000 2000 'x' kann Werte von 1 bis 1000 annehmen

uact1_back 9 img Button, Zurück

uact1_taste1 1 img Button, vorhergehende Seite aufrufen

uact1_taste2 2 img Button, nächste Seite aufrufen




UZSU-Datum-
Dateiname: pop_uzsu_date1_default.htm
Wochentage
befinden, der mit der ID "pop_uzsu_date1" gekennzeichnet ist.

UZSU-Datum-Auswahl-Maske wird aufgerufen von

UZSU-Datum-Auswahl-Maske ruft auf

Bei den Elementen udat1_wt1_1 bis udat1_wt7_1 und udat1_wt1_0 bis Spezial-Elemente
udat1_wt7_0 handelt es sich um Container-Elemente. Die Elemente
xx_1 werden dargestellt, wenn das betreffende Element
aktiviert ist, die Elemente xx_0 werden dargestellt, wenn das
betreffende Element deaktiviert ist.

Im Musterprojekt enthält z.B. die Container-
Div udat1_wt1_1 den Namen "Mo" und ein
weiteres Div-Element, das als kleine grüne
Lampe dargestellt wird.

Die Container-Div udat1_wt1_0 enthält
ebenfalls den Namen "Mo" und ein weiteres
Div-Element, das hier aber als kleine rote
Lampe dargestellt wird.

Die Gestaltungsmöglichkeiten liegen allerdings ganz beim
Benutzer: Entscheidend sind die Container-Divs mit den ID's
udat1_wtn_1 bzw. udat1_wtn_0 (n=1-7). Alles, was in diesen Divs
enthalten ist, wird abhängig vom Aktivierungs-Zustand
angezeigt oder nicht.
! Anmerkung: Falls eine Anzeige unterschiedlicher Zustände
nicht gewünscht ist, müssen die zueinander gehörigen xx_1-
und xx_0-Elemente identisch definiert werden.
Das bedeutet: udat1_wt1_1 und udat1_wt1_0 müssen identisch sein,
udat1_wt2_1 und udat1_wt2_0 müssen identisch sein, usw.


Hs Ajax Visu Doku Dacom

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Hs Ajax Visu Doku Dacom