sciter 全局事件应用: 后端向前端发布事件

By terrorist at 2022-05-19 • 0人收藏 • 351人看过

全局事件可用于来自应用程序的本机端(此处为“后端”)的通知,以通知 UI 在 UI 之外发生了某些事情。


在 web.sciter._metaProperty  补充一个函数

publish = function(name, data, post=true){
	var evt = event.BEHAVIOR_EVENT_PARAMS();
	evt.name = name;
	evt.cmd = 0xF0/*CUSTOM*/
	evt.data = valueObject(data);

    var ret,handled = ::Sciter.FireEvent(evt,post,false);
    return ret && handled;
};
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add()
/*}}*/


import web.sciter
import web.sciter.debug

var wb = web.sciter(winform)
wb.attachEventHandler(web.sciter.debug)

wb.html = /**
<!doctype html>
<html>
<head>
   <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
    class Table extends Element{
    	render(props){
    	    return <table>
    	    	<thead>
    	    		<tr><th>数据</th></tr>
    	    	</thead>
    	    	<tbody>
    	    		{props.list.map( (item)=>{
    	    		    return <tr><td>{item}</td></tr>
    	    		})}
    	    	</tbody>
    	    </table>
    	}    
    }
    
    class App extends Element{
        constructor(props){
            super()
            this.appData = props.appData
        }
        render(){
            if(this.appData){
            	return <div>
            		<span>{this.appData.title}</span>
            		<Table list={this.appData.list} />
            	</div>
            }
			else {
				return <div>初始化中</div>
			}
			
        };
        componentDidMount(){
            // 订阅全局事件
    		this.onGlobalEvent("appOk", (evt) => {
    		    this.componentUpdate({appData:evt.data})
    		})
        }
    }
	document.body.append(<App />)
    </script>
    <style type="text/css">
    html,body{ height:100%; margin:0; } 
    
    </style>
</head>
<body>
</body>
</html>
**/

// 假装读取界面配置
winform.setTimeout( function(){
	// 发布全局事件
	wb.publish("appOk", 
		{
			title="软件名称";
			list = {1;2;3;4;5;6}
		}
	)
}, 500)


winform.show();
win.loopMessage();


参考资料:

https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/samples.sciter/global-events/README.md#scenario-2-backend-frontend-communication


https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/include/sciter-x-host-callback.h#L277

2 个回复 | 最后更新于 2022-05-19
2022-05-19   #1

感谢分享, 

2022-05-19   #2

sciter达人...

登录后方可回帖

登 录
信息栏
公告:
个人博客
专注分享
谢谢合作!

本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...