설명
dx5.create 함수를 사용하여 컴포넌트 생성 시점의 파라미터(style)를 'tile'로 설정한 예제이다.
TILE 스타일은 헤더를 갖지 않으며, 항목의 높이는 고정이다. 가상 파일을 등록할 때, 이미지의 경우 thumb 속성에 웹 경로를 설정하면, 섬네일을 볼 수 있으며, 로컬 이미지 파일은 기본적으로 섬네일 처리가 된다.(JPEG, PNG같은 일부 파일만) 이미지 파일이 많은 경우 섬네일 처리를 위해 파일 정보를 모두 로딩하기 때문에 성능이 저하될 수 있다.
컴포넌트 스타일은 setUIStyle 함수를 사용한다.
// 파라미터로 스타일 속성이 정의된 JSON 객체를 넘겨야 한다.
dx.setUIStyle({ ... });
// 예시
dx.setUIStyle({
statusBarVisible: true, // or false
borderVisible: true, // or false
...
});
컴포넌트 화면을 그리는 기술은 SVG 기술을 사용하고 있다. SVG는 브라우저마다 렌더링 되는 결과물이 조금씩 다를 수 있으며, 벡터 그래픽을 기반으로 하기 때문에, pixel 단위로 GUI 레이아웃을 처리하기가 쉽지 않는다. 그러므로 선 굵기와 같은 부분의 미려한 차이는 제품 수준에서 보완되기 어려움이 있다.
예제
기본 레이아웃 스타일 지정 |
|
|
|
상태바 설정 |
|
|
|
배경 설정 |
|
배경은 이미지를 설정할 수 있다.
|
|
글자 설정 |
|
|
|
열기, 다운로드 버튼 설정 |
|
|