[카테고리:] GWC UI Library

작성일자

#GWC UI Library : Card

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="center">
<gwc-card class="card1" label="도구모음" gwc-draggable="true">
<div class="vcenter">
<gwc-toolbutton class="toolbutton1" icon="images/icon1.png"></gwc-toolbutton>
<gwc-toolbutton class="toolbutton2" icon="images/icon2.png"></gwc-toolbutton>
<gwc-colorpicker value="#ffff00"></gwc-colorpicker>
<gwc-toolbutton class="toolbutton3" icon="images/icon3.png"></gwc-toolbutton>
</div>
</gwc-card>
<gwc-card class="card2" label="PS5 게임 타이틀" gwc-draggable="true">
<div class="vcenter">
<gwc-image shape="circle" src="./images/ps5_returnal.jpg"></gwc-image>
<gwc-image shape="circle" src="./images/ps5_kena.webp"></gwc-image>
<gwc-image shape="circle" src="./images/ps5_sackboy.jpg"></gwc-image>
</div>
</gwc-card>
<gwc-card class="card3" id="card" label="입력 폼" gwc-draggable="true"></gwc-card>
</div>
<div class="center"> <gwc-card class="card1" label="도구모음" gwc-draggable="true"> <div class="vcenter"> <gwc-toolbutton class="toolbutton1" icon="images/icon1.png"></gwc-toolbutton> <gwc-toolbutton class="toolbutton2" icon="images/icon2.png"></gwc-toolbutton> <gwc-colorpicker value="#ffff00"></gwc-colorpicker> <gwc-toolbutton class="toolbutton3" icon="images/icon3.png"></gwc-toolbutton> </div> </gwc-card> <gwc-card class="card2" label="PS5 게임 타이틀" gwc-draggable="true"> <div class="vcenter"> <gwc-image shape="circle" src="./images/ps5_returnal.jpg"></gwc-image> <gwc-image shape="circle" src="./images/ps5_kena.webp"></gwc-image> <gwc-image shape="circle" src="./images/ps5_sackboy.jpg"></gwc-image> </div> </gwc-card> <gwc-card class="card3" id="card" label="입력 폼" gwc-draggable="true"></gwc-card> </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;
flex-direction: column;
gap: 1em;
}
.hcenter {
display: flex;
align-items: center;
gap: 0.2em;
flex-direction: column;
gap: 0.5em;
}
.vcenter {
display: flex;
align-items: center;
gap: 0.2em;
padding: 0.5em 0.5em 0 0.5em;
}
gwc-image {
width: 7em;
height: 7em;
}
gwc-textinput {
width: 20em;
}
gwc-select {
width: 20em;
}
.card1 {
width: 360px;
height: 150px;
}
.card2 {
width: 400px;
height: 170px;
}
.card3 {
width: 500px;
height: 120px;
}
.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; gap: 1em; } .hcenter { display: flex; align-items: center; gap: 0.2em; flex-direction: column; gap: 0.5em; } .vcenter { display: flex; align-items: center; gap: 0.2em; padding: 0.5em 0.5em 0 0.5em; } gwc-image { width: 7em; height: 7em; } gwc-textinput { width: 20em; } gwc-select { width: 20em; } .card1 { width: 360px; height: 150px; } .card2 { width: 400px; height: 170px; } .card3 { width: 500px; height: 120px; }
.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

.hcenter {
    display: flex;
    align-items: center;
    gap: 0.2em;
    flex-direction: column;
    gap: 0.5em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.5em 0.5em 0 0.5em;
}

gwc-image {
    width: 7em;
    height: 7em;
}

gwc-textinput {
    width: 20em;
}

gwc-select {
    width: 20em;
}

.card1 {
    width: 360px;
    height: 150px;
}

.card2 {
    width: 400px;
    height: 170px;
}

