Write your own Client UI library-event mechanism (design ideas broadcast)

In the previous article we created a button control and displayed the control on the interface, and in this article we will add an event and a method to the control

One: How to bind an event issue

However, in the Wui Library, the event for a button binding is this, (this is not an event, it just calls a method that passes an I-sum delegate to the method)

question: for What would be the difference? It is really helpless (also hope that the park friends more comments) Answer: We give a Wui button binding event, the button may have been presented in the interface, it may not be present in the interface, if not yet rendered in the interface, it is also simple, I just want to be in the presentation (that is, the HTML code append to the browser), by the way with JS to bind him a click event just fine. But what if he is already present on the interface? Although I can also use JS binding event, but I do not know when to execute this section of JS, this section of code "BTN2." Click + = Btn2_click; " is written by my users and I don't know when they will use this piece of code. So, helpless under, can only use this method "btn." Bindclickevent (OnClick); " To let the user bind the event, so that I can execute that section of the JS code within the Bindclickevent method, after all, bindclickevent this method I wrote, I can control him arbitrarily, let him do what I want to do

Two: Bindclickevent method of button

First: This method receives a parameter of type action<button,eventargs>, action is actually a commission, if you do not know about this thing friends, you can see I wrote an article on the 30-minute LINQ tutorial generic delegate that subsection Second: We put this parameter in a private list container, why do we do it? A button can be bound to multiple click events, but also have order, so in order to save, after clicking on the event trigger, you can directly traverse the container, in order to execute the delegate in this container is good Third: Button Instance Isrendered property Peugeot only if the current control has been rendered on the interface Fourth: We Each adds a button to the interface, and the instance of the button is present in this dictionary. Lay the groundwork for later use of this button (for example, triggering his event) Fifth: We decide whether to bind the Click event to the instance of the button for the first time, and if so, do the following work, if not, do not have to do That is to say, no matter how many click events I bind to this button, the following work is done only once Sixth: We have the browser execute a JS script, after the JS script executes, the event is counted as binding success This script binds a click event to the DOM element of the button, which invokes the ButtonClick method in C # and passes a parameter to the method, which is the ID of the button

Three: The ButtonClick method of Rendercontext

First: In this series of the first article, we introduced the C # is how and JS communication, here is not much to do introduction, only say 2 points: 1, JS to call through the window.external C # method 2, to the browser objectforscripting set to an object, This object must be the second of the ComVisible: All the buttons, all the click events of the DOM element will flow into this method, which is a router that routes events to the user's delegate third: We take the button's instance from the dictionary (described in the previous section) based on the ID of the button. Then call the instance method click,

Four: Button class's Click Method

In this method, we iterate through all the "events" that are bound to the button instance and execute the events. Legacy issues: There is not much concern about the order of events being executed and will later improve

Five: The Addchild method of Panelmain

First: If a control has not yet been rendered to the interface, will the developer be allowed to bind the event to him? Of course it's allowed! So, when is the event bound for this type of usage? It is bound at the time of rendering! After we have added the control to the page, we do the work immediately, and the Tojs method of the button is to do the work, and then introduce this method second: only when a control is rendered to the interface will we put it in a static dictionary, This is the line of code: RENDERCONTEXT.CONTROLDIC.ADD (CTL. Id, CTL); third: For a container control, he has a children collection that is used to store his own child controls, which is the line of code: this. Children.add (CTL);

Six: Tojs Method of Button

In this method, we get the JS script of the binding event and give it back to the caller, there may be other scripts later, so the intellect uses the StringBuilder

Seven: Remove an event binding

First: There should be an event to be removed in the event List second: The event list is left with an event to be removed, and the button has been rendered to the interface; Execute JS's unbind script third: Remove the event from the event list

Eight: Remove all event bindings

First: Event record in event List second: This button has been rendered on the page, then execute the JS Unbind script third: Empty the Event log container

Modify a record2015-1-22: Completed part of the article, modified the code written yesterday

Write your own Client UI library-event mechanism (design ideas broadcast)