* Demo program for widgets

demo/webwidget/widgets/css/widgetsdemo.css

@@ -0,0 +1,46 @@
+.banner {
+  background-color: var(--blue);
+/*
+  background-size: 128px 40px;
+  background-repeat: no-repeat;
+  background-size: cover;*/
+*/
+  color: white !important;
+  height: 50px;
+}
+
+#democontainer {
+  padding: 10px;
+  background-color: #E0ECFF;
+}
+
+.propGridTable {
+    border: solid 1px #95B8E7;
+    border-spacing: 0;
+}
+
+.propGridGroupRow {
+    background-color: #E0ECFF;
+    font-weight: bold;
+}
+
+.propGridGroupRow.pgCollapsible {
+  cursor: pointer;
+}
+
+.propGridGroupCell {
+    padding: 5px;
+}
+
+.propGridRow{
+}
+
+.propGridDataCell {
+    border: dotted 1px #ccc;
+    padding: 5px;
+}
+
+.propGridNameCell {
+    border: dotted 1px #ccc;
+    padding: 5px;
+}

demo/webwidget/widgets/democonsts.pp

@@ -0,0 +1,15 @@
+unit democonsts;
+
+{$mode objfpc}
+
+interface
+
+Const
+  Lorem1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis, tortor at ultricies sodales, est ligula pulvinar felis, eget commodo mi est vitae nulla. Ut est ex, volutpat ac tincidunt quis, eleifend ut libero. Phasellus ipsum ligula, viverra eu malesuada ac, posuere non turpis. Morbi elit tellus, ornare in porta at, faucibus quis sem. Etiam lacinia dui at tortor ullamcorper, et malesuada metus volutpat. Nam in sollicitudin nibh. Fusce vulputate massa eu ex faucibus, a lacinia enim placerat. Pellentesque mattis risus a lorem tempor, nec sagittis ipsum vestibulum. Fusce tempus ipsum eros, scelerisque ultrices erat imperdiet a. Ut libero diam, placerat ut mi eu, lacinia efficitur ipsum. Vivamus sit amet egestas nisl. Integer non lacus consectetur, placerat nunc eget, dictum justo. Vivamus eu ipsum in magna finibus gravida. Etiam eu tristique nibh. Quisque imperdiet interdum fringilla. Duis viverra nisi ut massa tincidunt ultricies.';
+  Lorem2 = 'Proin porttitor est in rhoncus congue. Cras placerat odio risus, quis accumsan ipsum mattis a. Donec sed velit vitae nulla finibus ullamcorper. Cras feugiat iaculis lorem non molestie. Curabitur porta eros a tincidunt suscipit. Aliquam sodales nunc quis ultricies convallis. Donec ultricies vulputate libero sed facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu aliquet ligula.';
+  Lorem3 = 'Mauris bibendum lorem a felis placerat ornare. Suspendisse ante neque, venenatis nec placerat ac, tempor ac risus. Donec rutrum ex id ligula sollicitudin vulputate. Donec elementum nisl in velit viverra vestibulum. Nam quam odio, cursus vitae urna elementum, vehicula semper metus. Ut scelerisque dapibus lectus, consectetur scelerisque dui dapibus et. Fusce feugiat, dui at vehicula mollis, diam dui condimentum dui, non semper lorem nisi molestie sem. Ut interdum odio id consequat molestie. Fusce quis ipsum nec leo fermentum feugiat ut et quam. Duis ut elementum dui, porta pharetra felis. Vivamus sit amet arcu at augue interdum dapibus sed a urna. Etiam consectetur commodo est ut efficitur. Sed pretium turpis vitae augue faucibus, nec dictum nibh convallis. Cras hendrerit viverra sapien. Aenean elementum nec orci et hendrerit.';
+
+implementation
+
+end.
+

demo/webwidget/widgets/demohtmlwidgets.pp

