Taskbar like in windows

[Morten Bruhn]

Hi Guys,

I was wondering if any of you have tried to create a "OS" like webpage, with a taskbar showing your open windows??

I am trying to create a smalle web-os for a cms like system, and the "start" button is ready, and the windows open as I want them to - But it gets cluttered - so I was wondering if the windows like taskbar was an option??

Thank you in advance :-)

// Morten

[Georgi Tunev]

Hello Morten,

We did something similar in our RadWindow default demo. For convenience I attached a small sample that shows how to extend it in order to support multiple opened windows - you could use the code as a base and extend it further to fit your requirements.


All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Morten Bruhn]

Hi Georgi,

Thank you, I looked a lot on that example, but decided to use:

RadMenu, RadToolbar and of course RadWindow!

The RadMenu, is the start-button

The toolbar is the taskbar, from wich i create and remove buttons when I open and close a window.

It is actually working great

Everything is clientside right now, but that is just a small detail... ;-)

Thank you again

// Morten

[Georgi Tunev]

Hi Morten,

I am glad that you managed to implement the desired behavior. If you want, you could share your approach with the rest of our community in the Code Library section - I will be happy to give you some Telerik points in exchange ;)




All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tom]

Was this code ever shared?  I am trying to do something similar.

[Georgi Tunev]

Hi Tom,

I'm afraid Morten did not published such code library, but I suggest to examine our MDI demo that uses the same controls :)

Greetings,
Georgi Tunev
the Telerik team

[Tom]

Thanks for the code.  What I am actually interested in doing is takeing this example http://demos.telerik.com/aspnet-ajax/window/examples/radwindowandmdi/defaultcs.aspx to a point where it ressizes itself based on the size of the viewable area of the webpage.   Can you help me with the resize logic?

Thanks in advance.

[Tom]

Thanks George,

I have been working with this example.  Is there a way to make it fit to the size of the viewable screen and resize with when the screen changes?

Thanks
Tom

[Georgi Tunev]

Hi Tom,

We've already talked in the support ticket, but I wanted to post my reply here, as it might be useful for other members of our community.

---

Basically, you could use this demo in full screen, but the main problem here is that currently you will not be able to restrict the RadWindows in the boundaries of the viewport.
The demo is using an outer DIV that shows the monitor and inside it - another one that is used as RestrictionZone for the RadWindows. In that inner DIV, we have the RadMenu and RadTabStrip. RadMenu. Now, RadMenu supports width in percents. RadTabStrip, also can be used in such scenario, but RadWindow's RestrictionZone can be set one time only and it works with pixels. What will happen is that when you resize the browser, the menu and the tabstrip will be shown properly, but the windows will still be using the fixed values set as size to the RestrictionZone which will lead to poor experience.

We are currently investigating a possible way to rework the restriction zone logic so it can be set dynamically. This task however requires a lot of work and time so it is in our ToDo list for the Q2 release in the summer.

---

All the best,
Georgi Tunev
the Telerik team

[Tom]

Was curious if a way to support this was ever found?

[Marin Bratanov]

Hi Tom,

There have been some improvements on the RestrictionZone functionality after the Q2 2011 release, yet not all scenarios are possible. I still advise that you use static restriction zones in order to avoid the situation where the zone is resized so that a RadWIndow is left out of it. You can download the latest build (current official Q2 2011 SP1 with Q3 coming shortly) and test the functionality to see if it fits your needs. Some of the new functionality is that you can set the restriction zone via JavaScript now.

If you need the particular scenario where the RadWindow should always stay in the viewport I advise that you simply set the KeepInScreenBounds property to true - it ensures that at least the top left corner of the RadWindow is in the viewport (if the RadWindow is larger than the viewport) and returns it to an entirely visible position if dragged outside by the user.


Kind regards,
Marin
the Telerik team

[Tom]

Any changes made in the Q3 release to help with this issue?

[Marin Bratanov]

Hi Tom,

The restriction zone functionality was improved in the summer (after the Q2 2011 release) and after the service pack (Q2 2011 SP1) there isn't further development on the matter. If there was it would have been present in the release notes. Also, a modal RadWindow in a restriction zone would stay centered if the browser is resized, yet the limitation that the zone needs explicit dimensions in pixels still remains. You can try it with dynamic width (i.e. in %) and with the KeepInScreenBounds property being set to true and the beforementioned improvements will likely allow you to have the desired behavior. The situation with the height is more complex, as height in percent is inherently difficult in HTML - e.g. it needs all parent elements to have some explicit dimensions in order to work properly. Thus, I would still advise against this approach, yet the best way to see if your requirement is possible is to simply test it in a small page with the latest dlls.


