퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. UX 마크업
  4. 템플릿 (ux:Template)

템플릿 (ux:Template)

UX 마크업의 ux:Template 속성은 XML 요소에 배치될 때 지정된 XML 요소와 전체 하위 트리가 템플릿(Uno.UX.Template)임을 지정합니다. 템플릿은 런타임에 UX 마크업 트리 복사본을 임의로 생성할 수 있습니다.

구문

1
<type ux:Template="template_name" />

여기서 type은 유효한 UX 마크업 유형이고 template_name은 유효한 Uno 식별자입니다.

비고

템플릿은 다음과 같은 몇 가지 상황에서 사용됩니다.

  • 반복자 내부에서 컨텐츠 노드는 암시적으로 템플릿입니다.
  • 내에서 일반 노드 대신 페이지 템플릿을 제공하여 Navigator가 필요할 때마다 각 페이지 템플릿의 새 복사본을 작성할 수 있습니다.

템플릿 인스턴스의 ux:Name

ux:Template로 표시된 노드 내부에서, 현재 템플릿의 현재 사본(인스턴스)은 ux:Name을 사용하여 같은 이름으로 명명된 것과 같은 방식으로 template_name에 의해 참조될 수 있습니다.

예를 들어, 포함된 태그에서 템플릿 인스턴스를 이름으로 참조할 수 있습니다.

1
2
3
<Page ux:Template="homePage">
    <JavaScript>
        homePage.Parameter.onValueChanged(module, function() { ...

또한 일반적으로 UX 마크업에서 표현식에 페이지 이름을 사용할 수 있습니다:

1
2
<Page ux:Template="homePage">
    <Rectangle LayoutMaster="homePage" ... />

컴포넌트 사용자 정의를 위한 템플릿 사용

템플릿을 사용하면 보여지는 것에 사용되는 사용자 정의 요소를 가져 와서 컴포넌트의 사용자 정의 가능성을 높일 수 있습니다. 예를 들어, PageIndicator 요소는 PageControl의 각 페이지에 대한 템플릿에서 요소를 생성합니다. 요소는 ux:Template 속성을 해당 템플릿을 식별할 키로 설정하여 템플릿으로 만듭니다. 이 키는 적절한 템플릿을 찾을 때 템플릿 수용 요소로 사용됩니다.

템플릿은 Each를 사용하여 그립니다. Each에는 TemplateSource라는 속성이 있습니다.이 속성은 Each가 템플릿을 가져 오는 요소를 지정합니다. 앞서 언급했듯이 템플릿은 키를 사용하여 자신을 식별합니다. Each 키는 TemplateKey 속성을 사용하여 지정된 템플릿을 찾습니다.

일반적인 TemplateSource는 Each를 가진 ux:Class 입니다:

1
2
3
4
5
<StackPanel ux:Class="CoolRepeater" Background="#FAD">
    <Each TemplateSource="this" TemplateKey="Item" Count="20" />
        <Text>Default template</Text>
    </Each>
</StackPanel>

이 템플릿은 20번 반복되는 템플릿을 허용하는 사용자 정의된 컴포넌트입니다. 템플릿이 제공되지 않으면 각 템플릿은 기본 템플릿으로 폴백됩니다. 그런 다음 사용자 지정 컴포넌트를 다음과 같이 사용할 수 있습니다:

1
2
3
<CoolRepeater>
    <Text ux:Template="Item">Hello, world!</Text>
</CoolRepeater>
Was this article helpful to you? Yes No

How can we help?