Beispiel-Applikation mit CoreAll
- Server-Seitig
- Client-Seitig
  - Templates
  - JavaScript

Beispiel-Applikation mit CoreAll

Dies ist die Dokumentation einer einfachen Beispiel-Applikation. Sie besteht aus dem Framework CoreAll, und einem einfachen Timer. Der Timer zeigt jeweils die während dem Laden aktuelle Zeit des Webservers an. Über den Button Aktualisieren wird die aktuelle Zeit erneut via HTTP-Request abgerufen.

Source Code herunterladen: coreall.corvent.ch/timer.zip
Bispiel anzeigen

Server-Seitig

services.inc.php

Hier wird definiert, welche JS-Objekte automatisch aus PHP-Klassen instanziert werden sollen. Das Objekt, welches sowohl server- als auch client-Seitig je einmal instanziert ist, wird Service genannt.

Schön an diesem Beispiel: Eine Klasse kann auch mehrmals unter verschiedenen Service-Namen instanziert werden. Unser Beispiel wird je ein Objekt timer_zeit und timer_datum haben, welche mit unterschiedlichen Daten instanziert werden.

include("settings/timer_settings.inc.php"); // enthält das Array $TIMER
 
$CHAR_SET = "UTF-8"; 
 
$services = array();
 
$services['timer_zeit']['module']  = "modules/timer/timer_api.inc.php";
$services['timer_zeit']['class']   = "timer_api"; // nicht unbedingt nötig, da Klassen-name gleich ist wie File-Name
$services['timer_zeit']['params']  = $TIMER['time'];
 
$services['timer_datum']['module'] = "modules/timer/timer_api.inc.php";
$services['timer_datum']['class']  = "timer_api";
$services['timer_datum']['params'] = $TIMER['euDate'];

zurück nach oben

settings/timer_settings.inc.php

Die Settings-Datei enthält im Normalfall ein (globales und konstantes) Array aller Settings-Daten, die zur Instanzierung oder Verwendung einer Modul-API oder eines Moduls benötigt werden.

Die folgenden drei Zeilen erstellen das Array $TIMER, das in der Datei services.inc.php verwendet wird. Theoretisch könnten die beiden gespeicherten Strings genausogut in services.inc.php abgelegt werden, darauf verzichten wir jedoch aus ästhetischen Gründen.

$TIMER = array();
$TIMER['time']   = "H:i:s";
$TIMER['euDate'] = "d.m.Y";

zurück nach oben

modules/timer/timer_api.inc.php

Dies ist die Applikations-API. Die einzige aufzurufende Methode ist getTime(), welche die aktuelle Zeit zurückgibt. Das Datumsformat wird beim Aufruf des Konstruktors __construct($dateFormat) festgelegt.

In unserer Applikation gibt es zwei Services, also zwei Objekte, dieser Klasse. Der eine gibt die aktuelle Zeit zurück, der andere das aktuelle Datum. (siehe services.inc.php und timer.js)

class timer_api {
	var $dateFormat;
 
	function __construct($dateFormat) {
		// $dateFormat muss ein String sein, kompatibel zur PHP-Funktion date()
		$this->dateFormat = $dateFormat;
	}
 
	function __sleep() {
		// wird automatisch aufgerufen, wenn das Objekt serialisiert wird
 		return (array_keys(get_object_vars($this))); // diese Zeile muss implementiert werden
	}
 
	function __wakeup() {
		// wird automatisch aufgerufen, wenn das serialisierte Objekt deserialisiert wird
	}
 
	function getTime() {
		return date($this->dateFormat);
	}
}

zurück nach oben

Client-Seitig

Templates

index.html

index.html ist das globale Template, welches direkt über die URL vom Browser aufgerufen wird.

Es bestimmt:

Welche Module eingebunden werden
Wie die Module angeordnet werden
Welche JS-Dateien für die Module geladen und instanziert werden müssen

Der Inhalt (also der Inhalt des Modul-Templates) wird an dieser Stelle in das entsprechende DIV-Element eingefügt.

Um ein Modul innerhalb des HTML-Templates anzuzeigen, genügt lediglich ein “Behälter”, welcher mit einer eindeutigen Kennung versehen wurde. In diesem Falle ein DIV-Element:

