Die Lösung:

Spätestens nach dem Studieren des HTML-Quellcodes stellt man fest, dass Joomla standardmässig  für jeden übergebenen Icon-Parameter eine zugehörige CSS-Klasse im HTML-Code des Toolbars generiert.

Schauen wir uns dabei die Definition von custom() etwas genauer an:

JToolBarHelper::custom( $task = '',
                                  $icon = '',
                                   $iconOver = '',
                                    $alt = '',
                                     $listSelect = true,
                                      $x = false )

Wenn wir nun beispielsweise ein Add-Button bauen möchten:

<!--? echo JToolBarHelper::custom('add' , 'new', '' , 'Add item', false); ?-->

Würden wir im HTML-Quellcode folgende zugehörige Zeilen wiederfinden:

<a class="toolbar" href="#">
 
   Add item
</a>

Die Definition für “icon-32-new” findet sich unter:

Also tut Joomla zunächst einmal so, als wäre das standardmässig aktive Theme “khepri” für alle Defintionen der Iconklassen zuständig. In unserem Beispiel hat die CSS-Klasse “icon-32-new” folgende Gestalt:

.icon-32-new {
     background-image: url(../images/toolbar/icon-32-new.png);
}

Für ein Vielzahl anderer Schlüsselwörter bringt das Theme “khepri” ebenfalls fertige CSS-Klassen mit:

Mögliche Icon-SChlüsselwörter: (send, delete, help, cancel, config, apply, back,
forward, save, edit, copy, move, new, upload,
assign, html, css, menus, publish, unpublish, restore,
trash, archive, unarchive, preview, default)

Das Theme befindet sich unter

JOOMLA-ROOT:administrator/templates/khepri/

und die ToolbarIcon sind unter

JOOMLA-ROOT:administrator/templates/khepri/images/toolbar/

zu finden

Solltet ihr ein Icon übergeben wollen, welches nicht als Schlüsselwort definiert ist, so packt die CSS-Definition einfach direkt in das entsprechende Extension-Layout und verweist auf die richtigen Pfade des Icons.

Viel Spass beim Ausprobieren!

Trotz aller Funktionsvielfalt, welche diese Javascript-Frameworks mitbringen, benötigt jeder halbwegs gut beschäftigter Webentwickler immer wieder kleinere Hilfestellungen bei der Bewältigung wiederkehrender Aufgaben, wie z.B. bei der Verabeitung der Zeichenketten (im Nachvollgenden Strings genannt).

Generell sind die Stringfunktionen bei Javascript bei weitem nicht so mächtig, wie beispielsweise in PHP, ausgeklügelte Kombination der wenigen vorhandenen Stringfunktionen erlauben jedoch auch in JS zufriedenstellende Ergebnisse. Wir wollen uns noch die wichtigsten Funktionen zu Manipulation der Zeichenketten genauer anschauen (die reinen Formatierungsfunktionen ala bold(), italics() u.a lassen wir dabei draußen)….

Wichiger Hinweis: Die Stings/Zeichketten werden in Javascript wie viele andere Datentypen als Objekte behandelt. Aus diesem Grund kann jede Zeichenkette als fertiges Objekt aufgefasst werden, welches implizit den Zugriff alle vorhannden String-Methoden ermöglicht. Die verwendete Punkt-Notation wurde aus der Objektorientierung übernommen und ist stets im folgenden Format anzugeben: Zeichenkette.Methode()

var zeichenkette = "Hier werden Stringfunktionen für Javascript behandelt.";
var teile = zeichenkette.split(" ");
alert(teile); // Ausgabe: {"Hier", "werden", "Stringfunktionen", "für", "Javascript", "behandelt"}

Wir möchten zwei Teilsätze zu einem vollständigen Satz zusammensetzen (Vorsicht - sinnfrei )

var anfang = "Hier werden";
var ende = " Stringfunktionen für Javascript behandelt.";
var satz = anfang.concat(ende);
alert(satz); // Ausgabe: Hier werden Stringfunktionen für Javascript behandelt.

var satz = "Hier werden Stringfunktionen für Javascript behandelt.";
var treffer = satz.indexOf("Stringfunktionen");
alert(treffer); // Ausgabe: 12
var treffer = satz.indexOf("Hier");
alert(treffer); // Ausgabe: 0
var treffer = satz.indexOf("keine");
alert(treffer); // Ausgabe: -1

var wort = "Webdevelopment";
var treffer = wort.lastIndexOf("e");
alert(treffer); // Ausgabe: 11
var treffer = wort.lastIndexOf("W");  // Ausgabe:  0
var treffer = wort.lastIndexOf("w"); // Ausgabe:  -1
// Gegencheck und Vergleich mit indexOf()-Funktion
var treffer= wort.indexOf("e"); // Ausgabe: 1

