Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30684 > unrolled thread

Object Oriented Elements, callbacks...

Started by"Chris M. Thomasson" <nospam@nospam.invalid>
First post2016-06-18 14:56 -0700
Last post2016-06-19 12:27 -0700
Articles 8 — 2 participants

Back to article view | Back to comp.lang.javascript

Contents

  Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 14:56 -0700
    Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 15:03 -0700
      Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-18 15:12 -0700
      Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 15:12 -0700
    Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-18 15:19 -0700
      Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-19 01:06 -0700
      Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-19 12:06 -0700
        Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-19 12:27 -0700

#30684 — Object Oriented Elements, callbacks...

From"Chris M. Thomasson" <nospam@nospam.invalid>
Date2016-06-18 14:56 -0700
SubjectObject Oriented Elements, callbacks...
Message-ID<nk4g26$13la$1@gioia.aioe.org>
Just wondering what you all think of the way I am hooking up DOM 
elements, buttons for now, to objects via callbacks. Here is an example 
page:

http://funwithfractals.atspace.cc/ct_root/ct_ui

The code can be found here:

http://funwithfractals.atspace.cc/ct_root/ct_ui/ct_main.js

I am dynamically attaching an object to a button element with bind in 
the following functions (ct_ui_button_obj, ct_ui_button_factory):

// Abstract button object
//_________________________________________________________
function ct_ui_button_obj(e, s)
{
     this.m_e = e;
     this.m_s = s;
}


// Abstract button factory
//_________________________________________________________
function ct_ui_button_factory(eid, ftor_onclick, state)
{
     var e = document.getElementById(eid);
     if (! e) return null;

     var obj = new ct_ui_button_obj(e, state);
     if (! obj) return null;

     obj.m_e.addEventListener("click", ftor_onclick.bind(obj));

     return obj;
}



called like:
_____________________________
function main_button_test()
{
     g_button = ct_ui_button_factory("g_html_button", my_on_click, [0, 
1, 2, 3]);
     if (! g_button) throw "ID Parse Error";
}
_____________________________

Does this look Kosher to you?




<program entry is main, which is called from body onload event...>
__________________________________________
"use strict";


// Abstract button object
//_________________________________________________________
function ct_ui_button_obj(e, s)
{
     this.m_e = e;
     this.m_s = s;
}


// Abstract button factory
//_________________________________________________________
function ct_ui_button_factory(eid, ftor_onclick, state)
{
     var e = document.getElementById(eid);
     if (!e) return null;

     var obj = new ct_ui_button_obj(e, state);
     if (!obj) return null;

     obj.m_e.addEventListener("click", ftor_onclick.bind(obj));

     return obj;
}


// Test App for hooking up existing DOM to OO buttons...
//_________________________________________________________
var g_button = null;

function my_on_click()
{
     alert("my_on_click::m_s = " + this.m_s);
}

function main_button_test()
{
     g_button = ct_ui_button_factory("g_html_button", my_on_click, [0, 
1, 2, 3]);
     if (! g_button) throw "ID Parse Error";
}


// called from <body onload="main();">
function main()
{
     try
     {
         main_button_test();
     }

     catch (e)
     {
         alert(e);
     }
}
__________________________________________


Thanks!  :^)

[toc] | [next] | [standalone]

#30685

From"Chris M. Thomasson" <nospam@nospam.invalid>
Date2016-06-18 15:03 -0700
Message-ID<nk4gf1$14eb$1@gioia.aioe.org>
In reply to#30684
On 6/18/2016 2:56 PM, Chris M. Thomasson wrote:
> Just wondering what you all think of the way I am hooking up DOM
> elements, buttons for now, to objects via callbacks. Here is an example
> page:
[...]
>     obj.m_e.addEventListener("click", ftor_onclick.bind(obj));
[...]
Yikes! this works on many devices, except by Sony Bravia! It says 
(ftor_onclick.bind) does not exist. Damn! What am I doing wrong here?

[toc] | [prev] | [next] | [standalone]

