How to change TunimPanel Background Image at Runtime?

[newsanti]

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';  // work OK.
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('afterrender',
  oJS.JSFunction('sender',
  'document.body.style.background=''url("/files/mainlogo2.jpg");repeat scroll 0% 0%'''));  //Mainlogo2.jpg not shown.
end;

 

FormBackground.zip

[Sherzod]

Hello,

I don't know where you got it from:

43 minutes ago, newsanti said:

oJS.JSAddListener('afterrender',
  oJS.JSFunction('sender',
  'document.body.style.background=''url("/files/mainlogo2.jpg");repeat scroll 0% 0%'''));  //Mainlogo2.jpg not shown.

 

In your case this will be correct:

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg) repeat scroll 0% 0%'')'));
end;

 

[newsanti]

19 minutes ago, Sherzod said:

Hello,

I don't know where you got it from:

 

In your case this will be correct:

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg) repeat scroll 0% 0%'')'));
end;

 

how to set cover of image with setstyle?
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg)'')'));

  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background-size'', ''cover'')'));

Can coding in single command?
 

[Sherzod]

1 hour ago, newsanti said:

how to set cover of image with setstyle?

Sorry, what do you mean?

[newsanti]

11 minutes ago, Sherzod said:

Sorry, what do you mean?

'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg)  no-repeat 100% 100%'')')); Can do like this?

[Sherzod]

3 minutes ago, newsanti said:

Can do like this?

What exactly?

[newsanti]

1 minute ago, Sherzod said:

What exactly?

  if oPanelX is TUniCustomContainerPanel then
     begin
        var oPanel:= TUniCustomContainerPanel(oPanelX);
        if Assigned(oPanel) then
          begin
            var oJS:= oPanel.JSInterface;
            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background'', ''url('+S+')'')'));

            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background-repeat'', ''no-repeat'')'));

            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background-size'', ''100% 100%'')'));
          end;
     end;
I try setting in one command.

[Sherzod]

13 minutes ago, newsanti said:

I try setting in one command.

Well,

2 hours ago, Sherzod said:

oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg) repeat scroll 0% 0%'')'));

This is it in one line of code!