[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로 했는데 그래서 오래걸렸다.
출처 : http://giveup.egloos.com/2361943
MDict 를 사용하다 보면 가장 짜증나는 일중 하나가 발음기호가 깨지는 것이다.
어쩌라고 소리가 절로 나온다.
개인적으로 사용하는 국어사전도 고어가 다 깨져서 나온다.
(고어까지 살려서 만들었는데 폰트가 없다니!!)
해서 폰트찾아 삼만리.
몇가지 대안을 찾을 수 있었다.
목적에 따라 대안을 달리 해야겠다.
한중일 폰트가 필요한 경우에는 네이버사전체를 사용하고, 기타 언어까지 필요한 경우에는 arialuni 폰트를 사용하는게 나을듯 싶다.
영어사전 발음기호만 필요할 경우에는 Tahoma 폰트에 Lucida Sans Unicode폰트의 발음기호 부호를 추가해서 새 Tahoma를 만드는게 가장 깔끔할듯 싶다.
한글고어가 문제인 경우에는 네이버사전체,'푸른바다'님의 한글고어, 새굴림의 한글고어를 가져와서 폰트를 제작하면 될듯 싶다.
여기서 문제. 시스템 폰트가 지원하지 않는 폰트는 pda 에서 일단 깨져보인다. mdict 의 인덱스라던가..
그럼 시스템 폰트에 추가를 해주어야 하는데, 시스템 폰트는 무조건 'Tahoma' 다.
여기서 FontLink 라는걸 사용하게 된다.
검색해보면 FontLink에 대해 참 많이 나온다.
HKLM/software/Microsoft/FontLink/SystemLink
Tahoma에 없는 글자를 다른 폰트에서 가져온다는 것인데, 국내 정발 pda의 경우에는 Gulim 폰트가 링크되어 있다.
적당한 한자와 한글로 이루어진 굴림폰트.
저 Link에 폰트를 최고 3개? 쓸수 있다고 하는데.,. 모르겠다.
또한 용량이 큰 폰트부터 참고한다고 하는데.. 모르겠다.
우선순위가 좀 지멋데로인듯 한데,,
그래서 애초부터 폰트를 겹치지 않게 만들기로 했다.
아래는 내맘대로 제작한 사용기
Gulim 대신 나눔고딕을 쓰기로 하고, 발음기호는 Lucida Sans Unicode를 사용, 한글고어는 Lucida.... 에 추가했다.
그리고 SystemLink를 다음과 같이 수정했다.
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\FontLink\SystemLink]
"Courier New"="\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode;\\Windows\\NNGD.TTF,NanumGothic"
"Gulim"="\\Windows\\tahoma.ttf,Tahoma;\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode"
"NanumGothic"="\\Windows\\tahoma.ttf,Tahoma;\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode"
"Tahoma"="\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode;\\Windows\\NNGD.TTF,NanumGothic"
"굴림"="\\Windows\\tahoma.ttf,Tahoma;\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode"
"나눔고딕"="\\Windows\\tahoma.ttf,Tahoma;\\Windows\\Lucida Sans Unicode.ttf,Lucida Sans Unicode"
시스템 폰트는 나눔고딕(한자 8천자 내외 포함버전)을 사용하고. 발음기호 한글고어는 Lucida Sans Unicode+고어 를 사용했다.
결과물은 다음번에 보도록 하자..
출처 : http://blog.jidolstar.com/134
Flex
개발자 커뮤니티
Flex IDE & Framework
블로그
서적
Article & Lecture
예
추가사항
Flex3 메뉴얼
http://livedocs.adobe.com/labs/flex/3/langref/index.html
http://livedocs.adobe.com/labs/flex/3/html/wwhelp/wwhimpl/js/html/wwhelp.htm
ActionScript3
http://blog.jidolstar.com/106
http://livedocs.adobe.com/flash/9.0_kr/main/flash_as3_programming.pdf
예제
각종예제집합 - http://www.adobe.com/devnet/flex/index.html?tab:samples=1
스타일 익스풀로러 - http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
컴포넌트 익스풀로러 - http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
Transition Effect - http://blog.keutgens.de/download/flexEffectExplorer/current/swf/TransitionsAndEffects.html
필터 익스풀로러 - http://www.merhl.com/flex2_samples/filterExplorer/
프리미티브 익스풀로러 - http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html
추천사이트
FlexComponent카페 - http://cafe.naver.com/flexcomponent
Flex Lab - http://labs.adobe.com/technologies/flex/
Flex 개발센터 - http://www.adobe.com/devnet/flex/
자수 - http://jasu.tistory.com
지돌스타 -http://blog.jidolstar.com
FlexBox(다양한 컴포넌트) - http://flexbox.mrinalwadhwa.com/
OKgosu(플렉스책저자-옥상훈) - http://blog.javastudy.co.kr/okgosu/
열이아빠 - http://koko8829.tistory.com
Everything Flex - http://blog.everythingflex.com/
Flex 챔피언 - http://adobeflex.tistory.com/
Flex.org - http://www.flex.org/
showcase
Flex 캘린더 - http://demo.quietlyscheming.com/calendar/app.html
플렉스 확대경 - http://demo.quietlyscheming.com/landscape/Declaration.html
RandomWalk 메뉴 - http://demo.quietlyscheming.com/RandomWalk/app.html
Display Shelf - http://demo.quietlyscheming.com/displayShelf/index.html
Yahoo Map - http://maps.yahoo.com
Papervision3D 자동차 - http://www.carlosulloa.com/
Papervision3D 코뿔소 - http://www.noventaynueve.com/lab/rhino/
Papervision3D 동영상 - http://www.blog.lessrain.com/?p=552
ScrapBlog - http://www.scrapblog.com/
Picnik - http://www.picnik.com/app#/home/welcome
fauxto - http://www.fauxto.com/
이퀄라이져 - http://lab.benstucki.net/archives/visualizationexplorer/
3D 비디오 룸 - http://dev.getoutsmart.com/os3d/demos/videoroom/
라이브 검색기 - http://www.msdewey.com/
팁
이벤트 발생순서 - http://cafe.naver.com/flexcomponent/3426
파일업로드 - http://weblog.cahlan.com/2006/09/uploading-files-with-flex-and-php.html
http://weblog.cahlan.com/files/FileUpload/FileUploadApp.html
엑션스크립트 콤퍼넌트 만들기 - http://www.adobe.com/devnet/flex/quickstart/building_components_in_as/
플렉스 각종 예제 - http://blog.jidolstar.com/category/%C1%F1%B0%C5%BF%EE%B0%B3%B9%DF/Flex/Flash/AS
웹 캠 - http://newmovieclip.wordpress.com/2006/05/26/take-a-webcam-snapshot-in-flex-20-beta-3/
컴포넌트
Flex-Ajax Bridge - http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge
Flex Boot 컴포넌트 - http://www.quietlyscheming.com/blog/components/flexbook/
Fish Eye 앨범 컴포넌트 - http://demo.quietlyscheming.com/fisheye/TileExplorer.html
Google FlexLib - http://code.google.com/p/flexlib/
캔콤 - http://labs.adobe.com/wiki/index.php/Cairngorm
PHP RIA SDK - http://phpriasdk.riaforge.org/
| <!-- Turn on writing of generated/*.as files to disk. These files are generated by --> <!-- the compiler during mxml translation and are helpful with understanding and --> <!-- debugging Flex applications. --> <keep-generated-actionscript>false</keep-generated-actionscript> |
연합뉴스 | 입력 2010.01.11 06:32 | 수정 2010.01.11 06:56 | 누가 봤을까? 20대 남성, 서울