Controls for Web Desktop

[Alexei Konovalov]

Hi,

Our team is considering to build a web desktop that would resemble a classical desktop user interface. To get a better idea, here is one example of such interface https://demo.os-js.org/.

We would like to accomplish this by using Angular stack and Syncfusion libraries. One of the key components of such a user interface would be a resizable window that can load html/js/css content from a given url. We were thinking to leverage the Dialog component as it can be moved around and resized but could not find a way to make it load its content from a provided url.

Would you be able to advise on whether the Dialog control is the right choice (and can load its content from a url) and/or if we should consider other controls to help us implement a concept of the desktop?

Thanks,

Alexei

[Revanth Krishnan]

Hi Alexei, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Components with a resizable window that can load HTML/JS/CSS content from a given URL, the dialog can be moved around and resized but could not find a way to make it load its content from a provided URL. Would you be able to advise on whether the Dialog control is the right choice?” 

 

Yes, you can use the dialog control to resize and drag around the window, also your requirement to load the URL inside the dialog can be achieved by using the templates where the Iframe can be used to load the content from the URL. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<ejs-dialog #Dialog [showCloseIcon]=true [closeOnEscape]=false [allowDragging]=true [enableResize]='true' 

  [width]='width' (open)="dialogOpen()" (close)="dialogClose()"> 

  <ng-template #header> 

    <span class='title'>Dialog</span> 

    <span class='e-icons sf-icon-Maximize' id='max-btn' title='Maximize' (click)='maximize()'></span> 

    <span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize' (click)='minimize()'></span> 

  </ng-template> 

  <ng-template #content> 

    <iframe src=https://demo.os-js.org/ title="dialog demo" width="100%" height="100%"> 

    </iframe> 

  </ng-template> 

</ejs-dialog> 

Note: In this sample, the maximize and minimize of the dialog is achieved at the application level. 

 

Sample: https://stackblitz.com/edit/angular-d5dct3-nrpsz8?file=app.component.ts 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth