adding multiple widgets

[Aryan Duntley]

Ok, I'm at a little bit of a loss.  I know the information is there in the docs, but the docs are made more for seasoned javascripters.  I'm not that.  I could use a little direction from anyone out there willing to explain a little.  I am currently working with the 3d rotator, so that is my reference point.  That bit of code begins with a module.  I can only aliken this to a class.  Then you place in required external classes (I know them as includes).  Then you have your constructor method known here as the builder.  The builder instantiates a variable to a page widget.

 FIRST QUESTION: Do all functional widgets and Uize entities have to be instantiated as well?   or... Must I have only one page instance and then create widgets as children of this page? or... Do each of those have to be encapsulated in their own module class?


Now it seems that our constructor is all inclusive, there are no external classes, local to the Module class but out of scope to the builder.  Inside the builder we declare our global variables.  At this point we create another variable which is assigned as a child of page and it is a "Drag" type of widget.  The parameters are set forth here for cancelfade, releasetravel and the inner html of the div that will contain the set of images to be rotated, assigning a frame number dynamically to the image url.

Finally, before we fire off the page instance with wireUi we have two functions:

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)}   });

The first is able to access the rotationViewer child widget instance, but accesses frames by the use of "showNode". 

SECOND QUESTION:  If I wanted to access a specific frame within rotationViewer, how would I do this?  Node.getValue is only for obtaining the value of say, a form element.  So how would you access the node?  Maybe rotationViewer.Node['frame0] ??? or would I have to wire the specific node and make the call to it within the wiring method as is done in the second example above?  However, the second example contains two actions that access the rotationViewer itself (and not the individual nodes).  Even still, I attempted to add to the existing 'Drag Start' and 'Drag Update' with a 'click'.  Nothing happened.  Why?  I can only assume that because rotationViewer is an instance of Uize.Widget.Drag that it only has access to drag events.  This being so, the images themselves are nodes withing the rotationViewer Widget and that is a child of the page instance.  HOW would I access those individual images?  rotationViewer.findNode(tagName:'IMG',className:'someAddedClassForReferences') ???  Or maybe :
page.wireNode (Uize.Node.find ({tagName:'img',className:/\bjabawa\b/}), 'click',function (){alert("hey there");});  ***** THIS SEEMS TO WORK****


Now the QUESTION is this; How to I add additional widgets to these actions?  Considering I now have access to each image, how do I fire off another widget?  A zoom, a color shift/change, an image swap?

LAST QUESTION:  How do I add additional widgets to the application?  Must I create a new module?  May I add it to the current builder?  Do they all have to be children of the page instance (which is an instance of Uize.Widget.Page)?

[Mark Laurel]

Hi Aryan

Wow! It took forever to get a response back from the community that I
didn't think my post was 'alive'.
I've been busy working on other stuff & hadn't thought much about it
some since posting.

Some days ago, I viewed the code generated by the browser & saw
<div id="page_rotationViewer" class="rotationViewer
insetBorderColor"></div> stays "empty".

So I thought about 'cheating' and simply add the text LOADING inside
the <div id="page_rotationViewer"> as a shortcut
but had refrained from doing so because the images I'm using are PNGs
with some transparency & wasn't sure how
it would look.

You've been working harder on this more than I have, that I thought, I
best try to see if my theory
works & sure enough, it does!

No need to dig through UIZE code library!

Here's a link to my WIP site: www.marklaurel.com

Mark

> --
> UIZE JavaScript Framework...
>
> ...OFFICIAL WEB SITE: http://www.uize.com
> ...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
>
> UIZE JavaScript Framework Google Group...
>
> ...WEB SITE: http://groups.google.com/group/uize?hl=en
> ...TO POST: email to ui...@googlegroups.com
> ...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com

[Aryan Duntley]

PS, you may want to have your thingy auto-rotate.  Here is the code to allow for that:

I haven't played with it but you should only have to replace the original onload function with that below.  The drag should still work, but the continuous rotation may interfere???  If so, you would have to stop the setInterval when dragging and resume onRelease.

/*CONTINUOUS ROTATION*/
      Uize.Node.wire (
            window,
            'load',
            function () {
                  setInterval(
                        function() { spin (360,2700,Uize.Curve.linear (4)) },
                        2700
                  )
            });

--
Sincerely,
Aryan Duntley

[Mark Laurel]

Thanks for the feedback, admittedly after working on the site for
about a month I already want to change the design.

It's lacking IMO- but I've already spent too much time on it
(especially when I was playing around with WP &
reverse engineering one of their themes so I can use it as CMS). Maybe
I'll just change the color schemes & bgImg.

I digress, I'll check that auto rotate code when I redo the animation
& cut 18 frames from the animation, it's
@ 90 frames at the moment. I've noticed some lag on my machine & that
shouldn't happen (I would hate to see
how it behaves on slower machines). Interestingly, it stutters with
Safari on Windows7 but not on iPads.

