In order to use -webkit and/or -moz style CSS3 attributes such as ‘-webkit-transform’ or ‘-moz-rounded-border’ to generate rounded borders, transformations etc. you have to extend the mootools Element.Styles hash. Doing this enables you to use the Element.setStyle() method. You can even use the whole mootools effects library and tween -webkit and/or -moz styles.

Element.Styles.extend({
	WebkitTransform: 'rotateX(@deg)'
});

The styles property-name has to be given camelCases. Thus ‘-webkit-transform’ has to be given as ‘WebkitTransform’. Specify how the property has to be set by defining a string like ‘rotateX(@deg)’ and leaving the @ to be replaced by the value you set the css property to.

Read on for an example.

Element.Styles.extend({
	WebkitTransform: 'rotateX(@deg)' // @ will get replaced by the value you pass over
});

window.addEvent('domready', function() {
	$('button').addEvent('click', function() {
		var swingAnimation = new Fx.Tween($('contentBox'), {
			property: '-webkit-transform',
			duration: 2000,
			transition: Fx.Transitions.Elastic.easeOut
		});
		swingAnimation.start(60, 0);
	});
});

Mit HTML 5 kommt auch das neue <audio> Element. Es erlaubt das abspielen von Audiodateien direkt im Browser. Eine kleine Gruppe Entwickler bei Mozilla bemühen sich auch um eine Audio API, die das Abfragen und Manipulieren der Audioelemente ermöglichen kann. Noch gilt die API als experimentel, soll aber in zukünftige Firefox Versionen zu finden sein.

Was für Möglichkeiten sich mit dieser API ergeben zeigen zahlreiche eindrucksvolle Beispiele. Hier ist eines meiner Experimente:

Favelizer – ein 16 x 16 Pixel Frequenz Spectrum in der Browseradresszeile:

Eine Live-Vorschau findet sich hier: http://labs.daslaboratorium.de/favelizer

Wer sich die gepatchte Firefox-Beta nicht herunterladen möchte, kann den Favelizer auch hier in Aktion ansehen (leider ohne Sound):

So funktionierts:

Das Audio-Element erhält ein onaudiowritten Attribut, mit dem wir beim Abspielen der Musik fortlaufend eine beliebige Javascript Funktion aufrufen können:

<audio src="datei.ogg" controls="true" onaudiowritten="update(event);">

Mit dem übergebenen event-Objekt können wir auf die Audio-Signale zugreifen:

function update(event) {
     signal   = event.mozFrameBuffer;
     spectrum = event.mozSpectrum;
 }

Um das Favicon dynamisch und möglichst schnell erzeugen zu können, greife ich auf processing.js zurück. Das ist wesentlich einfacher als beispielsweise mit

ctx = $('frame').getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(1, 1, 1, 16);

Pixel für Pixel einzeln zu färben.

Processing.js ist eine durch Javascript verwirklichte eigene Programmiersprache und gleicht in seinem Aufbau Java. Processing.js nutzt das html5 canvas object und ermöglicht beeindruckende Graphikdarstellungen im Browser – ganz ohne Flash.

Mit einem bisschen Mathematik lässt sich so ganz einfach ein Frequenz Spectrum auf 16 x 16 Pixel bringen:

void draw() {
    background(0);
    strokeWeight(1.0);

    if (spectrum.length > 0) {
        for (int i = 0; i <= 16; i++) {
            var j         = i + 30 * spectrum.item(i * 4);
            var log       = -1 * Math.log(1 / j);
            var magnitude = 16 - spectrum.item(i * 4) * 256 * log;
            stroke(0, 255, 0);
            line(i, 16, i, 16 - magnitude);
        }
    }
}

Das Favicon brauchen wir dann nur noch in regelmäßigen Abständen auszutauschen:

window.setInterval(function() {
    var icon = $('icon');
    var newIcon = icon.cloneNode(true);
    newIcon.setAttribute('href', ctx.canvas.toDataURL());
    icon.parentNode.replaceChild(newIcon, icon);
 }, 60);