.card3 {
    width: 500px;
    height: 120px;
}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
window.onload = () => {
card.content = `
<div class="hcenter">
<div class="vcenter">
<gwc-label content="좌우명" outline-type="concave"></gwc-label>
<gwc-textinput value="인간은 말이 아닌 행위로 정의된다."></gwc-textinput>
</div>
<gwc-button title="확인"></gwc-button>
</div>
`;
GeoServiceWebComponentManager.instance.update();
};
window.onload = () => { card.content = ` <div class="hcenter"> <div class="vcenter"> <gwc-label content="좌우명" outline-type="concave"></gwc-label> <gwc-textinput value="인간은 말이 아닌 행위로 정의된다."></gwc-textinput> </div> <gwc-button title="확인"></gwc-button> </div> `; GeoServiceWebComponentManager.instance.update(); };
window.onload = () => {
    card.content = `
        

            

                
                
            

            
        

    `;

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트에 modal이라는 속성이 추가되어 true 값으로 설정되면 모달 방식으로 처리됩니다.

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

이 컴포넌트의 타이틀 우측에 다양한 UI를 추가할 수 있습니다. 예를 들어 버튼을 추가하는 코드는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
card.domHeadLeftSpace.innerHTML = `
<gwc-toolbutton icon="../images/close.svg"></gwc-toolbutton>
`;
card.domHeadLeftSpace.querySelector("gwc-toolbutton").addEventListener("click", () => {
alert("Hello!");
});
card.domHeadLeftSpace.innerHTML = ` <gwc-toolbutton icon="../images/close.svg"></gwc-toolbutton> `; card.domHeadLeftSpace.querySelector("gwc-toolbutton").addEventListener("click", () => { alert("Hello!"); });
card.domHeadLeftSpace.innerHTML = `
    
`;

card.domHeadLeftSpace.querySelector("gwc-toolbutton").addEventListener("click", () => {
    alert("Hello!");
});
작성일자

#GWC UI Library : RangeSlider

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="center">
<gwc-label id="label" content="RangeSlider 이벤트 정보" outline-type="concave"></gwc-label>
<gwc-rangeslider id="rangeslider" label="몸무게" unit="kg" to-fixed="1" min="1" max="200" value1="60" value2="100"></gwc-rangeslider>
<div>
<gwc-button id="button1" title="값 확인"></gwc-button>
<gwc-button id="button2" title="속성 변경"></gwc-button>
</div>
</div>
<div class="center"> <gwc-label id="label" content="RangeSlider 이벤트 정보" outline-type="concave"></gwc-label> <gwc-rangeslider id="rangeslider" label="몸무게" unit="kg" to-fixed="1" min="1" max="200" value1="60" value2="100"></gwc-rangeslider> <div> <gwc-button id="button1" title="값 확인"></gwc-button> <gwc-button id="button2" title="속성 변경"></gwc-button> </div> </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;
flex-direction: column;
gap: 3em;
}
#rangeslider {
width: 20em;
}
.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; gap: 3em; } #rangeslider { width: 20em; }
.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

#rangeslider {
    width: 20em;
}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
window.onload = () => {
rangeslider.addEventListener("change", () => {
label.content = `슬라이더 값 변경: ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}`;
});
button1.addEventListener("click", () => {
gwcMessage(`범위 슬라이더의 현재 값은 ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}입니다.`);
});
button2.addEventListener("click", () => {
rangeslider.label = "신장";
rangeslider.min = 30;
rangeslider.max = 250;
rangeslider.value1 = 160;
rangeslider.value2 = 190;
rangeslider.toFixed = 0;
rangeslider.unit = "cm";
});
GeoServiceWebComponentManager.instance.update();
};
window.onload = () => { rangeslider.addEventListener("change", () => { label.content = `슬라이더 값 변경: ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}`; }); button1.addEventListener("click", () => { gwcMessage(`범위 슬라이더의 현재 값은 ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}입니다.`); }); button2.addEventListener("click", () => { rangeslider.label = "신장"; rangeslider.min = 30; rangeslider.max = 250; rangeslider.value1 = 160; rangeslider.value2 = 190; rangeslider.toFixed = 0; rangeslider.unit = "cm"; }); GeoServiceWebComponentManager.instance.update(); };
window.onload = () => {
    rangeslider.addEventListener("change", () => {
        label.content = `슬라이더 값 변경: ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}`;
    });

    button1.addEventListener("click", () => {
        gwcMessage(`범위 슬라이더의 현재 값은 ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}입니다.`);
    });

     button2.addEventListener("click", () => {
        rangeslider.label = "신장";
        rangeslider.min = 30;
        rangeslider.max = 250;
        rangeslider.value1 = 160;
        rangeslider.value2 = 190;
        rangeslider.toFixed = 0;
        rangeslider.unit = "cm";
    });    

    GeoServiceWebComponentManager.instance.update();
};

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