a35 : HTML5 + CSS3 + JavaScript mit jQuery

allegro-Datenbanken ins Netz mit a35, auch auf Mobilgeräten

2012-11-28

Grundkonzept und Struktur
Ab August 2012 entstand eine neue Internet-Schnittstelle, Arbeitstitel a35. Zwar inspiriert von  a30,  arbeitet es aber nicht mit einem RIA-Entwicklungssystem (wie Adobe-Flex/Flash), sondern mit dem neuen Standard HTML5 plus JavaScript im Browser  sowie  PHP mit allegro-FLEX im Server.  (Als a30 entstand, hatte HTML5 noch keine genügend große Marktdurchdringung: siehe dazu http://www.allegro-c.de/doku/a30/rias.htm)
a35 kann für die Oberfläche das gesamte Potential von HTML5 nutzen, wogegen die a30-Oberfläche nur mit ActionScript-Kenntnissen zu modifizieren ist.
Wie bei a30 ist es aber auch hier möglich, weitgehend ohne eigene Bemühungen in HTML, CSS und JavaScript sowie PHP auszukommen. Wer über solche Kenntnisse (und etwas mehr Zeit) verfügt, kann diese unbeschränkt einbringen.
Erreicht wird im Endeffekt gegenüber a30 eine noch bessere Plattformunabhängigkeit, weil nur noch gängige Browsertechnik eingesetzt wird.

Perspektiven
Die Arbeit an a35 wird während des Jahres 2013 weiter vorangehen. Dabei sollen auch exemplarisch einige Admin-Funktionen realisiert werden sowie solche aus den Bereichen der Ausleihe, Erwerbung und Zeitschriftenverwaltung. Mittelfristig soll damit a35 zumindest für viele wichtige Teilaufgaben das Programm a99 ersetzen können: Der Vorteil: a35 braucht nur irgendeinen moderneren Browser, a99 aber ist ein Windows-Programm und läuft nicht auf anderen Endgeräten.

Beispiel: Kopie des OPAC der UB Braunschweig

Grundkonzept: Alle JavaScript- und PHP-Funktionen sind allgemein und universell, d.h. können unverändert zum Einsatz kommen für jede Datenbank. Spezifische Einstellungen werden nur in einer Datei vorgenommen, und zwar in   ajax3ini.php   (von  phpac  übernommen). Große Teile, insbesondere die FLEX-Jobs für den Zugriff zur Datenbank, können direkt und unverändert z.B. auch in die Mobil-Schnittstelle übernommen werden, die zur selben Zeit entwickelt wurde.

Frei gestaltbar und ausbaufähig sind

• die Oberfläche (s. Beispiel  a35start.php ) mit Formularen,  Links und  <div>'s  oder <span>'s  für die variablen Inhalte
• die FLEX-Jobs für den Zugriff zur Datenbank (s.  a35get.job  für das Laden eines Datensatzes).

a35start.php

• Das Oberflächenbild; kann als Beispiel und Vorlage für den Einsatz von a35 dienen, jedoch kann man es beliebig umgestalten.
• enthält die universellen JavaScript-Funktionen, mit denen ein FLEX-Job aufgerufen und dessen Ergebnisse verarbeitet werden können. In diese Funktionen braucht man nicht einzugreifen! Die meisten sind ausgelagert in  ../scripts/a35.js.
• zeigt an Beispielen, wie geeignete Links bzw. Formulare konstruiert sein müssen; diese rufen als  action  die JavaScript-Funktion  reqLink()  bzw.   reqForm()  auf  (diese stehen in  a35.js )
• Formularelemente, deren Inhalte an einen Job übergeben werden sollen,  müssen ein Attribut  id  der Form  id="Vuxy"  haben,  xy  beliebige Zeichen (daraus wird in der Jobdatei dann #uxy)
• Elemente, z.B. <div ...>, in die per Job etwas geschrieben werden soll, müssen ein  id  haben mit einem 3stelligen großbuchstabigen Label, z.B.  id="EXT"  oder  id="ERR"
• Die genannten Funktionen starten  ajax3.php   und 
• übergeben ihm den Jobnamen mit  ?JOB=...  sowie die Variablen aus dem Formular mit &Vuxy=...

Jede  *.job-Datei

•  wird aus  ajax3.php  gestartet
• erhält vom  ajax3.php  die Variablen:  aus  Vuxy  wird im Job  #uxy, d.h. im Job hat man diese ohne eigenes Zutun zur Verfügung, ferner  #uIP  mit der IP-Nummer des Browsers
• produziert Output mit  write- und export-Befehlen. Dieser Output ist eine lange Zeichenfolge, die durch Labels  _!_ABC  gegliedert ist
• Ein solches Label adressiert ein Element  id="ABC"  im aufrufenden HTML-Code, also hier  a35start.php,  dann kommt der auf _!_ABC  folgende Text bis zur nächsten Markierung  _!_  in das betr. Element.  Das erledigt die universelle Rückkehrfunktion  receivE()  in a35start.php. In Spezialfällen kann man hier Sonderbehandlungen einbauen (im Abschnitt unter  switch(label) ).

a35get.job   Zeigt einen Datensatz (unter Label  _!_EXT  in  a35start.php ); datenbankspezifisch

a35ind.job   Zeigt einen Register-Ausschnitt (Label  _!_REG  in  a35start.php )

a35erg.job   Zeigt eine Ergebnis-Kurzliste (Label  _!_ERG ), datenbankspezifisch

Die Jobdateien sollen in einem Unterordner des HTML-Ordners der Datenbank liegen. Dessen Name muß in ajax3ini.php stehen, z.B.

$Jobdir="a35jobs/";

sonst würden die Jobdateien direkt im HTML-Ordner gesucht, was ungünstig ist, denn dort wären sie von außen sichtbar. In den Job-Ordner legt man zudem eine Datei  .htaccess  mit der Zeile  Require user xyz. 

a35.js

• Enthält die universellen JavaScript-Funktionen, die man auf jeden Fall  braucht. Eingriffe sind nicht nötig. Direkt übernehmbar auch für die Mobilversion.
• Die Funktionen liefern einen markierten Datenstrom, der die  Labels  _!_ABC  enthält für das "Befüllen" der entsprechenden Elemente.   
  
  Dies sind die wichtigsten Funktionen:

• cReqObj() : Ein "request object" anlegen (für die Ajax-Technik)
• reqLink() : Aus einem Hyperlink einen Job starten (z.B. href="javascript:reqLink(123)" um den Satz 123 anzuzeigen)
• reqRes()  : Eine Suchanfrage ausführen lassen
• reqInd()  : Einen Registerabschnitt anzeigen lassen
• reqForm() : Aus einem Formular einen Job starten (s. a35start.php : <form … )  (sucht alle  Vu-Variablen aus dem Formular heraus)
• reqHelp() : Eine beliebige URL absenden, Ergebnisse erscheinen Info-Feld (Label "INF") .
• extWin()  : Eine beliebige URL in einem externen, kleineren Fenster öffnen

• ist ein universelles Skript, das nicht selber etwas ausgibt.
• Es startet jeden Job, z.B.  a35get.job, dessen Name ihm mit  ?JOB=… übergeben wird, und 
• reicht die Variablen  Vuxy  an diesen Job weiter. Sie kommen im Job als  #uxy  an
• Was der Job mit  write-  und  export-Befehlen ausgibt, sendet  ajax3.php sofort unverändert an den Browser.
• In dieses Skript braucht man nicht einzugreifen. Nur in  ajax3ini.php  sind einige Angaben zur Datenbank nötig (dieselben wie in av_ini.php).

Parameterdateien (im Datenordner oder Programmordner (wo  acon  liegt)!)
Die folgenden braucht man für jede Datenbank (Darin stehen jeweils Kommentare)

e-unihtm.apr, utf.apr (nur zur Umwandlung von inernem Datenbank-Text in UTF-8) 

a35erg.apr / d-khtm.apr + dk.apt (zur Kurz- bzw. Vollanzeige eines Datensatzes, nur diese zwei sind von der Datenbank-CFG abhängig)

ad-utf.apt, ad-htm.apt, d-htm.apt (Hilfstabellen für die Zeichenumcodierung und HTML-Darstellung)

Jedes Element, auch die Eingabefelder und Schaltflächen, verfügt über einen ToolTip, der beim Positionieren des Mauszeigers darauf erscheint.
Tip: Das Fenstersymbol ganz rechts oben vergrößert die a35-Anzeigefläche auf den gesamten verfügbaren Raum, wenn das Browserfenster in seiner Größe verändert wurde.

Die vier Quadranten haben folgende Labels und Bedeutungen: