Concepts
Controls & Components
Events
Event routing concepts.
Event routing is a cornerstone of the Wisej architecture. Wisej client-side JavaScript widgets can fire events on the server and server-side components can fire and handle events synchronously or asynchronously (out-of-bound) using the .NET standard events system.
Event Handling
Handling events is as simple as attaching a listener to the event of overriding the equivalent OnEvent method. There is really nothing else to it.
C#
VB.NET
1
this.button1.Click += this.Button1_Click;
2
...
3
​
4
void Button1_Click(object sender, EventArgs e) {
5
​
6
this.button1.Text = "Clicked!";
7
​
8
}
Copied!
1
AddHandler Me.button1.Click, AddressOf Me.Button1_Click
2
...
3
​
4
Private Sub Button1_Click(sender As Object, e As EventArgs)
5
​
6
Me.button1.Text = "Clicked!"
7
8
End Sub
Copied!
Another way to handle events in derived classes is to simply override the OnEvent methods and process the event before or after it's fired.
C#
VB.NET
1
class MyButton : Wisej.Web.Button {
2
​
3
protected override void OnMouseDown(MouseEventArgs e) {
4
​
5
base.OnMouseDown(e);
6
7
this.Text = "The mouse is at " + e.Location;
8
​
9
}
Copied!
1
Class MyButton
2
Inherits Wisej.Web.Button
3
​
4
Protected Overrides Sub OnMouseDown(ByVal e As MouseEventArgs)
5
​
6
MyBase.OnMouseDown(e)
7
8
Me.Text = "The mouse is at " + e.Location
9
​
10
End Sub
Copied!
Note that Wisej is able to inform the server of the mouse location (relative to the browser page) as well as the keyboard state, mouse buttons, and wheel delta.
Touch events from mobile devices are all translated to the appropriate mouse events.
Role Attribute
All pointer events on all components carry the Role property. This property contains the value of the "role" attribute of the specific HTML element that was clicked by the user.
In most cases it is just an empty string. However, you can use this feature to "deep click" inside a component and detect where the user clicked. For example, if you place HTML content in a DataGridViewCell like this:
"<span>Hello</span><img src="edit.png" role="edit"/>"
You can handle the CellClick event (or any other cell pointer event) and check whether the value of the e.Role property is "edit". This works for labels, buttons, ListView, and any component in Wisej that can display HTML content.
Lazy Events
There is a group of "critical" events that are not fired back to the server unless the application has specifically attached to the handler. These are events that would typically fire multiple times.
- MouseMove
- MouseEnter
- MouseHover
- MouseLeave
- MouseWheel
- KeyDown
- KeyPress
- KeyUp
- QueryContinueDrag
- DragDrop
- DragEnter
- DragOver
- DragLeave
- Swipe
- Pinch
- Rotate
- Track
- TouchStart
- TouchEnd
- TouchCancel
- Scroll
- ModifiedChanged
- LoadCompleted
- ItemMouseHover
- CellMouseEnter
- CellMouseLeave
- CellMouseMove
Once a handler is attached, you may also override the OnEvent method in a derived class.
Out-of-Bound Events
Out-of-bound events are events fired outside of a browser request (user action). For example, an event fired by a thread monitoring the stock market is an out-of-bound event since the thread is running in the background and is unaware of any browser activity.
The client may also fire unattended events back to the server. However, these are in-bound events since the server is processing a request from the browser and has a valid session to work with.
When processing out-of-bound events you are processing a background task, which is a thread that has absolutely no knowledge of the session that is handling the event. Handling out-of-bound events - something close to impossible with other systems - is easy with Wisej, all you need to do is wrap the handling code in Application.RunInContext(component, ()=>{ code }) or Application.Update(component, ()=>{ code }).
The only difference between RunInContext and Update is that the Update call pushes any changes to the visual components back to the client.
C#
VB.NET
1
public class Window1 : Wisej.Web.Form {
2
​
3
​
4
// When this window is loaded, we connect to a background task (thread) monitoring the stock market.
5
// The thread was started independently and the static reference saved in MyApp.Program.
6
​
7
protected override void OnLoad(EventArgs e) {
8
​
9
Program.StockMarketMonitor.PriceDrop += this.StockMarketMonitor_PriceDrop;
10
​
11
base.OnLoad(e);
12
}
13
​
14
// When we receive a PriceDrop event, display an alert.
15
​
16
void StockMarketMonitor_PriceDrop(object sender, StockMarketMonitorEventArgs e) {
17
​
18
// Restore the context using this component and run in context using Update since
19
// we want to show the alert box immediately on the user's browser.
20
​
21
Application.Update(this, ()=>{
22
​
23
AlertBox.Show(quot;The price of {e.Symbol} dropped below {e.Limit}", MessageBoxIcon.Warning);
24
​
25
// Note: We can also update the user's browser several times using: Application.Update(component) at any time.
26
​
27
});
28
}
29
​
30
}
Copied!
1
Class Window1 Inherits Wisej.Web.Form
2
​
3
​
4
' When this window is loaded, we connect to a background task (thread) monitoring the stock market.'
5
' The thread was started independently and the static reference saved in MyApp.Program.'
6
​
7
Protected Overrides Sub OnLoad(e As EventArgs)
8
​
9
AddHandler Program.StockMarketMonitor.PriceDrop, AddressOf Me.StockMarketMonitor_PriceDrop
10
​
11
MyBase.OnLoad(e)
12
13
End Sub
14
​
15
' When we receive a PriceDrop event, display an alert.'
16
​
17
Private Sub StockMarketMonitor_PriceDrop(sender As Object, e As StockMarketMonitorEventArgs)
18
​
19
' Restore the context using this component and run in context using Update since'
20
' we want to show the alert box immediately on the user browser.'
21
​
22
Application.Update(this, Sub()
23
​
24
AlertBox.Show(quot;The price of {e.Symbol} dropped below {e.Limit}", MessageBoxIcon.Warning)
25
' Note: We can also update the user browser several times using: Application.Update(component) at any time.'
26
27
End Sub)
28
29
End Sub
30
​
31
End Class
Copied!
Once you are back in context, you can handle any component in the user session: update text, hide, show, move. There are no limits to what you can do using Wisej Real-Time features.
JavaScript Events
When creating new Wisej components and widgets, or integrating existing jQuery or other third-party JavaScript widgets, you will most likely need to fire an event from JavaScript running in the browser back to the server and handle it as any other .NET event.
This is how you fire the event from a Wisej widget:
JavaScript
1
/**
2
* Assuming that this code is being processed as part of a Wisej widget, fire a simple event
3
* notifying the server side of this widget (the corresponding control) that the label was clicked.
4
*/
5
this.fireEvent("labelClicked");
6
​
7
/**
8
* We can also send data back to the server together with an event.
9
* For example, say we want to notify the server component that a specific label was clicked.
10
*/
11
this.fireDataEvent("labelClicked", label.getName());
12
​
13
/**
14
* And we can send complex data structures when we need to send back multiple values.
15
*/
16
this.fireDataEvent("labelClicked", {name: label.getName(), x:e.getDocumentX(), y:e.getDocumentY()});
17
​
18
/**
19
* We can even send back the reference to a widget. Wisej will convert it to an actual control on
20
* the server side!
21
*
22
* Assuming that label is a Wisej widget:
23
*/
24
this.fireDataEvent("labelClicked", {label: label, name: label.getName(), x:e.getDocumentX(), y:e.getDocumentY()});
Copied!
The example above shows how to fire JavaScript events back to the server.
The example below shows how to register a Wisej control to receive custom events and how to handle the data transported with the event.
C#
VB.NET
1
// Override OnWebRender() to register the additional custom events:
2
protected override voide OnWebRender(dynamic config) {
3
​
4
base.OnWebRender((object)config);
5
​
6
// add the new events to the list of wired events.
7
config.wiredEvents.Add("labelClicked");
8
​
9
// if the event "labelClicked" carried data with it, we need to declare the name of the data member like this:
10
config.wiredEvents.Add("labelClicked(Name)");
11
​
12
// the name in parethesis cna be anything. the example above used Name since the event was simply firing back the name.
13
// the example below uses "Data" as a more appropriate name when the event carries complex data structures:
14
config.wiredEvents.Add("labelClicked(Data)");
15
​
16
}
17
​
18
// To handle the event, override OnWebEvent():
19
protected override void OnWebEvent(WisejEventArgs e) {
20
​
21
switch (e.Type) {
22
​
23
case "labelClicked":
24
// the data caming in from the client is accessible using e.Parameters.{Name}.
25
​
26
// in the case of the event sending back simply the name: this.fireDataEvent("labelClick", label.getName());
27
AlertBox.Show(e.Parameters.Name);
28
​
29
// in the case of the event sending back a data strucure:
30
AlertBox.Show("Label Clicked at X:" + e.Parameters.Data.x + " Y: " + e.Parameters.Data.y);
31
​
32
break;
33
​
34
default:
35
base.OnWebEvent(e);
36
break;
37
}
38
​
39
}
Copied!
1
​
Copied!
When integrating third-party widgets, you can handle and process their events in JavaScript and send back to Wisej a custom event of any type. All you need to do is to handle their events as indicated in the third-party widget's documentation and then fire it to Wisej.
Last modified 2mo ago
Export as PDF
Copy link