Skip to content

Instantly share code, notes, and snippets.

@ThomasRohde

ThomasRohde/Browser experiment.ajs

Last active July 23, 2023 10:41
Show Gist options
  • Save ThomasRohde/73d250bcf8e27bf76d7b7f92977f7c83 to your computer and use it in GitHub Desktop.
Save ThomasRohde/73d250bcf8e27bf76d7b7f92977f7c83 to your computer and use it in GitHub Desktop.
Download ZIP
Proof-of-concept of how to use a Browser to collect form data in #Archi / #JArchi
Raw
Browser experiment.ajs
/*
Author: Thomas Klok Rohde
Description: Proof-of-concept of how to use a Browser to collect form data.
*/
console.show();
console.clear();
const SWT = Java.type('org.eclipse.swt.SWT');
const FillLayout = Java.type('org.eclipse.swt.layout.FillLayout');
const Shell = Java.type('org.eclipse.swt.widgets.Shell');
const Browser = Java.type('org.eclipse.swt.browser.Browser');
const ProgressAdapter = Java.extend(Java.type('org.eclipse.swt.browser.ProgressAdapter'));
const LocationAdapter = Java.extend(Java.type('org.eclipse.swt.browser.LocationAdapter'));
const CustomFunction = Java.extend(Java.type('org.eclipse.swt.browser.BrowserFunction'));
const IArchiImages = Java.type('com.archimatetool.editor.ui.IArchiImages');
const ImageFactory = Java.type('com.archimatetool.editor.ui.ImageFactory');
let display = shell.getDisplay();
let newShell = new Shell(display, SWT.MODAL | SWT.TITLE | SWT.ON_TOP);
newShell.setText("Please enter some values");
newShell.setLayout(new FillLayout());
html = `<html>
<title>Eclipse browser</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type=text], input[type=email], select {
padding: 5px;
margin:5px 0;
border-radius:5px;
border-width: 2px;
width: 100%;
}
fieldset {
margin: 10px;
border-width: 2px;
border-radius:5px;
}
button {
margin: 10px;
padding: 5px;
width: 100px;
}
</style>
<body>
<fieldset>
<legend>Please enter your contact details</legend>
<input type="text" id="name" placeholder="Enter your full name"><br>
<input type="email" id="email" placeholder="Enter your email address"><br>
<select id="occupation" size="1" placeholder="Enter your occupation">
<option value="Enterprise Architect">Enterprise Architect</option>
<option value="Solution Architect">Solution Architect</option>
<option value="Software Architect">Software Architect</option>
</select>
</fieldset>
<button onclick="okPressed()">Ok</button><button onclick="cancelPressed()">Cancel</button>
<script>
function okPressed() {
let value = {
name: document.getElementById("name").value,
occupation: document.getElementById("occupation").value,
email: document.getElementById("email").value
};
okPressedEvent(JSON.stringify(value));
}
function cancelPressed() {
cancelPressedEvent();
}
</script>
</body>`;
let okPressed = false;
let cancelPressed = false;
let browser = new Browser(newShell, SWT.NONE);
let value = {};
browser.addProgressListener(new ProgressAdapter({
completed: function (event) {
let fncOk = new CustomFunction(browser, "okPressedEvent", {
function: function (args) {
okPressed = true;
value = JSON.parse(args[0]);
}
});
let fncCancel = new CustomFunction(browser, "cancelPressedEvent", {
function: function (args) {
cancelPressed = true;
}
});
browser.addLocationListener(new LocationAdapter({
changed: function (e) {
browser.removeLocationListener(this);
fncOk.dispose();
fncCancel.dispose();
}
}));
}
}));
browser.setText(html);
// Set icon to Archi icon, in case shell has a style which displays icons
newShell.setImage(IArchiImages.ImageFactory.getImage(IArchiImages.ICON_APP));
newShell.setSize(500, 280);
newShell.open();
while (!newShell.isDisposed() && !okPressed && !cancelPressed) {
if (!display.readAndDispatch()) display.sleep();
}
if (okPressed)
console.log(JSON.stringify(value, null, 3));
else if (cancelPressed)
console.log('Dialog cancelled.')
newShell.dispose();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment