Was ist ein Widget?
Ein Widget besteht aus drei Schichten — PHP, CSS und JavaScript — die zusammen eine unabhängige, wiederverwendbare Webkomponente bilden.
Bei Widget-Storm ist alles ein Widget. Ein Button? Widget. Eine Navigationsleiste? Widget. Diese ganze Seite? Zusammengesetzt aus Widgets. Jedes Widget hat drei Dateien:
<section id="basic<?= $wgguid;?>" class="widgetstormlayer">
<header><?= $wgparams->headercontent;?></header>
<article><?= $wgparams->articlecontent;?></article>
<footer><?= $wgparams->footercontent;?></footer>
</section>section#basic/*<?= $wgguid;?>*/{
/*<?php
if(isset($wgparams->layercss)) echo $wgparams->layercss;
?>*/
}jQuery('body').on('click', '.widgetstormlayer', function(){
// Widget-Logik: AJAX-Laden, Animationen, Events
// Delegierte Handler fangen alle Instanzen auf
});
Das Besondere: Die CSS-Datei kann PHP enthalten! Die /*<?php ?>*/ Bridge erlaubt
es, CSS dynamisch zu generieren — pro Widget-Instanz eigene Styles. Das folgende Widget
demonstriert das live. Klicken Sie darauf:
Drei Ebenen tief, dann Unendlichkeit. Jede Ebene ist ein vollständiges Widget —
mit eigenem PHP, CSS und JavaScript — live nachgeladen über wgclient.php.
Wie funktioniert das System?
Der Weg vom Entwickler zur User-Website — und zurück.
Der Entwickler erstellt drei Dateien (PHP, CSS, JS) und lädt sie über den
wghandler verschlüsselt auf den Server. Der Server speichert sie in der
Datenbank. Nutzer binden Widgets über ihren wgclient ein —
eine personalisierte PHP-Datei, die als Brücke zwischen ihrer Website und dem Widget-Storm
System dient. Beim ersten Abruf wird der Widget-Code im CodeVault
(wgbuilds/) lokal gespeichert — danach werden Widgets
direkt vom Dateisystem geladen, ohne Netzwerk-Roundtrip. Das macht die
Auslieferung extrem schnell und unabhängig vom zentralen Server.
Als Nutzer binden Sie Widgets über drei einfache Links ein:
Das System lädt jede Schicht separat: CSS für das Design, JS für die Interaktion, PHP für die Struktur.
Als Entwickler erstellen Sie drei Dateien und laden sie hoch:
Der wghandler verschlüsselt die Dateien (AES-256-CBC oder RIJNDAEL-256) und lädt sie auf den Server. Die ##wgstart##name::author::params##wgend## Marker ermöglichen Verschachtelung: Widgets laden Widgets.
Rendering-Kontrolle: Sie entscheiden, ob Widgets lokal aus dem CodeVault gerendert werden (Standard — schnellste Option) oder live vom Server abgerufen werden sollen. Im Batch-Modus können Sie alle Widgets aus Ihrem lokalen wgbuilds/-Verzeichnis synchronisieren — dabei werden nur Ihre eigenen Widgets verarbeitet.
Für Nutzer: Widgets einbinden
In fünf Schritten von der Registrierung zum fertigen Widget auf Ihrer Website.
wgclient.php und wghandler.php auf Ihrem Webserver. Dann binden Sie Widgets über CSS-Link, Script-Tag und PHP-Include ein.<!-- CSS laden (im <head>) -->
<link rel="stylesheet"
href="wgclient.php?wgname=basic&wgauthor=WidgetStormSystem&wgmode=css&wgparams=..."
type="text/css">
<!-- JavaScript laden (vor </body>) -->
<script src="wgclient.php?wgname=basic&wgauthor=WidgetStormSystem&wgmode=js&wgparams=..."></script>
<!-- PHP rendern (im <body>) -->
<?php include "wgclient.php";
$wg->get("basic", "WidgetStormSystem", $params, "php"); ?>Für Entwickler: Widgets erstellen
Von der Idee zum fertigen Widget in vier Schritten.
mein_widget.php, mein_widget.css und mein_widget.js. Verwenden Sie $wgparams für Parameter und $wgguid für UID-Scoping.wgbuilds/-Verzeichnis auf einmal synchronisieren.Die /*<?php ?>*/ Syntax ist die PHP-in-CSS Bridge. Sie erlaubt PHP-Code in CSS-Dateien, der beim Rendern ausgeführt wird.
Widgets können andere Widgets laden — über Marker:
Der Server löst diese Marker rekursiv auf: CSS und JS der verschachtelten Widgets werden angehängt, PHP wird inline ausgeführt. So entstehen komplexe Kompositionen aus einfachen Bausteinen.
Ausprobieren
Bearbeiten Sie die Parameter und sehen Sie das Ergebnis in Echtzeit.
Der folgende Live-Editor demonstriert das Kernprinzip: Ändern Sie Text und CSS, und das
Widget rendert sich in Echtzeit neu — über den gleichen wgclient.php-Endpunkt,
den auch externe Websites nutzen.
Das ist das Widget-Storm-Prinzip: Jede Schicht wird separat geladen. Der Live-Editor
postet Parameter an /wgclient.php und erhält gerenderten HTML und CSS zurück.
Serverseitiges Rendering ist möglich — aber im Normalfall legt Ihr
wgclient die Widget-Dateien lokal auf Ihrem Webspace ab, sodass
alles direkt von dort geladen wird. Schneller, unabhängiger.
Features & Möglichkeiten
Was das Widget-Storm System auszeichnet.
/*<?php ?>*/ wird beim Rendern aktiviert. Dynamische Styles pro Instanz.##wgstart##...##wgend## Marker. Rekursiv, unbegrenzt, automatisch.
Jede dieser Feature-Cards ist ein wg_card Widget —
zusammengesetzt in einem Grid, wiederverwendbar auf jeder Seite.
Offene Widgets
Alle Tutorial-Widgets sind öffentlich verfügbar. Nutzen Sie sie auf Ihrer eigenen Website.
Alles auf dieser Seite? Das sind Widgets. Jedes einzelne Element — Buttons, Cards, Code-Anzeigen, Tabs, Steps, Diagramme — ist ein eigenständiges Widget, das Sie auf Ihrer Website nutzen können.
<!-- CSS -->
<link rel="stylesheet"
href="wgclient.php?wgname=wg_badge&wgauthor=WidgetStormSystem&wgmode=css&wgparams=..."
type="text/css">
<!-- PHP -->
<?php include "wgclient.php";
$wg->get("wg_badge", "WidgetStormSystem", '{"text":"Neu","variant":"success"}', "php"); ?>