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

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

全局事件可用于来自应用程序的本机端（此处为“后端”）的通知，以通知 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