mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-04 03:40:45 +08:00
da99ea47b0
Serve runtime from assetserver if requested. Add gin guide, fix asset server merge, add gin example adding http.CloseNotifier and http.Flusher interface to assetserver.contentTypeSniffer, for Gin (and other framework) compatibility.
95 lines
3.9 KiB
HTML
95 lines
3.9 KiB
HTML
<html>
|
|
<head>
|
|
<title>Wails + Gin Example</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
h1 {
|
|
color: #0078d7;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 1rem;
|
|
}
|
|
button {
|
|
background-color: #0078d7;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
button:hover {
|
|
background-color: #0063b1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Wails + Gin Integration</h1>
|
|
<div class="card">
|
|
<h2>Hello World!</h2>
|
|
<p>This page is being served by Gin.</p>
|
|
<p>Click the button below to trigger a Wails event:</p>
|
|
<button id="triggerEvent">Trigger Event</button>
|
|
<div id="eventResult" style="margin-top: 1rem; padding: 1rem; background-color: #f0f0f0; border-radius: 4px; display: none;"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>API Example</h2>
|
|
<p>Try the Gin API endpoint:</p>
|
|
<button id="callApi">Call API</button>
|
|
<div id="apiResult" style="margin-top: 1rem; padding: 1rem; background-color: #f0f0f0; border-radius: 4px;"></div>
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
import * as wails from '/wails/runtime.js';
|
|
|
|
// Wait for the Wails runtime to be ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('triggerEvent').addEventListener('click', async () => {
|
|
try {
|
|
console.log('Attempting to emit event...');
|
|
await wails.Events.Emit('gin-button-clicked', 'Hello from Gin!');
|
|
console.log('Event emitted successfully');
|
|
document.getElementById('eventResult').textContent = 'Event emitted successfully!';
|
|
document.getElementById('eventResult').style.display = 'block';
|
|
} catch (error) {
|
|
console.error('Error emitting event:', error);
|
|
document.getElementById('eventResult').textContent = 'Error: ' + error.message;
|
|
document.getElementById('eventResult').style.display = 'block';
|
|
}
|
|
});
|
|
|
|
document.getElementById('callApi').addEventListener('click', async () => {
|
|
try {
|
|
const response = await fetch('/api/hello');
|
|
const data = await response.json();
|
|
document.getElementById('apiResult').textContent = JSON.stringify(data, null, 2);
|
|
} catch (error) {
|
|
console.error('Error calling API:', error);
|
|
document.getElementById('apiResult').textContent = 'Error: ' + error.message;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|