Resize after Load Form

[Theo]

Hello,

when my application starts panels and grids are shown and short time later  resized to the browserwindow. That does not look very nice.

Is it possible to make the whole form invisible until everything is resized to the  browser. I tried to start invisible and make it visible on different events ( Delphi and ExtJS ).

But i could not find a solution.

Thanks and Regards

Theo

[irigsoft]

Hi, try to add this 

https://www.geeksforgeeks.org/how-to-wait-resize-end-event-and-then-perform-an-action-using-javascript/

 

1. on Mainform.ClientEvents.ExtEvents:

function window.resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
  // clearTimeOut() resets the setTimeOut() timer
  // due to this the function in setTimeout() is 
  // fired after we are done resizing
  clearTimeout(timeOutFunctionId);
      
  // setTimeout returns the numeric ID which is used by
  // clearTimeOut to reset the timer
  timeOutFunctionId = setTimeout(workAfterResizeIsDone, 500);  //--> You need to play with time here (500ms)
}

2. on MainForm.Script:

// timeOutFunctionId stores a numeric ID which is 
// used by clearTimeOut to reset timer
var timeOutFunctionId;
    
// The function that we want to execute after 
// we are done resizing
function workAfterResizeIsDone() {
//   alert ('resized 0 !')
}

[Sherzod]

On 1/11/2025 at 7:44 PM, Theo said:

Is it possible to make the whole form invisible until everything is resized to the  browser. I tried to start invisible and make it visible on different events ( Delphi and ExtJS ).

Hello,

One possible solution:

1. UniServerModule.CustomCSS ->

body { 
  opacity: 0;
}

2. MainForm.ClientEvents.ExtEvents -> Ext.form.Panel[form] ->

function form.boxready(sender, width, height, eOpts)
{
    ajaxRequest(sender, "_ready", {});
}

3. MainForm.OnAjaxEvent ->

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_ready' then
  begin
    UniSession.AddJS(
      '   Ext.defer(function() {' +
      '         Ext.getBody().setStyle("transition", "opacity 0.5s ease-in-out");' +
      '         Ext.getBody().setStyle("opacity", "1");' +
      '   }, 1000);'
    );
  end
    
end;

 

[irigsoft]

4 hours ago, Sherzod said:

1. UniServerModule.CustomCSS ->

body { 
  opacity: 0;
}

Hi, Is it possible to add this to css on OnFormCreate? I want this to work for one form .

[Sherzod]

7 minutes ago, irigsoft said:

Hi, Is it possible to add this to css on OnFormCreate? I want this to work for one form .

Hello,

I think yes. Need to check. 

Sorry, can you create a simple testcase to simulate this case?

[irigsoft]

12 minutes ago, Sherzod said:

Hello,

I think yes. Need to check. 

Sorry, can you create a simple testcase to simulate this case?

I will explain

You set css body {opa.....} and this should be written in a css file.

Is it possible to set css style to a form when you create it?

like  Self.JSInterface.JSProperty('style',['display: none']);

[Sherzod]

Completely window or just form?

[irigsoft]

2 minutes ago, Sherzod said:

just form

 

[Sherzod]

Something like this?

[irigsoft]

Yes.

I thing this body {opacity: 0;} will hide all components (body) and stop rendering form. I need this while create components

[Sherzod]

3 minutes ago, irigsoft said:

Yes.

You can try this:

procedure TUniForm1.UniFormCreate(Sender: TObject);
begin
  JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);
end;

 

[irigsoft]

17 minutes ago, Sherzod said:

You can try this:

procedure TUniForm1.UniFormCreate(Sender: TObject);
begin
  JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);
end;

 

I get empty form when use it like this.

how will be if I want to window, not just form  ?

 

[Sherzod]

2 minutes ago, irigsoft said:

how will be if I want to window, not just form  ?

You can do it that way, but keep in mind that there will be a mask and the window's shadow will remain. Give it a try.

procedure TUniForm1.UniFormCreate(Sender: TObject);
begin
  JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSWindow);
end;

 

[irigsoft]

3 minutes ago, Sherzod said:

You can do it that way, but keep in mind that there will be a mask and the window's shadow will remain. Give it a try.

procedure TUniForm1.UniFormCreate(Sender: TObject);
begin
  JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSWindow);
end;

 

nop, now i get only background color of form

beffore: 

JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);

now:  

 JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSWindow);

[Sherzod]

?

[irigsoft]

I edit my post and apply picture on screen

[Sherzod]

6 minutes ago, irigsoft said:

As I said earlier, this is the mask, and the background is probably from the main form.

[irigsoft]

ok, I will use it like first code with css from file.

Thanks

[Sherzod]

1 minute ago, irigsoft said:

ok, I will use it like first code with css from file.

If I didn't fully understand your case correctly, let me know, and maybe we can figure something out. Thanks.

[irigsoft]

54 minutes ago, Sherzod said:

If I didn't fully understand your case correctly, let me know, and maybe we can figure something out. Thanks.

I replace adding body {opacity:0;} into css file with :

procedure UniFormCreate(Sender: TObject);
var
I     : Integer;
begin
//Self.JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);
UniSession.AddJS(
      '   Ext.defer(function() {' +
//      '         Ext.getBody().setStyle("transition", "opacity 0.5s ease-in-out");' +
      '         Ext.getBody().setStyle("opacity", "0");' +
      '   }, 0);'
    );

[Frederick]

7 hours ago, Sherzod said:

One possible solution:

1. UniServerModule.CustomCSS ->

If I have a login form defined, this form cannot be seen.

How do I get the code to only work in the mainform after the login form has closed?

[irigsoft]

3 minutes ago, Frederick said:

If I have a login form defined, this form cannot be seen.

How do I get the code to only work in the mainform after the login form has closed?

I need exact the same.

this is from @Sherzod

You can try this:

procedure TUniForm1.UniFormCreate(Sender: TObject);
begin
  JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);
end;

but problems came up and I added this without adding code to the css:

procedure UniFormCreate(Sender: TObject);
var
I     : Integer;
begin
//Self.JSInterface.JSConfig('style', ['opacity: 0'], Self.WebForm.JSForm);
UniSession.AddJS(
      '   Ext.defer(function() {' +
//      '         Ext.getBody().setStyle("transition", "opacity 0.5s ease-in-out");' +
      '         Ext.getBody().setStyle("opacity", "0");' +
      '   }, 0);'
    );

 

[Frederick]

43 minutes ago, irigsoft said:

UniSession.AddJS(
      '   Ext.defer(function() {' +
//      '         Ext.getBody().setStyle("transition", "opacity 0.5s ease-in-out");' +
      '         Ext.getBody().setStyle("opacity", "0");' +
      '   }, 0);'
    );

I added the above code in the FormCreate event of the MainForm and all I see is the background colour of the main form.

Am I missing something?

[irigsoft]

1 minute ago, Frederick said:

I added the above code in the FormCreate event of the MainForm and all I see is the background colour of the main form.

Am I missing something?

no, I use this when show some form of my App.

[irigsoft]

3 minutes ago, Frederick said:

I added the above code in the FormCreate event of the MainForm and all I see is the background colour of the main form.

Am I missing something?

but you need, and this code to

2. MainForm.ClientEvents.ExtEvents -> Ext.form.Panel[form] ->

function form.boxready(sender, width, height, eOpts)
{
    ajaxRequest(sender, "_ready", {});
}

3. MainForm.OnAjaxEvent ->

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_ready' then
  begin
    UniSession.AddJS(
      '   Ext.defer(function() {' +
      '         Ext.getBody().setStyle("transition", "opacity 0.5s ease-in-out");' +
      '         Ext.getBody().setStyle("opacity", "1");' +
      '   }, 1000);'
    );
  end
    
end;