[Pas2js] compound component

[warleyalex]

I have created 3 visual components (TWebContainer, TWebPanel, TWebButton). 

First, drag 'n drop a "WebContainer" into the form (this is a component
container that generates 
<div class="view view-main" id="WebContainer1"></div>).

Second, this WebContainer1 embeds another component (a WebPanel1), just drag
'n drop into the 
"WebContainer1"; and

Third, "WebPanel1" embeds 3 another buttons subcomponents. 

we generate the LFM form to pas: 

with WebContainer1 do begin
  Name:='WebContainer1';
  Left:=12;
  Height:=446;
  Top:=9;
  Width:=639;
  Caption:='WebContainer1';
  Parent:=Self;
  with WebPanel1 do begin
    Name:='WebPanel1';
    Left:=16;
    Height:=54;
    Top:=18;
    Width:=601;
    Caption:='WebPanel1';
    Parent:=WebContainer1;
    with WebButton1 do begin
      Name:='WebButton1';
      Left:=16;
      Height:=25;
      Top:=16;
      Width:=75;
      Caption:='WebButton1';
      TabOrder:=0;
      Parent:=WebPanel1;
    end;
    with WebButton2 do begin
      Name:='WebButton2';
      Left:=248;
      Height:=25;
      Top:=16;
      Width:=75;
      Caption:='WebButton2';
      TabOrder:=1;
      Parent:=WebPanel1;
    end;
    with WebButton3 do begin
      Name:='WebButton3';
      Left:=512;
      Height:=25;
      Top:=16;
      Width:=75;
      Caption:='WebButton3';
      TabOrder:=2;
      Parent:=WebPanel1;
    end;
  end;

When we compile this pas2js example, we have the HTML rendered as:


    <div class="view view-main" id="WebContainer1">
      <div class="views" id="WebPanel2">
        <button type="button" id="Button3" zindex="0" tabindex="1" title=""
        style="overflow: hidden; cursor: default; outline: none; top: 16px;
left: 16px; width: 75px; height: 25px; position: absolute; color: rgb(0, 0,
0); font-family: Tahoma; font-style: normal; font-size: 8pt;">
        </button>
        <button type="button" id="Button4" zindex="0" tabindex="2" title=""
        style="overflow: hidden; cursor: default; outline: none; top: 16px;
left: 248px; width: 75px; height: 25px; position: absolute; color: rgb(0, 0,
0); font-family: Tahoma; font-style: normal; font-size: 8pt;"></button>
        <button type="button" id="Button5" zindex="0" tabindex="3" title=""
        style="overflow: hidden; cursor: default; outline: none; top: 16px;
left: 512px; width: 75px; height: 25px; position: absolute; color: rgb(0, 0,
0); font-family: Tahoma; font-style: normal; font-size: 8pt;"></button>
      </div>
    </div>

Nice, we can add/remove subcomponents dynamically. However, it would be nice
if would be possible to
create a compounding 3-button-component (TWebComp). 
It involves the development of component containers, which interact with the
child controls.
I just would like to drag 'n drop a TWebComp into the designer and be able
at design time 
to see a "dynamic behavior". 
Dynamic behaviour is kind of the live-component approach, allowing
decoupling components, you can add/remove WebButton subcomponent directly at
design time.






--
Sent from: http://pas2js.38893.n8.nabble.com/