Openfin窗口定制相关技术问题咨询

1. 限制Dock打开同一模块的多个实例 #

要避免重复创建同一模块的窗口实例，核心是在启动前检查目标窗口是否已存在，存在则激活而非新建：

• 借助OpenFin的fin.Window API，在Dock的模块启动逻辑中，先通过窗口标识（UUID + 窗口名称）查询实例：

  async function launchModule(moduleWindowConfig) {
    const targetWindowIdentity = {
      uuid: moduleWindowConfig.uuid, // 你的应用UUID
      name: moduleWindowConfig.windowName // 模块窗口的唯一名称
    };
  
    try {
      // 尝试获取已存在的窗口
      const existingWindow = await fin.Window.wrap(targetWindowIdentity);
      const isShowing = await existingWindow.isShowing();
      
      if (isShowing) {
        // 窗口已存在，将其前置激活
        await existingWindow.bringToFront();
        return;
      }
    } catch (err) {
      // 窗口不存在，进入创建流程
    }
  
    // 创建新窗口
    await fin.Window.create(moduleWindowConfig);
  }
  

• 如果使用OpenFin Workspace的Dock配置，可在模块的launch回调中加入上述检查逻辑，替换默认的直接创建行为。

2. 为模块设置默认启动尺寸 #

在模块的窗口配置中指定初始尺寸即可，分两种场景：

场景1：直接创建窗口时配置 #

调用fin.Window.create()时，在配置参数的defaultWidth和defaultHeight（或width/height）中设置固定尺寸：

const windowConfig = {
  uuid: 'your-app-uuid',
  name: 'target-module-window',
  url: 'https://your-module-url.com',
  defaultWidth: 800, // 默认宽度
  defaultHeight: 600, // 默认高度
  // 可选：同时设置初始位置
  defaultLeft: 100,
  defaultTop: 100
};

await fin.Window.create(windowConfig);

场景2：Workspace模块配置中定义 #

如果是通过OpenFin Workspace的模块清单（manifest）配置，在模块的window字段中添加尺寸设置：

{
  "modules": [
    {
      "id": "your-module-id",
      "title": "目标模块",
      "window": {
        "url": "https://your-module-url.com",
        "width": 800,
        "height": 600,
        "defaultLeft": 100,
        "defaultTop": 100
      }
    }
  ]
}

3. 绑定通知按钮的onClick事件 #

你当前的代码仅在通知配置中声明了onClick.task，但未注册对应的事件监听器。正确的做法是通过addNotificationEventListener监听notification-button-clicked事件，处理按钮点击逻辑：

修改后的完整代码 #

import { create, IndicatorColor, NotificationOptions, addEventListener as addNotificationEventListener } from '@openfin/workspace/notifications';
import { useEffect } from 'react';

export const openFinNotification = () => {
  // 组件挂载时注册通知按钮点击事件
  useEffect(() => {
    const handleNotificationClick = async (event) => {
      const { button } = event;
      // 根据按钮的task执行对应操作
      if (button.onClick.task === 'Close') {
        // 替换为实际的隐藏窗口关闭逻辑
        const hiddenWindow = await fin.Window.wrap({ uuid: 'your-app-uuid', name: 'hidden-window' });
        await hiddenWindow.close();
      } else if (button.onClick.task === 'Show') {
        // 替换为实际的隐藏窗口显示逻辑
        const hiddenWindow = await fin.Window.wrap({ uuid: 'your-app-uuid', name: 'hidden-window' });
        await hiddenWindow.show();
        await hiddenWindow.bringToFront();
      }
    };

    // 注册事件监听器
    addNotificationEventListener('notification-button-clicked', handleNotificationClick);

    // 组件卸载时移除监听器
    return () => {
      addNotificationEventListener('notification-button-clicked', handleNotificationClick, { once: false });
    };
  }, []);

  async function generateNotification() {
    const notification: NotificationOptions = {
      body: 'The hidden window has been launched.',
      buttons: [
        {
          title: 'Close Hidden Window',
          type: 'button',
          cta: false,
          onClick: {
            task: 'Close',
          },
        },
        {
          title: 'Show Hidden Window',
          type: 'button',
          cta: true,
          onClick: {
            task: 'Show',
          },
        },
      ],
      priority: 1,
      indicator: {
        color: IndicatorColor.GREEN,
        text: 'Hidden Window Loaded',
      },
      category: 'hidden',
      title: 'Hidden Window Loaded',
      template: 'markdown',
    };
    await create(notification);
  }

  return (
    <div>
      <div>
        <h3>Click button to generate Notification.</h3>
        <br />
        <button onClick={generateNotification}>Generate Notification</button>
      </div>
    </div>
  );
};

export default openFinNotification;

关键说明 #

• 需要在组件初始化阶段（比如React的useEffect）注册notification-button-clicked事件监听器，才能捕获按钮点击行为。
• 事件回调中会返回触发点击的按钮对象，可通过button.onClick.task区分不同按钮的操作逻辑。
• 注意替换代码中的your-app-uuid和hidden-window为实际的应用UUID和窗口名称。

内容的提问来源于stack exchange，提问作者Avanish Srivastava