This guide demonstrates how to display a page tab, embedded within the window frame container. Resizing the window frame also resizes the page tab proportionately; clicking a page tab 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>Page Tab</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 pageTabControl; // Declare page tab control.
let textLabels = []; // Declare text labels.
let pageTabLinks = []; // Declare page tab links.
let pageTabContents = []; // Declare page tab contents.
// 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);
}
// Page tab initialized callback handler.
function onPageTabInitialized(event)
{
pageTabControl.setElementStyle
(
'height', '160px', ['javaika-page-tab-contents']
);
pageTabControl.setSizeFactor(1.5); // Increase initial size.
// Add the click events to the page tab links.
for (let pageTabLink of pageTabLinks)
{
pageTabLink.setEvent
(
'click', (event) => onClick(event, pageTabLink) // Bind click event.
);
}
console.log('[Web Interface] Page tab initialized callback:', event);
}
// Click callback handler.
function onClick(event, pageTabLink)
{
const text = pageTabLink.getText();
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();
pageTabControl = new jwi.PageTab();
pageTabLinks[0] = new jwi.PageTabLink("Tab 1");
pageTabLinks[1] = new jwi.PageTabLink("Tab 2");
pageTabLinks[2] = new jwi.PageTabLink("Tab 3");
pageTabContents[0] = new jwi.PageTabContent();
pageTabContents[1] = new jwi.PageTabContent();
pageTabContents[2] = new jwi.PageTabContent();
textLabels[0] = new jwi.TextLabel
(
"Text label embedded inside tab content 1"
);
textLabels[1] = new jwi.TextLabel
(
"Text label embedded inside tab content 2"
);
textLabels[2] = new jwi.TextLabel
(
"Text label embedded inside tab content 3"
);
// Add text label components to the page tab content.
pageTabContents[0].addTextLabelElement(textLabels[0]);
pageTabContents[1].addTextLabelElement(textLabels[1]);
pageTabContents[2].addTextLabelElement(textLabels[2]);
// Add content components to the page tab control.
pageTabControl.addContentElement(pageTabContents[0]);
pageTabControl.addContentElement(pageTabContents[1]);
pageTabControl.addContentElement(pageTabContents[2]);
// Add link components to the page tab control.
pageTabControl.addLinkElement(pageTabLinks[0]);
pageTabControl.addLinkElement(pageTabLinks[1]);
pageTabControl.addLinkElement(pageTabLinks[2]);
// Add initial styles for the text labels.
textLabels[0].addStyle('font-size', '20px');
textLabels[1].addStyle('font-size', '20px');
textLabels[2].addStyle('font-size', '20px');
textLabels[0].addStyle('left', '10%');
textLabels[1].addStyle('left', '10%');
textLabels[2].addStyle('left', '10%');
textLabels[0].addStyle('top', '35%');
textLabels[1].addStyle('top', '35%');
textLabels[2].addStyle('top', '35%');
// Add initial styles for the page tab.
pageTabControl.addStyle('width', '300px');
pageTabControl.addStyle('left', '12%');
pageTabControl.addStyle('top', '22%');
// Add page tab component to the window frame.
windowFrame.addPageTabElement(pageTabControl);
// 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 page tab initialized.
document.addEventListener
(
'javaika.webInterface.pageTabInitialized', onPageTabInitialized
);
// Callback event after window frame resize.
document.addEventListener
(
'javaika.webInterface.windowFrameResized', onWindowFrameResized
);
</script>
</body>
</html>
/* Standard class styles */
.javaika-page-tab
{
position: absolute;
user-select: none;
width: 200px;
display: none;
}
.javaika-page-tab-link
{
background-color: #FAFAFA;
border: 1px solid;
border-color: #AAA;
user-select: none;
padding: 0.67em;
cursor: pointer;
outline: none;
float: left;
}
.javaika-page-tab-content
{
background-color: #FAFAFA;
height: 100%;
display: none;
}
.javaika-page-tab-links
{
overflow: hidden;
font-size: 15px;
}
.javaika-page-tab-contents
{
box-sizing: border-box;
border: 1px solid;
border-color: #AAA;
font-size: 14px;
height: 100px;
}
/* Adjoined class styles */
.javaika-page-tab.disabled
{
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
.javaika-page-tab-link.active
{
background-color: #FFF;
}
/* Pseudo class styles */
.javaika-page-tab:focus
{
outline: none;
}
.javaika-page-tab:focus-visible
{
outline: 2px solid #809DFF;
outline-offset: 3px;
}