#30686

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2016-06-18 15:12 -0700
Message-ID<63c59810-9cad-47f5-baec-e90eab21c993@googlegroups.com>
In reply to#30685
On Saturday, June 18, 2016 at 5:03:20 PM UTC-5, Chris M. Thomasson wrote:
> On 6/18/2016 2:56 PM, Chris M. Thomasson wrote:
> > Just wondering what you all think of the way I am hooking up DOM
> > elements, buttons for now, to objects via callbacks. Here is an example
> > page:
> [...]
> >     obj.m_e.addEventListener("click", ftor_onclick.bind(obj));
> [...]
> Yikes! this works on many devices, except by Sony Bravia! It says 
> (ftor_onclick.bind) does not exist. Damn! What am I doing wrong here?


The device may not support ES5.

a polyfill:

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill>

[toc] | [prev] | [next] | [standalone]

#30687

From"Chris M. Thomasson" <nospam@nospam.invalid>
Date2016-06-18 15:12 -0700
Message-ID<nk4h0n$15an$1@gioia.aioe.org>
In reply to#30685
On 6/18/2016 3:03 PM, Chris M. Thomasson wrote:
> On 6/18/2016 2:56 PM, Chris M. Thomasson wrote:
>> Just wondering what you all think of the way I am hooking up DOM
>> elements, buttons for now, to objects via callbacks. Here is an example
>> page:
> [...]
>>     obj.m_e.addEventListener("click", ftor_onclick.bind(obj));
> [...]
> Yikes! this works on many devices, except by Sony Bravia! It says
> (ftor_onclick.bind) does not exist. Damn! What am I doing wrong here?

FWIW, the TV is using Opera Devices 2.9 as a browser.

[toc] | [prev] | [next] | [standalone]

#30688

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2016-06-18 15:19 -0700
Message-ID<b6084978-53a5-4daf-bcf2-ddd910acafe8@googlegroups.com>
In reply to#30684
On Saturday, June 18, 2016 at 4:56:31 PM UTC-5, Chris M. Thomasson wrote:
> Just wondering what you all think of the way I am hooking up DOM 
> elements, buttons for now, to objects via callbacks. [...]

Try using handleEvent method instead on the prototype:

function MyButton(el){
  this.el = el
  el.addEventListener('click', this)
}
MyButton.prototype = {
  handleEvent: function(e){ this['on' + e.type](e) },
  onclick: function(e){
    alert("Hello World")
  }
}

var foo = new MyButton(document.getElementById('g_html_button'))

[toc] | [prev] | [next] | [standalone]

#30691

From"Chris M. Thomasson" <nospam@nospam.invalid>
Date2016-06-19 01:06 -0700
Message-ID<nk5jr2$bel$1@gioia.aioe.org>
In reply to#30688
On 6/18/2016 3:19 PM, Michael Haufe (TNO) wrote:
> On Saturday, June 18, 2016 at 4:56:31 PM UTC-5, Chris M. Thomasson wrote:
>> Just wondering what you all think of the way I am hooking up DOM
>> elements, buttons for now, to objects via callbacks. [...]
>
> Try using handleEvent method instead on the prototype:
>
> function MyButton(el){
>   this.el = el
>   el.addEventListener('click', this)
> }
> MyButton.prototype = {
>   handleEvent: function(e){ this['on' + e.type](e) },
>   onclick: function(e){
>     alert("Hello World")
>   }
> }
>
> var foo = new MyButton(document.getElementById('g_html_button'))
>

This works like a charm! Thanks. :^)

[toc] | [prev] | [next] | [standalone]

#30693

From"Chris M. Thomasson" <nospam@nospam.invalid>
Date2016-06-19 12:06 -0700
Message-ID<nk6qf2$8qu$1@gioia.aioe.org>
In reply to#30688
On 6/18/2016 3:19 PM, Michael Haufe (TNO) wrote:
> On Saturday, June 18, 2016 at 4:56:31 PM UTC-5, Chris M. Thomasson wrote:
>> Just wondering what you all think of the way I am hooking up DOM
>> elements, buttons for now, to objects via callbacks. [...]
>
> Try using handleEvent method instead on the prototype:
>
> function MyButton(el){
>   this.el = el
>   el.addEventListener('click', this)
> }
> MyButton.prototype = {
>   handleEvent: function(e){ this['on' + e.type](e) },
>   onclick: function(e){
>     alert("Hello World")
>   }
> }
>
> var foo = new MyButton(document.getElementById('g_html_button'))
>

What about something like:
_________________________________________

