GridView로 DataCollection을 바인딩해 편리하게 데이터를 표현가능

 

행과 열 / 헤더 바디 풋터 설정 후 활용

-------------------------------------------------------------------------------

정렬 : gridView의 헤더 클릭시 정렬 지원

-> property에서 sortable 옵션을 정의하여 사용

 

필터 : 대상건의 값을 사용자가 조건을 정의하여 필터 처리 가능

-> property에서 useFilterList 옵션을 정의하여 사용

 

컬럼이동 : gridView 헤더를 마우스로 drag하여 컬럼을 이동할 수 있는 기능

-> property에서 columnMove 옵션을 정의하여 사용

 

이외 API를 활용한 엑셀 다운 / 컬럼 동적 변경 설정 등등 가능

-------------------------------------------------------------------------------

 

table 활용

 

기본으로 table을 만들고 1td에 제목을 쓰고 2td에 inputbox, selectbox 등을 삽입하고 css를 주었다

 

table property ->

adaptive : layout

adaptiveThreshod : 700 을 주어 반응형 효과를 줄 수 있다.

 

 

 

'개발자로 업그레이드 되자 > WebSquare' 카테고리의 다른 글

WebSquare (2) 요소 및 Property  (0) 2022.04.02
WebSquare (1) 기본세팅  (0) 2022.04.02

Palette를 통해 요소들을 드래그&드롭 할 수 있고

 

이 요소들에 각각 Property를 줘서 여러가지 CSS, JS와 비슷한 효과를 줄 수 있다.

 

[ InputBox ] Property

---------------------------------------------------------------------------

1. placeholder - 기존의 placeholder와 비슷한 효과를 준다

 

2. initValue - 박스에 기본값을 부여한다.

 

3. displayFormat - 박스의 값에 형식을 부여한다.

예시)dateType이 number일 경우 #,###.#0 으로 적용하면 3자리수 마다 ,가 찍히며 소수점 2자리까지 표현된다.

※ 이 기능은 박스에 focus가 없는 경우에만 적용되며 박스 클릭 시 포맷이 다시 돌아온다.

focus에 관계없이 적용하려면 : applyFormat 속성값을 all 로 준다.

 

4. id , class - id 과 class 를 부여한다.

id를 등록하면 해당 요소가 스크립트에서 전역변수로 선언된다.

( doucment.getElementById 와 같은 효과 )

예시) id.setValue( 값 ) = 값이 부여되는 스크립트

※ initValue 와 setValue를 같이 쓰면 setValue 값이 최종으로 적용된다.

---------------------------------------------------------------------------

[ Spinner ] => 버튼을 이용해 필드 값 증감 표현

---------------------------------------------------------------------------

[ Secret ] => input type = "password"와 유사한 인터페이스

---------------------------------------------------------------------------

[ SearchBox ] => InputBox와 유사하지만 x아이콘이 제공되 클릭 시 입력값 지움

---------------------------------------------------------------------------

[ InputCalendar ] => Calendar 컴포넌트 + Input 컴포넌트 복합

---------------------------------------------------------------------------

[ TextBox ] => 긴 문장에 사용

---------------------------------------------------------------------------

[ Span ] =>짧은 글자나 변경되는 값에 사용

---------------------------------------------------------------------------

[ Image] =>이미지 표현

---------------------------------------------------------------------------

[ Checkbox] =>체크박스

---------------------------------------------------------------------------

[ MultiSelect ] => Ctrl 키로 여러 항목 선택 가능

---------------------------------------------------------------------------

[ SelectBox] => select tag 기능

---------------------------------------------------------------------------

 

'개발자로 업그레이드 되자 > WebSquare' 카테고리의 다른 글

WebSquare (3) GridView & table  (0) 2022.04.03
WebSquare (1) 기본세팅  (0) 2022.04.02

새로 취직한 곳 WMS 프로젝트에서 WebSquare를 사용한다고 한다

 

기존에 html css js만 사용하다 쓰려니 오히려 낯설고 불편해서 더 공부가 필요할 것 같다.

 

인스웨이브의 강의를 보며 개념을 정리해 본다.

 

기본적으로 이클립스에서 인스웨이브 엔진을 돌려 xml -> html , js로 변환되어 화면이 완성되는 것 같다.

 

학습용 프로젝트

경로에서 WebContent에 xml을 만들어 화면을 만들 수 있다.

라이브러리들을 넣어놓고 web.xml에 servlet으로 엔진 설치를 할 수 있다고 한다.

 

손가락 모양을 눌러 Run에 동작될 브라우저를 설정하고 디폴트도 설정할 수 있다.

 

'개발자로 업그레이드 되자 > WebSquare' 카테고리의 다른 글

WebSquare (3) GridView & table  (0) 2022.04.03
WebSquare (2) 요소 및 Property  (0) 2022.04.02

+ Recent posts