How to put dynamically created frame into JQLayout

[davenovo]

Hello,

I would like to create a frame dynamically and place it into a JQLayout.

I have made a JQLayout with 2 panels, and the center one is called pnlCenter.

I put a button in the top panel and the following code in the button click..

var
newFrame: TIWFrame2;
begin
newFrame:=TIWFrame2.Create(self);
newFrame.parent:=pnlCenter
end;

Yet the frame is not appearing. Is there a special trick I need to do in order to make the frame appear?

[Alexander Bulei]

Hi davenovo,

Yet the frame is not appearing. Is there a special trick I need to do in order to make the frame appear?

Yes, please check our main demo, how to render the frames:

delphi code

procedure TIWComponentForm.ShowFrame(AFrameClass: TIWCGFrameClass; AParams: TStringList);
var
  IsAsync: Boolean;
begin
  if not Assigned(AFrameClass) then Exit;

  CGJQTabs.ActiveTab:= IWCGTabDemo;

  IsAsync:= CGIsCallBackProcessing;
  if IsAsync then
  begin
    // SINCE THE FRAME IS GOING TO BE RENDERED BY AJAX, DON'T NEED TO GENERATE AJAX RESPONSE.
    CGCallBackDisableAjaxResponse;
  end;
  try
    CreateNewFrame(AFrameClass);
    FrameComp.ProcessCommand(0,AParams);
  finally
    if IsAsync then
    begin
      CGCallBackEnableAjaxResponse;
      RenderRegionAsync(JQRegContainer,rramOldMethod,True);
    end;

  end;
end;

Best Regards.

[davenovo]

Hello,

Thanks. Out of curiosity, why so much boilerplate code? Is there documentation somewhere what all those extra method calls are for?

For example, if I make an IW application, and on the main form I put a region, all I have to do to create a dynamic frame is to

procedure TIWForm1.IWButton1Click(Sender: TObject);
var
newFrame: TIWFrame2;
begin
newFrame:=TIWFrame2.create(self);
newFrame.Parent:=IWRegion1;
end;

Why is it so much more complex here?

[Alexander Bulei]

Hi davenovo,

You're missing very important thing!
Maybe you didn't noticed, but we have the asynchronous(ajax) mode/refresh, which will refresh the require part/component only, and without the refresh of whole page.

delphi code

procedure TIWForm1.IWButton1Click(Sender: TObject);
var
newFrame: TIWFrame2;
begin
newFrame:=TIWFrame2.create(self);
newFrame.Parent:=IWRegion1;
end;

Can you do the same but with AsyncClick? (joke)

Best Regards.

[davenovo]

I see, so you are saying the difference is that the simple IW example is refreshing the entire page, whereas the code you showed is only updating the required region?

[Alexander Bulei]

Hi davenovo,

whereas the code you showed is only updating the required region?

The code above, for rendering the iframe or creating on fly.

If you want refresh or update the component, you can use the simpler way:

delphi code

IWCGJQButton1.AjaxReRender(True,False);

Best Regards.

[Jorge Sousa]

Hello

About

the difference is that the simple IW example is refreshing the entire page, whereas the code you showed is only updating the required region?

The difference is that your code is not doing nothing in an async (ajax) event, only if you refresh the page (pressing F5 in browser)

And we've added our RenderRegionAsync method to add/replace/remove a region (and children controls) on the fly in an async (ajax) event.

[davenovo]

Interesting. Is there somewhere that explains what happens in an ajax event that is different from the "normal" button click event from Intraweb that I showed above.

[Jorge Sousa]

Basically in an ajax event, javascript is generated to be executed when the event backs to browser.

What happens sometimes is that:

Javascript is not generated because the operations are too complex, that's why render async is a good thing, because it renders the html of a region and its children and then uses javascript to add/replace the html to the current page.

for some jquery plugins the javascript is generated, and the plugin had a general setter method, but it doesn't do anything for a given property (is the case of jqgrid column's width).

https://www.w3schools.com/js/js_ajax_intro.asp

If i'ts full submit (TIWButton.OnAsyncClick, TIWCGJQButton.JQButtonOptions.OnClick.Ajax = False), a full post is performed in browser and the whole page is replaced.

[davenovo]

I see. That makes a lot of sense now. So renderAsync is rendering a portion of the page on the server and sending just that portion back to the browser, and the browser is replacing that section of the page only.

It seems to me that in general, if I have an async event (lets say for a button click) and I change properties of another component I would often have to call RenderAsync. Otherwise, how would the button click event know which other controls to re-render? Is that correct? i.e. if I use a button click to populate the items in a listbox or something