In this section we discuss how to center the window frame vertically and horizontally within the browser window
whilst simultaneously preserving the original aspect ratio of the window frame container. To achieve this, we
introduce a few additional concepts as follows: 1. Controlling exactly where the interface components are
injected inside the html document by explicitly including the parent 'div' element of the window frame
container. 2. Wrapping the parent div element in an outer container 'div' tag - which we target with
appropriate flex-box styling. 3. Including a function to lock the dimensions to the original aspect ratio.
You should observe that when changing the dimensions of the browser window, the centered window frame
preserves its aspect ratio and dynamically resizes to respect the bounds of the browser window's width
and height.
<!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">
<style>
#outer-container
{
display: flex; padding-top: 20px; height: calc(100vh - 60px);
flex-direction: column; justify-content: center; align-items: center;
}
</style>
</head>
<body>
<!-- Explicit inclusion of tags for controlling window frame location -->
<div id = "outer-container"> <!-- Outer container targeted with styling -->
<div id = 'javaika-web-interface'></div> <!-- This is where the interface is rendered -->
<noscript id = "javascript-disabled">JavaScript is disabled</noscript>
</div>
<!-- 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);
// Maintain the aspect ratio during window resize.
jwi.setMaintainAspectRatio(true);
// Set container offsets to the browser window.
jwi.setContainerOffsetHeight(60);
jwi.setContainerOffsetWidth(60);
// 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 interface zoning within the parent frame.