@@ -0,0 +1,321 @@
+unit demohtmlwidgets;
+
+{$mode objfpc}
+
+interface
+
+uses
+  sysutils, web, js, webwidget, htmlwidgets,  widgetdemo;
+
+Type
+  
+  { TButtonDemo }
+
+  TButtonDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TRadioDemo }
+
+  TRadioDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TCheckboxDemo }
+
+  TCheckboxDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TTextInputDemo }
+
+  TTextInputDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+  
+  { TFileInputDemo }
+
+  TFileInputDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TDateInputDemo }
+
+  TDateInputDemo = class(TDemoContainer)
+  protected
+    procedure DoChange(Sender: TObject; Event: TJSEvent); override;
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TButtonInputDemo }
+
+  TButtonInputDemo = class(TDemoContainer)
+  private
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { THiddenInputDemo }
+
+  THiddenInputDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TTextAreaDemo }
+
+  TTextAreaDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TLabelWidgetDemo }
+
+  TLabelWidgetDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TTextWidgetDemo }
+
+  TTextWidgetDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TTextLinesWidgetDemo }
+
+  TTextLinesWidgetDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+
+implementation
+
+uses democonsts;
+
+{ TTextLinesWidgetDemo }
+
+class function TTextLinesWidgetDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TTextLinesWidget;
+end;
+
+procedure TTextLinesWidgetDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  With TTextLinesWidget(WidgetInstance).Lines do
+    begin
+    beginUpdate;
+    try
+      Add(Lorem1);
+      Add('');
+      Add(Lorem2);
+      Add('');
+      Add(Lorem3);
+    finally
+      EndUpdate;
+    end;
+    end;
+end;
+
+{ TTextWidgetDemo }
+
+class function TTextWidgetDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TTextWidget
+end;
+
+procedure TTextWidgetDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TTextWidget(WidgetInstance).Text:=Lorem1;
+end;
+
+{ TLabelWidgetDemo }
+
+class function TLabelWidgetDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TLabelwidget;
+end;
+
+procedure TLabelWidgetDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TLabelwidget(WidgetInstance).Text:=Lorem1;
+end;
+
+{ TTextAreaDemo }
+
+class function TTextAreaDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TTextAreaWidget;
+end;
+
+procedure TTextAreaDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TTextAreaWidget(WidgetInstance).Rows:=20;
+  TTextAreaWidget(WidgetInstance).Columns:=80;
+  TTextAreaWidget(WidgetInstance).Lines.Add(Lorem1);
+  TTextAreaWidget(WidgetInstance).Lines.Add('');
+  TTextAreaWidget(WidgetInstance).Lines.Add(Lorem2);
+  TTextAreaWidget(WidgetInstance).Lines.Add('');
+  TTextAreaWidget(WidgetInstance).Lines.Add(Lorem3);
+end;
+
+{ THiddenInputDemo }
+
+class function THiddenInputDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=THiddenInputWidget;
+end;
+
+procedure THiddenInputDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  THiddenInputWidget(WidgetInstance).Value:='This value is hidden';
+  THiddenInputWidget(WidgetInstance).ValueName:='MyHidden';
+end;
+
+{ TButtonDemo }
+
+class function TButtonDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TButtonWidget;
+end;
+
+procedure TButtonDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  WidgetInstance.OnClick:=@DoClick;
+end;
+
+{ TRadioDemo }
+
+
+class function TRadioDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TRadioInputWidget;
+end;
+
+procedure TRadioDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TRadioInputWidget(WidgetInstance).Text:='A Radio';
+  WidgetInstance.OnChange:=@DoChange;
+end;
+
+{ TCheckboxDemo }
+
+class function TCheckboxDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TCheckboxInputWidget;
+end;
+
+procedure TCheckboxDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TCheckboxInputWidget(WidgetInstance).Text:='A checkbox';
+  WidgetInstance.OnChange:=@DoChange;
+end;
+
+{ TTextInputDemo }
+
+class function TTextInputDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TTextInputWidget;
+end;
+
+procedure TTextInputDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TTextInputWidget(WidgetInstance).Value:='A Text Value';
+  WidgetInstance.OnChange:=@DoChange;
+end;
+
+{ TDateInputDemo }
+
+procedure TDateInputDemo.DoChange(Sender: TObject; Event: TJSEvent);
+begin
+  Inherited;
+  Writeln(Sender.ClassName,' date value: ', DateToStr(TDateInputWidget(WidgetInstance).Date));
+end;
+
+class function TDateInputDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TDateInputWidget;
+end;
+
+procedure TDateInputDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  TDateInputWidget(WidgetInstance).Date:=Date+1;
+  WidgetInstance.OnChange:=@DoChange;
+end;
+
+{ TFileInputDemo }
+
+
+class function TFileInputDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TFileInputWidget;
+end;
+
+procedure TFileInputDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+//  TFileInputWidget(WidgetInstance).FileName:='my.txt';
+  WidgetInstance.OnChange:=@DoChange;
+end;
+
+{ TButtonInputDemo }
+
+
+class function TButtonInputDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TButtonInputWidget;
+end;
+
+procedure TButtonInputDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  WidgetInstance.OnClick:=@DoClick;
+  TButtonInputWidget(WidgetInstance).Value:='Press me';
+end;
+
+
+initialization
+  TCheckboxDemo.RegisterDemo;
+  TRadioDemo.RegisterDemo;
+  TButtonDemo.RegisterDemo;
+  TTextInputDemo.RegisterDemo;
+  TDateInputDemo.RegisterDemo;
+  TFileInputDemo.RegisterDemo;
+  TButtonInputDemo.RegisterDemo;
+  THiddenInputDemo.RegisterDemo;
+  TTextAreaDemo.RegisterDemo;
+  TLabelWidgetDemo.RegisterDemo;
+  TTextWidgetDemo.RegisterDemo;
+  TTextLinesWidgetDemo.RegisterDemo;
+end.
+

