ThomasRohde/Browser experiment.ajs

## 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();
	/*
	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();