Widget
Provides a generic widget that can use most third party javascript widgets.
The Wisej Widget control is the key to integrating the rest of the JavaScript world into a Wisej application. The Widget control allows developers to load custom JavaScript and CSS libraries into their Wisej application at runtime to utilize and containerize custom controls.
The custom-integrated controls are able to be configured and populated from server-side resources and fire server-side events.
Delegating communication between a client and server for individual controls on a webpage can be a cumbersome task. Wisej makes this easy by providing the infrastructure to communicate the messages with a few calls.
When working with JavaScript widgets, everything is handled on the client. If you want to send a message to the server you can do so by attaching to the client-side widget event and calling fireWidgetEvent:
JavaScript
// Processes the client-side widget initialization.
this.init = function(options)
{
// retain a reference to 'this' context.
var me = this;
options.onItemTap = function itemTap(event, inst) {
me.fireWidgetEvent("itemTap", event.target.getAttribute("data-text"))
}
// simple integration of the MobiScroll JavaScript library.
mobiscroll.optionlist("#demo", options);
}
When debugging the Widget, make sure to check the Browser console for important messages.
After the Wisej application receives the event data, it delegates it to the corresponding server-side control's WidgetEvent handler, if one exists.
C#
// Processes events from the client-side widget.
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
switch (e.Type)
{
case "itemTap":
AlertBox.Show(e.Data);
break;
case "scroll":
AlertBox.Show($"Scrolled: {e.Data.scrollValue}");
break;
}
}
Sending a message to the client-side widget is easy using the Instance dynamic member.
Create a function in your client-side Widget's InitScript:
JavaScript
// Adds two numbers together.
this.addNumbers = function(num1, num2)
{
return num1 + num2;
}
Then you, can call this method from the server-side Widget instance:
C#
var result = await this.widget1.CallAsync("addNumbers", 1, 2);
or
this.widget1.Eval($"this.addNumbers({1},{2});",
(result) => { AlertBox.Show(result.ToString()); });
Item | Description |
|---|---|
Class name | "wisej.web.Widget" |
Theme appearance | |
Source Code |
Last modified 9mo ago