界面即时刷新效果，“进度条”控件妙用

本文章分享讲解的是，一个界面定时刷新的效果，

需要您了解苍穹的界面配置及插件开发，

本文章顺便带上了异步线程的处理

我们知道苍穹是前后端分离交互的，正常大都是后端开发进行前端的控制（除了做前端自定义控件的开发），我们都是通过后端代码去干预前端的界面，那也就是我们需要达到前端自定义刷新，需要前端发请求，给到后端，后端再把指令给到前端，进行需要的前端的显示效果。

这里我们不禁去想，一定是需要前端界面向后端发指令才可以？是不是需要前端前端开发才行呢？

随着你有需求不停的去想，已有的是不有什么可以利用上？

这时有可能你就想到了“进度条”，是一下一下从进度0走到进度100的，这种是不是就有前端控件向后端发指令的通路，经过我们尝试，我们总结定时刷新“进度条”控件妙用。

实际效果：

通过开发者工具监控到，前端不停的给后端发请求，“多行文本”控件不停刷新显示的内容数据。

是怎么实现的呢？

具体代码：

设计器界面： 界面也是代码的一部分，只是配置化写的界面代码，

使用动态表单，其中添加了一个多行文本，用于信息的显示，

其中界面上添加了一个“进度条”控件，设置控件属性“刷新间隔”为“500毫秒”

配合界面的后端代码：

直接看注释吧，相信能看懂

package kd.dev.xkopen.formplugin;

import java.util.EventObject;

import kd.bos.form.control.ProgressBar;
import kd.bos.form.control.events.ProgressEvent;
import kd.bos.form.control.events.ProgresssListener;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.bos.logging.Log;
import kd.bos.logging.LogFactory;
import kd.bos.servicehelper.TimeServiceHelper;
import kd.bos.threads.ThreadPools;

/**
 * 界面定时刷新，定时器使用
 * @author rd_starwind_wang
 * @date 2023/12/25 14:29
 */
public class Custom1225Plugin extends AbstractFormPlugin implements ProgresssListener {
	private static final Log log = LogFactory.getLog(Custom1225Plugin.class);
	//定时器控件标识
	private static final String CTRL_PRO_KEY = "kdxk_progressbarap";
	//多行文本控件标识
	private static final String CTRLTXT_KEY = "kdxk_textareafield";
	//需要即时显示的数据
	private static final String SHOWDATAKEY = "datapro";

	@Override
	public void registerListener(EventObject e) {
		super.registerListener(e);
		ProgressBar bar = this.getView().getControl(CTRL_PRO_KEY);
		bar.addProgressListener(this);
	}

	@Override
	public void afterBindData(EventObject e) {
		super.afterBindData(e);
		ProgressBar bar = this.getView().getControl(CTRL_PRO_KEY);
		bar.start();
		this.getView().getPageCache().put(SHOWDATAKEY, "hola:");
		ThreadPools.executeOnce("xkopen_api", () -> {
			while (!Thread.interrupted()) {
				try {
					//休眠800毫秒
					Thread.sleep(800);
					//向页面缓存压入新产生的一个时间标识
					this.getView().getPageCache().put(SHOWDATAKEY, this.getView().getPageCache().get(SHOWDATAKEY).
							concat(String.valueOf(TimeServiceHelper.now().getTime()))
							.concat("\r\n"));
				} catch (Exception ex) {
					log.error(ex.getMessage());
				}
			}
		});
	}

	@Override
	public void onProgress(ProgressEvent progressEvent) {
		//判断“进度条”控件的key，进行赋值 也就是给到前端控件显示的内容
		if(CTRL_PRO_KEY.equals(((ProgressBar)progressEvent.getSource()).getKey())) {
			this.getModel().setValue(CTRLTXT_KEY, this.getView().getPageCache().get(SHOWDATAKEY));
		}
	}
}

参考：

进度条

https://vip.kingdee.com/article/224163738084505344?share_fromuid=271892&productLineId=29&isKnowledge=2

倒计时控件

https://vip.kingdee.com/article/267005204225043968?productLineId=29

线型图：每隔30秒刷新一次

https://vip.kingdee.com/questions/446372562730424320/answers/446590176559691520?productLineId=29

--------

额外附上，苍穹前端自定义控件的开发参考：

直接上进阶篇

自定义控件开发进阶篇

https://vip.kingdee.com/knowledge/specialDetail/194046086670543360?category=194046531400985088&id=236768241354411008&productLineId=29

the end