// Base button attached to a user object
function ct_button(el, state) {
     if (!state) throw "ct_button::ct_button(state == null), WTF!";
     this.m_el = el;
     this.m_state = state;
}

ct_button.prototype = {
     // root event multiplexer
     handleEvent: function (e) {
         this.m_state['on_' + e.type](e);
     },

     add_listener: function (n) {
         this.m_el.addEventListener(n, this);
     },

     remove_listener: function (n) {
         this.m_el.removeEventListener(n, this);
     }
};

// Helper function wrt (getElementById)
function ct_button_from_id(id, state) {
     var el = document.getElementById("g_html_button");
     if (!el) return null;
     return new ct_button(el, state);
}



// A user defined button
function ct_my_button() {
     this.m_state = 123;
     this.m_button = ct_button_from_id("g_html_button", this);
     this.m_button.add_listener("click");
}

ct_my_button.prototype = {
     on_click: function (e) {
         alert("Hello World, this.state = " + this.m_state);
     }
};
_________________________________________

This way "user defined" objects do not need to explicitly define 
(handleEvent). Also, all events flow through the base (handleEvent) 
function in (ct_button) before they call the appropriate event handler 
in the user object in (ct_button::m_state).

Well, humm... Is this just unnecessary clutter? Or is it not all that 
terrible!

;^o

[toc] | [prev] | [next] | [standalone]

#30695

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2016-06-19 12:27 -0700
Message-ID<f9e8098f-fc9f-41eb-aa86-02efd942e97a@googlegroups.com>
In reply to#30693
On Sunday, June 19, 2016 at 2:06:18 PM UTC-5, Chris M. Thomasson wrote:
> On 6/18/2016 3:19 PM, Michael Haufe (TNO) wrote:
> > On Saturday, June 18, 2016 at 4:56:31 PM UTC-5, Chris M. Thomasson wrote:
> >> Just wondering what you all think of the way I am hooking up DOM
> >> elements, buttons for now, to objects via callbacks. [...]
> >
> > Try using handleEvent method instead on the prototype:
> >
> > function MyButton(el){
> >   this.el = el
> >   el.addEventListener('click', this)
> > }
> > MyButton.prototype = {
> >   handleEvent: function(e){ this['on' + e.type](e) },
> >   onclick: function(e){
> >     alert("Hello World")
> >   }
> > }
> >
> > var foo = new MyButton(document.getElementById('g_html_button'))
> >
> 
> What about something like:
> _________________________________________
> 
> // Base button attached to a user object
> function ct_button(el, state) {
>      if (!state) throw "ct_button::ct_button(state == null), WTF!";
>      this.m_el = el;
>      this.m_state = state;
> }
> 
> ct_button.prototype = {
>      // root event multiplexer
>      handleEvent: function (e) {
>          this.m_state['on_' + e.type](e);
>      },
> 
>      add_listener: function (n) {
>          this.m_el.addEventListener(n, this);
>      },
> 
>      remove_listener: function (n) {
>          this.m_el.removeEventListener(n, this);
>      }
> };
> 
> // Helper function wrt (getElementById)
> function ct_button_from_id(id, state) {
>      var el = document.getElementById("g_html_button");
>      if (!el) return null;
>      return new ct_button(el, state);
> }
> 
> 
> 
> // A user defined button
> function ct_my_button() {
>      this.m_state = 123;
>      this.m_button = ct_button_from_id("g_html_button", this);
>      this.m_button.add_listener("click");
> }
> 
> ct_my_button.prototype = {
>      on_click: function (e) {
>          alert("Hello World, this.state = " + this.m_state);
>      }
> };
> _________________________________________
> 
> This way "user defined" objects do not need to explicitly define 
> (handleEvent). Also, all events flow through the base (handleEvent) 
> function in (ct_button) before they call the appropriate event handler 
> in the user object in (ct_button::m_state).
> 
> Well, humm... Is this just unnecessary clutter? Or is it not all that 
> terrible!

Use implementation inheritance:

var eventListener = {
    handleEvent: function(e){ this['on' + e.type](e) }
}

//...

function MyButton(el,parent){...}
MyButton.prototype = Object.create(eventListener)
MyButton.prototype.onclick(e){...}

// or use class extends with ES6

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web