XPages：如何消除第二次回显点击时的延迟

java

2024-03-18 14:50:38

XPages：消除第二次回显点击的延迟

简介

当 XPages 中包含多个附件下载链接时，经常会遇到点击第二次下载链接时出现延迟的问题。这种延迟可能令人沮丧，尤其是在您需要快速下载多个文件时。

问题原因

造成这种延迟的原因是 XPages 中默认使用的客户端事件处理程序。当您单击客户端事件处理程序（如 onclick）时，它会阻止页面重新加载，直到该事件处理程序完成为止。

解决方法

解决此延迟问题的两种主要方法是：

1. 使用服务器端事件处理程序

服务器端事件处理程序在服务器上运行，不会阻止页面重新加载。使用服务器端事件处理程序，您可以创建不会干扰第二个按钮点击的下载过程。

2. 使用异步请求

异步请求在后台发送，也不会阻止页面重新加载。使用异步请求，您可以触发在后台运行的下载过程，从而允许您立即单击第二个按钮。

具体实现步骤

服务器端事件处理程序

<xp:button value="Download Zipfile 1" id="button1">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.script><![CDATA[console.log("Button1 click")]]></xp:this.script>
        <xp:this.action><![CDATA[#{javascript:viewScope.clickedButton = "button1"; backingBean.downloadFromField(context.getUrlParameter("documentId"), "Body1");
}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

<xp:button value="Download Zipfile 2" id="button2">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.script><![CDATA[console.log("Button2 click")]]></xp:this.script>
        <xp:this.action><![CDATA[#{javascript:viewScope.clickedButton = "button2"; backingBean.downloadFromField(context.getUrlParameter("documentId"), "Body2");
}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

在 backing bean 中，使用 viewScope 变量来跟踪单击的按钮，并在 downloadFromField 方法中根据此变量决定要下载的文件：

public void downloadFromField(String documentUNID, String fieldName) {
    ...
    String clickedButton = viewScope.get("clickedButton");
    if (clickedButton.equals("button1")) {
        // Download file from Body1
    } else if (clickedButton.equals("button2")) {
        // Download file from Body2
    }
    ...
}

异步请求

<xp:requestPromise id="requestPromise1" runat="server">
    <xp:this.action><![CDATA[#{javascript:uk.co.mp.DownloadAllAttachments.downloadFromField(context.getUrlParameter("documentId"), "Body1");
}]]></xp:this.action>
</xp:requestPromise>

<xp:requestPromise id="requestPromise2" runat="server">
    <xp:this.action><![CDATA[#{javascript:uk.co.mp.DownloadAllAttachments.downloadFromField(context.getUrlParameter("documentId"), "Body2");
}]]></xp:this.action>
</xp:requestPromise>

在按钮单击事件处理程序中，使用 xp:callback 组件触发异步请求：

<xp:button value="Download Zipfile 1" id="button1">
    <xp:eventHandler event="onclick">
        <xp:this.action><![CDATA[#{javascript:xp.get("requestPromise1").call();}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

<xp:button value="Download Zipfile 2" id="button2">
    <xp:eventHandler event="onclick">
        <xp:this.action><![CDATA[#{javascript:xp.get("requestPromise2").call();}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>