Übersicht

WebView2 in PowerShell #

Die GUI eines EULANDA-Plugins ist kein eigenes Programm und kein externer Browser, sondern ein echter Chromium (Microsoft Edge WebView2), der direkt im PowerShell-Prozess läuft. Ein schlankes WPF-Fenster hostet die WebView2-Komponente; darin läuft die Oberfläche als HTML/CSS/JavaScript. Das ist die Technik, die ein modernes, plattform-einheitliches UI erlaubt, ohne dass das Plugin einen Webserver, ein Framework-Projekt oder eine separate Laufzeit mitbringen muss - alles steckt in einem PowerShell-Modul.

EulandaXtools kapselt das vollständig in Show-EulWebView2Dialog. Ein Plugin liefert nur den HTML-Körper und einen Action-Callback; Fensterrahmen, UI-Bundle, Theming und die Brücke zwischen JavaScript und PowerShell kommen aus dem Framework.

Ein echtes Plugin (EulandaXdatanorm) als WebView2-Dialog: die Oberfläche läuft als HTML im PowerShell-Prozess - oben die Kopfleiste, links die Navigationsleiste, in der Mitte der Inhalt.

Headless-tauglich durch Lazy-Loading #

Die WebView2-Abhängigkeiten werden erst beim ersten Dialog-Aufruf geladen, nicht beim Import-Module. Damit bleibt EulandaXtools auf Servern ohne WebView2-Runtime ladbar: Alle Fachfunktionen laufen headless weiter, nur der direkte Dialog-Aufruf schlägt dort mit einer klaren Meldung fehl. Das ist die technische Entsprechung des Grundprinzips “Headless zuerst”.

Show-EulWebView2Dialog - der Vertrag #

Show-EulWebView2Dialog -Html $html -Title 'Mein Plugin' -Width 1200 -Height 800 `
  -OnAction { param($action, $params, $post) ... }

Wichtige Parameter:

Das Framework injiziert beim Anzeigen automatisch:

• das JS-Bundle über Get-EulWebUiJs (Vendor-Libs, EulUI, die eul-*-Komponenten, Layout, Picker),
• das CSS-Bundle über Get-EulWebUiCss -Theme {Auto|Light|Dark} (Design-Tokens, Basis, Komponenten),
• die UI-Strings über Get-EulWebUiStrings -Language <de|en|...>,
• den Virtual-Host eulimg/ auf den Bildordner (so lädt <eul-image src="eulimg/...">).

Die Brücke: JavaScript zu PowerShell #

Die Oberfläche kommuniziert über EulUI.requestReply mit dem PowerShell-Code. Eine Action wird gesendet, der OnAction-Scriptblock beantwortet sie über den $post-Callback, das JavaScript erhält die Antwort als Promise:

// JavaScript (im Dialog)
const r = await EulUI.requestReply('loadResults', { path: folder }, 180000);
if (r && r.success) { render(r.rows); }

# PowerShell (-OnAction)
-OnAction {
  param($action, $params, $post)
  switch ($action) {
    'loadResults' {
      $rows = Get-MyDomainData -Udl $Udl -Path $params['path']   # Fachfunktion, headless
      & $post 'loadResultsReply' @{ requestId = $params['requestId']; success = $true; rows = $rows }
    }
  }
}

Jede Antwort spiegelt die requestId und setzt success. So bleibt der Dialog ein dünner Vermittler, die Arbeit macht die headless Fachfunktion.

Framework-Actions: nicht selbst behandeln #

Zwei Actions fängt das Framework selbst ab, das Plugin kümmert sich nicht darum:

• _close schließt das Fenster.
• _help öffnet eine externe URL über Start-Process (Whitelist http/https/mailto). Externe Links niemals als <a href="https://..."> setzen - die WebView würde selbst dorthin navigieren und den Dialog überschreiben. Stattdessen die _help-Action senden.

Theming, Sprache, Nachrichten-Verlauf #

Diese wiederkehrenden Bedienelemente liefert das Framework, sie gehören in die obere Leiste des Dialogs (siehe Dialog-Aufbau):

• Theme automatisch/hell/dunkel über EulUI.setTheme('auto'|'light'|'dark'); die CSS-Tokens schalten farblich um.
• Sprachumschaltung: das Plugin lädt über eine setLanguage-Action neue UI- und Plugin-Strings nach und wendet sie auf alle data-i18n-Elemente an.
• Nachrichten-Verlauf: jeder EulUI.toast wird mitgeschrieben und ist über ein Verlauf-Modal nachlesbar - flüchtige Fehlermeldungen gehen so nicht verloren.

Theme-Umschaltung: Automatisch, Hell, Dunkel - rechts in der Aktionsleiste.

Sprachumschaltung über das Globus-Menü (hier Deutsch, Englisch, Französisch).

Nachrichten-Verlauf: alle Toasts bleiben nachlesbar, auch wenn sie längst verschwunden sind.

Minimaler Dialog (Gerippe) #

function Show-MyPlugin {
  [CmdletBinding()]
  param([string]$Udl, [string]$Language = 'DE', $Task)

  $html = Get-Content (Join-Path $PSScriptRoot 'lib\ui\html\body.html') -Raw
  # ... Plugin-JS-Bundle, i18n-Strings und Logo nach Hausstil einsetzen ...

  Show-EulWebView2Dialog -Html $html -Title 'Mein Plugin' -Task $Task -OnAction {
    param($action, $params, $post)
    Invoke-MyPluginAction -Action $action -Params $params -Post $post -Udl $Udl
  }
}

Invoke-MyPluginAction (privat) ist der Dispatcher, der je Action die passende headless Fachfunktion ruft - genau wie der Server-/Batch-Pfad. Die nächste Seite zeigt, wie der HTML-Körper aufgebaut wird und welche Bausteine bereitstehen.