Example-Applikation using the CoreAll-Framework
- The Server-Side
- Client-Seitig
  - Templates
  - JavaScript

Example-Applikation using the CoreAll-Framework

This shows how a simple example application could work. It consits of a timer_api, able to return the servers internal time and a from app inherited javascript module using this the timer_api as web service. It just shows the actual servertim on loading the module and always if the “Actualize”-button is hit.

Download the sourcecode: coreall.corvent.ch/timer.zip
View the example

The Server-Side

services.inc.php

This defines the available services. A “service” is a with defined parameters instantiated PHP-Class (i.e. a concrete object). This file defines under which service names which classes instantiated with which parameters are available. As you can see it's possible to run the same Class with different parameters under different service names.

In this example 2 services timer_zeit und timer_datum will be available. Both just can return the server-time, but due to the different arguments given in the constructor, they will return the time formatted differently.

include("settings/timer_settings.inc.php"); // contains the array $TIMER
 
$CHAR_SET = "UTF-8"; 
 
$services = array();
 
$services['timer_zeit']['module']  = "modules/timer/timer_api.inc.php";
$services['timer_zeit']['class']   = "timer_api"; 
$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'];

settings/timer_settings.inc.php

This file contains the actual settings data, in this example two format-strings given to the two services. Of course this could also be directly defined in services.inc.php. The usage of two files is chosen to separate the Domain-knowledge from the knowledge about the implementation specific data representation needed.

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

modules/timer/timer_api.inc.php

This is the actual API. The only “real” Method it provides is getTime() returning the actual time. The Format is passed when the constructor is called. it will be the in services.inc.php parameter. In the example there will be instantiated two services from this class, one with a time fromat, one with a date format. (see services.inc.php and timer.js)

class timer_api {
	var $dateFormat;
 
	function __construct($dateFormat) {
		// $dateFormat must be a string, compatible to the PHP-Funktion date()
		$this->dateFormat = $dateFormat;
	}
 
	function __sleep() {
		// called automatically when the object is serialized
 		return (array_keys(get_object_vars($this))); // this is mandatory to properly serialize the object!!
	}
 
	function __wakeup() {
		// will be called automatically when the object is unserialized
	}
 
	function getTime() {
		return date($this->dateFormat);
	}
}

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