JavaScript-Libs

dbXapp-JavaScript ist modular. core.js ist immer die Basis. Fachfunktionen werden ueber vorhandene Libs geloest, nicht durch neue Einmal-Skripte.

Automatisches Laden

core.js liest data-dbx-Definitionen und registrierte Features. Libs koennen automatisch geladen und initialisiert werden, wenn ein Element sie benoetigt.

Beispiel:

<div data-dbx="lib=ajax|class=dbxAjax|target=dbx_target_7"></div>

Regel:

Wenn eine vorhandene Lib eine Funktion anbietet, wird diese Lib genutzt. Keine eigenen JavaScript-Wege fuer AJAX, Fenster, Confirm oder UI-State.

core.js

Aufgaben:

• zentrale Konfiguration
• Feature-Registrierung
• Eventsystem
• UI-State (dbx.uiGet, dbx.uiSet)
• automatische Initialisierung nach AJAX
• Basis fuer alle Libs

UI-State:

const state = dbx.uiGet("collapse", "admin-dashboard-cache", "state", "open");
dbx.uiSet("collapse", "admin-dashboard-cache", "state", "collapsed");

Direkter Zugriff auf localStorage oder sessionStorage ist ausserhalb von core.js verboten.

ajax.js

AJAX in dbXapp ersetzt im Standard HTML.

<a class="dbxAjax"
   href="?dbx_modul=dbxAdmin&dbx_run1=session&dbx_run2=list_session"
   data-target="dbx_session_report"
   data-replace="target">
   Aktualisieren
</a>

Wichtige Begriffe:

Begriff	Bedeutung
target	DOM-ID, die aktualisiert wird
replace=target	Target-Element selbst ersetzen
replace=content	Nur Inhalt des Targets ersetzen
mode=html	Server liefert HTML
mode=json	Server liefert JSON

HTML ist der Standard, weil dbxForm und dbxReport fertige Teiloberflaechen zurueckgeben.

JSON ist sinnvoll fuer:

• reine Statusaktionen
• kleine API-Antworten
• Hintergrundoperationen ohne HTML
• Aktionen, die keine Session-/Performance-Protokollierung brauchen sollen

confirm.js

Confirm wird ueber Attribute am Link/Button definiert.

<a class="dbxAjax dbxConfirm"
   href="{delete_url}"
   data-confirm="Datensatz wirklich loeschen?"
   data-confirm-title="Loeschen"
   data-confirm-buttons="yesno">
   Loeschen
</a>

Confirm ist UI, nicht Sicherheit. Der Server prueft Rechte trotzdem.

openWin.js

Fenster und Dialoge laufen ueber openWin.

<a class="openWin"
   href="?dbx_modul=dbxContact_admin&dbx_run1=edit&id={id}"
   data-win-width="900"
   data-win-height="700">
   Bearbeiten
</a>

Typische Verwendung:

• Bearbeiten aus einer Liste.
• Detailansicht im Kontext.
• CMS-Medienbrowser.
• Admin-Dialoge.

report.js

report.js unterstuetzt dbxReport im Browser:

• Pagination-AJAX
• Auswahlzustand
• Multi-Select
• Report-Aktionen
• Reloads

Report-Verhalten wird nicht in Fachmodulen neu implementiert.

form.js

form.js unterstuetzt dbxForm:

• Formularzustand
• automatische Submit-Mechaniken
• Feldinteraktion
• Reinitialisierung nach AJAX

grid.js

grid.js ist fuer tabulator-/gridartige Reports.

Typisch:

• Spaltenbreiten
• Sichtbarkeit
• Inline-Edit
• grosse Tabellen
• UI-State ueber core.js

cms.js

cms.js steuert die CMS-Oberflaechen:

• Content-Baum
• Medienbrowser
• Modul-Inclusion-Hilfen
• SEO/Metadatenbereiche
• openWin-Integration

Weitere Libs

Lib	Aufgabe
adminDashboard.js	Dashboard-Spezialdarstellungen und Diagramme
menu.js	Navigation und Chronik
utilities.js	allgemeine UI-Hilfen, Collapse, Theme/Skin
ace.js	Source-/Template-Editor
confirm.js	Bestaetigungsdialoge
process.js	laengere Prozesse/Status
kiBriefing.js	KI-Briefing UI
seoAdmin.js	SEO-Verwaltung

Verbindliche Regel

Keine eigene JavaScript-Funktion fuer etwas, das eine dbXapp-Lib bereits kann.