unit MainUnit; {$mode objfpc}{$H+} interface uses Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, Fresnel.Events, Fresnel.DemoRadioButton, Fresnel.DemoCombobox; type { TMainForm } TMainForm = class(TFresnelForm) procedure MainFormCreate(Sender: TObject); private procedure BorderStyleChange(Sender: TObject); public ExamplesDiv: TDiv; UserDiv: TDiv; BorderStyleCB: TDemoCombobox; UniformBorderDiv: TDiv; end; var MainForm: TMainForm; implementation const BorderStyles: array[0..9] of string = ( 'none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset'); {$R *.lfm} { TMainForm } procedure TMainForm.MainFormCreate(Sender: TObject); function AddDiv(aName: string; aParent: TFresnelElement; aStyle: string): TDiv; begin Result:=TDiv.Create(Self); Result.Name:=aName; Result.Parent:=aParent; Result.Style:=aStyle; end; function AddLabel(aName, aCaption: string; aParent: TFresnelElement): TLabel; begin Result:=TLabel.Create(Self); Result.Name:=aName; Result.Caption:=aCaption; Result.Parent:=aParent; end; function AddRadioButton(aName, aCaption: string; aParent: TFresnelElement; const OnClick: TFresnelEventHandler = nil): TDemoRadioButton; begin Result:=TDemoRadioButton.Create(Self); Result.Name:=aName; Result.Caption:=aCaption; Result.Parent:=aParent; Result.AddEventListener(evtClick,OnClick); end; function AddComboxBox(aName: string; aParent: TFresnelElement; const Items: TStrings; ItemIndex: integer; const OnChange: TNotifyEvent = nil): TDemoCombobox; var i: Integer; begin Result:=TDemoCombobox.Create(Self); Result.Name:=aName; for i:=0 to Items.Count-1 do Result.Items.Add(Items[i]); Result.ItemIndex:=ItemIndex; Result.Parent:=aParent; Result.OnChange:=OnChange; end; var s: TFresnelCSSSide; List: TStringList; i: Integer; begin Stylesheet.Text:=':root { font-size: 15px; }'+LineEnding +'div { margin: 3px; }'+LineEnding; // Examples - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ExamplesDiv:=AddDiv('ExamplesDiv',Viewport,'position: absolute; left: 5px; top: 5px; width: 50px;'); // uniform color and width AddDiv('Uniform1pxColorAndWidth',ExamplesDiv,'border: 1px solid red; width: 1px; height: 1px;'); AddDiv('Uniform2pxColorAndWidth',ExamplesDiv,'border: 2px solid red; width: 1px; height: 1px;'); AddDiv('UniformDot5pxColorAndWidth',ExamplesDiv,'border: .5px solid red; width: 2px; height: 2px;'); // uniform color, one side no border for s in TFresnelCSSSide do AddDiv('UniformColorAndWidthOpen'+dbgs(s),ExamplesDiv,'border: 1px solid red; border-'+lowercase(dbgs(s))+'-width: 0px; width: 1px; height: 1px;'); // 1px solid one side blue for s in TFresnelCSSSide do AddDiv('UniformWidth1pxAndColor'+dbgs(s),ExamplesDiv,'border: 1px solid red; border-'+lowercase(dbgs(s))+'-color: blue; width: 1px; height: 1px;'); // 3px solid one side blue for s in TFresnelCSSSide do AddDiv('UniformWidth3pxAndColor'+dbgs(s),ExamplesDiv,'border: 3px solid red; border-'+lowercase(dbgs(s))+'-color: blue; width: 1px; height: 1px;'); // 1px solid red, border-radius: 3px AddDiv('UniformColorAndWidth1pxAndRadius3px',ExamplesDiv,'border: 1px solid red; width: 5px; height: 5px; border-radius: 3px;'); // 2px solid red, border-radius: 3px AddDiv('UniformColorAndWidth2pxAndRadius3px',ExamplesDiv,'border: 2px solid red; width: 5px; height: 5px; border-radius: 3px;'); // User - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - UserDiv:=AddDiv('UserDiv',Viewport,'position: absolute; left: 60px; top: 5px; width: 200px;'); List:=TStringList.Create; for i:=0 to high(BorderStyles) do List.Add('border-style: '+BorderStyles[i]); BorderStyleCB:=AddComboxBox('BorderStyleCB',UserDiv,List,4,@BorderStyleChange); UniformBorderDiv:=AddDiv('UniformBorderDiv',UserDiv,'padding: 5px; border: 1px solid black; height: 10px;'); end; procedure TMainForm.BorderStyleChange(Sender: TObject); var s: String; begin if BorderStyleCB.ItemIndex>=0 then s:=BorderStyles[BorderStyleCB.ItemIndex] else s:='solid'; s:='1px '+s+' black'; UniformBorderDiv.SetStyleAttr('border',s); end; end.