In the last section we discussed how to manually resize the window frame container. In this section we will
demonstrate how to automatically resize the window frame when the dimensions of the browser window changes.
Similar to the preceding section, we will introduce the next callback function to log the event object
containing the browser window properties to the console. You can additionally use the properties within
this callback to fine tune your window responsive implementations. With this demo, if you resize the
dimensions of the browser window, the dimensions of the window frame (contained inside the browser window)
should dynamically resize. Similar to the previous demo, you should observe the default margins applied
at the top and left edge of the browser window, before the window frame border. In order to ensure
symmetry with the bottom and right edge of the window frame, we apply an offset width and height
(for applying similar margins to the bottom and right edge of the browser window) before
rendering the interface.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Auto Resizing</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-interface@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
// Initialize a shorter prefix for referencing.
const jwi = window.javaika.webInterface;
// Initialize the developer token endpoint.
jwi.init({
tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
});
// Authenticate before using the framework.
jwi.requestToken({
framework: "web_interface" // Specify the framework for token issuance.
});
// Authenticate callback handler.
function onAuthenticate(event)
{
jwi.refreshToken(); // Refresh the authentication token.
console.log('[Web Interface] Authentication received callback:', event);
}
// Window frame resized callback handler.
function onWindowFrameResized(event)
{
console.log('[Web Interface] Window frame resized callback:', event);
}
// Browser window resized callback handler.
function onBrowserWindowResized(event)
{
console.log('[Web Interface] Browser window resized callback:', event);
}
// Initialized callback handler.
function onInitialized(event)
{
// Define the controls for the interface.
let windowFrame = new jwi.WindowFrame();
// Enable manual resizing of the container window.
jwi.setContainerAutoResizable(true);
// Set container offsets to the browser window.
jwi.setContainerOffsetHeight(17);
jwi.setContainerOffsetWidth(17);
// Render interface to the browser window.
jwi.renderInterface(windowFrame);
console.log('[Web Interface] Framework initialized callback:', event);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webInterface.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webInterface.initialized', onInitialized
);
// Callback event after window frame resize.
document.addEventListener
(
'javaika.webInterface.windowFrameResized', onWindowFrameResized
);
// Callback event after browser window resize.
document.addEventListener
(
'javaika.webInterface.browserWindowResized', onBrowserWindowResized
);
</script>
</body>
</html>
Next capability: Discuss how to center the window frame container.