05-12-2025, 12:29 PM
[attachment=1372]Here's an example with Semantic UI. The class file needed is also included.
webui-forum.cs:
csharp_from_js_events.cs (class file):
webui-forum.cs:
// script "webui-forum.cs"
/*/ nuget wui\WebUI4CSharp; nuget wui\WebUI4CSharp.Natives; c csharp_from_js_events.cs; /*/
using WebUI4CSharp;
using System.Windows.Forms;
using System.Threading;
script.setup(trayIcon: true, sleepExit: true);
var js_script = $"alert('Hi LA!')";
string my_html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="webui.js"></script>
<title>LA Forum - WebUI Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
header {
display: flex; position: fixed;
color: white; background: #2185d0;
user-select: none; width: 100vw;
}
header > * { padding: 5px; }
header > span { flex-grow: 1; -webkit-app-region: drag; }
header > div {
cursor: pointer; font-family: Webdings;
padding-left: 1em; padding-right: 1em;
}
header > div:hover { background: #1678c2; }
header > div:last-child:hover { background: #dc3545; }
header > div:nth-last-child(2) { display: none; }
body.ahk-maximized header > div:nth-last-child(2) { display: block; }
body.ahk-maximized header > div:nth-last-child(3) { display: none; }
.sidebar {
width: 100px;
padding-top: 40px;
position: fixed;
height: 100%;
}
.sidebar > .ui.menu { width: 100%; }
.content {
margin-left: 100px;
padding: 20px;
width: calc(100% - 100px);
padding-top: 50px;
}
</style>
</head>
<body>
<header>
<span>Semantic UI</span>
<div onclick="ahk.gui.Minimize()">0</div>
<div onclick="ahk.gui.Maximize()">1</div>
<div onclick="ahk.gui.Restore()">2</div>
<div onclick="ahk.gui.Hide()">r</div>
</header>
<nav class="sidebar">
<div class="ui secondary vertical pointing menu">
<a class="item active" data-tab="buttons">Buttons</a>
<a class="item" data-tab="forms">Forms</a>
<a class="item" data-tab="modals">Modals</a>
<a class="item" data-tab="tables">Tables</a>
</div>
</nav>
<div class="content">
<div class="ui tab active" data-tab="buttons">
<h3 class="ui header">Buttons</h3>
<button onclick="button1()" class="ui button">Please do something when I'm clicked!</button>
<button onclick="alert('You clicked Primary')" class="ui primary button">Primary</button>
<button onclick="alert('You clicked Secondary')" class="ui secondary button">Secondary</button>
</div>
<div class="ui tab" data-tab="forms">
<h3 class="ui header">Forms</h3>
<form class="ui form">
<div class="field">
<label>Name</label>
<input type="text" placeholder="Enter name">
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
<div class="ui tab" data-tab="modals">
<h3 class="ui header">Modals</h3>
<button class="ui button" id="show-modal">Show Modal</button>
<div class="ui modal" style="width: 300px !important; margin-left: auto !important; margin-right: auto !important;"> <!-- Added style here -->
<div class="header" style="text-align:center">Modal Title</div>
<div
class="content"
style="
height:100px;
max-width:250px;
text-align:left;
font-family:Lucida Handwriting;
font-size:12px;
margin: auto;
border: 3px solid #73AD21;"
>
<p>This is a simple modal window.</p>
<p>Style as you see fit.</p>
</div>
<div class="actions">
<button class="ui button" id="hide-modal">Close</button>
</div>
</div>
</div>
<div class="ui tab" data-tab="tables">
<h3 class="ui header">Tables</h3>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>Developer</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Designer</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$('.menu .item').tab();
$('#show-modal').click(function() {
$('.ui.modal').modal('show');
});
$('#hide-modal').click(function() {
$('.ui.modal').modal('hide');
});
</script>
</body>
</html>
""";
WebUIWindow window = new WebUIWindow();
window.Run(js_script);
window.Bind("button1", WebUI_Events.button1);
window.SetSize(800, 400);
window.Show(my_html);
window.SetPosition(100, 100);
WebUI.Wait();
WebUI.Clean();csharp_from_js_events.cs (class file):
/*/ nuget wui\WebUI4CSharp; nuget wui\WebUI4CSharp.Natives; /*/
using WebUI4CSharp;
using System.Windows.Forms;
using System.Threading;
/// <summary>
/// Events for WebUI
/// </summary>
public static class WebUI_Events
{
/// <summary>
/// button1 test for forum post on webui
/// </summary>
/// <param name="e"></param>
public static void button1(ref webui_event_t e) {
// JavaScript:
// my_function_with_response(number, 2).then(...)
WebUIEvent lEvent = new WebUIEvent(e);
Console.WriteLine("LA did this");
dialog.show("ZZZZ ...", title: "Sleeping");
// Send back the response to JavaScript
//lEvent.ReturnInt(res);
}
}