<html>
<head>
 
	<title>Tabellen-Demo</title>
	<script type='text/javascript' src='scripts/core/app.js'></script>
	<script type='text/javascript' src='scripts/core/stdfuncs.js'></script>
	<script type='text/javascript' src='scripts/core/phpremote.js'></script>
 
	<script>
 
	function initSite() {
		importJS('modules/timer/timer.js');
		waitWhileLoading();
	}
 
	function waitWhileLoading() {
		if (isScriptLoading() == true) {
			setTimeout(waitWhileLoading, 50);
		}
		else {
			setTimeout(startApplication, 250);	// Damit alle Vererbungen vor dem eigentlichen Start noch angelegt werden.. IE
		}
	}
 
	function startApplication() {
			new timer_module('timer');
	}
	</script>
</head>
 
<body onload='initSite()'>
 
<h1>Timer-Beispiel</h1>
<p>
Dieses Beispiel zeigt wie ein ganz einfaches Modul (modules/timer/timer.js) via AJAX
die aktuelle Zeit vom Server anfordert und anzeigt.
</p>
<div id='timer'></div>
 
</body>
</html>

Der Inhalt des Timer-Modules wird per JavaScript in dieses DIV eingefügt.

Damit das Modul geladen wird, muss sichergestellt sein, dass die JS-Klasse timer beim Laden der Seite mitgeladen und instanziert wird. Dies wird zum Beispiel so umgesetzt:

modules/timer/timer.html

Das Template für die Timer-Applikation. Dieser Code wird in das markierte DIV-Element in index.html eingefügt. Die Zellen mit den IDs zeit und datum werden den Output der API enthalten. (siehe timer.js)

<table cellspacing='0'>
	<tr>
		<th align='right'>Zeit:</th>
		<td id='zeit'></td>
	</tr><tr>
		<th align='right'>Datum:</th>
		<td id='datum'></td>
	</tr>
</table>
<br />
<button id='btn_actualize'>Aktualisieren</button>

zurück nach oben

JavaScript

modules/timer/timer.js

Dies ist der Clientseitige Teil der Applikation. Hier werden Daten verarbeitet, von der PHP-API abgerufen und ins HTML-Template eingefügt. Die Klasse selbst hisst timer_module und nicht einfach timer da in stdfuncs.js schon eine Klasse timer definiert wird (Diese kann zum setzten von TimeOuts und Intervallen verwendet werdenm, eine verbesserte Version von setTimeout und setInterval)

timer_module.prototype = new app();
 
function timer_module(container) {
	// Funktionen deklarieren
	this.initTimerModule = initTimerModule;
	this.actualize = actualize;
 
	// Konstruktor aufrufen
	if(arguments.length > 0) this.initTimerModule(container);
 
	// Konstruktor
	function initTimerModule(container) {
		this.initApp(container);   // Aufruf des Konstruktors der app Klasse
		this.importTemplate('modules/timer/timer.html', this.container);   // Pfad relativ zum per HTTP aufgerufenen File, nicht relativ zu timer.js
 
		// Den Event anhängen
		this.addCEvent('btn_actualize', 'click', 'actualize');
		// => Bei Klick event auf dem DOM-Objekt mit id "btn_actualize" rufe die Methode "actualize" auf!
 
		// Jetzt wird die PHP-Klasse instanziert
		this.zeitApi = new api('timer_zeit');
		this.datumApi = new api('timer_datum');
		this.actualize();
	}
 
	// Aktuelle Zeit von Server beziehen und in TD einfügen
	function actualize() {
		//PHP-Funktionen aufrufen
		var zeit = this.zeitApi.getTime();
		var datum = this.datumApi.getTime();
 
		// In HTML einfügen
		this.getObj('zeit').innerHTML = zeit;
		this.getObj('datum').innerHTML = datum;
	}
}

Folgende Funktionen wurden von der Klasse app in scripts/core/app.js geerbt:

initApp(container)       Ruft den Konstruktor der Parent-Klasse (app) auf
                                 container: String   ID des Elements, in das das Modul-Template eingefügt werden soll

importTemplate(url, targetObj)   Lädt Template und fügt es in HTML-Output ein.
                                 url:       String   Pfad zum Template, relativ zu index.html
                                 targetObj: String   ID des Elements, in das der Template-Inhalt eingefügt werden soll

getObj(id)                       Folgende Aktion: document.getElementById(this.prefix+obj)

addCEvent(obj, event, func)      Hängt einem Element einen Event-Listener an
                                 obj:       String   ID des Objekts
                                 event:     String   Event-Typ (z.B. 'click')
                                 func:      String   Name der aufzurufenden Funktion

zurück nach oben