flex2 - xml을 이용한 동적 메뉴 예제

기타/자잘한 Tip 2008. 2. 1. 19:36
flex2로 만든 Tree로 메뉴를 보여주는 샘플 입니다. xml에서 데이터를 읽어 오기 때문에 메뉴 이름이나 URL이 변경되더라도 다시 컴파일할 필요가 없습니다. 그리고 제목을 클릭해도 오픈/클로즈가 가능하고 링크가 있을 시에는 해당 링크가 오픈됩니다.


lmenu.mxml (flex2 소스 파일)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="initData()" width="180" height="200" fontSize="11">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import flash.net.navigateToURL;

            /* murl 파라미터에서 설정된 url로 부터 xml 데이터를 가져 온다. */
            private function initData():void {
                xmlService.url = Application.application.parameters.murl;
                xmlService.send();
            }
           
            /* xml 가져오기 오류 시 메시지 출력 */
            private function faultHandler(event:FaultEvent):void {
                mx.controls.Alert.show(event.fault.message);
            }
           
            /* Tree 마우스 클릭 이벤트 처리 */
            private function onItemClicked(event:Event):void {
                if(event.currentTarget.selectedItem.@data) {
                   
                    /* 현재 선택된 아이템의 데이터 값을 가져 온다. */
                    var dataString:String = "";
                    dataString = event.currentTarget.selectedItem.@data;
                   
                    /* data(link)가 있을 시에는 url을 연다 */
                    if(dataString.length > 0)
                    {
                        var url:URLRequest = new URLRequest(dataString);
                        navigateToURL(url);
                    }   

                    /* 아이템이 열려 있으면 닫고, 닫혀있으면 연다 */
                    var openFlag = !(menuTree.isItemOpen(event.currentTarget.selectedItem) == true);
                    menuTree.expandItem(event.currentTarget.selectedItem, openFlag);   
                }
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="xmlService" resultFormat="e4x" fault="faultHandler(event)" useProxy="false" />
    <mx:XMLListCollection id="xc" source="{xmlService.lastResult.item}" />

    <mx:Tree id="menuTree" labelField="@label" showRoot="true"
        x="0" y="0" width="180" height="200"
        dataProvider="{xc}" click="onItemClicked(event);" />
</mx:Application>
현재 창에서 링크가 열리기를 원하시면 navigateToURL(url)을 navigateToURL(url, "_self")로 변경합니다.

test.html (html 샘플 파일)
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flex Menu Test</title>
<script type="text/javascript">
function goURL(url)
{
    document.location.href = url;
}
</script>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="flexMenu" width="500" height="400"
            codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="[swf url]?murl=[xml url]" />
<param name="quality" value="high" />
<embed src="[swf url]?murl=[xml url]" quality="high" bgcolor="#efefef"
                width="500" height="400" name="flex" align="middle"
                play="true"
                loop="false"
                quality="high"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</body>
</html>
murl로 xml 파일의 url을 전달합니다.

[swf url] 컴파일된 swf 파일의 url입니다.
[xml url] 메뉴 구조가 정의된 xml의 url입니다. 구조는 아래와 같습니다.

src와 movie에서의 내용을http://www.domain1.com/lmenu.swf?murl=http://www.domain2.com/menu.xml 과 같이 입력하시면 됩니다.

menu.xml (메뉴 구조 샘플 파일)
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <item label="포탈 사이트">
        <item label="네이버" data="http://www.naver.com"/>
        <item label="다음" data="http://www.daum.net"/>
        <item label="야후" data="http://www.yahoo.co.kr"/>
        <item label="엠파스" data="http://www.empas.com"/>
    </item>
    <item label="블로그">
        <item label="내 블로그" data="http://www.cocoadev.co.kr"/>
        <item label="올블로그" data="http://www.allblog.net"/>
        <item label="티스토리" data="http://www.tisotry.com"/>
    </item>
</root>
서브 메뉴를 포함하고 있을 때는 "<item>[.. sub item]</item>"과 같이 포함하지 않으면 "<item />"과 같이 사용하시면 됩니다. 링크가 필요한 경우에는 item의 data 필드를 이용합니다.

crossdomain.xml
<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*"/>
</cross-domain-policy>

swf가 있는 도메인과 xml이 있는 도메인이 다를 경우에는 xml이 있는 곳에 위와 같은 crossdomain.xml 파일이 존재하여야 합니다.

'기타 > 자잘한 Tip' 카테고리의 다른 글

Dashcode로 올블로그 RSS 위젯 만들기  (2) 2008.05.22
자주 사용하는 MySQL 명령어  (4) 2008.02.28
PHP에서 RSS 가져오기  (0) 2007.12.08
OS X에 MySQL 설치  (4) 2007.10.12
특정 프로세스 확인 및 재실행 소스 (리눅스)  (9) 2007.10.10
AND