demo/webwidget/widgets/frmdemo.pp

@@ -0,0 +1,176 @@
+unit frmDemo;
+
+{$mode objfpc}
+
+interface
+
+uses
+  Classes, SysUtils, web, webwidget, htmlwidgets, widgetdemo, propertygridwidget, webrouter;
+
+Type
+
+  { THelpDemoContainer }
+
+  THelpDemoContainer = class(TDemoContainer)
+  Protected
+    Function HTMLTag: String; override;
+    Procedure ApplyWidgetSettings(aElement: TJSHTMLElement); override;
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+  end;
+  { TDemoForm }
+
+  TDemoForm = Class(TComponent)
+  Private
+    Fcontainer : TDemoContainer;
+    FSelectedClass : TDemoContainerClass;
+    FDemoParent : TJSHTMLElement;
+    FPropertyGrid : TSimplePropertyGridWidget;
+    FCBshowconsole: TJSHTMLInputelement;
+    FConsole: TJSHTMLElement;
+    Flist : TSimpleLoopTemplateWidget;
+    procedure DoGetValue(Sender: TObject; aValue: TLoopTemplateValue);
+    procedure DoRoute(URl: String; aRoute: TRoute; Params: TStrings);
+    procedure DoSelectDemo(Sender: TObject; Event: TJSEvent);
+    function DoShowConsole(Event: TEventListenerEvent): boolean;
+    procedure ShowSelected;
+  Public
+    Constructor Create(aOwner : TComponent) ; override;
+    Procedure Show;
+    property SelectedClass : TDemoContainerClass Read FSelectedClass;
+  end;
+
+implementation
+
+Const
+  SDemoContainerID = 'democontainer';
+  SDemoListID = 'demolist';
+  SPropertyGridID = 'propertygrid';
+  SShowconsoleID = 'showconsole';
+  SpasjsconsoleID = 'pasjsconsole';
+{ THelpDemoContainer }
+
+function THelpDemoContainer.HTMLTag: String;
+begin
+  Result:='p';
+end;
+
+procedure THelpDemoContainer.ApplyWidgetSettings(aElement: TJSHTMLElement);
+begin
+  inherited ApplyWidgetSettings(aElement);
+  aElement.innerHTML:='Please select an element in the list located at the left of the screen';
+end;
+
+class function THelpDemoContainer.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=Nil;
+end;
+
+
+{ TDemoForm }
+
+
+
+procedure TDemoForm.ShowSelected;
+
+Var
+  C: TDemoContainerClass;
+
+begin
+  C:=FSelectedClass;
+  if C=Nil then
+    C:=THelpDemoContainer;
+  FDemoParent.InnerHTML:='';
+  if Assigned(FContainer) then
+    FreeAndNil(FContainer);
+  FDemoParent.InnerHTML:=''; // To be sure
+  FContainer:=C.Create(Self);
+  FContainer.Name:='CurrentContainer';
+  FContainer.ParentID:=SDemoContainerID;
+  FContainer.Refresh;
+  FContainer.ShowDemo;
+  FPropertyGrid.Subject:=FContainer.WidgetInstance;
+  FPropertyGrid.LookupRoot:=FContainer;
+  FPropertyGrid.Refresh;
+end;
+
+procedure TDemoForm.DoSelectDemo(Sender: TObject; Event: TJSEvent);
+begin
+{  Writeln('Changed : ',Flist.SelectedIndex);
+  if Flist.SelectedIndex>=0 then
+    Writeln('Value : ',Flist.Values[Flist.SelectedIndex]);
+  FSelectedClass:=TDemoFactory.Instance.FindDemoClass(Flist.Values[Flist.SelectedIndex]);}
+  ShowSelected;
+end;
+
+function TDemoForm.DoShowConsole(Event: TEventListenerEvent): boolean;
+begin
+  if FCBShowConsole.checked then
+    FConsole.style.cssText:=''
+  else
+    FConsole.style.cssText:='display: none;'
+end;
+
+constructor TDemoForm.Create(aOwner: TComponent);
+
+begin
+  inherited Create(aOwner);
+  Flist:=TSimpleLoopTemplateWidget.Create(Self);
+  Flist.OnGetValue:=@DoGetValue;
+  FList.HeaderTemplate:='<div class="list-group">';
+  FList.FooterTemplate:='</div>';
+  FList.ItemTemplate:='<a href="#/{{DemoName}}/" class="list-group-item list-group-item-action">{{DemoDescription}}</a>';
+
+  FDemoParent:=TJSHTMLelement(Document.getElementById(SdemocontainerID));
+  FPropertyGrid:=TSimplePropertyGridWidget.Create(Self);
+  FCBshowconsole:=TJSHTMLInputelement(Document.getElementById(SShowconsoleID));
+  FCBshowconsole.OnChange:=@DoShowConsole;
+  FConsole:=TJSHTMLElement(Document.getElementById(SpasjsconsoleID));
+  Router.RegisterRoute(':Demo',@DoRoute,True);
+end;
+
+procedure TDemoForm.DoRoute(URl : String; aRoute : TRoute; Params: TStrings);
+
+begin
+  writeln('In route: ', Params.Values['Demo']);
+  FSelectedClass:=TDemoFactory.Instance.FindDemoClass(Params.Values['Demo']);
+  ShowSelected;
+end;
+
+procedure TDemoForm.DoGetValue(Sender: TObject; aValue: TLoopTemplateValue);
+
+Var
+  F : TDemoFactory;
+begin
+  F:=TDemoFactory.Instance;
+  if aValue.Name='DemoName' then
+    aValue.Value:=F.Demos[aValue.Index].DemoClass.ClassName
+  else if aValue.Name='DemoDescription' then
+    aValue.Value:=F.Demos[aValue.Index].DemoClass.Description
+end;
+
+procedure TDemoForm.Show;
+
+Var
+  F : TDemoFactory;
+  I : Integer;
+
+begin
+  F:=TDemoFactory.Instance;
+  Flist.ParentID:=SDemoListID;
+{  for I:=0 to F.DemoCount-1 do
+    begin
+    Flist.Items.Add(F.Demos[i].DemoClass.Description);
+    Flist.Values.Add(F.Demos[i].DemoClass.ClassName);
+    end;
+  Flist.OnChange:=@DoSelectDemo;
+}
+  FList.ItemCount:=DemoFactory.DemoCount;
+  Writeln('Demo count: ',FList.ItemCount);
+  Flist.Refresh;
+  FPropertyGrid.ParentID:=SPropertyGridID;
+  ShowSelected;
+end;
+
+end.
+

