Quantcast

How to make an event bubble up?

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

How to make an event bubble up?

Scott Chapman-2
I have an event defined on my MapquestMap:

qx.Class.define("kiosk_portal.MapquestMap",
{
  events :
  {"pointDblClick" : "qx.event.type.Mouse"},
  extend : qx.ui.core.Widget,

and I can catch the event in the tab that contains it:

qx.Class.define("kiosk_portal.MapquestMapTab",
{
  extend : qx.ui.tabview.Page,
  construct : function(label)
    {
      ....
      this.__map = new kiosk_portal.MapquestMap();

      this.__map.addListener("pointDblClick",
        function (e) {
          var id = e.getData();
          console.log(id);
        }
        ,this);

The event is fired like this:

        var that = this;
        function pointDoubleClicked(evt){
          console.log("dbl click firing");
          that.fireDataEvent("pointDblClick", evt.srcObject['ID']);
        }

I'd like to catch the event on the TabView that contains these tabs,
out in the application scope so I can call open a new tab.

How do I make this event bubble up?  I don't have to manually add
event handlers that re-fire new events at all the levels out to the
outer one do I?

Thanks!

Scott

------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to make an event bubble up?

Alexander Steitz
Hi Scott,

what about if the page widgets are firing the event on theirselves. Since the tabview does know its pages you can easily add the listener methods there in the TabView widget. This way the TabView widget gets notified if the event was fired and can take action.

Regards,
  Alex

-----Original Message-----
From: Scott Chapman [mailto:[hidden email]]
Sent: Wednesday, February 22, 2012 4:01 AM
To: qooxdoo Development
Subject: [qooxdoo-devel] How to make an event bubble up?

I have an event defined on my MapquestMap:

qx.Class.define("kiosk_portal.MapquestMap",
{
  events :
  {"pointDblClick" : "qx.event.type.Mouse"},
  extend : qx.ui.core.Widget,

and I can catch the event in the tab that contains it:

qx.Class.define("kiosk_portal.MapquestMapTab",
{
  extend : qx.ui.tabview.Page,
  construct : function(label)
    {
      ....
      this.__map = new kiosk_portal.MapquestMap();

      this.__map.addListener("pointDblClick",
        function (e) {
          var id = e.getData();
          console.log(id);
        }
        ,this);

The event is fired like this:

        var that = this;
        function pointDoubleClicked(evt){
          console.log("dbl click firing");
          that.fireDataEvent("pointDblClick", evt.srcObject['ID']);
        }

I'd like to catch the event on the TabView that contains these tabs,
out in the application scope so I can call open a new tab.

How do I make this event bubble up?  I don't have to manually add
event handlers that re-fire new events at all the levels out to the
outer one do I?

Thanks!

Scott

------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to make an event bubble up?

Scott Chapman-2
If I add the listener to the Page, it never sees the event fire:

qx.Class.define("kiosk_portal.MapquestMapTab",
{
  extend : qx.ui.tabview.Page,

  construct : function(label)
    {
      this.base(arguments, label);
      this.setLayout(new qx.ui.layout.VBox());
      this.__kioskContainer = new qx.ui.container.Composite();
      var __layout = new qx.ui.layout.VBox();
      __layout.setSpacing(4);
      this.__kioskContainer.setLayout(__layout);
      this.__map = new kiosk_portal.MapquestMap();

      this.addListener("pointDblClick",
        function (e) {
          var id = e.getData();
          console.log(id);
          var label = id;
          var host_id = id;
          //this._openOrSelectTab(label, host_id);
        } ,this);

How do I make the event bubble up?


On Wed, Feb 22, 2012 at 12:25 AM, Alexander Steitz
<[hidden email]> wrote:

> Hi Scott,
>
> what about if the page widgets are firing the event on theirselves. Since the tabview does know its pages you can easily add the listener methods there in the TabView widget. This way the TabView widget gets notified if the event was fired and can take action.
>
> Regards,
>  Alex
>
> -----Original Message-----
> From: Scott Chapman [mailto:[hidden email]]
> Sent: Wednesday, February 22, 2012 4:01 AM
> To: qooxdoo Development
> Subject: [qooxdoo-devel] How to make an event bubble up?
>
> I have an event defined on my MapquestMap:
>
> qx.Class.define("kiosk_portal.MapquestMap",
> {
>  events :
>  {"pointDblClick" : "qx.event.type.Mouse"},
>  extend : qx.ui.core.Widget,
>
> and I can catch the event in the tab that contains it:
>
> qx.Class.define("kiosk_portal.MapquestMapTab",
> {
>  extend : qx.ui.tabview.Page,
>  construct : function(label)
>    {
>      ....
>      this.__map = new kiosk_portal.MapquestMap();
>
>      this.__map.addListener("pointDblClick",
>        function (e) {
>          var id = e.getData();
>          console.log(id);
>        }
>        ,this);
>
> The event is fired like this:
>
>        var that = this;
>        function pointDoubleClicked(evt){
>          console.log("dbl click firing");
>          that.fireDataEvent("pointDblClick", evt.srcObject['ID']);
>        }
>
> I'd like to catch the event on the TabView that contains these tabs,
> out in the application scope so I can call open a new tab.
>
> How do I make this event bubble up?  I don't have to manually add
> event handlers that re-fire new events at all the levels out to the
> outer one do I?
>
> Thanks!
>
> Scott
>
> ------------------------------------------------------------------------------
> Virtualization & Cloud Management Using Capacity Planning
> Cloud computing makes use of virtualization - but cloud computing
> also focuses on allowing computing to be delivered as a service.
> http://www.accelacomm.com/jaw/sfnl/114/51521223/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
> ------------------------------------------------------------------------------
> Virtualization & Cloud Management Using Capacity Planning
> Cloud computing makes use of virtualization - but cloud computing
> also focuses on allowing computing to be delivered as a service.
> http://www.accelacomm.com/jaw/sfnl/114/51521223/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to make an event bubble up?

Derrell Lipman
On Wed, Feb 22, 2012 at 14:42, Scott Chapman <[hidden email]> wrote:
If I add the listener to the Page, it never sees the event fire:

qx.Class.define("kiosk_portal.MapquestMapTab",
{
 extend : qx.ui.tabview.Page,

 construct : function(label)
   {
     this.base(arguments, label);
     this.setLayout(new qx.ui.layout.VBox());
     this.__kioskContainer = new qx.ui.container.Composite();
     var __layout = new qx.ui.layout.VBox();
     __layout.setSpacing(4);
     this.__kioskContainer.setLayout(__layout);
     this.__map = new kiosk_portal.MapquestMap();

     this.addListener("pointDblClick",

Your class extends qx.ui.tabview.Page, which does not fire an event called "pointDblClick". Your subclass also never fires this event. Therefore the listener will never be called.

When is "pointDblClick" supposed to be fired? And by whom?

Derrell


------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to make an event bubble up?

Scott Chapman-2
Derrell and friends,

Here's my current code and what I'm seeing.
SCREEN:
  Map shows up in the tab like it should, with a red dot on it that's clickable.
  The double click event (pointDblClick) is getting fired as indicated
in the console and I can catch it at the Map level as seen in the
console and in the code.
Problem: The listener at the Application.js level never sees the
event, when I remove the listener at the Map level.

The event does not bubble up.

I need to know how to make the event bubble up.

CONSOLE LOG:

    dbl click firing 21
    EVENT CAUGHT AT MAP LEVEL
    false

CODE:
=============== Application.js ===============
/*
#asset(kiosk_portal/*)
*/

qx.Class.define("kiosk_portal.Application",
{
  extend : qx.application.Standalone,

  members :
  {

    main : function()
    {
      this.base(arguments);

      if (qx.core.Environment.get("qx.debug"))
      {
        qx.log.appender.Native;
      }

      var dockLayout = new qx.ui.layout.Dock();
      var dockLayoutComposite = new qx.ui.container.Composite(dockLayout);
      var rootContainer = this.getRoot();
      rootContainer.add(dockLayoutComposite, {edge:0});

      this.__horizontalSplitPane = new qx.ui.splitpane.Pane();
      dockLayoutComposite.add(this.__horizontalSplitPane);

      this.__scroller = new qx.ui.container.Scroll();
      this.__scroller.setWidth(245);

      this.__horizontalSplitPane.add(this.__scroller, 0);

      this.__leftPane = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
      this.__kioskFinder = new kiosk_portal.KioskFinder();
      this.__leftPane.add(this.__kioskFinder);
      this.__scroller.add(this.__leftPane);

      this.__lateKioskTable = new kiosk_portal.LateKioskTable();
      this.__leftPane.add(this.__lateKioskTable);

      this.__tabView = new qx.ui.tabview.TabView();
      this.__horizontalSplitPane.add(this.__tabView, 1);
      this._MakeMapTab();
      this.__kioskFinder.addListener("tableDblClick",
        function (e) {
          var table_row = e.getData();
          this._openOrSelectTab(table_row[1], table_row[0]);
        }
        ,this);

      this.__lateKioskTable.addListener("cellDblclick",
        function (e) {
          var tableModel = this.__lateKioskTable.getTableModel()
          var row = tableModel.getRowData(e.getRow())
          var label = row[1];
          var host_id = row[0];
          this._openOrSelectTab(label, host_id);
        }
        ,this);    },

    _openOrSelectTab : function (label, host_id) {
      var page = null;
      this.__tabView.getChildren().forEach(
        function(thisPage){
          var lookingAt = thisPage.host_id;
          if (lookingAt == host_id){
            page = thisPage;
          }
        });

      if (! page) {
        var page = new kiosk_portal.KioskTab(label, host_id);
        this.__tabView.add(page);
      }
      page.addListener("close",function(e) {
          page.dispose();
      }, this);
      this.__tabView.setSelection([ page ]);
    },
    _MakeMapTab : function () {
        this.__map_page = new kiosk_portal.MapquestMapTab('MAP');

        this.__map_page.addListener("pointDblClick",
          function (e) {
            console.log("EVENT CAUGHT AT APP LEVEL");
          } ,this);

        this.__tabView.add(this.__map_page);
    }
  }
});

=============== MapquestMapTab.js ===============

qx.Class.define("kiosk_portal.MapquestMapTab",
{
  extend : qx.ui.tabview.Page,

  construct : function(label)
    {
      this.base(arguments, label);
      this.setLayout(new qx.ui.layout.VBox());
      this.__kioskContainer = new qx.ui.container.Composite();
      var __layout = new qx.ui.layout.VBox();
      __layout.setSpacing(4);
      this.__kioskContainer.setLayout(__layout);
      this.__map = new kiosk_portal.MapquestMap();

      this.__map.addListener("pointDblClick",
        function (e) {
          console.log("EVENT CAUGHT AT MAP LEVEL");
          console.log(e.getBubbles());
        } ,this);

      this.__kioskContainer.add(this.__map);

      this.add(this.__kioskContainer);
      this.setShowCloseButton(true);
    }
});

=============== MapquestMap.js ===============

qx.Class.define("kiosk_portal.MapquestMap",
{
  events :
  {
    "pointDblClick" : "qx.event.type.Event"
  },
  extend : qx.ui.core.Widget,
  construct : function()
    {
      this.base(arguments);
      this.set({
        width: 950,
        height: 650
      });
      this.addListenerOnce("appear", function() {

        var map = new MQA.TileMap(
          this.getContentElement().getDomElement(),
          2,
          {lat:38.203655, lng:-100.589844},
          'map');
        MQA.withModule('largezoom', function() {
          map.addControl(
            new MQA.LargeZoom(),
            new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new
MQA.Size(5,5))
          );
        });
        MQA.withModule('mousewheel', function() {
          map.enableMouseWheelZoom();
        });

        var icons = [new MQA.Icon("/images/green_9x9.png",9,9),new
MQA.Icon("/images/red_9x9.png",9,9)];

        this.__jsonStaleKiosksDataFetcher = new qx.data.store.Json(null);

        var that = this;
        function pointDoubleClicked(evt){
          console.log("dbl click firing", evt.srcObject['ID']);
          that.fireEvent("pointDblClick");
        }

        this.__jsonStaleKiosksDataFetcher.addListener( "loaded",
        function(e)
        {
          map.removeAllShapes();
          var tData = e.getData();
          tData.toArray().forEach(
            function(row)
            {
              arr_row = row.toArray();

              var poi=new MQA.Poi({'lat':arr_row[4], 'lng':arr_row[3]});
              poi.setInfoTitleHTML(arr_row[1]);
              poi.setIcon(icons[arr_row[2]]);
              poi.setShadow(false);
              poi['ID'] = arr_row[0];
              map.addShape(poi);
              MQA.EventManager.addListener(poi, 'dblclick', pointDoubleClicked);
            });
        }, this);
        this.__jsonStaleKiosksDataFetcher.setUrl("/stale_kiosks/");

        this.__map = map;
      });
    }
});


On Wed, Feb 22, 2012 at 11:46 AM, Derrell Lipman
<[hidden email]> wrote:
> When is "pointDblClick" supposed to be fired? And by whom?
>
> Derrell
>

------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to make an event bubble up?

Derrell Lipman
On Wed, Feb 22, 2012 at 15:46, Scott Chapman <[hidden email]> wrote:
Derrell and friends,

Here's my current code and what I'm seeing.
SCREEN:
 Map shows up in the tab like it should, with a red dot on it that's clickable.
 The double click event (pointDblClick) is getting fired as indicated
in the console and I can catch it at the Map level as seen in the
console and in the code.
Problem: The listener at the Application.js level never sees the
event, when I remove the listener at the Map level.

The event does not bubble up.

Your problem is that the event is being fired on the an instance of kiosk_portal.MapquestMap, so your listener that listens on that object receives the event, but in Application, you're not listening on a kiosk_portal.MapquestMap object; rather, you're listening on a kiosk_portal.MapquestMapTab object, which doesn't generate that event.

I don't know of a way to automatically bubble the event. (There is a member variable called something like _forwardEvents which may be applicable here. I've never used it.) What you could do in this case is either (a) have your kiosk_portal.MapquestMapTab listen on the event and fire a new event of its own, so that your Application can listen on it, or (b) expose the __map member via a getter function, and allow the application to listen on it directly.

Derrell


------------------------------------------------------------------------------
Virtualization & Cloud Management Using Capacity Planning
Cloud computing makes use of virtualization - but cloud computing
also focuses on allowing computing to be delivered as a service.
http://www.accelacomm.com/jaw/sfnl/114/51521223/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Loading...