1. Java SDK를 설치한다.


http://java.sun.com/javase/downloads/index.jsp

jdk-6u20-windows-i586.exe 를 받아서 설치하면 된다.
전엔 17이었는데 꾸준히 업데이트가 된다.

설치 폴더는 기본으로 하면 되는데 아래와 같이 된다.
C:\Program Files\Java\jdk1.6.0_20

설치후 환경변수에 JAVA_HOME을 넣어준다.

제어판 -> 시스템 -> 고급탭 -> 환경변수 버튼 -> 위쪽에 새로 만든다. (추가버튼 클릭)

변수 : JAVA_HOME
값 : C:\Program Files\Java\jdk1.6.0_20



2. Eclipse를 설치한다.


http://www.eclipse.org/downloads/

Eclipse IDE for Java EE Developers (190 MB) 로 설치하면 된다.

SR2까지 나와있다. 역시 새로 받아하는게 좋겠다.

압축만 풀면 설치가 끝난다.
별도의 설치작업이 필요없다.
D:\Eclipse 폴더에 압축을 풀어 놓는다.

실행전 eclipse.ini라는 파일을 열어 진하게 된 것을 써 넣는다.
값들은 메모리 부족현상이 일어나면 나중에 변경해 볼만 하다.
====================
-startup
plugins/org.eclipse.equinox.launcher_1.0.201.R35x_v20090715.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.0.200.v20090519
-product
org.eclipse.epp.package.jee.product
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
-vm
C:\Program Files\Java\jdk1.6.0_20\bin\javaw.exe

-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m
=====================

eclipse.exe를 실행하면
workspace를 설정해 주는 창이 나오는데
D:\Flex\Eclipse_workspace 폴더를 만들어 주고, 이 폴더를 써준다.



3. Flex3을 설치한다.


Flash Builder 4가 release되기는 했지만 기존에 했던 것이 있어서 3을 쓴다.
Adobe 웹사이트에서 다운 받으면 된다.

FB3_win.exe를 실행해서 기본설치 폴더에 설치한다.
C:\Program Files\Adobe\Flex Builder 3
Internet Explorer에 체크, Optional Installations은 체크할 필요없다.

실행하고 workspace를 변경해준다.
D:\Flex\Flex_workspace 폴더를 만들어주고
Flex에서 File -> Switch Workspace -> Other 를 선택해서 위 폴더를 써준다.
Flex가 재시작된다.

[sdk 3.5 적용하기]
flex_sdk_3.5.0.12683.zip 를 아래 폴더에 풀어 놓는다.
C:\Program Files\Adobe\Flex Builder 3\sdks\3.5
Flex를 실행해서 Windows -> Preferences 로 간다.
왼쪽 메뉴에서 Flex -> Installed Flex SDKs 선택
우측 Add 버튼 클릭 C:\Program Files\Adobe\Flex Builder 3\sdks\3.5 를 추가한다.
Flex 3.2에 언체크 하고 Flex 3.5 체크한후 OK 하면 3.5를 사용하게 된다.



4. BlazeDS 설치


blazeds-turnkey-3.2.0.3978.zip 를 D:\BlazeDS에 푼다.

Eclipse.exe를 실행한다.
Windows -> Preferences
왼쪽 메뉴에서 Server -> Runtime Environments
우측 Add 버튼 클릭
Apache Tomcat v6.0 선택하고 Next
Tomcat installation directory 만 D:\BlazsDS\tomcat 하고 Finish (Browse해서 찾는다.)



5. Eclipse와 Tomcat 테스트 하기

[Project 추가]
Eclipse에서 New -> Other선택
Web -> Dynamic Web Project 선택
Project name : FirstProject
Next, Finish

D:\Flex\Eclipse_workspace\FirstProject 에 생김.

[test jsp 생성]
Eclipse Welcome 창은 닫습니다.
Eclipse 왼쪽에 보면 FirstProject가 생겨있다.
FirstProject -> WebContent에서 우측버튼 클릭
New -> JSP
File name : test 입력, Finish

test.jsp를 열여 아래와 같이 추가한다.

<body>
<%
 for(int i=1; i<=10; i++) {
  out.println(i+"<br>");
 }
%>

</body>


[Server 추가]
Eclipse 하단에 Servers 탭 선택
마우스 우측버튼 클릭 -> New -> Server

Server's host name : localhost
Tomcat v6.0 Server

Next

FirstProject 선택 Add 버튼 클릭
우측으로 옮기면 된다.
Finish

하단에 추가된 Server에서 우측 버튼 클릭 -> Debug
차단창 뜨면 차단해제 클릭 80포트를 쓰지 않고 다른 포트를 쓰기 때문에 나올 수 있다.
(포트는 왼쪽 Servers -> Tomcat v6.0 Server at localhost -> server.xml을 보면 확인 가능)

브라우저를 실행하고
http://localhost:8400/FirstProject/test.jsp 로 가서 1부터 10까지 숫자가 나오면 성공

Eclipse에서 Break Point를 잡으면 디버깅도 가능하다.


6. Eclipse와 BlazeDS 테스트 하기



[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이 추가되어 있을것이다. 확인해 두자.   나중에 없으면 반드시 절대경로로 들어가 있어야 한다.


7. JDBC 연결


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를 해주면 된다.



8. JNDI 사용



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 한 후 다시 시도
그러다 보면 된다.





+ Recent posts