| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | |
|---|
| 6 | <title>dojox.timing.Sequence class</title> |
|---|
| 7 | |
|---|
| 8 | <style type="text/css"> |
|---|
| 9 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 10 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 11 | </style> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|---|
| 14 | <!-- |
|---|
| 15 | <script type="text/javascript" src="../Sequence.js"></script> |
|---|
| 16 | --> |
|---|
| 17 | <script type="text/javascript"> |
|---|
| 18 | dojo.require("dojox.timing.Sequence"); |
|---|
| 19 | |
|---|
| 20 | var seqObj = null, |
|---|
| 21 | outputNode = null, |
|---|
| 22 | otherObj = null; |
|---|
| 23 | |
|---|
| 24 | dojo.addOnLoad(function(){ |
|---|
| 25 | outputNode = dojo.byId('logBox'); |
|---|
| 26 | seqObj = new dojox.timing.Sequence({}); |
|---|
| 27 | otherObj = new dojox.timing.Sequence({}); |
|---|
| 28 | }); |
|---|
| 29 | |
|---|
| 30 | function runSequence(){ |
|---|
| 31 | outputNode.innerHTML = ""; |
|---|
| 32 | seqObj.go(seq, function() { logMsg('done') }); |
|---|
| 33 | otherObj.go(otherSeq, function(){ console.log('other done'); }); |
|---|
| 34 | }; |
|---|
| 35 | |
|---|
| 36 | function logMsg(msg){ |
|---|
| 37 | outputNode.innerHTML += msg + "<br>"; |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | function showMessage(msg) { |
|---|
| 41 | logMsg(msg); |
|---|
| 42 | } |
|---|
| 43 | |
|---|
| 44 | function returnWhenDone() { |
|---|
| 45 | logMsg("in returnWhenDone"); |
|---|
| 46 | setTimeout(continueSequence, 1000); |
|---|
| 47 | return false; |
|---|
| 48 | } |
|---|
| 49 | |
|---|
| 50 | function continueSequence() { |
|---|
| 51 | // continue the sequence run |
|---|
| 52 | seqObj.goOn(); |
|---|
| 53 | } |
|---|
| 54 | // this is our example sequence array: |
|---|
| 55 | var seq = [ |
|---|
| 56 | { func: [showMessage, window, "i am first"], pauseAfter: 1000 }, |
|---|
| 57 | { func: [showMessage, window, "after 1000ms pause this should be seen"], pauseAfter: 2000 }, |
|---|
| 58 | { func: [showMessage, window, "another 2000ms pause and 1000ms pause before"], pauseAfter: 1000 }, |
|---|
| 59 | { func: [showMessage, window, "repeat 10 times and pause 100ms after"], repeat: 10, pauseAfter: 100 }, |
|---|
| 60 | { func: returnWhenDone } // no array, just a function to call |
|---|
| 61 | ]; |
|---|
| 62 | |
|---|
| 63 | var otherSeq = [ |
|---|
| 64 | { func: [dojo.hitch(console,"log","woot"), window, "woot2?"], pauseAfter: 1000, repeat:20 } |
|---|
| 65 | ]; |
|---|
| 66 | |
|---|
| 67 | </script> |
|---|
| 68 | </head> |
|---|
| 69 | <body class="tundra"> |
|---|
| 70 | |
|---|
| 71 | <h1>dojox.timing.Sequence tests</h1> |
|---|
| 72 | |
|---|
| 73 | <br>(example code in page source)<br> |
|---|
| 74 | <input type="button" onClick="runSequence()" value="Run Sequence"> |
|---|
| 75 | |
|---|
| 76 | <h3>Sequence output:</h3> |
|---|
| 77 | <div id="logBox" style="width:420px; height:250px; overflow:auto; border:1px solid #ccc;"> |
|---|
| 78 | </div> |
|---|
| 79 | |
|---|
| 80 | <p>TODO: maybe need to put an Animation sequence example here? seems much more robust |
|---|
| 81 | than using chains and combines with delays and durations to hack timing ... also, need |
|---|
| 82 | examples for stop() and other methods of class</p> |
|---|
| 83 | |
|---|
| 84 | |
|---|
| 85 | |
|---|
| 86 | </body> |
|---|
| 87 | </html> |
|---|
