In the last section we discussed how to render a plain window frame container inside a browser window - which is
quite boring indeed. In this section (and others to follow) we discuss how to make the window frame responsive
through various mechanisms. Feel free to grab a coffee before we get started :)
In this exercise we demonstrate horizontal, vertical, and diagonal handles to resize the default dimensions
of the window frame. Additionally, when the window frame is resized, a callback function is triggered which logs
the event object to the browser console. You will use this object in future guides to dynamically modify the
default properties of various controls added to the window frame (canvas) for implementing responsiveness
within your web applications. If you hover your mouse close enough to the borders of the window frame, you
should observe the cursor change to horizontal, vertical, or diagonal arrows, which you can use to resize
the window frame after clicking and dragging the mouse.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Manual 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);
}
// 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.setContainerManuallyResizable(true);
// Set Handle offsets from the container window.
jwi.setContainerOffsetHeight(50);
jwi.setContainerOffsetWidth(50);
// 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
);
</script>
</body>
</html>
Next capability: Discuss interface zoning within the parent frame.