그룹

그룹은 그룹과 컨트롤을 감싸는 컴포넌트 입니다. 스텝의 최상위 컨텐츠나 그룹 하위의 컨텐츠로 존재할 수 있습니다.

불필요하게 그룹을 감싸면 성능 저하의 원인이 될 수 있습니다.

컨텐츠는 스텝을 구성하는 그룹으로 구성됩니다.

그룹 > 그룹 > 그룹의 형태로 존재 할 수도 있습니다.

스텝에 그룹을 선택하면 Flextudio에서 제공하는 레이아웃 템플릿을 적용하여 화면을 구성할 수 있습니다.

①스텝 하위의 그룹 ②그룹 하위의 그룹 ③그룹 하위의 그룹

Step1의 MemoListGroup 그룹 하위에 속한 InfoGroup 그룹입니다.

디자인(Design) 모드

명칭

사용자가 그룹을 식별하기 위한 별도의 명칭을 그룹에 부여할 수 있습니다.

스타일 유형

그룹을 디자인하지 않고도 다양한 스타일을 사용할 수 있도록 기본적으로 Flextudio에서 제공하는 스타일입니다.

스타일 유형 오른쪽 눈 아이콘을 클릭하면 StylePreview 창을 확인 할 수 있습니다.

스크롤 타입

그룹에서 사용할 스크롤 타입을 선택할 수 있습니다.

버튼추가

디버거에서 실행한 화면

스텝 Step1 > 그룹 ItemList > 그룹 ItemWrap 에 버튼 추가한 모습

1. 더보기 버튼 추가 그룹에 더보기 버튼을 추가하여 상세 데이터 조회 화면으로 이동하는 디자인을 손쉽게 추가할 수 있습니다.

2. 편집 버튼 추가 그룹에 편집 버튼을 추가하여 상세 데이터 수정 화면으로 이동하는 디자인을 손쉽게 추가할 수 있습니다.

고정 그룹

스텝의 최상위 컨텐츠 그룹일때만 사용 가능합니다.

스크롤 동작할 때 고정 시키고 싶은 컨텐츠에 적용하는 기능입니다. 고정이 아닌 컨텐츠에만 스크롤이 적용 됩니다.

추가기능 선택

추가기능 선택은 개발 속성에서 데이터 연결을 활성화 시켰을 경우에만 디자인 속성에서 사용 가능합니다.

1. 사용 안함

   

   사용 안함

2. 체크박스 그룹의 레이아웃에 체크박스 기능을 활성화 시켜 아이템을 체크합니다. 체크박스를 통해 선택한 아이템 섹터(Sector)의 Status를 Selected로 변경합니다.

   

   체크박스

   • 전체선택 버튼 활성화 리스트 전체 선택 및 해제 기능을 쉽게 구현할 수 있습니다.

   

   디버거에서 실행한 화면

1. 추가, 삭제 버튼 추가, 삭제 버튼을 통하여 리스트에 대한 편집이 가능합니다.

   

   추가, 삭제 버튼

   • 항목(행) 삭제 버튼 활성화

     삭제 버튼으로 행을 삭제할 수 있습니다. 삭제 버튼을 클릭하면 섹터의 Status를 Delete로 변경합니다.

   • 항목(행) 추가 버튼 활성화

     추가 버튼으로 행을 추가할 수 있습니다. 추가 버튼을 클릭하면 섹터가 Status Added 상태로 추가됩니다.

   • 버튼명 항목추가 버튼의 명칭을 바꿀 수 있습니다.

   • 최대 항목(행)개수 설정 행의 최대 개수를 설정할 수 있습니다.

   

   디버거에서 실행한 화면

사이즈 고정

부모 그룹이 배치 속성을 사용하고 있을 때 사용할 수 있습니다.

이 기능을 활성화하면 해당 요소는 적용되어 크기가 줄어들지 않도록 고정됩니다.

스플리터 바

부모 그룹이 배치 속성을 사용하고 너비 또는 높이 값이 설정되어 있는 경우에 사용할 수 있습니다.

스플리터 바를 추가하려는 그룹에는 픽셀(px) 단위의 너비 또는 높이 값이 지정되어 있어야 하며 ‘사이즈 고정’ 옵션이 체크되어 있어야 합니다.

스플리터 바는 부모 그룹의 배치 방향에 따라 해당 그룹의 오른쪽 또는 하단에 추가됩니다. 예를 들어 row일 경우 좌우 분할, column일 경우 상하 분할이 적용됩니다.

상하좌우로 드래그해서 위치를 조절할 수 있고, 더 유연한 UI 구성이 가능합니다.

스플리터바 기능은 두 개 이상의 형제 그룹이 있을 때 사이즈 조절이 가능하도록 동작합니다. 그룹이 하나뿐인 경우에는 스플리터바가 표시되더라도 크기 조절은 되지 않습니다.

공통 디자인 속성

스크롤타입

배경

보더

패딩

마진

배치

투명도 설정

고정 레이아웃

개발(Dev) 모드

그룹명(그룹아이디)

사용자가 그룹을 식별하기 위한 별도의 명칭을 그룹에 부여할 수 있습니다. 그룹 아이디는 그룹명의 오른쪽에 위치하고 있습니다. 그룹의 고유 아이디를 나타냅니다.

컨트롤상태

그룹에서는 그룹 숨기기 기능을 사용할 수 있습니다. 자세한 컨트롤 상태 항목은 컴포넌트 상태 페이지를 참고하실 수 있습니다.

로드스크립트

그룹 컴포넌트가 로드 되기 전에 실행되는 스크립트 입니다.

Data

데이터 연결

데이터와 그룹을 연결 할 수 있습니다.

데이터 용도

• 데이터 용도 데이터 사용 용도에 맞는 타입을 고를 수 있습니다.

• 카테고리명 컬렉션에서 해당 카테고리명으로 된 데이터를 연결해줍니다.

이너블럭 연결

최상위 그룹이 아닌 하위 그룹에서 사용할 수 있는 기능입니다.

Event

더보기 버튼 추가 / 편집 버튼 추가

해당 그룹에 버튼을 추가하여 이동할 스텝과 이벤트를 연결 할 수 있습니다.

체크박스를 선택했을 때 화면

더보기 버튼과 편집 버튼은 디자인 속성의 버튼추가 기능으로도 추가할 수 있지만 이벤트 연결은 개발 속성에서 가능합니다.

이벤트 사용

해당 그룹에서 사용할 이벤트를 선택 할 수 있습니다. 그룹에서는 Click, ScrollEnd 두가지의 이벤트 기능을 제공하고 있습니다. [개발 모드] - [컴포넌트] -[이벤트] 페이지에서 더 자세한 내용을 확인 할 수 있습니다.

체크박스를 선택했을 때 화면

클릭 시 스텝 이동

해당 그룹을 클릭 했을 때 스텝 이동을 연결할 수 있고 조건에 맞는 스텝으로 이동합니다.

스텝 이동 타입 에서 더 자세한 내용을 확인 하실 수 있습니다.

공통 개발 속성

컴포넌트 상태

권한키관리

로드스크립트