GIS Developer

2022-03-122022-04-19

#GWC UI Library : Memo

웹 UI 라이브러리인 GWC에서 제공하는 Memo 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다. gwc-resizable-panel 태그로 감싸서 크기 조정이 가능하도록 했습니다. 이는 옵션입니다.

그리고 CSS 구성은 다음과 같구요.


.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.hcenter {
    flex-direction: column;
    display: flex;
    _align-items: center;
}

gwc-memo {
    width: 100%;
    height: 100%;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button1.onclick = () => {
        memo.value = "메모에 대한 내용은 코드로 변경할 수 있어요.\n줄 바꿈도 가능하답니다.";
    }

    button2.onclick = () => {
        gwcMessage(memo.value);
    }

    button3.onclick = () => {
        console.log(memo.disabled);
        memo.disabled = !memo.disabled;
    }

    button4.onclick = () => {
        console.log(memo.readonly);
        memo.readonly = !memo.readonly;
    }

    memo.addEventListener("change", (event) => {
        labelEvent.content = `${memo.value.length}자가 입력됨 (입력가능 문자수 ${memo.maxLength})`;
    })

    GeoServiceWebComponentManager.instance.update();
   
};

실행 결과는 다음과 같습니다.

gwc-memo 태그 선언을 통해 value 속성에 문자열을 지정할 때 문자열에 쌍따옴표가 있을 경우 변환이 필요합니다.

<gwc-memo value="${params.content.replaceAll("\"", """)}"></gwc-memo>

2022-03-122023-08-27

gwcCreateModalDialog의 resizing 코드 예 (gwc-card에도 적용됨)

하나의 모달 대화상자를 gwcCreateModalDialog 함수를 이용해 만들때 class 단위로 만들면 전체적인 시스템의 UI 기능이 효과적으로 분리됩니다. 먼저 모달 대화상자에 대한 코드를 class로 만듭니다.

class ArchiveManagerDialog {
    constructor() {
        const dlg = gwcCreateModalDialog("아카이브 관리자");
        dlg.content = `
            
                
                    
                        
                        
                        
                        
                            
                            
                            
                        
                    
                    
                        
                            
                        
                    
                
            
        `;
       
        dlg.width = "50em";

        dlg.resizablePanel.resizableLeft = true;
        dlg.resizablePanel.resizableRight = true;
        dlg.resizablePanel.resizableTop = true;
        dlg.resizablePanel.resizableBottom = true;

        dlg.resizablePanel.minWidth = 450;
        dlg.resizablePanel.minHeight = 300;
        dlg.resizablePanel.addEventListener("change", (event) => {
            if(event.target === dlg.resizablePanel) {
                const { mode, oldHeight, newHeight } = event.detail;
                if(mode === "BOTTOM" || mode == "TOP") {
                    const domScrollView = dlg.content.querySelector("gwc-vscrollview");
                    const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue("height"));
                    domScrollView.style.height = `${height - (oldHeight - newHeight)}px`;
                    domScrollView.refresh();
                }
            }
        });

        dlg.show();
        GeoServiceWebComponentManager.instance.update();
    }
}

CSS에 대한 코드는 다음과 같습니다.

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    _padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.v-space {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.archive-manager-dialog {
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.archive-manager-dialog gwc-textinput {
    width: 10em;
}

.archive-manager-dialog .search-part {
    margin-left: auto;
}

.archive-manager-dialog gwc-vscrollview {
    height: 30em; /* js 코드로 크기를 조정해야 함 */
    margin: 0 0.2em;
    background: rgba(0,0,0,0.3);
    box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4), 
        inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5);
    border-radius: 0.5em;    
}

.archive-manager-dialog gwc-tree {
    width: 100%;
    padding: 0.5em 0.5em 0.5em 0.5em;
    _border: 1px solid red;    
}

실행 결과는 다음과 같습니다.

2022-03-022022-03-02

[PostgreSQL] 문자열 값 INSERT 할 때 …

INSERT 문을 구성할 때 문자열 값이라는 의미를 외따옴표로 시작해서 외따옴표로 끝납니다. 그렇다면 외따옴표 자체를 문자열 값으로 넣고 싶다면… 외따움표를 2개 넣어주면 됩니다. 그리고 줄간행(Carrage Return) 문자는 아스키값 10번이므로 CHR(10)가 되는데.. 이처럼 값이 외따옴표일때와 줄간행 문자에 대한 저장을 위해 다음 코드 예시가 도움이 되길 바랍니다.

const sql = `
    select geoservice_add_archive(
        ${window._userId},
        ${this.#directoryId?this.#directoryId:"NULL"},
        '${savedFileName.replaceAll("'", "''")}',
        '${file.name.replaceAll("'", "''")}',
        ${this.#selectEPSG.disabled?"NULL":this.#selectEPSG.value},
        ${file.size},
        '${this.#textInputTitle.value.replaceAll("'", "''")}',
        '${this.#memo.value.replaceAll("'", "''").replaceAll("\n", "'||CHR(10)||'")}',
        '${this.#selectedFile.MD5}',
        TRUE,
        TRUE
    ) r        
`;

참고로 geoservice_add_archive는 DB 프로시져이므로 무시하고 관심의 대상을 문자열값에 대한 처리에 중집하면 됩니다.

글

#GWC UI Library : Tree

#GWC UI Library : Memo

#GWC UI Library : PopupMenu

gwcCreateModalDialog의 resizing 코드 예 (gwc-card에도 적용됨)

[PostgreSQL] 문자열 값 INSERT 할 때 …