Es lohnt sich auf jeden Fall ein Blick in den Sourcecode: http://labs.daslaboratorium.de/favelizer

Es stockt bei mir!?

Das liegt daran, dass wir zum Austausch der einzelnen Favicon-Frames ein neues Objekt erstellen und damit das alte Icon auswechseln müssen. Da häuft sich natürlich einiges an Datenmüll (alte, nicht mehr verwendete Objekte) an, der aufwendig beseitigt werden muss. Der sg. Garbage-Collector verschluckt sich. Eine schnelle Lösung habe ich im Moment leider noch nicht parat.

Das »Web2.0« mit seiner neuen (alten) Technologie Ajax macht viele Webseiten zu komplexen Programmen. Webseiten können zur Laufzeit verändert und mit dynamischen Inhalten gefüttert werden. Doch Ajax ist nicht unbedingt geeignet für jede Webanwendung, da es immer noch zwei Verbindungen benötigt: Einen Up-Stream für die GET- oder POST-Anfrage und einen Downstream für die Response.

Wer beispielsweise schon einmal mit Google Wave gespielt hat, wird merken, dass eingegebene Zeichen (mit sehr kurzer Verzögerung) auf dem Bildschirm des Gesprächspartners erscheinen. Wer so etwas mit Ajax verwirklichen will muss trickreich mit so genannten long live HTTP GET Requests spielen (siehe diese Google Wave Präsentation, Minute 11:00). Doch Abhilfe naht: das HTML5 WebSocket Interface findet sich bereits in den erstsen Web-Browsers implementiert. Auch der neue Editor’s Draft der WebSocketAPI von gestern (15. April 2010) sieht vielversprechend aus.

Das WebSocket Interface erlaubt den Aufbau einer bestehenden, fullduplex Verbindung über das WebSocket Protokoll und lässt sich erstaunlich einfach mit JavaScript in die eigenen Webanwendungen implementieren. Es besitzt einen Constructor

WebSocket(url [, protocol])

mit den Parameter URL (String) und dem optionalen Parameter protocoll (String).

Das WebSocket Interface besitzt die folgenden Attribute:

readonly String URL
readonly unsigned short readyState
    0 = Connecting
    1 = Open
    2 = Closing
    3 = Closed
readonly unsigned long bufferedAmount

Das WebSocket Interface besitzt zudem die folgenden Funktionen:

boolean send(String data)
void close()

Außerdem besitzt das Interface folgende Events:

onopen
onmessage
onerror
onclose

Eine typische und rudimentäre Implementierung könnte demnach so aussehen:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        mySocket.send('Hello');
    }, 50);
}

Wir erstellen demnach ein WebSocket Objekt und senden alle 50ms eine Nachricht an den Empfänger auf Port 80. Hier können bereits Probleme auftreten: Was wenn die Verbindung des ausführenden Rechners nicht ausreicht um alle 50ms eine Nachricht zu versenden? Hierfür nehmen wir das Attribut bufferedAmount zur Hilfe. bufferedAmount ist nur dann gleich 0, wenn keine Daten mehr in der Warteschlange zum Versenden sind. Unsere überarbeitete Implementierung:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        if(mySocket.bufferedAmount == 0) {
            mySocket.send('Hello');
        }
    }, 50);
}

Empfangene Daten können wir mit dem onmessage Event verarbeiten:

mySocket.onmessage = function(data) {
    document.getElementById('Output').appendChild(
        document.createTextNode(data)
    );
}

Hier zeigen wir die Daten im Browserfenster an. Fehler können wir mit dem error Event abfangen. Das Auslösen des error Events muss nicht zwangsläufig bedeuten, dass die Verbindung abgebrochen ist, kann es aber:

mySocket.onerror = function(error) {
    alert('error');
    if(mySocket.readyState != 1) {
        document.getElementById('Output').appendChild(
            document.createTextNode("Ein Fehler ist aufgetreten.")
        );
    }
}