demo/webwidget/widgets/webwidgetsdemo.lpi

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="webwidgetsdemo"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="5">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="PasJSHTMLFile" Value="project1.html"/>
+      <Item2 Name="PasJSPort" Value="0"/>
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
+      <Item4 Name="RunAtReady" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="webwidgetsdemo.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="widgetsdemo.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+      </Unit>
+      <Unit>
+        <Filename Value="widgetdemo.pp"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="frmdemo.pp"/>
+        <IsPartOfProject Value="True"/>
+        <UnitName Value="frmDemo"/>
+      </Unit>
+      <Unit>
+        <Filename Value="demohtmlwidgets.pp"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="democonsts.pp"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target FileExt=".js">
+      <Filename Value="webwidgetsdemo"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="browser"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/webwidget/widgets/webwidgetsdemo.lpr

@@ -0,0 +1,35 @@
+program webwidgetsdemo;
+
+{$mode objfpc}
+
+uses
+  browserconsole, browserapp, JS, Classes, SysUtils, Web, widgetdemo, frmDemo, Rtl.TemplateLoader,
+  demohtmlwidgets, democonsts, webrouter;
+
+type
+  TMyApplication = class(TBrowserApplication)
+    FForm : TDemoForm;
+    procedure doRun; override;
+  end;
+
+procedure TMyApplication.doRun;
+
+begin
+  Router.InitHistory(hkHash);
+  FForm:=TDemoForm.Create(Self);
+  FForm.Show;
+  Router.RouteFromURL;
+  Terminate;
+end;
+
+var
+  Application : TMyApplication;
+
+begin
+  MaxConsoleLines:=15;
+  ConsoleStyle:=DefaultCRTConsoleStyle;
+  InitConsole;
+  Application:=TMyApplication.Create(nil);
+  Application.Initialize;
+  Application.Run;
+end.

