83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<html window-icon="https://cdn2.iconfinder.com/data/icons/arts-crafts-sewing/24/sewing_thread_handcraft_craft_1-32.png">
|
|
<head>
|
|
<title>Threads demo</title>
|
|
<style>
|
|
div#content { flow:horizontal; size:*; }
|
|
div#explanation { size:*; padding:20px; overflow:auto; }
|
|
div#explanation > pre { padding:10px; border:1px dotted #999; background:#ffffef; }
|
|
|
|
div#tasks { width:300px; height:*; }
|
|
div#tasks > select { size:*; display:block; }
|
|
div#tasks > select progress { margin-left: 5px; }
|
|
</style>
|
|
<script type="text/tiscript">
|
|
|
|
var taskNo = 0;
|
|
|
|
$(#start-task).onClick = function()
|
|
{
|
|
++taskNo;
|
|
|
|
var taskElem = $(div#tasks > select).$append(<option>Task { taskNo }<progress max=100 /> <span.result /></option>);
|
|
|
|
function onProgress(p100) { taskElem.$(progress).value = p100; }
|
|
function onDone(taskId) {
|
|
taskElem.$(span.result).text = "Done!";
|
|
taskElem.$(progress).remove();
|
|
}
|
|
|
|
view.exec_task(taskNo, onProgress, onDone);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h2>Sciter UI, threads demo</h2>
|
|
<div id="content">
|
|
<div id="tasks">
|
|
<button id="start-task">Start Task</button>
|
|
<select type="select"></select>
|
|
</div>
|
|
<div id="explanation">
|
|
<p>The Start Task onClick handler is defined as</p>
|
|
<pre>
|
|
$(#start-task).onClick = function()
|
|
{
|
|
var taskElem = $(div#tasks > select)
|
|
.$append(<option>Task { ++taskNo }
|
|
<progress max=100 />
|
|
<span.result /></option>);
|
|
function onProgress(p100) {
|
|
taskElem.$(progress).value = p100;
|
|
}
|
|
function onDone(taskId) {
|
|
taskElem.$(span.result).text = "Done!";
|
|
taskElem.$(progress).remove();
|
|
}
|
|
view.exec_task(taskId, onProgress, onDone);
|
|
}
|
|
</pre>
|
|
|
|
<p>It defines couple of callback functions and calls <code>view.exec_task()</code> with them.</p>
|
|
<p>The <code>view.exec_task()</code> native method is implemented in <code>EventHandler::exec_task()</code>.</p>
|
|
<p>The <code>EventHandler::exec_task()</code> starts worker thread passing <em>taskNo</em>, <em>onProgress</em> and
|
|
<em>onDone</em> parameters to it.</p>
|
|
<p>Worker thread body is defined in Rust code as:</p>
|
|
<pre>
|
|
// worker thread body, simulate time consuming task
|
|
fn thread_body(task_no: i32, progress: Value, done: Value)
|
|
{
|
|
for i in 1..100 {
|
|
std::thread::sleep(std::time::Duration::from_millis(100));
|
|
progress.call(None, &make_args!(i), None).unwrap(); // report task progress
|
|
}
|
|
// report task completion,
|
|
// we can pass some result data here, for now just taskId
|
|
done.call(None, &make_args!(task_no), None).unwrap();
|
|
}
|
|
</pre>
|
|
<p>As you see it calls passed callback functions.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|