Compose Multiplatform ist ein Framework zum Erstellen von User Interfaces auf Desktop-, Web- und Mobilgeräten. Es erweitert Androids Jetpack Compose und erlaubt es, eine vertraute API zu nutzen, um Apps für iOS und Desktop zu entwickeln.
Eine neue Technologie zum Erstellen von Desktop-Apps in Java und Kotlin ist für uns immer gute Nachrichten. Wir haben bereits WebViews für JavaFX, Swing und SWT entwickelt. Und jetzt stellen wir ein WebView für Compose Multiplatform auf dem Desktop vor.
The State of Web Views
Jetpack Compose hat kein eigenes WebView-Component. Stattdessen verwenden
Entwickler Androids natives WebView. Dieses gehört zum älteren View-System –
einer UI-Technologie, die Compose vorausging.
Compose Multiplatform hat ebenfalls kein eigenes WebView-Component. Stattdessen müssen Entwickler auf die jeweils plattformspezifischen Komponenten zurückgreifen. Genauer gesagt: auf mehrere Plattformen – zwei im Mobile-Bereich und drei auf dem Desktop.
Auf Mobile ist alles in Ordnung. Compose-Multiplatform-Apps können WebView auf
Android und die Komponente WKWebView auf iOS verwenden. Aber auf dem
klassischen Desktop wird es komplizierter.
Auch Desktop-Plattformen bieten native WebViews an, aber sie sind in Compose Multiplatform nicht verfügbar. Da Compose jedoch Interop mit Swing und theoretisch auch mit JavaFX hat, könnten Entwickler die WebView-Components dieser klassischen Desktop-Toolkits verwenden. Das war bis Oktober 2024 die einzige Option.
Im Oktober 2024 haben wir JxBrowser 8.0.0 veröffentlicht – das erste WebView-Component für Compose Multiplatform auf allen Desktop-Plattformen: Windows, macOS und Linux. JxBrowser arbeitet direkt mit Compose zusammen und nutzt nicht die Swing-Interop-Schicht.
Was ist JxBrowser
JxBrowser ist ein kommerzielles WebView-Component. Es basiert auf Chromium und ist ebenfalls für Swing, JavaFX und SWT verfügbar.
JxBrowser ist für Unternehmen gedacht, die kritische Use Cases, feste Deadlines und hohe Ansprüche an Third-Party-Software und Vendoren haben. Die Software wird mit vertraulichem technischem Support direkt von den Produktentwicklern ausgeliefert. Die garantierte erste Reaktionszeit (SLA) beträgt 1 Geschäftstag. Außerdem hält JxBrowser Chromium stets aktuell mit den neuesten Security-Patches.
WebView in Compose nutzen
JxBrowser stellt eine idiomatische Kotlin-API bereit und lässt sich einfach in eine bestehende Desktop-Anwendung integrieren. Der folgende Code-Snippet zeigt, wie man ein WebView zu einer Compose-Multiplatform-Anwendung hinzufügt:
fun main() {
// Create and run the Chromium engine.
val engine = Engine(RenderingMode.OFF_SCREEN)
val browser = engine.newBrowser()
singleWindowApplication(
title = "Compose Desktop BrowserView",
state = WindowState(width = 800.dp, height = 600.dp),
) {
// Creating a Compose component for rendering web content
// loaded in the given Browser instance.
BrowserView(browser)
DisposableEffect(Unit) {
browser.navigation.loadUrl("https://html5test.teamdev.com")
onDispose {
// Close the engine when the app window leaves the composition.
engine.close()
}
}
}
}
Die passende Gradle-Konfiguration und den vollständigen Code finden Sie im Quick Start Guide.
Ein BrowserView für Compose in Aktion.
Im obigen Code erstellen wir Instanzen von Engine und Browser. Diese Klassen
repräsentieren die tatsächlichen Chromium-Entities: den Chromium Main Process
und einen der Browser. Weder Engine noch Browser nehmen direkt an der
Compose-Komposition teil, aber Sie haben sofort einen voll funktionsfähigen
Browser, sobald Sie sie erstellen. Sie können außerdem beliebig viele Engines
und Browser erstellen.
Um mehr darüber zu erfahren, wann und wo, lesen Sie bitte unseren Guide zur JxBrowser-Architektur.
Um das eigentliche WebView in die Komposition einzufügen, müssen Sie das
BrowserView-Composable für den Browser aufrufen, den Sie in Ihrer Anwendung
anzeigen möchten.
Kotlin-JavaScript-Bridge
Das Hauptfeature jedes WebViews ist, JavaScript aus Kotlin heraus und umgekehrt aufzurufen. In JxBrowser können Sie JavaScript-Objekte abrufen und ihre Properties und Methoden direkt aus Ihrem Kotlin-Code verwenden:
val shoppingCart = frame.executeJavaScript<JsObject>("window.shoppingCart")
val items: JsArray = shoppingCart.call("getItems")
Das schließt auch DOM-Nodes ein:
val body = frame.executeJavaScript<Element>("document.body")
val bodyClone = body.call("cloneNode")
Ebenso können Sie jedes Kotlin-Objekt nach JavaScript injecten und von der Seite aus aufrufen:
class KotlinObject {
@JsAccessible
fun sayHelloTo(firstName: String) = "Hello $firstName!"
}
// This callback is executed before the page executes its own scripts.
browser.register(InjectJsCallback { params ->
val window = params.frame().executeJavaScript<JsObject>("window")
window?.putProperty("kotlin", KotlinObject())
InjectJsCallback.Response.proceed()
})
Bei jedem Call zwischen der Kotlin- und der JavaScript-Welt führt JxBrowser eine automatische Typkonvertierung durch. Mehr über die Kotlin-JavaScript-Bridge und wie die Typkonvertierung funktioniert, finden Sie im JavaScript-Guide.
Weitere JxBrowser-Features
JxBrowser ist Ihre Brücke zu allen Funktionen, die Webentwicklern out of the box zur Verfügung stehen – aber in Desktop-Kotlin fehlen. Zum Beispiel: Schauen Sie sich unser ausführliches Tutorial zum Remote Screen Sharing in Compose Desktop an.
Ein häufiges Szenario ist die Nutzung eines WebViews zur Erzeugung schöner PDF-Dateien. Wenn Sie ein HTML- und CSS-Template für Ihr PDF haben, können Sie es in JxBrowser laden und ein PDF erzeugen.
Ähnlich wie Androids WebView erlaubt JxBrowser, einen Screenshot des Browsers
zu erstellen. Mit den Utilities, die jede JRE mitbringt, können Sie
einen Screenshot aufnehmen und als PNG-Datei speichern.
In Enterprise-Umgebungen ist Authentifizierung entscheidend. JxBrowser unterstützt dieselben Authentifizierungsprotokolle wie Chromium und erlaubt die Nutzung von Kerberos, WebAuthn, U2F und anderen Authentifizierungstechnologien.
Darüber hinaus bietet JxBrowser fein abgestufte Kontrolle über den Netzwerktraffic, eine erweiterte Printing API, Chrome Extensions, Support für proprietäre Codecs, Proxy-Unterstützung und viele weitere Features. Lesen Sie unsere Guides, um genau das zu finden, was Sie benötigen.
Sending…
Sorry, the sending was interrupted
Please try again. If the issue persists, contact us at info@teamdev.com.
Your personal JxBrowser trial key and quick start guide will arrive in your Email Inbox in a few minutes.