LaBee Framework 팝업 창 표시 방법

LaBee Framework는 자바가 웹 시스템을 개발하는 공장 표준을 목표로 제로부터 제작하는 국산 자바 프레임워크다.해외 제조틀 특유의 난해함과 정보 부족으로 인한 노동시간과 인력 증가를 해결하고 자바의 웹 개발 효율성을 높이기 위해 제작됐다.LGPL 라이센스에 오픈 소스 코드가 공개되어 개인과 기업 모두 무료로 사용 가능
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>
  • 팝업 창 옆에 있는 JSP는 일반적인 JSP 설치 내용과 다를 것이 없습니다.
  • 팝업 측면 bean 설치 예시
    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;
        }
    }
    
  • 팝업 창 옆에 있는 빈은 일반적인 JSP 설치 내용과 다릅니다.
  • 팝업 측면 블로그 설치 예
    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을 상속합니다.
  • 제51행 부류 정의의 슈퍼.setPopupToParentJsonResponse(appJsonData);팝업 디스플레이가 완료되면 JSON을 부모 화면으로 되돌려 화면을 동적으로 덮어씁니다.팝업 응답 유형은 여러 가지이며 원하는 응답 유형을 선택할 수 있습니다.
    설정 가능합니다.
  • 팝업 완료 시 응답 설정 종류


    응답 유형
    개요
    일반적
    ResponseContext에서 설정하지 않으면 기본적으로 팝업 창에서 이벤트 처리가 수행되고 팝업 화면이 바로 표시됩니다.
    setPopupCloseOnlyResponse()
    팝업 창의 표시를 완료하고 다른 처리는 하지 않습니다.(팝업만 닫기)
    setPopupToParentSubmitResponse(String target, String execute, String... params)
    팝업 창의 표시를 완료하고 부모 화면에서 지정한 대상에 대한 이벤트 처리를 실행합니다.
    setPopupToParentJsonResponse(JsonValueContext jsonvalContext)
    팝업 창을 표시하고 JSON을 응답으로 되돌려 부모 화면의 요소를 동적으로 바꿉니다.이것은 본 샘플이 실시하는 응답 방법이다.
    setPopupToNextPopupResponse(AppPopupContext popupContext)
    팝업 창 표시가 완료되면 다른 처리를 계속하는 팝업 화면의 응답 방법을 표시합니다.
    샘플 실행 결과
    팝업 화면 표시 전

    팝업 화면 표시

    클로즈업 팝업 후

    좋은 웹페이지 즐겨찾기