[카테고리:] 미분류

작성일자

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 입니다. 채널을 구독하시면 영상 업로드 시 바로 알 수 있습니다.

작성일자

PostreSQL의 PL/pgSQL에서, 최대값을 구해 다음 값으로 데이터 추가하기

먼저 다음과 같은 테이블이 있습니다.

-- DIRECTORY
CREATE TABLE directory (
    id INTEGER, -- 디렉토리 ID
    parent_id INTEGER, -- 부모 디렉토리 (null 값일 때 루트)
    user_id INTEGER NOT NULL, -- 사용자 ID

    PRIMARY KEY (id, user_id),
    CONSTRAINT fk_parent_i FOREIGN KEY(user_id, parent_id) REFERENCES directory(user_id, id) ON DELETE CASCADE
);

그리고 이 테이블에 데이터를 추가하는 함수는 다음과 같습니다.

-- 신규 데이터 추가 함수
CREATE OR REPLACE FUNCTION add(_parent_id INTEGER, _user_id INTEGER) RETURNS INTEGER
LANGUAGE plpgsql AS $$
DECLARE
    max_id INTEGER;
    next_id INTEGER;
BEGIN
    -- 해당 user에 대해서 최대값의 id 값을 구해서 max_id 변수에 할당
    SELECT MAX(id) INTO max_id FROM directory WHERE user_id = _user_id;

    IF max_id IS NULL THEN -- max_id 값이 없다면
        next_id := 0; -- 다음 id 값은 0으로 할당
    ELSE
        next_id := max_id + 1; -- 다음 id 값은 최대값에 1을 더해서 할당
    END IF;
	
    -- 다음 id 값을 콘솔에 출력해서 확인
    RAISE NOTICE 'next_id = %', next_id;
	
    -- 다음 id 값으로 데이터 추가
    INSERT INTO directory VALUES (next_id, _parent_id, _user_id);

    -- 다음 id 값 반환
    RETURN next_id;
END $$