1. mxml 설정
A. bridge/FABridge.as 와 FABridge.js를 소스폴더 안에 복사한다.
B. Application에 FABridge 객체를 넣어준다.
i. 여기에서는 flex라는 bridgeName으로 설정하였다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" xmlns:bridge="bridge.*">
<bridge:FABridge bridgeName="flex"/>
</mx:Application>
2. Js 설정
A. 어떤이유인지 아직 모르겠지만, flexBuilder 안에 있는 index.template.html에 내용을 추가하면 Bridge연결이 되지 않았다.
B. 그래서 별도의 html을 생성하여 그곳에서 작업하였다.
아래는 생성한 html 페이지 입니다.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="JavaScript" src="bridge/FABridge.js"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 28;
// -----------------------------------------------------------------------------
// -->
// global variable
var flexApp;
var initCallback = function() {
flexApp = FABridge.flex.root();
return;
}
// register the callback to our Flex application with the 'bridgeName' of 'flex'
FABridge.addInitializationCallback( "flex", initCallback );
//button 클릭시 Array Flex로 전달
var write_send = function(){
var arr = new Array(
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
);
flexApp.setChartData(arr);
}
</script>
</head>
<body scroll="no">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="FABridge" width="600" height="600"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="FABridge.swf?bridgeName=flex" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="FABridge.swf?bridgeName=flex" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="FABridge" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
<br>
<input type="button" value = "FLEX 호출" onclick="javascript:write_send();"><br>
</body>
</html>
C. 위에서 빨간색으로 된 부분이 포인트 입니다. ㅎㅎ
1. flexApp 변수에 FABridge.”mxml에서 설정한 bridgeName”.root();로 swf를 설정합니다.
var flexApp;
var initCallback = function() {
flexApp = FABridge.flex.root();
return;
}
FABridge.addInitializationCallback( "flex", initCallback );
이렇게 하면, FABridge를 사용하기 위한 초기설정이 끝납니다.
2. swf가 삽입되는 <object 태그안에서 param 태그와 embed 태그에 아까 flex에서 설정한 bridgeName으로 ?bridgeName=flex 를 추가해줍니다.
D. 하단에 있는 FLEX 호출 버튼을 클릭하면, JavaScript의 write_send()함수를 호출하게 됩니다.
var write_send = function(){
var arr = new Array(
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
);
flexApp.setChartData(arr);
}
arr 이라는 이름으로 배열을 생성해서 챠트에 들어갈 데이터를 생성해주고,
flexApp.setChartData(arr)를 통해 배열을 전달합니다.
flexApp는 처음에 셋팅한 swf입니다.
그뒤의 setChartData는 mxml내의 함수입니다.
바로 flex객체의 property에 접근할수 있습니다.
이에는 명명법이 존재하는데요,
setFlexid();
getFlexid();
입니다. get / set 뒤에 플렉스에서 선언한 객체의 ID 를 적으시면 됩니다.
이때 get / set 뒤의 첫글자는 무조건 대문자로 적어주셔야합니다.
예를들어,
var swfObj = flexApp.getMyChart();
var objWidth = swfObj.getWidth();
이렇게 하면, swf안의 myChart 객체를 swfObj에 저장하고, . 연산자로 property에 접근해
width를 가져오게 됩니다.
swfObj.setWidth( “500” );
하게되면, width에 500을 바로 설정합니다.
진짜 편리한거 같습니다. ㅎㅎ
완성된 mxml을 보면,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" xmlns:bridge="bridge.*"
backgroundColor="0xffffff">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public var expenses:Array;
public function setChartData( data:Array ):void
{
Alert.show(data.length.toString());
expenses = data;
}
]]>
</mx:Script>
<bridge:FABridge bridgeName="flex"/>
<mx:LineChart id="myChart"
dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"/>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Application>