var satz = "Hier werden Stringfunktionen für Javascript behandelt.";
var ausschnitt = satz.substr(12,16);
alert(ausschnitt); // Ausgabe: Stringfunktionen
var ausschnitt = satz.substr(12);  // Ausgabe: Stringfunktionen für Javascript behandelt.

var satz = "Hier werden Stringfunktionen für Javascript behandelt.";
var ausschnitt = satz.substring(12,28); // 12+16 = 28
alert(ausschnitt); // Ausgabe: Stringfunktionen
var ausschnitt = satz.substring(12);  // Ausgabe: Stringfunktionen für Javascript behandelt.
//Gegencheck und Vergleich zu substr()
var ausschnitt = satz.substr(12, 16); // Ausgabe: Stringfunktionen für Javascript behandelt.

function zeigeDatum() {
   var heute= new Date(); // Datumsobjekt erstellen
   var tag = heute.getDay();
   var monat=heute.getMonth();
   var jahr=heute.getFullYear();
   var stunde=heute.getHours();
   var minute=heute.getMinutes();
   var sekunde=heute.getSeconds();
   document.getElementById('date_div').innerHTML = 'Die Zeit jetzt: '+tag+'.'+monat+'.'+jahr+
                       ', '+stunde+':'+minute+':'+sekunde;
}
zeigeDatum(); // ruft die Funktion auf, welche die Zeit in einem DIV mit der id="date_div" darstellt

Das einzige Problem bei dieser Lösung ist die Tatsache, dass die Zeit sich nicht selbständig aktualisiert.
Wir helfen uns dabei mit der setInterval()-Funktion. Diese kann eine beliebiege Anweisung in einem bestimmten Rhytmus (Angabe in Millisekunden) ausführen:

var timer = setInterval("zeigeDatum()", 1000);

Die Rückgabe setInterval()-Funktion kann dabei optional in einer Variable notiert werden. Diese dient dann als Referenz wenn man die Intervalausführung wieder stoppen möchte.

Auch Javascript kann den sog. (Unix) Timestamp berechnen, dieser ist zum Beispiel sinnvoll, wenn man die Zeitabweichung zwischen seinem Rechners und dem Server berechnen möchte:

var heute= new Date(); // Datumsobjekt erstellen
var timestamp= heute.getTime(); // Zeitstempel in Millisekunden(!) berechnen
var unix_timestamp = Math.round(timestamp/1000); // in Sekunden umrechnen und aufrunden

Bedenke, dass Javascript immer nur die Zeit abruft, die auf deinem Rechner eingestellt ist, inklusive der eventuellen Zeitabweichung. Daher ist diese nicht zur Zeitabgleich mit den anderen Rechnern im Internet geeignet. In diesem Fall sollte man unbedigt zur von dem Server bereitgestellten Zeit (bzw Unix-Timestamp/Zeitstempel) greifen.

Unix Timestamp FAQ

Frage: Was ist Unix Timestamp?
Antwort:Unix Timestamp (Unix Zeitstempel) repräsentiert die aktuelle Zeit in Sekunden, die seit dem Anfang der Zählung am 01.01.1970, 00:00:00 vergangen sind.

Frage: Ist Unix Timestamp unendlich?
Antwort: Die meisten heutigen Systeme verarbeiten den Unix Timestamp als vorzeichenbehaftete 32bit-Zahl (Integer). Die maximale Länge dieser Zahl beträgt 2.147.483.647 im positiven Bereich und stellt gleichzeitig die Obergrenze für den Unix Timestamp dar. Umgerechnet in das Datum ergibt sich somit ein Datum vom 19. 01 2038, 03:14:08 UTC. Ein späteres Datum ist durch den Unix Timestamp also nicht darstellbar. Man spricht dabei von einem Jahr-2038-Problem.

Frage: Kann ein Unix Timestamp negativ sein?
Antwort: Ja, die gängigen Programmiersprachen erlauben auch eine Rückwärtskonvertierung des Timestamps in die Zeit vor dem 01.01.1970. Jedoch ist Vorsicht geboten - ein Datum vor dem 13. 12 .1901, 20:45:52 UTC ist durch den Unix Timestamp nicht darstellbar

den Wunsch einen DEV- Blog zu starten hatte ich schon als es das Wort Blog noch garnicht gab. Natürlich wollte ich nicht bloggen, sondern einfach nur irgendwelche hilfreiche Artikel schreiben, doch sei es drum - jetzt gibt es Blogs und ich werden mich anstrengen, damit diese Seite keinen Staub ansetzt.

P.S. frohe mich über jeden noch so sinnfreien Kommentar