Add a StatusBar to a Desktop with TaskBar.

[itg-assistant]

Felix CHAN asked 2017-02-24 03:41:06 UTC

Hi,

When I add a StatusBar into the Desktop, the StatusBar is place on top of the TaskBar, which look not very good (Refer to the attached JPG).

A suggestion is to move the StatusBar to the bottom.

Regards,

Felix CHAN

[itg-assistant]

Luca answered 2017-02-24 15:31:16 UTC

We can't do that using the component's Docking and Anchoring layout engines. Docking and Anchoring is based on the DisplayRectangle and in the Desktop control it's the workspace area, otherwise controls would dock over the taskbar, while we want the taskbar to "reduce" the workspace area.

However, you can do this by altering the client side layout - and I'd like to explain this code a bit (OT: we are working on a blog where all this technical digressions can be published...).

Wisej's controls have a double life: the server side component and the client side widget. The server side component manipulates the client side widget as a whole and manages the layout between the components. The client side widget manages its internal layout and child widgets entirely on the client side.

So... The Desktop component on the server knows only about the desktop widget and certain metrics, like the non-client area, borders, theme padding, colors, etc. Doesn't know anything about the internal layout of the desktop widget and its child widgets, in this case the child widgets are "workspace" and "taskbar".

The "taskbar" child widget is positioned at the bottom because it has a layout property named "edge" set to "south". The parent desktop widget uses the "Dock" layout engine.

In your code, if you set the Dock property of the status bar to None and add the code below on startup, the status bar will dock below the taskbar.

this.statusBar1.Eval(
@"this.addListener('appear', function(){
this.resetUserBounds();
App.Desktop._addBefore(this, App.Desktop.getChildControl('taskbar'), {top:null, left: null, edge:'south'});
});"
);

The code above executes on the client when the status bar "appears", which means that the corresponding html element is created and made visible, it removes the location and size set by the server, it changes the layout parent and docks it under the taskbar child widget.

HTH

Best,

Luca

[itg-assistant]

Felix CHAN answered 2017-02-28 06:45:38 UTC

Hi Luca,

Thanks a lot. The sample code work as expected.

However, when I reload the browser (press F5, for example) the StatusBar will return to it original location (when it is placed in the designer screen in Visual Studio). And therefore the TaskBar will be "overlay" on top of the StatusBar.

Secondly, I have to put the sample code in a IF block to prevent it from being run in the designer screen of Visual Studio. Otherwise, many pop-up windows will be shown saying javascript error.

if (!this.DesignerMode)
{
      this.statusBar1.Eval( . . . . .
}

Thanks and regards,

Felix CHAN

[itg-assistant]

Luca answered 2017-02-28 14:50:59 UTC

Hello Felix,

It depends when the Eval with the javascript is called. If you place it in OnLoad it will be executed only once when the control is created. On refresh the controls are not re-created on the server, only on the client, therefore the Load event is not fired again, which is correct.

If you place the Eval code block like this, it will be executed when the control is created the first time or refreshed. You can place it either in the container or a subclass of the StatusBar:

protected override void Update()
{
   IWisejControl me = this;
   if (me.IsNew && !me.DesignMode)
   {
     // this is executed when the control is marked New which means that the widget is being recreated.
   }
   base.Update();
}

/Luca