WebUI项目中的多窗口顺序显示实现方法

2025-06-22 02:57:41作者：温艾琴Wonderful

在WebUI项目中，开发者经常需要实现多个窗口的顺序显示，即第一个窗口关闭后再显示第二个窗口。本文将详细介绍如何通过事件监听机制实现这一功能。

问题背景

在WebUI的Zig绑定中，直接连续调用wait()方法并不能实现窗口的顺序显示。这是因为wait()会阻塞程序执行，导致后续代码无法运行。我们需要寻找一种更优雅的解决方案。

解决方案核心思路

通过事件监听机制，我们可以检测窗口的关闭事件，并在第一个窗口关闭后触发第二个窗口的显示。这种方法利用了WebUI的事件系统，实现了窗口间的有序切换。

具体实现步骤

全局变量声明：首先声明两个窗口变量作为全局变量，以便在事件处理函数中访问。
窗口初始化：在main函数中创建两个窗口实例。
事件绑定：为两个窗口绑定同一个事件处理函数。
显示第一个窗口：调用第一个窗口的show方法。
事件处理：在事件处理函数中检测窗口关闭事件，当第一个窗口关闭时显示第二个窗口。

代码实现详解

const std = @import("std");
const webui = @import("webui");

// 全局窗口变量声明
var nwin: webui = undefined;
var nwin2: webui = undefined;

pub fn main() !void {
    // 创建两个新窗口
    nwin = webui.newWindow();
    nwin2 = webui.newWindow();

    // 为两个窗口绑定事件处理函数
    _ = nwin.bind("", events);
    _ = nwin2.bind("", events);

    // 显示第一个窗口的内容
    _ = nwin.show("<html><head><script src=\"/webui.js\"></script></head> Hello World ! </html>");

    // 等待所有窗口退出
    webui.wait();

    // 清理资源
    webui.clean();
}

// 事件处理函数
fn events(e: webui.Event) void {
    std.debug.print("Event. \n", .{});
    switch (e.event_type) {
        .EVENT_CONNECTED => {
            std.debug.print("Connected. \n", .{});
        },
        .EVENT_DISCONNECTED => {
            std.debug.print("Disconnected. \n", .{});
            const win = e.getWindow();
            if (win.window_handle == nwin.window_handle) {
                std.debug.print("第一个窗口已关闭，显示第二个窗口 \n", .{});
                // 显示第二个窗口
                _ = nwin2.show("<html><head><script src=\"/webui.js\"></script></head> Hello AGAIN World 2 ! </html>");
            }
        },
        else => {},
    }
}

关键点解析

事件绑定：通过bind方法将窗口与事件处理函数关联，这样窗口的所有事件都会被路由到该函数。
窗口识别：在事件处理函数中，通过比较窗口句柄(window_handle)来确定是哪个窗口触发了事件。
事件类型判断：使用switch语句区分不同的事件类型，这里我们主要关注EVENT_DISCONNECTED(窗口关闭)事件。
资源管理：最后调用clean()方法释放WebUI占用的资源。

扩展应用

这种基于事件的窗口管理方式可以扩展到更复杂的场景：

多窗口链式显示：可以创建多个窗口，每个窗口关闭时触发下一个窗口的显示。
条件触发：可以根据用户在前一个窗口中的操作决定显示哪个后续窗口。
数据传递：可以在窗口关闭前保存数据，传递给下一个窗口使用。

注意事项

确保在程序退出前调用clean()释放资源。
事件处理函数应尽量保持简洁，避免耗时操作。
在多线程环境中使用时需要注意线程安全问题。

通过这种事件驱动的方式，开发者可以灵活控制WebUI应用中多个窗口的显示顺序和交互逻辑，实现更复杂的用户界面流程。

webui

Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.

项目地址：https://gitcode.com/gh_mirrors/we/webui

登录后查看全文