Azure Pack 관리 포털 Client-Side 확장 템플릿 Windows
적용 대상: Windows Azure Pack
헬로 월드 샘플 Visual Studio Project 경로: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates 및 Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates
확장에 필요한 HTML을 템플릿에 넣고 매니페스트에 정의해야 합니다. 그러면 Windows 서버 관리 포털용 Windows Azure Pack이 로드될 때 템플릿이 브라우저에 로드됩니다.
확장의 HTML은 jsRender 템플릿 엔진(참조 http://borismoore.github.com/jsviews/demos/index.html 및 관련 블로그 게시물)에 http://www.borismoore.com/ 의해 처리됩니다. 템플릿 태그({{ 및 }})를 사용하지 않으면 템플릿의 HTML이 있는 그대로 출력됩니다.
템플릿은 포함된 요소(일반적으로 div) 내에서 렌더링됩니다. 포함하는 요소에 유효한 HTML 코드 조각이 있어야 합니다. 템플릿 처리는 템플릿으로 대체할 값을 조회할 때 사용되는 데이터 개체의 컨텍스트 내에서 발생합니다. 다음은 div 요소 내에서 템플릿 태그의 예입니다.
<div class="aux-readonlyvalue">
{{if domain.hasExpiry == true}}
<span>Expiration data</span>
<div>{{>domain.ExpiryDate}}</div>
{{/if}}
</div>
렌더링 템플릿
확장의 템플릿은 템플릿 매니페스트의 이름 특성으로 참조됩니다. 컨텍스트 개체는 명시적 또는 암시적일 수 있습니다. 예를 들어 확장에 대한 탭을 정의하려면 다음과 같은 탭 정의 배열을 설정해야 합니다.
navigation = {
tabs: [
{
id: "domains",
displayName: "domains",
template: "domainsTab",
activated: loadDomainsTab
}
]
}
템플릿 매니페스트의 이름 특성 값과 일치하는 "template" 매개 변수를 확인합니다. 컨텍스트 개체는 최상위 탭인 경우 클라이언트 쪽 프레임워크에서 암시적으로 빈 개체로 설정됩니다. 즉, 항목에 드릴인되지 않거나 드릴인 탭인 경우 이전에 선택한 항목이 됩니다.
일부 함수는 명시적 컨텍스트 개체를 사용하여 렌더링할 수 있습니다. 예를 들어 간단한 1단계 마법사를 만들려면 다음을 수행합니다.
cdm.stepWizard({
extension: "DomainTenantExtension",
steps: [{
template: "createStep1",
data: data,
onStepCreated: function () {
wizard = this;
},
onStepActivate: step1Activate,
onNextStep: function () {
return Shell.UI.Validation.validateContainer("#dm-create-step1");
}
}]
},
{ size: "mediumplus" });
데이터 매개 변수는 템플릿 "createStep1"의 컨텍스트 개체로 사용됩니다. 이로 인해 jsRender는 변수를 확인할 때 데이터 개체의 속성을 확인합니다.