Application Event Manager

[fractorr]

I decided to play around with the idea of having an application event manager. Here is what I came up with, it works with keyboard events and on button events but for some reason it does not work on toolbar menu items or context menu items. The menu items don't seem to be caring over the element ids as I get a null error when trying to add the click event handler to these element ids. Any ideas?

I have created a jsfiddle if you care to look at what I have so far.

http://jsfiddle.net/fractorr/waREC/2/

[fractorr]

After looking into this is appears to me that the menu items are injected and removed from the DOM on an as needed basis, is this correct?  I original thought the menu was completely rendered on then shown and hidden on an as needed basis.  So if that is the case then I am not sure if I have a way to attach event handlers to the menu items based on an element id.  Any ideas on how I could go about do this?

[Jon Bomgardner]

If I get a chance I'll look into this this evening. I don't remember exactly how they are rendered but I believe the IDs shouldn't change when added and removed (especially if you specify them when creating them).

 

I have been thinking a bit about this and am now thinking that some kind of generic "action" class may be a good idea. A place to encapsulate everything related to actions in the framework. Those can then be created in one place, have everything assigned and created together, and then those get passed to the different widgets that need them to do the work. This is still just the beginnings of an idea though... not sure how it would work exactly.

 

I do like the ApplicationEventManager idea as well though....

 

Jon

[Trevor Orr]

Well what I mean is that I think the menu items aren't rendered in the browser until you mouse over the parent menu.  So if this is the case when I try to assign onclick events to the menu items when the page is loaded won't work since the menu items are not in the DOM until you mouse over the parent menu, at least that is what it looks like me.

--
You received this message because you are subscribed to the Google Groups "JxLib" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jxlib/-/1PS01JqX6IwJ.

To post to this group, send email to jx...@googlegroups.com.
To unsubscribe from this group, send email to jxlib+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jxlib?hl=en.

[Paul Spencer]

Trevor, I believe that you are correct, the menu items are not injected into the page until they are first required.  It may be that they are removed from the DOM when hidden as well, but I don't think they are recreated entirely so any event handlers attached should still work once they have been initially attached.

I like the general idea of this.  I recently had to work with Sencha Touch and the new version (version 2 still in preview release) has a great implementation of the 'controller' part of model-view-controller.  It attaches event handlers to element selectors that exist now or at any time, much like the jQuery.live() method works.  I'm not sure if there is a mootools equivalent but it might fix the problem for you (at least the initial problem).

From what I recall of this thread, the general point of pain you are trying to remove is the necessity to have several handlers registered in several different ways for essentially the same thing, i.e. a toolbar button, a menu item and a keyboard shortcut.  This seems like a common pattern for web applications.  Perhaps an alternate approach would be to define a kind of factory/controller object which could be used to register handler functions and generate widgets that trigger the associated handler.  Pseudo code for discussion:

function saveFile() {

  // do something

}

factory.register('saveFile', {

  handler: saveFile,

  label: 'Save File',

  /* any other options relevant to buttons and menu items */

  keyboard: 'ctrl-s'

});

myMenu.add(factory.get('saveFile', 'button'));

myToolbar.add(factory.get('saveFile', 'menuItem));

factory.enable('saveFile'); /* enables all widgets and keyboard handlers */

factory.disable('saveFile'); /* disables all widgets and keyboard handlers */

We'd need to think through the API a bit but I think this is enough for discussion :)

Cheers

Paul

[Trevor Orr]

Yes you are correct about what I am trying to accomplish.  I like your about factory class because I really did not want to alter any core JxLib code and actually started to build something along those lines with my ApplicationEventManager class, maybe I will finish what I started and use some of your ideas and when I have it working I will send over a jsfiddle link.

[Paul Spencer]

Sounds great! 

[Trevor Orr]

Here is what I have so far, this was easier than setting up a jsfiddle link.  The toolbar menu, context menu, button and keyboard all get event functions from the ApplicationEventManager class, I have not built in the enable and disable functions yet and I think I will as those would be very useful in my app.

http://www.customcribboards.com/jxlib3/app.html