Difference between revisions of "Fresnel"
From Free Pascal wiki
Jump to navigationJump to searchLine 13: | Line 13: | ||
* fcl-css supports most basic CSS features, even some CSS-5 feats | * fcl-css supports most basic CSS features, even some CSS-5 feats | ||
* A Lazarus package src/fresnel.lpk containing the runtime units | * A Lazarus package src/fresnel.lpk containing the runtime units | ||
− | * A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put | + | * A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TBody, TDiv, TSpan, etc onto the designer. |
* TFresnelElement | * TFresnelElement | ||
** a TComponent that works similar to an HTML element | ** a TComponent that works similar to an HTML element | ||
Line 20: | Line 20: | ||
** Elements can have child elements, building a tree similar to the browser DOM. | ** Elements can have child elements, building a tree similar to the browser DOM. | ||
** CSS attributes are evaluated to their ''computed'' values. | ** CSS attributes are evaluated to their ''computed'' values. | ||
− | ** You can define descendants adding their own CSS attributes. See for example | + | ** You can define descendants adding their own CSS attributes. See for example TDiv, TSpan and TCustomLabel |
* TFresnelViewport | * TFresnelViewport | ||
** a TFresnelElement that is the root of the tree. | ** a TFresnelElement that is the root of the tree. | ||
Line 26: | Line 26: | ||
** 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 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. | ** 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. | ||
− | * | + | * TDiv - a TFresnelElement similar to HTML div element, i.e. block |
− | * | + | * TSpan - a TFresnelElement similar to HTML span element, i.e. inline |
− | * | + | * TReplacedElement - a TFresnelElement leaf node |
− | * | + | * TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered. |
− | * | + | * TLabel - a TCustomLabel with published properties |
− | * | + | * TBody - a TElement, similar to HTML body element |
− | * Unit | + | * Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application. |
=Roadmap= | =Roadmap= |
Revision as of 07:46, 15 April 2023
Overview
Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.
git repo: https://gitlab.com/freepascal.org/lazarus/fresnel
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 TBody, TDiv, TSpan, etc 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 TDiv, TSpan and TCustomLabel
- 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.
- TDiv - a TFresnelElement similar to HTML div element, i.e. block
- TSpan - a TFresnelElement similar to HTML span element, i.e. inline
- TReplacedElement - a TFresnelElement leaf node
- TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
- TLabel - a TCustomLabel with published properties
- TBody - a TElement, similar to HTML body element
- Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application.
Roadmap
- 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