[Pas2js] Getting Organised?
Stephen Wright
stephenmichaelwright at yahoo.co.uk
Wed Oct 31 10:32:22 CET 2018
Hi Guys
In a recent digest Michael asked what support we needed to organize ourselves better.
My suggestion is that we need to understand the different features / objectives of the various UI component projects. Sometimes we may be duplicating each other’s work so could share the effort. Sometimes we may be aiming at very different objectives so projects can add value by existing in parallel.
Can we have a wiki page somewhere with an overview or a comparison table that we could update giving the status and key features of each project identifying possible overlap (or missing features) where collaboration or shared code may be a good idea?
As an initial entry on such a page I have attached below a draft description of the thinking behind our XComponents/XIDE project. I have also provided a HTML demo to illustrate the current status and direction of the XIDE project.. (also see Pas2js Digest, Vol 3, Issue 19 et seq for the Lazarus XComponent discussion)
Regards Steve
--------------------------------------------------------------------------------------------------------------------
XComponents/XIDE
Our Objective is to allow non-specialists to get started with Pascal programming for the Web (or elsewhere) with minimal installation or learning curve and then allow easy project migration to the desktop and Lazarus or full stack JavaScript development as user skills and project requirements mature.
In order to achieve this we…..1) Restrict layout to only use nested containers (simple Responsive Design)2) Provide a run time module for each of Web/Mobile/Desktop etc which then allows programs to run on all of them without modification. (This uses the Pascal compiler built in to the run time but is otherwise Similar to a subset of Silverlight/Flash functionality)3) Build an “Entry Level” IDE using these components so it will also run on any of these environments. (see attached Browser example)4) In that IDE, “everything is a tree”. So the code footprint is minimized and it is as easy as possible to learn and extend the functionality ideally without needing to read the manual other than the Quick Start section..5) All the components are native to HTML and have run time equivalents in Lazarus so projects can be extended in either web or desktop environments when they outgrow the entry-level stage.
Our core interest is the entry level IDE issues. To work on this we have had to create a Lazarus component set that works consistently in the Lazarus IDE, as well as Windows/Unix at run time and in the Browser. It will be great if this can be superseded in due course by proper Lazarus controls that do the same thing (and more!).
--------------------------------------------------------------------------------------------------------------------
P.S. The attached Web page shows our “XIDE” environment working in the Browser (Tested in Chrome). It is all very “Alpha Test” at the moment but hopefully it will give you a good idea of where we are heading.
To view the demo, load the following DropBox directory……
https://www.dropbox.com/sh/401ua59t0qmossd/AACVS4j2NJoLnPivKhfL7S3fa?dl=0
……..Then load the Web page XIDEMain.HTML using Chrome. This will load the IDE. You can then just drag and drop components from the resources tree to the instance tree and use layout containers in this tree to control placement on the screen in a way that adapts to different screen sizes.
Alternatively you can load a saved system by putting the text from DemoSystem.txt on the clipboard and selecting “System/Load” from the main menu.
To see the event code behind the “Calculate Depth Plot” button hit the ellipsis button to the right of the “ButtonPress” event for that button in the object inspector.
To change the plot, modify one of the numbers in the string grid and re calculate the depth plot.
PPS. The Pascal to Javascript transpiling we are using is a temporary fix pending Pas2JS being able to compile itself so please do not worry about loose ends in that area. If you get a message “JS SYNTAX ERROR: testit is not defined” when you switch from design mode to run mode this can be safely ignored. ----------------------------------------------------------------------------------------------------------------------------
On Tuesday, 30 October 2018, 09:45:17 GMT, <pas2js-request at lists.freepascal.org> wrote:
Send Pas2js mailing list submissions to
pas2js at lists.freepascal.org
To subscribe or unsubscribe via the World Wide Web, visit
http://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
or, via email, send a message with subject or body 'help' to
pas2js-request at lists.freepascal.org
You can reach the person managing the list at
pas2js-owner at lists.freepascal.org
When replying, please edit your Subject line so it is more specific
than "Re: Contents of Pas2js digest..."
Today's Topics:
1. Re: Cases (Michael Van Canneyt)
2. Re: Cases (cbsistem)
3. Re: Cases (heliosroots)
4. Re: Cases (heliosroots)
5. Re: Cases (cbsistem)
6. Re: Cases (heliosroots)
7. Re: Cases (cbsistem)
8. Re: Cases (heliosroots)
9. Re: Cases (Michael Van Canneyt)
10. Re: i18n (warleyalex)
11. Re: i18n (Ulrich, Christian)
----------------------------------------------------------------------
Message: 1
Date: Mon, 29 Oct 2018 12:19:05 +0100
From: "Michael Van Canneyt" <michael at freepascal.org>
To: "pas2js discussions" <pas2js at lists.freepascal.org>
Subject: Re: [Pas2js] Cases
Message-ID:
<51bca11ea731736a58d89362f66c9e58.squirrel at mail.freepascal.org>
Content-Type: text/plain;charset=utf-8
> My questions: how lazarus core see the pas2js project? what is the path
> that
> this project will follow a component (ide plugin), or a lcl interface
> (Gtk,
> Win, Web)? the compiler (pas2js) will be integrated into the compiler
> (FPC)?
> are many doubts!
Ideally, pas2js is just another FPC platform and a lazarus LCL Widgetset.
The problem is that then the LCL must be compilable by pas2js.
This is not yet the case.
A lazarus LCL widgetset is based on a 'native' widgetset (Qt, Gtk etc)
That means that first these native widgets must be created for Web.
Both your and warleyalex efforts can be used as a starting point, later
the LCL integration can be done on top of these widgets.
> Which approaches are better mine or warleyalex, neither of the 2 are
> private
> ... the best approach would be a new one from the community.
I didn't take a detailed look yet at the architecture of both approaches,
so I cannot yet comment on this in a detailed manner:
After my superficial look at the code, warleyalex' approach with the J*
units seems OK, but I still need to compare it with your files.
So, from my perspective: both your and his code can serve as a basis for a
set of web widgets, on which a LCL widgetset can be built.
At the same time, there is nothing stopping you from using the custom
designer approach in the IDE to design a HTML form today. or as an
alternative, the embedded chromium approach could be used to design the
form.
There are many possible roads: which one is the best is still up for
discussion, I think.
Michael.
------------------------------
Message: 2
Date: Mon, 29 Oct 2018 07:09:26 -0500 (CDT)
From: cbsistem <cbsistem at yahoo.com.br>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540814966315-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
@heliosroots
'Which approaches are better mine or warleyalex, neither of the 2 are
private
You said your project is not private. Is there a link to the download?
Its component in runtime is based on https://github.com/FChrisF/LLCL. OK .
And is WEBLib based on the TMS WEB Core or XComponents components or in
which?
Cristiano
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 3
Date: Mon, 29 Oct 2018 07:34:10 -0500 (CDT)
From: heliosroots <heliosroots at gmail.com>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540816450756-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
No the project is private so far.
Project and based on https://github.com/FChrisF/LLCL.
WEBLib, TMS WEB Core or XComponents I do not know them completely.
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 4
Date: Mon, 29 Oct 2018 07:39:35 -0500 (CDT)
From: heliosroots <heliosroots at gmail.com>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540816775649-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
/// The problem is that LCL must be compiled by pas2js.
Exactly example is "Form.Showmodal" this has certain limitations in WEB,
there are many limitation, in my opinion a plugin / component would be the
best way today.
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 5
Date: Mon, 29 Oct 2018 07:53:38 -0500 (CDT)
From: cbsistem <cbsistem at yahoo.com.br>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540817618423-0.post at n8.nabble.com>
Content-Type: text/plain; charset=UTF-8
an alternative to "Form.Showmodal" is to pass a CallBack function
Function Form1.OnCloseCallback;
begin
code
end;
Form2.ShowModal (@OnCloseCallback);
function Form2.OnClose;
begin
if assigned (FOnCloseCallback) then
OnCloseCallback;
end;
in javascript we must always use Callback functions.
Cristiano
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 6
Date: Mon, 29 Oct 2018 07:58:13 -0500 (CDT)
From: heliosroots <heliosroots at gmail.com>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540817893220-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
Yes we use a similar solution ... more we are talking about compatibility
with LCL hj it does not support shomodal (proc) ... there are some
limitations.
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 7
Date: Mon, 29 Oct 2018 08:35:04 -0500 (CDT)
From: cbsistem <cbsistem at yahoo.com.br>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540820104539-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
In my ViewModal LCL view, it puts the processing into LOOP waiting for a
response, and processing does not continue until it is released. This
technique for javascript would not be acceptable. There is something about
this called PROMISE
(https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
which is the promise to do something. That is at some point that code will
be executed.
Promisse basically uses two parameters, which would be 2 functions, one when
you have success and another when you have an error
TJSPromiseResolver
You have demo \ promise \ utils.pp examples:
Cristiano
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 8
Date: Mon, 29 Oct 2018 09:11:07 -0500 (CDT)
From: heliosroots <heliosroots at gmail.com>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] Cases
Message-ID: <1540822267911-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
Yes I know and I use promise with Pas2JS ... Michael Van Canneyt said that it
is not yet possible to compile LCL with Pas2JS ... it is for these and other
limitations, so the initial doubt about which path the project is going to
follow has arisen.
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 9
Date: Mon, 29 Oct 2018 21:03:04 +0100 (CET)
From: Michael Van Canneyt <michael at freepascal.org>
To: pas2js discussions <pas2js at lists.freepascal.org>
Subject: Re: [Pas2js] Cases
Message-ID: <alpine.DEB.2.20.1810292057410.24324 at home.telenet.be>
Content-Type: text/plain; charset=US-ASCII; format=flowed
On Mon, 29 Oct 2018, heliosroots wrote:
> Yes I know and I use promise with Pas2JS ... Michael Van Canneyt said that it
> is not yet possible to compile LCL with Pas2JS ... it is for these and other
> limitations, so the initial doubt about which path the project is going to
> follow has arisen.
I think you should continue to create a web widgetset that is usable for web,
independent of LCL.
For design-time support in the IDE, you can use 3 approaches
- Custom designer support (see the example provided in lazarus)
- CEF (Chromium Embedded)
- The TMS way of doing it: Design using LCL widgets, translate to your widgetset.
(the 'provides' support of lazarus packages can be useful here)
Personally, I think CEF is the most powerful approach, bu Cudtom Designer is
probably the fastest (you can draw simply rectangles).
At a later moment, an LCL widgetset can be built on top of the web widgetset.
Michael.
------------------------------
Message: 10
Date: Mon, 29 Oct 2018 21:18:02 -0500 (CDT)
From: warleyalex <warleyalex at yahoo.com.br>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] i18n
Message-ID: <1540865882299-0.post at n8.nabble.com>
Content-Type: text/plain; charset=UTF-8
An alternative way of doing it without recourceStrings would e.g. be create
JSON files per language, with a data attribute assigned used for each
component used, and a key for each string.
unit uinternationalization;
(* ╔══════════════════════════════════════╗
║ i18n PROJECT ║
║ ----------------------------------- ║
║ created by: warleyalex ║
╚══════════════════════════════════════╝ *)
{$mode objfpc}{$H+}
interface
uses
JS, Web, Types, Math, Classes, SysUtils, uutils, unit1;
type
{ TJSi18n }
TJSi18n = class(TObject)
private
(* Private declarations *)
xhttp: TJSXMLHttpRequest;
langDocument: JSValue;
//procedure bindEvent(element: TJSElement; EventType: String; handler:
JEventListenerHandler);
protected
(* Protected declarations *)
procedure init;
procedure switchLanguage(language: JSValue);
procedure processLangDocument;
public
(* Public declarations *)
constructor Create;
function DoFormLoad(Event: TEventListenerEvent): boolean;
function DoFormAbort(Event: TEventListenerEvent): boolean;
published
(* Published declarations *)
procedure InitializeObject;
end;
implementation
{ TJSi18n }
constructor TJSi18n.Create;
begin
end;
procedure TJSi18n.processLangDocument;
var
tags: TJSNodeList;
l: TJSArray;
i: integer;
function LforEach(value: JSValue; index: NativeInt; anArray : TJSArray) :
Boolean;
var
key: String;
begin
key := String(
TJSObject(TJSHTMLElement(value).dataset).Properties['languagekey'] );
if( TJSObject(langDocument)[key] ) then
TJSElement (l.Elements[index]).innerText:= String(
TJSObject(langDocument)[key] );
end;
begin
tags :=
document.querySelectorAll('span,img,a,label,li,option,h1,h2,h3,h4,h5,h6');
l:= TJSArray.new;
for i:=0 to tags.length - 1 do
l.push(tags[i]);
l.forEach( @LforEach );
end;
function TJSi18n.DoFormLoad(Event: TEventListenerEvent): boolean;
begin
if (xhttp.status = 200) and (xhttp.readyState = 4) then
begin
// If successful
langDocument := TJSJSON.parse(xhttp.responseText);
processLangDocument();
end;
result := true;
end;
function TJSi18n.DoFormAbort(Event: TEventListenerEvent): boolean;
begin
//ShowMessage('Failed to load form HTML template file');
WriteLn('Failed to load form HTML template file');
Result := true;
end;
procedure TJSi18n.init;
var
tmp: TJSHTMLCollection;
languages: TJSArray;
i: integer;
el: TJSHTMLElement;
procedure languageCallBack(event: TJSEvent);
begin
switchLanguage (
(TJSHTMLElement(event.target).dataset).Properties['lang']
);
end;
function languageforEach(value: JSValue; index: NativeInt; anArray :
TJSArray) : Boolean;
begin
JElement (languages.Elements[index]).addEventListener('click',
@languageCallBack);
end;
begin
tmp := document.getElementsByClassName('language');
languages := TJSArray.new();
for i:=0 to tmp.Length - 1 do
languages.push(tmp[i]);
languages.forEach( @languageforEach );
end;
procedure TJSi18n.switchLanguage(language: JSValue);
begin
xhttp := TJSXMLHttpRequest.new();
xhttp.addEventListener('load', @DoFormLoad);
xhttp.addEventListener('abort', @DoFormAbort);
xhttp.open('GET', 'i18n/' + String(language) + '.json', true);
xhttp.setRequestHeader('Content-type','application/json');
xhttp.setRequestHeader('Cache-Control','no-cache');
xhttp.send();
end;
procedure TJSi18n.InitializeObject;
begin
console.log('i18n1.InitializeObject');
init;
end;
end.
LIVE PREVIEW: https://pas2js.github.io/master/proji18n/index.html
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 11
Date: Tue, 30 Oct 2018 09:45:03 +0000
From: "Ulrich, Christian" <christian.ulrich at tcsag.de>
To: pas2js discussions <pas2js at lists.freepascal.org>
Subject: Re: [Pas2js] i18n
Message-ID:
<20072D672807864B91DBC370126A25E4224B04ED at Server22.tcs.biz>
Content-Type: text/plain; charset="utf-8"
Sry Michael, i have re-subscribed with the other adress. I was not aware that our exchange replaces the sender address even when I send the mail explicit from the "old" address.
-----Ursprüngliche Nachricht-----
Von: Pas2js [mailto:pas2js-bounces at lists.freepascal.org] Im Auftrag von Michael Van Canneyt
Gesendet: Samstag, 27. Oktober 2018 12:58
An: pas2js discussions
Cc: Ulrich, Christian
Betreff: Re: [Pas2js] i18n
Christian,
Your address christian.ulrich at tcsag.de is not subscribed to the list, which means I must always manually moderate your mail.
Please subscribe, or use the address with which you are subscribed to the list when posting (which would seem to be ulrich at tcs-germany.de instead of christian.ulrich at tcsag.de)
Michael.
On Fri, 26 Oct 2018, Ulrich, Christian wrote:
> When pas2js would generate .res files we could use lazarus tools to
> generate .po file Then an separate program or pas2js itself could generate separate .js files that replace .current with an new value.
>
>
>
>
> Christian Ulrich
> Teamleiter Prüfmittelbau
>
> ______________________________________________________________________
>
>
> TCS TürControlSysteme AG Geschwister-Scholl-Str. 7 | D-39307 Genthin
> Telefon +49 3933 8799-433 | Fax +49 3933 8799-84 | Mail
> christian.ulrich at tcsag.de | www.tcsag.de
>
> Vorstand: Dipl.-Ing. (FH) Otto Duffner (Vorsitzender), Florian Herth
> Aufsichtsrat: Dipl. El. Ing FH/ EMBA Jörg Stocker Sitz der
> Gesellschaft: Genthin | HRB 3909 AG Stendal -----Ursprüngliche
> Nachricht-----
> Von: Pas2js [mailto:pas2js-bounces at lists.freepascal.org] Im Auftrag
> von Michael Van Canneyt
> Gesendet: Donnerstag, 25. Oktober 2018 16:10
> An: pas2js discussions
> Betreff: Re: [Pas2js] i18n
>
>
>
> On Tue, 23 Oct 2018, Ulrich, Christian wrote:
>
>> Hi,
>>
>> Is there actually already an way to translate resourcestrings ?
>> How should an translation be done at the moment ?
>
>
> A resourcestring is a javascript object literal with 2 members.
> "org" and "current". I think the names are self-describing :)
>
> When getting a resourcestring value, The rtl will first check the "current"
> value, and if it is empty, use the "org" value. The "org" value is
> created by the compiler when it creates the compiled unit.
>
> So, to translate, create a javascript file which does the following:
>
> pas["yourunit"].$resourcestrings.YourResourcestring.current = "The
> Translated Value";
>
> Where
> "yourunit" is the name of a unit and YourResourcestring is the name of the resource string.
>
> It should not be too difficult to create a program which extracts all
> resourcestrings from a program and creates such a file, which you can
> then translate. I will add it to my todo list.
>
> Michael.
> _______________________________________________
> Pas2js maillist - Pas2js at lists.freepascal.org
> http://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
> _______________________________________________
> Pas2js maillist - Pas2js at lists.freepascal.org
> http://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
------------------------------
Subject: Digest Footer
_______________________________________________
Pas2js maillist - Pas2js at lists.freepascal.org
http://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
------------------------------
End of Pas2js Digest, Vol 10, Issue 14
**************************************
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20181031/061e88f4/attachment-0001.html>
More information about the Pas2js
mailing list