YNU_JEUS/app_home/himed/webapps/com/sampleweb/xrw/SMTSS00101_이미지처리샘플.xrw

<?xml version="1.0" encoding="EUC-KR"?>
<?xml-stylesheet type="text/css" href="../../../com/commonweb/css/common.css" ?>
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.w3.org/2002/01/xforms" xmlns:ev="http://www.w3.org/2001/xml-events">
	<xhtml:head>
		<xhtml:title>이미지 저장/조회 예제</xhtml:title>
		<model id="model1">
			<instance id="instance1">
				<root xmlns="">
					<main>
						<list>
							<imglist/>
						</list>
						<view>
							<imgnm/>
							<imgdata/>
							<imgwidth/>
							<imgheight/>
						</view>
						<errorlist>
							<error>
								<imgnm/>
								<errmsg/>
							</error>
						</errorlist>
						<imgnm/>
					</main>
					<send>
						<imgnm/>
						<imgdata/>
						<imgwidth/>
						<imgheight/>
						<dellist/>
					</send>
					<init>
						<bizabbr>
							<label>com</label>
							<value>com</value>
						</bizabbr>
						<bizabbr>
							<label>emr</label>
							<value>emr</value>
						</bizabbr>
						<bizabbr>
							<label>pam</label>
							<value>pam</value>
						</bizabbr>
						<msgtype>
							<label>error</label>
							<value>error</value>
						</msgtype>
						<msgtype>
							<label>info</label>
							<value>info</value>
						</msgtype>
					</init>
					<temp/>
					<imgdata/>
				</root>
			</instance>
			<script type="javascript" ev:event="xforms-ready">
				<![CDATA[
				fInitialize();
				]]>
			</script>
			<submission id="TXTSS00101" mediatype="application/x-www-form-urlencoded" method="post" ref="/root/send" resultref="/root/temp"/>
			<submission id="TRTSS00101" mediatype="application/x-www-form-urlencoded" method="post" ref="/root/send" resultref="/root/main/list"/>
			<submission id="TRTSS00102" mediatype="application/x-www-form-urlencoded" method="post" ref="/root/send" resultref="/root/main/view"/>
			<submission id="TXTSS00102" mediatype="application/x-www-form-urlencoded" method="post" ref="/root/send" resultref="/root/temp"/>
			<submission id="TRTSS00103" mediatype="application/x-www-form-urlencoded" method="post"/>
			<submission id="TXTSS00103" mediatype="application/x-www-form-urlencoded" method="post" ref="/root/send" resultref="/root/main/errorlist"/>
		</model>
		<script type="javascript" src="../../../com/commonweb/js/common.js"/>
		<script type="javascript" src="../../../com/commonweb/js/tfHelper.js"/>
		<script type="javascript">
			<![CDATA[
			// 화면 open시와 초기화 버튼 클릭시 화면 초기화 기능을 수행한다.
			function fInitialize() {
				fEnableInsertButton();
				model.removeNodeset("/root/main/list/imglist");
				model.removeNodeset("/root/main/errorlist/error");
				model.resetInstanceNode("/root/send");
				model.resetInstanceNode("/root/main/view");
				model.refresh();

				fChangeImage("../../../com/commonweb/images/no_image.gif");

			}
			
			function fChangeImage(imgsrc){
				img_hidden.src = imgsrc;  // 파일에서 읽은 이미지의 base64 encoding 값을 가져오기 위한  이미지 컨트롤
				var data = img_hidden.getbase64data();  // base64 encoding 문자열을 가져온다.
				var imgSize = getImageSize(imgsrc);
				var imgWidthSize = imgSize.split("^")[0];
				var imgHeightSize = imgSize.split("^")[1];
				
				model.setValue("/root/main/view/imgdata",data,true); // 이미지를 보여주기 위하여 view용 이미지컨트롤의 ref instance에 값을 저장
				setImageRefInstance("/root/main/view/imgdata");
				
				model.setValue("/root/main/view/imgwidth", imgWidthSize);
				model.setValue("/root/main/view/imgheight", imgHeightSize);
				
				if( imgWidthSize <= 340)
					img_view.attribute("width")= imgWidthSize;
				
				if( imgWidthSize <= 270)	
					img_view.attribute("height")= imgHeightSize;

				model.refresh();

			}
			
			function fEnableInsertButton() {
			}
			function fEnableUpdateButton() {
			}
			
			function fCheckMandatoryInput() {
				// 필수항목 체크
				if (model.getValue("/root/send/imgnm") == "") {
					messageBox("이미지명은","I003");
					model.setFocus("cmb_bizabbrinput");
					return false;
				}
				if (model.getValue("/root/main/item/msgtype") == "") {
					messageBox("메시지 종류는","I003");
					model.setFocus("cmb_msgtypeinput");
					return false;
				}
				if (model.getValue("/root/main/item/msgno") == "") {
					messageBox("메시지 번호는","I003");
					model.setFocus("ipt_msgnoinput");
					return false;
				}
				if (model.getValue("/root/main/item/msgcnts1") == "") {
					messageBox("메시지 1은","I003");
					model.setFocus("ipt_imgnminput");
					return false;
				}
				return true;
			}
		]]>
		</script>
	</xhtml:head>
	<xhtml:body guideline="1,1194;" style="margin-left:8; margin-top:0; margin-right:8; margin-bottom:0; ">
		<group id="group1" style="left:0px; top:0px; width:1195px; height:13px; ">
			<caption id="caption6" class="tit_1" style="left:0px; top:0px; width:189px; height:14px; ">이미지 저장/조회 예제</caption>
		</group>
		<group id="group3" scroll="auto" style="left:0px; top:40px; width:1195px; height:744px; ">
			<caption id="caption3" class="cell_1" style="left:765px; top:85px; width:70px; height:285px; vertical-align:middle; ">이미지</caption>
			<line id="line3" class="line_2" style="x1:765px; y1:371px; x2:1195px; y2:371px; "/>
			<group id="group2" style="left:0px; top:14px; width:1194px; height:35px; vertical-align:top; ">
				<shape id="roundrect1" appearance="roundrect" ellipsewidth="10" ellipseheight="10" style="left:0px; top:0px; width:1194px; height:35px; background-color:#fffbf2; border-color:#ffd799; "/>
				<caption id="caption2" class="search_name" style="left:16px; top:8px; width:91px; height:17px; ">이미지 명 :</caption>
				<line id="line13" style="x1:1106px; y1:7px; x2:1106px; y2:29px; border-color:#ffe4bb; border-left-style:solid; "/>
				<input id="ipt_imgnm" ref="/root/main/imgnm" class="input_search" navindex="3" style="left:115px; top:8px; width:200px; height:14px; "/>
				<button id="btn_search" class="btn1_letter2" navindex="4" style="left:1122px; top:7px; width:56px; height:22px; ">
					<caption>조회</caption>
					<script type="javascript" ev:event="DOMActivate">
						<![CDATA[
						model.makeValue("/root/send/imgnm",model.getValue("/root/main/imgnm"));
						model.makeValue("/root/send/imgdata","");
						submit("TRTSS00101");
						
						for( var i = grd_imglist.fixedRows ; i < grd_imglist.Rows ; i++ ) {
							setImageRefInstance("/root/main/list/imglist["+i+"]/imgdata");
							var imgW = model.getValue("/root/main/list/imglist["+i+"]/imgwidth");
							var imgH = model.getValue("/root/main/list/imglist["+i+"]/imgheight");
							
							if(grd_imglist.colWidth(2) < imgW)
								grd_imglist.colWidth(2) = imgW; 
							if(grd_imglist.rowHeight(i) < imgH)
								grd_imglist.rowHeight(i) = imgH; 
						}	
						grd_imglist.rebuild();
						model.refresh();
						]]>
					</script>
				</button>
			</group>
			<caption id="caption20" class="tit_2" style="left:6px; top:60px; width:118px; height:13px; ">이미지 목록</caption>
			<line id="line8" class="line_1" style="x1:0px; y1:77px; x2:760px; y2:77px; "/>
			<button id="btn_delete" class="btn5_letter2" style="left:716px; top:56px; width:42px; height:19px; ">
				<caption>삭제</caption>
				<script type="javascript" ev:event="DOMActivate">
					<![CDATA[
					model.removeNodeset("/root/main/errorlist/error");
					deleteSelectedRows(grd_imglist,false);
					model.setValue("/root/send/dellist",grd_imglist.getUpdateData());
					submit("TXTSS00102");
					]]>
				</script>
			</button>
			<input id="ipt_imgnminput" ref="/root/main/view/imgnm" class="input_search" navindex="3" style="left:840px; top:375px; width:285px; height:19px; "/>
			<line id="line1" class="line_1" style="x1:765px; y1:77px; x2:1194px; y2:77px; "/>
			<caption id="caption1" class="tit_2" style="left:765px; top:62px; width:118px; height:14px; ">이미지 보기</caption>
			<button id="btn_save" class="btn5_letter2" navindex="13" style="left:1150px; top:57px; width:42px; height:19px; ">
				<caption>저장</caption>
				<script type="javascript" ev:event="DOMActivate">
					<![CDATA[
					model.setValue("/root/send/imgnm",model.getValue("/root/main/view/imgnm"));
					model.setValue("/root/send/imgdata",model.getValue("/root/main/view/imgdata"),true);
					model.setValue("/root/send/imgwidth",model.getValue("/root/main/view/imgwidth"));
					model.setValue("/root/send/imgheight",model.getValue("/root/main/view/imgheight"));
					submit("TXTSS00101");
					]]>
				</script>
			</button>
			<datagrid id="grd_imglist" nodeset="/root/main/list/imglist" caption="이미지명^미리보기^넓이^높이^최초등록자^등록일자^최종수정자^수정일자" colwidth="237, 100, 100, 100, 100, 100, 100, 100" dataheight="25" defaultrows="0" extendlastcol="scroll" mergecellsfixedrows="bycolrec" rowheader="update" rowheight="25" style="left:0px; top:82px; width:760px; height:299px; border-color:#808080; ">
				<col ref="imgnm"/>
				<col ref="imgdata"/>
				<col ref="imgwidth"/>
				<col ref="imgheight"/>
				<col ref="errmsg"/>
				<col ref="fstrgstdt" format="yyyy-mm-dd"/>
				<col ref="lastupdtrid"/>
				<col ref="lastupdtdt" format="yyyy-mm-dd"/>
				<script type="javascript" ev:event="ondblclick">
					<![CDATA[
					if( grd_imglist.isCell(event.target) && grd_imglist.row >= grd_imglist.fixedRows ){
						var curRow = grd_imglist.row;
						model.makeValue("/root/send/imgnm",model.getValue("/root/main/list/imglist["+curRow+"]/imgnm"));	
						submit("TRTSS00102",false);
						setImageRefInstance("/root/main/view/imgdata");
						img_view.attribute("width")= model.getValue("/root/main/view/imgwidth");
						img_view.attribute("height")= model.getValue("/root/main/view/imgheight");
						model.refresh();
					}
					]]>
				</script>
			</datagrid>
			<caption id="caption7" class="cell_1" style="left:765px; top:373px; width:70px; height:22px; vertical-align:middle; ">이미지명</caption>
			<datagrid id="grd_errlist" nodeset="/root/main/errorlist/error" caption="이미지명^오류메시지" colsep="^" colwidth="338, 398" mergecellsfixedrows="bycolrec" rowsep="|" style="left:0px; top:475px; width:760px; height:150px; ">
				<col ref="imgnm"/>
				<col ref="errmsg"/>
			</datagrid>
			<button id="btn_delete2" class="btn5_letter9" style="left:594px; top:56px; width:119px; height:19px; ">
				<caption>삭제(트랜젝션 분리)</caption>
				<script type="javascript" ev:event="DOMActivate">
					<![CDATA[
					deleteSelectedRows(grd_imglist,false);
					model.setValue("/root/send/dellist",grd_imglist.getUpdateData());
					submit("TXTSS00103");
					]]>
				</script>
			</button>
			<caption id="caption4" class="tit_2" style="left:0px; top:453px; width:149px; height:13px; ">이미지 삭제 실패 목록</caption>
			<line id="line2" class="line_1" style="x1:0px; y1:470px; x2:760px; y2:470px; "/>
			<caption id="caption5" style="left:768px; top:405px; width:426px; height:325px; vertical-align:middle; ">
				<![CDATA[이미지를 데이터베이스에 BLOB 필드로 저장관리하는 Sample 프로그램이다.
또한 UserTransaction에 대한 Sample도 같이 제공한다.

- 조회 :  이미지명에 조회할 이미지 명을 입력하면 Like 검색하여 이미지 
목록으로 출력한다.
- 입력 :   파일 버튼을 클릭하여 입력할 이미지를 선택하고(최대 32KByte)
이미지 명을 입력한 후 [저장] 버튼을 클릭한다.
- 삭제 : 이미지 목록에서 삭제할 이미지 항목을 선택(여러개 선택 가능)하고
 삭제 버튼을 클릭한다.
- 삭제(트랜젝션 분리) : 서버에서 이미지들을 삭제시 건건에 대하여 별도 
트랜젝션을 걸어서 삭제한다. 삭제 실패한 이미지들은 "이미지 삭제 실패 
목록"에 에러 메시지와 함께 출력된다.
- 관련 컴포넌트 : components/tmp/sampleapp
                                                  samplemgr, 
                         webapps/tmp/sampleweb]]>
			</caption>
			<line id="line7" class="line_3" style="x1:765px; y1:395px; x2:1194px; y2:395px; "/>
			<button id="button1" class="btn2_letter4" navindex="13" style="left:1128px; top:374px; width:64px; height:19px; ">
				<caption>파일찾기</caption>
				<script type="javascript" ev:event="DOMActivate">
					<![CDATA[
					var file = openImageFileDialog(32768);  // image 파일이 너무 크면 submit 시간이 매우 오래(5분이상)  걸리므로 가급적 사이즈를 작게 제한한다.
					if (file == "") {
						return;
					}

					fChangeImage(file);

					model.setFocus("ipt_imgnminput");
					model.refresh();
					]]>
				</script>
			</button>
			<img id="img_view" ref="/root/main/view/imgdata" style="left:845px; top:95px; width:340px; height:270px; background-stretch:stretch; "/>
			<img id="img_hidden" visibility="hidden" style="left:845px; top:95px; width:340px; height:270px; "/>
		</group>
		<group id="group4" scroll="auto" style="left:0px; top:13px; width:1195px; height:27px; ">
			<line id="line32" class="line_6" style="x1:0px; y1:25px; x2:1194px; y2:25px; "/>
			<button id="btn_init" class="btn4_letter3" navindex="16" style="left:1126px; top:3px; width:68px; height:22px; ">
				<caption>초기화</caption>
				<script type="javascript" ev:event="DOMActivate">
					<![CDATA[
					var updtdata = getGridUpdateData(grd_imglist);
					if (updtdata != "" ) {
						var ret = messageBox("그리드에 작업 중인 내용이 있습니다. 초기화 작업을","Q003");
						if (ret != 6) { // not OK
							return;
						}
					}
					fInitialize();
				]]>
				</script>
			</button>
		</group>
	</xhtml:body>
</xhtml:html>