반응형 웹스퀘어8 웹스퀘어 그리드 컨트롤 웹스퀘어 그리드 컨트롤이번 포스팅은 웹스퀘어 Grid 컨트롤 기능을 구현 및 알아본다. 자바스크립트 프레임워크나 라이브러리들은 대부분 그리드(grid)를 자체적으로 구현해 놓은 경우가 대다수다. 만든 이들이 다를 뿐 개념은 거의 비슷하다고 할 수 있다. 1. 공통점으로는 서버에서 가져온 데이터를 갖고 있는 객체가 있다. 2. 그리드는 html 객체다. Grid 객체가 존재한다. 3. 1과 2가 바인딩 또는 매핑 된다. 결국 서버에서 가져온 데이터 객체 + Html로 구현한 그리드 객체 두 개가 서로 매핑되어 상화보완 작용을 한다고 판단하면 된다. 이 원리를 머릿속에 이해하고 있다면 그리 어렵지 않게 제공된 API를 참고해서 일반적으로 많이 사용하는 기능을 충분히 구현할 수 있다. 이번에 구현해 볼 기능은.. 2023. 5. 14. 웹스퀘어 팝업 기능 구현 websquare5 웹스퀘어 팝업 기능 구현 websquare5 이번 포스팅에서는 웹스퀘어 프레임워크에서 팝업 기능을 구현해 본다. 웹스퀘어 만든 회사에서 제공하는 com 라이브러리를 이용하면 API 예제보다는 조금 더 쉽게 구현이 가능하다. 자바스크립과 html으로 팝업을 호출하는 기능을 구현한 경험이 있다면 난이도가 그리 어렵지는 않다. 구현할 기능 1. 메인화면과 팝업 화면이 있다. 메인화면에서 텍스트 박스에서 부서명을 입력하고 팝업 버튼을 클릭하면 팝업 화면이 뜬다. 2. 팝업 화면에서는 메인화면에서 전달한 부서명 파라미터를 받아 자동으로 텍스트 박스 검색조건에 바인딩이 되고 조회 버튼을 누르면 그리드에 부서정보가 조회된다. 3. 그리드에서 원하는 부서를 더블 클릭하면 팝업이 닫히고 메인화면으로 돌아온다. 이때 팝업.. 2023. 5. 6. 웹스퀘어 그리드 부모 자식 1:N 조회 구성 웹스퀘어 그리드 부모 자식 1:N 조회 구성 부서정보가 조회되고 해당 부서에 마우스를 클릭하면 하단 사원정보 그리드에 해당 부서의 속한 사원리스트가 나오는 화면을 구성해 본다. 두 가지 방법이 존재한다. 1. 부서정보의 그리드를 클릭할 때마다 서버와 통신을 해서 사원정보를 조회하는 방법 2. 최초에 조회를 할 때, 부서정보 전체와 사원정보 전체를 모두 서버로부터 갖고 와서 사원정보를 필터 형태로 그리드에서 나타내게 하는 방법. 두 가지 방법대로 장단점이 존재하는데. 2번 방법의 경우 데이터가 많다면 문제가 된다. 데이터가 많다면 초기 로딩이 문제가 될 텐데 막상 로딩 후에는 빠르게 필터링이 된다. 1번의 경우 단점은 역시 서버와 통신이 너무 잦다는 것. 하지만 최신 정보를 가져올 수 있다. 처음에는 빠르.. 2023. 5. 5. 웹스퀘어 selectbox 바인딩 웹스퀘어 selectbox 바인딩 데이터베이스에서 사원이나 부서 정보를 읽어서 웹스퀘어 화면의 SelectBox에 바인딩하는 예제를 만들어 본다. 누군가 만들어 놓은 함수를 사용해서 빠르게 구현하는 것도 좋은 방법이다. 구현할 기능 및 구성 하지만, 이번 포스팅에서는 1. 직접 데이터 맵에 자료를 입력해서 셀렉트 박스에 바인딩하는 케이스 - 사원정보 2. 서버 통신으로 셀렉트 박스에 바인딩하는 케이스 - 부서정보 두 가지 케이스를 만들어 본다. 데이터컬렉션 셀렉트 박스에 대응될 데이터 컬렉션(맵, 리스트) 사원, 부서 객체를 두개 만든다. 두 데이터맵 리스트에 각각 하드코딩으로 사원정보, 서버에서 읽어온 부서정보 등의 정보를 담아 바인딩시킨 후 확인해 본다. 실행 결과 결과는 아래와 같다. 프로그램이 실.. 2023. 5. 5. 웹스퀘어 객체(아이템) 위치 변경 웹스퀘어 객체(아이템) 위치 변경 1. 웹스퀘어 SelectBox 하드코딩 삽질. 우선 selectBox 콤보 박스를 설정하는 건데 이건 api 보고 addItem api를 사용해서 설정하거나 데이터베이스, 컨트롤러로 세팅하는 것도 가능한데 문제는... 하드코딩으로 세팅하는 방법을 도통 모르겠다. 유투브 보니 selectBox 마우스 커서 대고 더블클릭하니 세팅창이 뜬다. 하.............. 2. 웹스퀘어 객체 setPosition 삽질. api 보고 그리드나 그룹을 위치를 바꾸러 하는데 setPosition 함수가 안 먹네... 친절하지 않은 설명서...그 어디에도 스타일시트에 postion를 absolute로 설정을 했을 경우만 가능하다는 도움말 따위는 없더라. 내가 못 찾은 건가? 두 시간.. 2023. 5. 3. 웹스퀘어 서버통신 Submission 간단예제 웹스퀘어 서버통신 Submission 간단 예제 1. 서버와 통신하는 버튼하나 만들고 2. 서브미션하나 만든다. 파라미터는 없고 map 로 userName, userAge 라는 키의 값을 받는다. 3. 스프링 컨트롤러 하나 만듦. map 로 userName, userAge 값 리턴하는... 4. 통신 결과 오는 e 객체에 대해 알아본다. 사실. 통신 결과를 Json으로 받는데 이건 웹스퀘어도 아니고 그저 서브미션을 까보면 ajax, fetch, axios 이런 자바스크립 통신 기능이 나오지 않을까? 이런 건 까고 앉아 있으면 프레임워크를 쓰는 의미가 없으니 굳이 까진 않겠다. 웹스퀘어 Script scwin.onpageload = function() { }; scwin.onpageunload = func.. 2023. 5. 2. 이전 1 2 다음 반응형
