[카테고리:] GWC UI Library

작성일자

gwcCreateModalDialog의 resizing 코드 예 (JS 코드 최소화)

gwcCreateModalDialog에서 크기 조절 시 UI가 적절하게 배치되도록 하기 위한 코드를 정리해 봅니다.

먼저 만들고자 하는 UI는 다음 영상과 같습니다.

먼저 JS 코드는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class GeocodingTool {
constructor() {
const dlg = gwcCreateModalDialog("지오코딩");
dlg.content = `
<div class="geocoding-tool-dialog">
<div class="content vertical-linear-layout">
<div class="horizontal-linear-layout v-center">
<gwc-space size="3px"></gwc-space>
<gwc-toolbutton class="archive" icon="../images/load.svg" title="아카이브에서 데이터 불러오기"></gwc-toolbutton>
<gwc-space size="10px"></gwc-space>
<gwc-select class="address-column" label="주소 컬럼"></gwc-select>
<gwc-space size="5px"></gwc-space>
<gwc-checkbox title="정좌표" class="coord-correct" checked="true"></gwc-checkbox>
<gwc-checkbox title="인근좌표" class="coord-nearby" checked="true"></gwc-checkbox>
<gwc-checkbox title="대표좌표" class="coord-represent" checked="false"></gwc-checkbox>
<gwc-toolbutton class="run" icon="../images/done.svg" title="지오코딩 실행"></gwc-toolbutton>
<gwc-space size="3px"></gwc-space>
</div>
<gwc-grid></gwc-grid>
<div class="grid-navigator horizontal-linear-layout v-center h-center">
<gwc-toolbutton class="move-first" icon="../images/move_first.svg"></gwc-toolbutton>
<gwc-toolbutton class="move-prev" icon="../images/move_prev.svg"></gwc-toolbutton>
<gwc-label class="progress-label" content="65%"></gwc-label>
<gwc-toolbutton class="move-next" icon="../images/move_next.svg"></gwc-toolbutton>
<gwc-toolbutton class="move-last" icon="../images/move_last.svg"></gwc-toolbutton>
</div>
</div>
</div>
`;
dlg.width = "70em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함
dlg.height = "50em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함
dlg.resizablePanel.minWidth = 550;
dlg.resizablePanel.minHeight = 300;
dlg.resizablePanel.resizableRight = true;
dlg.resizablePanel.resizableBottom = true;
dlg.show();
GeoServiceWebComponentManager.instance.update();
}
}
class GeocodingTool { constructor() { const dlg = gwcCreateModalDialog("지오코딩"); dlg.content = ` <div class="geocoding-tool-dialog"> <div class="content vertical-linear-layout"> <div class="horizontal-linear-layout v-center"> <gwc-space size="3px"></gwc-space> <gwc-toolbutton class="archive" icon="../images/load.svg" title="아카이브에서 데이터 불러오기"></gwc-toolbutton> <gwc-space size="10px"></gwc-space> <gwc-select class="address-column" label="주소 컬럼"></gwc-select> <gwc-space size="5px"></gwc-space> <gwc-checkbox title="정좌표" class="coord-correct" checked="true"></gwc-checkbox> <gwc-checkbox title="인근좌표" class="coord-nearby" checked="true"></gwc-checkbox> <gwc-checkbox title="대표좌표" class="coord-represent" checked="false"></gwc-checkbox> <gwc-toolbutton class="run" icon="../images/done.svg" title="지오코딩 실행"></gwc-toolbutton> <gwc-space size="3px"></gwc-space> </div> <gwc-grid></gwc-grid> <div class="grid-navigator horizontal-linear-layout v-center h-center"> <gwc-toolbutton class="move-first" icon="../images/move_first.svg"></gwc-toolbutton> <gwc-toolbutton class="move-prev" icon="../images/move_prev.svg"></gwc-toolbutton> <gwc-label class="progress-label" content="65%"></gwc-label> <gwc-toolbutton class="move-next" icon="../images/move_next.svg"></gwc-toolbutton> <gwc-toolbutton class="move-last" icon="../images/move_last.svg"></gwc-toolbutton> </div> </div> </div> `; dlg.width = "70em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함 dlg.height = "50em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함 dlg.resizablePanel.minWidth = 550; dlg.resizablePanel.minHeight = 300; dlg.resizablePanel.resizableRight = true; dlg.resizablePanel.resizableBottom = true; dlg.show(); GeoServiceWebComponentManager.instance.update(); } }
class GeocodingTool {
    constructor() {
        const dlg = gwcCreateModalDialog("지오코딩");

        dlg.content = `
            

                

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    
                    

                        
                        
                        
                        
                        
                    

                

            

        `;

        dlg.width = "70em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함
        dlg.height = "50em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함

        dlg.resizablePanel.minWidth = 550;
        dlg.resizablePanel.minHeight = 300;

        dlg.resizablePanel.resizableRight = true;
        dlg.resizablePanel.resizableBottom = true;
        
        dlg.show();
        GeoServiceWebComponentManager.instance.update();
    }
}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.geocoding-tool-dialog {
padding: 0.5em;
height: 100%;
}
.geocoding-tool-dialog .content {
height: 100%;
}
.geocoding-tool-dialog gwc-grid {
flex: 1;
}
.geocoding-tool-dialog .address-column {
width: 250px;
}
.geocoding-tool-dialog .run {
margin-left: auto;
}
.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; } .geocoding-tool-dialog { padding: 0.5em; height: 100%; } .geocoding-tool-dialog .content { height: 100%; } .geocoding-tool-dialog gwc-grid { flex: 1; } .geocoding-tool-dialog .address-column { width: 250px; } .geocoding-tool-dialog .run { margin-left: auto; }
.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;
}

