Status of Fresnel Project [CSS UI Layer for Lazarus IDE]

[valdir.marcos]

Fresnel Project [CSS UI Layer for Lazarus IDE]
Mattias Gaertner [@MvC]
Created on November 08, 2022.

https://foundation.freepascal.org/roadmap-for-lazarus-and-fpc

8.     PROJECT FRESNEL

    Instead of introducing a new format to update the UI layer of Lazarus, it seems like a logical choice to reuse a successful and standardized mechanism: CSS.
    In short: The aim of Project Fresnel is to make a set of controls (or widgets) which are guided by CSS.
    These controls will obey the following architectural principles:

The widgets must be streamable:
This means every widget has a property that represents the CSS to be used.
Additional properties for manipulation in an Object inspector will of course be introduced.
Multiple drawing back-ends must be supported. Since Lazarus is multi- platform the various platforms will provide a specialized back-end,
much as the custom-drawn widgetset or the FPGUI- based widgetset offers today.
The widgets will be independent of the LCL: no dependency on the LCL must exist.
The widgets must be able to co-exist together with an LCL framework:
The name Fresnel is chosen in honour of the French Physicist Augustin-Jean Fresnel
A project made with the Fresnel widgets should be able to take an existing CSS framework such as Bootstrap, Foundation or Tailwind CSS and apply it to a form.
That means we need to provide several things:
a CSS parser and a mechanism to translate the CSS to native structures.
a CSS resolver: this mechanism determines what CSS rules apply to a given widget.
a drawing mechanism that knows all supported CSS properties.
a layouter. CSS has several means to determine the layout: float, flex, grid etc,
Some widgets that mimic standard HTML elements:
the CSS framework assume the existence of certain tag names (div/span/p/label etc.)
fresnel1

The work on this has been started: a CSS parser and resolver have been made.
A drawing backend based on the LCL has been started, and a first layouter has been written.
The Fresnel Widgets will use records (as in FPGui) or objects (as e.g. in JavaScript)

to represent the messages, allow multiple event handlers for a given event, but still allow event handlers to be set in the Object Inspector. Since the LCL will be used as one possible back-end, obviously a translation mechanism between LCL messages and the new Fresnel messages id going to be implemented.

The IDE needs to be able to draw and manipulate the Fresnel Widgets. Since the IDE is built using the LCL, it follows that there must be a bridge between the LCL and the Fresnel Widgets:
The Fresnel Widgets should be able to use the LCL as a drawing backend. This coincides with an architectural requirement put forward in the beginning: the LCL and Fresnel must be able to co-exist in a single application. The idea for this requirement is partially born out of the necessity to be able to manipulate the widgets in the IDE, but more importantly to allow people to port existing applications on a form-by-form basis to the new widget framework. For many applications, the need to port all of the application at once would be simply a too big hurdle to take. Initially, the resulting application structure would be slightly more complicated: Fresnel Widgets, on top of an LCL backend, with the backend based on LCL components, where the LCL components are built on top of a widgetset.

NOT SIMPLY THE BROWSER

Since we are re-imagining widgets based on CSS, creating a new messaging model which has some characteristics of JavaScript DOM: why not simply use the browser or some system like Electron (a packaged browser) or Chromium? As a Pascal programmer, you can target these platforms with Pas2js.

The browser, however powerful, is still a limited environment with its own set of rules.

There is no doubt that the browser shines in UI development - which is why Project Fresnel uses CSS as its mechanism - but native applications are still faster, and as a programmer you enjoy more freedom than in a browser environment: access to the file system and other hardware. The browsers also imposes an asynchronous model on many operations, which makes it a little harder for the beginning programmer.

What is more, porting to the browser is an all-or-nothing decision:
it is not possible to have part of the application in the browser, and part as native.

It is of course possible to rewrite an application form by form to a browser application, but interaction between the native and browser part will be very limited.The fact that Project Fresnel uses CSS also does not mean it is limited to the HTML elements:
it will still be perfectly possible to create your own widgets; but you will need to interrogate the CSS mechanism to find out about borders, colors and such properties more.

The goal is also not to create a browser. Although it would be possible to ’import’ a HTML file and create a form based on the HTML tags, creating a full-fledged browser is not the goal.

 Project Fresnel is a large project to rejuvenate the UI possibilities of Pascal:
