설명
dx5.create 함수를 사용하여 컴포넌트 생성 시점의 파라미터(style)를 'list'로 설정한 예제이다.
컴포넌트 스타일은 setUIStyle 함수를 사용한다.
// 파라미터로 스타일 속성이 정의된 json 객체를 넘겨야 한다.
dx.setUIStyle({ ... });
// 예시
dx.setUIStyle({
headerVisible: true, // or false
statusBarVisible: true, // or false
borderVisible: true, // or false
...
});
컴포넌트 화면을 그리는 기술은 SVG 기술을 사용하고 있다. SVG는 브라우저마다 렌더링 되는 결과물이 조금씩 다를 수 있으며, 벡터 그래픽을 기반으로 하기 때문에, pixel 단위로 GUI 레이아웃을 처리하기가 쉽지 않는다. 그러므로 선 굵기와 같은 부분의 미려한 차이는 제품 수준에서 보완되기 어려움이 있다.
예제
기본 레이아웃 스타일 지정 |
|
리스트(LIST) 스타일은 멀티 모듈에서 가장 많이 사용되는 GUI로써 헤더, 상태바, 체크박스 열을 숨길 수 있다.
|
헤더 / 상태바 설정 |
|
헤더 색상에 그레디언트를 적용할 수 있다.
|
배경 설정 |
|
배경은 이미지를 설정할 수 있다.
|
글자 설정 |
|
|
열기, 다운로드 버튼 설정 |
|
|
스크롤바 설정 |
|
|