[blazeds.war를 이용한 프로젝트 추가]
File -> Import 선택
Web -> WAR file 선택, Next
Browse에서 D:\BlazeDS\blazeds.war 선택
Web Project : SecondProject
Finish
SecondProject가 FirstProject 밑에 생겼다.
[RPC통신을 셋팅 - RemoteObject]
SecondProject -> WebContent -> WEB-INF -> flex -> remoting-config.xml 편집
진하게 된 부분 추가
편집할때 xml 형태로 나오면 오른쪽 마우스 클릭해서 Open with -> Text Editor하면 편집이 가능하다.
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="testRO">
<properties>
<source>com.csit.test</source>
</properties>
</destination>
</service>
SecondProject -> WebContent -> WEB-INF -> flex -> services-config.xml 도 RemoteObject 통신할 때 사용된다. my-amf 가 있어야 되는데 기본으로 있다.
[class, jsp 추가]
SecondProject -> WebContent 에서 마우스 우측 버튼
New -> Others 선택
Java -> Class, Next
Package : com.csit
Name : test
Finish
SecondProject -> Java Resources : src -> com.csit -> test.java 이 생성된다.
test.java에 다음과 같이 작성한다.
package com.csit;
import java.util.*;
public class test {
public List<TestList> read()
{
ArrayList<TestList> al = new ArrayList<TestList>();
al.add( new TestList(1, "홍길동"));
al.add( new TestList(2, "이순신"));
al.add( new TestList(3, "세종대왕"));
return al;
}
}
TestList.java를 같은 방식으로 추가하고, 다음과 같이 작성한다.
package com.csit;
import java.io.Serializable;
public class TestList implements Serializable {
public int num;
public String name;
public TestList(int num, String name) {
this.num = num;
this.name = name;
}
}
[Eclipse에서 프로젝트 변경]
하단 Servers에서 추가된 서버를 선택하고 우측 버튼 클릭
Add and Remove 선택
FirstProject를 빼고 SecondProject를 넣는다.
[Flex에 프로젝트 생성]
Flex를 실행하고
File -> New -> Flex Project
Project name : TestRO
Application type : Web application
Application server tpe : J2EE
Next
uncheck User detault location for local LiveCycle Data Services server
Root folder : D:\Flex\Eclipse_workspace\SecondProject\WebContent
Root URL : http://localhost:8400/SecondProject/
Context root : /SecondProject
Output folder : D:\Flex\Eclipse_workspace\SecondProject\WebContent\TestRO-debug
Validate 버튼을 누르면 Next가 살아난다.
Next, Finish
TestRO.mxml 을 다음과 같이 편집한다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:RemoteObject id="ro"
destination="testRO"
showBusyCursor="true"
result="dg.dataProvider=event.result"
fault="trace(event.toString())"/>
<mx:DataGrid id="dg" width="100%" height="100%"/>
<mx:Button label="Read" click="ro.read()"/>
</mx:Application>
[Flash Player 10 debug 버젼 설치]
http://www.adobe.com/support/flashplayer/downloads.html
에서 최신을 받아서 설치해야 에러가 안납니다. (2010-02-11)
flashplayer_10_ax_debug.exe 를 설치한다.
[실행]
Flex에서 벌레모양 아이콘을 클릭해서 디버그 모드로 실행을 한다.
컴파일후 에러 메시지가 나오는데 Eclipse에서 Refresh 를 해주어야 한다.
SecondProject에서 오른쪽 마우스 클릭 Refresh (F5) 한다.
Flex에서 다시 실행
잘 안되면 Eclipse에서 서버를 다시 실행한다.
Flex에서 바꾸면 매번 Eclipse쪽에서 Refresh를 해주어야만 한다. 웹서버에 반영을 하기 위함이다.
Read버튼을 눌러 세명의 나오면 성공이다.
참고 사이트 : http://blog.jidolstar.com/365
* Flex에서 프로젝트명 마우스 우측 버튼 클릭해서 Properties를 본다.
Flex Compiler에 Additional compiler arguments:가 기본은 -services가 없는데 service-config.xml이 추가되어 있을것이다. 확인해 두자. 나중에 없으면 반드시 절대경로로 들어가 있어야 한다.
MySQL로 설명합니다.
MSSQL로 하려면 http://haloes.tistory.com/166 을 참고하세요.
MySQL JDBC Driver를 tomcat home 밑에 lib 디렉토리에 복사한다.
D:\BlazeDS\Tomcat\lib\mysql-connector-java-5.1.12-bin.jar
적용을 위해선 서버를 다시 실행해야한다.
test.java 만들듯이 test2.java를 Eclipse에 만들어 놓습니다.
package com.csit;
import java.util.ArrayList;
import java.util.*;
import com.csit.TestList;
import java.sql.Connection;
import java.sql.*;
public class test2 {
public List<TestList> read()
{
ArrayList<TestList> al = new ArrayList<TestList>();
try {
//JNDI를 이용한 코드샘플
//Context initCtx = new InitialContext();
//Context envCtx = (Context) initCtx.lookup("java:comp/env");
//DataSource ds = (DataSource) envCtx.lookup("jdbc/EmployeeDB");
//Connection con = ds.getConnection();
//JNDI를 사용하지 않은 코드샘플
String connectionUrl = "jdbc:mysql://172.16.100.56:3306/cstest?user=csit&password=xxxxxx";
Connection con = DriverManager.getConnection(connectionUrl);
String SQL = "SELECT * FROM users";
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(SQL);
//com.csit.common을 이용하지 않은 코드샘플
while (rs.next()) {
al.add(new TestList(rs.getInt("id"),rs.getString("name")));
}
rs.close();
stmt.close();
con.close();
return al;
} catch(Exception e) {
return al;
}
}
}
암호는 수정하시고...
Flex에서는 destination="testRO2" 만 수정합니다.
Eclipse에서 remoting-config.xml 에
<destination id="testRO2">
<properties>
<source>com.csit.test2</source>
</properties>
</destination>
를 추가합니다.
Flex에서 컴파일하고
SecondProject에서 Refresh한 후,
Flex에서 디버그로 브라우저 실행...
아까와 다른 DB에 있는 값이 나오면 성공이다.
서버쪽 파일 변경이 있으면 (Java class 말고)
서버 재시작만으로 안될때가 있다.
이때는 아래 서버 목록에서 마우스 우측 클릭, Publish를 해주면 된다.
Tomcat의 DB Pooling 기능을 이용하기 위해 JNDI를 이용한다.
[Flex]
destination="testRO3"
testRO2를 RO3로 바꾼다. 저장하면 컴파일이 자동으로 된다. 컴파일 진행은 우측 하단 참고.
[Eclipse]
좌측 하단에 추가되어 있는 Server에서 server.xml을 연다.
다음을
</GlobalNamingResources> 위에 추가한다.
<!-- MySQL -->
<Resource auth="Container" driverClassName="com.mysql.jdbc.Driver" maxActive="50" maxIdle="10" name="jdbc/cstest" password="xxxxxx" type="javax.sql.DataSource" url="jdbc:mysql://172.16.100.56:3306/cstest" username="csit"/>
context.xml에는 </Context> 위에 다음을 추가한다.
<ResourceLink name="jdbc/cstest" global="jdbc/cstest" type="javax.sql.DataSource"/>
SecondProject -> WebContent -> WEB-INF-> flex 에 remote-config.xml에 다음을 추가한다.
test3 클래스를 부르기 위함이다.
<destination id="testRO3">
<properties>
<source>com.csit.test3</source>
</properties>
</destination>
test3.java를 test2.java와 같은 위치에 만든다.
package com.csit;
import java.util.ArrayList;
import java.util.*;
import com.csit.TestList;
import java.sql.Connection;
import java.sql.*;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
public class test3 {
public List<TestList> read()
{
ArrayList<TestList> al = new ArrayList<TestList>();
try {
//JNDI를 이용한 코드샘플
Context initCtx = new InitialContext();
Context envCtx = (Context) initCtx.lookup("java:comp/env");
DataSource ds = (DataSource) envCtx.lookup("jdbc/cstest");
Connection con = ds.getConnection();
String SQL = "SELECT * FROM users";
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(SQL);
//com.csit.common을 이용하지 않은 코드샘플
while (rs.next()) {
al.add(new TestList(rs.getInt("id"),rs.getString("name")));
}
rs.close();
stmt.close();
con.close();
return al;
} catch(Exception e) {
return al;
}
}
}
SecondProject에서 Refresh, Server 목록에서 Publish 하고, Flex에서 실행한다.
잘 안되면 서버 재시작 하고 다시 시도
그래도 안되면 Flex에서 재저장, 컴파일, Eclipse에서 Refresh 한 후 다시 시도
그러다 보면 된다.
보안문제때문에 인증없이 이미지를 웹서버에서 직접 보여주게 하고 싶지 않을때 php 같은 서버쪽 프로그램에서
세션을 확인하고 보내주게 된다.
이를 flex image 컨틑로에서 보여주게 하려고 했다.
하지만 너무 쉬워서였나 이와 관련된 내용을 찾기가 어려웠고 3일정도 자료찾고, 시도해보고 하다가 겨우 성공했다.
하고나니 간단하네...크...
서버쪽 코드 : imgdown.php
<?php
$file = $_GET['file'];
if (file_exists($file))
{
// Note: You should probably do some more checks
// on the filetype, size, etc.
$contents = file_get_contents($file);
// Note: You should probably implement some kind
// of check on filetype
//header('Content-type: image/jpeg'); 주석을 해도되고 풀어도됨
echo $contents;
}
?>
클라이언트쪽 코드 :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
public var req:URLRequest = new URLRequest("http://localhost/imgdown.php");
public var loader:Loader = new Loader();
private function clickImage():void {
var variables:URLVariables = new URLVariables();
variables.file = "D:/Winter.jpg";
req.data = variables;
loader.contentLoaderInfo.addEventListener( Event.COMPLETE, completeHandler );
loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, onLoadError );
loader.load(req);
}
private function completeHandler(event:Event):void {
var bmp: Bitmap = ( event.target as LoaderInfo ).content as Bitmap;
imgPic.source = bmp;
}
private function onLoadError( event: IOErrorEvent ): void
{
trace('error', event);
}
]]>
</mx:Script>
<mx:Image x="10" y="10" width="167" height="163" id="imgPic"/>
<mx:Button x="10" y="181" label="이미지보기" id="btnImage" click="clickImage()"/>
</mx:Application>
=========================================================
서버에 D:/Winter.jpg 라는 이미지를 놓고 해보면 된다.
imgdown.php은 웹서버 루트에 놓고, flex를 실행하면 이미지가 보인다.
처음엔 Loader 가 아닌 URLLoader로 했는데 그래서 오래걸렸다.