LaBee Framework 팝업 창 표시 방법
https://www.bee-wkspace.com/
팝업 창 보이기
LaBeeFramework는 모드 팝업 창 기능(jQuery 사용)을 가지고 있으며 팝업 창 화면에서 일반적인 비즈니스 논리와 같은 화면 처리를 수행할 수 있습니다.
팝업 화면의 처리가 완료된 후 창을 닫은 이벤트에서 부모 창을 다시 제출하거나 부모 창의 화면 항목을 동적으로 다시 쓰거나 다른 팝업을 연속으로 표시할 수 있습니다.
샘플 예제에서 호출 측면의 부모 화면(JSP)에서 모드 팝업 창을 열고 팝업 측면에 이름 텍스트 상자를 입력합니다.
완료 단추를 누르면 입력이 정상적일 때 팝업 디스플레이를 완성하고 부모 화면의 이름을 동적으로 덮어쓰면div값을 표시합니다.
측근 JSP 설치 예 호출<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page session="false"%>
<%@ taglib prefix="LaBee" uri="/WEB-INF/lib/LaBeeFramework.jar"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LaBee:header requestScope="${requestScope}"/>
</head>
<body>
<form name="mainForm" method="post" action="ctrl">
<div>名前</div>
<div id="userName"></div>
<button type="button"
onClick="<LaBee:showPopupWindow
target="web.PopupSample"
execute="start"
width="500"
height="350"
nextForm="mainForm"
nextTarget="web.PopupSample"
nextExecute="confirm"
entryButtonName="完了"
closeButtonName="閉じる"
requestScope="${requestScope}"
/>">
ポップアップ表示
</button>
</form>
</body>
</html>
팝업 측 JSP 설치 예<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page session="false"%>
<%@ taglib prefix="LaBee" uri="/WEB-INF/lib/LaBeeFramework.jar"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LaBee:header requestScope="${requestScope}"/>
</head>
<body>
<form name="mainForm" method="post" action="ctrl">
<div>名前入力</div>
<LaBee:textbox
name="userName"
value="${bean.userName}"
bean="${bean}"/>
</form>
</body>
</html>
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page session="false"%>
<%@ taglib prefix="LaBee" uri="/WEB-INF/lib/LaBeeFramework.jar"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LaBee:header requestScope="${requestScope}"/>
</head>
<body>
<form name="mainForm" method="post" action="ctrl">
<div>名前</div>
<div id="userName"></div>
<button type="button"
onClick="<LaBee:showPopupWindow
target="web.PopupSample"
execute="start"
width="500"
height="350"
nextForm="mainForm"
nextTarget="web.PopupSample"
nextExecute="confirm"
entryButtonName="完了"
closeButtonName="閉じる"
requestScope="${requestScope}"
/>">
ポップアップ表示
</button>
</form>
</body>
</html>
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ page session="false"%>
<%@ taglib prefix="LaBee" uri="/WEB-INF/lib/LaBeeFramework.jar"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LaBee:header requestScope="${requestScope}"/>
</head>
<body>
<form name="mainForm" method="post" action="ctrl">
<div>名前入力</div>
<LaBee:textbox
name="userName"
value="${bean.userName}"
bean="${bean}"/>
</form>
</body>
</html>
package sample.bean.web;
import java.io.Serializable;
import com.bee_wkspace.labee_fw.app.base.AppBaseBean;
import com.bee_wkspace.labee_fw.app.base.AppInputCheckBean;
import com.bee_wkspace.labee_fw.common.Validater;
import com.bee_wkspace.labee_fw.core.annotation.AutoSetterParam;
/**
* ポップアップサンプルビーン。
*/
public class PopupSampleBean extends AppBaseBean implements Serializable {
/** 名前 */
private String userName;
/**
* コンストラクタ。
*/
public PopupSampleBean() {
super();
}
/**
* 初期化
*/
@Override
public void init() {
super.init();
userName = null;
}
/**
* 名前をセットし入力チェックを行なう。
*
* @param paramName パラメータ名
* @param value パラメータ値
*/
@AutoSetterParam
public void setUserName(String paramName, String value) {
userName = value;
AppInputCheckBean inpChkBean = new AppInputCheckBean(this, paramName, value, "名前");
Validater.checkNull(inpChkBean);
Validater.checkMaxLength(inpChkBean, 16);
}
public String getUserName() {
return userName;
}
}
package sample.blogic.web;
import sample.bean.web.PopupSampleBean;
import com.bee_wkspace.labee_fw.app.base.AppPopupBaseBlogic;
import com.bee_wkspace.labee_fw.core.annotation.FwBlogic;
import com.bee_wkspace.labee_fw.core.annotation.FwExeMethod;
import com.bee_wkspace.labee_fw.core.base.BaseBean;
import com.bee_wkspace.labee_fw.core.context.JsonValueContext;
import com.bee_wkspace.labee_fw.core.context.ResponseContext;
import com.bee_wkspace.labee_fw.exception.FwException;
/**
* ポップアップロジックサンプル。
*/
@FwBlogic(beanReuse = true)
public class PopupSampleBlogic extends AppPopupBaseBlogic<PopupSampleBean> {
/**
* コンストラクタ。
*/
public PopupSampleBlogic() {
super();
}
/**
* 初期表示イベント処理。
*/
@Override
@FwExeMethod
public ResponseContext start() throws FwException {
bean.init();
return responseContext;
}
/**
* 完了ボタン押下イベント処理。
*/
@FwExeMethod
public ResponseContext confirm() throws FwException {
try {
// 自動パラメータセッター実行
super.doAutoBeanSetter();
// パラメータ入力チェック結果判定
if (bean.isInputChkErrFlg() == BaseBean.INPUT_CHK_RESULT_SUCCESS) {
JsonValueContext appJsonData = new JsonValueContext();
appJsonData.addJsonValue("userName", bean.getUserName());
// 親画面にJSONを返却し画面を動的に書き換えるレスポンスを設定
super.setPopupToParentJsonResponse(appJsonData);
}
} catch (Exception e) {
throw new FwException(e);
}
return responseContext;
}
}
팝업 창 옆의 상업 논리는 보통과 다르다.bee_wkspace.labee_fw.app.base.AppupBaseBlogic을 상속합니다. 설정 가능합니다.
팝업 완료 시 응답 설정 종류
응답 유형
개요
일반적
ResponseContext에서 설정하지 않으면 기본적으로 팝업 창에서 이벤트 처리가 수행되고 팝업 화면이 바로 표시됩니다.
setPopupCloseOnlyResponse()
팝업 창의 표시를 완료하고 다른 처리는 하지 않습니다.(팝업만 닫기)
setPopupToParentSubmitResponse(String target, String execute, String... params)
팝업 창의 표시를 완료하고 부모 화면에서 지정한 대상에 대한 이벤트 처리를 실행합니다.
setPopupToParentJsonResponse(JsonValueContext jsonvalContext)
팝업 창을 표시하고 JSON을 응답으로 되돌려 부모 화면의 요소를 동적으로 바꿉니다.이것은 본 샘플이 실시하는 응답 방법이다.
setPopupToNextPopupResponse(AppPopupContext popupContext)
팝업 창 표시가 완료되면 다른 처리를 계속하는 팝업 화면의 응답 방법을 표시합니다.
샘플 실행 결과
팝업 화면 표시 전
팝업 화면 표시
클로즈업 팝업 후
Reference
이 문제에 관하여(LaBee Framework 팝업 창 표시 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/LaBeeOfficial/items/681b9162f54ce902b196텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)