JS callback to Vaadin component - vaadin

I have a JS component (SigPlot) that I need to read click values from. I have instantiated SigPlot inside of a VerticalLayout, where I also instantiate a DIV to pass to the SigPlot constructor. I am not sure if this is a valid way, but it works.
Now I need to read CLICKS but I am having troubles finding correct way to do this. Can someone pass some words of wisdom?
In my constructor for my VIEW, it use addAttachListener to start my JS code using.
div.addAttachListener(e->{
e.getUI().getPage().executeJs("myInit($0)",div);
});
How can I register a click listener to this?
Regards

As long as it's just a regular DOM event listener, then something like this should work:
div.getElement().addEventListener("click", event -> Notification.show("Clicked"));
If you need to do something on a more granular level, then your might want to expose callbacks as #ClientCallable and then use executeJs to run some short JavaScript snippets to set up listeners that delegate to those methods.

Related

Is it possible to do a "a href" in corona using lua

I am new to Corona and Lua.
is it possible to do something like an "a href" in Lua? I am having a button and I need it to link it to other page but I can't seem to find a way to do it. I am not trying to infuse HTML code to Lua. I just need a way to perform a function like this(in Lua language). I have googled and even look at the manual of Lua and corona docs but still unable to find anything similar to it.
To people who know this, please advice. Thankss
Clicking a button will cause an event. You can implement a function that handles this event and for example shows another page. Please read the Corona manual and do some basic tutorials. All information you need is there.
From: https://docs.coronalabs.com/api/library/widget/newButton.html
onPress (optional) Listener. An optional function to be called when
the button is pressed. The callback function does not require testing
for event.phase since it only honors "began".
https://docs.coronalabs.com/api/type/Listener.html
Events are dispatched to listeners. Event listeners can be either
functions or table objects.
In both cases, when an event occurs, the listener will be invoked and
be supplied with a table representing the event. All events have a
name property that corresponds to the name you use to register the
event.
For more information, see the Basic Interactivity and Event Detection
guide.
https://docs.coronalabs.com/guide/events/detectEvents/index.html
To find out how to switch "pages" or scenes read
https://docs.coronalabs.com/guide/system/composer/index.html
For adding a reference in a button:
local button =
div {
a{["data-toggle"]="modal",
["data-backdrop"]="static",
href="#refrence-modal",
}
Or, you may add button inside a form:-
define the action of the form
make the button type as submit

In Dart, if I listen to a click event with two listeners, how do I know which happens first?

If I write the following Dart code, how do I know which click handler happens first?
main() {
var button = new ButtonElement();
var stream = button.onClick.asBroadcastStream();
stream.listen(clickHandler1);
stream.listen(clickHandler2);
}
Let's say I'm in other code that doesn't know anything about the first two click handlers, but I register another one.
Can I know that the stream has two listeners?
Can I pause or cancel all other subscribers?
If I write button.onClick.asBroadcastStream() again elsewhere, does it point to the same stream as was used in main?
Can I say in one of the handlers to not pass event on to the other broadcast listener? Is that a consumer?
Let's say I'm in other code that doesn't know anything about the first
two click handlers, but I register another one.
Can I know that the stream has two listeners?
No, you can't. You could extend the stream class or wrap it and provide this functionality yourself, but it does not feel like a good design choice, because I don't think a listener should know about other listeners. What are you trying to do exactly? Perhaps there's a better way than letting listeners know about each other.
Can I pause or cancel all other subscribers?
You can cancel/pause/resume only the subscriber you are dealing with. Again, you probably shouldn't touch other listeners, but I guess you could wrap/extend the Stream class to have this behavior.
If I write button.onClick.asBroadcastStream() again elsewhere, does it point to the same stream as was used in main?
No, at least not at the current version of SDK. So, unfortunately, you need to store a reference to this broadcast stream somewhere, and refer to it, because calling asBroadcastStream() multiple times will not yield in the result you might expect. (Note: at least based on quick testing: http://d.pr/i/Ip0K although the documentation seems to indicate different, I have yet to test a bit more when I find the time).
Can I say in one of the handlers to not pass event on to the other broadcast listener?
Well, there's stopPropagation() in the HTML land which means that the event won't propagate to other elements, but it's probably not what you were looking for.
For being able to stop an event firing in other listeners, there needs to be an order of which the listeners are getting called. I believe the order is the order of registration of those listeners. From the design perspective, I don't think it would be a good idea to allow a listener to cancel/pause others.
Event propagation in HTML makes sense since it's about hierarchy, but here we don't have that (and even in case of events in HTML there can be multiple listeners for the single element).
There's no way to assign weight to listeners or define the order of importance, therefore it's not surprising that there isn't a way to stop the event.
Instead of letting listeners know about each other and manipulate each other, maybe you should try to think of another way to approach your problem (whatever that is).
Is that a consumer?
The StreamConsumer is just a class that you can implement if you want to allow other streams to be piped into your class.
Can I know that the stream has two listeners?
No, you have a ´Stream´ that wraps the DOM event handling. There is no such functionality.
Can I pause or cancel all other subscribers?
Look at Event.stopPropagation() and Event.stopImmediatePropagation(), and possibly Event.preventDefault().
If I write button.onClick.asBroadcastStream() again elsewhere, does it point to the same stream as was used in main?
[Updated] No, the current implementation doesn't gives you the same Stream back since the onClick getter returns a new stream every time it is invoked. However, the returned stream is already a broadcast stream so you shouldn't invoke asBroadcastStream() on it. If you do you will hower just get a reference to the same object back.
Stream<T> asBroadcastStream() => this;
Can I say in one of the handlers to not pass event on to the other broadcast listener? Is that a consumer?
Again, take a look at Event.stopPropagation() and Event.stopImmediatePropagation(), and possibly Event.preventDefault().

Zeptojs on() not triggering

I have build a plugin (pluginA) based on zeptojs and inside this plugin I fetch data using ajax and attach a list of
How do I bind an event to these anchors? I was going for something globally like and then use $('[data-key]').pluginB() and then inside pluginB() have something like
$(this).on('click', function (e) { e.preventDefault(); ... }); but I am not able to bind the click event to anchors created dynamically.
I tried adding $('a').on('click', ...) before I call pluginA() but it's not firing.
What I really would like would be to use the bind() trigger() approach in order to decouple the two plugins, but I am having trouble finding a good example.
Use the delegating form of on to bind all desired links in a particular area (in this example, the entire body):
$(body).on('click', 'a[data-key]', function(e) {e.preventDefault();...});
Now all links with data-key will trigger your function, regardless of whether or not they were present at the time you called on; subsequently-added links will automatically get the behavior, and removed links won't leak memory by holding dangling handler references.

How can I add on to default events in jqGrid?

I have common code that I want in various events for our standard jqGrid configuration.
I use $.extend($.jgrid.defaults, { }); to set some code for the following:
loadError()
beforeRequest()
loadComplete()
gridComplete()
Now, when I define an instance of my grid, there is a potential that I would like to execute more code in any of these events.
My initial solution was to have global variables, e.g.: loadCompleteEx() and if they are defined, call them at the end of the default method calls. This was great if I only had one grid on the page, but I am trying to implement a solution that would work regardless of how many grids are on the page.
Is there some way to hook in and add a method to execute when any of these events are fired? I'm using jqGrid 4.1.2 and jQuery 1.6.
Thanks in advance for your help!
You can .bind() your own functions to events, so that your function executes with the event. You could use this to bind different events to each grid, or bind one function to every grid at once.
.bind() also allows binding to standard javascript events, custom events, or even undefined strings which you later call with .trigger().
It needs to be attached after a selector, which can select a specific grid or multiple grids in your case.
$('#Your-Grid-Selector').bind('eventToBind', functiontoBind() {
alert('Triggered eventToBind');
});
jQuery Documentation
Edit: This question may be a duplicate of this SO Question, which has a good solution you can use for this very issue.

How do you unwire an action in Nitrogen?

In Nitrogen, the Erlang web framework, you wire actions like this:
wf:wire(send_message, #event { type=click, postback=send_message })
but if after that you run
wf:wire(send_message, #event { type=click, postback=send_message2 }),
then you get the action wired twice.
How do you unwire the previous action or all actions of an element?
Since events in nitrogen are bound using jquery's bind method. You can use unbind to unbind them. There isn't currently a nitrogen api to unbind an event but you could output the javascript code to unbind it yourself if you so wished.
see action_event.erl for an example of how the binding javascript is output. You can create a similar action/event that removes the binding.
I too was looking for an "unwire" and didn't find it. My work-around was to wf:replace() the element to which the event was wired, and wire the replacement element; I hope that javascript will eventually notice the former bind can never be called and then garbage collect it. I don't know how expensive such abandoned bindings are. My context was a lazy loading of the page, such that a button would initially show a stub, but when clicked would download arbitrarily large content, and henceforth toggle hide/show.
Beyond being nervous about the sophistication of the javascript garbage collection, I'm worried that this may be a bad pattern, and would love to hear others' experience. The only alternative that occurs to me would be to keep state (e.g. data) in the original element and pass that state back with the event message so that the same event handler would act on the "unloaded->loaded_show->loaded_hide->loaded_show" transitions. But I'd prefer not to be calling back to the server for a simple hide/show transition.

Resources