Forum > Third party
LainzTron - use command line FPC with Electron
(1/1)
lainz:
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
--- Code: Javascript [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---<!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 :)
--- Code: Javascript [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---"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):
--- Code: Javascript [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---"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!
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---program test; begin writeln('[{"name": "Hello"}, {"name": "World!"}]');end.
The result of running this on Electron is this nice application:
Hello World!
* Hello
* World!
tudi_x:
hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS
versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?
thank you
Thaddy:
--- Quote from: tudi_x on May 25, 2017, 08:56:33 am ---hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS
versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?
thank you
--- End quote ---
Uuhmmmm. FPC can compile to JS even in two ways:
Pastojs.. which is getting better every day! Try it! You need trunk for optimum drooling..
A compiler effort in one of the branches. I don't know the exact status of that.
But anyway, you should be able to write Pascal code and run it on node.js. Only not -yet - everything and every feature.(close to typescript, in a sense)
And node.js is a server platform and not a language, written in C++ that runs javascript code. Golang IS a language and is a neat variant of a curly bracket language but on itself on the way out...
lainz:
--- Quote from: tudi_x on May 25, 2017, 08:56:33 am ---hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS
versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?
thank you
--- End quote ---
This is a single case usage, for all other cases you can use FPC directly or convert it to JavaScript as Thaddy said.
This case is for a desktop application that renders the UI with HTML/CSS/JS (Electron) and the core of the program is in FPC. Not for a web application.
Edit: A case of usage in fact is where your FPC code is a lot faster than converting it and running with JS. Else convert directly to JS and put that in Electron and that be all, no need of command line.
Another case is when conversion is not possible (for example Libraries that can't be converted to JS), usage of third party dll's, an so on.
Navigation
[0] Message Index