Um Daten mit einem Server auszutauschen benötigen wir einen Server, der das WebSocket-Protokoll unterstützt. Für die ersten Experimente eignet sich zum Beispiel pywebsocket. Es kann sowohl als Apache-Modul oder auch als Stand-Alone-Server betrieben werden.

Im Moment unterstützen meines Wissens leider nur Google Chrome und Safari WebSocket. Firefox wird es in nicht alzu ferner Zukunft implementieren. Eine Chat-Demo unter Verwendung von WebSockets findet sich hier.

Anregungen? Hierfür sind die Kommentare da.

Webseiten sind in Zeiten des Web2.0 häufig komplexe, dynamische Programme. Große Soziale Netze wie Facebook machen es vor: Das Wechseln von einer Seite zur nächsten mittels Links hat ausgedient. Vielmehr werden die Inhalte dynamisch mit Hilfe von Ajax-Anfragen in das Layout geladen. Damit ergeben sich aber auch einige Nachteile.

Einer der Hauptkritikpunkte von Ajax ist die fehlende native Unterstützung von Bookmarks – also Favoriten. Dynamisch durch Javascript und Ajax veränderte Webseiten lassen sich nicht in ihrem momentanen Zustand zu den Favoriten hinzufügen, da lediglich die URL der Seite nicht aber die vorangegangen Aktionen des Benutzers die zum momentanen Zustand der Seite geführt haben, gespeichert werden. Gleiches gilt für das Verlinken auf solche dynamischen Seiten – in Zeiten des Austausch von Links in sozialen Netzwerken ein nicht zu unterschätzendes Defizit.

Dabei gibt es Wege und Möglichkeiten auch Javascript mit Parametern über eine URL zu versorgen. Ein simples Beispiel soll hier gezeigt werden.

Javascript Parameter mittels Anker

