[카테고리:] 미분류

작성일자

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;    
}

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

작성일자

[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 프로시져이므로 무시하고 관심의 대상을 문자열값에 대한 처리에 중집하면 됩니다.

작성일자

Java에서 JSON 문자열을 통해 값 얻기

JSON은 Javascript를 위해 탄생했고, Javascript가 웹의 대세 언어이다보니 다른 언어에서도 JSON 형식의 값을 읽을 상황이 많이 발생합니다.

다음은 Java에서 json-simple이라는 라이브러리를 통해 JSON 문자열에서 특정값을 얻어오는 소스입니다.

String strJson = "[{"v": "0 *\/3 * * *"}]";
JSONParser parser = new JSONParser();
JSONArray values = (JSONArray)parser.parse(strJson);
JSONObject value = (JSONObject)values.get(0);
System.out.println((String)value.get("v"));

결과는 다음과 같습니다.

0 *\/3 * * *

작성일자

주말에 THREE.JS를 이용해 만든 것

제 유튜브 채널을 통해 강좌로 소개할 것들에 대해 먼저 결과 만을 찍어 먼저 올려 봅니다. 아마 바로 돌아오는 이번주 토요일 쯤.. 아래 2개 중 한 개를 찍어 올릴 듯 합니다.

제 유튜브 채널 이름은 GIS Developer 입니다. 채널을 구독하시면 영상 업로드 시 바로 알 수 있습니다.