Menu
▾
▴
[Dynapi-CVS] CVS: dynapi2x/examples dynapi.api.dynlayer-anchor.html,1.2,1.3 dynapi.api.dynlayer-create.html,1.2,1.3 dynapi.api.dynlayer-destroy.html,NONE,1.1 dynapi.api.dynlayer-slide.html,1.2,1.3 dynapi.api.ext.dragevent.html,1.2,1.3 dynapi.api.ext.inline.html,NONE,1.1 dynapi.api.mouseevent.html,1.2,1.3 dynapi.fx.bezier.html,NONE,1.1 dynapi.fx.motionx.html,NONE,1.1 dynapi.fx.pathanim-glide.html,1.2,1.3 dynapi.fx.pathanim-slide.html,1.2,1.3 dynapi.fx.pathanim.html,1.2,1.3 dynapi.fx.timerx.html,NONE,1.1 dynapi.gui.graphics.html,1.2,1.3 dynapi.library-file1.js,1.2,1.3 dynapi.library-file2.js,1.2,1.3 dynapi.library-load.html,1.2,1.3 dynapi.util.ioelement-post.html,NONE,1.1 dynapi.util.ioelement-testfile.html,1.2,1.3 dynapi.util.ioelement.html,1.2,1.3 ioelement-client.html,NONE,1.1 ioelement-server.html,NONE,1.1
Update of /cvsroot/dynapi/dynapi2x/examples
In directory usw-pr-cvs1:/tmp/cvs-serv19326/examples
Added Files:
dynapi.api.dynlayer-anchor.html
dynapi.api.dynlayer-create.html
dynapi.api.dynlayer-destroy.html
dynapi.api.dynlayer-slide.html dynapi.api.ext.dragevent.html
dynapi.api.ext.inline.html dynapi.api.mouseevent.html
dynapi.fx.bezier.html dynapi.fx.motionx.html
dynapi.fx.pathanim-glide.html dynapi.fx.pathanim-slide.html
dynapi.fx.pathanim.html dynapi.fx.timerx.html
dynapi.gui.graphics.html dynapi.library-file1.js
dynapi.library-file2.js dynapi.library-load.html
dynapi.util.ioelement-post.html
dynapi.util.ioelement-testfile.html dynapi.util.ioelement.html
ioelement-client.html ioelement-server.html
Log Message:
initial import
--- NEW FILE ---
<html>
<head>
<title>DynAPI - DynLayer Destroy</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.functions');
</script>
<script language="Javascript">
dynapi.onLoad(init);
function init() {
document.countform.counttext.value = 0;
};
var counter = 0;
function generate(n) {
for (var i=0;i<n;i++) {
var d = new DynLayer();
d.setBgColor(dynapi.functions.getRandomColor());
d.setSize(10+80*Math.random(),10+80*Math.random());
d.setLocation(130+500*Math.random(),500*Math.random());
dynapi.document.addChild(d);
counter++;
document.countform.counttext.value = counter;
}
}
var timer;
function start() {
timer = setInterval('generate(10)',1);
}
function stop() {
clearInterval(timer);
}
function destroyAll() {
dynapi.document.destroyAllChildren();
document.countform.counttext.value = 0;
}
</script>
</head>
<body bgcolor="#999999">
<p><a href="javascript:start()">Start generation</a><br>
<a href="javascript:stop()">Stop generation</a><br>
<a href="javascript:destroyAll()">Destroy all</a><br>
<form name="countform">
<input type=text name="counttext" size=5>
</form>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>DynAPI Examples - DynLyaer [Inline]</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.library');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.api.DynEvent');
dynapi.library.include('dynapi.api.DynDocument');
dynapi.library.include('dynapi.api.DynLayer');
dynapi.library.include('dynapi.api.ext.DynLayer_inline');
</script>
<script language="JavaScript" src="../src/dynapi/api/mouse_ns4.js"></script>
<script language="Javascript">
dynapi.onLoad(init);
function init() {
mylayer = DynLayer.getInline("mylayer");
mychild = DynLayer.getInline("mychild", mylayer);
var el = {
onmousedown : function(e) {
dynapi.debug.print('mousedown on '+e.getSource().id)
e.preventBubble();
}
}
mylayer.addEventListener(el);
mychild.addEventListener(el);
};
function checkProperties(dlyr) {
var str = 'id = '+dlyr.id+'\n'+
'parent id = '+dlyr.parent.id+'\n'+
'x = '+dlyr.x+'\n'+
'y = '+dlyr.y+'\n'+
'w = '+dlyr.w+'\n'+
'h = '+dlyr.h+'\n'+
'clip = '+dlyr.clip+'\n'+
'z = '+dlyr.z+'\n'+
'visible = '+dlyr.visible+'\n'+
'bgColor = '+dlyr.bgColor+'\n'+
'bgImage = '+dlyr.bgImage+'\n'+
'html = '+dlyr.html+'\n';
alert(str);
}
</script>
<style type="text/css">
<!--
#mylayer {position:absolute; left:250px; top:50px; width:200px; height:200px; clip:rect(0px 200px 200px 0px); background-color:red; layer-background-color:red;}
#mychild {position:absolute; left:50px; top:50px; background-color:yellow; z-index:5; layer-background-color:yellow; layer-background-image:url("../src/dynapi/images/blank.gif");}
-->
</style>
</head>
<body bgcolor="#999999">
<p>Check Properties of:<br>
<a href="javascript:checkProperties(mylayer)">mylayer</a><br>
<a href="javascript:checkProperties(mychild)">mychild</a>
<div id="mylayer">
mylayer is inline
<div id="mychild">
mychild is inline
</div>
</div>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>DynAPI - Bezier Animation</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.fx.PathAnimation');
dynapi.library.include('dynapi.fx.Bezier');
</script>
<script language="Javascript">
//var controlPoints = [150,150, 200,400, 250,100, 500,300];
//var steps = 25;
var path;
function drawBezier() {
var controlPoints = eval(document.b.cps.value);
var steps = parseInt(document.b.steps.value);
// results in total of steps+1 points along path, includes
// includes starting and ending points
path = Bezier(controlPoints, steps);
for (var i=0;i<path.length/2;i++) {
var x = path[i*2];
var y = path[i*2+1];
dynapi.document.addChild(new DynLayer('',x,y,2,2,'black'));
}
for (var i=0;i<controlPoints.length/2;i++) {
var x = controlPoints[i*2];
var y = controlPoints[i*2+1];
var color = 'red';
if (i==0 || i==controlPoints.length/2-1) color = 'yellow'
dynapi.document.addChild(new DynLayer('',x-2,y-2,5,5,color));
}
}
var playblock = dynapi.document.addChild(new DynLayer('',0,0,15,15,'red'));
playblock.setVisible(false);
//var pathanim = PathAnimation(playblock);
function animateStart() {
if (path) {
playblock.setVisible(true);
var i = pathanim.add(path, true);
pathanim.play(i);
}
}
function animateStop() {
playblock.setVisible(false);
pathanim.stop();
}
function clearPage() {
for (var i=0;i<dynapi.document.children.length;i++) {
dynapi.document.children[i]._remove();
}
}
</script>
</head>
<body bgcolor="#999999">
<form name=b>
Control Points: <input type=text name="cps" value="[150,150, 200,400, 250,100, 500,300]" size=50><br>
Steps: <input type=text name="steps" value="25" size=4><br>
<input type=button value="Draw" onclick="drawBezier()"><br>
<input type=button value="Clear Page" onclick="clearPage()"><br>
<input type=button value="Start Animation" onclick="animateStart()"><br>
<input type=button value="Stop Animation" onclick="animateStop()"><br>
</form>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>dynapi Examples - MotionX Class</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.library');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.api.ext.DynKeyEvent');
dynapi.library.include('dynapi.fx.TimerX');
dynapi.library.include('dynapi.fx.MotionX');
</script>
<script language="Javascript">
var score,hits=0
ball= new DynLayer(null,350,100,10,10,'#000000')
ball.setID('ball');
score= new DynLayer("Score:0",350,150,70,20)
score.setID('score')
pad=new DynLayer("<font face=arial size=3><b><<oo>></b></font>",155,250,60,20)
pad.setID('p');
blockT=new DynLayer(null,105,60,465,5,'#c0c0c0');
blockT.setID('t');
blockL=new DynLayer(null,105,60,5,205,'#c0c0c0');
blockL.setID('l');
blockB=new DynLayer(null,105,265,465,10,'#c0c0c0');
blockB.setID('b');
blockR=new DynLayer(null,565,60,5,205,'#c0c0c0');
blockR.setID('r')
blockA=new DynLayer(null,140,90,40,30,'#c0c0c0');
blockA.setID('a');
blockC=new DynLayer(null,125,195,80,20,'#c0c0c0');
blockC.setID('c');
blockD=new DynLayer(null,470,190,40,30,'#c0c0c0');
blockD.setID('d');
blockE=new DynLayer(null,440,90,80,20,'#c0c0c0');
blockE.setID('e');
blockT.makeSolid()
blockL.makeSolid()
blockB.makeSolid()
blockR.makeSolid()
blockA.makeSolid()
blockC.makeSolid()
blockD.makeSolid()
blockE.makeSolid()
pad.makeSolid()
evn={}
evn.oncollide=function(e) {
var me=e.getSource();
var blocks="adce"
if (blocks.indexOf(me.id)>=0) {
me.setBgColor('#FFCC00')
setTimeout(me+'.setBgColor("#c0c0c0");',500)
}else if (me.id=="p") {
me.setHTML("<font color=#008000 face=arial size=3><b><<00>></b></font>")
setTimeout(me+'.setHTML("<font face=arial size=3><b><<oo>></b></font>");',500)
}else {
me.setBgColor('#0000FF')
setTimeout(me+'.setBgColor("#c0c0c0");',500)
if (me.id=="b") {
hits--
score.setHTML("Score:"+hits)
}
}
}
blockT.addEventListener(evn)
blockL.addEventListener(evn)
blockB.addEventListener(evn)
blockR.addEventListener(evn)
blockA.addEventListener(evn)
blockC.addEventListener(evn)
blockD.addEventListener(evn)
blockE.addEventListener(evn)
pad.addEventListener(evn)
evn={}
evn.onkeydown=function(e) {
alert()
var me=dynapi.document.getAll()['p']
if ((e.which==39||e.charKey=='6') && (me.x+me.w+20)<=595) {
me.moveBy(20,0);return true
}else if ((e.which==37||e.charKey=='4')){
if (me.x-20>=145) {
me.moveBy(-20,0);return true
}else{
me.setLocation(145)
}
}
}
dynapi.document.addEventListener(evn);
//------- Add Listener to ball ------------------
evn={}
evn.ontimer=function(e){
var me=e.getSource();
var x=me.x
var y=me.y
x=x+me.fx
y=y+me.fy
if(x>595){x=150;y=80}
me.setLocation(x,y)
}
evn.oncollide=function(e){
var me=e.getSource();
var obs=me.getObstacle()
xx="EW";yy="NS"
if (xx.indexOf(me.getImpactSide())>=0) me.fx=me.fx*-1
if (yy.indexOf(me.getImpactSide())>=0) me.fy=me.fy*-1
status = me.id +" collides with "+obs.id
setTimeout("status=''",1500)
xx="adce"
if (xx.indexOf(obs.id)>=0) {hits++}
score.setHTML("Score:"+hits)
}
ball.addEventListener(evn)
ball.makeSolid()
ball.fx=10;ball.fy=10
ball.startTimer(60)
dynapi.document.addChild(blockT)
dynapi.document.addChild(blockL)
dynapi.document.addChild(blockB)
dynapi.document.addChild(blockR)
dynapi.document.addChild(blockA)
dynapi.document.addChild(blockC)
dynapi.document.addChild(blockD)
dynapi.document.addChild(blockE)
dynapi.document.addChild(ball)
dynapi.document.addChild(pad)
dynapi.document.addChild(score)
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
dynapi.document.insertAllChildren();
</script>
<table border="0" width="100%">
<tr>
<td width="100%"><font face="Arial" size="4"><b>Motion Extension (MotionX) </b></font></td>
</tr>
<tr>
<td width="100%"><hr size="1" color="#000000">
</td>
</tr>
<tr>
<td width="100%"><table border="0" height="209">
<tr>
<td width="103" height="201" valign="top"><font face="Arial" size="2"> </font></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%" colspan="2"><hr size="1" color="#000000">
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<b><font face="Arial" size="2">Remarks</font>
</b><font face="Arial" size="2"><br>
MotionX is an extension to the DynLayer API which is used to make a layer appears to be
solid, and will trigger a oncollide() event whenever collisions occurs<br>
</font> </td>
</tr>
<tr>
<td width="53%" valign="top"><font face="Arial" size="2">Making a layer solid does not
prevent other layers from passing through it. It simple means that the layer will receive
an event whenever it comes in contact with another solid layer. This also enables the
layer to tell the direction in which it is moving. MotionX was design mainly for
creating games with dynapi.</font> <p><font face="Arial" size="2"><b>Getting the direction
of a layer:<br>
</b>When the getDirection() method is called a string data-type is returned which can be
used to tell the direction in which the layer is moving. The following are some possible
directions returned by the getDirection() method:</font></p>
<blockquote>
<table border="0" width="202">
<tr>
<td width="35"><font face="Arial" size="2">N </font></td>
<td width="153"><font face="Arial" size="2">North</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">S </font></td>
<td width="153"><font face="Arial" size="2">South</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">E </font></td>
<td width="153"><font face="Arial" size="2">East</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">W</font></td>
<td width="153"><font face="Arial" size="2">West</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">NE </font></td>
<td width="153"><font face="Arial" size="2">North East</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">NW </font></td>
<td width="153"><font face="Arial" size="2">Noth West</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">SE </font></td>
<td width="153"><font face="Arial" size="2">South East</font></td>
</tr>
<tr>
<td width="35"><font face="Arial" size="2">SW </font></td>
<td width="153"><font face="Arial" size="2">South West</font></td>
</tr>
</table>
</blockquote>
<p><font size="2" face="Arial">A more accurate way of knowing the
direction in which the layer is moving can be done by calling
the getDirectionAngle() method. This method returns an angle ranging
from 0 to 259</font>. <br>
</p>
<p><font face="Arial"><b><font size="2" face="Arial">Example:</font></b><br>
<font size="2">To play the game above use the left and right arrow keys (or the numbers 4
& 6 when using NS4) to prevent the ball from touching the base line.<br>
<i>Note: The game has some minor flaws, but works great for a demonstration. Enjoy!</i></font></font></p>
</td>
<td width="47%" valign="top"><table border="0" width="100%" bgcolor="#000000" cellspacing="1">
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Public
Properties & Methods</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><ul>
<li><font size="2" face="Arial">void <b>makeSolid</b>()</font></li>
<li><font size="2" face="Arial">string <b>getImpactSide</b>()<br>
<font color="#333333">returns the impacted side of the layer. Example: N, S, E or W</font></font></li>
<li><font size="2" face="Arial">dynlayer <b>getObstacle</b>()<br>
<font color="#333333">returns the colliding DynLayer</font></font></li>
<li><font size="2" face="Arial">string <b>getDirection</b>()<br>
<font color="#333333">returns the direction in which the layer is moving. Example N, S, E,
W, etc.</font></font></li>
<li><font color="#333333" size="2" face="Arial">int <b>getDirectionAngle</b>()<br>
returns the angle in which the layer is moving </font></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Events</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><ul>
<li><font size="2" face="Arial">oncollide()</font></li>
<li><font size="2" face="Arial">onmove()</font></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Minimum
Requirements</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<ul>
<li><font size="2" face="Arial">DynLayer </font></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><font face="Arial" color="#000080" size="2"><b>Known
Issues</b></font></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>DynAPI Examples - TimerX Class</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.library');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.fx.TimerX');
</script>
<script language="Javascript">
myLayer=new DynLayer(null,135,100,130,50,'#00A000')
myClock=new DynLayer(null,270,100,200,50,'#0000A0')
myLayer.addEventListener({
ontimer:function(e){
var o=e.getSource()
var src='<font size=2 face=arial color=#ffffff> Tick @ 200ms <br> Tick count='+o.getTickCount()+'</font>'
o.setHTML(src)
}
})
myClock.addEventListener({
ontimer:function(e){
var o=e.getSource()
var src='<font size=2 face=arial color=#ffffff> '+new Date()+'</font>'
o.setHTML(src)
}
})
myLayer.startTimer(200)
myClock.startTimer(1000)
dynapi.document.addChild(myLayer)
dynapi.document.addChild(myClock)
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
<table border="0" width="100%">
<tr>
<td width="100%"><font face="Arial" size="4"><b>Timer Extension (TimerX) Class</b></font></td>
</tr>
<tr>
<td width="100%"><hr size="1" color="#000000">
</td>
</tr>
<tr>
<td width="100%"><table border="0">
<tr>
<td width="103" height="134" valign="top"></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%" colspan="2"><hr size="1" color="#000000">
</td>
</tr>
<tr>
<td width="100%" colspan="2"><b><font face="Arial" size="2">Remarks</font></b><font face="Arial" size="2"><br>
The TimerX Class is a simple extension to the DynLayer Class which is used to trigger timer events at set intervals.
</font> </td>
</tr>
<tr>
<td width="53%" valign="top"><font face="Arial" size="2">Example:</font> <blockquote>
<p><font face="Arial" size="2">myLayer=new DynLayer(null,135,70,100,50)<br>
myLayer.setBgColor('#000000')</font></p>
<p><font face="Arial" size="2">var e={}<br>
e.ontimer=function(e){<br>
var o=e.getSource()<br>
var src='<font size=2 color=#ffffff>'<br>
src+='o.getTickCount()+'</font>'<br>
o.setHTML(src)<br>
}<br>
myLayer.addEventListener(e)<br>
myLayer.startTimer(1000)</font></p>
<p><font face="Arial" size="2">dynapi.document.addChild(myLayer)</font></p>
</blockquote>
<p> </p>
<p><font face="Arial" size="2"><br>
</font></td>
<td width="47%" valign="top"><table border="0" width="100%" bgcolor="#000000" cellspacing="1">
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Public
Properties & Methods</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><ul>
<li><font face="Arial" size="2">void <b>startTimer</b>(int interval)<br>
<font color="#333333">enable timer and set the interval</font></font></li>
<li><font face="Arial" size="2">void <b>stopTimer</b>()<br>
<font color="#333333">disable timer</font></font></li>
<li><font face="Arial" size="2">void <b>setTimerInterval</b>(int interval)</font></li>
<li><font face="Arial" size="2">int <b>getTimerInterval</b>()</font></li>
<li><font face="Arial" size="2">int <b>getTickCount</b>()<br>
<font color="#333333">returns total number of ticks since the last startTimer() call </font></font></li>
<li><font face="Arial" size="2">int <b>resetTickCount</b>()<br>
<font color="#333333">resets the tick count to 0</font></font></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Events</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><ul>
<li><font face="Arial" size="2">ontimer()</font></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><b><font face="Arial" color="#000080" size="2">Minimum
Requirements</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><font face="Arial" size="2"><ul><li>dynapi.api </li></ul></font></td>
</tr>
<tr>
<td width="100%" bgcolor="#E0E0E0"><font face="Arial" color="#000080" size="2"><b>Known
Issues</b></font></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"><font face="Arial" size="2">[none]</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>DynAPI - I/O Element [Post]</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.api');
dynapi.library.include('IOElement');
</script>
<script language="Javascript">
var ioelement = new IOElement(true);
dynapi.onLoad(init);
function init() {
}
function loadtest() {
var fn = function(e, success) {
if (success) {
var o = e.getSource();
var response = o.getVariable('response');
alert('The server said:\n' + response);
}
}
var f = document.forms.iotest;
var data = {
name : f.name.value,
color : f.color.options[f.color.selectedIndex].value
}
var file = f.file.options[f.file.selectedIndex].value;
var method = f.method.options[f.method.selectedIndex].value;
if (method=="post") ioelement.post(file, data, fn);
else ioelement.get(file, data, fn);
}
</script>
</head>
<body bgcolor="#999999">
<form name="iotest">
Select the file to load: <select name="file">
<option value="dynapi.util.ioelement-postresponse.php">dynapi.util.ioelement-postresponse.php</option>
<option value="dynapi.util.ioelement-postresponse.asp">dynapi.util.ioelement-postresponse.asp</option>
</select><br>
Method: <select name="method">
<option value="post">post</option>
<option value="get">get</option>
</select>
<p>Your Name: <input type=text name="name" size=20 value="My Name"><br>
Favorite Color: <select name="color">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
</select><br>
<a href="javascript:loadtest()">submit</a>
</form>
</body>
</html>
--- NEW FILE ---
<html>
<head>
<title>DynAPI - I/O Element Client</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.api');
dynapi.library.include('IOElement');
</script>
<script language="Javascript">
// create a hidden IOElement
// you do not have to add the IOElement to dynapi.document manually
// it is done automatically when "true" is passed to the constructor
hidden_io = new IOElement(true);
function sendtest(vl,m) {
var fn = function(e) {
var o = e.getSource();
var result=o.getResult()
alert('IOElement load handler found these values:\nboolValue = ' + o.getScope().boolValue+'\nrandValue = ' + o.getScope().randValue+'\nmyValue = ' + o.getScope().myValue);
if (result) alert(result)
}
hidden_io.send("ioelement-server.html?myvalue=12345",vl,fn,m);
}
</script>
</head>
<body bgcolor="#999999">
Load "ioelement-server.html" using IOElement (hidden mode):<br>
<form name="frm">Enter some text to send:<br><input type="textbox" name="txt"><br>
<a href="javascript:sendtest(document.forms['frm']['txt'].value,'get')">Send Data (using GET Method)</a> |
<a href="javascript:sendtest(document.forms['frm']['txt'].value,'post')">Send Data (using POST Method)</a><br>
<br>Check the Debug window for displayed data
</form>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
--- NEW FILE ---
<html>
<script>
<!--
var dynapi = parent.dynapi;
var ioelement;
if (dynapi) {
ioelement = parent.IOElement.notify(this, init); // run init() when this file loads
}
else alert('Error: aa no dynapi');
// you can server-generate js variables and retrieve them in the load handler
var boolValue = true;
var randValue = Math.random();
// obtain arguments passed in the url
if (dynapi) {
var args = dynapi.functions.getURLArguments(this);
var data=args['ioData']
if (data) data=data.replace(/\+/g,' ') // replace + with a blank space for GET post
dynapi.debug.print('Data sent by from main page:'+data)
}
function init() {
dynapi.debug.print('loaded ioelement-testfile.html');
}
//-->
</script>
<body>
<script>
<!--
if (ioelement) {
// fix iframe bgcolor to parent IOElement's bgcolor, IE/Moz only
if (!dynapi.ua.ns4) this.document.body.style.backgroundColor = ioelement.getBgColor();
document.write('<b>server-generated values:</b><br>');
document.write('boolValue = '+boolValue+'<br>');
document.write('randValue = '+randValue+'<br>');
document.write('<b>value passed in the URL:</b><br>');
document.write('myvalue = '+args['myvalue']+'<br>');
document.write('<b>values used by IOElement:</b><br>');
document.write('ioLoadID = '+args['ioLoadID']+'<br>');
document.write('ioElmID = '+args['ioElmID']+'<br>');
var data=args['ioData']
if (data) data=data.replace(/\+/g,' ') // replace + with a blank space for GET post
// write output form - a server-side script can generate this read out
document.write('<form name="ioDataForm"><textarea name="ioResult">Server Says Hello, \n\n You have sent the following info :'+ (data||'')+'.\n\nNote: Because this is not a real server-side script, you only be able to see data sent via the GET method.</textarea></form>')
}
//-->
</script>
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</body>
</html>
|