Anker, das ist der letzte Teil einer jeden URL, beginnend mit einem Raute- oder auch Hash-Zeichen(#). Anker verweisen auf ‘Lesezeichen’ auf der Webseite und dienen dazu, beim Verlinken verticale Lesezeichen anzuspringen oder auch um innerhalb einer Webseite vertikal zu springen.

Der große Vorteil von Ankern für Javascript Parameter ist die Möglichkeit diese durch Javascript zur Laufzeit zu verändern ohne, dass die Webseite verlassen wird. Es ist also möglich die Anker jederzeit durch Javascript ohne Einschränkung des Benutzers zu bearbeiten. Anker können über den Zugriff auf die Eigenschaft

window.location.hash

ausgelesen und verändert werden.

Mehrere Javascript Parameter im Anker unterbringen

Wie bei gewöhnlichen GET-Parametern, müssen auch mehrere Javascript Parameter möglich sein. GET-Parameter verwenden zur Trennung ein & Zeichen:

http://url.de?parameter1=wert1&parameter2=wert2

Auch bei Javascript-Parametern kann ein &-Zeichen verwendet werden um Parameter von einander zu trennen. Ich persönlich schlage aber das ~-Zeichen vor um Javascript-Parameter von den gewöhnlichen GET-Parametern auch optisch zu trennen.

http://url.de?parameter1=wert1&parameter2=wert2#javascript1=jswert1~javascript2=jswert2

Selbstverständlich ist dies nur Geschmackssache und ist abhängig von der jeweiligen verwendeten Implementierung.

Javascript Parameter auslesen

Um die mitgegebenen Parameter auszulesen nutze ich die folgende rudimentäre Implementierung:

function getParams() {
	var params = window.location.hash.replace('#', '').split('~');
	var toReturn = new Array();
	for(var i = 0; i < params.length; i++) {
		var find = /^(\w+)(=(.*))?$/;
		find.exec(params[i]);
		toReturn[RegExp.$1] = RegExp.$3;
	}
	return toReturn;
}

Die Funktion wird beim Start ausgeführt und gibt ein assoziatives Array ähnlich der $_GET und $_POST Arrays in PHP zurück. Selbstverständlich ist auch eine objekt-orientierte Implementierung möglich (ja, richtig gehört, Javascript kann sehr wohl objektorientiert sein).

Javascript Parameter setzen und löschen

Javascript Parameter können wie folgt gesetzt werden:

function setParam(param, value) {
	var paramtxt = (value) ? param + '=' + value : param; // Parameter zusammensetzen
	var params = window.location.hash.replace('#', '').split('~');
	var location = params.findParam(param);
	if(location === false)
		// wenn der Parameter noch nicht gesetzt war, setzen wir den Parameter neu
		params.push(paramtxt);
	else
		// war der Parameter schon gesetzt ändern wir ihn entsprechend ab
		params[location] = paramtxt;
	window.location.hash = params.join('~');
}

/* Array.findParam(needle) Hilfsfunktion - ähneld einer in_array Funktion */
Array.prototype.findParam = function(needle) {
	for(var i = 0; i < this.length; i++)
		if(this[i].search('^' + needle + '(=.*)?$') != -1) return i;
	return false;
}

Parameter lassen sich so ohne Probleme neu setzen oder überschreiben. Um Parameter komplett zu löschen eignet sich folgende Funktion:

function removeParam(param) {
	var params = window.location.hash.split('~');
	var location = params.findParam(param);
	if(location !== false)
		params.splice(location, location);
	window.location.hash = params.join('~');
}

Mit diesen drei Funktionen können wir also Javascript Parameter im Anker auslesen, setzen und löschen. Das sollte für eine einfache Implementierung reichen.

Beispiel

Ein einfaches Anwendungsbeispiel findet sich hier: http://labs.daslaboratorium.de/roae/jsparams.html

Mein erster Gehversuch mit JavaScript Parameter findet sich auf www.regnets.in implementiert.

Kommentare oder Anregungen? Dafür gibt es die Möglichkeit zum Kommentieren.

Als Entwickler ist es oft wichtig zu sehen welche Daten übetragen werden. Gründe hierfür sind z.B. Sicherheit und Debuging. Folgendes Bookmarklet, wandelt alle Formulare auf der Seite von post- auf get-Formulare um.

Nachstehende Funktion ermittelt alle Form-Tags auf der Seite. Sie überprüft anschließend, ob das method-Attribute vorhanden ist, wenn nicht wird es erstellt und der Wert “get” zugewiesen. Sollte das method-Attribute vorhanden sein, und den Wert “post” besitzen, wird dieser auf “get” geändert.

function changePostToGet()
{
	count = 0;
	els = document.getElementsByTagName('form');
	for(i=0;i<els.length;i++)
	{
		if(!els[i].getAttribute('method'))
		{
			attrib = document.createAttribute('method');
			attrib.nodeValue = 'get';
			els[i].setAttributeNode(attrib);

			count ++;
		}
		else if(els[i].getAttribute('method').toLowerCase()=='post')
		{
			els[i].setAttribute('method', 'get');

			count ++;
		}
	}

	alert(count+' form(s) transformed.');
}

Da es nun praktisch schlecht ist, diesen Code auf jeder Seite unterzubringen, auf welchen man ihn benötigen würde, erstellen wir uns daraus ein Bookmarklet.

Der Funktionsrumpf wird hierzu in den Javascript Compressor kopiert, welcher daraus folgenden String erstellt:

count=0;els=document.getElementsByTagName('form');for(i=0;i<els.length;i++){if(!els[i].getAttribute('method')){attrib=document.createAttribute('method');attrib.nodeValue='get';els[i].setAttributeNode(attrib);count++}else if(els[i].getAttribute('method').toLowerCase()=='post'){els[i].setAttribute('method','get');count++}}alert(count+' form(s) transformed.');

Um das Bookmarklet jetzt z.B. im Firefox zu benutzen, wird über den Lesezeichenmanager in der Lesezeichen-Symbolleiste ein neuer Favorit erstellt.  Bei Adresse tragen wir javascript:<code> ein wobei <code>durch den obigen String ersetzt wird.

Erstellen eines neuen Bookmarklets in Firefox

Nach dem Klick auf “Hinzufügen” werden nun alle Formulare auf der Seite welche man gerade betrachtet, von post in get konvertiert.

Alternativ reicht es auch diesen Link in die Favoritenleiste des Browsers zu ziehen: PostToGetBookmarklet

Wird dann ein solches Formular abgeschickt, ist schnell ersichtlich welche Parameter welchen Wert besitzen – ohne das Änderungen an der Webseite selbst vorgenommen werden müssen.

Die ersten drei Teile dieser Reihe hatten sich mit der theoretischen und praktischen Implementierung des User Consent Flow Prozesses, der für die Authentifizierung des Nutzers mit und der Verwendung der eBay Trading API notwendig ist, befasst. Im vierten und letzten Teil sollen die Implementierungen der letzten drei Teile (Teil 1, Teil 2, Teil 3) dieser Reihe in die Controller und Views umgesetzt und so ein visueller Anmelde- und Authentifizierungsprozess geschaffen werden.

Was wird Teil 4 dieses Guides zeigen?

Wir werden einen Prozess schaffen, der es dem Nutzer erlaubt den eBay User Consent Flow mit Hilfe unserer Webapplikation zu durchschreiten. Dieser Prozess soll möglichst unkompliziert, direkt und intuitiv bedienbar sein. Ich empfehle also die Verwendung von Ajax-Methoden um das User Interface und den darzustellenden Prozess zu visualisieren. Wie das Zend Framework mit Ajax Anfragen umgehen kann wird hier also auch Thema sein.

Warum Ajax?

Wenn wir uns eben an den Ablauf des (in Teil 1 ausführlich beschriebenen) Consent Flow Prozesses erinnern: Der Benutzer muss selbst nur wenige Klicks und Eingaben machen – namentlich die Anmeldung auf der eBay Login-Seite zu der er weitergeleitet wird. Im Hintergrund muss unsere Applikation allerdings zwei Anfragen machen. (1) Eine SessionID von der eBay trading API anfragen und (2) nach der Rückkehr des Benutzers zur Applikation den mit der SessionID verknüpften Auth-Token anfragen.

Hier empfehle ich Ajax: Dem Benutzer soll visualisiert werden, dass sich hinter den Kulissen etwas tut und nicht lange auf den Seitenaufbau warten müssen (die API-Anfragen dauern ein paar wenige Sekunden). Wir werden also die Seite ausliefern, und von dieser eine Ajax-Anfrage starten, die die getSessionID und später die fetchToken Actionen anstoßen wird. Der Benutzer wird ein Lade-Grafik sehen und damit merken, dass sich etwas tut. Die Weiterleitung soll vollautomatisch erfolgen. Das Ergebnis sieht also keinerlei Actionen vom Benutzer auf unserer Applikation vor. Er muss lediglich warten bis er zu eBay weiter geleitet wird und sich dort anmelden kann.

Die benötigten Actions

Wie in Teil 2 bereits aufgestellt brauchen wir neben dem Ebayauth Controller folgende fünf Actions:

• index (stößt den Consent Flow an)
  
• step1 (ist Ziel eines Ajax-Requests – übernimmt getSessionID)
• success (bei erfolgreichem Login auf eBay wird der Benutzer hierhin weitergeleitet)
• step2 (ist Ziel eines Ajax-Requests – übernimmt fetchToken)
• und denied (bei fehlgeschlagenem oder abgebrochenen Login)
  

und vier Views für den Controller Ebayauth:

• index.phtml
• step1.ajax.phtml
• success.phtml
  
• step2.ajax.phtml
• und denied.phtml

Ajax Requests erkennen und entsprechend handeln

Um die Unterscheidung zwischen ‘normalem’ Request und einem Ajax-Request können wir einen Context-Switcher verwenden, den uns das Zend Framework zur Verfügung stellt. Dieser muss in der init()-Methode des Controllers initialisiert werden uns sieht in unserem Fall so aus:

$contextSwitch = $this->_helper->getHelper('AjaxContext');
$contextSwitch->addActionContext('step1', 'html') // wir geben html zurück
              ->addActionContext('step2', 'html') // möglich wäre auch xml oder json
              ->initContext();

// Das übrige Layout abschalten
if($this->_request->isXmlHttpRequest()) {
     $this->_helper->layout->disableLayout();
}

Unsere zwei step Actions benötigen noch eine kleine Fallunterscheidung. Wir möchten sie nur ausführen lassen, wenn es sich tatsächlich um einen Ajax-Request handelt:

if(!$this->_request->isXmlHttpRequest()) {
    $this->_redirect('/ebayauth/index'); // zum Start des Auth-Prozesses umleiten
}

Der Controller Ebayauth

Springen wir gleich in den Code:

public function indexAction() {}

public function step1Action()
{
    if(!$this->_request->isXmlHttpRequest()) {
        $this->_redirect('/ebayauth/index');
    }

    // die getSessionID API-Anfrage durchführen
    $tokenAdapter = new Ebay_Auth_ConsentFlow();
    $return = $tokenAdapter->getSessionID();

    // Wir müssen die SessionID in einer Datenbank oä. zwischenspeichern
    $modelAccount = new Model_Account();

    if($return != false) {
        // zwischenspeichern - bitte durch eigenen Implementierung ersetzen
        $modelAccount->writeEbaySessionId($this->accountID, $return['sessionId']);
        if(isset($return->ShortMessage)) {
            // bei Fehler ist ShortMessage teil der API Rückgabe
            $this->view->error = (string)$return->ShortMessage;
        } else {
            $this->view->redirectURL = $return['redirectUrl'];
        }
    } else {
        $this->view->error = 'Keine Verbindung zu eBay.';
    }
}

public function successAction() {}

public function step2Action()
{
    if(!$this->_request->isXmlHttpRequest()) {
        $this->_redirect('/ebayauth/index');
    }

    // die im step1 zwischengespeicherte SessionID aus der Datenbank holen
    $modelAccount = new Model_Account();
    $sessionId = $modelAccount->getEbaySessionId($this->accountID);

    // die fetchToken API Anfrage ausführen
    $tokenAdapter = new Ebay_Auth_ConsentFlow();
    $return = $tokenAdapter->getToken($sessionId);

    if($return != false) {
        // auch hier wieder eigenen Implementierung Verwenden
        $modelAccount->writeEbayTokenId($this->accountID, $return['token'], $return['expiration']);
        if(isset($return->ShortMessage)) {
            $this->view->error = (string)$return->ShortMessage;
        } else {
            // Hier festlegen wohin umgeleitet werden soll
            $this->view->redirectURL = '/'; // zurück zur Startseiten
            $this->view->expiration = $return['expiration'];
        }
    } else {
        $this->view->error = 'Keine Verbindung zu eBay';
    }
}

public function deniedAction() {}

Die drei Actions index, success und denied benötigen keine Methoden im Controller. Der JavaScript, der den Ajax-Request anstößt coden wir einfach fest in die views ein.

Die Views

Das hier ist der index view (index.phtml). Wir binden ein JavaScript ein und rufen die Funktion shootAjaxHtml() auf.

<div>
    <div id="loader" class="redirect"><img src="/images/preloader.gif" /> Weiterleitung an eBay wird vorbereitet ...
        <script type="text/javascript">shootAjaxHtml('/ebay/step1', 'loader')</script>
    </div>
</div>

Der step1.ajax.phtml View:

<?php if(isset($this->redirectURL)) { ?>
<p>Automatische Weiterleitung zu eBay in wenigen Sekunden. <a href="<?php echo($this->redirectURL); ?>" title="Weiterleitung">Oder hier klicken.</a></p>
<script type="text/javascript">window.location = '<?php echo($this->redirectURL); ?>';</script>
<?php } elseif(isset($this->error)) { ?>
<p class="error"><strong>Fehler:</strong> <?php echo $this->error; ?></p>
<?php } ?>

success.phtml:

<div>
    <div id="loader" class="redirect"><img src="<?php echo SKINPATH; ?>/images/preloader.gif" /> eBay Anmeldung wird abgeschlossen ...
        <script type="text/javascript">shootAjaxHtml('/ebay/authgettoken', 'loader')</script>
    </div>
</div>

Und step2.ajax.phtml:

<?php if(isset($this->redirectURL)) { ?>
<p class="info">Die Verknüpfung des Benutzerkontos mit eBay verliert am <?php echo date('d.m.Y', strtotime($this->expiration)); ?> um <?php echo date('H:m', strtotime($this->expiration)); ?> Uhr seine Gültigkeit.</p>
<p><a href="/ebay" class="black" title="Zurück zur Startseite">Weiter</a></p>
<?php } elseif(isset($this->error)) { ?>
<p class="error"><strong>Fehler:</strong> <?php echo $this->error; ?></p>
<?php } ?>

Im denied View gebe ich nur eine Fehlermeldung wie “Anmeldung fehlgeschlagen”.

Der JavaScript (mit mootools):

function shootAjaxHtml(action, loaderid)
{
    var remote = new Request.HTML({
        url: action + "?format=html",
        onSuccess: function(html) {
            $(loaderid).getParent('div').empty().adopt(html);
        },
        onFailure: function(xhr) {
            $(loaderid).getParent('div').empty().adopt(new Element('p').set('text', 'Es ist ein Fehler aufgetreten: ' +xhr.status +' ' +xhr.statusText).addClass('error'));
        }}).get();
}

Und damit sind wir auch schon fertig.

Ich hoffe die ersten drei Teile dieser Einführung in eine Mögliche Implementierung des Consent Flows der eBay trading API in eine Webapplikation mit dem Zend Framework waren gut verständlich und konnten einen guten Überblick über die benötigten Implementierungsschritte geben. Teil vier hat anhand von Codebeispielen gezeigt, wie man den Consent Flow möglichst benutzerfreundlich umsetzen kann.

Empfehlungen, Anmerkungen, Verbesserungsvorschläge? Dazu sind die Kommentare da!

Beschreibung wie beispielhaft in Javascript, eine beliebige Zahl in ein anderes Zahlensystem konvertiert werden kann.

Folgender Javascript-Code, rechnet eine Zahl in ein beliebiges Zahlensystem bzw. Stellenwertsystem um. Ist das Zahlensystem größer dem Hexadezimalsystem, muss die Funktion replaceNrByHex(nr) entsprechend noch erweitert werden.

function convertByPlaceValueNotation(nr, pvn) {
    retStr = "";
    restAry = new Array();

    while(nr>0) {
        restAry.push(nr % pvn);
        nr = parseInt(nr / pvn);
    }

    for(var i=restAry.length-1; i>=0; i--) {
        retStr += replaceNrByHex(restAry[i]);
    }

    return (retStr=="" ? "0" : retStr);
}

function replaceNrByHex(nr) {
    switch(nr) {
        case 10:
            return "A";

        case 11:
            return "B";

        case 12:
            return "C";

        case 13:
            return "D";

        case 14:
            return "E";

        case 15:
            return "F";

        default:
            return nr;
    }
}

Mögliche Aufrufe sind dann z.B.:

// Rechnet die Zahl 542 in das Dualsystem um
convertByPlaceValueNotation(452, 2);

// Rechnet die Zahl 16 in das Oktalsystem um
convertByPlaceValueNotation(16, 8);

// Rechnet die Zahl 78 in das Hexadezimalsystem um
convertByPlaceValueNotation(78, 16);

// Rechnet die Zahl 42 in das fiktive Zahlensystem mit der Basis 13 um
convertByPlaceValueNotation(42,13);

Zu beachten ist, dass es sich bei der Rückgabe um einen String handelt.

Für weitere Informationen und Beispiele ist die Seite Umrechnung von Zahlensystemen auf arndt-bruenner.de zu empfehlen.