2010. 8. 6. 18:20 flex
[15-D4] HTML 페이지상에 Flex Application 의 배포
[15-D4] HTML 페이지상에 Flex Application 의 배포
[01] HTML 페이지상에 Flex Application 의 배포
- Flex의 컴파일 결과를 'bin-debug'로 보내서 개발을 하나
최종 배포시에는 'bin-debug'폴더를 JSP가 있는 폴더로 링크하여
SWF파일이 생성되도록합니다.
bin-debug --> H:/soa4/workspace_flex_www/www_flex/WebContent/noticefxjsp
1. 프로젝트 선택 --> 폴더 생성 --> 'Advanced >>' 버튼 클릭, 'Link to folder in the file system' 체크
'H:/soa4/workspace_flex_www/www_flex/WebContent/noticefxjsp'폴더 지정
2. javascript를 이용한 Flex 콤포넌트의 추가
>>>>> index_begin.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script language="Javascript" src="./template/flexAppend.js"></script>
<title>Insert title here</title>
</head>
<body>
<br></br>
<div style="text-align: center; font-size: 26pt">
<a href='/index.jsp'>JSP Model1 Login</a><br></br>
<a href='/mvc.jsp'>JSP Model2 MVC Login</a><br></br>
<a href='/flex.jsp'>RIA Flex UI Login</a><br></br>
</div>
<center>
공지 사항<br></br>
<!-- 플렉스 추가 위치 -->
<span id="panel"></span>
<script language="javascript">
// src : 삽입할 swf 플렉스 파일의 주소
// w: : 플렉스 가로 사이즈(픽셀)
// h : 플렉스 세로 사이즈(픽셀)
// wmode: "transparent" : 플래시 배경을 투명하게 하기, 투명하게 하지 않으려면 그 냥 ""값 지정
// bgColor : 플렉스 배경색, 배경색을 주려면 "#0000ff" 식으로 값을 지정
// divID: Span, DIV 태그 이름
flexAppend('<%=request.getContextPath()%>/noticefxjsp/noticeFx.swf',800, 500, '', '', 'panel');
</script>
</center>
<br></br>
<div style="text-align: center; font-size: 20pt">
<u>
Author: SOA Developer Email: soa@mail.com
Tweeter: http://twtkr.com/nulunggi
[<a href="http://twtkr.com/nulunggi">go</a>]
<br></br>
</u>
</div>
</body>
</html>
>>>>> /template/flexAppend.js: 플렉스 추가 자바스크립트
// src : 삽입할 swf 플렉스 파일의 주소
// w: : 플렉스 가로 사이즈(픽셀)
// h : 플렉스 세로 사이즈(픽셀)
// wmode: "transparent" : 플래시 배경을 투명하게 하기, 투명하게 하지 않으려면 그냥 ""값 지정
// bgColor : 플렉스 배경색, 배경색을 주려면 "#0000ff" 식으로 값을 지정
// divID: Span, DIV 태그 이름
function flexAppend(src, w, h, wmode, bgColor, divID){
var html = '';
html += '<object type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="param" width="'+w+'" height="'+h+'">';
html += '<param name="movie" value="'+src+'">';
html += '<param name="quality" value="high">';
if(bgColor != ""){
html += '<param name="bgcolor" value="'+ bgColor +'">';
}
if(wmode != ""){
html += '<PARAM NAME="wmode" VALUE="'+ wmode +'">';
}
html += '<param name="swliveconnect" value="true">';
html += '<embed src="'+src+'" quality=high bgcolor="#ffffff" width="'+w+'" height="'+h+'" swliveconnect="true" id="param" name="param" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"><\/embed>';
html += '<\/object>';
// alert("html: " + html);
var id = document.getElementById(divID);
//alert("id: " + id);
id.innerHTML = html;
}
function test(){
alert("Load TEST");
}
3. 사용
>>>>> WebContent/noticefxjsp/noticeFx.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script language="Javascript" src="../template/flexAppend.js"></script>
</head>
<body>
<center>
공지 사항<br></br>
<!-- 플렉스 추가 위치 -->
<span id="panel"></span>
<span id="panel2"></span>
<script language="javascript">
// src : 삽입할 swf 플렉스 파일의 주소
// w: : 플렉스 가로 사이즈(픽셀)
// h : 플렉스 세로 사이즈(픽셀)
// wmode: "transparent" : 플래시 배경을 투명하게 하기, 투명하게 하지 않으려면 그냥 ""값 지정
// bgColor : 플렉스 배경색, 배경색을 주려면 "#0000ff" 식으로 값을 지정
// divID: Span, DIV 태그 이름
flexAppend('<%=request.getContextPath()%>/noticefxjsp/noticeFx.swf',800, 500, '', '', 'panel');
flexAppend('<%=request.getContextPath()%>/noticefxjsp/noticeFx.swf',800, 500, '', '', 'panel2');
</script>
</center>
</body>
</html>
[02] crossdomain.xml
1. flex는 보안성 강화를 위해 서버에 있는 swf 파일의 접근 권한을 지정할 수
있습니다. 따라서 지정된 ip나 도메인만 접근가능하게 할 수 있습니다.
저장위치는 프로젝트의 root 폴더가 됩니다.
예) F:/200905_cbd15/tomcat-6.0/webapps/www_flex
2. WebContent/crossdomain.xml
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*"/>
<!--
<allow-access-from domain="abc.abc.com" />
<allow-access-from domain="*.adobe.com" />
<allow-access-from domain="211.111.000.15" />
-->
<!-- Adobe Flash Player 9.0.115 Later Version Add Option-->
<allow-http-request-headers-from domain="*" headers="SOAPAction"/>
</cross-domain-policy>
* cafe24의 'www' 폴더에 저장합니다.
'flex' 카테고리의 다른 글
| [실습1-2][memo] JDBC 접속 설정 및 Utility Class 추가, 한글 처리 (0) | 2010.08.06 |
|---|---|
| [실습1-1][memo] DB, MXML 페이지 제작(memoFx.mxml) (0) | 2010.08.06 |
| [14-D4][notice][JSP] 글 추가, 글 수정, 글 삭제 (0) | 2010.08.06 |
| [13-D4][notice] MXML main 화면(noticeFx.mxml) (0) | 2010.08.06 |
| [12-D4][notice][JSP] Eclipse 프로젝트 설정, 글 목록(list.jsp) (0) | 2010.08.06 |