a proof of concept using the LCL as a backend has been created (see figure 3 on page 6).
The code can be found in a Git repository on Gitlab:https://gitlab.com/freepascal.org/lazarus/fresnel

It currently needs FPC trunk to compile due to the dependency on the CSS framework, but this may change in the future so the release version of FPC can be used.
The complete project text is here available: (https://www.blaisepascalmagazine.eu/14190-2/)
The Free Pascal and Lazarus Foundation strongly believes in this project and will do everything to back up development of this widgetset. It is a large project, and the success of the project will depend on the uptake in, and the support of, the whole Pascal community.

https://gitlab.com/freepascal.org/lazarus/fresnel

Fresnel
This repository contains the sources for Project Fresnel


What is project Fresnel ?

Project Fresnel is a new UI paradigma for Lazarus projects.
Instead of using LCL controls, CSS-based custom drawn controls will be used to create your UI.


Why is this project needed ?

The design of the VCL and LCL is old. In the browser, UX and UI have evolved far beyond
what the LCL has to offer, largely thanks to the strength of CSS. The choice for CSS
as a mechanism for layouting and display is therefore logical.
This will also allow to reuse existing CSS frameworks.


What's with the name ?

UI is about look and feel. Look and feel means light.
Fresnel is a French
Physicist who made important contributions to the wave theory of light.


Goals of project Fresnel:
- 100% Pascal code.
- Create a set of controls that are independent of the LCL.
- The layout and look of the controls are governed by CSS.
- A Lazarus application must be able to run LCL forms alongside 'Fresnel' forms.
- This will ensure easy porting.
- Different drawing backends must be possible.

Skia:

To use Skia4Delphi you must put the library into the library path:

Linux 64bit: export LD_LIBRARY_PATH=fresnel/bin/Binary/Shared/Linux64
Macos X64: export DYLD_LIBRARY_PATH=fresnel/bin/Binary/Shared/OSX64

@MvC [Mattias Gaertner]
How is the status of Fresnel Project [CSS UI Layer for Lazarus IDE]?

[big_M]

Bump. Would also really love to hear some news on that front 

[Thaddy]

Well, why don't you just try it.

[zeljko]

Better wasting of time is to test gtk3 on x11/wayland and write issues, so it get polished as soon as possible and promoted to the default laz ws on linux, so debian guys won't erase us because of gtk2.

[big_M]

Well, why don't you just try it.

Well, why do you even care to comment. 

[Martin_fr]

Not sure how often Mattias checks the forum. You might try to reach him on the mail list.

[marcov]

You can see the activity in the GIT repo: https://gitlab.com/freepascal.org/lazarus/fresnel/-/commits/main?ref_type=heads

[Fred vS]

Fresnel Project [CSS UI Layer for Lazarus IDE]
Mattias Gaertner [@MvC]
Created on November 08, 2022.

Excellent!

@Mattias:   

[dbannon]

Well, why don't you just try it.

Probably because there is not a single word about how to do so.

Davo

[Fred vS]

Well, why don't you just try it.

Probably because there is not a single word about how to do so.

Davo

Hello Davo.

See the demos, for example the Button, there is a Lazarus lpi project.
https://gitlab.com/freepascal.org/lazarus/fresnel/-/tree/main/demo/

(And it's much better to provide demos because nobody reads the documentation anyway.  )

[dbannon]

See the demos, for example the Button, there is a Lazarus lpi project.
https://gitlab.com/freepascal.org/lazarus/fresnel/-/tree/main/demo/

Thanks Fred. While I have not tried it myself, I'm pretty sure any one of the demos will fail at the bit that says

Code: Pascal  [Select][+][-]

1. uses
2. ....
3. Fresnel
4. ....

(And it's much better to provide demos because nobody reads the documentation anyway.  )

Demos are great but there still needs to be some hint as to how you get started. Some or all of the Fresnel repository needs to be downloaded and put somewhere and some part of Lazarus needs to be pointed there.  I am sure I would, with some experimenting, work out what but thats not a good model if you want people to, generally, take it seriously.

Oh, and I do read (and write) documentation by the way ! 

Davo