.geocoding-tool-dialog {
    padding: 0.5em;
    height: 100%;
}

.geocoding-tool-dialog .content {
    height: 100%;
}

.geocoding-tool-dialog gwc-grid {
    flex: 1;
}

.geocoding-tool-dialog .address-column {
    width: 250px;
}

.geocoding-tool-dialog .run {
    margin-left: auto;
}
작성일자

#GWC UI Library : Grid

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

먼저 DOM 구성은 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="center">
<gwc-grid id="grid"></gwc-grid>
</div>
<div class="center"> <gwc-grid id="grid"></gwc-grid> </div>

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
gap: 1em;
}
#grid {
width: 500px;
height: 300px;
}
.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; gap: 1em; } #grid { width: 500px; height: 300px; }
.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#grid {
    width: 500px;
    height: 300px;
}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
window.onload = () => {
grid.columns = [
{ name: "NO" },
{ name: "이름" },
{ name: "나이" },
{ name: "주소" },
{ name: "회사" },
{ name: "기타" }
];
grid.data = [
{ values: ["1", "김영희", "30", "경기도 양평군", "초록마을", "온화하며 삶에 대한 여운을 느낄줄 아는 사람"] },
{ values: ["2", "홍길동", "40", "전라남도 여수시", "혜민당", "실존 인물을 모델로하여 쓰여진 소설의 주인공"] },
{ values: ["3", "심청", "15", "제주도", "임당수", "아버지의 눈을 낫게하기 위해 희생을 하는 계획 있는 효녀"] },
....
];
grid.fixFirstColumn = true;
grid.addEventListener("columnclick", (event) => {
const v = grid.getColumn(event.detail.index).name;
gwcMessage(`컬럼명: ${v}`);
});
grid.addEventListener("dataclick", (event) => {
const v = grid.getData(event.detail.row, event.detail.column);
gwcMessage(`데이터: ${v}`);
});
};
window.onload = () => { grid.columns = [ { name: "NO" }, { name: "이름" }, { name: "나이" }, { name: "주소" }, { name: "회사" }, { name: "기타" } ]; grid.data = [ { values: ["1", "김영희", "30", "경기도 양평군", "초록마을", "온화하며 삶에 대한 여운을 느낄줄 아는 사람"] }, { values: ["2", "홍길동", "40", "전라남도 여수시", "혜민당", "실존 인물을 모델로하여 쓰여진 소설의 주인공"] }, { values: ["3", "심청", "15", "제주도", "임당수", "아버지의 눈을 낫게하기 위해 희생을 하는 계획 있는 효녀"] }, .... ]; grid.fixFirstColumn = true; grid.addEventListener("columnclick", (event) => { const v = grid.getColumn(event.detail.index).name; gwcMessage(`컬럼명: ${v}`); }); grid.addEventListener("dataclick", (event) => { const v = grid.getData(event.detail.row, event.detail.column); gwcMessage(`데이터: ${v}`); }); };
window.onload = () => {
    grid.columns = [
        { name: "NO" },
        { name: "이름" },
        { name: "나이" },
        { name: "주소" },
        { name: "회사" },
        { name: "기타" }
    ];

    grid.data = [
        { values: ["1", "김영희", "30", "경기도 양평군", "초록마을", "온화하며 삶에 대한 여운을 느낄줄 아는 사람"] },
        { values: ["2", "홍길동", "40", "전라남도 여수시", "혜민당", "실존 인물을 모델로하여 쓰여진 소설의 주인공"] },
        { values: ["3", "심청", "15", "제주도", "임당수", "아버지의 눈을 낫게하기 위해 희생을 하는 계획 있는 효녀"] },
        ....
    ];

    grid.fixFirstColumn = true;

    grid.addEventListener("columnclick", (event) => {
        const v = grid.getColumn(event.detail.index).name;
        gwcMessage(`컬럼명: ${v}`);
    });

    grid.addEventListener("dataclick", (event) => {
        const v = grid.getData(event.detail.row, event.detail.column);
        gwcMessage(`데이터: ${v}`);
    });
};

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

다음은 크기 조절과 이동이 가능한 Card 컴포넌트와 함께 사용된 예제입니다.

먼저 DOM 구성은 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<gwc-card label="이름 카드" gwc-draggable="true">
<gwc-grid id="grid"></gwc-grid>
</gwc-card>
<gwc-card label="이름 카드" gwc-draggable="true"> <gwc-grid id="grid"></gwc-grid> </gwc-card>

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
_flex-direction: column;
gap: 1em;
}
#grid {
width: calc(100% - 6px);
height: calc(100% - 6px);
margin: 3px;
}
gwc-card {
left: 100px;
top: 100px;
width: 500px;
height: 300px;
}
.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; _flex-direction: column; gap: 1em; } #grid { width: calc(100% - 6px); height: calc(100% - 6px); margin: 3px; } gwc-card { left: 100px; top: 100px; width: 500px; height: 300px; }
.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    _flex-direction: column;
    gap: 1em;
}

#grid {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    margin: 3px;
}

gwc-card {
    left: 100px;
    top: 100px;
    width: 500px;
    height: 300px;
}

js 코드에 반드시 다음 코드를 추가해 줘야 합니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
GeoServiceWebComponentManager.instance.update();
GeoServiceWebComponentManager.instance.update();
GeoServiceWebComponentManager.instance.update();