글

작성일자

#GWC UI Library : SearchInput

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

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

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

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.input {
    width: 25em; /* 포커스를 받으면 커지는 크기 */
}

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

window.onload = () => {
    input.addEventListener("enter", () => {
        const v = input.value;

        gwcMessage(`"${v}"(으)로 검색을 수행합니다.`);
        
        input.addHistory(v);
    });

    GeoServiceWebComponentManager.instance.update();
};

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

이 컴포넌트는 사용자가 클릭할 때 입력이 활성화되는데요. 항상 활성화되도록 하기 위해서는 다음처럼 always-open 속성을 “true”로 지정하면 됩니다.

이 컴포넌트는 키워드를 입력하다가 포커스를 잃어버리면 입력창이 닫히게 되는데 이때 close 이벤트를 제공합니다. 상대적인 이벤트로 open 이벤트는 입력창이 열릴때 호출됩니다.

작성일자

#GWC UI Library : IconButton

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

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

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

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

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

window.onload = () => {
    button1.addEventListener("click", () => { 
        gwcMessage("ADD 버튼 클릭");
    });

    button2.addEventListener("click", () => {
        gwcMessage("CREATE 버튼 클릭");
    });

    button3.addEventListener("click", () => {
        gwcMessage("TOOLS 버튼 클릭");
    });
};

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