From Free Pascal wiki
Jump to navigationJump to search


Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.

git repo:

Requirements: fpc 3.3.1

What is working?

As Fresnel is still in an early pre-alpha stage, a few things do work already:

  • fcl-css supports most basic CSS features, even some CSS-5 feats
  • A Lazarus package src/fresnel.lpk containing the runtime units
  • A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TFresnelDiv, TFresnelSpan and TFresnelButton onto the designer.
  • TFresnelElement
    • a TComponent that works similar to an HTML element
    • supports many common CSS attributes like border, padding, margin, etc
    • has inline CSS in the Style property and CSS classes in the CSSClasses property
    • Elements can have child elements, building a tree similar to the browser DOM.
    • CSS attributes are evaluated to their computed values.
    • You can define descendants adding their own CSS attributes. See for example TFresnelDiv, TFresnelSpan and TFresnelCustomLabel
  • TFresnelViewport
    • a TFresnelElement that is the root of the tree.
    • Defines the Width and Height of the rendering area and a FontEngine.
    • Contains a CSS StyleSheet property, which is applied to all its child elements, but the CSS has no effect on the viewport itself.
    • Contains a Layouter, which computes all the element render boxes and has a pluggable system to support various node layouters - needed for flao, flex and grid layuout. Currently only a rudimentary flow nodelayouter is implemented.
  • TFresnelDiv - a TFresnelElement similar to HTML div element, i.e. block
  • TFresnelSpan - a TFresnelElement similar to HTML span element, i.e. inline
  • TFresnelReplacedElement - a TFresnelElement leaf node
  • TCustomFresnelLabel - a TFresnelReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
  • TFresnelLabel - a TCustomFresnelLabel with published properties
  • TFresnelBody - a TFresnelElement, similar to HTML body element
  • Unit FresnelLCLControls providing controls for using the Fresnel framework in a LCL application.


  • Rename TFresnelButton to TButton, this requires Lazarus to support duplicate component classnames
    • Done: Extend TReader to search component classes using Field names
    • Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
    • Done: Extend RTL format to automatically detect the new format with unitnames: TReader, ObjectTextToBinary
    • Extend codetools lfm parser
    • Extend Lazarus lfm repair wizard
    • Extend Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
    • Extend all Lazarus GetClass places to query with unitname
  • Layouter:
    • Testsuite
    • Flow layouter:
      • fragments for elements, needed for wordwrap and toolbars,
      • floats (left, right),
      • direction,
      • position relative+sticky,
      • line-height
    • Flex layouter
    • Grid layouter
    • Overflow: scrolling, clipping
  • Fresnel lcl form
    • property editor: viewport stylesheet
    • property editor: inline style
    • view for exploring computed CSS attributes and errors
  • Renderer-LCL:
    • Testsuite
    • colors: rgb, rgba, hsl, hsla
    • borders: color, style
    • invalidate changed containers, paint only parts
  • Events
    • AddEventListener, RemoveEventListener, CallEventListeners
    • mouse
    • keyboard
    • pseudo attribute :hover
  • Skiafor LCL custom drawn widgetset,
    • Testsuite
    • opacity
    • colors: rgb, rgba, hsl, hsla
    • borders: width, color, style
    • background: color
    • font
    • invalidate changed containers, paint only parts
  • Fresnel backend
    • window
    • drawing
    • mouse events
    • keyboard events
    • idle
    • timer
  • Animation
  • Fresnel components:
    • Testsuite
    • div and span: already tested in Layouter and Renderer
    • label
    • link (CSS a), pseudo elements: :active, :link, :visited
    • image (CSS img)
    • edit aka input type=text
    • textarea
  • Other:
    • CSS attribute "all"
    • CSS variables
    • background gradient
    • background image
    • stylesheets for windows, linux, macos
    • lists
    • special funding page on foundation site.
    • HTML importer