레이아웃

스텝이나 그룹의 하위에 위치하는 컴포넌트입니다. 컨트롤 컴포넌트로 구성됩니다.

①스텝 하위 레이아웃 ②그룹 하위 레이아웃

컨트롤 컴포넌트로 구성된 레이아웃

디자인(Design) 모드

명칭

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

스타일 유형

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

스크롤 타입

레이아웃에서 사용할 스크롤 타입을 선택할 수 있습니다.

버튼추가

디버거에서 실행한 화면

스텝 Step1 > 그룹 ItemList > 그룹 ItemWrap > 레이아웃 textWrap 에 버튼 추가한 모습

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

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

고정 레이아웃

스텝의 최상위 컨텐츠 레이아웃일때만 사용 가능합니다.

위치 상단에 고정된 레이아웃

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

추가기능 선택

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

1. 사용 안함

   

   사용 안함

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

체크박스

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

디버거에서 실행한 화면

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

   

   추가, 삭제 버튼

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

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

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

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

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

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

   

   디버거에서 실행한 화면

공통 디자인 속성

스크롤타입

배경

보더

패딩

마진

디스플레이

투명도 설정

고정 레이아웃

개발(Dev) 모드

레이아웃명(레이아웃아이디)

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

컨트롤상태

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

로드스크립트

레이아웃 컴포넌트가 로드 되기 전에 실행되는 스크립트 입니다.

Data

데이터 연결

데이터와 레이아웃을 연결 할 수 있습니다.

데이터 용도

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

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

이너블럭 연결

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

Event

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

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

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

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

이벤트 사용

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

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

클릭 시 스텝 이동

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

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

공통 개발 속성

컴포넌트 상태

권한키관리

로드스크립트