Adobe ColdFusion 9에서는 새로운 태그 3가지를 지원하고 있습니다. CFMAP, CFMEDIAPLAYER, CFFILEUPLOAD가 바로 그것입니다. Daniel Vega의 Three new user interface controls in ColdFusion 9 기술문서를 참조하면, 이 세가지 태그에 대한 샘플을 소개하고 있습니다. 오늘 저는 이중에서 한국 개발자가 관심가질만한 CFMEDIAPLAYER와 CFFILEUPLOAD에 대하여 샘플예제를 보여드리고, 활용방법에 대해 소개하고자 합니다.
* Sample Download
CFMEDIAPLAYER는 Railo와 Open BlueDragon(Open BD)에서 지원하던 CFVIDEOPLAYER태그에 대응되는 Adobe ColdFusion에서만 지원하는 태그입니다. FLV비디오재생기능에 있어 Railo와 Open BD가 먼저 개념을 정립하고, 신규 태그를 지원했는데 자존심때문인지 Adobe ColdFusion에서는 태그명을 약간 바꾸는(?)방식으로 비슷한 기능을 제공하고 있습니다. 다음과 같이 간단한 태그한줄로 FLV재생기를 동적으로 생성할 수 있습니다. Railo나 Open BD의 동일한 기능과 비교해서 보시면 좋을 듯 합니다. Railo는 JWPlayer, Open BD는 Flow Player를 기본 재생기로 이용하고 있습니다.
cfmediaplayer.cfm
<html>
<head>
<title>Adobe ColdFusion 9 - CFMEDIAPLAYER</title>
<script type="text/javascript">
< !--
// 재생이 끝난 후 실행할 함수
function playComplete() {
alert('재생이 끝났습니다.');
}
//-->
</script>
</head>
<body>
<cfmediaplayer name="MediaPlayer"
source="FLV파일 경로"
hidetitle="true"
hideborder="true"
controlbar="true"
autoplay="true"
width="640"
height="480"
fullScreenControl="yes"
onComplete="playComplete"
quality="high"
wmode="window"
/>
</body>
</html>
정말 간단하게 FLV재생기를 동적으로 생성할 수 있습니다. 또한 onComplete와 같이 동영상재생 시작, 끝에 Javscript함수를 호출할 수 있어 보다 강력한 제어기능을 제공합니다. fullScreenControl를 이용하여 풀스크린 화면을 쉽게 제어가능합니다. Flash에서나 Flex의 경우 FLV재생기를 만들고, HTML문서에 삽입해야 하는 2번의 과정을 거치게 되지만, ColdFusion을 이용하면, 개발자가 Flash/Flex 디자이너/개발자의 도움없이 CFML코드만으로 생성이 가능한 장점이 있습니다.
자. 또 간단하게 살펴볼 새 태그는 CFFILEUPLOAD입니다. Flash Player 8이 처음 출시되었던시기 가장 이슈되었던 부분은 Flash를 이용한 File 업로드가 아닐까 생각합니다. 당시 Flash, 또는 Flex로 파일업로드 어플리케이션이 많이 만들어졌습니다. 물론 그때도 Flex나 Flash가 PHP가 아닌 ColdFusion을 서버측 언어로 이용하거나, 또는 ColdFusion 독자적으로 CFFORM태그를 이용하여 충분히 Flash 기반의 멋진 파일업로드 어플리케이션을 만들 수 있었습니다. 하지만 조금 긴 (사실 CFFORM을 이용하더라도 기껏해야 30~50줄이내로 끝낼 수 있었지만) 코드길이 때문인지, 아예 한줄로 끝내버릴 수 있는 태그를 제공하는 혁신을 제공하고 있습니다. 다음의 예제를 살펴보시길 바랍니다. 위 Adobe 기술문서 Daniel Vega의 예제를 한국개발자들께서 좋아하시는 Flash 기반 RIA로 다시 만들어 봤습니다.
cfupload.cfm
<html>
<head>
<title>간단한 ColdFusion 업로드</title>
<script type="text/javascript">
< !--
// 업로드 실패시 에러메시지
function logError(e){
var status = e.STATUS;
var message = e.MESSAGE;
var file = e.FILENAME;
console.log(status + "/" + message + "/" + file);
}
//업로드 후 실행할 페이지 리프레시 함수
function reFresh(){
location.reload();
}
//-->
</script>
</head>
<body>
<!--- 디렉토리내의 모든 파일을 목록화 --->
<cfdirectory action="list" directory="#ExpandPath('./uploads')#" name="uploadedList" sort = "datelastmodified DESC" >
<!--- 파일명, 사이즈, 업로드날짜를 Grid에 바인딩 --->
<cfscript>
rs = queryNew("filename, size, date");
for(i=1; i LTE #uploadedList.RecordCount#; i=i+1) {
queryAddRow(rs);
querySetCell(rs,'filename', '#uploadedList.NAME[i]#');
querySetCell(rs,'size', '#uploadedList.SIZE[i]/1000#');
querySetCell(rs,'date', '#uploadedList.DATELASTMODIFIED[i]#');
}
</cfscript>
<!--- 파일명, 사이즈, 업로드날짜 Grid --->
<cfform name="getFile" width="410" height="260" format="Flash" timeout="100">
<cfformgroup type="panel" label="Uploaded Files" width="400" height="250">
<!--- Grid에서 해당 아이템선택시 새창으로 링크 --->
<cfgrid name= "uploadIMG"
query="rs"
onchange="getUrl('./uploads/' + uploadIMG.dataProvider[uploadIMG.selectedIndex]['filename'], '_balnk');">
<cfgridcolumn name="filename" header="File Name">
<cfgridcolumn name="size" header="Size (KB)">
<cfgridcolumn name="date" header="Date">
</cfgrid>
</cfformgroup>
</cfform>
<!--- 업로드 --->
<cffileupload
url="upload.cfm"
bgcolor="##ffffff"
onerror="logError"
oncomplete="reFresh"
title="Image Uploader"
addbuttonlabel="Add"
clearbuttonlabel="Remove"
deleteButtonLabel="Delete"
uploadbuttonlabel="Upload"
maxfileselect="5"
maxuploadsize="5"
extensionfilter="*.jpg,*.gif,*.png"
width="400"
height="250"
/>
</body>
</html>
upload.cfm<cffile action="upload" destination="#ExpandPath('./uploads')#" nameconflict="makeunique"/>
cfupload.cfm파일에서는 업로드파일이 저장되는 디렉토리에서 파일목록을 받아와서 동적으로 CFGRID에 Biding하고 있습니다. 또한 cffileupload태그로 파일을 업로드하고, 업로드 후 화면을 한번 Reload하는 Javascript함수를 호출하고 있습니다. upload.cfm파일은 일반적인 cfml에서의 파일업로드 태그이며, nameconflict를 makeunique으로 지정해서, 업로드되는 파일중복을 피할 수 있습니다. 자동으로 파일명이 중복될 경우 파일명뒤에 (1)과 같은 유니크한 텍스트를 붙혀주므로 PHP와 같은 타언어에서 처럼 일일히 중복파일이 있는지 체크하거나, 파일명을 변경하는 코드를 작성할 필요가 없습니다.
오늘은 간단하게 Adobe ColdFusion 9에서 제공하는 세가지 태그 중 2가지에 대하여 알아보았습니다. 앞에서 언급한 Adobe의 공식기술문서를 함께 살펴보시길 바랍니다. 그럼 즐거운 CFML코딩하시길 바랍니다.
|
previous entries
Category :
Mango Blog
,
Miscellaneous
Comments :
댓글쓰기
Posted by
장창학 at 1:36 PM
ColdFusion (74)