BTW: IDT the continuous rotation shouldn't interfere since that's an
onload event & doesn't get called again once the user interacts
with the object- at least in theory.

One feature that I think would be cool to add is to allow users to
navigate from a specific frame, that's something I'd like to work on
if time allows.

Mark

[Aryan Duntley]

In my last post in the documentation, I showed how I worked on finding a way to recognize and click each individual frame.  That will give you your navigation from a specific frame.  Just add a conditional in the function to test for 'this' (I assume this would work).

[Mark Laurel]

Awesome! I'm gonna have to go through it in detail.

Working on getting a new client so I kinda put my stuff on pause.

[Mark Laurel]

@Aryan,

I finally had some time to dig into the 3D Rotator a bit. As far as recognizing a click on a specific image on a frame
(to zoom, etc.), I discovered it's going to be a bit tricky. If you click on the "Delve" > "Events" tab button on
www.uize.com, it records user interaction.

This is what it returns after a mouseDown & mouseUp (this essentially was just a click on the rotator):

19:49:06.378 : Started watching events
19:49:08.916 : PROPERTIES CHANGED: {inDrag:true,isTouch:false}
19:49:08.919 : PROPERTIES CHANGED: {cursor:'pointer'}
19:49:08.919 : INSTANCE EVENT: {name:'Before Drag Start',domEvent:{},source:{}}               <-- down event
19:49:08.970 : PROPERTIES CHANGED: {inCancel:false,inDrag:false,inReleaseTravel:false}  <-- up event
19:49:08.971 : INSTANCE EVENT: {name:'Drag Done',domEvent:{},source:{}}
19:49:08.972 : PROPERTIES CHANGED: {dragCancelled:false,dragStarted:false}

I thought I could delay the mouseUp event by using a timer & add a "onDblClick" event between down & up events-
but I started digging around the different modules; I didn't even know which part to play around with, I didn't want to
break anything & it was going to be time consuming.

I want to use the rotator as my primary navigation. So, I thought of an alternate solution for what I need. I added the
following conditions in the updateRotation function (I'm sure there's prolly a more efficient way to code the conditional
statements but this is a test).

    /*** 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));
        }

    /*** add frameNo check to turn navigation on/off ***/
        if ((frameNo > 14)&&(frameNo < 20))
            {document.getElementById('dHomeBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dHomeBtn').style.visibility = 'hidden';}
        if ((frameNo > 34)&&(frameNo < 40))
            {document.getElementById('dClientsBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dClientsBtn').style.visibility = 'hidden';}
        if ((frameNo > 44)&&(frameNo < 60))
            {document.getElementById('dProjectBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dProjectBtn').style.visibility = 'hidden';}
        if ((frameNo > 14)&&(frameNo < 20))
            {document.getElementById('dHomeBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dHomeBtn').style.visibility = 'hidden';}
        if ((frameNo > 34)&&(frameNo < 40))
            {document.getElementById('dClientsBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dClientsBtn').style.visibility = 'hidden';}
        if ((frameNo > 54)&&(frameNo < 70))
            {document.getElementById('dAboutBtn').style.visibility = 'visible';}
        else
            {document.getElementById('dAboutBtn').style.visibility = 'hidden';}
           
      }

I added the corresponding divs in the HTML & it plays nicely. The div can be overlayed
on top of the rotator itself (let's say for a zoom function).

Here's the test: http://marklaurel.com/newNav.php

Mark