What is Fresnel?
The short answer
Fresnel is a modern widget set for native applications, made with Free Pascal and Lazarus. The look and the layout of the controls are described with CSS. The same program can also run in a web browser, compiled to WebAssembly.
What is a widget set?
A widget set (also called a GUI toolkit or control library) is the part of a program that shows windows, buttons, edits, lists, menus and so on, and that passes the mouse clicks and the key presses to your code.
In Lazarus, the widget set you normally use is the LCL (Lazarus Component Library). In Delphi, it is the VCL or FireMonkey. Fresnel is a new, different widget set for Object Pascal. It does not replace Free Pascal or Lazarus: it is a library that you use in your Free Pascal programs.
What makes Fresnel different?
Fresnel draws its own controls. The LCL mostly asks the operating system to show a button. Fresnel draws the button itself, on a plain window that it gets from the operating system. This is why a Fresnel program looks the same on every platform, and why it can also run in a browser.
CSS decides how everything looks and where it goes. CSS (Cascading Style Sheets) is the styling language of web pages. It is powerful and well known, and there is a lot of documentation about it. Fresnel uses CSS for:
- colors, fonts, borders, rounded corners, shadows, spacing;
- layout: placing controls in rows, columns and grids (flexbox and CSS grid), so forms adapt when the window is resized;
- states: how a button looks when the mouse is over it (
:hover), how an edit looks when it has the focus (:focus) or when its input is wrong (:invalid); - themes: light and dark mode are built in, and a user can load a stylesheet to change the colors of your application.
Because of this, a Fresnel control has no Left, Top, Width, Height, Align, Anchors, Color or Font property.
All of that is CSS.
The controls form a tree of elements. Every control is an element. An element has a parent and can have children, like the elements of a web page. The form is the root of the tree. CSS rules use this tree: “all buttons inside a toolbar” is easy to express.
Events can have more than one handler.
You can still set OnClick in the Object Inspector, but you can also add more handlers for the same event
with AddEventListener. An event handler receives an event object with all the information about the event
(the sender, the mouse position, the keys that are pressed, …).
What stays the same?
If you know Lazarus or Delphi, a lot will be familiar:
- You write Object Pascal, and compile it with the Free Pascal compiler.
- Controls are components (descendants of
TComponent) with published properties and events. - Forms are stored in
.lfmfiles, and you can design them in the Lazarus IDE, with the component palette and the Object Inspector. You can also create everything in code. - The main program looks the same:
Application.Initialize,Application.CreateForm,Application.Run. - Many controls have familiar names:
TButton,TEdit,TComboBox,TListBox,TTreeView,TPageControl,TStatusBar,TStringGrid,TMainMenu, … and many properties have the same names too. - The rest of Free Pascal is still there: files, databases, networking, threads, and all your existing non-visual code.
Fresnel compared with the LCL and with a web page
| LCL | Fresnel | Web page | |
|---|---|---|---|
| Programming language | Object Pascal | Object Pascal | JavaScript (or pas2js) |
| Result | native program | native program, or WebAssembly | page in a browser |
| Who draws the controls? | mostly the operating system | Fresnel itself | the browser |
| Look (colors, fonts) | properties per control | CSS | CSS |
| Layout (position, size) | Left, Top, Align, Anchors | CSS (flexbox, grid, …) | CSS |
| Describing the controls | .lfm files or Pascal code | .lfm files or Pascal code | HTML |
| Visual designer | Lazarus IDE | Lazarus IDE | - |
| Looks the same on all platforms | no, it follows the platform | yes, unless you want otherwise | yes |
| Needs a browser | no | no (only the WebAssembly version) | yes |
Is Fresnel ready?
Fresnel is usable, and under active development. There is no official release yet: you get Fresnel from its git repository.
It is more than an experiment. Fresnel has a large set of controls, and real programs have been written with it: a time tracker that was ported from the LCL is used for real work, and the IDE demo shows that a program as complex as a code editor with a file tree, tabs and menus can be built from the standard controls. Things can still change before the first release, and you will find bugs: please report them.
Who makes Fresnel?
Fresnel is made by the Free Pascal and Lazarus teams. It is open source, under the modified LGPL license (the same license as the LCL): you can use it in commercial and closed-source programs.
Why the name?
A user interface is all about look and feel, and to look at something you need light. Augustin-Jean Fresnel was a French physicist who made important contributions to the theory of light. The rainbow in the logo is a nod to him.
Read on
- Myths and facts: the most common misconceptions about Fresnel.
- How it works: what happens inside a Fresnel program.
- Try it live: run the demos in your browser.