Solution to Link issue ie. DOM initiated event interaction with Uize (or something to that effect).

[Aryan Duntley]

I submitted a new post and now I have found the solution.  I don't know how long it takes for posts to be "approved" but I am pasting this solution here for others to hopefully learn from as I have from playing with it until I got it right.  In my previous post I asked a question in regards to button interactivity with the code for the 3d Rotation Viewer.  What happened was that I removed the UizeDotCom.Page.Example instantiation and replaced it with the vanilla Widget.Page.  In so doing, I lost button functionality wherein the buttons contained code in the title attribute that acted a spin method on the animation.  I found a solution that was not dynamic and then I figured out how to include the provided dynamic code from the UizedotCom.Page.Example file into the module creation inpage.  The first solution was provided nicely in the docs: <code>Uize.Node.wire ('crick','click',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});</code>.  Simply utilizing the<code> Uize.Node.wire </code> method I was able to set a spin method with new params, but in order to do so I had to provide the a tag with an id: <code><a href="javascript://" id="crick" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a></code>.  That allowed me to access the anchor by id and assign the new spin.  However this is a clumpy way of doing things and I was unsatisfied and was determined to find out how they implemented the dynamic listeners for the a tags.  I knew 1) that it had something to do with the argument passed to their UizeDotCom.Page.Example instantiation: <code>{evaluator:function (code) {eval (code)}</code>.  So when I converted the instance to plain vanilla, I kept the argument.  Then I had to search the DotCom example for anything with the string evaluator.  Now, I'm a noob here, keep in mind, so I don't know what the evaluator is here: <code>_this._evaluator &&  _this.wireNode (Uize.Node.find ({tagName:'A',className:/\blinkedJs\b/}), 'click', function () {_this._evaluator (this.title || this.innerHTML)});</code>  It looks like a variable, and I would assume that this is a conditional expression <code>_this._evaluator (this.title || this.innerHTML)</code> that evaluates the title of *this (with scope of the implicit(??? forgot the name of these functions, passed as parameters, having no names...???) meaning the a tag that was pulled with the classname linkedJS).  The _this references or points (not sure which one) to the class itself, or the prototype in js.  It seems that the Uize.Node.find method returns an array.  The evaluator evaluation seems to ask whether it exists and if so return the title if THAT exists and if not, then return the innerHTML.  However, the initial evaluation does in fact check whether _evaluator AND wireNode exists together before executing the find method, so I'm not sure about the exact logic of that last bit of code. Later on in the code there is this: <code>_class.registerProperties ({_evaluator:'evaluator'});</code>.  I have not looked at the documentation for registerProperties, but it seems to set the value of _evaluator to a global 'evaluator'.   SOOOOooooooooo, Taking that and finally realizing what _this was referencing or pointing to (whichever it does), I then was able to substitute the _this for 'page' which is the variable in which the instance of the vanila page class was assigned. <code>page.wireNode (Uize.Node.find ({tagName:'A',className:/\blinkedJs\b/}), 'click',function (){page.evaluator (this.title || this.innerHTML)});</code>.  That allows for the dynamic access to each of the a tags, accepting the specific event object and its attributes and making them accessible.  Now, because I do not know exactly what is happening with: <code>_this._evaluator &&  _this.wireNode</code> other than testing whether both conditions are positively met, I am not sure whether or not to also add the condition to the code below by doing this: <code> page.evaluator && page.wireNode(... </code>.  Because I am not calling the evaluator from an external source, I know it exists.  If I placed the code, instead, inside of either the Widget.Page file or a subclass of Widget.Page it would be necessary because I do not want the code executing if I have not specifically added the evaluator method a parameter to my Widget.Page instantiation. Now, to determine whether the .wireNode thingy (whatever it is) exists?  I don't know.  It must be important to be included in the original code.  But is it necessary in the local code or can it be left out for similar reasons checking for the evaluator method was unnecessary?  Hope this helps someone.  Maybe most people are working with the DotCom pages, but if they can maybe pull a little info from my post here, maybe they can start really wrapping their heads around the idea of this all and we can start having a whole lot more resources for this framework.  The more resources that become available, the bigger it will grow.  This framework is, in my opinion, a step ahead of the others (to include JQuery) in terms of it's range of use and feature rich functionality.  Now if we can only shorten the learning curve.  A big barrel full of gratitude to the developers.
Uize.module ({
    required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod',
    ],
    builder:function () {
        /*** create the example page widget ***/
            var page = window.page = Uize.Widget.Page ({evaluator:function (code) {eval (code)}});//{idPrefix:'page'}
            //var page = Uize.Widget.Page ();
        /*** configuration variables ***/
            var
                totalFrames = 72,
                frameUrlTemplate =
                    'http://www.apple.com/html5/showcase/threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg'
            ;

        /*** state variables ***/
            var
                rotation = 0,
                lastFrameNo = -1,
                dragStartRotation
            ;

        /*** create the Uize.Widget.Drag instance ***/
            var rotationViewer = page.addChild (
                'rotationViewer',
                Uize.Widget.Drag,
                {
                    cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
                    releaseTravel:function (speed) {
                        var
                            deceleration = 5000, // measured in pixels/s/s
                            duration = speed / deceleration
                        ;
                        return {
                            duration:duration,
                            distance:Math.round (speed * duration / 2),
                            curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
                        };
                    },
                    html:function (input) {
                        var
                            htmlChunks = [],
                            frameNodeIdPrefix = input.idPrefix + '-frame'
                        ;
                        for (var frameNo = 0; ++frameNo <= totalFrames;) {
                            htmlChunks.push (
                                '<img' +
                                    ' id="' + frameNodeIdPrefix + frameNo + '"' +
                                    ' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
                                '/>'
                            );
                        }
                        return htmlChunks.join ('');
                    },
                    built:false
                }
            );

        /*** wire up the drag widget with events for updating rotation degree ***/
            function updateRotation (newRotation) {
                rotation = ((newRotation % 360) + 360) % 360;
                var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
                if (frameNo != lastFrameNo) {
                    rotationViewer.showNode ('frame'+ lastFrameNo,false);
                    rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
                }
            }
            rotationViewer.wire ({
                'Drag Start':function () {dragStartRotation = rotation},
                'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}
            });

        /*** function for animating spin ***/
            function spin (degrees,duration,curve) {
                Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
            }
           
           
     //widgetClass:'Uize.Widget.HoverFader',
    //nodes:{root:'menu1',className:/\bmenuLink\b/}

        /*** initialization ***/
            Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
            //Uize.Node.wire ('crick','click',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});

        /*** wire up the page widget ***/
            page.wireUi ();
    page.wireNode (Uize.Node.find ({tagName:'A',className:/\blinkedJs\b/}), 'click',function (){page.evaluator (this.title || this.innerHTML)});
            //Uize.Node.wire ('','click',function () {alert ('You clicked me')});
    }
});