Kind regards,
Marin
the Telerik team

[Oscar]

Hi there, Sorry about my English. I had implement the demo and did work just great but when I did an implementation of an ajaxrequest with ajaxmanager, the tabStrip element fails when reach the repaint command. The error says "this.get_element is null". Can you please tell why is this or how can I do the repaint after de AjaxRequest.
 
thanks in Advance.

[Oscar]

Sorry, the code is like follow:

on client side:    the function is called from another one tha just did an ajaxrequest to get the URL of the new windo to be oppened

function

 

 

Win(pUrl, pTitle, pName) {

var oWnd = radopen(pUrl, pName);

oWnd.center();

oWnd.set_title(pTitle);

oWnd.Argument[95] =

 

"P"; 

 

tabStrip.trackChanges();

var tab = new Telerik.Web.UI.RadTab();

 

 

tab.set_text(pName);

 

oWnd.correspondingTab = tab;

 

tabStrip.get_tabs().add(tab);

 

 

tabStrip.repaint();----->here the error

tab.correspondingWnd = oWnd;

tab.set_imageUrl(pUrl);

tabStrip.commitChanges();

 

//Select this tab

tab.select();

}

[Marin Bratanov]

Hello Oscar,

I am not sure what the exact change you made is, nor can I be certain which controls you include in the AJAX request, but what I suppose is happening is that the function is called too early, especially if you are disposing the TabStrip. Please examine this article on properly executing a JS function from the server and this one for further information on the Sys.Application.Load event.

What I would generally suggest is that you do not dispose the RadTabStrip and RadWindowManager in your request. I am attaching a simple page that works properly on my end: http://screencast.com/t/J5hz0sYi1. Note how I have modified the openNewWindow() function - it does not need the RadMenu, it takes the arguments you have defined so that it can be reused both from the code-behind and from pure JavaScript. Please use this as basis for implementing this functionality after examining my comments in the code carefully.


Kind regards,
Marin
the Telerik team

[Oscar]

Thanks for the answer, I found the issue because your help. My TabStrip is inside a div that is display:none and trough an ajaxrequest change the state to display:block and the changes are update by the ajaxmanager. If i take off the tabstrip from the div it works fine. I need to put into the div this tabstrip so can you please tell me some idea about it??.
Thanks in advance.

[Marin Bratanov]

Hi Oscar,

My best suggestion is to remove the div that hides the TabStrip. If there are no windows opened it will not have any tabs so it will be invisible. If there are windows and the tabstrip is still hidden this would decrease usability.

If you still want to keep using it that way I can suggest adding a small timeout when calling the repaint() method, so that the browser has had time to recalculate the display of the rest of the elements:
setTimeout(function ()
{
     the rest of the functionality of the openNewWindow() function
}, 0);


All the best,
Marin
the Telerik team

[Oscar]

Hi Marin, thanks a Lot. look a had implement what you suggest and you are right it works

setTimeout(

 

function () {

tabStrip.trackChanges();

 

var tabNe = new Telerik.Web.UI.RadTab();

tabNe.set_text(pName);

oWnd.correspondingTab = tabNe;

tabStrip.get_tabs().add(tabNe);

tabStrip.repaint();

tabNe.correspondingWnd = oWnd;

 

//tabNe.set_imageUrl(pUrl);

tabStrip.commitChanges();

tabNe.select();

}, 0);

But.......When a try to get a window Minimized, the tabStrip selcted tab dont have the reference to de corresponding Window just the last one a Minimize :S Im doing several test to solve it.

Thanks

[Marin Bratanov]

Hi Oscar,

The code in the demo opens a new RadWindow for each tab:

var oWnd = radopen(itemUrl, null);

More information on how this works is available in this help article.

In the code we have been working on you always pass a static name for the RadWindow, thus you do not create a new one for each tab:

var oWnd = radopen(pUrl, pName);

You should either provide a new RadWindow, or check if it already has a corresponding tab - if it does - avoid creating a new tab.

A main issue here is also that you dispose the TabStrip, so the dynamic JavaScrtipt fields (tab.correspondingWnd) are destroyed as well. If you do not dispose it (as I advised in my previous post) things will work without many further modifications. Otherwise I advise that you find a different way to keep this reference, for example a global JS array, but this is a rather uncertain way.


What I advise is that your review your entire logic thoroughly and see where the omissions are and how it can be improved (I mainly advise that you use AJAX only for a button to fetch the URL from the server and leave the TabStrip on the page).


Greetings,
Marin
the Telerik team