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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. UX 마크업

UX 마크업

UX 마크업 레퍼런스

UX Markup은 사용자 인터페이스, 레이아웃, 이펙트 및 모션을 표현하기 위한 XML기반 언어입니다. UX 마크업은 퓨즈의 필수 요소입니다.

이 챕터에서는 UX 마크업 언어의 내장 구문 및 속성의 의미에 대해 설명합니다.

이 챕터의 다른 주제를 탐색하려면 왼쪽에 있는 메뉴를 이용하세요.

개요

오브젝트 만들기

UX 마크업 요소의 기본 기능은 특정 클래스의 객체를 생성(인스턴스화)하는 것입니다. 예를 들어, 다음 스니펫은 App 및 Rectangle 클래스의 인스턴스를 만들고 Rectangle을 App의 자식으로 만듭니다.

<App>
    <Rectangle Color="Blue" />
</App>

요소(element) 태그의 이름은 프로젝트에서 액세스 할 수 있는 Uno 클래스의 이름입니다. 위의 예에서 App과 Rectangle은 퓨즈 라이브러리 내에 미리 정의된 클래스입니다.

프로젝트에서 퓨즈 라이브러리를 액세스하려면 .unoproj의 Packages 섹션에 “Fuse”가 추가되어 있어야 합니다.

계층 구조 만들기

하나의 요소(자식)가 UX 마크업에서 다른 요소(부모) 안에 배치되면 바깥 요소를 부모(parent) 요소(혹은 객체)라고 부르며, 내부 요소를 자식(child) 요소(혹은 객체)라고 합니다.

<Grid Rows="1*,1*">
    <Rectangle Color="Blue" Margin="10" />
    <Rectangle Color="Blue" Margin="10" />
</Grid>

기본적으로 UX 마크업은 자식 요소를 바인딩할 수 있는 부모 요소의 적합한 속성을 찾습니다.

주어진 자식 요소에 대해 이 동작을 사용하지 않으려면 ux:AutoBind=”false”를 지정할 수 있습니다. 이렇게 하면 나중에 로직에 의해 앱에 추가할 수 있는 느슨한 오브젝트가 앱 내에 생성됩니다.

부모의 특정 속성에 바인딩하려면 ux:Binding=”TheProperty”를 지정할 수 있습니다. 이렇게 하면 요소에 대한 자동 바인딩이 비활성화되고 TheProperty에 바인딩 됩니다.

재사용 가능한 클래스 만들기 (ux:Class)

UX 요소 트리는 ux:Class 속성을 사용하여 재사용 가능한 클래스(컴포넌트)로 변환할 수 있습니다.

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

이렇게 하면 MyNamespace 네임스페이스에 MyComponent라는 새 하위 클래스 Panel이 만들어집니다. 네임스페이스는 선택사항이지만 다른 프로젝트에서 다시 사용할 수 있도록 컴포넌트를 만들 때 이름 충돌을 피하기 위해 권장됩니다.

클래스가 생성되면 내장 클래스와 마찬가지로 인스턴스화 할 수 있습니다.

<MyNamespace.MyComponent />

각각의 ux:Class는 새로운 루트 범위를 만듭니다. 즉, 클래스 내부의 노드는 클래스 외부의 이름 (ux:Name)에 액세스 할 수 없습니다. 이것은 종속성을 명시적으로 주입해야 함을 의미합니다.

App 태그

App(앱) 태그는 프로젝트의 최상위 루트입니다.

<App>
    <!-- 앱이 여기서부터 시작됩니다. -->
</App>

App 태그는 사실상 파일 확장자명을 뺀 프로젝트 파일명을 사용한 ux:Class 입니다. ux:Class를 수동으로 지정하여 앱 클래스에 다른 이름을 지정할 수도 있습니다.

<App ux:Class="MyNamespace.MyApp" />

App 태그가 포함되지 않은 프로젝트는 실제 앱이 아닌 다른 프로젝트에서 참조할 수 있는 컴포넌트 패키지를 생성합니다.

네임스페이스(Namespaces)

UX 마크업은 XML 네임스페이스(xmlns)를 지원하지만 코드의 복잡함을 피하기 위해 적절한 기본값으로 미리 설정되어 있습니다. 이것이 UX 마크업 파일에서 거의 사용되지 않는 이유입니다.

기본 XML 네임스페이스(xmlns)는 모든 표준 퓨즈 네임스페이스를 가리키고 있으므로 클래스(예: App 및 Rectangle)는 전체 네임 스페이스 한정자없이 사용할 수 있습니다.

다른 클래스의 경우 태그의 클래스의 정규화된 이름을 직접 사용할 수 있습니다.

<App>
    <MyNamespace.MyClass />
</App>

또는 사용자 지정 xmlns 선언을 지정할 수 있습니다.

<App xmlns:m="MyNamespace">
    <m:MyClass />
</App>

UX 파일 포함하기 (ux:Include)

ux:Include를 사용하여 다른 UX 파일의 내용을 포함할 수 있습니다:

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

ux:Include는 글꼴, 이미지, 색상 등과 같은 정적 리소스를 별도의 파일로 선언할 때 유용합니다.

그러나 뷰의 일부를 파일로 분할하는 것은 권장되지 않습니다. 보다 나은 접근법은 컴포넌트 생성하기 문서를 참조하십시오.

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No

How can we help?