Browser APIs Demo
Access browser features from server-side Java
Oorian provides Java wrappers for modern browser APIs, allowing you to access device features like geolocation, clipboard, local storage, notifications, and more—all from server-side Java code. Click the buttons below to try each API.
Geolocation API
Get the user's geographic location using the browser's Geolocation API. Requires user permission.
// Request location (triggers GeolocationEvent)
GeolocationApi.getCurrentPosition(element, GeolocationOptions.highAccuracy());
// Handle response in listener
@Override
public void onEvent(GeolocationEvent event) {
double lat = event.getLatitude();
double lng = event.getLongitude();
double accuracy = event.getAccuracy();
}Clipboard API
Copy text to the system clipboard. Works in secure contexts (HTTPS).
// Copy text to clipboard
ClipboardApi.writeText("Hello from Oorian!");
// Read from clipboard (async, triggers ClipboardEvent)
ClipboardApi.readText(element);Storage API
Save and retrieve data from the browser's localStorage. Data persists across sessions.
// Save to localStorage
StorageApi.setLocalItem("key", "value");
// Load from localStorage (triggers StorageEvent)
StorageApi.getLocalItem("key", element);
// Handle response in listener
@Override
public void onEvent(StorageEvent event) {
String value = event.getValue();
}Notification API
Show desktop notifications. Requires user permission on first use.
Desktop notifications appear outside the browser window and can include a title, body, and icon.
// Request permission (required on first use)
NotificationApi.requestPermission(element);
// Show a notification
NotificationApi.show(element, "Title", "Body text");Speech Synthesis API
Convert text to speech using the browser's speech synthesis engine.
// Speak text using default voice
SpeechApi.speak("Hello from Oorian!");
// Stop any current speech
SpeechApi.cancel();Fullscreen API
Toggle fullscreen mode for the entire page or specific elements.
Click the button to enter fullscreen mode. Press Escape or click again to exit.
// Toggle fullscreen for the document
FullscreenApi.toggleFullscreen(element);
// Request fullscreen for a specific element
FullscreenApi.requestFullscreen(myDiv);
// Exit fullscreen
FullscreenApi.exitFullscreen();Explore More Demos
Task Manager
Interactive task manager demonstrating pure Oorian features: forms, tables, e...
Weather Forecast
Real-time weather app with current conditions, 10-day forecast, hourly temper...
Sales Dashboard
Line and bar charts showing monthly sales data with smooth animations and too...
/***********************************************************************************
* Copyright (c) 2025
* Corvus Engineering, LLC
* All Rights Reserved
***********************************************************************************/
package com.oorian.website.demos;
import com.oorian.css.*;
import com.oorian.fontawesome.FaIcon;
import com.oorian.fontawesome.FaIconName;
import com.oorian.fontawesome.FaSize;
import com.oorian.html.elements.*;
import com.oorian.website.components.CodeBlock;
import com.oorian.html.js.clipboard.ClipboardApi;
import com.oorian.html.js.fullscreen.FullscreenApi;
import com.oorian.html.js.geolocation.GeolocationApi;
import com.oorian.html.js.geolocation.GeolocationEvent;
import com.oorian.html.js.geolocation.GeolocationErrorEvent;
import com.oorian.html.js.geolocation.GeolocationListener;
import com.oorian.html.js.geolocation.GeolocationOptions;
import com.oorian.html.js.notification.NotificationApi;
import com.oorian.html.js.speech.SpeechApi;
import com.oorian.html.js.storage.StorageApi;
import com.oorian.html.js.storage.StorageEvent;
import com.oorian.html.js.storage.StorageListener;
import com.oorian.messaging.events.client.MouseClickedEvent;
import com.oorian.messaging.events.client.MouseClickListener;
/****************************************************************************************************************
* Browser APIs demo component.
* Showcases Oorian's JavaScript API wrappers for browser features like
* Geolocation, Clipboard, Storage, Notifications, Speech, and Fullscreen.
****************************************************************************************************************/
public class BrowserApisDemo extends Div implements MouseClickListener, GeolocationListener, StorageListener
{
private Div locationResult;
private Div storageResult;
private TextInput storageInput;
private TextInput clipboardInput;
private TextInput speechInput;
public BrowserApisDemo()
{
createDemo();
}
private void createDemo()
{
setPadding("40px");
setBackgroundColor("#f1f5f9");
Div container = new Div();
container.setMaxWidth("1200px");
container.setMargin("0 auto");
// Header
container.addElement(createHeader());
// Intro text
P intro = new P();
intro.setText("Oorian provides Java wrappers for modern browser APIs, allowing you to access device " +
"features like geolocation, clipboard, local storage, notifications, and more\u2014all from " +
"server-side Java code. Click the buttons below to try each API.");
intro.setColor("#475569");
intro.setFontSize("16px");
intro.setLineHeight("1.7");
intro.setMarginBottom("40px");
container.addElement(intro);
// API cards (vertical layout)
Div grid = new Div();
grid.setDisplay(Display.FLEX);
grid.setFlexDirection(FlexDirection.COLUMN);
grid.addStyleAttribute("gap", "24px");
grid.addElement(createGeolocationCard());
grid.addElement(createClipboardCard());
grid.addElement(createStorageCard());
grid.addElement(createNotificationCard());
grid.addElement(createSpeechCard());
grid.addElement(createFullscreenCard());
container.addElement(grid);
addElement(container);
}
private Div createHeader()
{
Div header = new Div();
header.setMarginBottom("32px");
H2 title = new H2();
title.setText("Browser APIs Demo");
title.setColor("#1e293b");
title.setFontSize("28px");
title.setFontWeight("700");
title.setMarginTop("0");
title.setMarginBottom("8px");
header.addElement(title);
P subtitle = new P();
subtitle.setText("Access browser features from server-side Java");
subtitle.setColor("#64748b");
subtitle.setFontSize("15px");
subtitle.setMargin("0");
header.addElement(subtitle);
return header;
}
private Div createGeolocationCard()
{
Div card = createApiCard(FaIconName.LOCATION_DOT, "Geolocation API", "#ef4444",
"Get the user's geographic location using the browser's Geolocation API. " +
"Requires user permission.");
// Result display
locationResult = new Div();
locationResult.setBackgroundColor("#f8fafc");
locationResult.setBorderRadius("8px");
locationResult.setPadding("16px");
locationResult.setMarginBottom("16px");
locationResult.setFontSize("14px");
locationResult.setColor("#64748b");
locationResult.setText("Click the button to get your location...");
locationResult.setMinHeight("60px");
card.addElement(locationResult);
// Button
Button btn = new Button();
btn.setText("Get My Location");
btn.setBackgroundColor("#ef4444");
btn.setColor("#ffffff");
btn.setPadding("12px 24px");
btn.setBorderRadius("8px");
btn.setBorder("none");
btn.setFontSize("14px");
btn.setFontWeight("600");
btn.setCursor(Cursor.POINTER);
btn.registerListener(this, MouseClickedEvent.class);
btn.registerListener(this, GeolocationEvent.class);
btn.registerListener(this, GeolocationErrorEvent.class);
btn.addAttribute("data-action", "geolocation");
card.addElement(btn);
// Code example
String code =
"// Request location (triggers GeolocationEvent)\n" +
"GeolocationApi.getCurrentPosition(element, GeolocationOptions.highAccuracy());\n" +
"\n" +
"// Handle response in listener\n" +
"@Override\n" +
"public void onEvent(GeolocationEvent event) {\n" +
" double lat = event.getLatitude();\n" +
" double lng = event.getLongitude();\n" +
" double accuracy = event.getAccuracy();\n" +
"}";
card.addElement(createCodeBlock(code));
return card;
}
private Div createClipboardCard()
{
Div card = createApiCard(FaIconName.CLIPBOARD, "Clipboard API", "#3b82f6",
"Copy text to the system clipboard. Works in secure contexts (HTTPS).");
// Input
clipboardInput = new TextInput();
clipboardInput.setValue("Hello from Oorian!");
clipboardInput.setWidth("100%");
clipboardInput.setPadding("12px");
clipboardInput.setBorderRadius("8px");
clipboardInput.setBorder("1px solid #e2e8f0");
clipboardInput.setFontSize("14px");
clipboardInput.setMarginBottom("16px");
clipboardInput.addStyleAttribute("box-sizing", "border-box");
card.addElement(clipboardInput);
// Button
Button btn = new Button();
btn.setText("Copy to Clipboard");
btn.setBackgroundColor("#3b82f6");
btn.setColor("#ffffff");
btn.setPadding("12px 24px");
btn.setBorderRadius("8px");
btn.setBorder("none");
btn.setFontSize("14px");
btn.setFontWeight("600");
btn.setCursor(Cursor.POINTER);
btn.registerListener(this, MouseClickedEvent.class);
btn.addAttribute("data-action", "clipboard");
card.addElement(btn);
// Code example
String code =
"// Copy text to clipboard\n" +
"ClipboardApi.writeText(\"Hello from Oorian!\");\n" +
"\n" +
"// Read from clipboard (async, triggers ClipboardEvent)\n" +
"ClipboardApi.readText(element);";
card.addElement(createCodeBlock(code));
return card;
}
private Div createStorageCard()
{
Div card = createApiCard(FaIconName.DATABASE, "Storage API", "#10b981",
"Save and retrieve data from the browser's localStorage. Data persists across sessions.");
// Input
storageInput = new TextInput();
storageInput.setPlaceholder("Enter a value to store...");
storageInput.setWidth("100%");
storageInput.setPadding("12px");
storageInput.setBorderRadius("8px");
storageInput.setBorder("1px solid #e2e8f0");
storageInput.setFontSize("14px");
storageInput.setMarginBottom("12px");
storageInput.addStyleAttribute("box-sizing", "border-box");
card.addElement(storageInput);
// Result display
storageResult = new Div();
storageResult.setBackgroundColor("#f8fafc");
storageResult.setBorderRadius("8px");
storageResult.setPadding("12px");
storageResult.setMarginBottom("16px");
storageResult.setFontSize("14px");
storageResult.setColor("#64748b");
storageResult.setText("No stored value yet");
card.addElement(storageResult);
// Buttons
Div btnRow = new Div();
btnRow.setDisplay(Display.FLEX);
btnRow.addStyleAttribute("gap", "12px");
Button saveBtn = new Button();
saveBtn.setText("Save");
saveBtn.setBackgroundColor("#10b981");
saveBtn.setColor("#ffffff");
saveBtn.setPadding("12px 24px");
saveBtn.setBorderRadius("8px");
saveBtn.setBorder("none");
saveBtn.setFontSize("14px");
saveBtn.setFontWeight("600");
saveBtn.setCursor(Cursor.POINTER);
saveBtn.registerListener(this, MouseClickedEvent.class);
saveBtn.addAttribute("data-action", "storage-save");
btnRow.addElement(saveBtn);
Button loadBtn = new Button();
loadBtn.setText("Load");
loadBtn.setBackgroundColor("#059669");
loadBtn.setColor("#ffffff");
loadBtn.setPadding("12px 24px");
loadBtn.setBorderRadius("8px");
loadBtn.setBorder("none");
loadBtn.setFontSize("14px");
loadBtn.setFontWeight("600");
loadBtn.setCursor(Cursor.POINTER);
loadBtn.registerListener(this, MouseClickedEvent.class);
loadBtn.registerListener(this, StorageEvent.class);
loadBtn.addAttribute("data-action", "storage-load");
btnRow.addElement(loadBtn);
card.addElement(btnRow);
// Code example
String code =
"// Save to localStorage\n" +
"StorageApi.setLocalItem(\"key\", \"value\");\n" +
"\n" +
"// Load from localStorage (triggers StorageEvent)\n" +
"StorageApi.getLocalItem(\"key\", element);\n" +
"\n" +
"// Handle response in listener\n" +
"@Override\n" +
"public void onEvent(StorageEvent event) {\n" +
" String value = event.getValue();\n" +
"}";
card.addElement(createCodeBlock(code));
return card;
}
private Div createNotificationCard()
{
Div card = createApiCard(FaIconName.BELL, "Notification API", "#f59e0b",
"Show desktop notifications. Requires user permission on first use.");
// Info text
P info = new P();
info.setText("Desktop notifications appear outside the browser window and can include a title, body, and icon.");
info.setColor("#64748b");
info.setFontSize("13px");
info.setMarginTop("0");
info.setMarginBottom("16px");
card.addElement(info);
// Button
Button btn = new Button();
btn.setText("Show Notification");
btn.setBackgroundColor("#f59e0b");
btn.setColor("#ffffff");
btn.setPadding("12px 24px");
btn.setBorderRadius("8px");
btn.setBorder("none");
btn.setFontSize("14px");
btn.setFontWeight("600");
btn.setCursor(Cursor.POINTER);
btn.registerListener(this, MouseClickedEvent.class);
btn.addAttribute("data-action", "notification");
card.addElement(btn);
// Code example
String code =
"// Request permission (required on first use)\n" +
"NotificationApi.requestPermission(element);\n" +
"\n" +
"// Show a notification\n" +
"NotificationApi.show(element, \"Title\", \"Body text\");";
card.addElement(createCodeBlock(code));
return card;
}
private Div createSpeechCard()
{
Div card = createApiCard(FaIconName.VOLUME_HIGH, "Speech Synthesis API", "#8b5cf6",
"Convert text to speech using the browser's speech synthesis engine.");
// Input
speechInput = new TextInput();
speechInput.setValue("Welcome to Oorian Framework!");
speechInput.setWidth("100%");
speechInput.setPadding("12px");
speechInput.setBorderRadius("8px");
speechInput.setBorder("1px solid #e2e8f0");
speechInput.setFontSize("14px");
speechInput.setMarginBottom("16px");
speechInput.addStyleAttribute("box-sizing", "border-box");
card.addElement(speechInput);
// Button
Button btn = new Button();
btn.setText("Speak Text");
btn.setBackgroundColor("#8b5cf6");
btn.setColor("#ffffff");
btn.setPadding("12px 24px");
btn.setBorderRadius("8px");
btn.setBorder("none");
btn.setFontSize("14px");
btn.setFontWeight("600");
btn.setCursor(Cursor.POINTER);
btn.registerListener(this, MouseClickedEvent.class);
btn.addAttribute("data-action", "speech");
card.addElement(btn);
// Code example
String code =
"// Speak text using default voice\n" +
"SpeechApi.speak(\"Hello from Oorian!\");\n" +
"\n" +
"// Stop any current speech\n" +
"SpeechApi.cancel();";
card.addElement(createCodeBlock(code));
return card;
}
private Div createFullscreenCard()
{
Div card = createApiCard(FaIconName.EXPAND, "Fullscreen API", "#06b6d4",
"Toggle fullscreen mode for the entire page or specific elements.");
// Info text
P info = new P();
info.setText("Click the button to enter fullscreen mode. Press Escape or click again to exit.");
info.setColor("#64748b");
info.setFontSize("13px");
info.setMarginTop("0");
info.setMarginBottom("16px");
card.addElement(info);
// Button
Button btn = new Button();
btn.setText("Toggle Fullscreen");
btn.setBackgroundColor("#06b6d4");
btn.setColor("#ffffff");
btn.setPadding("12px 24px");
btn.setBorderRadius("8px");
btn.setBorder("none");
btn.setFontSize("14px");
btn.setFontWeight("600");
btn.setCursor(Cursor.POINTER);
btn.registerListener(this, MouseClickedEvent.class);
btn.addAttribute("data-action", "fullscreen");
card.addElement(btn);
// Code example
String code =
"// Toggle fullscreen for the document\n" +
"FullscreenApi.toggleFullscreen(element);\n" +
"\n" +
"// Request fullscreen for a specific element\n" +
"FullscreenApi.requestFullscreen(myDiv);\n" +
"\n" +
"// Exit fullscreen\n" +
"FullscreenApi.exitFullscreen();";
card.addElement(createCodeBlock(code));
return card;
}
private Div createApiCard(String iconName, String title, String accentColor, String description)
{
Div card = new Div();
card.setBackgroundColor("#ffffff");
card.setBorderRadius("12px");
card.setPadding("24px");
card.addStyleAttribute("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)");
card.setBorderTop("4px solid " + accentColor);
// Header with icon
Div header = new Div();
header.setDisplay(Display.FLEX);
header.setAlignItems(AlignItems.CENTER);
header.addStyleAttribute("gap", "12px");
header.setMarginBottom("16px");
FaIcon icon = new FaIcon(FaIcon.SOLID, iconName)
.setIconColor(accentColor)
.setSize(FaSize.XL);
header.addElement(icon);
H4 titleEl = new H4();
titleEl.setText(title);
titleEl.setColor("#1e293b");
titleEl.setFontSize("18px");
titleEl.setFontWeight("600");
titleEl.setMarginTop("0");
titleEl.setMarginBottom("0");
header.addElement(titleEl);
card.addElement(header);
// Description
P desc = new P();
desc.setText(description);
desc.setColor("#64748b");
desc.setFontSize("14px");
desc.setLineHeight("1.6");
desc.setMarginTop("0");
desc.setMarginBottom("20px");
card.addElement(desc);
return card;
}
private Div createCodeBlock(String code)
{
Div wrapper = new Div();
wrapper.setMarginTop("20px");
wrapper.addElement(CodeBlock.java(code));
return wrapper;
}
@Override
public void onEvent(MouseClickedEvent event)
{
Button btn = (Button) event.getSource();
String action = btn.getAttribute("data-action");
if (action == null)
{
return;
}
switch (action)
{
case "geolocation":
locationResult.setText("Requesting location...");
locationResult.setColor("#64748b");
GeolocationApi.getCurrentPosition(btn, GeolocationOptions.highAccuracy());
break;
case "clipboard":
String textToCopy = clipboardInput.getValue();
if (textToCopy != null && !textToCopy.isEmpty())
{
ClipboardApi.writeText(textToCopy);
// Show feedback by briefly changing button text
btn.setText("Copied!");
}
break;
case "storage-save":
String valueToSave = storageInput.getValue();
if (valueToSave != null && !valueToSave.isEmpty())
{
StorageApi.setLocalItem("oorian-demo-value", valueToSave);
storageResult.setText("Saved: " + valueToSave);
storageResult.setColor("#10b981");
}
break;
case "storage-load":
StorageApi.getLocalItem("oorian-demo-value", btn);
break;
case "notification":
NotificationApi.requestPermission(btn);
NotificationApi.show(btn, "Oorian Framework",
"Hello from server-side Java! This notification was triggered by the NotificationApi.");
break;
case "speech":
String textToSpeak = speechInput.getValue();
if (textToSpeak != null && !textToSpeak.isEmpty())
{
SpeechApi.speak(textToSpeak);
}
break;
case "fullscreen":
FullscreenApi.toggleFullscreen(btn);
break;
}
}
@Override
public void onEvent(GeolocationEvent event)
{
double lat = event.getLatitude();
double lng = event.getLongitude();
double accuracy = event.getAccuracy();
locationResult.setText(String.format(
"Latitude: %.6f%nLongitude: %.6f%nAccuracy: %.0f meters",
lat, lng, accuracy));
locationResult.setColor("#10b981");
}
@Override
public void onEvent(GeolocationErrorEvent event)
{
locationResult.setText("Error: " + event.getMessage());
locationResult.setColor("#ef4444");
}
@Override
public void onEvent(StorageEvent event)
{
String value = event.getValue();
if (value != null && !value.isEmpty())
{
storageResult.setText("Loaded: " + value);
storageResult.setColor("#10b981");
}
else
{
storageResult.setText("No value found in storage");
storageResult.setColor("#64748b");
}
}
}