Events in qx.Website

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Events in qx.Website

Leo von Klenze-2
Hi,

I've written a simple class in a qx.Website application and wonder how
to use the standard qooxdoo events known from desktop applications.

The following does not work:

q.define('hc.ui.website.LoginDialog', {
    extend: q.$$qx.ui.website.Widget,
    include: [q.$$qx.core.MEvent],

    events: {
        loginSuccessful: 'qx.event.type.DataEvent'
    },

    members: {
        testEvent: function() { this.fireDataEvent('loginSuccessful', {
name: 'yeah' }); }
    }
});

var dialog = new hc.ui.website.LoginDialog();
dialog.addListener(...) // undefined is not a function here

I've also tried to use on and emit, but this.emit didn't work either.

Any help would be appreciated.

Thanks!
Best regards,
   Leo


------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=190641631&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Events in qx.Website

Daniel Wagner
Administrator
emit() and on() should work on all collections (including website
widgets) since the event module is included in all qxWeb builds. I
modified my example from the other thread to show it off:

q.ready(function() {
  var qx = q.$$qx;

  q.define("Custom", {

    extend: qx.ui.website.Widget,

    construct : function(selector, context) {
      this.base(arguments, selector, context);
    },

    statics: {
      // default configuration
      _config : {
        label : "Custom qx.Website widget"
      },

      // factory method
      custom: function(label) {
        var custom =  new Custom(this);
        if (label) {
          custom.setConfig("label", label);
        }
        custom.init(); // initialize the widget
        custom.render();

        return custom;
      }
    },

    members: {
      // apply custom config, templates, etc.
      render: function() {
        this.setHtml(this.getConfig("label"));
      },

      sayHello: function() {
        this.emit("hello");
        return this;
      }
    },

    defer: function(statics) {
      // attach factory method to q()
      q.$attach({custom : statics.custom});
    }
  });

  q.create("<div>").custom("My awesome widget")
    .appendTo(document.body)
    .on("hello", function() {
      console.log("custom said hello");
    })
    .sayHello();
});


Also, in qx.Website, you usually want to use the factory function to
create a widget instance. If you just use the constructor,
qx.ui.website.Widget.init() will never be called which means you won't
get the same widget instance if you create a new qxWeb collection from
the widget's DOM element. That might not be a problem initially but it
comes in handy in slightly larger apps because it lets you access your
widgets without storing global references to them.

On 17.02.2015 23:23, Leo von Klenze wrote:

> Hi,
>
> I've written a simple class in a qx.Website application and wonder how
> to use the standard qooxdoo events known from desktop applications.
>
> The following does not work:
>
> q.define('hc.ui.website.LoginDialog', {
>     extend: q.$$qx.ui.website.Widget,
>     include: [q.$$qx.core.MEvent],
>
>     events: {
>         loginSuccessful: 'qx.event.type.DataEvent'
>     },
>
>     members: {
>         testEvent: function() { this.fireDataEvent('loginSuccessful', {
> name: 'yeah' }); }
>     }
> });
>
> var dialog = new hc.ui.website.LoginDialog();
> dialog.addListener(...) // undefined is not a function here
>
> I've also tried to use on and emit, but this.emit didn't work either.
>
> Any help would be appreciated.
>
> Thanks!
> Best regards,
>    Leo
>
>
> ------------------------------------------------------------------------------
> Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
> from Actuate! Instantly Supercharge Your Business Reports and Dashboards
> with Interactivity, Sharing, Native Excel Exports, App Integration & more
> Get technology previously reserved for billion-dollar corporations, FREE
> http://pubads.g.doubleclick.net/gampad/clk?id=190641631&iu=/4140/ostg.clktrk
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=190641631&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel