Compose Multiplatform 是一个用于在桌面、Web 和移动设备上创建用户界面的框架。它扩展了 Android 的 Jetpack Compose，让开发者可以使用熟悉的 API 来构建 iOS 和桌面应用。
对于我们而言，一项基于 Java 和 Kotlin 构建桌面应用程序的新技术向来都是好消息。我们已经为 JavaFX、Swing 和 SWT 开发了 Web 视图组件。而现在，我们推出适用于桌面端 Compose Multiplatform 的 Web 视图组件。
Web 视图的现状
Jetpack Compose 没有内置的 Web 视图组件。开发者通常使用 Android 原生的 WebView，但它属于较早的视图系统——这是一种早于 Compose 的 UI 技术。
Compose Multiplatform 也没有自带的 Web 视图组件。因此，开发者必须依赖各个平台提供的组件。更准确地说，是多个平台：移动平台有两个，桌面平台有三个。
在移动端，情况相对简单：Compose Multiplatform 应用可以在 Android 上使用 WebView，在 iOS 上使用 WKWebView。但在传统的桌面端，情况就复杂得多。
虽然桌面平台也提供了原生 Web 视图组件，但这些组件在 Compose Multiplatform 中并不可用。不过，由于 Compose 可以与 Swing 进行互操作，理论上也可以与 JavaFX 互操作，因此开发者可以使用这些经典桌面工具包中的 WebView 组件。在 2024 年 10 月之前，这是唯一的解决方案。
2024 年 10 月，我们发布了 JxBrowser 8.0.0，这是首款适用于所有桌面平台的 Compose Multiplatform Web 视图组件，支持 Windows、macOS 和 Linux 三大平台。JxBrowser 可直接与 Compose 协同工作，无需借助 Swing 互操作层。
什么是 JxBrowser
JxBrowser 是一款商业 Web 视图组件，基于 Chromium 构建，并支持 Swing、JavaFX 和 SWT。
JxBrowser 专为有关键业务场景、紧迫交付周期，以及对第三方软件和供应商有高标准要求的企业设计。该软件提供由产品工程师直接提供的保密技术支持服务。保证的首次响应时间或服务级别协议（SLA）为一个工作日。JxBrowser 会及时更新 Chromium，以确保其拥有最新的安全补丁。
在 Compose 中使用 Web 视图组件
JxBrowser 提供了惯用的 Kotlin API，且易于集成到现有的桌面应用程序中。以下代码片段展示了如何将 Web 视图组件添加到一个 Compose Multiplatform 应用中：
fun main() {
// 创建并运行 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),
) {
// 创建一个 Compose 组件，用于渲染给定 Browser 实例中加载的网页内容。
BrowserView(browser)
DisposableEffect(Unit) {
browser.navigation.loadUrl("https://html5test.teamdev.com")
onDispose {
// 当应用窗口离开组合时关闭 Engine。
engine.close()
}
}
}
}
您可以在快速入门指南中找到相应的 Gradle 配置和完整代码。
Compose 的浏览器视图运行示例。
在上述代码中，我们创建了 Engine 和 Browser 的实例。这些类代表实际的 Chromium 实体：即 Chromium 主进程以及其中一个 Browser。Engine 和 Browser 均不参与组合过程，但一旦创建了它们，你就拥有了一个功能完备的浏览器。您还可以根据需要创建任意数量的 Engine 和 Browser。若想深入了解在哪些场景下以及如何进行创建，请阅读我们关于 JxBrowser 架构的指南。
要将实际的 Web 视图组件添加到组合中，您需要调用 BrowserView 可组合函数，并传入您想在应用中显示的浏览器实例。
Kotlin-JavaScript 桥接
任何 Web 视图组件的主要功能之一是能够在 Kotlin 和 JavaScript 之间进行调用。在 JxBrowser 中，您可以从 Kotlin 代码中直接获取 JavaScript 对象，并访问它们的属性和方法：
val shoppingCart = frame.executeJavaScript<JsObject>("window.shoppingCart")
val items: JsArray = shoppingCart.call("getItems")
其中包括 DOM 节点：
val body = frame.executeJavaScript<Element>("document.body")
val bodyClone = body.call("cloneNode")
同样，您也可以将任何 Kotlin 对象注入到 JavaScript 中，并从页面中调用它：
class KotlinObject {
@JsAccessible
fun sayHelloTo(firstName: String) = "Hello $firstName!"
}
// 此回调在页面执行其自身脚本之前执行。
browser.register(InjectJsCallback { params ->
val window = params.frame().executeJavaScript<JsObject>("window")
window?.putProperty("kotlin", KotlinObject())
InjectJsCallback.Response.proceed()
})
在 Kotlin 与 JavaScript 之间的每次调用过程中，JxBrowser 都会执行自动类型转换。您可以在 JavaScript 指南 中了解更多关于 Kotlin 与 JavaScript 桥接的内容，以及类型转换的工作原理。
JxBrowser 的其他功能
JxBrowser 是您获取所有 Web 开发者开箱即用功能的桥梁，而这些功能在桌面 Kotlin 中并不具备。例如，您可以查看我们关于 Compose Desktop 中远程屏幕共享的详细教程。
当您需要生成精美的 PDF 文件时，Web 视图组件是一种常见的选择。当您拥有 HTML 和 CSS 格式的 PDF 文件模板时，您可以在 JxBrowser 中加载它并生成 PDF 文件。
与 Android 的 WebView类似，JxBrowser 允许您截取浏览器的屏幕截图。借助任何 JRE 提供的工具，您可以截屏并将其保存为 PNG 图片文件。
在企业环境中，身份验证至关重要。JxBrowser 支持与 Chromium 相同的身份验证协议，并允许您使用 Kerberos、WebAuthn、U2F 以及其他身份验证技术。
除此之外，JxBrowser 还提供了对网络流量的精细控制、高级打印 API、Chrome 扩展程序、专有编解码器支持、代理和许多其他功能。您可以查阅我们的指南，以准确找到您需要的内容。
发送中。。。
您的个人 JxBrowser 试用密钥和快速入门指南将在几分钟内发送至您的电子邮箱。