Custom Client Redrawing Panel
From Visual WebGui Wiki
 |
This article will have a few sections added to it soon, based on the following article type skeleton: NewCodeSampleTemplate |
Contents |
Overview
This article demonstrates how a Panel or a UserControl can be customized with client side code, so that it will not redraw (rerender) it's contents when size is changed from server-side code, which is the default behaviour for Visual WebGui panel controls.
This sample requires version 6.4.0 Release b or later.
The application
On startup, the application loads two standard Visual WebGui standard Panel controls on the lower part of the form. The application will start playing a video file, and by pressing either the Increase or Decrease buttons, server-side code will be used to change the size of the lower left panel. This size change will make the lower left panel rerender, which then starts playing the video from the beginning.
By selecting the Custom radio button, the custom panel control will be used and the lower left panel will simply resize without restarting the video.
By selecting the Custom 2 Layer radio button, the application will add a docked to fill custom panel on the lower part, and inside that panel it will add a docked to left and docked to fill custom panels. This is to demonstrate that in order to prevent the inner panels from rerendering, you will need a custom drawn panel as their container panel.
By selecting the UserControl radio button, the application will add a docked fill custom UserControl, inside of which it will add a docked fill custom panel and finally the innermost panels are also added as custom panel control. This is to demonstrate that in order to prevent rerendering the innermost panels in this scenario, you will need to build a custom drawn container, UserControl in this case. A custom drawn UserControl is also implemented and supplied with the sample. It's customization is exactly the same as for the custom Panel.
Details
The application uses a Visual WebGui Custom Panel Control, the Skin of which contains a JavaScript file with customized code to resize the panel client side only, thereby not rerendering the whole contents.In addition, some methods of the standard Panel control are overridden, to use our custom client resize function when only size is changing, otherwise using the default Panel functions. In addition, to support the same non-rerendering effects when the Panel acts as a container for other inner panels, we also override the SetPreferredSize method, and as overriding that method is only possible in version 6.4.0 Release b and newer, this sample required at least version 6.4.0 Release b.
Exactly the same customization is presented on a custom UserControl control, which is also supplied with the application, and should be used when a UserControl is to act as a container for controls that you need to prevent rerendering for.
Layouting details and notes
Using standard Panel or UserControl placed on a container that is not the form itself will, when updated, escalate the update (Layouting process) up through the container chain, all the way up to the form, which will then apply (possibly) changed Layouting on all the remaining controls on the form. This applying of Layout can in some cases be very undesirable, and as an example then applying Layout on an HtmlBox will make the HtmlBox reload it's contents.
Placing this same standard Panel or UserControl directly on the form, will not have the same effects.
Using the customized ClientPanel or ClientUserControl in this code sample, you can prevent this type of escalation of applying a Layout that only involves the Size or PreferedSize being changed. In order for that to be fully effective, you have to make sure that all containers in the path from the current control, up through the container chain, to the mainform itself, that all those containers do have this same customization. If the chain is "broken" by a container that does not have this customization, there will be a full applying of Layout on the upper controls and it's contained ones. As an example, say you have a form with a ClientPanel that contains a SplitContainer which contains a ClientPanel with some control A docked to Left and B docked to Fill. Updating for instance the size of A would trigger an applying of Layout that would excalate to full application by the lack of customization on the SplitContainer.
It should also be noted that the PreferedSize of a control is also considered part of it's layout, so although the actual size of the control is not being changed and only it's prefered size is, there is still a new layout that needs to be applied. This is actually the second customization that we made to the ClientPanel and ClientUserControl to not excalate the layout either, if it's prefered size is being changed.
Requirements
- This application works only on Visual WebGui v6.4.0 Release b or later versions.
- This application has a MediaPlayer contained in an ActiveXBox, which will require MS Internet Explorer on startup.
- The application can easily be changed (and already contains the code) for use on any browser, using an HtmlBox to demonstrate.
- The Video used in the samples is supplied as a seperate download and it should be unzipped to the Resources folder of your application. Any other video file can be used for that matter, but then you will have to update the source code accordingly.
