This is a draft but already works. As I discussed in the Modern UI in Lazarus (
http://forum.lazarus.freepascal.org/index.php/topic,36502.msg247311/topicseen.html#new) there are two ways of using FPC with Electron (electron.atom.io), one is with a .dll (that escapes my understanding) or with a command line application, that I choose for LainzTron.
Electron is Chrome with Node, and works better (faster) than fpCEF (Chrome Embedded Framework). Is a good candidate to make nice UI but also using the power of FPC (or any command line language).
This is how it works. These are the source files of a Hello World application (yes, nothing big right now, but it helps to see how easy to work with LainzTron is). We're using JSON, that's a nice way of communication between our command line application and Electron.
This is your index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>LainzTron</title>
</head>
<body>
<div id="main">
</div>
<div id="list">
</div>
<script src="lainztron.js"></script>
<script src="app.js"></script>
</body>
</html>
This is the LainzTron utility for Electron, pretty small
"use strict";
class LainzTron {
constructor(executable) {
this.executable = executable;
}
get(parameters, success, error) {
let child_process = require('child_process').execFile;
child_process(this.executable, parameters, (err, stdout) => {
if (stdout)
success(stdout);
if (err)
error(err);
});
}
getJSON(parameters, success, error) {
this.get(parameters, (data) => {
success(JSON.parse(data));
}, error);
}
}
This is the actual application, yes, you at least need some basic JS knowledge that doesn't come bad these days, OR let your web developer do this part (as well as the index.html):
"use strict";
(function () {
// This application returns a JSON array
// [{"name": "Hello"}, {"name": "World!"}]
let test = new LainzTron('./resources/app/test');
// Get a JSON array from the command line application
test.getJSON([], (data) => {
// Join each 'name' property to make 'Hello World!' string title
let helloworld = data.map((value) => {
return value.name;
}).join(" ");
document.getElementById('main').innerHTML = `<h1>${helloworld}</h1>`;
// Create an unsorted list with each returned value of the array
let helloworldlist = data.map((value) => {
return `<li>${value.name}</li>`
}).join("");
document.getElementById('list').innerHTML = `<ul>${helloworldlist}</ul>`;
}, (error) => {
// Handle error here
console.log(error);
});
})();
And this is your favorite part, using FPC!
program test;
begin
writeln('[{"name": "Hello"}, {"name": "World!"}]');
end.
The result of running this on Electron is this nice application:
Hello World!
Recent
