This guide demonstrates how to display a scroll box, embedded within the window frame container. Resizing the window frame also resizes the scroll box proportionately; clicking a scroll box text logs the event to the console.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Scroll Box</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 scrollBoxControl; // Declare scroll box control.
let scrollBoxTexts = []; // Declare scroll box texts.
// 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);
}
// Scroll box initialized callback handler.
function onScrollBoxInitialized(event)
{
scrollBoxControl.setSizeFactor(1.5); // Increase initial size.
// Set scroll box texts via a function call.
scrollBoxTexts[3].setValue("4: Scroll box text value set by function");
scrollBoxTexts[4].setValue("5: Scroll box text value set by function");
scrollBoxTexts[5].setValue("6: Scroll box text value set by function");
scrollBoxTexts[6].setValue("7: Scroll box text value set by function");
scrollBoxTexts[7].setValue("8: Scroll box text value set by function");
// Add the scroll box texts to the scroll box control.
for (let scrollBoxText of scrollBoxTexts)
{
scrollBoxControl.addTextEntry(scrollBoxText); // Add text.
scrollBoxText.setEvent
(
'click', (event) => onClick(event, scrollBoxText) // Bind click event.
);
}
console.log('[Web Interface] Scroll box initialized callback:', event);
}
// Click callback handler.
function onClick(event, scrollBoxText)
{
const text = scrollBoxText.getText();
scrollBoxControl.removeTextEntry(scrollBoxText);
console.log('[Web Interface] Click callback:', event);
console.log('[Web Interface] The text is:', text);
}
// Initialized callback handler.
function onInitialized(event)
{
// Define the controls for the interface.
let windowFrame = new jwi.WindowFrame();
scrollBoxControl = new jwi.ScrollBox();
// Set scroll box texts via the constructor.
scrollBoxTexts[0] = new jwi.ScrollBoxText
(
"1: Scroll box text value set by constructor"
);
scrollBoxTexts[1] = new jwi.ScrollBoxText
(
"2: Scroll box text value set by constructor"
);
scrollBoxTexts[2] = new jwi.ScrollBoxText
(
"3: Scroll box text value set by constructor"
);
// Define some other scroll box texts.
scrollBoxTexts[3] = new jwi.ScrollBoxText();
scrollBoxTexts[4] = new jwi.ScrollBoxText();
scrollBoxTexts[5] = new jwi.ScrollBoxText();
scrollBoxTexts[6] = new jwi.ScrollBoxText();
scrollBoxTexts[7] = new jwi.ScrollBoxText();
// Add initial styles for the scroll box.
scrollBoxControl.addStyle('height', '190px');
scrollBoxControl.addStyle('left', '12%');
scrollBoxControl.addStyle('top', '22%');
// Add scroll box component to the window frame.
windowFrame.addScrollBoxElement(scrollBoxControl);
// 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 scroll box initialized.
document.addEventListener
(
'javaika.webInterface.scrollBoxInitialized', onScrollBoxInitialized
);
// Callback event after window frame resize.
document.addEventListener
(
'javaika.webInterface.windowFrameResized', onWindowFrameResized
);
</script>
</body>
</html>
/* Standard class styles */
.javaika-scroll-box
{
background-color: #FFF;
box-sizing: border-box;
border: 1px solid;
border-color: #AAA;
position: absolute;
user-select: none;
overflow: hidden;
height: 200px;
width: 300px;
display: none;
}
.javaika-scroll-box-thumb
{
background: linear-gradient(to right, #E0E0E0, #E0E0E0, #E0E0E0);
box-shadow: 0 0 0 1px #E0E0E0 inset;
position: absolute;
cursor: pointer;
height: 40px;
width: 100%;
}
.javaika-scroll-box-track
{
background-color: #F5F5F5;
position: absolute;
display: none;
height: 100%;
width: 8px;
right: 0;
top: 0;
}
.javaika-scroll-box-content
{
padding-right: 5px;
padding-left: 5px;
font-size: 15px;
}
.javaika-scroll-box-text
{
padding-bottom: 0.48em;
padding-top: 0.48em;
}
/* Adjoined class styles */
.javaika-scroll-box.disabled
{
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
/* Pseudo class styles */
.javaika-scroll-box:focus
{
outline: none;
}
.javaika-scroll-box:focus-visible
{
outline: 2px solid #809DFF;
outline-offset: 3px;
}
Next capability: Demonstrate how to incorporate a Page Tab.