Client Framework

Home » Client Framework » Forum » load flash chart

load flash chart

28 September, 2007 - 13:02 — kuena

Basically I want to load a different flash chart based on a radio selection but somehow I think I am missing something. Please assist. Below is a snippet of what I have.

//script
function loadChart(){
var selection = getSelectedRadioValue(selectedRadio);
var flash = document.getElementById("chart");
if(selection == "male"){
 flash.src = "assets/chart1.swf";
}
if(selection == "female"){
flash.src = "assets/chart2.swf";
 
}
//radio button
<input type="radio" name="radChart" value="gender" e:onclick="loadChart();"/>
//tag for loading chart
<b:flash id="chart" width="735px" height="350px">

‹ Drag and drop Skin Creation ›

load flash chart

9 October, 2007 - 12:31 — gao

Hi,

First, you need to set the value attribute on radio button, and in the click handler function you can target the source element from which the click event was triggered by using viewTarget property of the event object. The following code might help:

<script type="text/javascript">
   function loadChart(event){
        var selection = getSelectedRadioValue(event.viewTarget);
        var flash = document.getElementById("chart");
        if(selection == "male"){
         flash.src = "assets/chart1.swf";
        }
        if(selection == "female"){
         flash.src = "assets/chart2.swf";
        }
   }
   function getSelectedRadioValue(radio){
        //alert(radio.value);
        return radio.value;
   }
</script>

........


<label>male</label>
<input type="radio" name="radChart" value="male" e:onclick="loadChart(event);"/>
<label>female</label>
<input type="radio" name="radChart" value="female" e:onclick="loadChart(event);"/>
<b:flash id="chart" width="735px" height="350px">

clarity on missing part

10 October, 2007 - 00:32 — kuena

flash.src = "assets/chart2.swf";
The above fragment of the code essentially sets the source for my flash... However setting the source doesn't necessarily load the chart. This is really where my problem lies. I am grateful though for the help.

render new flash manually

10 October, 2007 - 11:55 — gao

Hi,

Indeed, setting the src attribute doesn't load the flash. Unfortunately, Backbase 4 currently doesn't have such a built-in function on b:flash widget.

However, we can build a new flash widget with this function by extending b:flash, here is the tdl definition:

<d:element name="myFlash" extends="b:flash">

        <d:attribute name="src">
                <d:changer type="application/javascript"><![CDATA[
                        this.viewNode.Movie = value;
                        if(this.viewNode.lastChild)
                                this.viewNode.lastChild.src = value;
                        call(this).reload();
                ]]></d:changer>
        </d:attribute>

        <d:method name="reload">
                <d:body type="application/javascript">
                        var sSrc = bb.uri.resolveUri(bb.callMethod(this,'getAttribute', ['src'] ), bb.getProperty(this, 'baseURI'));
                        var sHeight = bb.callMethod(this,'getAttribute', ['height'] );
                        var sWidth = bb.callMethod(this,'getAttribute', ['width'] );

                        var sSWF = '&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" codebase="http://active.macromedia.com/flash5/cabs/swflash.cab#version=6,0,0,0"';
                        sSWF += ' height="'+sHeight+'" width="'+sWidth+'"';
                        sSWF += '&gt;&lt;param name="wmode" value="transparent" /&gt;';
                        sSWF += '&lt;param name="movie" value="'+sSrc+'" /&gt;';
                        sSWF += '&lt;embed pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" swLiveConnect="true" wmode="transparent"';
                        sSWF += ' style="height: '+sHeight+';width:'+sWidth+';"';
                        sSWF += ' src="'+sSrc+'" /&gt;';
                        sSWF += '&lt;/object&gt;';
                        var oObj = bb.html.createElementFromString(sSWF);
                        var oSpan = document.createElement('span');
                        oSpan.style.display = 'none';
                        try{
                                oObj.insertBefore(oSpan, oObj.lastChild);
                        }catch(e){}

                        var sFlash = bb.xml.serialize(oObj);
                        var oFlashContainer = document.getElementById('flashContainer');
                        var oOldFlash = oFlashContainer.firstChild;
                        oFlashContainer.replaceChild(oObj, oOldFlash);
                </d:body>
        </d:method>

</d:element>

And in your application page, you need a div container for the flash in order to easily render the new flash:

<div id="flashContainer">
<yourNameSpacePrefix:myFlash id="chart" width="735px" height="350px" src="xxx.swf"/>
</div>

Finally in your loadChart:

<script type="text/javascript">
function loadChart(event){
        var selection = getSelectedRadioValue(event.viewTarget);
        //var flash = document.getElementById("chart");
        var flash = bb.getElementById('chart');
        if(selection == "male"){
                call(flash).setAttribute('src', 'xxx.swf');
        }
        if(selection == "female"){
                call(flash).setAttribute('src', 'yyy.swf');
        }
}
function getSelectedRadioValue(radio){
        return radio.value;
}
</script>

Thanks

10 October, 2007 - 22:40 — kuena

Thanks a lot! It works beautifully. However, for benefit of other users I did encounter a slight problem. In the part of the code that declares the variable sSWF the less than and greater than signs (< and > ) need to be replaced by their equivalent literals. That is < needs to be replaced by an ampersand (&) concatenated to a 'lt;' (sorry I tried writing out the equivalent literal but when I previewed my posting the conversion was made)

New flash chart

5 January, 2008 - 19:51 — alexf

Thanks a lot! It works beautifully!!!