RemoteObject를 이용한 Railo와 Flex의 연동 - Blog의 제목을 DataGrid에 뿌려보기
Category : ColdFusion , Flash/RIA , Railo Comments : 댓글쓰기 Posted by 장창학 at 7:24 AM
Bookmark and Share

아.. 정말이지 이 예제를 만들어 보면서 끙끙댔습니다. Flex에 대한 지식도 매우 얇거니와 그나마 안한지 3년이 넘어가서 간단한 것(?) 하나 만들기 정말 힘드네요.ㅋㅋ 집에 쳐박혀 있던 Flex책들을 다시 꺼네여 좀 읽어 본 후 한번 만들어 봤습니다. 사실 ColdFusion에서야 CFC(ColdFusion Component)를 만드는 것이야 일도 아닙니다만, 젠장.. Flex로 Client 꾸미는 것이 일이네요.(그래서 제가 Flex나 Flash와 같이 Actionscript에 흥미가 없나 봅니다. ㅠㅠ)

암튼 지난 Railo에서 Flex시작!! 이란 포스트에서 처음으로 Flex와 Railo를 연동해봤는데요. Adobe ColdFusion의 경우 이미 MX버전부터 Flash Remoting을 지원하고 있었고, 버전 8부터는 아예 LCDS를 내장해버려(물론 라이센스를 별도로 구매해야 쓸 수 있습니다) Flex와의 연동 뿐만 아니라 그냥 mxml컴파일까지 ColdFusion서버에서 처리하면 되었습니다. Railo의 경우 버전 3.1부터 BlazeDS를 내장해서 mxml컴파일까지 지원하길 바랬는데 그냥 Flash Remoting만 지원하고 있습니다. 물론 Railo 역시 이미 버전2부터 Flash Remoting을 지원했었고요. 다만 3.1부터 BlazeDS엔진이 일부 추가되었다는 이야기 입니다. 결론은 Railo나 Adobe ColdFusion이나 (성능상의 문제는 일단 노외로 하고..) Flex에서 모두 RemoteObject를 쓸 수 있었다 뭐~ 그런 이야기입니다. ㅋ(참고로 Open BlueDragon에서도 BlazeDS를 이용하려면 다음의 링크를 참조하세요. BlaseDS의 내부 jar파일과 OpenBDAdoptor를 이용하는 예제인데 Query Object를 리턴받을 수 없는 기능제한이 있군요. http://wiki.openbluedragon.org/wiki/index.php/OpenBD_and_BlazeDS)

쳐벅혀 있던 Flex책과 씨름해서 겨우 만든 것이지만 간만에 Flex해보니 재밌네요.ㅋ 예제는 아래의 URL에서 확인해 볼 수 있습니다. 간단하게 블로그의 DB에서 게시글의 테이블의 URL주소로 쓰이는 name이란 칼럼과 title이란 칼럼을 구해와서 Datagrid에 Binding하고 링크를 걸어주는 예제입니다. ColdFusion CFC를 이용해서 Database 쿼리결과를 Array로 반환하여(물론 ColdFusion에서는 쿼리결과를 배열뿐만 아니라, 목록, 구조 등으로도 반환받을 수 있습니다. 이 부분은 ColdFusion기술문서를 참조하세요.) 리턴해주면 Flex에서 데이터를 바인딩하는 초간단 예제이므로 그냥 그런가보다 해 주시길 바랍니다. ColdFusion이라면 모를까 Flex에 대해 여쭤보시면 저는 아마도 궁색한 변명을 늘어놀지도.. ㅎㅎㅎ

Demo View : http://www.nooree.com/samples/railoflexblog/nooreeBlogEntry.html

Sample File Download

blogRemoteService.cfc

<cfcomponent hint="My blog entries">
	<cffunction name="blogQuery" access="remote">
		<cfquery name="qGetEntry" datasource="DSN이름">
			SELECT name, title
			FROM blog테이블명
			ORDER BY last_modified DESC
			LIMIT 30
		</cfquery>
		<cfreturn qGetEntry />
	</cffunction>
</cfcomponent>

 

nooreeBlogEntry.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="myBlog.blogQuery()" >

	<mx:Style>
		Alert {
		titleStyleName: "alertTitle";
		messageStyleName: "alertMessage";
		}		  
		.alertTitle {
		fontSize: 12;
		}		  
		.alertMessage {
		fontSize: 12;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.controls.Alert;
			import mx.events.ListEvent;
			
			[Bindable]
			private var myArrayCollection:ArrayCollection;
			 
			private function queryResultHandler(evt:ResultEvent):void {
				myArrayCollection = evt.result as ArrayCollection;	
				myDataGrid.visible = true;
			}
			 
			private function faultHandler(evt:FaultEvent):void {
				mx.controls.Alert.show("오류발생:" + evt.fault.faultDetail)	
			}

			private function itemClickEvent(evt:ListEvent):void {				
			  if(evt.rowIndex >= 0) {
			     var url:URLRequest = new URLRequest("/blog/post.cfm/" + evt.currentTarget.selectedItem.name); 
 	             navigateToURL(url,'_blank');
			  }		
			}			
			
		]]>
	</mx:Script>

    <mx:RemoteObject id="myBlog" destination="ColdFusion" source="samples.railoflexblog.cfc.blogRemoteService" endpoint="http://www.nooree.com/flex2gateway" showBusyCursor="true">  
    	<mx:method name="blogQuery" result="queryResultHandler(event)" fault="faultHandler(event)"/>
    </mx:RemoteObject>

    <mx:DataGrid id="myDataGrid" dataProvider="{myArrayCollection}" visible="true" width="850" height="100%"  fontSize="12" itemClick="itemClickEvent(event)">
    	<mx:columns>
			<mx:DataGridColumn headerText="주소" dataField="name" width="300" />
			<mx:DataGridColumn headerText="제목" dataField="title" width="500" />
		</mx:columns>
    </mx:DataGrid>
	
</mx:Application>

 

source="samples.railoflexblog.cfc.blogRemoteService"의 부분은 CFC의 위치경로입니다. 위 예제에서 CFC의 위치는 웹루투/samples/railoflexblog/cfc/blogRemoteService.cfc 입니다.

Comments


Write your comment



(it will not be displayed - 실제로 댓글 목록에서는 출력되지 않습니다)



Leave this field empty:




About me

Categories

Monthly Archives

Links

Recent Posts

Recent Comments