RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
Delphi

Dynamic Creation of IntraWeb Components

Author: Craig Stuntz

For the past couple of days I’ve been working on an experimental IntraWeb (a.k.a., “VCL for the Web”) project. Since I typically generate user interfaces dynamically, I wanted to see how that worked with IntraWeb. On the surface, it’s fairly similar to the regular VCL, but there are some important differences.

Rule number one is that all components you create must have the Name property set. The regular VCL doesn’t require this for components created in code, but IntraWeb uses the Component.Name as part of the HTML id, and if the id isn’t set, the JavaScript generated by IntraWeb won’t work. So always set the Name.

Another thing to note is that the default property values don’t always make sense. If a component looks different when you dynamically generated at runtime versus when you drop it on an IntraWeb form in the designer, take a close look at the text DFM. You’ll probably find non-default property values set by the designer. If you replicate this in your code, you should end up with a component looks the same at runtime.

With all that said, here’s some simple code to add tabs at runtime to an existing tab control:

uses   Graphics, IWContainerBorderOptions;

procedure TfrmUIPageGroup.ClearPageControls;
var
iPage: integer;
begin
for iPage := Pred(TabControl.Pages.Count) downto 0 do begin
TObject(TabControl.Pages[iPage]).Free;
end;
end;

procedure TMyIntraWebForm.AddSomeTabs;
var
iPage, iTabTop, iTabHeight, iTabWidth: integer;
NewTab: TIWTabPage;
begin
// need to have a design-time page to copy sizing properties from
Assert(TabControl.Pages.Count > 0);
iTabTop := TIWTabPage(TabControl.Pages[0]).Top;
iTabHeight := TIWTabPage(TabControl.Pages[0]).Height;
iTabWidth := TIWTabPage(TabControl.Pages[0]).Width;
ClearPageControls;
for iPage := 0 to 2 do begin
NewTab := TIWTabPage.Create(TabControl);
NewTab.BorderOptions.NumericWidth := 0;
NewTab.BorderOptions.BorderWidth := cbwNumeric;
NewTab.BorderOptions.Style := cbsNone;
NewTab.BorderOptions.Color := clNone;
NewTab.Color := clWebWHITE;
NewTab.Top := iTabTop;
NewTab.Width := iTabWidth;
NewTab.Height := iTabHeight;
// WordPress changes the single quote to a typographic quote here, so cutting
// and pasting the next two lines won't work. Sorry; I haven't figured out how
// to stop that
NewTab.Name := 'DynamicPage' + IntToStr(iPage);
NewTab.Title := 'Page ' + IntToStr(iPage);
NewTab.Parent := TabControl;
// TabOrder determines the order of tabs (really!) in this control
// It must be set *after* Parent

NewTab.TabOrder := iPage;
end;
end;

Alignment may not work as expected, either. If I build on this example by creating a control, parenting it to the tab sheet, and setting the Align property to alClient, that control’s size or position doesn’t actually change.

Finally, there is the issue of layout managers. If you use TIWTemplateProcessorHTML or TIWLayoutMgrHTML, there will not be a placeholder in your template for your dynamically generated component. There is probably a way around this, but I have not fully investigated the issue yet. One possible solution would be to do the dynamic component generation inside of a custom IntraWeb control.


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Related posts
C++

What's New in the GetIt Package Manager - June 2020

C++

RAD Studio 10.4 Now Available, Learn More

C++NewsRAD Studio

Open for Business with 10.4! - May 2020 GM Update

C++DelphiNews

Embarcadero Open Source Project Sponsorship

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES