Handle qooxdoo inline widget events in jQuery - widget

I've embedded a qooxdoo widget (the table) within an existing web app using inline integration (http://qooxdoo.org/documentation/0.8/ui_inline).
Is it possible to raise an event in the widget that can be handled externally within the main web app? Specifically I want to raise a "row selected" event when the user selects an item in the table.
Thanks,
Paul

afaik the table selection model has the event "changeSelection".
tableInstance.getSelectionModel().addListener("changeSelection", yourListener, yourContext);
With this event you can get the necessary infos within your listener method and fire an event to a DOM element which any JS library can use to listen to.
qx.event.Registration.fireEvent(document.body, "rowSelected", qx.event.type.Event);
You can fire the event at every DOM element you like to. In your case you can use jQuery to listen to the event and get the infos.
Hope that helps you further.
Regards,
Alex

Related

What is capture and normal phase in event handeling in Scene2D ?

I read the wiki but it's very confusing for me. Can someone explain it in easy language? There are few doubts I have
1. Is capture listener and normal listener are also one of the many listeners provided by scene2D like InputListener, ClickListener etc
What is the difference between target and listener actor?
No, these terms describe whether you've assigned one of the types of listeners as a capture listener or not. Capture listeners allow an actor a chance to reject an event on one of its descendents. For example, some kind of group widget can decide whether to reject presses on a button that is in it based on some criteria. I think the built-in ScrollPane class uses this to prevent buttons and sliders from being manipulated while the view is being scrolled. Most people will not have a reason to use this, as it is for custom widgets that have very particular behavior.
Target and listener actors are usually the same. The listener actor is the actor you attached the listener to, and by default it will also be the target. But you can change the target actor to something else. This is just a feature to allow you to create listeners with custom behavior. Most people will not have a use for this. I don't even think it is used by any of the built-in classes.
The complexities of the listener system were designed to get button and widgets to react to input like a traditional UI. Unless you are designing widgets with customized input behavior, you only need
ChangeListener for the UI widgets (buttons and sliders).
If you're using Scene2D for stuff other than UI (the game scene) you'll subclass InputListener to react to touches. Or maybe GestureListener.
I built a small game using Scene2D and found that it is a bit clumsy for non-UI stuff. I wouldn't do it again, personally. So I would say 99% of people making simple games should only ever use ChangeListener.
The action system is nice for tweening stuff, but you can just add actions to the stage root and react to them externally with your own non-actor classes.

Adding gesture event to custom element Polymer 2.0

As per the polymer documentation there are 2 methods to add Gesture events:
1. Annotated event listener
Extend the element using
class TestEvent extends Polymer.GestureEventListeners(Polymer.Element) {
and add annotation for the element
<div id="dragme" on-track="handleTrack">Drag me!</div>
when i try this , though events get triggered native handling of browser events stop. Though I call Polymer.Gestures.setTouchAction(this,"auto"); inside ready it fails.
Please suggest how should I go about adding gesture events in annotation form and still allowing native browser handling.

How to detect menu button press in TVOS app using TVJS

I need to know when a document(screen) is popped off the stack in an Apple tvOS app. I thought detecting the Menu button press would be the simplest way, but I'm using TVJS and have not been able to figure out how to write the event handler.
Please help me write an event handler that will fire on document removal, menu button press or offer an alternative solution.
Subscribe to the event unload - it's triggered whenever a page disappears after being popped from the stack:
doc.addEventListener("unload", Presenter.onUnload.bind(Presenter));
[...]
onUnload: function(event) {
console.log("onUnload");
},
There is such thing of a handler for onDocumentRemoval or similar. What you can do, instead, is create a global select handler:
doc.addEventListener("select", self.doThing.bind(self));
And then check if the fired event comes from one of the buttons used to remove an element of the stack (let's suppose those buttons have a class named delete:
doThing: function(event){
var element = event.target;
if (element.getAttribute("class").contains("delete")){
//enter code here
}
EDIT 1:
I found the possible events the TVMLKit handles (I know it is in Swift/Objective-C, but the events are the same):
TVElementTypePlay
A play event has been dispatched.
TVElementTypeSelect
A select event has been dispatched.
TVElementTypeHoldSelect
A hold event has been dispatched.
TVElementTypeHighlight
A highlight event has been dispatched.
TVElementTypeChange
A change event has been dispatched.
Those events are only attachable to a template as far as I could test. I guessed the change event would be perfect if I could attach it to the navigationDocument to listen for changes, but those two options won't work and both fire errors:
Attached to the global:
navigationDocument.addEventListener("change", function(event){console.log(event)});
Attached to the documents array:
navigationDocument.documents.addEventListener("change", function(event){console.log(event)});
There is no built-in method for those above to listen for any change. The event, though, will work on a template listening to internal changes. But it won't fire when the template is pushed to or popped from the stack.
I am guessing you will need to re-design your app in order to achieve what you are looking for.

<core-shared-lib> and load event in polymer

I am trying to use a js library across my elements with the help of core-shared-lib element. Apparently, I need to perform an operation as soon as the library loads, and the Polymer's ready event gets fired before the library is downloaded. Is there a way that I can bind an event to core-shared-lib element so that I can execute that library's functions.
Thank You
There is a on-core-shared-lib-load event according to docs. Try that
<core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">

How to hook a keyboard event handler onto an INPUT element with jQuery?

I want to attach my own key event handler to an INPUT that already has another event handler attached to onkeydown. Essentially, I want to receive a key event before all the other handlers and check if the user pressed a certain key -- if yes, I want to perform some functions and discard the event, if no, I want to pass it along to the other handler(s).
How can I do this with jQuery?
If you are loading a 3rd party script or jQuery addon you can just load your script or function first. If you do that then you can use something like this without the mess of unbinding and rebinding event handlers.
// your possible interceptor code
$("#awesome").keydown(function(e) {
if (e.keyCode < 70) {
e.stopImmediatePropagation();
console.log("BLOCKED!!!");
};
});
// possible 3rd party event code loaded after your code
$("#awesome").keydown(function(e) {
console.log("3rd party:"+e.keyCode);
});
Example webpage => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-key-event-interception.html
Example output of Firebug console
jQuery stopImmediatePropagation() documentation
According to the jQuery bind() documentation:
"When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound."
So it looks like you will have to unbind the other handlers, bind yours and then add the others back if you want yours to run first.
There is some good information in this thread with respect to that:
jQuery: Unbind event handlers to bind them again later