文档

Version:
8.4.0 7.42.1
List icon 目录
Close
Gradle
Maven

JxBrowser 在 Compose Desktop 中的使用

在 Compose Gradle 项目中使用 JxBrowser 的最简单方法是克隆 GitHub 仓库，其中所有内容都已设置完毕，可以直接使用。

前提条件

获取项目

使用以下命令克隆 GitHub 仓库：

git clone https://github.com/TeamDev-IP/JxBrowser-QuickStart-Gradle-Compose.git
cd JxBrowser-QuickStart-Gradle-Compose

运行 Compose 应用程序

使用以下命令构建并运行 Compose 应用程序：

./gradlew run -Djxbrowser.license.key=<your_license_key>

启动后，您将看到一个包含 BrowserView 组件的 Compose 应用程序，展示的网页为 https://html5test.teamdev.com：

Compose 应用中的 BrowserView

项目概述

本节介绍如何配置 Gradle 项目以包含 JxBrowser，以及如何将 JxBrowser 的 BrowserView 组件嵌入到 Compose Desktop 场景中以显示已加载网页的内容。

配置 Gradle 项目

Gradle 项目使用 JxBrowser Gradle 插件添加必要的 JxBrowser 依赖项并获取当前平台的 Chromium 二进制文件。

以下是 build.gradle.kts 文件的配置方式：

Kotlin
plugins {
    java
    application
    kotlin("jvm") version "2.0.0"

    // 允许添加 JxBrowser 依赖项。
    id("com.teamdev.jxbrowser") version "1.2.1"

    // 添加 Compose 插件以便于配置。
    id("org.jetbrains.compose") version "1.7.3"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.0"
}

repositories {
    google()
    mavenCentral()
}

jxbrowser {
    // 使用最新稳定的 JxBrowser 版本。
    version = "8.4.0"
}

application {
    // 定义 Kotlin 应用程序的主类。
    mainClass.set("com.teamdev.jxbrowser.quickstart.gradle.compose.AppKt")
}

dependencies {
    // 检测当前平台并添加相应的 Chromium 二进制文件。
    implementation(jxbrowser.currentPlatform)

    // 添加对 Compose Desktop UI 工具包集成的依赖项。
    implementation(jxbrowser.compose)

    // 为当前平台添加对 Compose Desktop UI 工具包的依赖。
    implementation(compose.desktop.currentOs)
}

tasks.withType<JavaExec> {
    // 将命令行中的所有 Java 系统属性分配给 JavaExec 任务以传递 JxBrowser 许可证密钥。
    systemProperties(System.getProperties().mapKeys { it.key as String })
}

将 JxBrowser 嵌入 Compose

该 Compose Desktop 应用程序是用 Kotlin 编写的，并使用 Compose Desktop UI 工具包创建了一个包含 BrowserView 组件的窗口，用于展示加载的网页内容：

Kotlin
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication
import com.teamdev.jxbrowser.dsl.Engine
import com.teamdev.jxbrowser.dsl.browser.navigation
import com.teamdev.jxbrowser.engine.RenderingMode.OFF_SCREEN
import com.teamdev.jxbrowser.view.compose.BrowserView

fun main() {
    // 初始化 Chromium。
    val engine = Engine(OFF_SCREEN)

    // 创建 Browser 实例。
    val browser = engine.newBrowser()

    singleWindowApplication(
        title = "Compose Desktop BrowserView",
        state = WindowState(width = 700.dp, height = 500.dp),
    ) {
        // 添加 BrowserView 组件以展示 Web 内容。
        BrowserView(browser)

        DisposableEffect(Unit) {
            browser.navigation.loadUrl("https://html5test.teamdev.com")
            onDispose {
                // 关闭 Chromium 并释放资源。
                engine.close()
            }
        }
    }
}

了解更多

查看代码