Mootools class protected handler? - javascript

As a flash developer, i try to have the same flexibility as AS3 provide with mootools.
I try to do a simple thing, create an event handler function that be protected.
I hate to write inline function so i writte something like this:
//CLASS DEFINITION AS USUAL
initializeEvent:function (){
if (this.options.slider) this.options.slider.addEvents ({
mousedown:function (e){
this.sliderDownHandler();
//throw an error because sliderDownHandler is set to protected
}
});
},
update:function (){
this.fireEvent('update');
}.protect(),
sliderDownHandler:function (e){
this.update();
console.log ('yeah it down')
}.protect();
Without the .protect() the handler work as expected.
It's possible to reach this goal with the .protected() ?
Many thank!

sure you can. you have a binding error, not a problem with protected
mousedown:function (e){
this.sliderDownHandler();
//throw an error because sliderDownHandler is set to protected
}
no. it is throwing an error because this will be bound to this.options.slider, which fired the event - which I guess is an element that has no sliderDownHandler method. the exception you get on a protected method is quite unique and is no mistaking it - try it by calling it externally on instance.sliderDownHandler()
re-write as one of these:
var self = this;
...
mousedown:function (e){
self.sliderDownHandler();
}
// or, bind the event to the class instance method...
mousedown: this.sliderDownloadHandler.bind(this)

Related

How to access function in click handler function?

I create this class using pure javascript:
var SelectFeature = /*#__PURE__*/(function (Select) {
function SelectFeature() {
Select.call(this, {
condition: ol.events.condition.click
});
}
this.on('select', function (e) {
//some logic
});
if (Select) SelectFeature.__proto__ = Select;
SelectFeature.prototype = Object.create(Select && Select.prototype);
SelectFeature.prototype.constructor = Select;
return SelectFeature;
}(ol.interaction.Select));
as you can see I pass ol.interaction.Select as a parameter to the class and using Select.call() the method in SelectFeature as a constructor.
Here is a description of ol.interaction.Select class.
The ol.interaction.The select class has a member who is called getFeatures().
I try to access this method when some DOM element is clicked(this block is inside SelectFeature class):
$("#popupFeat-closer").click(function () {
this.getFeatures();
});
The code above is fired when DOM element is clicked but, on this row:
this.getFeatures();
I get this error:
Uncaught TypeError: this.getFeatures is not a function
My question how can I access getFeatures function which is located in click event handler?
Like it is mention in the comments, you have a context problem. Almost every library or framework has a method to keep the context, in jQuery you can achieve this with proxy method. Something like this should work,
$("#popupFeat-closer").click($.proxy(function () {
this.getFeatures();
}), this);
I would say that is always good to use the library/framework way of solving these, but the "old" way works too,
var self = this;
$("#popupFeat-closer").click(function () {
self.getFeatures();
});
jQuery Docs - proxy

ActiveX Event and Javascript Callaback Reigstration

i've developed a c# Library, registered as COM component. Now i need to import the ActiveX created into a html page with Javascript to use the ActiveX function. All is fine except for Callback, probably i lack in knowledge in Javascript but i'm still not able to use properly Callback. I've searched many example but some are too much deep for my objective and other one can't clear the point, so here the question.
I will explain myself:
Thi is the Event in the ActiveX component
public delegate void ButtonEvent(object sender, SignEventArgs e);
public event ButtonEvent ButtonSignOk;
This is the snippet of my Javascript
try {
var Lib = new ActiveXObject("AGI.GraphometricLib");
Lib.Initializer();
Lib.addEventListener('ButtonSignOk', OnOkHandler, false);
} catch (ex) {
alert("Error: " + ex.message);
}
function OnOkHandler(arg1, arg2){
alert("Pressed!");
}
Obviously the addEventListener return an error.
Error: Object doesn't support property or method 'addEventListener'
How can i properly setup a javascript callback for that event defined in the ActiveX ?
Event handlers for ActiveX objects can be written with the following syntax:
function Lib::ButtonSignOk(sender, e) {
alert("Pressed!");
}
However, there is a catch. The nature of Javascript is that
function declarations are evaluated before anything else in the file
this function declaration is interpreted as adding an event handler to the object referred to by Lib, which doesn't exist at the beginning of the file.
The solution is to force the function declaration to be evaluated after the variable initialization, e.g.:
var Lib = new ActiveXObject("AGI.GraphometricLib");
Lib.Initializer();
(function() {
function Lib::ButtonSignOk(sender, e) {
alert('Pressed!');
}
})();
See here for a full writeup, and here for a library I've written that makes this a little easier.

How to Pass Custom Parameters to Event Handler

Just getting started with Dojo. I want to pass a couple of custom parameters to an event handler. In jQuery, you can do it like this:
$('#button').click({
customData: 'foo'
}, handlerFunction);
And customData can be accessed from handlerFunction like this:
function handlerFunction(event) {
console.log(event.data.customData);
}
I'm migrating a bit of jQuery code over to Dojo. How can I pass those parameters to the Dojo event handler?
Well, generaly, closures allow you to pass "hidden" parameters to a function:
function make_event_handler(customData){
return function(evt){
//customData can be used here
//just like any other normal variable
console.log(customData);
}
}
So when connecting an event in dojo:
dojo.connect(node, 'onclick', make_event_handler(17));
Another possibility that I like a lot is using dojo.partial / dojo.hitch to create the closures for you.
function event_handler(customData, evt){
///
}
dojo.connect(node, 'onclick', dojo.partial(event_handler, 17))
Note that all of these these required your event handlers to be created with passing the extra parameter(s) in mind. I don't know if you can do a more direct translation of the JQuery code since that would require extra massaging of the evt variable and I don't think dojo does that.
Also:
this.connect(other, "onClick", function(e) {
/* other is accesible here still */
});
or :
this.connect(other, "onClick", dojo.hitch(this, "handler", other);
and its event handler:
this.handler = function(other, evt){...}

Invoke a javascript function with VB.net through COM Interop

I have a VB.net class registered for COM interop which I'm instantiating within an HTML page using the following code:
<script type="text/javascript">
var MyClass = new ActiveXObject("Namespace.TestClass");
</script>
I can call methods on it just fine, but suppose I want to set a javascript function as a property, like so:
MyClass.TestFunction = function () { alert("It worked!"); }
How would I set my vb.net code up to be able to fire that function? This is how MSXML works in javascript for XMLHttpRequest objects, you can set
XHR.onreadystatechange = function () {}
I'm looking for a similar implementation in my class.
You have to expose a COM event, and assign the JavaScript method to that event. This way, when you invoke the event in your code, the JavaScript method will be called.
Example -
C# Code
[ComVisible(false)]
public delegate void OperationCompleted(string message); //No need to expose this delegate
public event OperationCompleted OnOperationCompleted;
if(OnOperationCompleted != null)
OnOperationCompleted("Hello World!");
JavaScript
comObject.OnOperationCompleted = function(message) { alert(message); }
Note: I have done this before. And I guess there was some COM related error. To resolve it I had to attach some attribute somewhere in the code (I don't remember it exactly right now). But you'll be able to figure it out or google it.
After trying for a while, we managed to figure out a solution that worked pretty well. Since we're setting a javascript function to the property, all the properties and methods on that function are made available to the VB.net, including the javascript standard methods, call and apply:
(function () { alert("Hello"); }).call();
The solution was to just invoke the call method in the VB.net code and it seems to work pretty well.

How do you attach to events on a ScriptObject in Silverlight?

The HtmlObject provides all the necessary functionality to register managed event handlers for script and DOM events, but what if the class you need to listen to doesn't exist as a DOM element, but a scripting variable (referenced via ScriptObject) instead?
A javascript object doesn't support the concept of attached events. However it may support the concept of a property holding a reference to function that if assigned will be called at a certain point.
I take you have such an object?
If so you use the ScriptObject SetProperty method using the name of the property that should hold a reference to a function and a delegate to Managed method matches the signature that the Javascript object will call.
Caveat the following is untested at this point but should put you on the right path.
//Javascript in web page.
var myObj = new Thing();
function Thing()
{
this.doStuff = function()
{
if (this.onstuff) this.onstuff("Hello World");
}
}
// C# code in a Silverlight app.
class SomeClass
{
private ScriptObject myObject;
public SomeClass(ScriptObject theObject)
{
myObject = theObject;
myObject.SetProperty("onstuff", (Action<string>)onstuff);
}
function void onstuff(string message)
{
//Do something with message
}
}
As stated by AnthonyWJones, Silverlight can't attached to JavaScript events. The right thing to do in this situation is to do the following:
Enable scripting access in Silverlight:
Mark the class with the
ScriptableType attribute, or mark
the specific methods with
ScriptableMember
Call
HtmlPage.RegisterScriptableObject in
the constructor.
Once everything is set up in the Silverlight code, here's what you do in JavaScript:
Obtain a reference to the JavaScript
object and register an event handler
Use document.getElementById to get
the Silverlight control
Call .Content.. in the
JavaScript event handler. For
example,
silverlight.Content.Page.UpdateText(text).
So basically, all event handling is performed in JavaScript, but the JavaScript event handlers can be used to call functions in Silverlight.

Categories

Resources