Difference between revisions of "pas2js widgetsets"

From Lazarus wiki
Jump to navigationJump to search
(19 intermediate revisions by 4 users not shown)
Line 1: Line 1:
The ultimate goal is to use Lazarus to create a webpage in a RAD manner as much as possible.
+
The ultimate goal is to use Free Pascal and Lazarus to create a webpage in a RAD manner as much as possible.
 
There can be several approaches to this.  
 
There can be several approaches to this.  
 
* Create an actual LCL widgetset
 
* Create an actual LCL widgetset
* Do not use the actual LCL widgetset, but create a widgetset that uses the IDE support for a custom designer.  
+
* Do not use the actual LCL widgetset, but create a widgetset that uses the IDE support for a custom designer in Lazarus.  
 +
* Do not use the actual LCL widgetset, but create one that supports Pas2JS app development in the browser.
 +
 
  
 
Either way, a set of basic widgets that can be used in HTML are needed.
 
Either way, a set of basic widgets that can be used in HTML are needed.
Line 8: Line 10:
 
Currently, several efforts are underway to create such a widget set.
 
Currently, several efforts are underway to create such a widget set.
  
=== Open source ===
+
=== Open Source ===
in random order, they are:
+
In random order, they are:
  
* ProjJ: [https://github.com/pas2js/master/tree/master/projJ/lib] Warley Alex
+
* XComponents (and XIDE): [https://github.com/Steve--W/XComponents] (Steve Wright)
* XComponents: [https://www.dropbox.com/sh/401ua59t0qmossd/AACVS4j2NJoLnPivKhfL7S3fa?dl=0] (Stephen Wright)
+
* Web Component Library (WCL): [https://github.com/pascaldragon/Pas2JS_Widget] - fork of Pas2JS Widgetset (Sven Barth)
* Pas2JS Widgetset: A project based on LLCL [https://github.com/FChrisF/LLCL] (Heliosroots)
+
* (archived) Pas2JS Widgetset: a RAD Framework to develop Web Applications [https://github.com/heliosroots/Pas2JS_Widget] (Heliosroots)
* Based on DHTMLX: [https://github.com/cutec-chris/dhtmlx-for-pas2js] (Christian Ulrich)
+
* Pas2js implementation of DHTMLX: [https://github.com/cutec-chris/dhtmlx-for-pas2js] (Christian Ulrich)
 +
 
 +
=== Other Demonstrations ===
 +
 
 +
* Web Widgets, bundled with pas2js: [https://www.freepascal.org/~michael/pas2js-demos/widgets/#]
 +
* projJ: [https://github.com/pas2js/pas2js.github.io/tree/master/master/projJ]
 +
* Puma: [https://www.sc10.com.br/puma/puma_doc.html] - lightweight UI components for pas2js based on Bulma
 +
* VUE using pas2js: [https://github.com/imperyal/pas2js-and-VUE]
  
 
=== Commercial ===
 
=== Commercial ===
* TMS software has created [https://www.tmssoftware.com/site/tmswebcoreintro.asp | TMS Web Core]
+
 
 +
Most freeware tools for Lazarus Web Application lack of features and documentations. If you really need a good component for Web Application then TMS Web Core is worth to try.
 +
 
 +
* TMS software has created: [https://www.tmssoftware.com/site/tmswebcoreintro.asp TMS Web Core]
 +
* Install TMS Web Core to Lazarus:https://www.youtube.com/watch?v=YzZazLnF8Zk
 +
* TMS Web Core Developer Guide: http://www.tmssoftware.biz/Download/Manuals/TMSWEBCoreDevGuide.pdf
 +
 
 +
 
 +
=== XIDE/XComponents ===
 +
 
 +
XIDE is a simple, stand alone, open source IDE for Free Pascal which runs in the browser (and on other platforms supported by Lazarus).
 +
 
 +
It is a combined Client Side Run Time Library and RAD IDE intended to allow Pascal(Pas2JS) and/or Python(Pyodide) development with the minimum of installation or learning curve while also being as platform independent as possible. XComponents is the widgetset that enables XIDE.
 +
 
 +
XIDE is intended for Prototyping, Small Group Collaboration and Agile Line of Business projects where the choice of browser can be specified. It will run on any platform that is supported by Chrome or Electron, or Lazarus(+CEF).  It is not intended for the development of general-purpose public facing web sites. It may also run on other HTML5 browsers (e.g. Microsoft Edge), but this is not tested.
 +
 
 +
XIDE projects can be deployed as a single static HTML/Javascript (or .exe) file combining the User App with the RTL and IDE Code. This can be done with the IDE disabled (for end users) or enabled (as done in the examples below, for collaborators).
 +
 
 +
'''Examples…..'''
 +
    XIDESimplePascalExample.html [https://steve--w.github.io/XIDEPages/XIDESimplePascalExample.html]
 +
    XIDESimplePythonExample.html [https://steve--w.github.io/XIDEPages/XIDESimplePythonExample.html]
 +
    XIDEPascalSVGAndGPUExample.html [https://steve--w.github.io/XIDEPages/XIDEPascalSVGAndGPUExample.html]
 +
 
 +
'''To build from source….'''
 +
    XIDE [https://github.com/Steve--W/XIDE]
 +
    XComponents [https://github.com/Steve--W/XComponents]
 +
 
 +
'''XIDE Screenshot'''
 +
:[[File:XIDEExampleScreenShot.jpg]]
  
 
=== Pas2JS Widgetset ===
 
=== Pas2JS Widgetset ===
Pas2JS Widgetset is a RAD Framework to develop Web Applications like to develop Windows Applications.
+
Pas2JS Widgetset is a RAD Framework to develop Web Applications like to develop Windows Applications.<br />
 +
 
 +
Installation Procedure:<br />
 +
 
 +
1. Download from: https://github.com/heliosroots/Pas2JS_Widget<br />
 +
or from https://github.com/pascaldragon/Pas2JS_Widget<br />
 +
 
 +
2. Extract to '''Lazarus - pas2js_designer'''<br />
 +
 
 +
3. Open: Lazarus - pas2js_designer - package: '''pas2js_designer_package.lpk'''
 +
:[[File:pas2js designer-install-01.png]]
 +
 
 +
4. Click on '''Use - Install'''
 +
:[[File:pas2js designer-install-02.png]]
 +
 
 +
5. Click on Yes to install this package
 +
:[[File:pas2js designer-install-03.png]]
  
Installation Procedure:
+
6. You will see LCL for pas2js!
1. Download from: https://github.com/heliosroots/Pas2JS_Widget
+
:[[File:pas2js designer-install-04.png]]
2. Extract to C:Lazarus:pas2js_designer
 
3. Open - C:Lazarus:pas2js_designer - package: pas2js_designer_package.lpk
 
4. Choose install
 
5. You will see LCL for pas2js
 
  
 
== Navigation ==
 
== Navigation ==

Revision as of 13:05, 27 June 2022

The ultimate goal is to use Free Pascal and Lazarus to create a webpage in a RAD manner as much as possible. There can be several approaches to this.

  • Create an actual LCL widgetset
  • Do not use the actual LCL widgetset, but create a widgetset that uses the IDE support for a custom designer in Lazarus.
  • Do not use the actual LCL widgetset, but create one that supports Pas2JS app development in the browser.


Either way, a set of basic widgets that can be used in HTML are needed.

Currently, several efforts are underway to create such a widget set.

Open Source

In random order, they are:

  • XComponents (and XIDE): [1] (Steve Wright)
  • Web Component Library (WCL): [2] - fork of Pas2JS Widgetset (Sven Barth)
  • (archived) Pas2JS Widgetset: a RAD Framework to develop Web Applications [3] (Heliosroots)
  • Pas2js implementation of DHTMLX: [4] (Christian Ulrich)

Other Demonstrations

  • Web Widgets, bundled with pas2js: [5]
  • projJ: [6]
  • Puma: [7] - lightweight UI components for pas2js based on Bulma
  • VUE using pas2js: [8]

Commercial

Most freeware tools for Lazarus Web Application lack of features and documentations. If you really need a good component for Web Application then TMS Web Core is worth to try.


XIDE/XComponents

XIDE is a simple, stand alone, open source IDE for Free Pascal which runs in the browser (and on other platforms supported by Lazarus).

It is a combined Client Side Run Time Library and RAD IDE intended to allow Pascal(Pas2JS) and/or Python(Pyodide) development with the minimum of installation or learning curve while also being as platform independent as possible. XComponents is the widgetset that enables XIDE.

XIDE is intended for Prototyping, Small Group Collaboration and Agile Line of Business projects where the choice of browser can be specified. It will run on any platform that is supported by Chrome or Electron, or Lazarus(+CEF). It is not intended for the development of general-purpose public facing web sites. It may also run on other HTML5 browsers (e.g. Microsoft Edge), but this is not tested.

XIDE projects can be deployed as a single static HTML/Javascript (or .exe) file combining the User App with the RTL and IDE Code. This can be done with the IDE disabled (for end users) or enabled (as done in the examples below, for collaborators).

Examples…..

   XIDESimplePascalExample.html [9]
   XIDESimplePythonExample.html [10]
   XIDEPascalSVGAndGPUExample.html [11]

To build from source….

   XIDE [12] 
   XComponents [13]

XIDE Screenshot

XIDEExampleScreenShot.jpg

Pas2JS Widgetset

Pas2JS Widgetset is a RAD Framework to develop Web Applications like to develop Windows Applications.

Installation Procedure:

1. Download from: https://github.com/heliosroots/Pas2JS_Widget
or from https://github.com/pascaldragon/Pas2JS_Widget

2. Extract to Lazarus - pas2js_designer

3. Open: Lazarus - pas2js_designer - package: pas2js_designer_package.lpk

pas2js designer-install-01.png

4. Click on Use - Install

pas2js designer-install-02.png

5. Click on Yes to install this package

pas2js designer-install-03.png

6. You will see LCL for pas2js!

pas2js designer-install-04.png

Navigation