BSP에서 모달창의 띄워 봅시다.
모달창은 각 포탈 사이트에서 모달창이라고 뜨면 무슨창인지 나올겁니다.
그럼 이 모달창을 BSP에서 구현하는 방법을 소개하겠습니다.
일반 WEB페이지랑 조금 다른 BSP는 모달창 구현도 조금 달라야 합니다.
기존에 웹에서 사용하는 방법으로 모달창을 띄울경우 호출당한 모달창안에서 이벤트를 띄우면
통제가 안되는(새창을 띄우면서 그전페이지 에러 뜸) 현상이 발생합니다.
제 생각으로는 이벤트를 타면서 모달창을 인식하지 못하고 하나의 새로운 창으로 인식해서
LAYOUT부분에서 창을 다시 만들지 않나 생각됩니다만 (디버깅으로 안잡힙 '') 자세한건 모릅니다. 흐
자 이만 각설하고 본격으로 해부해 보겠습니다.
LAYOUT
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<%@extension name="xhtmlb" prefix="xhtmlb"%>
<htmlb:content design="design2003">
<htmlb:page title="<%=OTR(ZVIVA/TITLE_VIVA)%>"
marginTop="0"
marginLeft="0"
marginRight="0"
marginBottom="0"
scrolling="YES">
<link rel="stylesheet" href="viva.css" type="text/css">
<script language="JavaScript">
var sUserName=''; // 공통변수로 대화창과 데이터를 공유한다.
function doOpenDial(){
showModelessDialog('ZTEST3.htm',window,'status:false;dialogWidth:400px;dialogHeight:200px');
}
function doUpdate(){
oName.innerText = sUserName; // 전달된 값의 적용
}
</SCRIPT>
<htmlb:form method = "post"
encodingType = "multipart/form-data" >
<P>성명 : <SPAN id="oName" style="color:navy;font-size:14pt">홍길동</SPAN></P>
<htmlb:button id = "input"
text = "Input"
width = "75"
onClick = "OnInputProcessing(input)"/>
</htmlb:form>
</htmlb:page>
</htmlb:content>
<%
if message_flag eq 'input'.
%>
<script language="JavaScript">
doOpenDial();
</SCRIPT>
<%
endif.
%>
PAGE ATTRIBUTE
MESSAGE_FLAG TYPE STRING
EVENT HANDLER
OnInputProcessing
* event handler for checking and processing user input and
* for defining navigation
CASE EVENT_ID.
WHEN 'htmlb'.
MESSAGE_FLAG = 'input'.
ENDCASE.
자 일딴 모창입니다. ZTEST1.HTM이란 페이지인데 보시면 간단한 소스로 되어 있습니다.(예제라서;;)
자 그담 여기 ZTEST1.HTM에서 호출되는 모달창 ZTEST3.HTM입니다.
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003" >
<htmlb:page title="Wrapper to cover " >
<htmlb:form>
<iframe align="center"
id="iframe_body"
height="350"
scrolling="no"
width="100%"
frameborder="0"
name="body"
src="ZTEST2.htm" >
</iframe>
</htmlb:form>
</htmlb:page>
</htmlb:content>
iframe을 써서 틀만 만들어 놨습니다. 이안에 내용이 들어가죠 '' 이렇게 하지 않으면
위에서 말했던것처럼 제어가 불가능해집니다. 이벤트가 돌면 창이 튕겨 나가버리죠 ''
최종적으로 기능을 하는 ZTEST2.HTM입니다.
<%@page language="abap"%>
<!DOCTYPE html public "-//w3c//dtd html 3.2//en">
<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 예제 - showModelessDialog (window)</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<SCRIPT>
function doGetData(){
var sData = dialogArguments;
sData.sUserName = oEnterName.value;
sData.doUpdate();
}
function doCancel(){
var sData = dialogArguments;
sData.sUserName = '홍길동';
sData.doUpdate();
}
</SCRIPT>
</HEAD>
<htmlb:content design="design2003" >
<htmlb:page title=" " >
<htmlb:form>
<H3>대화창<FONT size=2 style=font-weight:normal>(modeless dialog box)</FONT> 예제</H3>
<CENTER>
<LABEL for="oEnterName" accesskey="f">성명 : </LABEL>
<INPUT id=oEnterName value="이순신"><BR><BR>
<INPUT value="적용" type=button onclick="doGetData();">
<INPUT value="확인" type=button onclick="doGetData();window.close();">
<INPUT value="취소" type=reset onclick="doCancel();window.close();">
<INPUT value="닫기" type=button onclick="self.close();">
<DIV id=showUrl style="font-size:9pt;color:teal">
<SCRIPT>showUrl.innerText=document.location;</SCRIPT><BR>
dialogArguments 속성은 윈도우에서 선언한 변수를 공통으로 갖는다.</DIV>
</CENTER>
</htmlb:form>
</htmlb:page>
</htmlb:content>
여기서 기능을 합니다. 소스르 보시면 알겠지만 프레임으로 가두어도 똑같은 기능을 합니다. (모창에 대한 제어부분)
BSP에서의 모달창의 핵심은 IFRAME입니다.(말이 이상한가 ㅡ,.ㅡ)
IFRAME을 써서 호출되는 창을 제어하면 모달창을 BSP에서 구현하실수 있습니다.
P.S 다른 방법있으심 포스팅좀 해주세요 전 이방법 밖에는 ㅡ.ㅜ OTL
참고로 스크립트나 다른 베이스는 http://koxo.com/ 여기에껄 이용해 썼습니다. ''
그럼이만 ''
'SAP > BSP' 카테고리의 다른 글
| BSP - BSP에서의 RANGE변수 (0) | 2008.02.25 |
|---|---|
| BSP - LAYOUT MESSAGE 효과적으로 띄우기 (0) | 2008.02.25 |
| BSP - 숫자를 컨버젼하는 프로그램(3자리마다 컴마 찍자) (0) | 2008.02.25 |
| BSP - 파일 업로드와 다운로드 1 (0) | 2008.02.22 |
| BSP - 각 필드의 자동 합계 소스 (0) | 2008.02.22 |
