<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Fri Apr 27 2012 16:10:19 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: Test of jQuery SWFObject plugin
Description:
Url: http://jquery.thewikies.com/swfobject/
InternalName:
YoutubeId:
Keywords:
My Notes
--------
How to run the app that's included in this workbook ::
Click the Run button above.
Click the Step button in the overlay.
You should see a Flash image of a small house.
How to change the code that draws the Flash image ::
Scroll down to the Housebehavior editor, and start typing.
The simplest and least error-prone things to change are colors, which are set using beginFill().
You can also try changing the various x and y coordinates.
You can change the structure of the house by commenting-out, deleting, or adding new nodes in the PhysicalSystem editor.
In all of the editors you can press Ctrl-Z to undo.
According to the jQuery SWFObject plugin site, SWFObject is "an easy-to-use and standards-friendly method to embed Flash content reliably within all major browsers", while the jQuery SWFObject plugin makes the "unique functionality of SWFObject available through jQuery".
I've used the jQuery plugin before ::
http://www.primordion.com/Xholon/webEdition/HTModL/dione/
Here I explore its use within a Xholon Workbook. In this workbook, all of the JavaScript code is included within an editor on this page, and can be edited.
See also ::
http://code.google.com/p/swfobject/
https://github.com/swfobject/swfobject
http://en.wikipedia.org/wiki/SWFObject
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<House/>
<Floor>
<FirstFloor/>
<SecondFloor/>
<Roof/>
</Floor>
<Room>
<BedRoom/>
<LivingRoom/>
<FrontEntrance/>
<Kitchen/>
</Room>
<Opening>
<Window/>
<Door/>
</Opening>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<House>
<Roof/>
<SecondFloor>
<BedRoom>
<Window/>
</BedRoom>
<BedRoom>
<Window/>
</BedRoom>
<BedRoom>
<Window/>
</BedRoom>
</SecondFloor>
<FirstFloor>
<LivingRoom>
<Window/>
</LivingRoom>
<FrontEntrance>
<Door/>
</FrontEntrance>
<Kitchen>
<Window/>
</Kitchen>
</FirstFloor>
</House>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<Housebehavior implName="lang:webEditionjs:inline:"><![CDATA[
function postConfigure() {
this.xholoncreationservice('requireScript', 'jquery.swfobject.1-1-1.js');
}
function act() {
if (this.application("getTimeStep") == 0) {
function view() {
var mySWFDiv = $("div#mySVGDiv");
mySWFDiv.empty();
mySWFDiv.flash({
swf: 'FlashGraphics.swf',
height: 230,
width: 320
});
// TODO check if flash is ready, rather than use a timer (delay required for IE)
window.setTimeout(start, 1000);
}
function start() {
drawHousePart($("div#mySVGDiv"), $('div.House'), 0, 30);
}
function drawHousePart(flashGraphics, housePart, x, y) {
//println("drawHousePart " + housePart.attr('class'));
switch (housePart.attr('class').split(' ',1)[0]) {
case 'House':
housePart.children('div').each(
function() {
drawHousePart(flashGraphics, $(this), x, y);
}
);
break;
case 'Roof':
flashGraphics.flash( function() {
this.beginFill(0x000000);
this.moveTo(x,y);
this.lineTo(160,0);
this.lineTo(320,y);
this.lineTo(x,y);
this.endFill();
});
break;
case 'SecondFloor':
var xx = x+10;
var yy = y;
flashGraphics.flash( function() {
this.beginFill(0xFAEBD7);
this.drawRect(xx,yy,300,100);
this.endFill();
});
x += 20;
y += 10;
housePart.children('div').each(
function() {
drawHousePart(flashGraphics, $(this), x, y);
x += 100;
}
);
break;
case 'FirstFloor':
var xx = x+10;
var yy = y+100;
flashGraphics.flash( function() {
this.beginFill(0xFAEBD7);
this.drawRect(xx,yy,300,100);
this.endFill();
});
x += 20;
y += 110;
housePart.children('div').each(
function() {
drawHousePart(flashGraphics, $(this), x, y);
x += 100;
}
);
break;
case 'BedRoom':
case 'LivingRoom':
case 'FrontEntrance':
case 'Kitchen':
flashGraphics.flash( function() {
this.beginFill(0xF5F5DC);
this.drawCircle(x+40,y+40,40);
this.endFill();
});
housePart.children('div').each(
function() {
drawHousePart(flashGraphics, $(this), x, y);
}
);
break;
case 'Window':
flashGraphics.flash( function() {
this.beginFill(0x87CEEB);
this.drawRect(x+20,y+10,40,40);
this.endFill();
});
break;
case 'Door':
flashGraphics.flash( function() {
this.beginFill(0x8FBC8F);
this.drawRect(x+20,y+10,40,70);
this.endFill();
});
break;
default: break;
}
} // end drawHousePart()
view();
} // end if
} // end act()
]]></Housebehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Click Step to replace this SVG square with a SWF house</title>
<rect id="PhysicalSystem/House" fill="#98FB98" height="50" width="50" x="25" y="0"/>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>