demo/webwidget/widgets/widgetdemo.pp

@@ -0,0 +1,253 @@
+unit widgetdemo;
+
+{$mode objfpc}
+
+interface
+
+uses
+  Classes, SysUtils, web, webwidget;
+
+Type
+  TDemoRegistration = Class;
+
+  { TDemoContainer }
+
+  TDemoContainer = class(TWebWidget)
+  private
+    FWidgetInstance: TCustomWebWidget;
+  Protected
+    // Event that can be used by descendents to attach to OnClick
+    procedure DoClick(Sender: TObject; Event: TJSEvent); virtual;
+    // Event that can be used by descendents to attach to OnChange
+    procedure DoChange(Sender: TObject; Event: TJSEvent); virtual;
+  Public
+    function HTMLTag: String; override;
+    function DoRenderHTML(aParent, aElement: TJSHTMLElement): TJSHTMLElement; override;
+    Class Function Demohelp : String; virtual;
+    Class Function Description : String; virtual;
+    Class function WebWidgetClass : TCustomWebWidgetClass; virtual; abstract;
+    Class Function RegisterDemo : TDemoRegistration;
+    Property WidgetInstance : TCustomWebWidget Read FWidgetInstance;
+    Procedure ShowDemo; virtual;
+  end;
+  TDemoContainerClass = Class of TDemoContainer;
+
+  { TDemoRegistration }
+
+  TDemoRegistration = class(TCollectionItem)
+  private
+    FDemoclass: TDemoContainerClass;
+  Public
+    Procedure Assign(Source : TPersistent); override;
+    Property DemoClass : TDemoContainerClass Read FDemoclass;
+  end;
+
+  { TDemoRegistrationList }
+
+  TDemoRegistrationList = Class(TCollection)
+  private
+    function GetD(aIndex : integer): TDemoRegistration;
+  Public
+    Function IndexOf(aClassName: string): Integer;
+    Function Find(aClassName: string): TDemoRegistration;
+    Function AddDemo(aClass : TDemoContainerClass) : TDemoRegistration;
+    Property Demos[aIndex : integer] : TDemoRegistration read GetD; default;
+  end;
+
+  { TDemofactory }
+
+  TDemofactory = Class(TComponent)
+  Private
+    Class var _Instance : TDemofactory;
+  Private
+    FList : TDemoRegistrationList;
+    function GetC: Integer;
+    function GetD(aIndex : Integer): TDemoRegistration;
+  Public
+    Constructor Create(aOwner : TComponent); override;
+    Destructor Destroy; override;
+    Class Function Instance : TDemoFactory;
+    Function RegisterDemo(aClass : TDemoContainerClass) : TDemoRegistration;
+    Function FindDemo(aClassName : String) : TDemoRegistration;
+    Function FindDemoClass(aClassName : String) : TDemoContainerClass;
+    Property Demos[aIndex : Integer] : TDemoRegistration Read GetD;
+    Property DemoCount : Integer Read GetC;
+  end;
+
+Function DemoFactory : TDemofactory;
+
+
+implementation
+
+uses typinfo;
+
+Function DemoFactory : TDemofactory;
+
+begin
+  Result:=TDemoFactory.Instance;
+end;
+
+{ TDemoRegistration }
+
+procedure TDemoRegistration.Assign(Source: TPersistent);
+begin
+  if Source is TDemoRegistration then
+     Self.FDemoclass:=(Source as TDemoRegistration).DemoClass;
+  inherited Assign(Source);
+end;
+
+{ TDemofactory }
+
+function TDemofactory.GetC: Integer;
+begin
+  Result:=FList.Count;
+end;
+
+function TDemofactory.GetD(aIndex : Integer): TDemoRegistration;
+begin
+  Result:=Flist[aIndex];
+end;
+
+constructor TDemofactory.Create(aOwner: TComponent);
+begin
+  inherited Create(aOwner);
+  FList:=TDemoRegistrationList.Create(TDemoRegistration);
+end;
+
+destructor TDemofactory.Destroy;
+begin
+  FreeAndNil(FList);
+  inherited Destroy;
+end;
+
+class function TDemofactory.Instance: TDemoFactory;
+begin
+  If _instance=Nil then
+    _Instance:=TDemofactory.Create(Nil);
+  Result:=_Instance;
+end;
+
+function TDemofactory.RegisterDemo(aClass: TDemoContainerClass): TDemoRegistration;
+begin
+  Result:=FList.AddDemo(AClass);
+end;
+
+function TDemofactory.FindDemo(aClassName: String): TDemoRegistration;
+begin
+  Result:=FList.Find(aClassName);
+end;
+
+function TDemofactory.FindDemoClass(aClassName: String): TDemoContainerClass;
+
+Var
+  R : TDemoRegistration;
+
+begin
+  R:=FindDemo(aClassName);
+  if Assigned(R) then
+    Result:=R.DemoClass
+  else
+    Result:=Nil;
+end;
+
+{ TDemoRegistrationList }
+
+function TDemoRegistrationList.GetD(aIndex : integer): TDemoRegistration;
+begin
+  Result:=TDemoRegistration(Items[aIndex]);
+end;
+
+function TDemoRegistrationList.IndexOf(aClassName: string): Integer;
+begin
+  Result:=Count-1;
+  while (Result>=0) and Not SameText(aClassName,GetD(Result).DemoClass.ClassName) do
+    Dec(Result);
+end;
+
+function TDemoRegistrationList.Find(aClassName: string): TDemoRegistration;
+
+Var
+  Idx : integer;
+
+begin
+  Idx:=IndexOf(aClassName);
+  if Idx<>-1 then
+    Result:=GetD(Idx)
+  else
+    Result:=Nil;
+end;
+
+function TDemoRegistrationList.AddDemo(aClass: TDemoContainerClass): TDemoRegistration;
+begin
+  Result:=Add as TDemoRegistration;
+  Result.FDemoclass:=aClass;
+end;
+
+{ TDemoContainer }
+
+procedure TDemoContainer.DoClick(Sender: TObject; Event: TJSEvent);
+begin
+  Writeln(Sender.ClassName,' : OnClick event');
+end;
+
+procedure TDemoContainer.DoChange(Sender: TObject; Event: TJSEvent);
+begin
+  Writeln(Sender.ClassName,' : OnChange event');
+  if IsPublishedProp(Sender,'Checked') then
+    Writeln(Sender.ClassName,' checked value :', GetBoolProp(WidgetInstance,'Checked'));
+  if IsPublishedProp(Sender,'Value') then
+    Writeln(Sender.ClassName,' Value :', GetJSValueProp(WidgetInstance,'Value'));
+end;
+
+function TDemoContainer.HTMLTag: String;
+begin
+  result:='DIV';
+end;
+
+function TDemoContainer.DoRenderHTML(aParent, aElement: TJSHTMLElement): TJSHTMLElement;
+
+begin
+  Result:=inherited DoRenderHTML(aParent, aElement);
+end;
+
+class function TDemoContainer.Demohelp: String;
+begin
+  Result:='';
+end;
+
+class function TDemoContainer.Description: String;
+begin
+  Result:=WebwidgetClass.ClassName+' demo';
+end;
+
+class function TDemoContainer.RegisterDemo: TDemoRegistration;
+begin
+  Result:=TDemoFactory.Instance.RegisterDemo(Self);
+end;
+
+procedure TDemoContainer.ShowDemo;
+
+  Function MaybeSet(aName : string) : boolean;
+
+  begin
+    Result:=IsPublishedProp(FWidgetInstance,aName) and
+            (GetPropInfo(FWidgetInstance,aName).TypeInfo.Kind=tkString);
+    if result then
+       SetStrProp(FWidgetInstance,aName,'Demo '+FWidgetInstance.Classname);
+  end;
+
+begin
+  FreeAndNil(FWidgetInstance);
+  if Assigned(WebWidgetClass) then
+    begin
+    FWidgetInstance:=WebWidgetClass.Create(Self);
+    FWidgetInstance.Name:=WebWidgetClass.ClassName+'1';
+    FWidgetInstance.Parent:=Self;
+    if not MaybeSet('Caption') then
+      MaybeSet('Text');
+    FWidgetInstance.Refresh;
+    end;
+end;
+
+end.
+

demo/webwidget/widgets/widgetsdemo.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
+<!--
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
+-->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/widgetsdemo.css"/>
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js" crossorigin="anonymous"></script>
+  <title>Webwidgets Demo</title>
+  <script src="webwidgetsdemo.js"></script>
+</head>
+<body>
+  <div class="banner container-fluid">
+     <h2  class="text-center">
+      <span "align-middle">WebWidgets demo</span>
+    </h2>  </div>
+  <div class="container-fluid"/>
+    <div class="row">
+      <div id="demoarea" class="col-10">
+        <div class="row">
+          <div id="demolist" class="col-2"></div>
+          <div id="democontainer" class="col-10"></div>
+        </div>
+        <div class="row">
+          <div class="col-2">
+            <div class="form-check">
+              <label class="form-check-label">
+                <input type="checkbox" id="showconsole" class="form-check-input" checked>Show pas2js console
+              </label>
+            </div>
+          </div>
+
+        </div>
+        <div class="row">
+          <div id="pasjsconsole" class="col-12 democonsole"></div>
+        </div>
+      </div>
+      <div id="propertygrid" class="col-2">
+      </div>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", rtl.run);
+  </script>
+</body>
+</html>