페이지에 ContextHub 추가 및 저장소 액세스 adding-contexthub-to-pages-and-accessing-stores

페이지에 ContextHub를 추가하여 ContextHub 기능을 활성화하고 ContextHub JavaScript 라이브러리에 연결합니다.

ContextHub JavaScript API는 ContextHub에서 관리하는 컨텍스트 데이터에 대한 액세스를 제공합니다. 이 페이지에서는 컨텍스트 데이터에 액세스하고 조작하기 위한 API의 주요 기능에 대해 간략하게 설명합니다. 자세한 정보 및 코드 예를 보려면 API 참조 설명서 링크를 따르십시오.

페이지 구성 요소에 ContextHub 추가 adding-contexthub-to-a-page-component

ContextHub 기능을 활성화하고 ContextHub JavaScript 라이브러리에 연결하려면 페이지의 head 섹션에 contexthub 구성 요소를 포함하십시오. 페이지 구성 요소에 대한 HTL 코드는 다음 예제와 유사해야 합니다.

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

ContextHub 도구 모음을 미리 보기 모드로 표시할지 여부도 구성해야 합니다. ContextHub UI 표시 및 숨기기를 참조하십시오.

ContextHub 저장소 정보 about-contexthub-stores

ContextHub 저장소를 사용하여 컨텍스트 데이터를 유지합니다. ContextHub는 모든 저장소 유형의 기반을 이루는 다음과 같은 저장소 유형을 제공합니다.

모든 저장소 형식은 ContextHub.Store.Core 클래스의 확장입니다. 저장소 형식을 만드는 방법에 대한 자세한 내용은 사용자 지정 저장소 만들기를 참조하십시오. 샘플 저장소 유형에 대한 자세한 내용은 샘플 ContextHub 저장소 후보를 참조하십시오.

지속성 모드 persistence-modes

Context Hub 저장소는 다음 지속성 모드 중 하나를 사용합니다.

기본적으로 Context Hub는 로컬 지속성 모드를 사용합니다. 브라우저가 localStorage를 지원하지 않거나 허용하지 않으면 HTML 지속성이 사용됩니다. 브라우저에서 HTML5 sessionStorage를 지원하지 않거나 허용하지 않는 경우 Window.name 지속성이 사용됩니다.

데이터 저장 store-data

내부적으로 데이터 저장은 트리 구조를 형성하여 기본 유형 또는 복잡한 객체로 값을 추가할 수 있습니다. 저장소에 복잡한 개체를 추가하면 개체 속성이 데이터 트리에서 분기를 형성합니다. 예를 들어 다음 복합 개체가 location이라는 빈 저장소에 추가됩니다.

Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

저장소 데이터의 트리 구조는 다음과 같이 개념화할 수 있습니다.

/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

트리 구조는 저장소의 데이터 항목을 키/값 쌍으로 정의합니다. 위의 예에서 키 /number은(는) 값 321에 해당하고 키 /data/country은(는) 값 Switzerland에 해당합니다.

객체 조작 manipulating-objects

ContextHub에서는 JavaScript 개체를 조작하기 위한 ContextHub.Utils.JSON.tree 클래스를 제공합니다. JavaScript 개체를 저장소에 추가하기 전이나 저장소에서 가져온 후에 이 클래스의 함수를 사용하여 개체를 조작할 수 있습니다.

또한 ContextHub.Utils.JSON 클래스는 개체를 문자열로 serialize하고 문자열을 개체로 deserialize하는 함수를 제공합니다. 기본적으로 JSON.parse 및 JSON.stringify 함수를 포함하지 않는 브라우저를 지원하려면 JSON 데이터를 처리하는 데 이 클래스를 사용하십시오.

ContextHub 스토어와 상호 작용 interacting-with-contexthub-stores

ContextHub JavaScript 개체를 사용하여 저장소를 JavaScript 개체로 가져옵니다. 저장소 개체를 가져오면 포함된 데이터를 조작할 수 있습니다. 저장소를 가져오려면 getAllStores 또는 getStore 함수를 사용하십시오.

저장소 데이터 액세스 accessing-store-data

ContexHub.Store.Core JavaScript 클래스는 저장소 데이터와 상호 작용하기 위한 여러 함수를 정의합니다. 다음 함수는 개체에 포함된 여러 데이터 항목을 저장하고 검색합니다.

개별 데이터 항목은 키/값 쌍 세트로 저장됩니다. 값을 저장하고 검색하려면 해당 키를 지정합니다.

사용자 지정 저장소 후보는 저장소 데이터에 대한 액세스를 제공하는 추가 기능을 정의할 수 있습니다.

ContextHub 이벤트 contexthub-eventing

ContextHub에는 이벤트를 저장하기 위해 자동으로 반응할 수 있는 이벤트 프레임워크가 포함되어 있습니다. 각 저장소 개체에는 저장소의 eventing 속성으로 사용할 수 있는 ContextHub.Utils.Eventing 개체가 있습니다. on 또는 once 함수를 사용하여 JavaScript 함수를 저장소 이벤트에 바인딩하십시오.

Context Hub를 사용하여 쿠키 조작 using-context-hub-to-manipulate-cookies

Context Hub JavaScript API는 브라우저 쿠키를 처리하기 위한 브라우저 간 지원을 제공합니다. ContextHub.Utils.Cookie 네임스페이스는 쿠키를 만들고, 조작하고, 삭제하기 위한 몇 가지 함수를 정의합니다.

해결된 ContextHub 세그먼트 확인 determining-resolved-contexthub-segments

ContextHub 세그먼트 엔진을 사용하면 등록된 세그먼트 중 현재 컨텍스트에서 해결되는 세그먼트를 결정할 수 있습니다. ContextHub.SegmentEngine.SegmentManager 클래스의 getResolvedSegments 함수를 사용하여 확인된 세그먼트를 검색합니다. 그런 다음 ContextHub.SegmentEngine.Segment 클래스의 getName 또는 getPath 함수를 사용하여 세그먼트를 테스트하십시오.

ContextHub 선분 contexthub-segments

ContextHub 세그먼트는 /conf/<site>/settings/wcm/segments 노드 아래에 설치됩니다.

다음 세그먼트는 WKND 자습서 사이트와 함께 설치됩니다.

이러한 세그먼트를 해결하는 데 사용되는 규칙은 다음과 같이 요약됩니다.

ContextHub 디버깅 debugging-contexthub

ContextHub 디버깅을 위한 몇 가지 옵션은 로그 생성을 포함합니다. 자세한 내용은 ContextHub 구성을 참조하십시오.

ContextHub 프레임워크 개요 를 참조하십시오 see-an-overview-of-the-contexthub-framework

ContextHub는 ContextHub 프레임워크의 개요를 볼 수 있는 진단 페이지를 제공합니다.