Object Oriented Elements, callbacks...

Chris M. Thomasson

unread,

Jun 18, 2016, 5:56:31 PM6/18/16

to

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! :^)

Chris M. Thomasson

unread,

Jun 18, 2016, 6:03:20 PM6/18/16

to

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?

Michael Haufe (TNO)

unread,

Jun 18, 2016, 6:12:36 PM6/18/16

to

The device may not support ES5.

a polyfill:

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

Chris M. Thomasson

unread,

Jun 18, 2016, 6:12:45 PM6/18/16

to

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

Michael Haufe (TNO)

unread,

Jun 18, 2016, 6:19:36 PM6/18/16

to

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'))

Chris M. Thomasson

unread,

Jun 19, 2016, 4:07:04 AM6/19/16

to

This works like a charm! Thanks. :^)

Chris M. Thomasson

unread,

Jun 19, 2016, 3:06:18 PM6/19/16

to

On 6/18/2016 3:19 PM, Michael Haufe (TNO) wrote:

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

Michael Haufe (TNO)

unread,

Jun 19, 2016, 3:27:14 PM6/19/16

to

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