In this guide we start to introduce a few important capabilities, for example, adding a Text Label to the window
frame, binding a few simple 'mouse over' and 'mouse out' events onto this control - and applying custom CSS to
underline the Text Label on mouse hover. Applying CSS styles and event bindings will be covered in more depth
in future guides, however we introduce a few of these concepts early. These guides covering the atomic controls
available within the latest release of this framework will be demonstrated with a simple 'manually resizable'
window frame with the aspect ratio locked. You can resize the window frame using the diagonal handle; hover
the mouse close to the bottom-right corner of the window frame to resize it - you should notice that the
control embedded inside the window frame should also dynamically resize.
Also included are the CSS styles - which allows you to understand the CSS class identifiers used to build
the default styles for each atomic control - and how to override those default styles using the framework.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Text Label</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;
let textLabelControl; // Declare text label control.
// 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)
{
jwi.scaleInterfaceControls(event.detail.scaleFactor);
}
// Text label initialized callback handler.
function onTextLabelInitialized(event)
{
textLabelControl.setEvent('mouseover', onMouseOver); // Bind mouseover event.
textLabelControl.setEvent('mouseout', onMouseOut); // Bind mouseout event.
console.log('[Web Interface] Text label initialized callback:', event);
}
// Mouse over callback handler.
function onMouseOver(event)
{
textLabelControl.setElementStyle
(
'text-decoration', 'underline', ['javaika-text-label']
);
console.log('[Web Interface] Mouse over callback:', event);
}
// Mouse out callback handler.
function onMouseOut(event)
{
textLabelControl.setElementStyle
(
'text-decoration', 'none', ['javaika-text-label']
);
console.log('[Web Interface] Mouse out callback:', event);
}
// Initialized callback handler.
function onInitialized(event)
{
// Define the controls for the interface.
let windowFrame = new jwi.WindowFrame();
textLabelControl = new jwi.TextLabel("Hello Javaika");
// Add initial styles for the text label.
textLabelControl.addStyle('font-size', '50px');
textLabelControl.addStyle('left', '27%');
textLabelControl.addStyle('top', '42%');
// Add text label component to the window frame.
windowFrame.addTextLabelElement(textLabelControl);
// Enable manual resizing of the container window.
jwi.setContainerManuallyResizable(true);
jwi.setMaintainAspectRatio(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 text label initialized.
document.addEventListener
(
'javaika.webInterface.textLabelInitialized', onTextLabelInitialized
);
// Callback event after window frame resize.
document.addEventListener
(
'javaika.webInterface.windowFrameResized', onWindowFrameResized
);
</script>
</body>
</html>
/* Standard class styles */
.javaika-text-label
{
position: absolute;
user-select: none;
font-size: 14px;
display: none;
}
/* Adjoined class styles */
.javaika-text-label.disabled
{
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
/* Pseudo class styles */
.javaika-text-label:focus
{
outline: none;
}
.javaika-text-label:focus-visible
{
outline: 2px solid #809DFF;
outline-offset: 3px;
}
Next capability: Demonstrate how to incorporate a Button.