Hey, Just began trying to work with Uize. Awesome framework. A little complicated, in my opinion, in that the documentation seems more strictly geared toward code reference without there being quite enough step by step resources (I'm a noob). I do plan on dedicating myself to learning this framework however, and once I do, I will no doubt begin placing very basic step by step tutorials on you tube and the like. Anyway, I first came to Uize while searching for a 3D rotator imitation *series of images as opposed to true blue 3D* ( I come from a Flash and AS3 background and I have created some that work fine, but I'm searching for more 'Web Standard' tools and knowledge). So, that is why I am currently working with the 3D rotation viewer. I have disregarded the DotCom files and will attempt to work from the ground up with the base Widget.Page. In so doing, I have the 3d page here, having replaced the UizeDotCom page instance with the base Widget.Page. This has removed the click functionality from the<code>
href="javascript://"</code> anchor tags. I am assuming, having attempted to compare the two .Page files, that the issue lies with the evaluator function. I have tried to use Uize.node.wire to listen for a click, but the first parameter expects an id, and I have none to give it. I have created generic id's and that does not work. The DotCom.Page.Example file has this: <code>
Uize.Node.find ({tagName:'a',className:/\b(tourPage|tourButton)\b/}),</code> that looks like it could be the culprit, but it also has this: <code>
_this._evaluator && _this.wireNode (Uize.Node.find ({tagName:'A',className:/\blinkedJs\b/}), 'click', function () {_this._evaluator (this.title || this.innerHTML)}) ;</code> which seems a more likely candidate. Later in the code the class calls a registerProperties function assigning 'evaluator' to the variable _evaluator. I have attempted to place the associated code in the base Widget.Page file, but there was no response when I tested. How to I achieve the interactivity between DOM initiated actions and the Uize code? First I would have to listen for a click on each/any of the class 'linkedJS'. The second bit of code above seems to do that, or at least identify the a tags associated with that className. Then I would have to pull the title attribute from that current event object (Again, the second bit of code seems to be doing that as well. Once I have done that I will have to make another call to the <code>
Uize.Node.wire</code> method utilizing the value obtained from the title attribute. I am almost positive that the second bit of code above handles the majority of my issue, but I am not fully understanding the syntax of everything so I cannot simply write my own method and it is a little difficult for me to pinpoint the specific bits of code I would need to pull from the DotCom.Page.Example file (and quite possibly from the DotCom.Page file as well) in order to achieve my goals. Any help?
/*<!--<code>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.rotationViewer {position:relative; width:640px;height:378px;border-style:solid;border-width:1px;margin:auto;margin-bottom:10px;cursor:pointer;}
.rotationViewer img {position:absolute; visibility:hidden;left:0;top:0;width:100%;height:100%;}</style></head><body>
<script type="text/javascript" src="js/Uize.js"></script>
<div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div> <div style="text-align:center;"><p>
<a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a> /
<a href="javascript://" class="linkedJs buttonLink" title="spin (-360,2700,Uize.Curve.easeInOutPow (4))">360 counter-clockwise</a> /
<a href="javascript://" class="linkedJs buttonLink" title="spin (1080,4000,Uize.Curve.easeInOutPow (4))">3 spins</a> /
<a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))">spin with bounce</a> /
<a href="javascript://" class="linkedJs buttonLink" title="spin (360,4000,Uize.Curve.Mod.bend (Uize.Curve.Rubber.easeOutElastic (.1),3))">spin with elasticity</a></p> </div>
<script type="text/javascript">
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))});
/*** wire up the page widget ***/
page.wireUi ();
//Uize.Node.wire ('','click',function () {alert ('You clicked me')});
}
});
/*CONTINUOUS ROTATION
Uize.Node.wire (
window,
'load',
function () {
setInterval(
function() { spin (360,2700,Uize.Curve.linear (4)) },
2700
)
});*/
</script>
</body>
</html></code>-->*/