UX 마크업 레퍼런스

UX 마크업 레퍼런스

UX 마크업은 UI, 레이아웃, 이펙트, 모션을 표현하는 XML 기반 언어이고, 퓨즈의 중요한 부분입니다. 이 문서는 UX 마크업 언어의 구문과 속성의 의미를 설명합니다.

오브젝트 생성

아래 구문은 App과 App의 자식(App에 포함된)인 Rectangle 객체를 생성합니다.

1
2
3
<App>
    <Rectangle Color="Blue" />
</App>

태그 이름은 우노[Uno] 클래스의 이름입니다. 즉, 위 예제의 App과 Rectangle은 퓨즈 라이브러리에 이미 정의되어 있는 클래스인 것입니다.

노트: 퓨즈 라이브러리를 이용하려면 .unoproj 파일의 Packages에 “Fuse”를 추가해야 합니다. 기본적으로 프로젝트를 생성하면 들어 있습니다.

자동 바인딩(Auto-binding)

어떤 객체가 부모 객에 안에 있을 때, 부모-자식 관계가 만들어 집니다. 기본적으로, UX 마크업은 자식 객체에 바인딩할 수 있는 부모의 적당한 속성을 자동으로 찾아냅니다. 하지만 ux:AutoBind=”false”를 하게 되면 이를 무력화 합니다. 또한, ux:Binding=”TheProperty”를 하게 되면 오로지 TheProperty에 지정한 속성에만 바인딩 됩니다.

오브젝트의 이름 지정하기(ux:Name)

ux:Name을 이용해 접근 가능한 이름을 지정할 수 있습니다.

1
<Rectangle ux:Name="myRectangle" />

이제 myRectangle으로 해당 객체를 조작할 수 있습니다. 이름은 일반적인 변수명과 동일한 규칙이 적용됩니다. 즉, 숫자로 시작할 수 없습니다.

클래스 만들기 (ux:Class)

ux:Class 속성을 이용해 재사용 가능한 클래스(컴포넌트)를 만들 수 있습니다.

1
2
3
4
5
<Panel ux:Class="MyNamespace.MyComponent" Color="Yellow" >
    <WhilePressed>
        <Scale Factor="2" Duration="0.3" Easing="BackOut" />
    </WhilePressed>
</Panel>

이제 아래와 같이 위 클래스의 인스턴스들을 만들 수 있습니다.

1
2
<MyNamespace.MyComponent />
<MyNamespace.MyComponent />

속성 만들기 (ux:Property)

위와 같이 클래스를 만들면 자동으로 부모 클래스의 속성을 상속 받게 됩니다. 게다가 원하는 속성을 추가할 수도 있는데요. 방법은 아래와 같습니다.

1
2
3
4
<Panel ux:Class="MyNamespace.MyComponent" Color="Yellow" >
    <string ux:Property="SomeText" />
    <Text Value="{Property SomeText}" />
</Panel>

그리고 아래와 같이 사용 가능합니다.

1
<MyNamespace.MyComponent SomeText="WonHada!" />

종속성 정의하기 (ux:Dependency)

종속성은 속성과 비슷한 것 같지만 차이점이 있습니다:
– 값을 변경할 수 없습니다.
– 인스턴스를 만들 때만 값을 대입할 수 있습니다.
– 기본 값을 가질 수 없습니다.
– 종속성은 클래스의 스코프 내에서 로컬 이름처럼 사용 가능합니다. 즉, {Property}를 이용할 필요가 없습니다.

1
<Panel ux:Dependency="Content" />

App 태그의 XML 네임스페이스 정의

XML의 네임스페이스를 사용할 수 있습니다.

1
2
3
4
5
6
7
8
<App xmlns:m="MyNamespace">
    <Panel ux:Class="MyNamespace.MyComponent" Color="Yellow" >
        <string ux:Property="SomeText" />
        <Text Value="{Property SomeText}" />
    </Panel>
   
    <m:MyComponent SomeText="WonHada!!" />
</App>

외부의 UX 파일 가져오기 (ux:Include)

아래와 같이 외부의 .ux 파일을 불러들일 수 있습니다.

1
<ux:Include File="Resources.ux" />

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles