Custom Controls - Custom control to retrieve information from client side

From Visual WebGui Wiki

Jump to: navigation, search
 This article will have a few sections added to it soon, based on the following article type skeleton: NewCodeSampleTemplate


Contents

Overview

This codesample implements a Custom Control to retrieve various information from the client and returning it to the server-side by firing custom events.

The information retrieved from the client side is not the point of this article (except maybe for the scroller status), but rather how it is done and some trick used to make the control more usable, like the "callback dictionary" which is used by the control to be able to have more than one "instance" of each event type handled correctly and seperately, if the user so chooses. See The demo application section for more info.

Note: This control will work only for version 6.4 and later versions of Visual WebGui as it is implemented with the new Controls Designer.

Samples of use

VB.NET Code 

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClientRetrieve.Click
    Dim CIR As ClientInfoRetriever = New ClientInfoRetriever
    CIR.GetClientDate(AddressOf callbackGetClientDate)
    CIR.GetClientScreenHeight(AddressOf callbackGetClientScreenHeight)
    CIR.GetClientScreenWidth(AddressOf callbackGetClientScreenWidth)
    CIR.GetClientScrollerStatus(AddressOf callbackTextScroll, Me.ID, txtTextCheck.ID)
    CIR.GetClientScrollerStatus(AddressOf callbackTextScroll2, Me.ID, txtTextCheck2.ID)
    CIR.GetClientScrollerStatus(AddressOf callbackPanelScroll, Me.ID, pnlPanelCheck.ID)
End Sub

C# Code 

private void Button1_Click(object sender, System.EventArgs e)
{
    ClientInfoRetriever CIR = new ClientInfoRetriever();
    CIR.GetClientDate(this.callbackGetClientDate);
    CIR.GetClientScreenHeight(this.callbackGetClientScreenHeight);
    CIR.GetClientScreenWidth(this.callbackGetClientScreenWidth);
    CIR.GetClientScrollerStatus(this.callbackTextScroll, this.ID, txtTextCheck.ID);
    CIR.GetClientScrollerStatus(this.callbackTextScroll2, this.ID, txtTextCheck2.ID);
    CIR.GetClientScrollerStatus(this.callbackPanelScroll, this.ID, pnlPanelCheck.ID);
}

The demo application

The control is implemented as a simple custom control using the Theme and Controls designer in version 6.4 of Visual WebGui, containing only JavaScript resources. More information can be found in the Custom Controls article.

Control scrollability

One of the features retrieved from the client in this demo control is information about Control's scrollability. Supplying the objControl.Id of the control, as well as the objForm.Id of it's containing form, the client-side JavaScript function will tell you if the control has active scrollbar or not. The information returned in this demo is in string format for readability reasons, but can easily be changed to return whatever format needed.

Note however that the scrollability will tell you if the control has active scrollbar(s) or not, not necessarily if the scrollbars are drawn on the control or not.

Callback handling

When JavaScript events are fired to the server-side, the entry point will be FireEvent override of our custom control. From there, we need to pass the information to the calling form, firstly notifying the form that the event has fired, and second, return the information retrieved from the client to the form also.

The custom control implements that by using callback functions, that need to be passed as parameter to the corresponding public function, when client-side information is to be retrieved.

Callback dictionary

If two "instances" of the same type of event is fired to server-side at the same time (like when you call the same public function of the control twice during a single ASP.NET request), the control would have no way of distinguising between the two events, and would either call the same callback function twice, or none at all, depending on the logic used.

To support this type of usage, the control implements a callback dictionary. For each invocation of a JavaScript call (which will later fire back as an event), a unique Id is allocated and passed on to the JavaScript function, as well as storing the unique Id and it's callback function in a dictionary. When the event fires to the server-side (entering the FireEvent method), one of the properties of the event is this unique Id. The Id is used to perform a lookup in the embedded dictionary to retrieve the callback function, which is then called.

The code download

Tips and Tricks

  • As always, remember to register your control in web.config (or Visual WebGui integration tabs) to make it's resources accessible.
  • Working with the Control's Skin, remember to set the properties for each resource (CompilerActions, Presentation, PresentationEngine and PresentationRole).

Limitations and workarounds

See also

Rererences

Articles

Retrieved from "http://wiki.visualwebgui.com/pages/index.php/Custom_Controls_-_Custom_control_to_retrieve_information_from_client_side"
Personal tools