이 화면은 로우박스 컴포넌트에 대한 샘플 화면이다.
로우박스 컴포넌트는 반응형 디자인 유형으로 화면 구성시, 화면내 컴포넌트의 배치를 위한 블럭 단위의 컨테이너 컴포넌트이다.
반응형 디자인의 화면 해상도가 변경되어도 수평 스크롤없이(수직 스크롤은 허용) 사용자가 UI를 사용하는 디자인을 의미한다.
xFrame5 솔루션은 반응형 디자인을 구현하기 위해서 국제 표준인 미디어 쿼리 기반의 기술을 사용한다.
미디어 쿼리의 설정은 xframe5.css 파일에 정의되어 있으며, ExtraSmall(xs), Small(sm), Medium(md), Large(lg)의 4가지 크기로 구분한다.
크기별 해상도 범위는 포르젝트 표준에 따라 변경해서 사용한다.
로우박스 컴포넌트는 반응형 디자인을 구현하기 12컬럼 기준 레이아웃 형태를 사용한다.
화면 배치 기준에 따라 로우박스 아이템을 병합해서 사용한다.
로우박스 아이템 내부에는 로우박스를 제외한 컴포넌트는 하나의 컴포넌트만 배치가 가능하다.
주로 로우박스 아이템 내부에 패널/탭 컴포넌트를 생성하고, position 속성을 1:relative로 설정후, 내부에 다른 컴포넌트를 배치하여 구성한다.
position 속성이 1:relative로 설정된 컴포넌트들에 대해서, 화면 표시시에 화면 위치를 기준으로 중간 여백 없이 연속적으로 표시된다.
관련 속성으로 position, display_mode, height_type, rowbox가 있다.
관련 이벤트로 on_itemclick, on_size가 있다.
관련 아이템 속성으로 xs_colspan, sm_colspan, md_colspan, lg_colspan가 있다.
// 화면 로드 이벤트
function screen_on_load()
{
this.rowbot_top.setsortable(200);
this.rowbox_bot.setsortable(200);
screen.setsortable(200);
}