Display the attribute as a table of x3dom object

Question

I am starting with X3DOM and trying to find a way to display the attribute data of X3DOM object stored in the database in the client side. Querying the data and getting the 3D object was not that difficult but am stuck at the moment with getting its attribute data in popup when clicking on that object. I would be really grateful if anyone could help me on this. I have tried looking for tutorial for this but could not find any. If anyone has such links that they think would be helpful, please provide the link as well. I am also searching for the relevant materials myself as well. Thanking you in advance.

Answer 1

One way to attach listeners to X3D objects is to set its event attribute such as the onclick attribute (or onmouseover, onmouseout ...).

You may do it in the served page from the server, or dynamically.

Let's say you have a shape:

<shape onclick=​"return window.MyComponent && typeof window.MyComponent.showData === 'function' ? MyComponent.showData(this) : true​;​​">​…​</shape>​

and a JS component:

;(function(root) {
    "use strict";

    root.MyComponent = {
        showData: function(shape) {
            /* - do your data retrieval here
               - in case you have jQuery: $(shape).data()
               - there you also decide what your click handler returns
               to keep event propagation or not */
        }
    }

})(this);

A click on the shape will trigger MyComponent.showData(this) where this is the shape, and you will be able to work with this element and its attributes in your component.

X3DOM developers might have added event listener addition without having to directly deal with the attributes.