API를 사용한 사용자정의 섹션 레이아웃 개발

렌더링 API 및 편집 API가 포함된 섹션 레이아웃 API를 사용하여 Oracle Content Management에서 사용자정의 섹션 레이아웃을 개발할 수 있습니다.

스타터 파일을 보려면 섹션 레이아웃 생성을 참조하십시오. 섹션 레이아웃의 스타터 파일에는 섹션 레이아웃 파일 구조에 대한 세부정보가 포함된 주석이 있습니다.

렌더링 API

render.js 모듈에서 로드된 렌더링 API는 사이트 작성기에서 런타임에 사용됩니다.

렌더링 API 설명 입력 매개변수 반환 결과

렌더링 API	설명	입력 매개변수	반환 결과
(생성자)	섹션 레이아웃 렌더링 모듈을 초기화합니다.	다음 속성을 포함하는 JavaScript 객체: sectionlayoutData (객체): 페이지 모델이 있는 섹션 레이아웃 데이터입니다. componentId (문자열): 섹션 레이아웃의 `componentId` 값입니다(일반적으로 GUID). renderMode (문자열, 선택사항): 렌더링 작업의 렌더링 모드입니다. customSettingsData (객체): `sectionLayoutData`에 있는 `customSettingsData`의 복사본입니다.	섹션 레이아웃 렌더링 API가 초기화됩니다.
render	하위 구성요소에 대한 컨테이너 DIV를 포함하여 섹션 레이아웃에 적합한 DOM 요소를 페이지로 내보냅니다.	container (요소): 섹션 레이아웃의 마크업이 렌더링되는 DOM 요소입니다.	이 메소드가 반환된 후 하위 구성요소가 렌더링됩니다. 하위 `div[id]` 요소를 찾아서 하위 구성요소를 식별할 수 있습니다.
addComponent	콘텐츠 목록 구성요소와 함께 사용되어 하위 구성요소를 섹션 레이아웃에 동적으로 추가합니다. 이 함수는 선택사항입니다.	container (요소): 새 구성요소가 렌더링되는 DOM 요소입니다. componentId (문자열): 섹션 레이아웃에 추가할 새 구성요소의 ID입니다.	이 메소드가 반환된 후 `componentId` 입력과 ID가 일치하는 요소가 렌더링됩니다.

(생성자)

섹션 레이아웃 렌더링 모듈을 초기화합니다.

다음 속성을 포함하는 JavaScript 객체:

sectionlayoutData (객체): 페이지 모델이 있는 섹션 레이아웃 데이터입니다.
componentId (문자열): 섹션 레이아웃의 componentId 값입니다(일반적으로 GUID).
renderMode (문자열, 선택사항): 렌더링 작업의 렌더링 모드입니다.
customSettingsData (객체): sectionLayoutData에 있는 customSettingsData의 복사본입니다.

섹션 레이아웃 렌더링 API가 초기화됩니다.

render

하위 구성요소에 대한 컨테이너 DIV를 포함하여 섹션 레이아웃에 적합한 DOM 요소를 페이지로 내보냅니다.

container (요소): 섹션 레이아웃의 마크업이 렌더링되는 DOM 요소입니다.

이 메소드가 반환된 후 하위 구성요소가 렌더링됩니다.

하위 div[id] 요소를 찾아서 하위 구성요소를 식별할 수 있습니다.

addComponent

콘텐츠 목록 구성요소와 함께 사용되어 하위 구성요소를 섹션 레이아웃에 동적으로 추가합니다.

이 함수는 선택사항입니다.

container (요소): 새 구성요소가 렌더링되는 DOM 요소입니다.

componentId (문자열): 섹션 레이아웃에 추가할 새 구성요소의 ID입니다.

이 메소드가 반환된 후 componentId 입력과 ID가 일치하는 요소가 렌더링됩니다.

편집 API

섹션 레이아웃과 연관된 appinfo.json 파일에서 hasEditHandlers 속성이 true로 설정된 경우 edit.js 모듈이 로드됩니다.

편집 API는 사이트 작성기에서 사용됩니다.

생성자를 제외한 이 모듈의 모든 함수는 선택사항입니다.

편집 API	설명	입력 매개변수	반환 결과
(생성자)	섹션 레이아웃 편집 모듈을 초기화합니다.	다음 속성을 포함하는 JavaScript 객체: componentId (문자열): 섹션 레이아웃의 `componentId` 값입니다(일반적으로 GUID).	섹션 레이아웃 편집 API가 초기화됩니다.
getCapabilities	섹션 레이아웃의 편집 기능을 설명하는 객체를 반환합니다.	섹션 레이아웃의 편집 기능을 설명하는 JavaScript 객체입니다. 입력 시 기본 기능이 함수에 제공됩니다. 함수는 필요에 따라 Capabilities 객체를 수정할 수 있습니다. Capabilities 객체는 다음 기능을 포함할 수 있습니다. title (문자열): 사용자에게 표시할 섹션 레이아웃의 제목입니다. settingsTitle (문자열): 설정 패널 대화상자에 표시할 제목입니다. hasSettings (부울): 섹션 레이아웃이 설정 패널을 지원하는지 나타냅니다. allowMove (부울): 섹션 레이아웃에서 하위 항목을 이동할 수 있는지 나타냅니다. allowDelete (부울): 섹션 레이아웃에서 하위 항목을 삭제할 수 있는지 나타냅니다. isHidden (부울): 섹션 레이아웃이 사용자 옵션에 응답하여 현재 숨겨져 있는지 나타냅니다. dropTarget (부울): 섹션 레이아웃이 끌어 놓기 작업의 대상인지 나타냅니다. customMenuOptions (배열): 섹션 레이아웃 컨텍스트 메뉴에 추가할 사용자정의 메뉴 옵션입니다. 각 메뉴 옵션 객체에는 다음 속성이 있습니다. label (문자열): 메뉴 항목의 표시 텍스트입니다. action (함수): 메뉴 항목을 누를 때 호출할 함수입니다. disabled (부울): 메뉴 항목이 사용 안함 상태로 표시되어야 하는지 나타냅니다. icon (문자열): 메뉴 항목의 레이블 옆에 표시할 URL입니다. (이 속성은 나중에 사용하도록 예약되어 있습니다.) checkmark (부울): 메뉴 항목의 레이블 옆에 선택 표시가 있어야 하는지 나타냅니다. subMenuItems (배열): 하위 메뉴에 표시할 메뉴 옵션입니다.	(객체): 섹션 레이아웃의 기능입니다.
getCaptionContent	UI 요소로 나타나는 섹션 레이아웃 표시 이름을 반환합니다.	없음.	(문자열): 섹션 레이아웃의 표시 이름입니다.
filterCapabilities	사용자에게 메뉴를 표시하기 전에 섹션 레이아웃에서 Capabilities 객체를 수정할 수 있습니다. 이 API를 사용하여 메뉴 옵션을 조정하거나 제거할 수 있습니다. (getCapabilities도 참조하십시오.)	섹션 레이아웃의 편집 기능을 설명하는 JavaScript 객체입니다. 입력 시 기본 기능이 함수에 제공됩니다.	(객체) 섹션 레이아웃의 기능입니다.
onDragOver	끌어 놓기 작업 중 호출되어 끌어온 항목을 섹션 레이아웃에 놓을 수 있는지 나타냅니다.	eventObject (이벤트 객체): 끌기 이벤트에 대한 정보를 보유한 이벤트 객체입니다. dataTransfer (DataTransfer 객체): 섹션 레이아웃 위로 끌어올 항목에 대한 정보를 보유한 `DataTransfer` 객체입니다.	(부울) 끌어온 항목을 섹션 레이아웃에서 수락할 수 있는지 나타내는 값입니다. 섹션 레이아웃이 끌어온 항목을 수락할 수 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
onDrop	끌어 놓기 작업의 놓기 부분 중 호출되어 끌어온 항목을 섹션 레이아웃 안에 놓아야 하는지 나타냅니다.	eventObject (이벤트 객체): 놓기 이벤트에 대한 정보를 보유한 이벤트 객체입니다. dataTransfer (DataTransfer 객체): 섹션 레이아웃에 놓을 항목에 대한 정보를 보유한 DataTransfer 객체입니다.	(부울) 놓기 작업이 섹션 레이아웃에서 처리되었는지 나타내는 값입니다. true를 반환하면 기본 논리가 무시됩니다.
onAddComponent	끌어 놓기 작업이 섹션 레이아웃에서 항목을 추가했음을 섹션 레이아웃에 알립니다.	eventObject (이벤트 객체): 끌기 이벤트에 대한 정보를 보유한 이벤트 객체입니다. dataTransfer (DataTransfer 객체): 섹션 레이아웃에 놓을 항목에 대한 정보를 보유한 DataTransfer 객체입니다. componentId (문자열): 새로 추가된 항목의 `componentId` 값입니다.	섹션 레이아웃 통지입니다.
onMoveComponent	끌어 놓기 작업이 섹션 레이아웃에서 항목을 이동했음을 섹션 레이아웃에 알립니다.	eventObject (이벤트 객체): 끌기 이벤트에 대한 정보를 보유한 이벤트 객체입니다. dataTransfer (DataTransfer 객체): 섹션 레이아웃에 놓을 항목에 대한 정보를 보유한 DataTransfer 객체입니다. componentId (문자열): 이동된 항목의 `componentId` 값입니다.	섹션 레이아웃 통지입니다.
getSettingsData	설정 패널을 표시하기 전에 섹션 레이아웃에서 설정 데이터를 변경할 수 있습니다.	settingsData (객체): 섹션 레이아웃에 대해 계산된 기본 설정 데이터입니다.	(객체) 섹션 레이아웃에 대한 설정 데이터입니다.
updateSettings	설정 패널을 닫은 후에 섹션 레이아웃에서 해당 설정을 변경할 수 있습니다. 이 API는 페이지 모델에 설정이 저장되기 직전에 호출됩니다.	parameters (객체): 설정 패널에서 반환된 원시 매개변수 객체입니다. sectionLayoutData (객체): 저장될 섹션 레이아웃 데이터입니다. 기본 데이터는 `parameters (객체)`에서 생성되어 이 매개변수의 함수로 전달됩니다.	(객체) 페이지 모델에 저장할 섹션 레이아웃 데이터입니다.
dispose	편집 모듈이 메모리를 비우고 이벤트를 분리하며 편집 처리기와 연관된 리소스 할당을 해제할 수 있습니다. 이 API는 실행 취소/재실행 작업의 경우처럼 섹션 레이아웃을 완전히 다시 그려야 할 때 호출됩니다.	없음.	섹션 레이아웃 다시 그리기가 사용으로 설정됩니다.